Fix explorer dark mode issue and restructure scss (#157) (#183)

* dark mode fixes Signed-off-by: Eric Wei <[email protected]> * restructure scss Signed-off-by: Eric Wei <[email protected]> * minor line removals Signed-off-by: Eric Wei <[email protected]> Signed-off-by: Eric Wei <[email protected]> (cherry picked from commit d957074) (cherry picked from commit fe02d5c)
opensearch-project · Jan 10, 2023 · 7164234 · 7164234
1 parent 8bb5e30
commit 7164234
Show file tree

Hide file tree

Showing 24 changed files with 57 additions and 107 deletions.
diff --git a/public/components/event_analytics/explorer/events_views/data_grid.tsx b/public/components/event_analytics/explorer/events_views/data_grid.tsx
@@ -3,8 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './data_grid.scss';
-
 import React, { useMemo, useState, useEffect, useRef, RefObject } from 'react';
 import { IExplorerFields } from '../../../../../common/types/explorer';
 import { DEFAULT_COLUMNS, PAGE_SIZE } from '../../../../../common/constants/explorer';

diff --git a/public/components/event_analytics/explorer/events_views/docViewRow.tsx b/public/components/event_analytics/explorer/events_views/docViewRow.tsx
@@ -3,11 +3,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './docView.scss';
 import moment from 'moment';
 import React, { forwardRef, useImperativeHandle, useMemo, useState } from 'react';
 import { toPairs, uniqueId, has, forEach, isEqual } from 'lodash';
-import { EuiButtonEmpty, EuiButtonIcon, EuiIcon, EuiLink } from '@elastic/eui';
+import { EuiButtonIcon, EuiLink } from '@elastic/eui';
 import { useEffect } from 'react';
 import { IExplorerFields, IField } from '../../../../../common/types/explorer';
 import { DocFlyout } from './doc_flyout';

diff --git a/public/components/event_analytics/explorer/explorer.tsx b/public/components/event_analytics/explorer/explorer.tsx
@@ -95,7 +95,6 @@ import {
 } from '../redux/slices/viualization_config_slice';
 import { formatError, getDefaultVisConfig } from '../utils';
 import { DataGrid } from './events_views/data_grid';
-import './explorer.scss';
 import { HitsCounter } from './hits_counter/hits_counter';
 import { PatternsTable } from './log_patterns/patterns_table';
 import { NoResults } from './no_results';
@@ -104,6 +103,7 @@ import { TimechartHeader } from './timechart_header';
 import { ExplorerVisualizations } from './visualizations';
 import { CountDistribution } from './visualizations/count_distribution';
 import { QueryManager } from '../../../../common/query_manager';
+import { uiSettingsService } from '../../../../common/utils';
 
 const TYPE_TAB_MAPPING = {
   [SAVED_QUERY]: TAB_EVENT_ID,
@@ -1478,7 +1478,7 @@ export const Explorer = ({
         query,
       }}
     >
-      <div className="dscAppContainer">
+      <div className={`dscAppContainer${uiSettingsService.get('theme:darkMode') && ' explorer-dark'}`}>
         <Search
           key="search-component"
           query={appLogEvents ? generateViewQuery(tempQuery) : query[RAW_QUERY]}

diff --git a/public/components/event_analytics/explorer/log_explorer.scss b/public/components/event_analytics/explorer/log_explorer.scss
@@ -25,10 +25,6 @@
   }
 }
 
-// #queryTabs {
-//   height: calc(100vh - 98px);
-// }
-
 .tab-title {
   display: inline-block;
   margin-right: 5px;

diff --git a/public/components/event_analytics/explorer/log_explorer.tsx b/public/components/event_analytics/explorer/log_explorer.tsx
@@ -4,7 +4,6 @@
  */
 /* eslint-disable react-hooks/exhaustive-deps */
 
-import './log_explorer.scss';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch, useSelector, batch } from 'react-redux';
 import { uniqueId, map, isEmpty } from 'lodash';

diff --git a/public/components/event_analytics/explorer/sidebar/sidebar.tsx b/public/components/event_analytics/explorer/sidebar/sidebar.tsx
@@ -3,8 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './sidebar.scss';
-
 import React, { useState } from 'react';
 import { isEmpty } from 'lodash';
 import { EuiTitle, EuiSpacer, EuiFieldSearch, EuiAccordion } from '@elastic/eui';

diff --git a/public/components/event_analytics/explorer/visualizations/_mixins.scss b/public/components/event_analytics/explorer/visualizations/_mixins.scss
diff --git a/public/components/event_analytics/explorer/visualizations/_variables.scss b/public/components/event_analytics/explorer/visualizations/_variables.scss
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss b/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss
@@ -3,14 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-.lnsConfigPanel__addLayerBtn {
-  color: transparentize($euiColorMediumShade, 0.3);
-  // Remove EuiButton's default shadow to make button more subtle
-  // sass-lint:disable-block no-important
-  box-shadow: none !important;
-  border-color: $euiColorLightShade;
-}
-
 //
 // LAYOUT
 //
@@ -140,7 +132,7 @@ $vis-editor-sidebar-min-width: 350px;
 
   .cp__rightHeader, .cp__rightSettings {
     padding: 8px;
-    background-color: #FFF;
+    background-color: transparent;
   }
 
   .cp__rightHeader {
@@ -196,3 +188,10 @@ $vis-editor-sidebar-min-width: 350px;
 .color-theme-combo-box-option .euiFlexItem.euiFlexItem--flexGrowZero {
   display: none;
 }
+
+// dark mode
+.explorer-dark {
+  .panel_section, .cp__rightHeader {
+    border-bottom: 1px solid $border-color-on-dark;
+  }
+}
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx
@@ -19,7 +19,6 @@ import { getVisTypeData } from '../../../../visualizations/charts/helpers/viz_ty
 import { TabContext } from '../../../hooks';
 import { reset as resetVisualizationConfig } from '../../../redux/slices/viualization_config_slice';
 import { getDefaultSpec } from '../visualization_specs/default_spec';
-import './config_panel.scss';
 
 const CONFIG_LAYOUT_TEMPLATE = `
 {

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
@@ -4,9 +4,6 @@
  */
 
 .explorer__vizDataConfig {
-  @include euiYScrollWithShadows;
-
-  background: $euiColorLightestShade;
   border-left: $euiBorderThin;
   border-right: $euiBorderThin;
   position: relative;

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
@@ -3,8 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './data_configurations_panel.scss';
-
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import {
   EuiButton,

diff --git a/public/components/event_analytics/explorer/visualizations/index.tsx b/public/components/event_analytics/explorer/visualizations/index.tsx
@@ -3,10 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './app.scss';
-
 import { isEmpty } from 'lodash';
-
 import React from 'react';
 import { EuiResizableContainer } from '@elastic/eui';
 import { QueryManager } from 'common/query_manager';

diff --git a/...omponents/event_analytics/explorer/visualizations/shared_components/empty_placeholder.tsx b/...omponents/event_analytics/explorer/visualizations/shared_components/empty_placeholder.tsx
@@ -6,7 +6,6 @@
 import React from 'react';
 import { EuiIcon, EuiText, EuiSpacer } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
-import './empty_placeholder.scss';
 
 export const EmptyPlaceholder = (props: { icon: string }) => (
   <>

diff --git a/...alytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_viz_editor.tsx b/...alytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_viz_editor.tsx
@@ -30,9 +30,6 @@
  * GitHub history for details.
  */
 
-import './plotly_vis.scss';
-import './plotly_editor.scss';
-
 import React, { useCallback } from 'react';
 import { EuiCodeEditor } from '@elastic/eui';
 import compactStringify from 'json-stringify-pretty-compact';

diff --git a/...c/components/event_analytics/explorer/visualizations/shared_components/toolbar_button.tsx b/...c/components/event_analytics/explorer/visualizations/shared_components/toolbar_button.tsx
@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './toolbar_button.scss';
 import React from 'react';
 import classNames from 'classnames';
 import { EuiButton, PropsOf, EuiButtonProps } from '@elastic/eui';

diff --git a/...nalytics/explorer/visualizations/app.scss → ...plorer/visualizations/visualizations.scss b/...nalytics/explorer/visualizations/app.scss → ...plorer/visualizations/visualizations.scss
@@ -12,6 +12,5 @@
   display: grid;
   grid-template-rows: auto 1fr;
   grid-area: workspace;
-  background-color: #FFF;
   height: 100%;
 }
diff --git a/...c/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.scss b/...c/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.scss
@@ -20,6 +20,9 @@
 }
 
 #vis__mainContent .ws__central--canvas {
-  background-color: #FFF;
   border-right: 1px solid #D3DAE6;
-}
+}
+
+.explorer-dark #vis__mainContent .ws__central--canvas {
+  border-right: 1px solid $border-color-on-dark;
+}
diff --git a/...ic/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.tsx b/...ic/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.tsx
@@ -3,8 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './workspace_panel.scss';
-
 import React, { useState, useMemo } from 'react';
 import { isEmpty } from 'lodash';
 import { EuiPanel, EuiSwitch } from '@elastic/eui';

diff --git a/public/components/event_analytics/home/home.tsx b/public/components/event_analytics/home/home.tsx
@@ -3,8 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './home.scss';
-
 import React, { useState, ReactElement, useRef, useEffect } from 'react';
 import { useDispatch, batch, useSelector } from 'react-redux';
 import { uniqueId } from 'lodash';

diff --git a/public/components/event_analytics/index.scss b/public/components/event_analytics/index.scss
@@ -0,0 +1,19 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@import 'home/home';
+@import 'explorer/log_explorer';
+@import 'explorer/explorer';
+@import 'explorer/sidebar/sidebar';
+@import 'explorer/events_views/data_grid';
+@import 'explorer/events_views/docView';
+@import 'explorer/visualizations/config_panel/config_panel';
+@import 'explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel';
+@import 'explorer/visualizations/visualizations';
+@import 'explorer/visualizations/shared_components/empty_placeholder';
+@import 'explorer/visualizations/shared_components/toolbar_button';
+@import 'explorer/visualizations/shared_components/plotly_viz_editor/plotly_editor';
+@import 'explorer/visualizations/shared_components/plotly_viz_editor/plotly_vis';
+@import 'explorer/visualizations/workspace_panel/workspace_panel';
diff --git a/public/index.scss b/public/index.scss
@@ -0,0 +1,13 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/* base */
+
+@import 'variables';
+
+/* components */
+
+// event analytics
+@import 'components/event_analytics/index';
diff --git a/public/plugin.ts b/public/plugin.ts
@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import './index.scss';
+
 import { AppMountParameters, CoreSetup, CoreStart, Plugin } from '../../../src/core/public';
 import {
   observabilityID,

diff --git a/public/variables.scss b/public/variables.scss
@@ -0,0 +1,7 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// dark mode border color
+$border-color-on-dark: #343741;