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>

Author: abbyhu2000

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';
@@ -111,6 +112,11 @@ export class SavedObjectSaveModal extends React.Component<Props, SaveModalState>
               defaultMessage="Save {objectType}"
               values={{ objectType: this.props.objectType }}
             />
+            {this.props.objectType === 'Visualization (VisBuilder)' ? (
+              <EuiBadge color="primary">{'Experimental'}</EuiBadge>
+            ) : (
+              <></>
+            )}
           </EuiModalHeaderTitle>
         </EuiModalHeader>
 
@@ -323,11 +329,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 />

src/plugins/vis_builder/common/index.ts

@@ -5,6 +5,7 @@
 
 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';
 

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_TYPE } from '../../../common';
 import { setEditorState } from './state_management/metadata_slice';
 export interface TopNavConfigParams {
   visualizationIdFromUrl: string;
@@ -95,7 +95,7 @@ export const getTopNavConfig = (
               dispatch,
               services
             )}
-            objectType={'wizard'}
+            objectType={VIS_BUILDER_TYPE}
             onClose={() => {}}
             originatingApp={originatingApp}
             getAppNameFromId={stateTransfer.getAppNameFromId}

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,
           }),
         },
       },

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',
         })}