[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,55 @@
+/*
+ * 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,
+  };
+
+  it('should register useCase card correctly', () => {
+    const workspaceEnabled = false;
+    registerUseCaseCard(contentManagementStartMock, workspaceEnabled, {
+      id: 'testId',
+      order: 1,
+      target: 'osd_homepage/get_started',
+      icon: 'wsObservability',
+      title: 'observability',
+      description: 'Gain visibility into your application and infrastructure',
+    });
+
+    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',
+      },
+      getIcon: expect.any(Function),
+    });
+
+    const icon = registerCall.getContent().getIcon();
+    expect(icon.type).toBe(EuiIcon);
+    expect(icon.props).toEqual({
+      size: 'l',
+      color: 'subdued',
+      type: 'wsObservability',
+    });
+  });
+});

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

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

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

@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { CoreStart } from 'opensearch-dashboards/public';
+import { DEFAULT_NAV_GROUPS } from '../../../../core/public';
 import {
   ContentManagementPluginSetup,
   ContentManagementPluginStart,
@@ -18,16 +19,13 @@
   registerHomeListCard,
 } from './components/home_list_card';
 
+import { registerUseCaseCard } from './components/use_case_card';
+
 export const setupHome = (contentManagement: ContentManagementPluginSetup) => {
   contentManagement.registerPage({
     id: HOME_PAGE_ID,
     title: 'Home',
     sections: [
-      {
-        id: SECTIONS.SERVICE_CARDS,
-        order: 3000,
-        kind: 'dashboard',
-      },
       {
         id: SECTIONS.RECENTLY_VIEWED,
         order: 2000,
@@ -47,28 +45,52 @@
           );
         },
       },
+      {
+        id: SECTIONS.SERVICE_CARDS,
+        order: 3000,
+        kind: 'dashboard',
+      },
       {
         id: SECTIONS.GET_STARTED,
         order: 1000,
-        title: 'Get started with OpenSearch’s powerful features',
+        title: "Get started with OpenSearch's powerful features",
         kind: 'card',
       },
     ],
   });
 };
 
 export const initHome = (contentManagement: ContentManagementPluginStart, core: CoreStart) => {
+  const workspaceEnabled = core.application.capabilities.workspaces.enabled;
+
+  const useCases = [
+    DEFAULT_NAV_GROUPS.observability,
+    DEFAULT_NAV_GROUPS.search,
+    DEFAULT_NAV_GROUPS['security-analytics'],
+  ];
+
+  useCases.forEach((useCase, index) => {
+    registerUseCaseCard(contentManagement, workspaceEnabled, {
+      id: useCase.id,
+      order: index + 1,
+      description: useCase.description,
+      title: useCase.title,
+      target: HOME_CONTENT_AREAS.GET_STARTED,
+      icon: useCase.icon ?? '',
+    });
+  });
+
   registerHomeListCard(contentManagement, {
     id: 'whats_new',
-    order: 3,
+    order: 10,
     config: WHATS_NEW_CONFIG,
     target: HOME_CONTENT_AREAS.SERVICE_CARDS,
     width: 16,
   });
 
   registerHomeListCard(contentManagement, {
     id: 'learn_opensearch_new',
-    order: 4,
+    order: 11,
     config: LEARN_OPENSEARCH_CONFIG,
     target: HOME_CONTENT_AREAS.SERVICE_CARDS,
     width: 16,

src/plugins/saved_objects_management/public/management_section/recent_work.tsx

@@ -257,38 +257,45 @@ export const RecentWork = (props: { core: CoreStart; workspaceEnabled?: boolean
                   textAlign="left"
                   href={recentNavLink.href}
                   footer={
-                    <>
-                      <EuiFlexGrid columns={2} gutterSize="s">
-                        <EuiFlexItem grow={false}>
-                          <EuiText size="xs" color="default">
-                            {selectedSort === recentlyViewed
-                              ? i18n.translate(
-                                  'savedObjectsManagement.recentWorkSection.viewedAt',
-                                  {
-                                    defaultMessage: 'Viewed',
-                                  }
-                                )
-                              : i18n.translate(
-                                  'savedObjectsManagement.recentWorkSection.updatedAt',
-                                  {
-                                    defaultMessage: 'Updated',
-                                  }
-                                )}
-                            :{' '}
-                          </EuiText>
-                        </EuiFlexItem>
-                        <EuiFlexItem grow={1} style={{ textAlign: 'right' }}>
-                          <EuiText size="xs" color="default">
-                            <b>
+                    <EuiFlexGroup
+                      justifyContent="spaceBetween"
+                      direction="column"
+                      gutterSize="none"
+                    >
+                      <EuiFlexItem>
+                        <EuiFlexGrid columns={2} gutterSize="s">
+                          <EuiFlexItem grow={false}>
+                            <EuiText size="xs" color="default">
                               {selectedSort === recentlyViewed
-                                ? moment(recentAccessItem?.lastAccessedTime).fromNow()
-                                : moment(recentAccessItem?.updatedAt).fromNow()}
-                            </b>
-                          </EuiText>
-                        </EuiFlexItem>
-
-                        {workspaceEnabled && (
-                          <>
+                                ? i18n.translate(
+                                    'savedObjectsManagement.recentWorkSection.viewedAt',
+                                    {
+                                      defaultMessage: 'Viewed',
+                                    }
+                                  )
+                                : i18n.translate(
+                                    'savedObjectsManagement.recentWorkSection.updatedAt',
+                                    {
+                                      defaultMessage: 'Updated',
+                                    }
+                                  )}
+                              :{' '}
+                            </EuiText>
+                          </EuiFlexItem>
+                          <EuiFlexItem grow={1} className="eui-textRight">
+                            <EuiText size="xs" color="default">
+                              <b>
+                                {selectedSort === recentlyViewed
+                                  ? moment(recentAccessItem?.lastAccessedTime).fromNow()
+                                  : moment(recentAccessItem?.updatedAt).fromNow()}
+                              </b>
+                            </EuiText>
+                          </EuiFlexItem>
+                        </EuiFlexGrid>
+                      </EuiFlexItem>
+                      {workspaceEnabled && (
+                        <EuiFlexItem>
+                          <EuiFlexGrid columns={2} gutterSize="s">
                             <EuiFlexItem grow={false}>
                               <EuiText size="xs" color="default">
                                 {i18n.translate(
@@ -300,15 +307,15 @@ export const RecentWork = (props: { core: CoreStart; workspaceEnabled?: boolean
                                 :
                               </EuiText>
                             </EuiFlexItem>
-                            <EuiFlexItem grow={1} style={{ textAlign: 'right' }}>
+                            <EuiFlexItem grow={1} className="eui-textRight">
                               <EuiText size="xs" color="default">
                                 <b>{recentAccessItem.workspaceName || 'N/A'} </b>
                               </EuiText>
                             </EuiFlexItem>
-                          </>
-                        )}
-                      </EuiFlexGrid>
-                    </>
+                          </EuiFlexGrid>
+                        </EuiFlexItem>
+                      )}
+                    </EuiFlexGroup>
                   }
                   onClick={recentNavLink.onClick}
                 />

src/plugins/workspace/common/constants.ts

@@ -45,16 +45,17 @@ export const PRIORITY_FOR_PERMISSION_CONTROL_WRAPPER = 0;
  * store a static map in workspace.
  *
  */
+
 export const WORKSPACE_USE_CASES = Object.freeze({
   observability: {
     id: 'observability',
     title: i18n.translate('workspace.usecase.observability.title', {
       defaultMessage: 'Observability',
     }),
     description: i18n.translate('workspace.usecase.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',
     }),
+    icon: 'wsObservability',
     features: [
       'discover',
       'dashboards',
@@ -78,9 +79,9 @@ export const WORKSPACE_USE_CASES = Object.freeze({
       defaultMessage: 'Security Analytics',
     }),
     description: i18n.translate('workspace.usecase.analytics.description', {
-      defaultMessage:
-        'Detect and investigate potential security threats and vulnerabilities across your systems and data.',
+      defaultMessage: 'Enhance your security posture with advanced analytics',
     }),
+    icon: 'wsSecurityAnalytics',
     features: [
       'discover',
       'dashboards',
@@ -102,9 +103,9 @@ export const WORKSPACE_USE_CASES = Object.freeze({
       defaultMessage: 'Essentials',
     }),
     description: i18n.translate('workspace.usecase.essentials.description', {
-      defaultMessage:
-        'Analyze data to derive insights, identify patterns and trends, and make data-driven decisions.',
+      defaultMessage: 'Get start with just the basics',
     }),
+    icon: 'wsEssentials',
     features: [
       'discover',
       'dashboards',
@@ -125,9 +126,9 @@ export const WORKSPACE_USE_CASES = Object.freeze({
       defaultMessage: 'Search',
     }),
     description: i18n.translate('workspace.usecase.search.description', {
-      defaultMessage:
-        "Quickly find and explore relevant information across your organization's data sources.",
+      defaultMessage: 'Discover and query your data with ease',
     }),
+    icon: 'wsSearch',
     features: [
       'discover',
       'dashboards',

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

@@ -137,7 +137,7 @@ describe('Setup use case overview', () => {
         "cardProps": Object {
           "layout": "horizontal",
         },
-        "description": "Gain visibility into system health, performance, and reliability through monitoring and analysis of logs, metrics, and traces.",
+        "description": "Gain visibility into your application and infrastructure",
         "getIcon": [Function],
         "id": "observability",
         "kind": "card",