[Workspace]Refactor use case selector in workspace creation page (ope…

…nsearch-project#8413) (opensearch-project#8444)

* Refactor use case selector in workspace create



* Add gap for details panel title



* Update use case name and description



* Filter out hidden nav links



* Changeset file for PR opensearch-project#8413 created/updated

* Add test case for different feature details



* Change back to "Analytics"



* Add all features suffix for all use case



* Fix failed unit tests



* Filter out getting started links



* Renaming isFlyoutVisible to isUseCaseFlyoutVisible



---------



(cherry picked from commit 7b5a379)

Signed-off-by: Lin Wang <[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>

changelogs/fragments/8413.yml

@@ -0,0 +1,2 @@
+feat:
+- [Workspace]Refactor use case selector in workspace creation page ([#8413](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8413))

src/core/utils/default_nav_groups.ts

@@ -38,10 +38,11 @@ const defaultNavGroups = {
   all: {
     id: ALL_USE_CASE_ID,
     title: i18n.translate('core.ui.group.all.title', {
-      defaultMessage: 'Analytics (All)',
+      defaultMessage: 'Analytics',
     }),
     description: i18n.translate('core.ui.group.all.description', {
-      defaultMessage: 'This is a use case contains all the features.',
+      defaultMessage:
+        'If you aren’t sure where to start with OpenSearch, or if you have needs that cut across multiple use cases.',
     }),
     order: 3000,
     icon: 'wsAnalytics',
@@ -52,7 +53,8 @@ const defaultNavGroups = {
       defaultMessage: 'Observability',
     }),
     description: i18n.translate('core.ui.group.observability.description', {
-      defaultMessage: 'Gain visibility into your applications and infrastructure.',
+      defaultMessage:
+        'Gain visibility into system health, performance, and reliability through monitoring of logs, metrics and traces.',
     }),
     order: 4000,
     icon: 'wsObservability',
@@ -63,7 +65,8 @@ const defaultNavGroups = {
       defaultMessage: 'Security Analytics',
     }),
     description: i18n.translate('core.ui.group.security.analytics.description', {
-      defaultMessage: 'Enhance your security posture with advanced analytics.',
+      defaultMessage:
+        'Detect and investigate potential security threats and vulnerabilities across your systems and data.',
     }),
     order: 5000,
     icon: 'wsSecurityAnalytics',
@@ -86,7 +89,8 @@ const defaultNavGroups = {
       defaultMessage: 'Search',
     }),
     description: i18n.translate('core.ui.group.search.description', {
-      defaultMessage: 'Discover and query your data with ease.',
+      defaultMessage:
+        "Quickly find and explore relevant information across your organization's data sources.",
     }),
     order: 6000,
     icon: 'wsSearch',

src/plugins/workspace/public/components/use_case_overview/setup_overview.test.tsx

@@ -141,7 +141,7 @@ describe('Setup use case overview', () => {
           "titleElement": "h4",
           "titleSize": "s",
         },
-        "description": "Gain visibility into your applications and infrastructure.",
+        "description": "Gain visibility into system health, performance, and reliability through monitoring of logs, metrics and traces.",
         "getIcon": [Function],
         "id": "observability",
         "kind": "card",

src/plugins/workspace/public/components/workspace_creator/creator_details_panel.tsx

@@ -13,6 +13,7 @@ import {
   EuiFormControlLayout,
   EuiFormRow,
   EuiPanel,
+  EuiSpacer,
   EuiText,
 } from '@elastic/eui';
 import { EuiColorPickerOutput } from '@elastic/eui/src/components/color_picker/color_picker';
@@ -46,6 +47,7 @@ export const CreatorDetailsPanel = ({
           })}
         </h2>
       </EuiText>
+      <EuiSpacer size="m" />
       <EuiDescribedFormGroup
         title={
           <h4 {...generateRightSidebarScrollProps(RightSidebarScrollField.Name)}>

src/plugins/workspace/public/components/workspace_form/index.ts

@@ -12,6 +12,7 @@ export { WorkspaceCancelModal } from './workspace_cancel_modal';
 export { WorkspaceNameField, WorkspaceDescriptionField } from './fields';
 export { ConnectionTypeIcon } from './connection_type_icon';
 export { DataSourceConnectionTable } from './data_source_connection_table';
+export { WorkspaceUseCaseFlyout } from './workspace_use_case_flyout';
 
 export { WorkspaceFormSubmitData, WorkspaceFormProps, WorkspaceFormDataState } from './types';
 export {

src/plugins/workspace/public/components/workspace_form/types.ts

@@ -88,7 +88,10 @@ export interface WorkspaceFormProps {
 }
 
 export interface AvailableUseCaseItem
-  extends Pick<WorkspaceUseCase, 'id' | 'title' | 'features' | 'description' | 'systematic'> {
+  extends Pick<
+    WorkspaceUseCase,
+    'id' | 'title' | 'features' | 'description' | 'systematic' | 'icon'
+  > {
   disabled?: boolean;
 }
 

src/plugins/workspace/public/components/workspace_form/workspace_use_case.test.tsx

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { fireEvent, render, waitFor } from '@testing-library/react';
+import { fireEvent, render, waitFor, within } from '@testing-library/react';
 import { DEFAULT_NAV_GROUPS } from '../../../../../core/public';
 import { WorkspaceUseCase, WorkspaceUseCaseProps } from './workspace_use_case';
 import { WorkspaceFormErrors } from './types';
@@ -76,13 +76,13 @@ describe('WorkspaceUseCase', () => {
       ],
     });
     await waitFor(() => {
-      expect(renderResult.getByText('Essentials')).toHaveClass(
+      expect(renderResult.getByText('Essentials').closest('label')).toHaveClass(
         'euiCheckableCard__label-isDisabled'
       );
     });
   });
 
-  it('should be able to toggle use case features', async () => {
+  it('should open flyout and expanded selected use cases', async () => {
     const { renderResult } = setup({
       availableUseCases: [
         {
@@ -93,58 +93,46 @@ describe('WorkspaceUseCase', () => {
           ],
         },
       ],
+      value: DEFAULT_NAV_GROUPS.observability.id,
     });
+
+    fireEvent.click(renderResult.getByText('Learn more.'));
+
     await waitFor(() => {
-      expect(renderResult.getByText('See more....')).toBeInTheDocument();
-      expect(renderResult.queryByText('Feature 1')).toBe(null);
-      expect(renderResult.queryByText('Feature 2')).toBe(null);
+      expect(within(renderResult.getByRole('dialog')).getByText('Use cases')).toBeInTheDocument();
+      expect(
+        within(renderResult.getByRole('dialog')).getByText('Observability')
+      ).toBeInTheDocument();
+      expect(within(renderResult.getByRole('dialog')).getByText('Feature 1')).toBeInTheDocument();
+      expect(within(renderResult.getByRole('dialog')).getByText('Feature 2')).toBeInTheDocument();
     });
+  });
 
-    fireEvent.click(renderResult.getByText('See more....'));
+  it('should close flyout after close button clicked', async () => {
+    const { renderResult } = setup({});
 
+    fireEvent.click(renderResult.getByText('Learn more.'));
     await waitFor(() => {
-      expect(renderResult.getByText('See less....')).toBeInTheDocument();
-      expect(renderResult.getByText('Feature 1')).toBeInTheDocument();
-      expect(renderResult.getByText('Feature 2')).toBeInTheDocument();
+      expect(within(renderResult.getByRole('dialog')).getByText('Use cases')).toBeInTheDocument();
     });
 
-    fireEvent.click(renderResult.getByText('See less....'));
+    fireEvent.click(renderResult.getByTestId('euiFlyoutCloseButton'));
 
     await waitFor(() => {
-      expect(renderResult.getByText('See more....')).toBeInTheDocument();
-      expect(renderResult.queryByText('Feature 1')).toBe(null);
-      expect(renderResult.queryByText('Feature 2')).toBe(null);
+      expect(renderResult.queryByText('dialog')).toBeNull();
     });
   });
 
-  it('should show static all use case features', async () => {
+  it('should render "(all features)" suffix for "all use case"', () => {
     const { renderResult } = setup({
       availableUseCases: [
         {
           ...DEFAULT_NAV_GROUPS.all,
-          features: [
-            { id: 'feature1', title: 'Feature 1' },
-            { id: 'feature2', title: 'Feature 2' },
-          ],
+          features: [],
         },
       ],
     });
 
-    fireEvent.click(renderResult.getByText('See more....'));
-
-    await waitFor(() => {
-      expect(renderResult.getByText('Discover')).toBeInTheDocument();
-      expect(renderResult.getByText('Dashboards')).toBeInTheDocument();
-      expect(renderResult.getByText('Visualize')).toBeInTheDocument();
-      expect(
-        renderResult.getByText('Observability services, metrics, traces, and more')
-      ).toBeInTheDocument();
-      expect(
-        renderResult.getByText('Security analytics threat alerts, findings, correlations, and more')
-      ).toBeInTheDocument();
-      expect(
-        renderResult.getByText('Search studio, relevance tuning, vector search, and more')
-      ).toBeInTheDocument();
-    });
+    expect(renderResult.getByText('(all features)')).toBeInTheDocument();
   });
 });