From 402e48f9262eabfe7208f1f9c91618d14f509f47 Mon Sep 17 00:00:00 2001
From: Miki <miki@amazon.com>
Date: Wed, 31 Jan 2024 09:14:28 -0800
Subject: [PATCH] Decouple DataExplorer CSS class names with those of
 Observability

Signed-off-by: Miki <miki@amazon.com>
---
 .../data_explorer/public/components/app_container.scss      | 6 +++---
 .../data_explorer/public/components/app_container.tsx       | 4 ++--
 src/plugins/data_explorer/public/components/no_view.tsx     | 2 +-
 .../data_explorer/public/components/sidebar/index.scss      | 6 +++---
 .../data_explorer/public/components/sidebar/index.tsx       | 6 +++---
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/plugins/data_explorer/public/components/app_container.scss b/src/plugins/data_explorer/public/components/app_container.scss
index 7bd5ed6f69f6..bf5339be7d16 100644
--- a/src/plugins/data_explorer/public/components/app_container.scss
+++ b/src/plugins/data_explorer/public/components/app_container.scss
@@ -1,6 +1,6 @@
 $osdHeaderOffset: $euiHeaderHeightCompensation;
 
-.deSidebar {
+.dataExplorerSidebar {
   height: 100%;
 
   @include ouiBreakpoint("xs", "s", "m") {
@@ -9,7 +9,7 @@ $osdHeaderOffset: $euiHeaderHeightCompensation;
   }
 }
 
-.deLayout {
+.dataExplorerLayout {
   height: calc(100vh - #{$osdHeaderOffset});
 
   &__canvas {
@@ -17,6 +17,6 @@ $osdHeaderOffset: $euiHeaderHeightCompensation;
   }
 }
 
-.headerIsExpanded .deLayout {
+.headerIsExpanded .dataExplorerLayout {
   height: calc(100vh - #{$osdHeaderOffset * 2});
 }
diff --git a/src/plugins/data_explorer/public/components/app_container.tsx b/src/plugins/data_explorer/public/components/app_container.tsx
index 6752845649ee..9e121b53bce7 100644
--- a/src/plugins/data_explorer/public/components/app_container.tsx
+++ b/src/plugins/data_explorer/public/components/app_container.tsx
@@ -26,7 +26,7 @@ export const AppContainer = ({ view, params }: { view?: View; params: AppMountPa
 
   // Render the application DOM.
   return (
-    <EuiPage className="deLayout" paddingSize="none">
+    <EuiPage className="dataExplorerLayout" paddingSize="none">
       {/* TODO: improve fallback state */}
       <Suspense fallback={<div>Loading...</div>}>
         <Context {...params}>
@@ -46,7 +46,7 @@ export const AppContainer = ({ view, params }: { view?: View; params: AppMountPa
                 <EuiResizableButton />
 
                 <EuiResizablePanel initialSize={80} minSize="65%" mode="main" paddingSize="none">
-                  <EuiPageBody className="deLayout__canvas">
+                  <EuiPageBody className="dataExplorerLayout__canvas">
                     <MemoizedCanvas {...params} />
                   </EuiPageBody>
                 </EuiResizablePanel>
diff --git a/src/plugins/data_explorer/public/components/no_view.tsx b/src/plugins/data_explorer/public/components/no_view.tsx
index 20bdf83f1de6..e7a476437405 100644
--- a/src/plugins/data_explorer/public/components/no_view.tsx
+++ b/src/plugins/data_explorer/public/components/no_view.tsx
@@ -11,7 +11,7 @@ export const NoView = () => {
   return (
     <EuiPageTemplate
       template="centeredContent"
-      className="deLayout"
+      className="dataExplorerLayout"
       pageContentProps={{
         role: 'alertdialog',
         color: 'plain',
diff --git a/src/plugins/data_explorer/public/components/sidebar/index.scss b/src/plugins/data_explorer/public/components/sidebar/index.scss
index 6d8ad2324bc1..9afda786c85b 100644
--- a/src/plugins/data_explorer/public/components/sidebar/index.scss
+++ b/src/plugins/data_explorer/public/components/sidebar/index.scss
@@ -1,9 +1,9 @@
-.deSidebar {
-  &_panel {
+.dataExplorerSidebar {
+  &__panel {
     border-top: 0;
   }
 
-  &_dataSource {
+  &__dataSource {
     border-bottom: $euiBorderThin !important;
   }
 }
diff --git a/src/plugins/data_explorer/public/components/sidebar/index.tsx b/src/plugins/data_explorer/public/components/sidebar/index.tsx
index a2946f707c7c..409a320286be 100644
--- a/src/plugins/data_explorer/public/components/sidebar/index.tsx
+++ b/src/plugins/data_explorer/public/components/sidebar/index.tsx
@@ -91,9 +91,9 @@ export const Sidebar: FC = ({ children }) => {
   );
 
   return (
-    <EuiPageSideBar className="deSidebar" sticky>
+    <EuiPageSideBar className="dataExplorerSidebar" sticky>
       <EuiSplitPanel.Outer
-        className="eui-yScroll deSidebar_panel"
+        className="eui-yScroll dataExplorerSidebar__panel"
         hasBorder={true}
         borderRadius="none"
         color="transparent"
@@ -102,7 +102,7 @@ export const Sidebar: FC = ({ children }) => {
           paddingSize="s"
           grow={false}
           color="transparent"
-          className="deSidebar_dataSource"
+          className="dataExplorerSidebar__dataSource"
         >
           <DataSourceSelectable
             dataSources={activeDataSources}