From b18e348a27978cafc210a4e49ed4c8f81a184d05 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 23 Jul 2024 01:49:02 +0000 Subject: [PATCH] [HomePage] Add home page static list card (#7351) (#7355) * feat: add home static list card * Changeset file for PR #7351 created/updated * update link property * add i18n and description --------- (cherry picked from commit e64de155546d584b92c868c38c6084d1d04b281e) Signed-off-by: tygao Signed-off-by: github-actions[bot] Co-authored-by: github-actions[bot] Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> (cherry picked from commit 6685bce770af11e40394f99ff78ddf0392219d4d) Signed-off-by: github-actions[bot] --- changelogs/fragments/7351.yml | 2 + .../home_list_card.test.tsx.snap | 51 +++++++++ .../components/home_list_card.test.tsx | 27 +++++ .../application/components/home_list_card.tsx | 102 ++++++++++++++++++ .../home/public/application/home_render.tsx | 36 ++++++- 5 files changed, 216 insertions(+), 2 deletions(-) create mode 100644 changelogs/fragments/7351.yml create mode 100644 src/plugins/home/public/application/components/__snapshots__/home_list_card.test.tsx.snap create mode 100644 src/plugins/home/public/application/components/home_list_card.test.tsx create mode 100644 src/plugins/home/public/application/components/home_list_card.tsx diff --git a/changelogs/fragments/7351.yml b/changelogs/fragments/7351.yml new file mode 100644 index 000000000000..e8cbdc921c78 --- /dev/null +++ b/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)) \ No newline at end of file diff --git a/src/plugins/home/public/application/components/__snapshots__/home_list_card.test.tsx.snap b/src/plugins/home/public/application/components/__snapshots__/home_list_card.test.tsx.snap new file mode 100644 index 000000000000..892d6a8dc225 --- /dev/null +++ b/src/plugins/home/public/application/components/__snapshots__/home_list_card.test.tsx.snap @@ -0,0 +1,51 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should render static content normally 1`] = ` + +
+
+

+ What's New +

+
+
+
+ + Quickstart guide + + + (opens in a new tab or window) + + +
+
+ Get started in minutes with OpenSearch Dashboards +
+
+
+
+ +`; diff --git a/src/plugins/home/public/application/components/home_list_card.test.tsx b/src/plugins/home/public/application/components/home_list_card.test.tsx new file mode 100644 index 000000000000..3e0a646e7279 --- /dev/null +++ b/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('', () => { + 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(); + expect(baseElement).toMatchSnapshot(); + }); +}); diff --git a/src/plugins/home/public/application/components/home_list_card.tsx b/src/plugins/home/public/application/components/home_list_card.tsx new file mode 100644 index 000000000000..c905ca3272cc --- /dev/null +++ b/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 ( + <> + + +

{config.title}

+ + + {config.list.length > 0 && ( + + {config.list.map((item) => ( + <> + + + {item.label} + + + {item.description} + + ))} + + )} + + {config.allLink ? ( + <> + + + + View all + + + + ) : null} + + + ); +}; diff --git a/src/plugins/home/public/application/home_render.tsx b/src/plugins/home/public/application/home_render.tsx index 49d5bd1c9043..757475dd7f45 100644 --- a/src/plugins/home/public/application/home_render.tsx +++ b/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({ @@ -38,4 +43,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, + }); +};