Rename kui-spaced class names

[sayuree]

Description

Replaced kui-spaced class names

Issues Resolved

closes #3386

Check List

• All tests pass
  • yarn test:jest
  • yarn test:jest_integration
  • yarn test:ftr
• New functionality includes testing.
• New functionality has been documented.
• Update CHANGELOG.md
• Commits are signed per the DCO using --signoff

[codecov-commenter]

Codecov Report

Merging #3855 (ab4767e) into main (725a2a1) will decrease coverage by 0.05%.
The diff coverage is n/a.

❗ Current head ab4767e differs from pull request most recent head 937852a. Consider uploading reports for the commit 937852a to get more accurate results

📣 This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

@@            Coverage Diff             @@
##             main    #3855      +/-   ##
==========================================
- Coverage   66.47%   66.42%   -0.05%     
==========================================
  Files        3209     3209              
  Lines       61615    61733     +118     
  Branches     9504     9534      +30     
==========================================
+ Hits        40956    41008      +52     
- Misses      18386    18438      +52     
- Partials     2273     2287      +14     

Flag	Coverage Δ
Linux	66.37% <ø> (-0.05%)	⬇️
Windows	66.37% <ø> (-0.05%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...s/public/embeddable/disabled_lab_visualization.tsx	0.00% <ø> (ø)

... and 67 files with indirect coverage changes

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[joshuarrrr]

@sayuree This is a good start, but there are a couple of things we need to do first.

For any UI changes, it's important to know where (and under what circumstances the component in question is rendered). So the first step here is to figure out what you need to to to actually see the <div className="visDisabledLabVisualization"> component rendered, so that you can effectively validate the changes and take screenshots.

Once you do that, I think it's likely we can refactor that component in a way to remove these classes altogether, and replace the bare <div> elements with the correct components from https://oui.opensearch.org/1.0/#/.

For example, The first div with the kuiIcon class will likely become an component: https://oui.opensearch.org/1.0/#/display/icons

[joshuarrrr]

@sayuree Just checking in to see if you're still able to make some of the changes requested.

[sayuree]

@sayuree Just checking in to see if you're still able to make some of the changes requested.

@joshuarrrr I was busy with adding changes to other PRs, currently, working on this issue.

[BSFishy]

If you need help navigating OUI, feel free to ping me :)

[sayuree]

If you need help navigating OUI, feel free to ping me :)

@joshuarrrr I have some issues with navigating a page where these elements are being used/rendered. Since it is not located in components folder, but rather in embeddable I was not able to find an exact place it is being used to capture and replace with OUI library items. I tried using logging to detect, I have looked through all possible pages. Can you please give some guidance on this issue?

[joshuarrrr]

@joshuarrrr I have some issues with navigating a page where these elements are being used/rendered. Since it is not located in components folder, but rather in embeddable I was not able to find an exact place it is being used to capture and replace with OUI library items. I tried using logging to detect, I have looked through all possible pages. Can you please give some guidance on this issue?

@sayuree See this video - you'll need to navigate to a dashboard that's using a visualization type that's marked as experimental (after changing the advanced settings to disable experimental visualizations):

Screen.Recording.2023-06-20.at.4.39.27.PM.mov

But before you do any further mitigation, let's get some improved guidance from UX.

@KrooshalUX Can we get an updated design for this placeholder component, with a list of components to use? I'm leaning toward just https://oui.opensearch.org/1.0/#/display/text with paragraph tags 🤷

[KrooshalUX]

@joshuarrrr

• This placeholder text and icon should be replaced with OuiEmptyPrompthttps://oui.opensearch.org/1.2/#/display/empty-prompt
• The wording should be updated to remove "lab" and "lab mode" as those are Kibana terms - we also want to remove the word "please" as it doesn't align with our language styleguide. So the new text would read "[vispanel title] is an experimental visualization. Enable experimental visualizations within Advanced Settings. "
• A link to Advanced Settings should be placed in the message as well - and - ideally after Update navigation pattern within Advanced Settings #4329 is completed, Visualizations panel will have a pathway we can deep link to.

[joshuarrrr]

@sayuree I'm going to mark this as a draft for now until you have time to revisit it.

[yvonnewangg]

Hi, can I take this one?

[joshuarrrr]

@yvonnewangg Please see #5462 for the latest progress on this issue.

[ananzh]

@sayuree Due to an extended period without updates, we're going to close this issue for now. We appreciate your contribution and understand that priorities and availability can change. Please feel free to reopen this issue when you have the opportunity to revisit it. Thank you for your understanding.