[Dashboard De-Angular] Use React to start up dashboard plugin and con…

…figure react routing (#4012)

* Replace angular modules with react components

Use React to start up the dashboard app, and use react routing to configure basic
routing for dashboard plugin.

Signed-off-by: abbyhu2000 <[email protected]>

* Skip dashboard state unit test

Will revisit when the proper state management is added.

Signed-off-by: abbyhu2000 <[email protected]>

---------

Signed-off-by: abbyhu2000 <[email protected]>

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

@@ -0,0 +1,37 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import { AppMountParameters } from 'opensearch-dashboards/public';
+import React from 'react';
+import { Route, Switch } from 'react-router-dom';
+import { DashboardConstants, createDashboardEditUrl } from '../dashboard_constants';
+import { DashboardEditor, DashboardListing, DashboardNoMatch } from './components';
+
+export interface DashboardAppProps {
+  onAppLeave: AppMountParameters['onAppLeave'];
+}
+
+export const DashboardApp = ({ onAppLeave }: DashboardAppProps) => {
+  return (
+    <Switch>
+      <Route exact path={['/', DashboardConstants.LANDING_PAGE_PATH]}>
+        <DashboardListing />
+      </Route>
+      <Route
+        exact
+        path={[DashboardConstants.CREATE_NEW_DASHBOARD_URL, createDashboardEditUrl(':id')]}
+      >
+        <DashboardEditor />
+      </Route>
+      <DashboardNoMatch />
+    </Switch>
+  );
+};

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

@@ -0,0 +1,10 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+
+export const DashboardEditor = () => {
+  return <div>Dashboard Editor</div>;
+};

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

@@ -0,0 +1,10 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+
+export const DashboardListing = () => {
+  return <div>Dashboard Listing</div>;
+};

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

@@ -0,0 +1,10 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+
+export const DashboardNoMatch = () => {
+  return <div>Dashboard No Match</div>;
+};

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

@@ -0,0 +1,10 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+
+export const DashboardTopNav = () => {
+  return <div>Dashboard Top Nav</div>;
+};

src/plugins/dashboard/public/application/components/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { DashboardListing } from './dashboard_listing';
+export { DashboardEditor } from './dashboard_editor';
+export { DashboardNoMatch } from './dashboard_no_match';
+export { DashboardTopNav } from './dashboard_top_nav';