Create a new wizard directly on a dashboard

After selecting a dashboard, create a new wizard directly from the dashboard and have the option to add to that dashboard. Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>
opensearch-project · Sep 17, 2022 · 2538d9d · 2538d9d
1 parent b5d529a
commit 2538d9d
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 11 deletions.
diff --git a/src/plugins/visualize/public/application/utils/get_top_nav_config.tsx b/src/plugins/visualize/public/application/utils/get_top_nav_config.tsx
@@ -127,20 +127,24 @@ export const getTopNavConfig = (
         });
 
         if (originatingApp && saveOptions.returnToOrigin) {
+          // create or edit visualizaton directly from a dashboard
           const appPath = `${VisualizeConstants.EDIT_PATH}/${encodeURIComponent(id)}`;
 
           // Manually insert a new url so the back button will open the saved visualization.
           history.replace(appPath);
           setActiveUrl(appPath);
 
           if (newlyCreated && stateTransfer) {
+            // create and add a new viz to the dashboard
             stateTransfer.navigateToWithEmbeddablePackage(originatingApp, {
               state: { type: VISUALIZE_EMBEDDABLE_TYPE, input: { savedObjectId: id } },
             });
           } else {
+            // edit an existing viz from the dashboard
             application.navigateToApp(originatingApp);
           }
         } else {
+          // create visualization from creating visualization page, not related to any dashboard
           if (setOriginatingApp && originatingApp && newlyCreated) {
             setOriginatingApp(undefined);
           }

diff --git a/src/plugins/wizard/public/application/components/top_nav.tsx b/src/plugins/wizard/public/application/components/top_nav.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useUnmount } from 'react-use';
 import { PLUGIN_ID } from '../../../common';
@@ -32,14 +32,25 @@ export const TopNav = () => {
 
   const saveDisabledReason = useCanSave();
   const savedWizardVis = useSavedWizardVis(visualizationIdFromUrl);
+  const stateTransfer = services.embeddable.getStateTransfer();
+  const [originatingApp, setOriginatingApp] = useState<string>();
 
   const config = useMemo(() => {
     if (savedWizardVis === undefined) return;
 
+    const { originatingApp: value } =
+      services.embeddable
+        .getStateTransfer(services.scopedHistory)
+        .getIncomingEditorState({ keysToRemoveAfterFetch: ['id', 'input'] }) || {};
+    setOriginatingApp(value);
+
     const { visualization: visualizationState, style: styleState } = rootState;
 
     return getTopNavConfig(
       {
+        originatingApp,
+        setOriginatingApp,
+        stateTransfer,
         visualizationIdFromUrl,
         savedWizardVis,
         visualizationState,
@@ -49,7 +60,16 @@ export const TopNav = () => {
       },
       services
     );
-  }, [rootState, savedWizardVis, services, visualizationIdFromUrl, saveDisabledReason, dispatch]);
+  }, [
+    rootState,
+    originatingApp,
+    savedWizardVis,
+    services,
+    visualizationIdFromUrl,
+    saveDisabledReason,
+    stateTransfer,
+    dispatch,
+  ]);
 
   const indexPattern = useIndexPatterns().selected;
 

diff --git a/src/plugins/wizard/public/application/utils/get_top_nav_config.tsx b/src/plugins/wizard/public/application/utils/get_top_nav_config.tsx
@@ -41,17 +41,24 @@ import { WizardVisSavedObject } from '../../types';
 import { StyleState, VisualizationState, AppDispatch } from './state_management';
 import { EDIT_PATH } from '../../../common';
 import { setEditorState } from './state_management/metadata_slice';
+import { EmbeddableStateTransfer } from '../../../../embeddable/public';
 interface TopNavConfigParams {
   visualizationIdFromUrl: string;
   savedWizardVis: WizardVisSavedObject;
   visualizationState: VisualizationState;
   styleState: StyleState;
   saveDisabledReason?: string;
   dispatch: AppDispatch;
+  originatingApp?: string;
+  setOriginatingApp?: (originatingApp: string | undefined) => void;
+  stateTransfer: EmbeddableStateTransfer;
 }
 
 export const getTopNavConfig = (
   {
+    originatingApp,
+    setOriginatingApp,
+    stateTransfer,
     visualizationIdFromUrl,
     savedWizardVis,
     visualizationState,
@@ -60,6 +67,7 @@ export const getTopNavConfig = (
     dispatch,
   }: TopNavConfigParams,
   {
+    application,
     history,
     toastNotifications,
     i18n: { Context: I18nContext },
@@ -93,6 +101,7 @@ export const getTopNavConfig = (
           if (!savedWizardVis) {
             return;
           }
+          const newlyCreated = !Boolean(savedWizardVis.id) || savedWizardVis.copyOnSave;
           const currentTitle = savedWizardVis.title;
           const indexPattern = await indexPatterns.get(visualizationState.indexPattern || '');
           savedWizardVis.searchSourceFields = {
@@ -130,6 +139,24 @@ export const getTopNavConfig = (
                 'data-test-subj': 'saveVisualizationSuccess',
               });
 
+              if (originatingApp && returnToOrigin) {
+                // create or edit wizard directly from a dashboard
+                if (newlyCreated && stateTransfer) {
+                  // create and add a new wizard to the dashboard
+                  stateTransfer.navigateToWithEmbeddablePackage(originatingApp, {
+                    state: { type: 'wizard', input: { savedObjectId: id } },
+                  });
+                } else {
+                  // edit an existing wizard from the dashboard
+                  application.navigateToApp(originatingApp);
+                }
+              } else {
+                // create wizard from creating visualization page, not related to any dashboard
+                if (setOriginatingApp && originatingApp && newlyCreated) {
+                  setOriginatingApp(undefined);
+                }
+              }
+
               // Update URL
               if (id !== visualizationIdFromUrl) {
                 history.push({
@@ -172,6 +199,8 @@ export const getTopNavConfig = (
             onSave={onSave}
             objectType={'wizard'}
             onClose={() => {}}
+            originatingApp={originatingApp}
+            getAppNameFromId={stateTransfer.getAppNameFromId}
           />
         );
 

diff --git a/src/plugins/wizard/public/plugin.ts b/src/plugins/wizard/public/plugin.ts
@@ -87,6 +87,8 @@ export class WizardPlugin
           setHeaderActionMenu: params.setHeaderActionMenu,
           types: typeService.start(),
           savedWizardLoader: selfStart.savedWizardLoader,
+          embeddable: pluginsStart.embeddable,
+          scopedHistory: params.history,
         };
 
         // Instantiate the store

diff --git a/src/plugins/wizard/public/types.ts b/src/plugins/wizard/public/types.ts
@@ -13,7 +13,7 @@ import { NavigationPublicPluginStart } from '../../navigation/public';
 import { DataPublicPluginStart } from '../../data/public';
 import { TypeServiceSetup, TypeServiceStart } from './services/type_service';
 import { SavedObjectLoader } from '../../saved_objects/public';
-import { AppMountParameters, CoreStart, ToastsStart } from '../../../core/public';
+import { AppMountParameters, CoreStart, ToastsStart, ScopedHistory } from '../../../core/public';
 
 export type WizardSetup = TypeServiceSetup;
 export interface WizardStart extends TypeServiceStart {
@@ -43,6 +43,8 @@ export interface WizardServices extends CoreStart {
   types: TypeServiceStart;
   expressions: ExpressionsStart;
   history: History;
+  embeddable: EmbeddableStart;
+  scopedHistory: ScopedHistory;
 }
 
 export interface ISavedVis {

diff --git a/yarn.lock b/yarn.lock
@@ -11640,10 +11640,10 @@ leaflet-responsive-popup@0.6.4:
   resolved "https://registry.yarnpkg.com/leaflet-responsive-popup/-/leaflet-responsive-popup-0.6.4.tgz#b93d9368ef9f96d6dc911cf5b96d90e08601c6b3"
   integrity sha512-2D8G9aQA6NHkulDBPN9kqbUCkCpWQQ6dF0xFL11AuEIWIbsL4UC/ZPP5m8GYM0dpU6YTlmyyCh1Tz+cls5Q4dg==
 
-"leaflet-vega@npm:@amoo-miki/leaflet-vega@0.8.7":
-  version "0.8.7"
-  resolved "https://registry.yarnpkg.com/@amoo-miki/leaflet-vega/-/leaflet-vega-0.8.7.tgz#8faca1b4b8e2ef7d48667ac6faad9204f4da7153"
-  integrity sha512-T4M5yziwj3Fi9Adsbce+cdWqPjON0BRwEjwqLlPMoirU1vhifA6YKrlZkVzJrK0IIm+hdfMCLkBz33gD8fdxzQ==
+"leaflet-vega@npm:@amoo-miki/leaflet-vega@0.8.8":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@amoo-miki/leaflet-vega/-/leaflet-vega-0.8.8.tgz#675abf37d72fbea859755e982f4fd19dea776557"
+  integrity sha512-W2gGgFDxzy/XUx+fQJfz0NYVXsKl7V+G6QywiMcOV5NEodDId9c60up7NNf+cfM7ggpo+5BuLqrKmosuGO1CsA==
   dependencies:
     vega-spec-injector "^0.0.2"
 
@@ -18000,10 +18000,10 @@ vega-hierarchy@~4.1.0:
     vega-dataflow "^5.7.3"
     vega-util "^1.15.2"
 
-"vega-interpreter@npm:@amoo-miki/vega-forced-csp-compliant-interpreter@1.0.5":
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/@amoo-miki/vega-forced-csp-compliant-interpreter/-/vega-forced-csp-compliant-interpreter-1.0.5.tgz#49970be9b00ca7e45ced0617fbf373c77a28aab4"
-  integrity sha512-lfeU77lVoUbSCC6N1ywdKg+I6K08xpkd82TLon+LebtKyC8aLCe7P5Dd/89zAPyFwRyobKftHu8z0xpV7R7a4Q==
+"vega-interpreter@npm:@amoo-miki/vega-forced-csp-compliant-interpreter@1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@amoo-miki/vega-forced-csp-compliant-interpreter/-/vega-forced-csp-compliant-interpreter-1.0.6.tgz#5cffdf12b7fe12dc936194edd9e8519506c38716"
+  integrity sha512-9S5nTTVd8JVKobcWp5iwirIeePiamwH1J9uSZPuG5kcF0TUBvGu++ERKjNdst5Qck7e4R6/7vjx2wVf58XUarg==
 
 vega-label@~1.2.0:
   version "1.2.0"