Rename wizard on save modal and visualization table

abbyhu2000 · abbyhu2000 · commit 46a9bfae9578 · 2022-10-25T17:51:05.000Z
Change the wizard reference in save modal title, toggle and visualization table

Signed-off-by: abbyhu2000 &lt;abigailhu2000@gmail.com&gt;
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.scss b/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.scss
@@ -1,3 +1,13 @@
 .osdSavedObjectSaveModal {
   width: $euiSizeXXL * 10;
 }
+
+.osdSavedObjectSaveModalVisBuilder {
+  color: $euiTextSubduedColor;
+  font-size: $euiFontSizeM;
+}
+
+.osdSavedObjectSaveModalBadge {
+  margin-left: $euiSizeS;
+  vertical-align: text-bottom;
+}
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,8 @@ import {
   EuiSwitch,
   EuiSwitchEvent,
   EuiTextArea,
+  EuiBadge,
+  EuiBetaBadge,
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
 import React from 'react';
@@ -70,6 +72,7 @@ interface Props {
   options?: React.ReactNode | ((state: SaveModalState) => React.ReactNode);
   description?: string;
   showDescription: boolean;
+  isExperimental?: boolean;
 }
 
 export interface SaveModalState {
@@ -111,6 +114,7 @@ export class SavedObjectSaveModal extends React.Component<Props, SaveModalState>
               defaultMessage="Save {objectType}"
               values={{ objectType: this.props.objectType }}
             />
+            {this.renderExperimentalBadge()}
           </EuiModalHeaderTitle>
         </EuiModalHeader>
 
@@ -167,6 +171,28 @@ export class SavedObjectSaveModal extends React.Component<Props, SaveModalState>
     );
   }
 
+  private renderExperimentalBadge = () => {
+    if (!this.props.isExperimental) {
+      return;
+    }
+
+    return (
+      <EuiModalHeaderTitle className="osdSavedObjectSaveModalVisBuilder">
+        <FormattedMessage
+          id="savedObjects.saveModal.saveSubTitle"
+          defaultMessage="Visualization Builder"
+        />
+        <EuiBetaBadge
+          label="Lab"
+          iconType="beaker"
+          color="subdued"
+          size="s"
+          className="osdSavedObjectSaveModalBadge"
+        />
+      </EuiModalHeaderTitle>
+    );
+  };
+
   private renderViewDescription = () => {
     if (!this.props.showDescription) {
       return;
@@ -323,11 +349,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
@@ -6,7 +6,9 @@
 export const PLUGIN_ID = 'wizard';
 export const PLUGIN_NAME = 'Wizard';
 export const VISUALIZE_ID = 'visualize';
+export const VIS_BUILDER_TYPE_SHORTHAND = 'VisBuilder';
 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 } from '../../../common';
 import { setEditorState } from './state_management/metadata_slice';
 export interface TopNavConfigParams {
   visualizationIdFromUrl: string;
@@ -95,10 +95,11 @@ export const getTopNavConfig = (
               dispatch,
               services
             )}
-            objectType={'wizard'}
+            objectType={'visualization'}
             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_SHORTHAND,
+} 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_SHORTHAND,
           }),
         },
       },
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
@@ -10,6 +10,7 @@ import { ColorModes, ColorSchemas } from '../../../../charts/public';
 import { MetricVizOptions } from './components/metric_viz_options';
 import { VisualizationTypeOptions } from '../../services/type_service';
 import { toExpression } from './to_expression';
+import { VIS_BUILDER_STATE } from '../../../common';
 
 export interface MetricOptionsDefaults {
   addTooltip: boolean;
@@ -40,6 +41,7 @@ export const createMetricConfig = (): VisualizationTypeOptions<MetricOptionsDefa
   title: 'Metric',
   icon: 'visMetric',
   description: 'Display metric visualizations',
+  stage: VIS_BUILDER_STATE,
   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
@@ -11,6 +11,7 @@ import { AreaVisOptions } from './components/area_vis_options';
 import { VisualizationTypeOptions } from '../../../services/type_service';
 import { toExpression } from './to_expression';
 import { BasicOptionsDefaults } from '../common/types';
+import { VIS_BUILDER_STATE } from '../../../../common';
 
 export interface AreaOptionsDefaults extends BasicOptionsDefaults {
   type: 'area';
@@ -21,6 +22,7 @@ export const createAreaConfig = (): VisualizationTypeOptions<AreaOptionsDefaults
   title: 'Area',
   icon: 'visArea',
   description: 'Display area chart',
+  stage: VIS_BUILDER_STATE,
   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
@@ -11,6 +11,7 @@ import { BasicOptionsDefaults } from '../common/types';
 import { HistogramVisOptions } from './components/histogram_vis_options';
 import { VisualizationTypeOptions } from '../../../services/type_service';
 import { toExpression } from './to_expression';
+import { VIS_BUILDER_STATE } from '../../../../common';
 
 export interface HistogramOptionsDefaults extends BasicOptionsDefaults {
   type: 'histogram';
@@ -21,6 +22,7 @@ export const createHistogramConfig = (): VisualizationTypeOptions<HistogramOptio
   title: 'Bar',
   icon: 'visBarVertical',
   description: 'Display histogram visualizations',
+  stage: VIS_BUILDER_STATE,
   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
@@ -11,6 +11,7 @@ import { LineVisOptions } from './components/line_vis_options';
 import { VisualizationTypeOptions } from '../../../services/type_service';
 import { toExpression } from './to_expression';
 import { BasicOptionsDefaults } from '../common/types';
+import { VIS_BUILDER_STATE } from '../../../../common';
 
 export interface LineOptionsDefaults extends BasicOptionsDefaults {
   type: 'line';
@@ -21,6 +22,7 @@ export const createLineConfig = (): VisualizationTypeOptions<LineOptionsDefaults
   title: 'Line',
   icon: 'visLine',
   description: 'Display line chart',
+  stage: VIS_BUILDER_STATE,
   toExpression,
   ui: {
     containerConfig: {
diff --git a/src/plugins/visualize/public/application/components/visualize_listing.scss b/src/plugins/visualize/public/application/components/visualize_listing.scss
@@ -11,7 +11,7 @@
 
 .visListingTable__experimentalIcon {
   width: $euiSizeL;
-  vertical-align: baseline;
+  vertical-align: middle;
   padding: 0 $euiSizeS;
   margin-left: $euiSizeS;
 }
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',
         })}

Original file line number	Diff line number	Diff line change
`@@ -50,6 +50,7 @@ interface OriginSaveModalProps {`
`50`	`50`	`objectType: string;`
`51`	`51`	`onClose: () => void;`
`52`	`52`	`onSave: (props: OnSaveProps & { returnToOrigin: boolean }) => void;`
	`53`	`+ isExperimental?: boolean;`
`53`	`54`	`}`
`54`	`55`
`55`	`56`	`export function SavedObjectSaveModalOrigin(props: OriginSaveModalProps) {`
`@@ -125,6 +126,7 @@ export function SavedObjectSaveModalOrigin(props: OriginSaveModalProps) {`
`125`	`126`	`options={getReturnToOriginSwitch}`
`126`	`127`	`description={documentInfo.description}`
`127`	`128`	`showDescription={true}`
	`129`	`+ isExperimental={props.isExperimental}`
`128`	`130`	`/>`
`129`	`131`	`);`
`130`	`132`	`}`