Feature/prerelease code cleanup (#589) (#592)

* refactor naming Signed-off-by: Eric Wei <menwe@amazon.com> * refactor vis workspace Signed-off-by: Eric Wei <menwe@amazon.com> * config panel refactoring Signed-off-by: Eric Wei <menwe@amazon.com> * refactor workspace Signed-off-by: Eric Wei <menwe@amazon.com> --------- Signed-off-by: Eric Wei <menwe@amazon.com> (cherry picked from commit 0a803dc) Co-authored-by: Eric Wei <menwe@amazon.com>
opensearch-project · Jul 12, 2023 · abefe81 · abefe81
1 parent fc23c89
commit abefe81
Show file tree

Hide file tree

Showing 11 changed files with 22 additions and 62 deletions.
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
@@ -13,31 +13,12 @@ import {
 } from '@elastic/eui';
 import hjson from 'hjson';
 import { find } from 'lodash';
-import Mustache from 'mustache';
 import { ENABLED_VIS_TYPES } from '../../../../../../common/constants/shared';
 import { getVisTypeData } from '../../../../visualizations/charts/helpers/viz_types';
 import { TabContext } from '../../../hooks';
 import { reset as resetVisualizationConfig } from '../../../redux/slices/viualization_config_slice';
 import { getDefaultSpec } from '../visualization_specs/default_spec';
 
-const CONFIG_LAYOUT_TEMPLATE = `
-{
-  "layout": {},
-  "config": {
-    "scrollZoom": {{config.scrollZoom}},
-    "editable": {{config.editable}},
-    "staticPlot": {{config.staticPlot}},
-    "displayModeBar": {{config.displayModeBar}},
-    "responsive": {{config.responsive}},
-    "doubleClickDelay": {{config.doubleClickDelay}}
-  }
-}
-`;
-
-const HJSON_PARSE_OPTIONS = {
-  keepWsc: true,
-};
-
 const HJSON_STRINGIFY_OPTIONS = {
   keepWsc: true,
   condense: 0,
@@ -81,14 +62,6 @@ export const ConfigPanel = ({ visualizations, setCurVisId, callback }: any) => {
     }
   }, [userConfigs, curVisId]);
 
-  const getParsedLayoutConfig = useCallback(
-    (hjsonConfig) =>
-      JSON.parse(
-        Mustache.render(CONFIG_LAYOUT_TEMPLATE, hjson.parse(hjsonConfig, HJSON_PARSE_OPTIONS))
-      ),
-    []
-  );
-
   const handleConfigUpdate = useCallback(
     (updatedConfigs) => {
       try {
@@ -194,7 +167,7 @@ export const ConfigPanel = ({ visualizations, setCurVisId, callback }: any) => {
 
     return (
       <div className="configPanel__vizSelector-item">
-        <EuiIcon className="lnsChartSwitch__chartIcon" type={icontype} size="m" />
+        <EuiIcon className="visSwitcher" type={icontype} size="m" />
         &nbsp;&nbsp;
         <span>{label}</span>
       </div>

diff --git a/...c/components/event_analytics/explorer/visualizations/config_panel/config_panel_footer.tsx b/...c/components/event_analytics/explorer/visualizations/config_panel/config_panel_footer.tsx
@@ -4,20 +4,9 @@
  */
 
 import React from 'react';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiButton,
-  EuiButtonEmpty,
-  EuiToolTip,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
 
-export const DefaultEditorControls = ({
-  isInvalid,
-  isDirty,
-  onConfigUpdate,
-  onConfigDiscard,
-}: any) => {
+export const DefaultEditorControls = ({ isDirty, onConfigDiscard }: any) => {
   return (
     <div className="visEditorSidebar__controls">
       <EuiFlexGroup justifyContent="spaceBetween" gutterSize="none" responsive={false}>

diff --git a/...mponents/event_analytics/explorer/visualizations/shared_components/empty_placeholder.scss b/...mponents/event_analytics/explorer/visualizations/shared_components/empty_placeholder.scss
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
- .lnsChart__empty {
+ .visWorkspaceNoData {
   display: flex;
   justify-content: center;
   align-items: center;

diff --git a/...omponents/event_analytics/explorer/visualizations/shared_components/empty_placeholder.tsx b/...omponents/event_analytics/explorer/visualizations/shared_components/empty_placeholder.tsx
@@ -10,7 +10,7 @@ import { FormattedMessage } from '@osd/i18n/react';
 export const EmptyPlaceholder = (props: { icon: string }) => (
   <>
     <EuiText
-      className="lnsChart__empty"
+      className="visWorkspaceNoData"
       textAlign="center"
       color="subdued"
       size="xs"

diff --git a/public/components/event_analytics/explorer/visualizations/shared_components/index.ts b/public/components/event_analytics/explorer/visualizations/shared_components/index.ts
@@ -5,4 +5,4 @@
 
 export * from './empty_placeholder';
 export { ToolbarButtonProps, ToolbarButton } from './toolbar_button';
-export { VisCanvassPlaceholder } from './vis_canvass_placeholder'
+export { VisWorkspaceDefault } from './vis_canvass_placeholder';
diff --git a/...nts/event_analytics/explorer/visualizations/shared_components/vis_canvass_placeholder.tsx b/...nts/event_analytics/explorer/visualizations/shared_components/vis_canvass_placeholder.tsx
@@ -7,20 +7,18 @@ import React from 'react';
 import { EuiIcon, EuiText, EuiSpacer } from '@elastic/eui';
 import './empty_placeholder.scss';
 
-export const VisCanvassPlaceholder = (props: { message: string; icon: string }) => (
+export const VisWorkspaceDefault = (props: { message: string; icon: string }) => (
   <>
     <EuiText
-      className="lnsChart__empty"
+      className="visWorkspaceNoData"
       textAlign="center"
       color="subdued"
       size="xs"
       data-test-subj="vizWorkspace__noData"
     >
       <EuiIcon type={props.icon} color="subdued" size="xxl" />
       <EuiSpacer size="l" />
-      <p>
-        { props.message }
-      </p>
+      <p>{props.message}</p>
     </EuiText>
   </>
 );
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
@@ -7,13 +7,13 @@
   background-color: transparent;
 }
 
-.ws__visCanvas {
+.ws__workspace_visPanel {
   grid-gap: 12px;
   padding: 12px;
-  .ws__visCanvasControl {
+  .workspace_visPanel {
     height: 40px;
     width: 140px;
-    .ws__visCanvasFlexitem {
+    .ws__workspace_visPanelFlexitem {
       display: block;
     }
   }

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
@@ -25,10 +25,10 @@ export function WorkspacePanel({ visualizations }: IWorkSpacePanel) {
   }, [visualizations]);
 
   return (
-    <div className="explorerViz__commonPanel ws__visCanvas">
-      <EuiPanel className="ws__visCanvasControl" paddingSize="s" color="plain" hasBorder={false}>
+    <div className="explorerViz__commonPanel ws__workspace_visPanel">
+      <EuiPanel className="workspace_visPanel" paddingSize="s" color="plain" hasBorder={false}>
         <EuiSwitch
-          className="ws__visCanvasControl--switch"
+          className="workspace_visPanel--switch"
           label="Table view"
           type="button"
           disabled={isEmpty(visualizations?.data?.explorer?.explorerData)}
@@ -43,7 +43,7 @@ export function WorkspacePanel({ visualizations }: IWorkSpacePanel) {
       </EuiPanel>
       <EuiPanel
         paddingSize="s"
-        className={`ws__visCanvas--space ${
+        className={`ws__workspace_visPanel--space ${
           uiSettingsService.get('theme:darkMode') ? 'ag-theme-alpine-dark' : 'ag-theme-alpine'
         }`}
       >

diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap
@@ -539,14 +539,14 @@ exports[`Gauge component Renders gauge component 1`] = `
     icon="visGauge"
   >
     <EuiText
-      className="lnsChart__empty"
+      className="visWorkspaceNoData"
       color="subdued"
       data-test-subj="vizWorkspace__noData"
       size="xs"
       textAlign="center"
     >
       <div
-        className="euiText euiText--extraSmall lnsChart__empty"
+        className="euiText euiText--extraSmall visWorkspaceNoData"
         data-test-subj="vizWorkspace__noData"
       >
         <EuiTextAlign

diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/metrics.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/metrics.test.tsx.snap
@@ -663,14 +663,14 @@ exports[`Metrics component Renders Metrics component 1`] = `
     icon="stats"
   >
     <EuiText
-      className="lnsChart__empty"
+      className="visWorkspaceNoData"
       color="subdued"
       data-test-subj="vizWorkspace__noData"
       size="xs"
       textAlign="center"
     >
       <div
-        className="euiText euiText--extraSmall lnsChart__empty"
+        className="euiText euiText--extraSmall visWorkspaceNoData"
         data-test-subj="vizWorkspace__noData"
       >
         <EuiTextAlign

diff --git a/public/components/visualizations/visualization.tsx b/public/components/visualizations/visualization.tsx
@@ -6,7 +6,7 @@
 import React from 'react';
 import { isEmpty } from 'lodash';
 import { VisualizationChart } from './visualization_chart';
-import { VisCanvassPlaceholder } from '../event_analytics/explorer/visualizations/shared_components';
+import { VisWorkspaceDefault } from '../event_analytics/explorer/visualizations/shared_components';
 import { IVisualizationContainerProps } from '../../../common/types/explorer';
 import { VIS_CHART_TYPES, VISUALIZATION_ERROR } from '../../../common/constants/shared';
 import { AGGREGATIONS, GROUPBY } from '../../../common/constants/explorer';
@@ -44,7 +44,7 @@ export const Visualization = ({
       {isValid ? (
         <VisualizationChart visualizations={visualizations} />
       ) : (
-        <VisCanvassPlaceholder message={erroInfo} icon={visualizations?.vis?.icontype} />
+        <VisWorkspaceDefault message={erroInfo} icon={visualizations?.vis?.icontype} />
       )}
     </>
   );