Decouple DataExplorer CSS class names with those of Observability

Signed-off-by: Miki <[email protected]>
AMoo-Miki · Jan 31, 2024 · 402e48f · 402e48f
1 parent 6ebb208
commit 402e48f
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 12 deletions.
diff --git 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,14 +9,14 @@ $osdHeaderOffset: $euiHeaderHeightCompensation;
  }
 }
 
-.deLayout {
+.dataExplorerLayout {
  height: calc(100vh - #{$osdHeaderOffset});
 
  &__canvas {
  height: 100%;
  }
 }
 
-.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
@@ -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
@@ -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
@@ -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
@@ -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}