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 86292469cc7a..5d0497b7c39e 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({ @@ -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, + }); +};