Fix routing (opensearch-project#4357)

Fix the edit action routing on the dashboard listing page; also fix routing when the route has no match. Add '_g' param to the URL on both dashboard
listing page and dashboard editor page.

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

Author: abbyhu2000

src/plugins/dashboard/public/application/app.tsx

@@ -11,30 +11,48 @@
 
 import './app.scss';
 import { AppMountParameters } from 'opensearch-dashboards/public';
-import React from 'react';
-import { Route, Switch } from 'react-router-dom';
+import React, { useEffect } from 'react';
+import { Route, Switch, useLocation } from 'react-router-dom';
 import { DashboardConstants, createDashboardEditUrl } from '../dashboard_constants';
 import { DashboardEditor, DashboardListing, DashboardNoMatch } from './components';
+import { useOpenSearchDashboards } from '../../../opensearch_dashboards_react/public';
+import { DashboardServices } from '../types';
+import { syncQueryStateWithUrl } from '../../../data/public';
 
 export interface DashboardAppProps {
   onAppLeave: AppMountParameters['onAppLeave'];
 }
 
 export const DashboardApp = ({ onAppLeave }: DashboardAppProps) => {
+  const {
+    services: {
+      data: { query },
+      osdUrlStateStorage,
+    },
+  } = useOpenSearchDashboards<DashboardServices>();
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    // syncs `_g` portion of url with query services
+    const { stop } = syncQueryStateWithUrl(query, osdUrlStateStorage);
+
+    return () => stop();
+
+    // this effect should re-run when pathname is changed to preserve querystring part,
+    // so the global state is always preserved
+  }, [query, osdUrlStateStorage, pathname]);
+
   return (
     <Switch>
-      <Route exact path={['/', DashboardConstants.LANDING_PAGE_PATH]}>
-        <DashboardListing />
-      </Route>
-      <Route
-        exact
-        path={[DashboardConstants.CREATE_NEW_DASHBOARD_URL, createDashboardEditUrl(':id')]}
-      >
+      <Route path={[DashboardConstants.CREATE_NEW_DASHBOARD_URL, createDashboardEditUrl(':id')]}>
         <div className="app-container dshAppContainer">
           <DashboardEditor />
           <div id="dashboardViewport" />
         </div>
       </Route>
+      <Route exact path={['/', DashboardConstants.LANDING_PAGE_PATH]}>
+        <DashboardListing />
+      </Route>
       <DashboardNoMatch />
     </Switch>
   );

src/plugins/dashboard/public/application/components/dashboard_listing.tsx

@@ -31,7 +31,6 @@ export const DashboardListing = () => {
       notifications,
       savedDashboards,
       dashboardProviders,
-      addBasePath,
     },
   } = useOpenSearchDashboards<DashboardServices>();
 
@@ -90,22 +89,26 @@ export const DashboardListing = () => {
   };
 
   const editItem = useCallback(
-    ({ editUrl }: any) => {
-      if (addBasePath) {
-        history.push(addBasePath(editUrl));
+    ({ appId, editUrl }: any) => {
+      if (appId === 'dashboard') {
+        history.push(editUrl);
+      } else {
+        application.navigateToUrl(editUrl);
       }
     },
-    [history, addBasePath]
+    [history, application]
   );
 
-  const viewItem = useCallback(
-    ({ viewUrl }: any) => {
-      if (addBasePath) {
-        history.push(addBasePath(viewUrl));
-      }
-    },
-    [history, addBasePath]
-  );
+  // const viewItem = useCallback(
+  //   ({ appId, viewUrl }: any) => {
+  //     if (appId === 'dashboard') {
+  //       history.push(viewUrl);
+  //     } else {
+  //       application.navigateToUrl(viewUrl);
+  //     }
+  //   },
+  //   [history, application]
+  // );
 
   const deleteItems = useCallback(
     (dashboards: object[]) => {

src/plugins/dashboard/public/application/components/dashboard_no_match.tsx

@@ -3,8 +3,21 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
+import { useEffect } from 'react';
+import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
+import { DashboardServices } from '../../types';
 
 export const DashboardNoMatch = () => {
-  return <div>Dashboard No Match</div>;
+  const { services } = useOpenSearchDashboards<DashboardServices>();
+  useEffect(() => {
+    const path = window.location.hash.substring(1);
+    services.restorePreviousUrl();
+
+    const { navigated } = services.navigateToLegacyOpenSearchDashboardsUrl(path);
+    if (!navigated) {
+      services.navigateToDefaultApp();
+    }
+  }, [services]);
+
+  return null;
 };

src/plugins/dashboard/public/application/utils/use/use_dashboard_container.tsx

@@ -86,7 +86,7 @@ export const useDashboardContainer = (
 
   useEffect(() => {
     const incomingEmbeddable = services.embeddable
-      .getStateTransfer(services.scopedHistory())
+      .getStateTransfer(services.scopedHistory)
       .getIncomingEmbeddablePackage();
 
     if (

src/plugins/dashboard/public/plugin.tsx

@@ -385,6 +385,12 @@ export class DashboardPlugin
           savedObjects,
         } = pluginsStart;
 
+        // dispatch synthetic hash change event to update hash history objects
+        // this is necessary because hash updates triggered by using popState won't trigger this event naturally.
+        const unlistenParentHistory = params.history.listen(() => {
+          window.dispatchEvent(new HashChangeEvent('hashchange'));
+        });
+
         const history = createHashHistory(); // need more research
         const services: DashboardServices = {
           ...coreStart,
@@ -418,7 +424,7 @@ export class DashboardPlugin
           },
           localStorage: new Storage(localStorage),
           usageCollection,
-          scopedHistory: () => this.currentHistory!,
+          scopedHistory: params.history,
           setHeaderActionMenu: params.setHeaderActionMenu,
           savedObjectsPublic: savedObjects,
           restorePreviousUrl,
@@ -430,6 +436,8 @@ export class DashboardPlugin
         const { renderApp } = await import('./application');
         const unmount = renderApp(params, services);
         return () => {
+          params.element.classList.remove('dshAppContainer');
+          unlistenParentHistory();
           unmount();
           appUnMounted();
         };

src/plugins/dashboard/public/types.ts

@@ -270,7 +270,7 @@ export interface DashboardServices extends CoreStart {
   usageCollection?: UsageCollectionSetup;
   navigateToDefaultApp: UrlForwardingStart['navigateToDefaultApp'];
   navigateToLegacyOpenSearchDashboardsUrl: UrlForwardingStart['navigateToLegacyOpenSearchDashboardsUrl'];
-  scopedHistory: () => ScopedHistory;
+  scopedHistory: ScopedHistory;
   setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
   savedObjectsPublic: SavedObjectsStart;
   restorePreviousUrl: () => void;