fix: Update content and styling of use case getting started cards (#8614

) * fix: Update content and styling of use case getting started cards Signed-off-by: Viraj Sanghvi <[email protected]> * Changeset file for PR #8614 created/updated * update tests Signed-off-by: Viraj Sanghvi <[email protected]> --------- Signed-off-by: Viraj Sanghvi <[email protected]> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> (cherry picked from commit 95b0a58) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Oct 18, 2024 · 9f955ec · 9f955ec
1 parent e4133db
commit 9f955ec
Show file tree

Hide file tree

Showing 9 changed files with 154 additions and 146 deletions.
diff --git a/changelogs/fragments/8614.yml b/changelogs/fragments/8614.yml
@@ -0,0 +1,2 @@
+fix:
+- Update content and styling of use case getting started cards ([#8614](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8614))
diff --git a/src/plugins/home/public/application/components/sample_data/sample_data_card.test.tsx b/src/plugins/home/public/application/components/sample_data/sample_data_card.test.tsx
@@ -23,28 +23,17 @@ describe('Sample data card', () => {
     expect(call[0].getContent()).toMatchInlineSnapshot(`
       Object {
         "cardProps": Object {
-          "selectable": Object {
-            "children": <EuiI18n
-              default="Sample Datasets"
-              token="home.sampleData.card.footer"
-            />,
-            "isSelected": false,
-            "onClick": [Function],
-          },
-          "titleElement": "h4",
-          "titleSize": "s",
+          "className": "usecaseOverviewGettingStartedCard",
         },
-        "description": "Explore sample data before adding your own.",
+        "description": "Install sample data to experiment with OpenSearch.",
+        "getFooter": [Function],
+        "getIcon": [Function],
         "id": "sample_data",
         "kind": "card",
+        "onClick": [Function],
         "order": 0,
-        "title": "Try OpenSearch",
+        "title": "",
       }
     `);
-
-    // search use case overview
-    expect(registerContentProviderMock.mock.calls[1][0].getTargetArea()).toEqual(
-      'search_overview/get_started'
-    );
   });
 });
diff --git a/src/plugins/home/public/application/components/sample_data/sample_data_card.tsx b/src/plugins/home/public/application/components/sample_data/sample_data_card.tsx
@@ -5,13 +5,12 @@
 
 import { CoreStart } from 'opensearch-dashboards/public';
 import React from 'react';
-import { EuiI18n } from '@elastic/eui';
+import { EuiI18n, EuiIcon, EuiTextColor } 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';
 
@@ -27,30 +26,26 @@ export const registerSampleDataCard = (
       kind: 'card',
       order,
       description: i18n.translate('home.sampleData.card.description', {
-        defaultMessage: 'Explore sample data before adding your own.',
-      }),
-      title: i18n.translate('home.sampleData.card.title', {
-        defaultMessage: 'Try OpenSearch',
+        defaultMessage: 'Install sample data to experiment with OpenSearch.',
       }),
+      title: '',
+      onClick: () => {
+        // TODO change to a modal
+        core.application.navigateToApp(IMPORT_SAMPLE_DATA_APP_ID);
+      },
+      getIcon: () => <EuiIcon type="functionAdd" size="l" color="primary" />,
+      getFooter: () => (
+        <EuiTextColor color="subdued">
+          <EuiI18n token="home.sampleData.card.footer" default="Sample datasets" />
+        </EuiTextColor>
+      ),
       cardProps: {
-        titleElement: 'h4',
-        titleSize: 's',
-        selectable: {
-          children: <EuiI18n token="home.sampleData.card.footer" default="Sample Datasets" />,
-          isSelected: false,
-          onClick: () => {
-            // TODO change to a modal
-            core.application.navigateToApp(IMPORT_SAMPLE_DATA_APP_ID);
-          },
-        },
+        className: 'usecaseOverviewGettingStartedCard',
       },
     }),
   });
 
   contentManagement.registerContentProvider(
     sampleDataCard(0, ESSENTIAL_OVERVIEW_CONTENT_AREAS.GET_STARTED)
   );
-  contentManagement.registerContentProvider(
-    sampleDataCard(30, SEARCH_OVERVIEW_CONTENT_AREAS.GET_STARTED)
-  );
 };
diff --git a/...lugins/home/public/application/components/usecase_overview/search_use_case_setup.test.tsx b/...lugins/home/public/application/components/usecase_overview/search_use_case_setup.test.tsx
@@ -67,52 +67,35 @@ describe('Search use case setup', () => {
     expect(call[0].getContent()).toMatchInlineSnapshot(`
       Object {
         "cardProps": Object {
-          "selectable": Object {
-            "children": <EuiI18n
-              default="Documentation"
-              token="home.searchOverview.setup.accessSearch.footer"
-            />,
-            "isSelected": false,
-            "onClick": [Function],
-          },
-          "titleElement": "h4",
-          "titleSize": "s",
+          "className": "usecaseOverviewGettingStartedCard",
         },
-        "description": "You can run a search using REST API or language client. For experimentation, you can also run queries interactively.",
+        "description": "Explore search capabilities and functionality of OpenSearch.",
+        "getFooter": [Function],
+        "getIcon": [Function],
         "id": "access_search_functionality",
         "kind": "card",
+        "onClick": [Function],
         "order": 10,
-        "title": "Access search functionality",
+        "title": "",
       }
     `);
 
     // search type section
     const searchTypesCall = registerContentProviderMock.mock.calls[2];
-    expect(searchTypesCall[0].getTargetArea()).toEqual('search_overview/different_search_types');
+    expect(searchTypesCall[0].getTargetArea()).toEqual('search_overview/get_started');
     expect(searchTypesCall[0].getContent()).toMatchInlineSnapshot(`
       Object {
         "cardProps": Object {
-          "children": <div
-            className="euiCard__footer"
-          >
-            <EuiLink
-              external={true}
-              href="https://opensearch.org/docs/latest/query-dsl/full-text/"
-              target="_blank"
-            >
-              View Documentation
-            </EuiLink>
-          </div>,
-          "layout": "horizontal",
-          "titleElement": "h3",
-          "titleSize": "s",
+          "className": "usecaseOverviewGettingStartedCard",
         },
-        "description": "Lexical or keyword search matches documents based on exact words or phrases. Search the text using human-friendly query string query syntax or create complex, customizable queries using Query DSL—the OpenSearch query language.",
+        "description": "Explore data to uncover and discover insights.",
+        "getFooter": [Function],
         "getIcon": [Function],
-        "id": "text_search",
+        "id": "get_start_discover",
         "kind": "card",
-        "order": 10,
-        "title": "Text search",
+        "onClick": [Function],
+        "order": 30,
+        "title": "",
       }
     `);
   });

diff --git a/src/plugins/home/public/application/components/usecase_overview/search_use_case_setup.tsx b/src/plugins/home/public/application/components/usecase_overview/search_use_case_setup.tsx
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import { CoreStart } from 'opensearch-dashboards/public';
-import { EuiI18n, EuiIcon, EuiLink } from '@elastic/eui';
+import { EuiI18n, EuiIcon, EuiLink, EuiTextColor } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import {
   ContentManagementPluginSetup,
@@ -15,6 +15,8 @@ import {
   SEARCH_OVERVIEW_CONTENT_AREAS,
 } from '../../../../../content_management/public';
 
+const DISCOVER_APP_ID = 'discover';
+
 export const setupSearchUseCase = (contentManagement: ContentManagementPluginSetup) => {
   contentManagement.registerPage({
     id: SEARCH_OVERVIEW_PAGE_ID,
@@ -56,39 +58,64 @@ export const registerContentToSearchUseCasePage = (
   contentManagement: ContentManagementPluginStart,
   core: CoreStart
 ) => {
+  // Replicate external EuiLink icon as doc links can't use EuiLink for visual consistency
+  const externalLinkIcon = (
+    <>
+      {' '}
+      <EuiIcon size="s" type="popout" />
+    </>
+  );
   const getStartedCards = [
     {
       id: 'access_search_functionality',
       order: 10,
-      title: i18n.translate('home.searchOverview.setup.accessSearch.title', {
-        defaultMessage: 'Access search functionality',
-      }),
+      icon: <EuiIcon type="bookOpen" size="l" color="primary" />,
+      title: '',
       description: i18n.translate('home.searchOverview.setup.accessSearch.description', {
-        defaultMessage:
-          'You can run a search using REST API or language client. For experimentation, you can also run queries interactively.',
+        defaultMessage: 'Explore search capabilities and functionality of OpenSearch.',
       }),
       footer: (
-        <EuiI18n token="home.searchOverview.setup.accessSearch.footer" default="Documentation" />
+        <EuiTextColor color="subdued">
+          <EuiI18n token="home.searchOverview.setup.accessSearch.footer" default="Documentation" />
+          {externalLinkIcon}
+        </EuiTextColor>
       ),
       documentURL: 'https://opensearch.org/docs/latest/search-plugins/',
     },
     {
       id: 'create_document_index',
       order: 20,
-      title: i18n.translate('home.searchOverview.setup.createDocumentIndex.title', {
-        defaultMessage: 'Create a document index',
-      }),
+      icon: <EuiIcon type="bookOpen" size="l" color="primary" />,
+      title: '',
       description: i18n.translate('home.searchOverview.setup.createDocumentIndex.description', {
-        defaultMessage:
-          'You can create a document collection (an index) by adding documents to a new index.',
+        defaultMessage: 'Create a document collection (an index) to query your data.',
+      }),
+      footer: (
+        <EuiTextColor color="subdued">
+          <EuiI18n
+            token="home.search_overview.createDocumentIndex.card.footer"
+            default="Documentation"
+          />
+          {externalLinkIcon}
+        </EuiTextColor>
+      ),
+      documentURL: 'https://opensearch.org/docs/latest/getting-started/intro/',
+    },
+    {
+      id: 'get_start_discover',
+      order: 30,
+      icon: <EuiIcon type="compass" size="l" color="primary" />,
+      title: '',
+      description: i18n.translate('home.searchOverview.setup.discover.description', {
+        defaultMessage: 'Explore data to uncover and discover insights.',
       }),
       footer: (
-        <EuiI18n
-          token="home.search_overview.createDocumentIndex.card.footer"
-          default="Documentation"
-        />
+        <EuiTextColor color="subdued">
+          <EuiI18n token="workspace.essential_overview.discover.card.footer" default="Discover" />
+        </EuiTextColor>
       ),
       documentURL: 'https://opensearch.org/docs/latest/getting-started/intro/',
+      navigateAppId: DISCOVER_APP_ID,
     },
   ];
 
@@ -101,16 +128,17 @@ export const registerContentToSearchUseCasePage = (
         order: card.order,
         title: card.title,
         description: card.description,
+        onClick: () => {
+          if (card.navigateAppId) {
+            core.application.navigateToApp(card.navigateAppId);
+          } else {
+            window.open(card.documentURL, '_blank');
+          }
+        },
+        getFooter: () => card.footer,
+        getIcon: () => card.icon,
         cardProps: {
-          titleElement: 'h4',
-          titleSize: 's',
-          selectable: {
-            onClick: () => {
-              window.open(card.documentURL, '_blank');
-            },
-            children: card.footer,
-            isSelected: false,
-          },
+          className: 'usecaseOverviewGettingStartedCard',
         },
       }),
       getTargetArea: () => SEARCH_OVERVIEW_CONTENT_AREAS.GET_STARTED,

diff --git a/src/plugins/workspace/public/components/use_case_overview/get_started_cards.tsx b/src/plugins/workspace/public/components/use_case_overview/get_started_cards.tsx
@@ -3,14 +3,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiI18n } from '@elastic/eui';
+import { EuiI18n, EuiIcon, EuiTextColor } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import React from 'react';
 
 interface GetStartCard {
   id: string;
   title: string;
   description: string;
+  icon: React.JSX.Element;
   footer: React.JSX.Element;
   navigateAppId: string;
   order: number;
@@ -23,43 +24,48 @@ const DASHBOARDS_APP_ID = 'dashboards';
 export const getStartedCards: GetStartCard[] = [
   {
     id: 'get_start_discover',
-    title: i18n.translate('workspace.essential_overview.discover.card.title', {
-      defaultMessage: 'Explore data',
-    }),
+    icon: <EuiIcon type="compass" size="l" color="primary" />,
+    title: '',
     description: i18n.translate('workspace.essential_overview.discover.card.description', {
-      defaultMessage: 'Explore data to uncover insights.',
+      defaultMessage: 'Explore data to uncover and discover insights.',
     }),
     footer: (
-      <EuiI18n token="workspace.essential_overview.discover.card.footer" default="Discover" />
+      <EuiTextColor color="subdued">
+        <EuiI18n token="workspace.essential_overview.discover.card.footer" default="Discover" />
+      </EuiTextColor>
     ),
     navigateAppId: DISCOVER_APP_ID,
     order: 20,
   },
   {
     id: 'get_start_visualization',
-    title: i18n.translate('workspace.essential_overview.visualize.card.title', {
-      defaultMessage: 'Visualize data',
-    }),
+    icon: <EuiIcon type="lineChart" size="l" color="primary" />,
+    title: '',
     description: i18n.translate('workspace.essential_overview.visualize.card.description', {
       defaultMessage: 'Gain deeper insights by visualizing and aggregating your data.',
     }),
     footer: (
-      <EuiI18n token="workspace.essential_overview.visualize.card.footer" default="Visualize" />
+      <EuiTextColor color="subdued">
+        <EuiI18n
+          token="workspace.essential_overview.visualize.card.footer"
+          default="Visualizations"
+        />
+      </EuiTextColor>
     ),
     navigateAppId: VISUALIZE_APP_ID,
     order: 30,
   },
   {
     id: 'get_start_dashboards',
-    title: i18n.translate('workspace.essential_overview.dashboards.card.title', {
-      defaultMessage: 'Explore your data at a glance',
-    }),
+    icon: <EuiIcon type="dashboard" size="l" color="primary" />,
+    title: '',
     description: i18n.translate('workspace.essential_overview.dashboards.card.description', {
-      defaultMessage:
-        'Monitor and understand your data connections using dynamic data visualization tools.',
+      defaultMessage: 'Monitor and explore your data using dynamic data visualization tools.',
     }),
     footer: (
-      <EuiI18n token="workspace.essential_overview.dashboards.card.footer" default="Dashboards" />
+      <EuiTextColor color="subdued">
+        <EuiI18n token="workspace.essential_overview.dashboards.card.footer" default="Dashboards" />
+      </EuiTextColor>
     ),
     navigateAppId: DASHBOARDS_APP_ID,
     order: 40,

diff --git a/src/plugins/workspace/public/components/use_case_overview/setup_overview.scss b/src/plugins/workspace/public/components/use_case_overview/setup_overview.scss
@@ -1,3 +1,24 @@
-.analyticsGettingStartedWorkspaceCardsIcon {
-  color: $euiColorMediumShade;
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.usecaseOverviewGettingStartedCard {
+  // Hide titles as they take up space even when empty
+  // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+  .euiCard__title {
+    display: none;
+  }
+
+  // Remove margins from description as titles are hidden and icons as they're at the top
+  // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+  .euiCard__description,
+  .euiCard__icon {
+    margin-top: 0;
+  }
+
+  // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+  .euiCard__footer {
+    margin-top: $euiSizeS;
+  }
 }