Dashboard De-Angularization (#4502)

Removes Angular from the `plugins/dashboard` utilizing React.

This includes refactoring to address changes in state management but will require fast follow to
address none blocking issues raised which can be found here:
#3365

Partially Resolves:
#3365

---
* 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.
* [Dashboard De-Angular] Render dashboard listing page (#4015)
  * #4000
  * Render the dashboard listing component with basic functionalities:
    * When there is no dashboard, render the empty dashboard page
    * When there are dashboards, show the dashboard listing table
    * When click on the dashboard, show the editor page
    * Delete the dashboards when selected
    * Can use search bar to filter dashboard
* Basic top nav bar for dashboard (#4108)
  * Basic top nav bar for dashboard
  *  This PR will add basic structure to render top nav bar, including a basic implementation for dashboard app state. 
* Render editor page with basic nav actions (#4213)
  * Added dashboard embeddable container to render the dashboard editor page.
* Add visualization (#4257)
  * Add and save visualization to dashboard
* Render empty screen (#4346)
  * Render empty screen with correct edit and view view when creating a new dashboard.
* Fix routing (#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.
* [Dashboard De-Angular] Enable time filter functionalities  (#4364)
  * Fix time filter on dashboard
  * Save dashboard with time restore
  * Dashboard be able to save query and app filter
  * Enable functional test for dashboard
  * Fix comments and add ui bootstrap back
* No index pattern routing (#4401)
  * Should redirect to stack management page if there is no index pattern detected.
* Add embed mode and other URL param options (#4407)
  * UI should render based on URL param options
* [Dashboard De-Angular] Add dashboard class for discard flow (#3563)
  * Add Dashboard class for state managing
  * isDirty working for cancel flow
* [Dashboard De-Angular] Add breadcrumb with view/edit mode and unsaved flow (#4479)
  * set isDirty back to false when saving successfully
* Breadcrumb working
* change to dashboards in breadcrumb
* [Dashboard De-Angular] Enable URL title param for initial filter on dashboard listing (#4480)
  * Fix dashboard listing functional test
  * Can filter dashboards using URL title param
  * Fix the functional tests
* [Dashboard De-Angular] Fix dashboard save and back button functional test (#4491)
  * fix copy on save and functional test 5
* Fix back button navigation
  * Fix version migration for panels
  * Fix conversions between saved panel and container panel type
  * Fix redundant browser update by re-structure app state and global state sync logic in order for back button to work, also fix the corresponding functional test
* migration version
* Add initialization dirty flag and fix full mode filter bar
* [Dashboard De-Angular] Fix filter and query related functional tests in functional test group 3 (#4495)
  * fix index pattern window
* Fix time filter and query related functional test in group 3
* [Dashboard De-Angular] Fix remaining functional tests (#4496)
  * fix dashboard state function test in group 4
* fix expanding panel
* fix dashboard listing delete (#4508)
* [Dashboard De-Angular] Initial clean up and linter fix (#4511)
  * Clean up linter issues
* Add changelog and other fixes
* [Dashboard De-Angular] Cypress fix (#4521)
  * fix cypress
* refactor scss files
* delete old unit test for state management
* Refactor app state and cleanup unused imports (#4504)
  * Clean up app state for Dashboards plugin.
  * Removes the dashboard container hook in place of a single dashboard app state container
  * Still recovers some follow-ups and clean up
  * Skips test for rendering of a legacy test.
* Set dashboard container functions and fix license headers (#4540)
  * Set dashboard container after defining functions
    * renderEmpty was not being set prior to the current container was being dispatched. 
  * fix up license headers for new files
  * add TODOs from PR

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>
Signed-off-by: Kawika Avilla <kavilla414@gmail.com>
Co-authored-by: Qingyang(Abby) Hu <abigailhu2000@gmail.com>
Co-authored-by: Kawika Avilla <kavilla414@gmail.com>
Co-authored-by: Miki <amoo_miki@yahoo.com>

CHANGELOG.md

@@ -33,10 +33,10 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - Add `color-scheme` to the root styling ([#4477](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4477))
 - [Multiple DataSource] Frontend support for adding sample data ([#4412](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4412))
 - Enable plugins to augment visualizations with additional data and context ([#4361](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4361))
+- Dashboard De-Angularization ([#4502](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4502))
 - New management overview page and rename stack management to dashboard management ([#4287](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4287))
 - [Vis Augmenter] Update base vis height in view events flyout ([#4535](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4535))
 
-
 ### 🐛 Bug Fixes
 
 - [Chore] Update deprecated url methods (url.parse(), url.format()) ([#2910](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2910))

package.json

@@ -171,7 +171,6 @@
     "dns-sync": "^0.2.1",
     "elastic-apm-node": "^3.43.0",
     "elasticsearch": "^16.7.0",
-    "http-aws-es": "npm:@zhongnansu/http-aws-es@6.0.1",
     "execa": "^4.0.2",
     "expiry-js": "0.1.7",
     "fast-deep-equal": "^3.1.1",
@@ -182,6 +181,7 @@
     "globby": "^11.1.0",
     "handlebars": "4.7.7",
     "hjson": "3.2.1",
+    "http-aws-es": "npm:@zhongnansu/http-aws-es@6.0.1",
     "http-proxy-agent": "^2.1.0",
     "https-proxy-agent": "^5.0.0",
     "inline-style": "^2.0.0",
@@ -290,6 +290,7 @@
     "@types/has-ansi": "^3.0.0",
     "@types/history": "^4.7.3",
     "@types/hjson": "^2.4.2",
+    "@types/http-aws-es": "6.0.2",
     "@types/jest": "^27.4.0",
     "@types/joi": "^13.4.2",
     "@types/jquery": "^3.3.31",
@@ -342,7 +343,6 @@
     "@types/zen-observable": "^0.8.0",
     "@typescript-eslint/eslint-plugin": "^3.10.0",
     "@typescript-eslint/parser": "^3.10.0",
-    "@types/http-aws-es": "6.0.2",
     "angular-aria": "^1.8.0",
     "angular-mocks": "^1.8.2",
     "angular-recursion": "^1.0.5",

src/plugins/dashboard/common/migrate_to_730_panels.ts

@@ -87,8 +87,11 @@ function is640To720Panel(
   panel: unknown | RawSavedDashboardPanel640To720
 ): panel is RawSavedDashboardPanel640To720 {
   return (
-    semver.satisfies((panel as RawSavedDashboardPanel630).version, '>6.3') &&
-    semver.satisfies((panel as RawSavedDashboardPanel630).version, '<7.3')
+    semver.satisfies(
+      semver.coerce((panel as RawSavedDashboardPanel630).version)!.version,
+      '>6.3'
+    ) &&
+    semver.satisfies(semver.coerce((panel as RawSavedDashboardPanel630).version)!.version, '<7.3')
   );
 }
 
@@ -273,10 +276,12 @@ function migrate640To720PanelsToLatest(
   version: string
 ): RawSavedDashboardPanel730ToLatest {
   const panelIndex = panel.panelIndex ? panel.panelIndex.toString() : uuid.v4();
+  const embeddableConfig = panel.embeddableConfig ?? {};
   return {
     ...panel,
     version,
     panelIndex,
+    embeddableConfig,
   };
 }
 

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

@@ -0,0 +1,11 @@
+.dshAppContainer {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+#dashboardViewport {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}

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

@@ -0,0 +1,27 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './app.scss';
+import React from 'react';
+import { Route, Switch } from 'react-router-dom';
+import { DashboardConstants, createDashboardEditUrl } from '../dashboard_constants';
+import { DashboardEditor, DashboardListing, DashboardNoMatch } from './components';
+
+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_editor.tsx

@@ -0,0 +1,66 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { EventEmitter } from 'events';
+import { DashboardTopNav } from '../components/dashboard_top_nav';
+import { useChromeVisibility } from '../utils/use/use_chrome_visibility';
+import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
+import { useSavedDashboardInstance } from '../utils/use/use_saved_dashboard_instance';
+import { DashboardServices } from '../../types';
+import { useDashboardAppAndGlobalState } from '../utils/use/use_dashboard_app_state';
+import { useEditorUpdates } from '../utils/use/use_editor_updates';
+
+export const DashboardEditor = () => {
+  const { id: dashboardIdFromUrl } = useParams<{ id: string }>();
+  const { services } = useOpenSearchDashboards<DashboardServices>();
+  const { chrome } = services;
+  const isChromeVisible = useChromeVisibility({ chrome });
+  const [eventEmitter] = useState(new EventEmitter());
+
+  const { savedDashboard: savedDashboardInstance, dashboard } = useSavedDashboardInstance({
+    services,
+    eventEmitter,
+    isChromeVisible,
+    dashboardIdFromUrl,
+  });
+
+  const { appState, currentContainer, indexPatterns } = useDashboardAppAndGlobalState({
+    services,
+    eventEmitter,
+    savedDashboardInstance,
+    dashboard,
+  });
+
+  const { isEmbeddableRendered, currentAppState } = useEditorUpdates({
+    services,
+    eventEmitter,
+    savedDashboardInstance,
+    dashboard,
+    dashboardContainer: currentContainer,
+    appState,
+  });
+
+  return (
+    <div>
+      <div>
+        {savedDashboardInstance && appState && currentAppState && currentContainer && dashboard && (
+          <DashboardTopNav
+            isChromeVisible={isChromeVisible}
+            savedDashboardInstance={savedDashboardInstance}
+            appState={appState!}
+            dashboard={dashboard}
+            currentAppState={currentAppState}
+            isEmbeddableRendered={isEmbeddableRendered}
+            indexPatterns={indexPatterns}
+            currentContainer={currentContainer}
+            dashboardIdFromUrl={dashboardIdFromUrl}
+          />
+        )}
+      </div>
+    </div>
+  );
+};