[HomePage] Add home page static list card (#7351) (#7355) (#7383)

* feat: add home static list card

* Changeset file for PR #7351 created/updated

* update link property

* add i18n and description

---------

(cherry picked from commit e64de15)





(cherry picked from commit 6685bce)

Signed-off-by: tygao <[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/7351.yml

@@ -0,0 +1,2 @@
+feat:
+- Add home page static list card ([#7351](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7351))

src/plugins/home/public/application/components/home_list_card.test.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { HomeListCard } from './home_list_card';
+
+describe('<HomeListCard />', () => {
+  it('should render static content normally', async () => {
+    const mockConfig = {
+      title: `What's New`,
+      list: [
+        {
+          label: 'Quickstart guide',
+          href: 'https://opensearch.org/docs/latest/dashboards/quickstart/',
+          target: '_blank',
+          description: 'Get started in minutes with OpenSearch Dashboards',
+        },
+      ],
+    };
+    const { baseElement } = render(<HomeListCard config={mockConfig} />);
+    expect(baseElement).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,102 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import {
+  EuiDescriptionList,
+  EuiText,
+  EuiLink,
+  EuiTitle,
+  EuiPanel,
+  EuiDescriptionListTitle,
+  EuiDescriptionListDescription,
+  EuiSpacer,
+} from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+
+export const LEARN_OPENSEARCH_CONFIG = {
+  title: i18n.translate('homepage.card.learnOpenSearch.title', {
+    defaultMessage: 'Learn Opensearch',
+  }),
+  list: [
+    {
+      label: 'Quickstart guide',
+      href: 'https://opensearch.org/docs/latest/dashboards/quickstart/',
+      description: 'Get started in minutes with OpenSearch Dashboards',
+    },
+    {
+      label: 'Building data visualizations',
+      href: 'https://opensearch.org/docs/latest/dashboards/visualize/viz-index/',
+      description: 'Design interactive charts and graphs to unlock insights form your data.',
+    },
+    {
+      label: 'Creating dashboards',
+      href: 'https://opensearch.org/docs/latest/dashboards/dashboard/index/',
+      description: 'Build interactive dashboards to explore and analyze your data',
+    },
+  ],
+  allLink: 'https://opensearch.org/docs/latest/',
+};
+
+export const WHATS_NEW_CONFIG = {
+  title: i18n.translate('homepage.card.whatsNew.title', {
+    defaultMessage: `What's New`,
+  }),
+  list: [
+    {
+      label: 'Quickstart guide',
+      href: 'https://opensearch.org/docs/latest/dashboards/quickstart/',
+      description: 'Get started in minutes with OpenSearch Dashboards',
+    },
+  ],
+};
+
+interface Config {
+  title: string;
+  list: Array<{
+    label: string;
+    href: string;
+    description: string;
+  }>;
+  allLink?: string;
+}
+
+export const HomeListCard = ({ config }: { config: Config }) => {
+  return (
+    <>
+      <EuiPanel paddingSize="s" hasBorder={false} hasShadow={false}>
+        <EuiTitle>
+          <h4>{config.title}</h4>
+        </EuiTitle>
+        <EuiSpacer />
+        {config.list.length > 0 && (
+          <EuiDescriptionList>
+            {config.list.map((item) => (
+              <>
+                <EuiDescriptionListTitle>
+                  <EuiLink href={item.href} target="_blank">
+                    {item.label}
+                  </EuiLink>
+                </EuiDescriptionListTitle>
+                <EuiDescriptionListDescription>{item.description}</EuiDescriptionListDescription>
+              </>
+            ))}
+          </EuiDescriptionList>
+        )}
+
+        {config.allLink ? (
+          <>
+            <EuiSpacer />
+            <EuiLink href={config.allLink} target="_blank">
+              <EuiText size="s" style={{ display: 'inline' }}>
+                View all
+              </EuiText>
+            </EuiLink>
+          </>
+        ) : null}
+      </EuiPanel>
+    </>
+  );
+};

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

@@ -9,7 +9,12 @@ import {
   ContentManagementPluginSetup,
   ContentManagementPluginStart,
 } from '../../../../plugins/content_management/public';
-import { HOME_PAGE_ID, SECTIONS } from '../../common/constants';
+import { HOME_PAGE_ID, SECTIONS, HOME_CONTENT_AREAS } from '../../common/constants';
+import {
+  WHATS_NEW_CONFIG,
+  LEARN_OPENSEARCH_CONFIG,
+  HomeListCard,
+} from './components/home_list_card';
 
 export const setupHome = (contentManagement: ContentManagementPluginSetup) => {
   contentManagement.registerPage({
@@ -50,4 +55,31 @@ export const setupHome = (contentManagement: ContentManagementPluginSetup) => {
   });
 };
 
-export const initHome = (contentManagement: ContentManagementPluginStart, core: CoreStart) => {};
+export const initHome = (contentManagement: ContentManagementPluginStart, core: CoreStart) => {
+  contentManagement.registerContentProvider({
+    id: 'whats_new_cards',
+    getContent: () => ({
+      id: 'whats_new',
+      kind: 'custom',
+      order: 3,
+      render: () =>
+        React.createElement(HomeListCard, {
+          config: WHATS_NEW_CONFIG,
+        }),
+    }),
+    getTargetArea: () => HOME_CONTENT_AREAS.SERVICE_CARDS,
+  });
+  contentManagement.registerContentProvider({
+    id: 'learn_opensearch_new_cards',
+    getContent: () => ({
+      id: 'learn_opensearch',
+      kind: 'custom',
+      order: 4,
+      render: () =>
+        React.createElement(HomeListCard, {
+          config: LEARN_OPENSEARCH_CONFIG,
+        }),
+    }),
+    getTargetArea: () => HOME_CONTENT_AREAS.SERVICE_CARDS,
+  });
+};