[Dashboard De-Angular] Render a custom routing error message when route does not exist

[abbyhu2000]

Current behavior:

• when route does not exist, auto navigating to overview page

We can render some custom routing error message like how visualize plugin handles it.

[shawnkchan]

Hey there, I would like to be assigned to this issue. May I know more about the task?

[joshuarrrr]

@abbyhu2000 Can you provide some code links here?

[ashwin-pc]

@kgcreative Whats your take on this? It looks like each app is creating their own way of handling page/route not found. I think we should have a common 404 page that behaves identically instead of relyingon each plugin to create their own 404 page

[abbyhu2000]

yea this was a proposal when i was de-angularizing dashboard.

• Currently, visualize plugin render the below page when the route does not exist:

• However, when i configure the routing for dashboard plugin, since it previously did not have a error page so when the routing is invalid or not found, i just route the page to the overview page.

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

export const DashboardApp = () => {
  return (
    <Switch>
      <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_no_match.tsx:

/*
 * Copyright OpenSearch Contributors
 * SPDX-License-Identifier: Apache-2.0
 */

import { useEffect } from 'react';
import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
import { DashboardServices } from '../../types';

export const DashboardNoMatch = () => {
  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;
};

Before implementing this, can we confirm that we want to add such an error page for the dashboard plugin? @kgcreative @KrooshalUX

[kgcreative]

@kgcreative Whats your take on this? It looks like each app is creating their own way of handling page/route not found. I think we should have a common 404 page that behaves identically instead of relyingon each plugin to create their own 404 page

We should create a 404 page template in OUI that all plugins should leverage.