From ca2544cc534c954ac90c8e73083821a7c2a5003f Mon Sep 17 00:00:00 2001 From: tygao Date: Mon, 22 Jul 2024 11:16:05 +0800 Subject: [PATCH 1/4] feat: add home static list card Signed-off-by: tygao --- .../home_list_card.test.tsx.snap | 47 ++++++++++++ .../components/home_list_card.test.tsx | 26 +++++++ .../application/components/home_list_card.tsx | 72 +++++++++++++++++++ .../home/public/application/home_render.tsx | 36 +++++++++- 4 files changed, 179 insertions(+), 2 deletions(-) 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/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..bb2925b425c2 --- /dev/null +++ b/src/plugins/home/public/application/components/__snapshots__/home_list_card.test.tsx.snap @@ -0,0 +1,47 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should render static content normally 1`] = ` + +
+
+
+ + What's New + +
+ +
+
+
+
+ +`; 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..ecdfea306626 --- /dev/null +++ b/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('', () => { + 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(); + 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..bc9e61f8657a --- /dev/null +++ b/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 ( + <> + + 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, + }); +}; From 30d59c97349b602bf1507c1c1d5d6dc069d82464 Mon Sep 17 00:00:00 2001 From: "opensearch-changeset-bot[bot]" <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> Date: Mon, 22 Jul 2024 03:20:23 +0000 Subject: [PATCH 2/4] Changeset file for PR #7351 created/updated --- changelogs/fragments/7351.yml | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 changelogs/fragments/7351.yml 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 From 454cc5ff9eda8c29107a55cc9975a2f4017b7d9c Mon Sep 17 00:00:00 2001 From: tygao Date: Mon, 22 Jul 2024 11:21:01 +0800 Subject: [PATCH 3/4] update link property Signed-off-by: tygao --- .../home/public/application/components/home_list_card.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/home/public/application/components/home_list_card.tsx b/src/plugins/home/public/application/components/home_list_card.tsx index bc9e61f8657a..7dc7d766b541 100644 --- a/src/plugins/home/public/application/components/home_list_card.tsx +++ b/src/plugins/home/public/application/components/home_list_card.tsx @@ -59,7 +59,7 @@ export const HomeListCard = ({ config }: { config: Config }) => { display="plain" footer={ config.allLink ? ( - + view all ) : null From db687c0ef266bb59ef407de1d10120c91a711278 Mon Sep 17 00:00:00 2001 From: tygao Date: Mon, 22 Jul 2024 13:32:11 +0800 Subject: [PATCH 4/4] add i18n and description Signed-off-by: tygao --- .../home_list_card.test.tsx.snap | 66 +++++++++-------- .../components/home_list_card.test.tsx | 1 + .../application/components/home_list_card.tsx | 74 +++++++++++++------ 3 files changed, 88 insertions(+), 53 deletions(-) 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 index bb2925b425c2..892d6a8dc225 100644 --- 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 @@ -4,43 +4,47 @@ exports[` should render static content normally 1`] = `
+

+ What's New +

+
- - What's New - -
- -
-
+ (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 index ecdfea306626..3e0a646e7279 100644 --- a/src/plugins/home/public/application/components/home_list_card.test.tsx +++ b/src/plugins/home/public/application/components/home_list_card.test.tsx @@ -17,6 +17,7 @@ describe('', () => { label: 'Quickstart guide', href: 'https://opensearch.org/docs/latest/dashboards/quickstart/', target: '_blank', + description: 'Get started in minutes with OpenSearch Dashboards', }, ], }; diff --git a/src/plugins/home/public/application/components/home_list_card.tsx b/src/plugins/home/public/application/components/home_list_card.tsx index 7dc7d766b541..c905ca3272cc 100644 --- a/src/plugins/home/public/application/components/home_list_card.tsx +++ b/src/plugins/home/public/application/components/home_list_card.tsx @@ -4,37 +4,51 @@ */ import React from 'react'; -import { EuiCard, EuiLink, EuiListGroup } from '@elastic/eui'; +import { + EuiDescriptionList, + EuiText, + EuiLink, + EuiTitle, + EuiPanel, + EuiDescriptionListTitle, + EuiDescriptionListDescription, + EuiSpacer, +} from '@elastic/eui'; +import { i18n } from '@osd/i18n'; export const LEARN_OPENSEARCH_CONFIG = { - title: 'Learn Opensearch', + title: i18n.translate('homepage.card.learnOpenSearch.title', { + defaultMessage: 'Learn Opensearch', + }), list: [ { label: 'Quickstart guide', href: 'https://opensearch.org/docs/latest/dashboards/quickstart/', - target: '_blank', + description: 'Get started in minutes with OpenSearch Dashboards', }, { label: 'Building data visualizations', href: 'https://opensearch.org/docs/latest/dashboards/visualize/viz-index/', - target: '_blank', + description: 'Design interactive charts and graphs to unlock insights form your data.', }, { label: 'Creating dashboards', href: 'https://opensearch.org/docs/latest/dashboards/dashboard/index/', - target: '_blank', + description: 'Build interactive dashboards to explore and analyze your data', }, ], allLink: 'https://opensearch.org/docs/latest/', }; export const WHATS_NEW_CONFIG = { - title: `What's New`, + title: i18n.translate('homepage.card.whatsNew.title', { + defaultMessage: `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', }, ], }; @@ -44,7 +58,7 @@ interface Config { list: Array<{ label: string; href: string; - target?: string; + description: string; }>; allLink?: string; } @@ -52,21 +66,37 @@ interface Config { export const HomeListCard = ({ config }: { config: Config }) => { return ( <> - - view all + + +

{config.title}

+ + + {config.list.length > 0 && ( + + {config.list.map((item) => ( + <> + + + {item.label} + + + {item.description} + + ))} + + )} + + {config.allLink ? ( + <> + + + + View all + - ) : null - } - > - - + + ) : null} + ); };