[Workspace] search use case overview page (#7877) (#7988) (#8046)

* search overview

* add unit test for search use case overview page

* Changeset file for PR #7877 created/updated

* fix merge issue

* udpate breadcrumbs for workspace overview page

* fix failed ut

* fix merge issue

* fix ut

---------

(cherry picked from commit 9697f33)






(cherry picked from commit 3d7b9ed)

Signed-off-by: Hailong Cui <[email protected]>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
Co-authored-by: Yulong Ruan <[email protected]>

changelogs/fragments/7877.yml

@@ -0,0 +1,2 @@
+feat:
+- [Workspace] Add search use case overview page ([#7877](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7877))

src/plugins/content_management/public/components/card_container/card_list.test.tsx

@@ -20,7 +20,7 @@ test('render list of cards', () => {
   jest
     .spyOn(embeddableStart, 'EmbeddablePanel')
     .mockImplementation(() => <span>CardEmbeddablePanel</span>);
-  render(
+  const { container, queryAllByText } = render(
     <CardList
       embeddableServices={embeddableStart}
       embeddable={
@@ -37,5 +37,37 @@ test('render list of cards', () => {
       }
     />
   );
-  expect(screen.queryAllByText('CardEmbeddablePanel')).toHaveLength(2);
+  expect(queryAllByText('CardEmbeddablePanel')).toHaveLength(2);
+  // verify container has div with class euiFlexGroup
+  expect(container.querySelector('.euiFlexGroup')).toBeInTheDocument();
+});
+
+test('render list of cards with grid', () => {
+  const embeddableStart = embeddablePluginMock.createStartContract();
+  jest
+    .spyOn(embeddableStart, 'EmbeddablePanel')
+    .mockImplementation(() => <span>CardEmbeddablePanel</span>);
+  const { container } = render(
+    <CardList
+      embeddableServices={embeddableStart}
+      embeddable={
+        new CardContainer(
+          {
+            id: 'card',
+            panels: {
+              'card-id-1': { type: CARD_EMBEDDABLE, explicitInput: { id: 'card-id-1' } },
+              'card-id-2': { type: CARD_EMBEDDABLE, explicitInput: { id: 'card-id-2' } },
+              'card-id-3': { type: CARD_EMBEDDABLE, explicitInput: { id: 'card-id-3' } },
+              'card-id-4': { type: CARD_EMBEDDABLE, explicitInput: { id: 'card-id-4' } },
+            },
+            grid: true,
+            columns: 2,
+          },
+          embeddableStart
+        )
+      }
+    />
+  );
+  // verify container has div with class euiFlexGrid
+  expect(container.querySelector('.euiFlexGrid')).toBeInTheDocument();
 });

src/plugins/content_management/public/components/card_container/card_list.tsx

@@ -4,8 +4,9 @@
  */
 
 import React from 'react';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGrid, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
+import { FlexGridColumns } from '@elastic/eui/src/components/flex/flex_grid';
 import {
   IContainer,
   withEmbeddableSubscription,
@@ -22,13 +23,18 @@ interface Props {
 }
 
 const CardListInner = ({ embeddable, input, embeddableServices }: Props) => {
-  if (input.columns) {
+  if (input.columns && !input.grid) {
     const width = `${(1 / input.columns) * 100}%`;
     const cards = Object.values(input.panels).map((panel) => {
       const child = embeddable.getChild(panel.explicitInput.id);
       return (
         <EuiFlexItem key={panel.explicitInput.id} style={{ minWidth: `calc(${width} - 8px)` }}>
-          <embeddableServices.EmbeddablePanel embeddable={child} />
+          <embeddableServices.EmbeddablePanel
+            embeddable={child}
+            hideHeader
+            hasBorder={false}
+            hasShadow={false}
+          />
         </EuiFlexItem>
       );
     });
@@ -57,6 +63,14 @@ const CardListInner = ({ embeddable, input, embeddableServices }: Props) => {
     );
   });
 
+  if (input.grid && input.columns) {
+    return (
+      <EuiFlexGrid columns={input.columns as FlexGridColumns} gutterSize="s">
+        {cards}
+      </EuiFlexGrid>
+    );
+  }
+
   return (
     <EuiFlexGroup wrap={input.wrap} gutterSize="s">
       {cards}

src/plugins/content_management/public/components/card_container/types.ts

@@ -20,6 +20,7 @@ export interface CardExplicitInput {
 export type CardContainerInput = ContainerInput<CardExplicitInput> & {
   columns?: number;
   wrap?: boolean;
+  grid?: boolean;
 };
 
 /**

src/plugins/content_management/public/components/section_input.ts

@@ -35,6 +35,7 @@ export const createCardInput = (
     viewMode: ViewMode.VIEW,
     columns: section.columns,
     wrap: section.wrap,
+    grid: section.grid,
     panels,
     ...section.input,
   };

src/plugins/content_management/public/services/content_management/types.ts

@@ -39,6 +39,7 @@ export type Section =
       input?: CardContainerExplicitInput;
       columns?: number;
       wrap?: boolean;
+      grid?: boolean;
     };
 
 export type Content =

src/plugins/home/public/application/application.tsx

@@ -38,6 +38,8 @@ import { HomeApp, ImportSampleDataApp } from './components/home_app';
 import { getServices } from './opensearch_dashboards_services';
 
 import './index.scss';
+import { ContentManagementPluginStart } from '../../../../plugins/content_management/public';
+import { SearchUseCaseOverviewApp } from './components/usecase_overview/search_use_case_app';
 
 export const renderApp = async (
   element: HTMLElement,
@@ -90,3 +92,20 @@ export const renderImportSampleDataApp = async (element: HTMLElement, coreStart:
     unmountComponentAtNode(element);
   };
 };
+
+export const renderSearchUseCaseOverviewApp = async (
+  element: HTMLElement,
+  coreStart: CoreStart,
+  contentManagementStart: ContentManagementPluginStart
+) => {
+  render(
+    <OpenSearchDashboardsContextProvider services={{ ...coreStart }}>
+      <SearchUseCaseOverviewApp contentManagement={contentManagementStart} />
+    </OpenSearchDashboardsContextProvider>,
+    element
+  );
+
+  return () => {
+    unmountComponentAtNode(element);
+  };
+};

src/plugins/home/public/application/components/sample_data/sample_data_card.test.tsx

@@ -19,7 +19,7 @@ describe('Sample data card', () => {
   it('should call the getTargetArea function with the correct arguments', () => {
     registerSampleDataCard(contentManagement, coreStart);
     const call = registerContentProviderMock.mock.calls[0];
-    expect(call[0].getTargetArea()).toEqual(['essentials_overview/get_started']);
+    expect(call[0].getTargetArea()).toEqual('essentials_overview/get_started');
     expect(call[0].getContent()).toMatchInlineSnapshot(`
       Object {
         "cardProps": Object {
@@ -39,5 +39,10 @@ describe('Sample data card', () => {
         "title": "Try openSearch",
       }
     `);
+
+    // search use case overview
+    expect(registerContentProviderMock.mock.calls[1][0].getTargetArea()).toEqual(
+      'search_overview/get_started'
+    );
   });
 });

src/plugins/home/public/application/components/sample_data/sample_data_card.tsx

@@ -9,21 +9,23 @@ import { EuiI18n } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import {
   ContentManagementPluginStart,
+  ContentProvider,
   ESSENTIAL_OVERVIEW_CONTENT_AREAS,
+  SEARCH_OVERVIEW_CONTENT_AREAS,
 } from '../../../../../content_management/public';
 import { IMPORT_SAMPLE_DATA_APP_ID } from '../../../../common/constants';
 
 export const registerSampleDataCard = (
   contentManagement: ContentManagementPluginStart,
   core: CoreStart
 ) => {
-  contentManagement.registerContentProvider({
-    id: `get_start_sample_data`,
-    getTargetArea: () => [ESSENTIAL_OVERVIEW_CONTENT_AREAS.GET_STARTED],
+  const sampleDataCard = (order: number, targetArea: string): ContentProvider => ({
+    id: `get_start_sample_data_${targetArea}`,
+    getTargetArea: () => targetArea,
     getContent: () => ({
       id: 'sample_data',
       kind: 'card',
-      order: 0,
+      order,
       description: i18n.translate('home.sampleData.card.description', {
         defaultMessage: 'You can install sample data to experiment with OpenSearch Dashboards.',
       }),
@@ -42,4 +44,11 @@ export const registerSampleDataCard = (
       },
     }),
   });
+
+  contentManagement.registerContentProvider(
+    sampleDataCard(0, ESSENTIAL_OVERVIEW_CONTENT_AREAS.GET_STARTED)
+  );
+  contentManagement.registerContentProvider(
+    sampleDataCard(30, SEARCH_OVERVIEW_CONTENT_AREAS.GET_STARTED)
+  );
 };

src/plugins/home/public/application/components/usecase_overview/search_use_case_app.test.tsx

@@ -0,0 +1,78 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from '@testing-library/react';
+import React from 'react';
+import { coreMock } from '../../../../../../core/public/mocks';
+import { OpenSearchDashboardsContextProvider } from '../../../../../opensearch_dashboards_react/public';
+import { contentManagementPluginMocks } from '../../../../../content_management/public/mocks';
+import { SearchUseCaseOverviewApp } from './search_use_case_app';
+import { ContentManagementPluginStart } from '../../../../../content_management/public';
+import { BehaviorSubject } from 'rxjs';
+import { WorkspaceObject } from 'opensearch-dashboards/public';
+
+describe('<SearchUseCaseOverviewApp />', () => {
+  const renderPageMock = jest.fn();
+  renderPageMock.mockReturnValue('dummy page');
+  const mock = {
+    ...contentManagementPluginMocks.createStartContract(),
+    renderPage: renderPageMock,
+  };
+  const coreStartMocks = coreMock.createStart();
+
+  function renderSearchUseCaseOverviewApp(
+    contentManagement: ContentManagementPluginStart,
+    services = { ...coreStartMocks }
+  ) {
+    return (
+      <OpenSearchDashboardsContextProvider services={services}>
+        <SearchUseCaseOverviewApp contentManagement={contentManagement} />
+      </OpenSearchDashboardsContextProvider>
+    );
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('render for workspace disabled case', () => {
+    const { container } = render(renderSearchUseCaseOverviewApp(mock, coreStartMocks));
+
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        dummy page
+      </div>
+    `);
+
+    expect(coreStartMocks.chrome.setBreadcrumbs).toHaveBeenCalledWith([
+      { text: 'Search overview' },
+    ]);
+    expect(mock.renderPage).toBeCalledWith('search_overview');
+  });
+
+  it('render for workspace enabled case', () => {
+    const coreStartMocksWithWorkspace = {
+      ...coreStartMocks,
+      workspaces: {
+        ...coreStartMocks.workspaces,
+        currentWorkspace$: new BehaviorSubject({
+          id: 'foo',
+          name: 'foo ws',
+        }),
+      },
+    };
+
+    const { container } = render(renderSearchUseCaseOverviewApp(mock, coreStartMocksWithWorkspace));
+
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        dummy page
+      </div>
+    `);
+
+    expect(coreStartMocks.chrome.setBreadcrumbs).toHaveBeenCalledWith([{ text: 'foo ws' }]);
+    expect(mock.renderPage).toBeCalledWith('search_overview');
+  });
+});

src/plugins/home/public/application/components/usecase_overview/search_use_case_app.tsx

@@ -0,0 +1,45 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect } from 'react';
+import { useObservable } from 'react-use';
+import { CoreStart } from 'opensearch-dashboards/public';
+import { EuiBreadcrumb } from '@elastic/eui';
+import { I18nProvider } from '@osd/i18n/react';
+import { i18n } from '@osd/i18n';
+import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
+import {
+  ContentManagementPluginStart,
+  SEARCH_OVERVIEW_PAGE_ID,
+} from '../../../../../content_management/public';
+
+interface Props {
+  contentManagement: ContentManagementPluginStart;
+}
+
+export const SearchUseCaseOverviewApp = ({ contentManagement }: Props) => {
+  const {
+    services: { workspaces, chrome },
+  } = useOpenSearchDashboards<CoreStart>();
+
+  const currentWorkspace = useObservable(workspaces.currentWorkspace$);
+
+  const title = i18n.translate('home.usecase.search.title', { defaultMessage: 'Search overview' });
+
+  useEffect(() => {
+    const breadcrumbs: EuiBreadcrumb[] = [
+      {
+        text: currentWorkspace?.name || title,
+      },
+    ];
+    chrome.setBreadcrumbs(breadcrumbs);
+  }, [chrome, currentWorkspace, title]);
+
+  return (
+    <I18nProvider>
+      {contentManagement ? contentManagement.renderPage(SEARCH_OVERVIEW_PAGE_ID) : null}
+    </I18nProvider>
+  );
+};