From c75a735ebe29ec39a929f5e7007e66df54451b4e Mon Sep 17 00:00:00 2001
From: Eric Wei <menwe@amazon.com>
Date: Fri, 30 Jun 2023 08:37:45 -0700
Subject: [PATCH] Feature/prerelease code cleanup (#589)

* 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 0a803dc69b67262e8b58ffb56fc9ad5c8e473469)
---
 .../config_panel/config_panel.tsx             | 29 +------------------
 .../config_panel/config_panel_footer.tsx      | 15 ++--------
 .../shared_components/empty_placeholder.scss  |  2 +-
 .../shared_components/empty_placeholder.tsx   |  2 +-
 .../visualizations/shared_components/index.ts |  2 +-
 .../vis_canvass_placeholder.tsx               |  8 ++---
 .../workspace_panel/workspace_panel.scss      |  6 ++--
 .../workspace_panel/workspace_panel.tsx       |  8 ++---
 .../__snapshots__/gauge.test.tsx.snap         |  4 +--
 .../__snapshots__/metrics.test.tsx.snap       |  4 +--
 .../visualizations/visualization.tsx          |  4 +--
 11 files changed, 22 insertions(+), 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
index bb3ed71c2..765386ff6 100644
--- 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/public/components/event_analytics/explorer/visualizations/config_panel/config_panel_footer.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panel_footer.tsx
index 75093f465..8ad45a357 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panel_footer.tsx
+++ b/public/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/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.scss b/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.scss
index be379ecec..39c6f080c 100644
--- a/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.scss
+++ b/public/components/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/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.tsx b/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.tsx
index 397672821..f2bb0bf0b 100644
--- a/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.tsx
+++ b/public/components/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
index 118494bbd..cd308b785 100644
--- 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/public/components/event_analytics/explorer/visualizations/shared_components/vis_canvass_placeholder.tsx b/public/components/event_analytics/explorer/visualizations/shared_components/vis_canvass_placeholder.tsx
index 5ebede43e..9761f9565 100644
--- a/public/components/event_analytics/explorer/visualizations/shared_components/vis_canvass_placeholder.tsx
+++ b/public/components/event_analytics/explorer/visualizations/shared_components/vis_canvass_placeholder.tsx
@@ -7,10 +7,10 @@ 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"
@@ -18,9 +18,7 @@ export const VisCanvassPlaceholder = (props: { message: string; icon: string })
     >
       <EuiIcon type={props.icon} color="subdued" size="xxl" />
       <EuiSpacer size="l" />
-      <p>
-        { props.message }
-      </p>
+      <p>{props.message}</p>
     </EuiText>
   </>
 );
diff --git a/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.scss b/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.scss
index 820236aa1..4e2c30ae3 100644
--- a/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.scss
+++ b/public/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/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.tsx b/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.tsx
index a5fdd3f00..091c7ba9b 100644
--- a/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.tsx
+++ b/public/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?.rawVizData)}
@@ -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
index 70e513288..9e00d5589 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap
@@ -388,14 +388,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
index c001a02af..378696847 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/metrics.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/metrics.test.tsx.snap
@@ -512,14 +512,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
index f1107908b..f400ac5e8 100644
--- 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';
@@ -51,7 +51,7 @@ export const Visualization = ({
       {isValid ? (
         <VisualizationChart visualizations={visualizations} />
       ) : (
-        <VisCanvassPlaceholder message={erroInfo} icon={visualizations?.vis?.icontype} />
+        <VisWorkspaceDefault message={erroInfo} icon={visualizations?.vis?.icontype} />
       )}
     </>
   );