[BUG] Fix management overview page duplicate rendering

CHANGELOG.md

@@ -39,6 +39,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - Fix Node.js download link ([#4556](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4556))
 - [TSVB, Dashboards] Fix inconsistent dark mode code editor themes ([#4609](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4609))
 - [Legacy Maps] Fix dark mode style overrides ([#4658](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4658))
+- [BUG] Fix management overview page duplicate rendering ([#4636](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4636))
 
 ### 🚞 Infrastructure
 
@@ -760,4 +761,4 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 
 ### 🔩 Tests
 
-- Update caniuse to fix failed integration tests ([#2322](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2322))
+- Update caniuse to fix failed integration tests ([#2322](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2322))

src/plugins/management_overview/public/application.test.tsx

@@ -0,0 +1,121 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from '@testing-library/react';
+import { ManagementOverviewWrapper } from './application';
+import React from 'react';
+import { ApplicationStart, PublicAppInfo } from 'opensearch-dashboards/public';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { deepFreeze } from '@osd/std';
+import { OverviewApp } from './overview_app';
+import { AppNavLinkStatus, AppStatus } from '../../../core/public';
+
+const applicationStartMock = (apps: Map<string, PublicAppInfo>): jest.Mocked<ApplicationStart> => {
+  const currentAppId$ = new Subject<string | undefined>();
+
+  return {
+    applications$: new BehaviorSubject<Map<string, PublicAppInfo>>(apps),
+    currentAppId$: currentAppId$.asObservable(),
+    capabilities: deepFreeze({
+      catalogue: {},
+      management: {},
+      navLinks: {},
+    }),
+    navigateToApp: jest.fn(),
+    navigateToUrl: jest.fn(),
+    getUrlForApp: jest.fn(),
+    registerMountContext: jest.fn(),
+  };
+};
+
+function renderOverviewPage(apps: Map<string, PublicAppInfo>, overviewApps?: OverviewApp[]) {
+  return render(
+    <ManagementOverviewWrapper
+      application={applicationStartMock(apps)}
+      overviewApps={overviewApps}
+    />
+  );
+}
+
+describe('Overview page rendering', () => {
+  it('should render normally', () => {
+    const overviewApps: OverviewApp[] = [
+      {
+        id: 'dev_tools',
+        title: 'Dev Tools',
+        description: 'dev tools description',
+        order: 0,
+      },
+    ];
+
+    const apps: Map<string, PublicAppInfo> = new Map<string, PublicAppInfo>();
+    apps.set('dev_tools', {
+      status: AppStatus.accessible,
+      navLinkStatus: AppNavLinkStatus.default,
+      appRoute: '/app/console',
+    } as PublicAppInfo);
+    const { container, queryByText } = renderOverviewPage(apps, overviewApps);
+    expect(container.firstChild).toMatchSnapshot();
+    expect(queryByText('Dev Tools')).not.toBeNull();
+  });
+
+  it('should render normally when no overview app', () => {
+    const { queryByText } = renderOverviewPage(new Map<string, PublicAppInfo>());
+    expect(queryByText('Overview')).not.toBeNull();
+  });
+
+  it('should render normally when no application available', () => {
+    const overviewApps: OverviewApp[] = [
+      {
+        id: 'dev_tools',
+        title: 'Dev Tools',
+        description: 'dev tools description',
+        order: 0,
+      },
+    ];
+    const { queryByText } = renderOverviewPage(new Map<string, PublicAppInfo>(), overviewApps);
+    expect(queryByText('Dev Tools')).toBeNull();
+  });
+
+  it('should not display overview app when nav link status is hidden', () => {
+    const overviewApps: OverviewApp[] = [
+      {
+        id: 'dev_tools',
+        title: 'Dev Tools',
+        description: 'dev tools description',
+        order: 0,
+      },
+    ];
+
+    const apps: Map<string, PublicAppInfo> = new Map<string, PublicAppInfo>();
+    apps.set('dev_tools', {
+      status: AppStatus.accessible,
+      navLinkStatus: AppNavLinkStatus.hidden,
+      appRoute: '/app/console',
+    } as PublicAppInfo);
+    const { queryByText } = renderOverviewPage(apps, overviewApps);
+    expect(queryByText('Dev Tools')).toBeNull();
+  });
+
+  it('should not display overview app when it is invalid app', () => {
+    const overviewApps: OverviewApp[] = [
+      {
+        id: 'invalid_app_id',
+        title: 'Dev Tools',
+        description: 'dev tools description',
+        order: 0,
+      },
+    ];
+
+    const apps: Map<string, PublicAppInfo> = new Map<string, PublicAppInfo>();
+    apps.set('dev_tools', {
+      status: AppStatus.accessible,
+      navLinkStatus: AppNavLinkStatus.hidden,
+      appRoute: '/app/console',
+    } as PublicAppInfo);
+    const { queryByText } = renderOverviewPage(apps, overviewApps);
+    expect(queryByText('Dev Tools')).toBeNull();
+  });
+});

src/plugins/management_overview/public/application.tsx

@@ -5,28 +5,28 @@
 
 import ReactDOM from 'react-dom';
 import { I18nProvider, FormattedMessage } from '@osd/i18n/react';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { EuiFlexGrid, EuiFlexItem, EuiPage, EuiPageBody, EuiSpacer, EuiTitle } from '@elastic/eui';
 import useObservable from 'react-use/lib/useObservable';
-import { ApplicationStart, ChromeStart, CoreStart } from '../../../core/public';
+import { ApplicationStart, AppNavLinkStatus, CoreStart } from '../../../core/public';
 import { OverviewApp } from '.';
 import { OverviewCard } from './components/overview_card';
 
 export interface ManagementOverviewProps {
   application: ApplicationStart;
-  chrome: ChromeStart;
   overviewApps?: OverviewApp[];
 }
 
-function ManagementOverviewWrapper(props: ManagementOverviewProps) {
-  const { chrome, application, overviewApps } = props;
+export function ManagementOverviewWrapper(props: ManagementOverviewProps) {
+  const { application, overviewApps } = props;
+  const applications = useObservable(application.applications$);
 
-  const hiddenAppIds =
-    useObservable(chrome.navLinks.getNavLinks$())
-      ?.filter((link) => link.hidden)
-      .map((link) => link.id) || [];
-
-  const availableApps = overviewApps?.filter((app) => hiddenAppIds.indexOf(app.id) === -1);
+  const availableApps = useMemo(() => {
+    return overviewApps?.filter((overviewApp) => {
+      const app = applications?.get(overviewApp.id);
+      return app && app.navLinkStatus !== AppNavLinkStatus.hidden;
+    });
+  }, [applications, overviewApps]);
 
   return (
     <EuiPage restrictWidth={1200}>
@@ -61,11 +61,7 @@ export function renderApp(
 ) {
   ReactDOM.render(
     <I18nProvider>
-      <ManagementOverviewWrapper
-        chrome={chrome}
-        application={application}
-        overviewApps={overviewApps}
-      />
+      <ManagementOverviewWrapper application={application} overviewApps={overviewApps} />
     </I18nProvider>,
     element
   );

src/plugins/management_overview/public/plugin.ts

@@ -22,8 +22,13 @@ interface ManagementOverviewSetupDeps {
 export interface ManagementOverViewPluginSetup {
   register: (overviewApp: OverviewApp) => void;
 }
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface ManagementOverViewPluginStart {}
+
 /** @public */
-export class ManagementOverViewPlugin implements Plugin<ManagementOverViewPluginSetup, void> {
+export class ManagementOverViewPlugin
+  implements Plugin<ManagementOverViewPluginSetup, ManagementOverViewPluginStart> {
   private readonly overviewApps = new Map<string, OverviewApp>();
 
   private getSortedOverviewApps(): OverviewApp[] {
@@ -82,5 +87,7 @@ export class ManagementOverViewPlugin implements Plugin<ManagementOverViewPlugin
     };
   }
 
-  public start(core: CoreStart): void {}
+  public start(core: CoreStart): ManagementOverViewPluginStart {
+    return {};
+  }
 }