From c74552bfede501db94dc955251850208c021810a Mon Sep 17 00:00:00 2001
From: abbyhu2000 <abigailhu2000@gmail.com>
Date: Fri, 14 Oct 2022 23:21:39 +0000
Subject: [PATCH] Change classname prefix wiz to vb

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>
---
 CHANGELOG.md                                       |  1 +
 .../wizard/public/application/_variables.scss      |  2 +-
 src/plugins/wizard/public/application/app.scss     |  6 +++---
 src/plugins/wizard/public/application/app.tsx      | 12 ++++++------
 .../components/data_tab/config_panel.scss          |  4 ++--
 .../components/data_tab/config_panel.tsx           |  4 ++--
 .../components/data_tab/field_selector.scss        |  2 +-
 .../components/data_tab/field_selector.tsx         |  6 +++---
 .../components/data_tab/field_selector_field.scss  |  2 +-
 .../components/data_tab/field_selector_field.tsx   |  4 ++--
 .../application/components/data_tab/index.scss     |  2 +-
 .../application/components/data_tab/index.tsx      |  2 +-
 .../components/data_tab/schema_to_dropbox.tsx      |  2 +-
 .../components/data_tab/secondary_panel.tsx        |  4 ++--
 .../application/components/data_tab/title.tsx      |  2 +-
 .../public/application/components/left_nav.tsx     |  4 ++--
 .../public/application/components/option.scss      |  2 +-
 .../public/application/components/option.tsx       |  4 ++--
 .../public/application/components/right_nav.tsx    |  8 ++++----
 .../components/searchable_dropdown.scss            |  2 +-
 .../application/components/searchable_dropdown.tsx |  2 +-
 .../public/application/components/side_nav.scss    | 10 +++++-----
 .../public/application/components/top_nav.scss     |  2 +-
 .../public/application/components/top_nav.tsx      |  2 +-
 .../public/application/components/workspace.scss   |  8 ++++----
 .../public/application/components/workspace.tsx    | 14 +++++++-------
 .../public/embeddable/disabled_visualization.scss  |  2 +-
 .../public/embeddable/disabled_visualization.tsx   |  2 +-
 28 files changed, 59 insertions(+), 58 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 282baefa8132..68ec68d26e0e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,6 +22,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 * [Multi DataSource] Add experimental callout for index pattern section ([#2523](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2523))
 * [Multi DataSource] Add data source config to opensearch-dashboards-docker ([#2557](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2557))
 * [Multi DataSource] Make text content dynamically translated & update unit tests ([#2570](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2570))
+* [Vis Builder] Change classname prefix wiz to vb ([#2581](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2581/files))
 
 ### 🐛 Bug Fixes
 * [Vis Builder] Fixes auto bounds for timeseries bar chart visualization ([2401](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2401))
diff --git a/src/plugins/wizard/public/application/_variables.scss b/src/plugins/wizard/public/application/_variables.scss
index da530e2e46a4..e72314b3a3bc 100644
--- a/src/plugins/wizard/public/application/_variables.scss
+++ b/src/plugins/wizard/public/application/_variables.scss
@@ -6,4 +6,4 @@
 @import "@elastic/eui/src/global_styling/variables/form";
 
 $osdHeaderOffset: $euiHeaderHeightCompensation;
-$wizLeftNavWidth: 462px;
+$vbLeftNavWidth: 462px;
diff --git a/src/plugins/wizard/public/application/app.scss b/src/plugins/wizard/public/application/app.scss
index f4a73eb3ecd4..7e1a0b12ada9 100644
--- a/src/plugins/wizard/public/application/app.scss
+++ b/src/plugins/wizard/public/application/app.scss
@@ -4,12 +4,12 @@
  */
 @import "variables";
 
-.wizLayout {
+.vbLayout {
   padding: 0;
   display: grid;
   grid-template:
     "topNav topNav" min-content
-    "leftNav workspaceNav" 1fr / #{$wizLeftNavWidth} 1fr;
+    "leftNav workspaceNav" 1fr / #{$vbLeftNavWidth} 1fr;
   height: calc(100vh - #{$osdHeaderOffset});
 
   &__resizeContainer {
@@ -22,6 +22,6 @@
   }
 }
 
-.headerIsExpanded .wizLayout {
+.headerIsExpanded .vbLayout {
   height: calc(100vh - #{$osdHeaderOffset * 2});
 }
diff --git a/src/plugins/wizard/public/application/app.tsx b/src/plugins/wizard/public/application/app.tsx
index 52a0f537646e..bdf6936ee969 100644
--- a/src/plugins/wizard/public/application/app.tsx
+++ b/src/plugins/wizard/public/application/app.tsx
@@ -18,14 +18,14 @@ export const WizardApp = () => {
   return (
     <I18nProvider>
       <DragDropProvider>
-        <EuiPage className="wizLayout">
+        <EuiPage className="vbLayout">
           <TopNav />
           <LeftNav />
-          <EuiResizableContainer className="wizLayout__resizeContainer">
+          <EuiResizableContainer className="vbLayout__resizeContainer">
             {(EuiResizablePanel, EuiResizableButton) => (
               <>
                 <EuiResizablePanel
-                  className="wizLayout__workspaceResize"
+                  className="vbLayout__workspaceResize"
                   paddingSize="none"
                   initialSize={80}
                   minSize="300px"
@@ -33,9 +33,9 @@ export const WizardApp = () => {
                 >
                   <Workspace />
                 </EuiResizablePanel>
-                <EuiResizableButton className="wizLayout__resizeButton" />
+                <EuiResizableButton className="vbLayout__resizeButton" />
                 <EuiResizablePanel
-                  className="wizLayout__rightNavResize"
+                  className="vbLayout__rightNavResize"
                   paddingSize="none"
                   initialSize={20}
                   minSize="250px"
@@ -45,7 +45,7 @@ export const WizardApp = () => {
                       position: 'top',
                     },
                   ]}
-                  id="wizRightResize"
+                  id="vbRightResize"
                 >
                   <RightNav />
                 </EuiResizablePanel>
diff --git a/src/plugins/wizard/public/application/components/data_tab/config_panel.scss b/src/plugins/wizard/public/application/components/data_tab/config_panel.scss
index 0ba8c29bdc56..ba5ee2e401cb 100644
--- a/src/plugins/wizard/public/application/components/data_tab/config_panel.scss
+++ b/src/plugins/wizard/public/application/components/data_tab/config_panel.scss
@@ -2,7 +2,7 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-.wizConfig {
+.vbConfig {
   @include euiYScrollWithShadows;
 
   background: $euiColorLightestShade;
@@ -42,7 +42,7 @@
     }
   }
 
-  &.showSecondary > .wizConfig__section {
+  &.showSecondary > .vbConfig__section {
     transform: translateX(-100%);
   }
 }
diff --git a/src/plugins/wizard/public/application/components/data_tab/config_panel.tsx b/src/plugins/wizard/public/application/components/data_tab/config_panel.tsx
index be0ec12bbff2..ec3b6b60a096 100644
--- a/src/plugins/wizard/public/application/components/data_tab/config_panel.tsx
+++ b/src/plugins/wizard/public/application/components/data_tab/config_panel.tsx
@@ -23,8 +23,8 @@ export function ConfigPanel() {
   const mainPanel = mapSchemaToAggPanel(schemas);
 
   return (
-    <EuiForm className={`wizConfig ${editingState ? 'showSecondary' : ''}`}>
-      <div className="wizConfig__section">{mainPanel}</div>
+    <EuiForm className={`vbConfig ${editingState ? 'showSecondary' : ''}`}>
+      <div className="vbConfig__section">{mainPanel}</div>
       <SecondaryPanel />
     </EuiForm>
   );
diff --git a/src/plugins/wizard/public/application/components/data_tab/field_selector.scss b/src/plugins/wizard/public/application/components/data_tab/field_selector.scss
index b9b75a8a260d..88cca98db86e 100644
--- a/src/plugins/wizard/public/application/components/data_tab/field_selector.scss
+++ b/src/plugins/wizard/public/application/components/data_tab/field_selector.scss
@@ -4,7 +4,7 @@
  */
 @import "../../util";
 
-.wizFieldSelector {
+.vbFieldSelector {
   @include scrollNavParent(auto 1fr);
 
   padding: $euiSizeS;
diff --git a/src/plugins/wizard/public/application/components/data_tab/field_selector.tsx b/src/plugins/wizard/public/application/components/data_tab/field_selector.tsx
index da1020413b26..6d3831363c1b 100644
--- a/src/plugins/wizard/public/application/components/data_tab/field_selector.tsx
+++ b/src/plugins/wizard/public/application/components/data_tab/field_selector.tsx
@@ -66,13 +66,13 @@ export const FieldSelector = () => {
   );
 
   return (
-    <div className="wizFieldSelector">
+    <div className="vbFieldSelector">
       <div>
         <form>
           <FieldSearch value={fieldSearchValue} />
         </form>
       </div>
-      <div className="wizFieldSelector__fieldGroups">
+      <div className="vbFieldSelector__fieldGroups">
         {/* Count Field */}
         <FieldSelectorField
           field={{
@@ -102,7 +102,7 @@ interface FieldGroupProps {
 const FieldGroup = ({ fields, header, id }: FieldGroupProps) => (
   <EuiAccordion
     id={id}
-    className="wizFieldSelector__fieldGroup"
+    className="vbFieldSelector__fieldGroup"
     buttonContent={
       <EuiTitle size="xxxs">
         <span>{header}</span>
diff --git a/src/plugins/wizard/public/application/components/data_tab/field_selector_field.scss b/src/plugins/wizard/public/application/components/data_tab/field_selector_field.scss
index a7f093ad22a1..c129f7a997a1 100644
--- a/src/plugins/wizard/public/application/components/data_tab/field_selector_field.scss
+++ b/src/plugins/wizard/public/application/components/data_tab/field_selector_field.scss
@@ -2,7 +2,7 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-.wizFieldSelectorField {
+.vbFieldSelectorField {
   @include euiBottomShadowSmall;
 
   background-color: $euiColorEmptyShade;
diff --git a/src/plugins/wizard/public/application/components/data_tab/field_selector_field.tsx b/src/plugins/wizard/public/application/components/data_tab/field_selector_field.tsx
index 10acd5aa62f3..a87e2d184eed 100644
--- a/src/plugins/wizard/public/application/components/data_tab/field_selector_field.tsx
+++ b/src/plugins/wizard/public/application/components/data_tab/field_selector_field.tsx
@@ -65,7 +65,7 @@ export const FieldSelectorField = ({ field }: FieldSelectorFieldProps) => {
     <span
       data-test-subj={`field-${field.name}`}
       title={field.name}
-      className="wizFieldSelectorField__name"
+      className="vbFieldSelectorField__name"
     >
       {wrapOnDot(field.displayName)}
     </span>
@@ -73,7 +73,7 @@ export const FieldSelectorField = ({ field }: FieldSelectorFieldProps) => {
 
   return (
     <FieldButton
-      className="wizFieldSelectorField"
+      className="vbFieldSelectorField"
       isActive={infoIsOpen}
       onClick={togglePopover}
       dataTestSubj={`field-${field.name}-showDetails`}
diff --git a/src/plugins/wizard/public/application/components/data_tab/index.scss b/src/plugins/wizard/public/application/components/data_tab/index.scss
index d242eac4ee2c..764ed72fd373 100644
--- a/src/plugins/wizard/public/application/components/data_tab/index.scss
+++ b/src/plugins/wizard/public/application/components/data_tab/index.scss
@@ -4,7 +4,7 @@
  */
 @import "../../util";
 
-.wizDataTab {
+.vbDataTab {
   @include scrollNavParent;
 
   display: grid;
diff --git a/src/plugins/wizard/public/application/components/data_tab/index.tsx b/src/plugins/wizard/public/application/components/data_tab/index.tsx
index 1f880f20698d..5f71e38141d3 100644
--- a/src/plugins/wizard/public/application/components/data_tab/index.tsx
+++ b/src/plugins/wizard/public/application/components/data_tab/index.tsx
@@ -13,7 +13,7 @@ export const DATA_TAB_ID = 'data_tab';
 
 export const DataTab = () => {
   return (
-    <div className="wizDataTab">
+    <div className="vbDataTab">
       <FieldSelector />
       <ConfigPanel />
     </div>
diff --git a/src/plugins/wizard/public/application/components/data_tab/schema_to_dropbox.tsx b/src/plugins/wizard/public/application/components/data_tab/schema_to_dropbox.tsx
index 37c55e25be99..518a6ae7af2f 100644
--- a/src/plugins/wizard/public/application/components/data_tab/schema_to_dropbox.tsx
+++ b/src/plugins/wizard/public/application/components/data_tab/schema_to_dropbox.tsx
@@ -16,7 +16,7 @@ export const mapSchemaToAggPanel = (schemas: Schemas) => {
   return (
     <>
       <Title title="Configuration" />
-      <div className="wizConfig__content">{panelComponents}</div>
+      <div className="vbConfig__content">{panelComponents}</div>
     </>
   );
 };
diff --git a/src/plugins/wizard/public/application/components/data_tab/secondary_panel.tsx b/src/plugins/wizard/public/application/components/data_tab/secondary_panel.tsx
index 086140bdb13a..f7e160bb1b54 100644
--- a/src/plugins/wizard/public/application/components/data_tab/secondary_panel.tsx
+++ b/src/plugins/wizard/public/application/components/data_tab/secondary_panel.tsx
@@ -95,11 +95,11 @@ export function SecondaryPanel() {
   );
 
   return (
-    <div className="wizConfig__section wizConfig--secondary">
+    <div className="vbConfig__section vbConfig--secondary">
       <Title title={selectedSchema?.title ?? 'Edit'} isSecondary closeMenu={closeMenu} />
       {showAggParamEditor && (
         <DefaultEditorAggParams
-          className="wizConfig__aggEditor"
+          className="vbConfig__aggEditor"
           agg={aggConfig!}
           indexPattern={indexPattern!}
           setValidity={handleSetValid}
diff --git a/src/plugins/wizard/public/application/components/data_tab/title.tsx b/src/plugins/wizard/public/application/components/data_tab/title.tsx
index 8083efd05b0b..0d50aad0fb47 100644
--- a/src/plugins/wizard/public/application/components/data_tab/title.tsx
+++ b/src/plugins/wizard/public/application/components/data_tab/title.tsx
@@ -23,7 +23,7 @@ export const Title = ({ title, isSecondary, closeMenu }: TitleProps) => {
   );
   return (
     <>
-      <div className="wizConfig__title">
+      <div className="vbConfig__title">
         <EuiFlexGroup gutterSize="s" alignItems="center">
           {icon && <EuiFlexItem grow={false}>{icon}</EuiFlexItem>}
           <EuiFlexItem>
diff --git a/src/plugins/wizard/public/application/components/left_nav.tsx b/src/plugins/wizard/public/application/components/left_nav.tsx
index 2825d9778744..a4aa72bcff06 100644
--- a/src/plugins/wizard/public/application/components/left_nav.tsx
+++ b/src/plugins/wizard/public/application/components/left_nav.tsx
@@ -10,8 +10,8 @@ import { DataTab } from './data_tab';
 
 export const LeftNav = () => {
   return (
-    <section className="wizSidenav left">
-      <div className="wizDatasourceSelect wizSidenav__header">
+    <section className="vbSidenav left">
+      <div className="vbDatasourceSelect vbSidenav__header">
         <DataSourceSelect />
       </div>
       <DataTab key="containerName" />
diff --git a/src/plugins/wizard/public/application/components/option.scss b/src/plugins/wizard/public/application/components/option.scss
index 8bb394c260e8..7410489ad0b7 100644
--- a/src/plugins/wizard/public/application/components/option.scss
+++ b/src/plugins/wizard/public/application/components/option.scss
@@ -1,4 +1,4 @@
-.wizOption {
+.vbOption {
   background-color: $euiColorEmptyShade;
   padding: $euiSizeM;
 
diff --git a/src/plugins/wizard/public/application/components/option.tsx b/src/plugins/wizard/public/application/components/option.tsx
index 7440bb0825c0..0f1f79c7ecbd 100644
--- a/src/plugins/wizard/public/application/components/option.tsx
+++ b/src/plugins/wizard/public/application/components/option.tsx
@@ -18,11 +18,11 @@ export const Option: FC<Props> = ({ title, children, initialIsOpen = false }) =>
       <EuiAccordion
         id={title}
         buttonContent={title}
-        className="wizOption"
+        className="vbOption"
         initialIsOpen={initialIsOpen}
       >
         <EuiSpacer size="s" />
-        <EuiPanel color="subdued" className="wizOption__panel">
+        <EuiPanel color="subdued" className="vbOption__panel">
           {children}
         </EuiPanel>
       </EuiAccordion>
diff --git a/src/plugins/wizard/public/application/components/right_nav.tsx b/src/plugins/wizard/public/application/components/right_nav.tsx
index ea7c3e17eab6..74a88b3ab534 100644
--- a/src/plugins/wizard/public/application/components/right_nav.tsx
+++ b/src/plugins/wizard/public/application/components/right_nav.tsx
@@ -36,8 +36,8 @@ export const RightNav = () => {
   }));
 
   return (
-    <section className="wizSidenav right">
-      <div className="wizSidenav__header">
+    <section className="vbSidenav right">
+      <div className="vbSidenav__header">
         <EuiSuperSelect
           options={options}
           valueOfSelected={activeVisName}
@@ -48,7 +48,7 @@ export const RightNav = () => {
           data-test-subj="chartPicker"
         />
       </div>
-      <div className="wizSidenav__style">
+      <div className="vbSidenav__style">
         <StyleSection />
       </div>
       {newVisType && (
@@ -90,7 +90,7 @@ export const RightNav = () => {
 
 const OptionItem = ({ icon, title }: { icon: IconType; title: string }) => (
   <>
-    <EuiIcon type={icon} className="wizTypeSelector__icon" />
+    <EuiIcon type={icon} className="vbTypeSelector__icon" />
     <span>{title}</span>
   </>
 );
diff --git a/src/plugins/wizard/public/application/components/searchable_dropdown.scss b/src/plugins/wizard/public/application/components/searchable_dropdown.scss
index be8d6144df3a..4de43233d1ef 100644
--- a/src/plugins/wizard/public/application/components/searchable_dropdown.scss
+++ b/src/plugins/wizard/public/application/components/searchable_dropdown.scss
@@ -22,7 +22,7 @@
   }
 
   &--fixedWidthChild {
-    width: calc(#{$wizLeftNavWidth} - #{$euiSizeXL} * 2);
+    width: calc(#{$vbLeftNavWidth} - #{$euiSizeXL} * 2);
   }
 
   &--selectableWrapper .euiSelectableList {
diff --git a/src/plugins/wizard/public/application/components/searchable_dropdown.tsx b/src/plugins/wizard/public/application/components/searchable_dropdown.tsx
index 3ff8300e8d48..36d926457da3 100644
--- a/src/plugins/wizard/public/application/components/searchable_dropdown.tsx
+++ b/src/plugins/wizard/public/application/components/searchable_dropdown.tsx
@@ -107,7 +107,7 @@ export const SearchableDropdown = ({
       displayError(error)
     ) : (
       <>
-        <EuiPopoverTitle paddingSize="s" className="wizPopoverTitle">
+        <EuiPopoverTitle paddingSize="s" className="vbPopoverTitle">
           {search}
         </EuiPopoverTitle>
         {list}
diff --git a/src/plugins/wizard/public/application/components/side_nav.scss b/src/plugins/wizard/public/application/components/side_nav.scss
index 025e42d08170..1a69071a697e 100644
--- a/src/plugins/wizard/public/application/components/side_nav.scss
+++ b/src/plugins/wizard/public/application/components/side_nav.scss
@@ -5,7 +5,7 @@
 @import "../util";
 @import "../variables";
 
-.wizSidenav {
+.vbSidenav {
   @include scrollNavParent(auto 1fr);
 
   &.left {
@@ -30,11 +30,11 @@
   }
 }
 
-.wizTypeSelector__icon {
+.vbTypeSelector__icon {
   margin-right: $euiSizeS;
 }
 
-.wizSidenavTabs {
+.vbSidenavTabs {
   .euiTab__content {
     text-transform: capitalize;
   }
@@ -46,6 +46,6 @@
   }
 }
 
-.wizDatasourceSelect {
-  max-width: calc(#{$wizLeftNavWidth} - 1px);
+.vbDatasourceSelect {
+  max-width: calc(#{$vbLeftNavWidth} - 1px);
 }
diff --git a/src/plugins/wizard/public/application/components/top_nav.scss b/src/plugins/wizard/public/application/components/top_nav.scss
index cad0e3eebee2..36349ed8cdba 100644
--- a/src/plugins/wizard/public/application/components/top_nav.scss
+++ b/src/plugins/wizard/public/application/components/top_nav.scss
@@ -2,7 +2,7 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-.wizTopNav {
+.vbTopNav {
   grid-area: topNav;
   border-bottom: $euiBorderThin;
 }
diff --git a/src/plugins/wizard/public/application/components/top_nav.tsx b/src/plugins/wizard/public/application/components/top_nav.tsx
index 470babdf782f..ab23aa563e91 100644
--- a/src/plugins/wizard/public/application/components/top_nav.tsx
+++ b/src/plugins/wizard/public/application/components/top_nav.tsx
@@ -69,7 +69,7 @@ export const TopNav = () => {
   });
 
   return (
-    <div className="wizTopNav">
+    <div className="vbTopNav">
       <TopNavMenu
         appName={PLUGIN_ID}
         config={config}
diff --git a/src/plugins/wizard/public/application/components/workspace.scss b/src/plugins/wizard/public/application/components/workspace.scss
index 9e4d79faa278..c06e60607665 100644
--- a/src/plugins/wizard/public/application/components/workspace.scss
+++ b/src/plugins/wizard/public/application/components/workspace.scss
@@ -8,7 +8,7 @@ $animation-multiplier: 5;
 $total-duartion: $animation-time * $animation-multiplier;
 $keyframe-multiplier: 1 / $animation-multiplier;
 
-.wizWorkspace {
+.vbWorkspace {
   display: grid;
   -ms-grid-rows: auto $euiSizeM 1fr;
   grid-template-rows: auto 1fr;
@@ -27,19 +27,19 @@ $keyframe-multiplier: 1 / $animation-multiplier;
   }
 
   &__handFieldSvg {
-    animation: wizDragAnimation #{$total-duartion}s ease-in-out infinite forwards;
+    animation: vbDragAnimation #{$total-duartion}s ease-in-out infinite forwards;
     position: absolute;
     top: 34.5%;
   }
 }
 
 @media (prefers-reduced-motion) {
-  .wizWorkspace__handFieldSvg {
+  .vbWorkspace__handFieldSvg {
     animation: none;
   }
 }
 
-@keyframes wizDragAnimation {
+@keyframes vbDragAnimation {
   0% {
     transform: none;
   }
diff --git a/src/plugins/wizard/public/application/components/workspace.tsx b/src/plugins/wizard/public/application/components/workspace.tsx
index 1aa58a272dff..470e9c05dbb8 100644
--- a/src/plugins/wizard/public/application/components/workspace.tsx
+++ b/src/plugins/wizard/public/application/components/workspace.tsx
@@ -72,13 +72,13 @@ export const Workspace: FC = ({ children }) => {
   }, [data.query.state$]);
 
   return (
-    <section className="wizWorkspace">
-      <EuiFlexGroup className="wizCanvasControls">
+    <section className="vbWorkspace">
+      <EuiFlexGroup className="vbCanvasControls">
         <EuiFlexItem>
           <ExperimentalInfo />
         </EuiFlexItem>
       </EuiFlexGroup>
-      <EuiPanel className="wizCanvas" data-test-subj="visualizationLoader">
+      <EuiPanel className="vbCanvas" data-test-subj="visualizationLoader">
         {expression ? (
           <ReactExpressionRenderer
             expression={expression}
@@ -86,16 +86,16 @@ export const Workspace: FC = ({ children }) => {
             uiState={uiState}
           />
         ) : (
-          <EuiFlexItem className="wizWorkspace__empty" data-test-subj="emptyWorkspace">
+          <EuiFlexItem className="vbWorkspace__empty" data-test-subj="emptyWorkspace">
             <EuiEmptyPrompt
               title={<h2>Add a field to start</h2>}
               body={
                 <>
                   <p>Drag a field to the configuration panel to generate a visualization.</p>
-                  <span className="wizWorkspace__container">
-                    <EuiIcon className="wizWorkspace__fieldSvg" type={fields_bg} size="original" />
+                  <span className="vbWorkspace__container">
+                    <EuiIcon className="vbWorkspace__fieldSvg" type={fields_bg} size="original" />
                     <EuiIcon
-                      className="wizWorkspace__handFieldSvg"
+                      className="vbWorkspace__handFieldSvg"
                       type={hand_field}
                       size="original"
                     />
diff --git a/src/plugins/wizard/public/embeddable/disabled_visualization.scss b/src/plugins/wizard/public/embeddable/disabled_visualization.scss
index 792bb1777ad6..825ff4d73223 100644
--- a/src/plugins/wizard/public/embeddable/disabled_visualization.scss
+++ b/src/plugins/wizard/public/embeddable/disabled_visualization.scss
@@ -2,7 +2,7 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-.wizDisabledVisualization {
+.vbDisabledVisualization {
   width: 100%;
   display: grid;
   grid-gap: $euiSize;
diff --git a/src/plugins/wizard/public/embeddable/disabled_visualization.tsx b/src/plugins/wizard/public/embeddable/disabled_visualization.tsx
index 04b8bf234541..7391589dd01d 100644
--- a/src/plugins/wizard/public/embeddable/disabled_visualization.tsx
+++ b/src/plugins/wizard/public/embeddable/disabled_visualization.tsx
@@ -11,7 +11,7 @@ import './disabled_visualization.scss';
 
 export function DisabledVisualization({ title }: { title: string }) {
   return (
-    <div className="wizDisabledVisualization">
+    <div className="vbDisabledVisualization">
       <EuiIcon type="beaker" size="xl" />
       <div>
         <FormattedMessage