[HomePage] Add home page static list card

changelogs/fragments/7351.yml

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

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

@@ -0,0 +1,26 @@
+/*
+ * 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',
+ },
+ ],
+ };
+ const { baseElement } = render(<HomeListCard config={mockConfig} />);
+ expect(baseElement).toMatchSnapshot();
+ });
+});

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

@@ -0,0 +1,72 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiCard, EuiLink, EuiListGroup } from '@elastic/eui';
+
+export const LEARN_OPENSEARCH_CONFIG = {
+ title: 'Learn Opensearch',
+ list: [
+ {
+ label: 'Quickstart guide',
+ href: 'https://opensearch.org/docs/latest/dashboards/quickstart/',
+ target: '_blank',
+ },
+ {
+ label: 'Building data visualizations',
+ href: 'https://opensearch.org/docs/latest/dashboards/visualize/viz-index/',
+ target: '_blank',
+ },
+ {
+ label: 'Creating dashboards',
+ href: 'https://opensearch.org/docs/latest/dashboards/dashboard/index/',
+ target: '_blank',
+ },
+ ],
+ allLink: 'https://opensearch.org/docs/latest/',
+};
+
+export const WHATS_NEW_CONFIG = {
+ title: `What's New`,
+ list: [
+ {
+ label: 'Quickstart guide',
+ href: 'https://opensearch.org/docs/latest/dashboards/quickstart/',
+ target: '_blank',
+ },
+ ],
+};
+
+interface Config {
+ title: string;
+ list: Array<{
+ label: string;
+ href: string;
+ target?: string;
+ }>;
+ allLink?: string;
+}
+
+export const HomeListCard = ({ config }: { config: Config }) => {
+ return (
+ <>
+ <EuiCard
+ title={config.title}
+ description={false}
+ hasBorder={false}
+ display="plain"
+ footer={
+ config.allLink ? (
+ <EuiLink href={config.allLink} external={true} target="_blank">
+ view all
+ </EuiLink>
+ ) : null
+ }
+ >
+ <EuiListGroup listItems={config.list} color="text" size="s" />
+ </EuiCard>
+ </>
+ );
+};

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

@@ -9,7 +9,12 @@
  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({
@@ -38,4 +43,31 @@
  });
 };
 
-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,
+ });
+};