[D&D] Misc fixes (opensearch-project#1924)

* fix: minor fixes

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* chore: nit syntax fixes

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* chore: simplify useSavedWizardVis

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

src/plugins/visualizations/public/wizard/type_selection/type_selection.tsx

@@ -222,7 +222,7 @@ class TypeSelection extends React.Component<TypeSelectionProps, TypeSelectionSta
   private renderVisType = (visType: VisTypeListEntry) => {
     let stage = {};
     let highlightMsg;
-    if (!isVisTypeAlias(visType.type) && visType.type.stage === 'experimental') {
+    if (visType.type.stage === 'experimental') {
       stage = {
         betaBadgeLabel: i18n.translate('visualizations.newVisWizard.experimentalTitle', {
           defaultMessage: 'Experimental',

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

@@ -11,9 +11,8 @@ import { getTopNavConfig } from '../utils/get_top_nav_config';
 import { WizardServices } from '../../types';
 
 import './top_nav.scss';
-import { useIndexPattern } from '../utils/use';
+import { useIndexPattern, useSavedWizardVis } from '../utils/use';
 import { useTypedSelector } from '../utils/state_management';
-import { useSavedWizardVis } from '../utils/use/use_saved_wizard_vis';
 
 export const TopNav = () => {
   // id will only be set for the edit route
@@ -30,12 +29,11 @@ export const TopNav = () => {
     (state) => !!state.visualization.activeVisualization?.draftAgg
   );
 
-  const savedWizardVis = useSavedWizardVis(services, visualizationIdFromUrl);
+  const savedWizardVis = useSavedWizardVis(visualizationIdFromUrl);
 
   const config = useMemo(() => {
-    if (savedWizardVis === undefined) {
-      return;
-    }
+    if (savedWizardVis === undefined) return;
+
     const { visualization: visualizationState, style: styleState } = rootState;
 
     return getTopNavConfig(

src/plugins/wizard/public/application/utils/use/index.ts

@@ -5,3 +5,4 @@
 
 export { useVisualizationType } from './use_visualization_type';
 export { useIndexPattern, useIndexPatterns } from './use_index_pattern';
+export { useSavedWizardVis } from './use_saved_wizard_vis';

src/plugins/wizard/public/application/utils/use/use_index_pattern.tsx

@@ -2,7 +2,7 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { IndexPattern } from '../../../../../data/public';
 import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
 import { WizardServices } from '../../../types';
@@ -17,14 +17,14 @@ export const useIndexPattern = (): IndexPattern | undefined => {
     },
   } = useOpenSearchDashboards<WizardServices>();
 
-  const handleIndexUpdate = useCallback(async () => {
-    const currentIndex = await indexPatterns.get(indexId);
-    setIndexPattern(currentIndex);
-  }, [indexId, indexPatterns]);
-
   useEffect(() => {
+    const handleIndexUpdate = async () => {
+      const currentIndex = await indexPatterns.get(indexId);
+      setIndexPattern(currentIndex);
+    };
+
     handleIndexUpdate();
-  }, [handleIndexUpdate]);
+  }, [indexId, indexPatterns]);
 
   return indexPattern;
 };
@@ -38,7 +38,7 @@ export const useIndexPatterns = () => {
     services: { data },
   } = useOpenSearchDashboards<WizardServices>();
 
-  let foundSelected;
+  let foundSelected: IndexPattern;
   if (!loading && !error) {
     foundSelected = indexPatterns.filter((p) => p.id === indexId)[0];
     if (foundSelected === undefined) {
@@ -51,19 +51,18 @@ export const useIndexPatterns = () => {
   useEffect(() => {
     const handleUpdate = async () => {
       try {
-        const ids = await data.indexPatterns.getIds(indexId);
+        const ids = await data.indexPatterns.getIds(true);
         const patterns = await Promise.all(ids.map((id) => data.indexPatterns.get(id)));
         setIndexPatterns(patterns);
       } catch (e) {
-        setError(e);
+        setError(e as Error);
       } finally {
         setLoading(false);
       }
     };
+
     handleUpdate();
-    // we want to run this hook exactly once, which you do by an empty dep array
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [data.indexPatterns]);
 
   return {
     indexPatterns,

src/plugins/wizard/public/application/utils/use/use_saved_wizard_vis.ts

@@ -16,11 +16,10 @@ import { MetricOptionsDefaults } from '../../../visualizations/metric/metric_viz
 import { getCreateBreadcrumbs, getEditBreadcrumbs } from '../breadcrumbs';
 import { getSavedWizardVis } from '../get_saved_wizard_vis';
 import { useTypedDispatch, setStyleState, setVisualizationState } from '../state_management';
+import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
 
-export const useSavedWizardVis = (
-  services: WizardServices,
-  visualizationIdFromUrl: string | undefined
-) => {
+export const useSavedWizardVis = (visualizationIdFromUrl: string | undefined) => {
+  const { services } = useOpenSearchDashboards<WizardServices>();
   const [savedVisState, setSavedVisState] = useState<SavedObject | undefined>(undefined);
   const dispatch = useTypedDispatch();
 

src/plugins/wizard/public/plugin.test.ts

@@ -33,11 +33,12 @@ describe('WizardPlugin', () => {
       const setup = plugin.setup(coreSetup, setupDeps);
       expect(setup).toHaveProperty('createVisualizationType');
       expect(setupDeps.visualizations.registerAlias).toHaveBeenCalledWith(
-        // TODO: Update this once the properties are final
         expect.objectContaining({
           name: PLUGIN_ID,
           title: PLUGIN_NAME,
           aliasPath: '#/',
+          aliasApp: PLUGIN_ID,
+          stage: 'experimental',
         })
       );
     });

src/plugins/wizard/public/plugin.ts

@@ -94,11 +94,10 @@ export class WizardPlugin
       name: PLUGIN_ID,
       title: PLUGIN_NAME,
       description: i18n.translate('wizard.visPicker.description', {
-        defaultMessage: 'TODO...',
+        defaultMessage: 'Create visualizations using the new Drag & Drop experience',
       }),
-      // TODO: Replace with actual icon once available
       icon: wizardIcon,
-      stage: 'beta',
+      stage: 'experimental',
       aliasApp: PLUGIN_ID,
       aliasPath: '#/',
     });

src/plugins/wizard/public/visualizations/metric/to_expression.test.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// TODO: Cleanup the TODOs in './to_expression.ts' before writing tests for this function

src/plugins/wizard/public/visualizations/metric/to_expression.ts

@@ -87,7 +87,7 @@ const getVisSchemas = (aggConfigs: AggConfigs): any => {
   return schemas;
 };
 
-interface MetricRootState extends RootState {
+export interface MetricRootState extends RootState {
   style: MetricOptionsDefaults;
 }
 

src/plugins/wizard/server/routes/index.ts

@@ -6,17 +6,18 @@
 import { IRouter } from '../../../../core/server';
 
 export function defineRoutes(router: IRouter) {
-  router.get(
-    {
-      path: '/api/wizard/example',
-      validate: false,
-    },
-    async (context, request, response) => {
-      return response.ok({
-        body: {
-          time: new Date().toISOString(),
-        },
-      });
-    }
-  );
+  // Add server siude routes if needed like the example below
+  // router.get(
+  //   {
+  //     path: '/api/wizard/example',
+  //     validate: false,
+  //   },
+  //   async (context, request, response) => {
+  //     return response.ok({
+  //       body: {
+  //         time: new Date().toISOString(),
+  //       },
+  //     });
+  //   }
+  // );
 }