Rename wizard on save modal and visualization table

Change the wizard reference in save modal title, toggle and visualization table Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>
opensearch-project · Oct 25, 2022 · f426e20 · f426e20
1 parent 68baac1
commit f426e20
Show file tree

Hide file tree

Showing 11 changed files with 49 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -28,6 +28,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 * [Multi DataSource] Address UX comments on Data source list and create page ([#2625](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2625))
 * [Vis Builder] Rename wizard to visBuilder in i18n id and formatted message id ([#2635](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2635))
 * [Vis Builder] Rename wizard to visBuilder in class name, type name and function name ([#2639](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2639))
+* [Vis Builder] Rename wizard on save modal and visualization table ([#2645](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2645))
 
 ### 🐛 Bug Fixes
 * [Vis Builder] Fixes auto bounds for timeseries bar chart visualization ([2401](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2401))

diff --git a/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.tsx b/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.tsx
@@ -45,6 +45,7 @@ import {
   EuiSwitch,
   EuiSwitchEvent,
   EuiTextArea,
+  EuiBadge,
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
 import React from 'react';
@@ -70,6 +71,7 @@ interface Props {
   options?: React.ReactNode | ((state: SaveModalState) => React.ReactNode);
   description?: string;
   showDescription: boolean;
+  isExperimental?: boolean;
 }
 
 export interface SaveModalState {
@@ -111,6 +113,8 @@ export class SavedObjectSaveModal extends React.Component<Props, SaveModalState>
               defaultMessage="Save {objectType}"
               values={{ objectType: this.props.objectType }}
             />
+
+            {this.renderExperimentalBadge()}
           </EuiModalHeaderTitle>
         </EuiModalHeader>
 
@@ -167,6 +171,14 @@ export class SavedObjectSaveModal extends React.Component<Props, SaveModalState>
     );
   }
 
+  private renderExperimentalBadge = () => {
+    if (!this.props.isExperimental) {
+      return;
+    }
+
+    return <EuiBadge color="primary">{'Experimental'}</EuiBadge>;
+  };
+
   private renderViewDescription = () => {
     if (!this.props.showDescription) {
       return;
@@ -323,11 +335,18 @@ export class SavedObjectSaveModal extends React.Component<Props, SaveModalState>
           checked={this.state.copyOnSave}
           onChange={this.onCopyOnSaveChange}
           label={
-            <FormattedMessage
-              id="savedObjects.saveModal.saveAsNewLabel"
-              defaultMessage="Save as new {objectType}"
-              values={{ objectType: this.props.objectType }}
-            />
+            <div>
+              <FormattedMessage
+                id="savedObjects.saveModal.saveAsNewLabel"
+                defaultMessage="Save as new {objectType}"
+                values={{ objectType: this.props.objectType }}
+              />
+              {this.props.objectType === 'Visualization (VisBuilder)' ? (
+                <EuiBadge color="primary">{'Experimental'}</EuiBadge>
+              ) : (
+                <></>
+              )}
+            </div>
           }
         />
         <EuiSpacer />

diff --git a/src/plugins/saved_objects/public/save_modal/saved_object_save_modal_origin.tsx b/src/plugins/saved_objects/public/save_modal/saved_object_save_modal_origin.tsx
@@ -50,6 +50,7 @@ interface OriginSaveModalProps {
   objectType: string;
   onClose: () => void;
   onSave: (props: OnSaveProps & { returnToOrigin: boolean }) => void;
+  isExperimental?: boolean;
 }
 
 export function SavedObjectSaveModalOrigin(props: OriginSaveModalProps) {
@@ -125,6 +126,7 @@ export function SavedObjectSaveModalOrigin(props: OriginSaveModalProps) {
       options={getReturnToOriginSwitch}
       description={documentInfo.description}
       showDescription={true}
+      isExperimental={props.isExperimental}
     />
   );
 }
diff --git a/src/plugins/vis_builder/common/index.ts b/src/plugins/vis_builder/common/index.ts
@@ -5,8 +5,10 @@
 
 export const PLUGIN_ID = 'wizard';
 export const PLUGIN_NAME = 'Wizard';
+export const VIS_BUILDER_TYPE = 'Visualization (VisBuilder)';
 export const VISUALIZE_ID = 'visualize';
 export const EDIT_PATH = '/edit';
+export const VIS_BUILDER_STATE = 'experimental';
 
 export {
   VisBuilderSavedObjectAttributes,

diff --git a/src/plugins/vis_builder/public/application/utils/get_top_nav_config.tsx b/src/plugins/vis_builder/public/application/utils/get_top_nav_config.tsx
@@ -39,7 +39,7 @@ import {
 import { VisBuilderServices } from '../..';
 import { VisBuilderVisSavedObject } from '../../types';
 import { AppDispatch } from './state_management';
-import { EDIT_PATH } from '../../../common';
+import { EDIT_PATH, VIS_BUILDER_STATE, VIS_BUILDER_TYPE } from '../../../common';
 import { setEditorState } from './state_management/metadata_slice';
 export interface TopNavConfigParams {
   visualizationIdFromUrl: string;
@@ -56,6 +56,7 @@ export const getTopNavConfig = (
     i18n: { Context: I18nContext },
     embeddable,
     scopedHistory,
+    types,
   } = services;
 
   const { originatingApp, embeddableId } =
@@ -95,10 +96,11 @@ export const getTopNavConfig = (
               dispatch,
               services
             )}
-            objectType={'wizard'}
+            objectType={VIS_BUILDER_TYPE}
             onClose={() => {}}
             originatingApp={originatingApp}
             getAppNameFromId={stateTransfer.getAppNameFromId}
+            isExperimental={VIS_BUILDER_STATE === 'experimental' ? true : false}
           />
         );
 

diff --git a/src/plugins/vis_builder/public/plugin.ts b/src/plugins/vis_builder/public/plugin.ts
@@ -22,7 +22,13 @@ import {
 import { VisBuilderEmbeddableFactoryDefinition, VISBUILDER_EMBEDDABLE } from './embeddable';
 import visBuilderIconSecondaryFill from './assets/wizard_icon_secondary_fill.svg';
 import visBuilderIcon from './assets/wizard_icon.svg';
-import { EDIT_PATH, PLUGIN_ID, PLUGIN_NAME, VISBUILDER_SAVED_OBJECT } from '../common';
+import {
+  EDIT_PATH,
+  PLUGIN_ID,
+  PLUGIN_NAME,
+  VISBUILDER_SAVED_OBJECT,
+  VIS_BUILDER_TYPE,
+} from '../common';
 import { TypeService } from './services/type_service';
 import { getPreloadedStore } from './application/utils/state_management';
 import {
@@ -134,7 +140,7 @@ export class VisBuilderPlugin
             savedObjectType: VISBUILDER_SAVED_OBJECT,
             stage: 'experimental',
             title: attributes?.title,
-            typeTitle: PLUGIN_NAME,
+            typeTitle: VIS_BUILDER_TYPE,
           }),
         },
       },

diff --git a/src/plugins/vis_builder/public/visualizations/metric/metric_viz_type.ts b/src/plugins/vis_builder/public/visualizations/metric/metric_viz_type.ts
@@ -40,6 +40,7 @@ export const createMetricConfig = (): VisualizationTypeOptions<MetricOptionsDefa
   title: 'Metric',
   icon: 'visMetric',
   description: 'Display metric visualizations',
+  stage: 'experimental',
   toExpression,
   ui: {
     containerConfig: {

diff --git a/src/plugins/vis_builder/public/visualizations/vislib/area/area_vis_type.ts b/src/plugins/vis_builder/public/visualizations/vislib/area/area_vis_type.ts
@@ -21,6 +21,7 @@ export const createAreaConfig = (): VisualizationTypeOptions<AreaOptionsDefaults
   title: 'Area',
   icon: 'visArea',
   description: 'Display area chart',
+  stage: 'experimental',
   toExpression,
   ui: {
     containerConfig: {

diff --git a/src/plugins/vis_builder/public/visualizations/vislib/histogram/histogram_vis_type.ts b/src/plugins/vis_builder/public/visualizations/vislib/histogram/histogram_vis_type.ts
@@ -21,6 +21,7 @@ export const createHistogramConfig = (): VisualizationTypeOptions<HistogramOptio
   title: 'Bar',
   icon: 'visBarVertical',
   description: 'Display histogram visualizations',
+  stage: 'experimental',
   toExpression,
   ui: {
     containerConfig: {

diff --git a/src/plugins/vis_builder/public/visualizations/vislib/line/line_vis_type.ts b/src/plugins/vis_builder/public/visualizations/vislib/line/line_vis_type.ts
@@ -21,6 +21,7 @@ export const createLineConfig = (): VisualizationTypeOptions<LineOptionsDefaults
   title: 'Line',
   icon: 'visLine',
   description: 'Display line chart',
+  stage: 'experimental',
   toExpression,
   ui: {
     containerConfig: {

diff --git a/src/plugins/visualize/public/application/utils/get_table_columns.tsx b/src/plugins/visualize/public/application/utils/get_table_columns.tsx
@@ -60,7 +60,10 @@ const getBadge = (item: VisualizationListItem) => {
     return (
       <EuiBetaBadge
         className="visListingTable__experimentalIcon"
-        label="E"
+        label="Lab"
+        size="s"
+        color="subdued"
+        iconType={'beaker'}
         title={i18n.translate('visualize.listing.experimentalTitle', {
           defaultMessage: 'Experimental',
         })}