Update PR

Signed-off-by: Junqiu Lei <[email protected]>

maps_dashboards/common/index.ts

@@ -29,16 +29,3 @@ export const LAYER_VISIBILITY = {
   NONE: 'none',
   VISIBLE: 'visible',
 };
-
-export interface MapSavedObjectAttributes {
-  /** Tile of the map */
-  title: string;
-  /** Description of the map */
-  description?: string;
-  /** Map state of the map, which could include current zoom level, lat, lng etc. */
-  mapState?: string;
-  /** Maps-dashboards layers of the map */
-  layerList?: string;
-  /** UI state of the map */
-  uiState?: string;
-}

maps_dashboards/common/map_saved_object_attributes.ts

@@ -0,0 +1,25 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { SavedObjectAttributes } from 'opensearch-dashboards/server';
+
+export interface MapSavedObjectAttributes extends SavedObjectAttributes {
+  /** Tile of the map */
+  title: string;
+  /** Description of the map */
+  description?: string;
+  /** Map state of the map, which could include current zoom level, lat, lng etc. */
+  mapState?: string;
+  /** Maps-dashboards layers of the map */
+  layerList?: string;
+  /** UI state of the map */
+  uiState?: string;
+  /** Used to track version differences in saved object mapping */
+  version: number;
+  /** Used to reference other saved objects */
+  searchSourceFields?: {
+    index?: string;
+  };
+}

maps_dashboards/opensearch_dashboards.json

@@ -4,6 +4,6 @@
   "opensearchDashboardsVersion": "3.0.0",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["navigation", "opensearchDashboardsReact"],
+  "requiredPlugins": ["navigation", "opensearchDashboardsReact", "savedObjects"],
   "optionalPlugins": []
 }

maps_dashboards/public/application.tsx

@@ -5,24 +5,16 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { AppMountParameters, CoreStart } from '../../../src/core/public';
-import { AppPluginStartDependencies } from './types';
+import { AppMountParameters } from '../../../src/core/public';
+import { MapServices } from './types';
 import { MapsDashboardsApp } from './components/app';
+import { OpenSearchDashboardsContextProvider } from '../../../src/plugins/opensearch_dashboards_react/public';
 
-export const renderApp = (
-  { notifications, http, savedObjects }: CoreStart,
-  { navigation }: AppPluginStartDependencies,
-  { appBasePath, element, setHeaderActionMenu }: AppMountParameters
-) => {
+export const renderApp = ({ element }: AppMountParameters, services: MapServices) => {
   ReactDOM.render(
-    <MapsDashboardsApp
-      basename={appBasePath}
-      notifications={notifications}
-      http={http}
-      navigation={navigation}
-      savedObjectsClient={savedObjects.client}
-      setHeaderActionMenu={setHeaderActionMenu}
-    />,
+    <OpenSearchDashboardsContextProvider services={services}>
+      <MapsDashboardsApp />
+    </OpenSearchDashboardsContextProvider>,
     element
   );
 

maps_dashboards/public/components/app.tsx

@@ -4,58 +4,26 @@
  */
 
 import React from 'react';
-import { HashRouter as Router, Route, Switch } from 'react-router-dom';
+import { Router, Route, Switch } from 'react-router-dom';
 import { I18nProvider } from '@osd/i18n/react';
 import { MapsList } from './maps_list';
 import { MapPage } from './map_page';
-import { AppMountParameters, CoreStart } from '../../../../src/core/public';
-import { NavigationPublicPluginStart } from '../../../../src/plugins/navigation/public';
-import { APP_PATH } from '../../common/index';
+import { APP_PATH } from '../../common';
+import { useOpenSearchDashboards } from '../../../../src/plugins/opensearch_dashboards_react/public';
+import { MapServices } from '../types';
 
-interface MapsDashboardsAppDeps {
-  basename: string;
-  notifications: CoreStart['notifications'];
-  http: CoreStart['http'];
-  navigation: NavigationPublicPluginStart;
-  savedObjectsClient: CoreStart['savedObjects']['client'];
-  setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
-}
-
-export const MapsDashboardsApp = ({
-  basename,
-  notifications,
-  http,
-  savedObjectsClient,
-  navigation,
-  setHeaderActionMenu,
-}: MapsDashboardsAppDeps) => {
+export const MapsDashboardsApp = () => {
+  const {
+    services: { appBasePath },
+  } = useOpenSearchDashboards<MapServices>();
   // Render the application DOM.
   return (
-    <Router basename={basename}>
+    <Router history={appBasePath}>
       <I18nProvider>
         <div>
           <Switch>
-            <Route
-              path={APP_PATH.CREATE_MAP}
-              render={(props) => (
-                <MapPage
-                  navigation={navigation}
-                  setHeaderActionMenu={setHeaderActionMenu}
-                  savedObjectsClient={savedObjectsClient}
-                />
-              )}
-            />
-            <Route
-              exact
-              path="/"
-              render={() => (
-                <MapsList
-                  http={http}
-                  notifications={notifications}
-                  savedObjectsClient={savedObjectsClient}
-                />
-              )}
-            />
+            <Route path={APP_PATH.CREATE_MAP} render={() => <MapPage />} />
+            <Route exact path="/" render={() => <MapsList />} />
           </Switch>
         </div>
       </I18nProvider>

maps_dashboards/public/components/map_page/map_page.tsx

@@ -4,52 +4,13 @@
  */
 
 import React from 'react';
-import { i18n } from '@osd/i18n';
-import { AppMountParameters, CoreStart } from 'opensearch-dashboards/public';
-import {
-  NavigationPublicPluginStart as NavigationStart,
-  TopNavMenuData,
-} from '../../../../../src/plugins/navigation/public';
-import { PLUGIN_ID } from '../../../common';
 import { MapContainer } from '../map_container';
+import { MapTopNavMenu } from '../map_top_nav';
 
-interface MapContainerProps {
-  navigation: NavigationStart;
-  setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
-  savedObjectsClient: CoreStart['savedObjects']['client'];
-}
-
-export const MapPage = ({
-  navigation,
-  setHeaderActionMenu,
-  savedObjectsClient,
-}: MapContainerProps) => {
-  const topNavMenuConfigs: TopNavMenuData[] = [];
-  topNavMenuConfigs.push({
-    label: i18n.translate('maps.topNav.saveMapButtonLabel', {
-      defaultMessage: `Save`,
-    }),
-    run: async () => {
-      await savedObjectsClient.create('map', {
-        title: 'test to add',
-        description: 'test to add the description',
-      });
-    },
-    iconType: 'save',
-  });
-  const renderTopNavMenu = () => {
-    const { TopNavMenu } = navigation.ui;
-    return (
-      <TopNavMenu
-        appName={PLUGIN_ID}
-        config={topNavMenuConfigs}
-        setMenuMountPoint={setHeaderActionMenu}
-      />
-    );
-  };
+export const MapPage = () => {
   return (
     <div>
-      {renderTopNavMenu()}
+      <MapTopNavMenu />
       <MapContainer />
     </div>
   );

maps_dashboards/public/components/map_top_nav/get_top_nav_config.tsx

@@ -0,0 +1,72 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { i18n } from '@osd/i18n';
+import { TopNavMenuData } from '../../../../../src/plugins/navigation/public';
+import {
+  OnSaveProps,
+  SavedObjectSaveModalOrigin,
+  showSaveModal,
+} from '../../../../../src/plugins/saved_objects/public';
+import { useOpenSearchDashboards } from '../../../../../src/plugins/opensearch_dashboards_react/public';
+import { MapServices } from '../../types';
+
+export const getTopNavConfig = () => {
+  const {
+    services: {
+      notifications: { toasts },
+      i18n: { Context: I18nContext },
+      savedObjects: { client: savedObjectsClient },
+    },
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+  } = useOpenSearchDashboards<MapServices>();
+  const topNavConfig: TopNavMenuData[] = [
+    {
+      iconType: 'save',
+      emphasize: true,
+      id: 'save',
+      label: i18n.translate('maps.topNav.saveMapButtonLabel', {
+        defaultMessage: `Save`,
+      }),
+      run: (_anchorElement) => {
+        const onModalSave = async (onSaveProps: OnSaveProps) => {
+          const savedMap = await savedObjectsClient.create('map', {
+            title: onSaveProps.newTitle,
+            description: onSaveProps.newDescription,
+            // TODO: Integrate other attributes to saved object
+          });
+          const id = savedMap.id;
+          if (id) {
+            toasts.addSuccess({
+              title: i18n.translate('map.topNavMenu.saveMap.successNotificationText', {
+                defaultMessage: `Saved ${onSaveProps.newTitle}`,
+                values: {
+                  visTitle: savedMap.attributes.title,
+                },
+              }),
+            });
+          }
+          return { id };
+        };
+
+        const documentInfo = {
+          title: '',
+          description: '',
+        };
+        const saveModal = (
+          <SavedObjectSaveModalOrigin
+            documentInfo={documentInfo}
+            onSave={onModalSave}
+            objectType={'map'}
+            onClose={() => {}}
+          />
+        );
+        showSaveModal(saveModal, I18nContext);
+      },
+    },
+  ];
+  return topNavConfig;
+};

maps_dashboards/public/components/map_top_nav/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { MapTopNavMenu } from './top_nav_menu';

maps_dashboards/public/components/map_top_nav/top_nav_menu.tsx

@@ -0,0 +1,28 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { PLUGIN_ID } from '../../../common';
+import { getTopNavConfig } from './get_top_nav_config';
+import { useOpenSearchDashboards } from '../../../../../src/plugins/opensearch_dashboards_react/public';
+import { MapServices } from '../../types';
+
+export const MapTopNavMenu = () => {
+  const {
+    services: {
+      setHeaderActionMenu,
+      navigation: {
+        ui: { TopNavMenu },
+      },
+    },
+  } = useOpenSearchDashboards<MapServices>();
+  return (
+    <TopNavMenu
+      appName={PLUGIN_ID}
+      config={getTopNavConfig()}
+      setMenuMountPoint={setHeaderActionMenu}
+    />
+  );
+};