[Backport 2.4] [Vis Builder] Remaning vis builder rename backport 2.4 (…

…#2770)

* Change classname prefix wiz to vb (#2581)

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

* Change wizard to vis_builder in file names and paths (#2587)

Change all wizard reference in file names and paths to vis_builder

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

* Rename wizard to visBuilder in class name, type name and function name (#2639)

Rname wizard to visBuilder

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

* [Vis Builder] Rename wizard on save modal and visualization table (#2645)

* 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>

* Save visualization on save modal, VisBuilder for chart type

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

* No experimental flag

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

* Change save object type, wizard id and name to visBuilder (#2673)

* Change save object type, wizard ID and Name to visBuilder

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

* Rename wizard in functional tests

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

* Finalize plugin-id and plugin-name and saved-object-type

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

* Change official name to VisBuilder

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

* Delete migration

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

* Fix functional test

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

* Update snapshot

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

config/opensearch_dashboards.yml

@@ -222,7 +222,7 @@
 
 # Set the value of this setting to true to start exploring wizard
 # functionality in Visualization.
-# wizard.enabled: false
+# vis_builder.enabled: false
 
 # Set the value of this setting to true to enable the experimental multiple data source
 # support feature. Use with caution.

src/plugins/saved_objects/README.md

@@ -1,6 +1,6 @@
 # Saved object
 
-The saved object plugin provides all the core services and functionalities of saved objects. It is utilized by many core plugins such as [`visualization`](../visualizations/), [`dashboard`](../dashboard/) and [`wizard`](../wizard/), as well as external plugins. Saved object is the primary way to store app and plugin data in a standardized form in OpenSearch Dashboards. They allow plugin developers to manage creating, saving, editing and retrieving data for the application. They can also make reference to other saved objects and have useful features out of the box, such as migrations and strict typings. The saved objects can be managed by the Saved Object Management UI.
+The saved object plugin provides all the core services and functionalities of saved objects. It is utilized by many core plugins such as [`visualization`](../visualizations/), [`dashboard`](../dashboard/) and [`visBuilder`](../vis_builder/), as well as external plugins. Saved object is the primary way to store app and plugin data in a standardized form in OpenSearch Dashboards. They allow plugin developers to manage creating, saving, editing and retrieving data for the application. They can also make reference to other saved objects and have useful features out of the box, such as migrations and strict typings. The saved objects can be managed by the Saved Object Management UI.
 
 ## Save relationships to index pattern
 

src/plugins/saved_objects_management/opensearch_dashboards.json

@@ -4,7 +4,7 @@
   "server": true,
   "ui": true,
   "requiredPlugins": ["management", "data"],
-  "optionalPlugins": ["dashboard", "visualizations", "discover", "home", "wizard"],
+  "optionalPlugins": ["dashboard", "visualizations", "discover", "home", "visBuilder"],
   "extraPublicDirs": ["public/lib"],
   "requiredBundles": ["opensearchDashboardsReact", "home"]
 }

src/plugins/saved_objects_management/public/plugin.ts

@@ -31,7 +31,7 @@
 import { i18n } from '@osd/i18n';
 import { CoreSetup, CoreStart, Plugin } from 'src/core/public';
 
-import { WizardStart } from '../../wizard/public';
+import { VisBuilderStart } from '../../vis_builder/public';
 import { ManagementSetup } from '../../management/public';
 import { DataPublicPluginStart } from '../../data/public';
 import { DashboardStart } from '../../dashboard/public';
@@ -76,7 +76,7 @@ export interface StartDependencies {
   dashboard?: DashboardStart;
   visualizations?: VisualizationsStart;
   discover?: DiscoverStart;
-  wizard?: WizardStart;
+  visBuilder?: VisBuilderStart;
 }
 
 export class SavedObjectsManagementPlugin

src/plugins/saved_objects_management/public/register_services.ts

@@ -36,7 +36,7 @@ export const registerServices = async (
   registry: ISavedObjectsManagementServiceRegistry,
   getStartServices: StartServicesAccessor<StartDependencies, SavedObjectsManagementPluginStart>
 ) => {
-  const [, { dashboard, visualizations, discover, wizard }] = await getStartServices();
+  const [, { dashboard, visualizations, discover, visBuilder }] = await getStartServices();
 
   if (dashboard) {
     registry.register({
@@ -62,11 +62,11 @@ export const registerServices = async (
     });
   }
 
-  if (wizard) {
+  if (visBuilder) {
     registry.register({
-      id: 'savedWizard',
-      title: 'wizard',
-      service: wizard.savedWizardLoader,
+      id: 'savedVisBuilder',
+      title: 'visBuilder',
+      service: visBuilder.savedVisBuilderLoader,
     });
   }
 };

src/plugins/wizard/README.md → src/plugins/vis_builder/README.md

@@ -1,12 +1,12 @@
-# Wizard
+# VisBuilder
 
 An OpenSearch Dashboards plugin for a visualization experience that makes exploring data and creating visualizations much easier. It will act as an additional way to create visualizations alongside the exiting tools within the current visualizations plugin. The tool will be incremental to the visualization tools available to users in OpenSearch Dashboards today.
 
 ## Usage
 
 To use this plugin, navigate to:
 
-Visualize -> Create Visualization -> Wizard
+Visualize -> Create Visualization -> VisBuilder
 
 ## Add a visualization
 

src/plugins/vis_builder/common/index.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const PLUGIN_ID = 'vis-builder';
+export const PLUGIN_NAME = 'VisBuilder';
+export const VISUALIZE_ID = 'visualize';
+export const EDIT_PATH = '/edit';
+export const VIS_BUILDER_CHART_TYPE = 'VisBuilder';
+
+export {
+  VisBuilderSavedObjectAttributes,
+  VISBUILDER_SAVED_OBJECT,
+} from './vis_builder_saved_object_attributes';

src/plugins/wizard/common/wizard_saved_object_attributes.ts → src/plugins/vis_builder/common/vis_builder_saved_object_attributes.ts

@@ -5,9 +5,9 @@
 
 import { SavedObjectAttributes } from '../../../core/types';
 
-export const WIZARD_SAVED_OBJECT = 'wizard';
+export const VISBUILDER_SAVED_OBJECT = 'visualization-visbuilder';
 
-export interface WizardSavedObjectAttributes extends SavedObjectAttributes {
+export interface VisBuilderSavedObjectAttributes extends SavedObjectAttributes {
   title: string;
   description?: string;
   visualizationState?: string;

src/plugins/wizard/opensearch_dashboards.json → src/plugins/vis_builder/opensearch_dashboards.json

@@ -1,5 +1,5 @@
 {
-  "id": "wizard",
+  "id": "visBuilder",
   "version": "1.0.0",
   "opensearchDashboardsVersion": "opensearchDashboards",
   "server": true,

src/plugins/wizard/public/application/app.tsx → src/plugins/vis_builder/public/application/app.tsx

@@ -13,7 +13,7 @@ import { Workspace } from './components/workspace';
 import './app.scss';
 import { RightNav } from './components/right_nav';
 
-export const WizardApp = () => {
+export const VisBuilderApp = () => {
   // Render the application DOM.
   return (
     <I18nProvider>

src/plugins/wizard/public/application/components/data_tab/field_search.tsx → src/plugins/vis_builder/public/application/components/data_tab/field_search.tsx

@@ -17,7 +17,7 @@ export interface Props {
 }
 
 /**
- * Component is Wizard's side bar to  search of available fields
+ * Component is VisBuilder's side bar to  search of available fields
  * Additionally there's a button displayed that allows the user to show/hide more filter fields
  */
 export function FieldSearch({ value }: Props) {

src/plugins/wizard/public/application/components/data_tab/secondary_panel.tsx → src/plugins/vis_builder/public/application/components/data_tab/secondary_panel.tsx

@@ -11,7 +11,7 @@ import { DefaultEditorAggParams } from '../../../../../vis_default_editor/public
 import { Title } from './title';
 import { useIndexPatterns, useVisualizationType } from '../../utils/use';
 import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
-import { WizardServices } from '../../../types';
+import { VisBuilderServices } from '../../../types';
 import { AggParam, IAggType, IFieldParamType } from '../../../../../data/public';
 import { saveDraftAgg, editDraftAgg } from '../../utils/state_management/visualization_slice';
 import { setValidity } from '../../utils/state_management/metadata_slice';
@@ -33,7 +33,7 @@ export function SecondaryPanel() {
         search: { aggs: aggService },
       },
     },
-  } = useOpenSearchDashboards<WizardServices>();
+  } = useOpenSearchDashboards<VisBuilderServices>();
   const schemas = vizType.ui.containerConfig.data.schemas.all;
 
   const aggConfigs = useMemo(() => {

src/plugins/wizard/public/application/components/data_tab/use/use_dropbox.tsx → src/plugins/vis_builder/public/application/components/data_tab/use/use_dropbox.tsx

@@ -18,7 +18,7 @@ import {
 } from '../../../utils/state_management/visualization_slice';
 import { useIndexPatterns } from '../../../utils/use/use_index_pattern';
 import { useOpenSearchDashboards } from '../../../../../../opensearch_dashboards_react/public';
-import { WizardServices } from '../../../../types';
+import { VisBuilderServices } from '../../../../types';
 
 const filterByName = propFilter('name');
 const filterByType = propFilter('type');
@@ -38,7 +38,7 @@ export const useDropbox = (props: UseDropboxProps): DropboxProps => {
         search: { aggs: aggService },
       },
     },
-  } = useOpenSearchDashboards<WizardServices>();
+  } = useOpenSearchDashboards<VisBuilderServices>();
   const aggConfigParams = useTypedSelector(
     (state) => state.visualization.activeVisualization?.aggConfigParams
   );

src/plugins/wizard/public/application/components/right_nav.tsx → src/plugins/vis_builder/public/application/components/right_nav.tsx

@@ -16,14 +16,14 @@ import { FormattedMessage } from '@osd/i18n/react';
 import { useVisualizationType } from '../utils/use';
 import './side_nav.scss';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
-import { WizardServices } from '../../types';
+import { VisBuilderServices } from '../../types';
 import { setActiveVisualization, useTypedDispatch } from '../utils/state_management';
 
 export const RightNav = () => {
   const [newVisType, setNewVisType] = useState<string>();
   const {
     services: { types },
-  } = useOpenSearchDashboards<WizardServices>();
+  } = useOpenSearchDashboards<VisBuilderServices>();
   const { ui, name: activeVisName } = useVisualizationType();
   const dispatch = useTypedDispatch();
   const StyleSection = ui.containerConfig.style.render;

src/plugins/wizard/public/application/components/top_nav.tsx → src/plugins/vis_builder/public/application/components/top_nav.tsx

@@ -9,10 +9,10 @@ import { useUnmount } from 'react-use';
 import { PLUGIN_ID } from '../../../common';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { getTopNavConfig } from '../utils/get_top_nav_config';
-import { WizardServices } from '../../types';
+import { VisBuilderServices } from '../../types';
 
 import './top_nav.scss';
-import { useIndexPatterns, useSavedWizardVis } from '../utils/use';
+import { useIndexPatterns, useSavedVisBuilderVis } from '../utils/use';
 import { useTypedSelector, useTypedDispatch } from '../utils/state_management';
 import { setEditorState } from '../utils/state_management/metadata_slice';
 import { useCanSave } from '../utils/use/use_can_save';
@@ -22,7 +22,7 @@ import { TopNavMenuData } from '../../../../navigation/public';
 export const TopNav = () => {
   // id will only be set for the edit route
   const { id: visualizationIdFromUrl } = useParams<{ id: string }>();
-  const { services } = useOpenSearchDashboards<WizardServices>();
+  const { services } = useOpenSearchDashboards<VisBuilderServices>();
   const {
     setHeaderActionMenu,
     navigation: {
@@ -33,18 +33,18 @@ export const TopNav = () => {
   const dispatch = useTypedDispatch();
 
   const saveDisabledReason = useCanSave();
-  const savedWizardVis = useSavedWizardVis(visualizationIdFromUrl);
+  const savedVisBuilderVis = useSavedVisBuilderVis(visualizationIdFromUrl);
   const { selected: indexPattern } = useIndexPatterns();
   const [config, setConfig] = useState<TopNavMenuData[] | undefined>();
 
   useEffect(() => {
     const getConfig = () => {
-      if (!savedWizardVis || !indexPattern) return;
+      if (!savedVisBuilderVis || !indexPattern) return;
 
       return getTopNavConfig(
         {
           visualizationIdFromUrl,
-          savedWizardVis: saveStateToSavedObject(savedWizardVis, rootState, indexPattern),
+          savedVisBuilderVis: saveStateToSavedObject(savedVisBuilderVis, rootState, indexPattern),
           saveDisabledReason,
           dispatch,
         },
@@ -55,7 +55,7 @@ export const TopNav = () => {
     setConfig(getConfig());
   }, [
     rootState,
-    savedWizardVis,
+    savedVisBuilderVis,
     services,
     visualizationIdFromUrl,
     saveDisabledReason,

src/plugins/wizard/public/application/components/workspace.tsx → src/plugins/vis_builder/public/application/components/workspace.tsx

@@ -7,7 +7,7 @@ import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiPanel } from '@e
 import React, { FC, useState, useMemo, useEffect, useLayoutEffect } from 'react';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { IExpressionLoaderParams } from '../../../../expressions/public';
-import { WizardServices } from '../../types';
+import { VisBuilderServices } from '../../types';
 import { validateSchemaState } from '../utils/validate_schema_state';
 import { useTypedSelector } from '../utils/state_management';
 import { useVisualizationType } from '../utils/use';
@@ -26,7 +26,7 @@ export const Workspace: FC = ({ children }) => {
       notifications: { toasts },
       data,
     },
-  } = useOpenSearchDashboards<WizardServices>();
+  } = useOpenSearchDashboards<VisBuilderServices>();
   const { toExpression, ui } = useVisualizationType();
   const [expression, setExpression] = useState<string>();
   const [searchContext, setSearchContext] = useState<IExpressionLoaderParams['searchContext']>({

src/plugins/wizard/public/application/index.tsx → src/plugins/vis_builder/public/application/index.tsx

@@ -9,14 +9,14 @@ import { Router, Route, Switch } from 'react-router-dom';
 import { Provider as ReduxProvider } from 'react-redux';
 import { Store } from 'redux';
 import { AppMountParameters } from '../../../../core/public';
-import { WizardServices } from '../types';
-import { WizardApp } from './app';
+import { VisBuilderServices } from '../types';
+import { VisBuilderApp } from './app';
 import { OpenSearchDashboardsContextProvider } from '../../../opensearch_dashboards_react/public';
 import { EDIT_PATH } from '../../common';
 
 export const renderApp = (
   { element, history }: AppMountParameters,
-  services: WizardServices,
+  services: VisBuilderServices,
   store: Store
 ) => {
   ReactDOM.render(
@@ -26,7 +26,7 @@ export const renderApp = (
           <services.i18n.Context>
             <Switch>
               <Route path={[`${EDIT_PATH}/:id`, '/']} exact={false}>
-                <WizardApp />
+                <VisBuilderApp />
               </Route>
             </Switch>
           </services.i18n.Context>

src/plugins/vis_builder/public/application/utils/get_saved_vis_builder_vis.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { VisBuilderServices } from '../..';
+
+export const getSavedVisBuilderVis = async (
+  services: VisBuilderServices,
+  visBuilderVisId?: string
+) => {
+  const { savedVisBuilderLoader } = services;
+  if (!savedVisBuilderLoader) {
+    return {};
+  }
+  const savedVisBuilderVis = await savedVisBuilderLoader.get(visBuilderVisId);
+
+  return savedVisBuilderVis;
+};