[VisBuilder] Change classname prefix wiz to vb

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))

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;

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});
 }

src/plugins/wizard/public/application/app.tsx

@@ -18,24 +18,24 @@ 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"
                   mode="main"
                 >
                   <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>

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%);
   }
 }

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>
   );

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;

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>

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;

src/plugins/wizard/public/application/components/data_tab/field_selector_field.tsx

@@ -65,15 +65,15 @@ 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>
   );
 
   return (
     <FieldButton
-      className="wizFieldSelectorField"
+      className="vbFieldSelectorField"
       isActive={infoIsOpen}
       onClick={togglePopover}
       dataTestSubj={`field-${field.name}-showDetails`}

src/plugins/wizard/public/application/components/data_tab/index.scss

@@ -4,7 +4,7 @@
  */
 @import "../../util";
 
-.wizDataTab {
+.vbDataTab {
   @include scrollNavParent;
 
   display: grid;

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>

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>
     </>
   );
 };

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}

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>

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" />

src/plugins/wizard/public/application/components/option.scss

@@ -1,4 +1,4 @@
-.wizOption {
+.vbOption {
   background-color: $euiColorEmptyShade;
   padding: $euiSizeM;
 

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>

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>
   </>
 );

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 {

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}

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);
 }

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;
 }

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}

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;
   }

src/plugins/wizard/public/application/components/workspace.tsx

@@ -72,30 +72,30 @@ 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}
             searchContext={searchContext}
             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"
                     />

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;

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