[BUG] Fixing style overriding issue in dashboards core vizBuilder (#1451

) * rename class names causing style overriding on visbuilder core dashboards Signed-off-by: Eric <[email protected]> * update snapshots Signed-off-by: Eric <[email protected]> --------- Signed-off-by: Eric <[email protected]>
opensearch-project · Feb 19, 2024 · 63a8806 · 63a8806
1 parent 8f62e88
commit 63a8806
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 8 deletions.
diff --git a/...r/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.scss b/...r/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.scss
@@ -41,7 +41,7 @@
   }
 }
 
-.vbConfig {
+.logExplorerVisConfig {
   @include euiYScrollWithShadows;
 
   background: $euiColorLightestShade;
@@ -82,7 +82,7 @@
     }
   }
 
-  &.showSecondary > .vbConfig__section {
+  &.showSecondary > .logExplorerVisConfig__section {
     transform: translateX(-100%);
   }
 }
diff --git a/...er/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx b/...er/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx
@@ -343,7 +343,7 @@ export const DataConfigPanelItem = ({
     const selectedObj = isTimeStampSelected ? configList[SPAN] : configList[name][index];
     const isAggregations = name === AGGREGATIONS;
     return (
-      <div className={'vbConfig__section vbConfig--secondary'}>
+      <div className={'logExplorerVisConfig__section logExplorerVisConfig--secondary'}>
         <div className="services">
           <div className="first-division">
             <DataConfigItemClickPanel
@@ -538,9 +538,9 @@ export const DataConfigPanelItem = ({
   return isAddConfigClicked ? (
     getCommonUI(selectedConfigItem.name)
   ) : (
-    <EuiForm className={'vbConfig'}>
-      <div className="vbConfig__section">
-        <div className="vbConfig__title">
+    <EuiForm className={'logExplorerVisConfig'}>
+      <div className="logExplorerVisConfig__section">
+        <div className="logExplorerVisConfig__title">
           <EuiFlexGroup gutterSize="s" alignItems="center">
             <EuiFlexItem>
               <EuiTitle size="xxs">
@@ -550,7 +550,7 @@ export const DataConfigPanelItem = ({
           </EuiFlexGroup>
         </div>
         {visualizations.vis.name !== VIS_CHART_TYPES.Histogram ? (
-          <div className="vbConfig__content">
+          <div className="logExplorerVisConfig__content">
             <EuiSpacer size="s" />
             {DataConfigPanelFields(getRenderFieldsObj(AGGREGATIONS))}
             <EuiHorizontalRule margin="m" />
@@ -577,7 +577,7 @@ export const DataConfigPanelItem = ({
             {getNumberField('bucketOffset')}
           </>
         )}
-        <div className="vbConfig__content">
+        <div className="logExplorerVisConfig__content">
           <EuiFlexItem grow={false}>
             <EuiButton
               data-test-subj="visualizeEditorRenderButton"

diff --git a/...grations/components/__tests__/__snapshots__/available_integration_card_view.test.tsx.snap b/...grations/components/__tests__/__snapshots__/available_integration_card_view.test.tsx.snap
@@ -271,6 +271,7 @@ exports[`Available Integration Card View Test Renders nginx integration card vie
                                 className="euiButtonContent__icon"
                                 color="inherit"
                                 size="m"
+                                title="list"
                                 type="list"
                               >
                                 <EuiIconBeaker
@@ -279,9 +280,12 @@ exports[`Available Integration Card View Test Renders nginx integration card vie
                                   focusable="false"
                                   role="img"
                                   style={null}
+                                  title="list"
+                                  titleId="random_html_id"
                                 >
                                   <svg
                                     aria-hidden={true}
+                                    aria-labelledby="random_html_id"
                                     className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                     focusable="false"
                                     height={16}
@@ -291,6 +295,11 @@ exports[`Available Integration Card View Test Renders nginx integration card vie
                                     width={16}
                                     xmlns="http://www.w3.org/2000/svg"
                                   >
+                                    <title
+                                      id="random_html_id"
+                                    >
+                                      list
+                                    </title>
                                     <path
                                       d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                                     />
@@ -384,6 +393,7 @@ exports[`Available Integration Card View Test Renders nginx integration card vie
                                 className="euiButtonContent__icon"
                                 color="inherit"
                                 size="m"
+                                title="grid"
                                 type="grid"
                               >
                                 <EuiIconBeaker
@@ -392,9 +402,12 @@ exports[`Available Integration Card View Test Renders nginx integration card vie
                                   focusable="false"
                                   role="img"
                                   style={null}
+                                  title="grid"
+                                  titleId="random_html_id"
                                 >
                                   <svg
                                     aria-hidden={true}
+                                    aria-labelledby="random_html_id"
                                     className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                     focusable="false"
                                     height={16}
@@ -404,6 +417,11 @@ exports[`Available Integration Card View Test Renders nginx integration card vie
                                     width={16}
                                     xmlns="http://www.w3.org/2000/svg"
                                   >
+                                    <title
+                                      id="random_html_id"
+                                    >
+                                      grid
+                                    </title>
                                     <path
                                       d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                                     />

diff --git a/...rations/components/__tests__/__snapshots__/available_integration_table_view.test.tsx.snap b/...rations/components/__tests__/__snapshots__/available_integration_table_view.test.tsx.snap
@@ -473,6 +473,7 @@ exports[`Available Integration Table View Test Renders nginx integration table v
                                                 className="euiButtonContent__icon"
                                                 color="inherit"
                                                 size="m"
+                                                title="list"
                                                 type="list"
                                               >
                                                 <EuiIconBeaker
@@ -481,9 +482,12 @@ exports[`Available Integration Table View Test Renders nginx integration table v
                                                   focusable="false"
                                                   role="img"
                                                   style={null}
+                                                  title="list"
+                                                  titleId="random_html_id"
                                                 >
                                                   <svg
                                                     aria-hidden={true}
+                                                    aria-labelledby="random_html_id"
                                                     className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                                     focusable="false"
                                                     height={16}
@@ -493,6 +497,11 @@ exports[`Available Integration Table View Test Renders nginx integration table v
                                                     width={16}
                                                     xmlns="http://www.w3.org/2000/svg"
                                                   >
+                                                    <title
+                                                      id="random_html_id"
+                                                    >
+                                                      list
+                                                    </title>
                                                     <path
                                                       d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                                                     />
@@ -586,6 +595,7 @@ exports[`Available Integration Table View Test Renders nginx integration table v
                                                 className="euiButtonContent__icon"
                                                 color="inherit"
                                                 size="m"
+                                                title="grid"
                                                 type="grid"
                                               >
                                                 <EuiIconBeaker
@@ -594,9 +604,12 @@ exports[`Available Integration Table View Test Renders nginx integration table v
                                                   focusable="false"
                                                   role="img"
                                                   style={null}
+                                                  title="grid"
+                                                  titleId="random_html_id"
                                                 >
                                                   <svg
                                                     aria-hidden={true}
+                                                    aria-labelledby="random_html_id"
                                                     className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                                     focusable="false"
                                                     height={16}
@@ -606,6 +619,11 @@ exports[`Available Integration Table View Test Renders nginx integration table v
                                                     width={16}
                                                     xmlns="http://www.w3.org/2000/svg"
                                                   >
+                                                    <title
+                                                      id="random_html_id"
+                                                    >
+                                                      grid
+                                                    </title>
                                                     <path
                                                       d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                                                     />