[Workspace] add use case cards when workspace is disabled, refine the style of recent_work in the home page.

src/core/utils/default_nav_groups.ts

@@ -52,8 +52,7 @@ const defaultNavGroups = {
       defaultMessage: 'Observability',
     }),
     description: i18n.translate('core.ui.group.observability.description', {
-      defaultMessage:
-        'Gain visibility into system health, performance, and reliability through monitoring and analysis of logs, metrics, and traces.',
+      defaultMessage: 'Gain visibility into your application and infrastructure',
     }),
     order: 4000,
     icon: 'wsObservability',
@@ -64,8 +63,7 @@ const defaultNavGroups = {
       defaultMessage: 'Security Analytics',
     }),
     description: i18n.translate('core.ui.group.security.analytics.description', {
-      defaultMessage:
-        'Detect and investigate potential security threats and vulnerabilities across your systems and data.',
+      defaultMessage: 'Enhance your security posture with advanced analytics',
     }),
     order: 5000,
     icon: 'wsSecurityAnalytics',
@@ -88,8 +86,7 @@ const defaultNavGroups = {
       defaultMessage: 'Search',
     }),
     description: i18n.translate('core.ui.group.search.description', {
-      defaultMessage:
-        "Quickly find and explore relevant information across your organization's data sources.",
+      defaultMessage: 'Discover and query your data with ease',
     }),
     order: 6000,
     icon: 'wsSearch',

src/plugins/home/public/application/components/use_case_card.test.ts

@@ -0,0 +1,78 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiIcon } from '@elastic/eui';
+import { coreMock } from '../../../../../core/public/mocks';
+import { registerUseCaseCard } from './use_case_card';
+import { contentManagementPluginMocks } from '../../../../content_management/public';
+
+describe('registerUseCaseCard', () => {
+  const registerContentProviderFn = jest.fn();
+  const contentManagementStartMock = {
+    ...contentManagementPluginMocks.createStartContract(),
+    registerContentProvider: registerContentProviderFn,
+  };
+
+  const core = coreMock.createStart();
+
+  it('should register useCase card correctly', () => {
+    registerUseCaseCard(contentManagementStartMock, core, {
+      id: 'testId',
+      order: 1,
+      target: 'osd_homepage/get_started',
+      icon: 'wsObservability',
+      title: 'observability',
+      description: 'Gain visibility into your application and infrastructure',
+      navigateAppId: 'observability_overview',
+    });
+
+    expect(contentManagementStartMock.registerContentProvider).toHaveBeenCalledTimes(1);
+
+    const registerCall = contentManagementStartMock.registerContentProvider.mock.calls[0][0];
+
+    expect(registerCall.getTargetArea()).toEqual('osd_homepage/get_started');
+
+    expect(registerCall.getContent()).toEqual({
+      id: 'testId',
+      kind: 'card',
+      order: 1,
+      description: 'Gain visibility into your application and infrastructure',
+      title: 'observability',
+      cardProps: {
+        layout: 'horizontal',
+      },
+      onClick: expect.any(Function),
+      getIcon: expect.any(Function),
+    });
+
+    const icon = registerCall.getContent().getIcon();
+    expect(icon.type).toBe(EuiIcon);
+    expect(icon.props).toEqual({
+      size: 'l',
+      color: 'subdued',
+      type: 'wsObservability',
+    });
+  });
+
+  it('should be able to navigate to the expected overview page when click the card', () => {
+    const navigateToAppMock = jest.fn();
+    core.application.navigateToApp = navigateToAppMock;
+
+    registerUseCaseCard(contentManagementStartMock, core, {
+      id: 'testId',
+      order: 1,
+      target: 'osd_homepage/get_started',
+      icon: 'wsObservability',
+      title: 'observability',
+      description: 'Gain visibility into your application and infrastructure',
+      navigateAppId: 'observability_overview',
+    });
+
+    const registerCall = contentManagementStartMock.registerContentProvider.mock.calls[0][0];
+    const card = registerCall.getContent();
+    card.onClick();
+    expect(navigateToAppMock).toHaveBeenCalledWith('observability_overview');
+  });
+});

src/plugins/home/public/application/components/use_case_card.ts

@@ -0,0 +1,55 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { CoreStart } from 'opensearch-dashboards/public';
+import { EuiIcon } from '@elastic/eui';
+import { ContentManagementPluginStart } from '../../../../content_management/public';
+
+export const registerUseCaseCard = (
+  contentManagement: ContentManagementPluginStart,
+  core: CoreStart,
+  {
+    target,
+    order,
+    id,
+    title,
+    description,
+    icon,
+    navigateAppId,
+  }: {
+    target: string;
+    order: number;
+    id: string;
+    title: string;
+    description: string;
+    icon: string;
+    navigateAppId: string;
+  }
+) => {
+  contentManagement.registerContentProvider({
+    id: `home_get_started_${id}`,
+    getTargetArea: () => target,
+    getContent: () => ({
+      id,
+      kind: 'card',
+      order,
+      description,
+      title,
+      cardProps: {
+        layout: 'horizontal',
+      },
+      onClick: () => {
+        core.application.navigateToApp(navigateAppId);
+      },
+      getIcon: () =>
+        React.createElement(EuiIcon, {
+          size: 'l',
+          color: 'subdued',
+          type: icon,
+        }),
+    }),
+  });
+};

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

@@ -0,0 +1,142 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DEFAULT_NAV_GROUPS } from '../../../../core/public';
+import {
+  HOME_CONTENT_AREAS,
+  SEARCH_OVERVIEW_PAGE_ID,
+  OBSERVABILITY_OVERVIEW_PAGE_ID,
+  SECURITY_ANALYTICS_OVERVIEW_PAGE_ID,
+} from '../../../../plugins/content_management/public';
+import { contentManagementPluginMocks } from '../../../../plugins/content_management/public/mocks';
+import { registerUseCaseCard } from './components/use_case_card';
+import { initHome } from './home_render';
+
+import {
+  WHATS_NEW_CONFIG,
+  LEARN_OPENSEARCH_CONFIG,
+  registerHomeListCard,
+} from './components/home_list_card';
+
+jest.mock('./components/use_case_card', () => ({
+  registerUseCaseCard: jest.fn(),
+}));
+
+jest.mock('./components/home_list_card', () => ({
+  registerHomeListCard: jest.fn(),
+}));
+
+describe('initHome', () => {
+  const registerContentProviderFn = jest.fn();
+  const contentManagementStartMock = {
+    ...contentManagementPluginMocks.createStartContract(),
+    registerContentProvider: registerContentProviderFn,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should register use case cards when workspace is enabled', () => {
+    const coreMock = {
+      createStart: jest.fn(() => ({
+        application: {
+          capabilities: {
+            workspaces: {
+              enabled: false,
+            },
+          },
+          navigateToApp: jest.fn(),
+        },
+      })),
+    };
+    const core = coreMock.createStart();
+
+    initHome(contentManagementStartMock, core);
+
+    expect(registerUseCaseCard).toHaveBeenCalledTimes(3);
+
+    expect(registerUseCaseCard).toHaveBeenCalledWith(contentManagementStartMock, core, {
+      id: DEFAULT_NAV_GROUPS.observability.id,
+      order: 1,
+      description: DEFAULT_NAV_GROUPS.observability.description,
+      title: DEFAULT_NAV_GROUPS.observability.title,
+      target: HOME_CONTENT_AREAS.GET_STARTED,
+      icon: DEFAULT_NAV_GROUPS.observability.icon ?? '',
+      navigateAppId: OBSERVABILITY_OVERVIEW_PAGE_ID,
+    });
+
+    expect(registerUseCaseCard).toHaveBeenCalledWith(contentManagementStartMock, core, {
+      id: DEFAULT_NAV_GROUPS.search.id,
+      order: 2,
+      description: DEFAULT_NAV_GROUPS.search.description,
+      title: DEFAULT_NAV_GROUPS.search.title,
+      target: HOME_CONTENT_AREAS.GET_STARTED,
+      icon: DEFAULT_NAV_GROUPS.search.icon ?? '',
+      navigateAppId: SEARCH_OVERVIEW_PAGE_ID,
+    });
+
+    expect(registerUseCaseCard).toHaveBeenCalledWith(contentManagementStartMock, core, {
+      id: DEFAULT_NAV_GROUPS['security-analytics'].id,
+      order: 3,
+      description: DEFAULT_NAV_GROUPS['security-analytics'].description,
+      title: DEFAULT_NAV_GROUPS['security-analytics'].title,
+      target: HOME_CONTENT_AREAS.GET_STARTED,
+      icon: DEFAULT_NAV_GROUPS['security-analytics'].icon ?? '',
+      navigateAppId: SECURITY_ANALYTICS_OVERVIEW_PAGE_ID,
+    });
+  });
+
+  it('should not register use case cards when workspace is disabled', () => {
+    const coreMock = {
+      createStart: jest.fn(() => ({
+        application: {
+          capabilities: {
+            workspaces: {
+              enabled: true,
+            },
+          },
+        },
+      })),
+    };
+    const core = coreMock.createStart();
+    initHome(contentManagementStartMock, core);
+    expect(registerUseCaseCard).not.toHaveBeenCalled();
+  });
+
+  it('should register home list cards correctly', () => {
+    const coreMock = {
+      createStart: jest.fn(() => ({
+        application: {
+          capabilities: {
+            workspaces: {
+              enabled: false,
+            },
+          },
+        },
+      })),
+    };
+    const core = coreMock.createStart();
+    initHome(contentManagementStartMock, core);
+
+    expect(registerHomeListCard).toHaveBeenCalledTimes(2);
+
+    expect(registerHomeListCard).toHaveBeenCalledWith(contentManagementStartMock, {
+      id: 'whats_new',
+      order: 10,
+      config: WHATS_NEW_CONFIG,
+      target: HOME_CONTENT_AREAS.SERVICE_CARDS,
+      width: 16,
+    });
+
+    expect(registerHomeListCard).toHaveBeenCalledWith(contentManagementStartMock, {
+      id: 'learn_opensearch_new',
+      order: 11,
+      config: LEARN_OPENSEARCH_CONFIG,
+      target: HOME_CONTENT_AREAS.SERVICE_CARDS,
+      width: 16,
+    });
+  });
+});