From d7f3765f8e76438541bffadb84bfa7560dcb9179 Mon Sep 17 00:00:00 2001 From: "opensearch-trigger-bot[bot]" <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com> Date: Thu, 8 Aug 2024 17:41:25 +0800 Subject: [PATCH] [Workspace] update workspace-list-card and home-list-card (#7547) (#7650) * update workspace-list-card and home-list-card * new update home_list_card and workspace_list_card,solve some errors * new update home_list_card and workspace_list_card,solve some errors * Changeset file for PR #7547 created/updated * new update home_list_card and workspace_list_card,solve some errors * new update home_list_card and workspace_list_card,solve some errors, and write new testes * new update home_list_card and workspace_list_card,solve some errors, and write new testes --------- (cherry picked from commit 14c71c7ceefbf936ef1c5a5be93486636da80e97) Signed-off-by: Yang Signed-off-by: Qxisylolo Signed-off-by: github-actions[bot] Co-authored-by: github-actions[bot] Co-authored-by: Yang Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> --- changelogs/fragments/7547.yml | 2 + .../home_list_card.test.tsx.snap | 88 +++++--- .../components/home_list_card.test.tsx | 35 +++ .../application/components/home_list_card.tsx | 76 ++++--- .../workspace_list_card.test.tsx.snap | 181 ++++++++------- .../service_card/workspace_list_card.test.tsx | 21 ++ .../service_card/workspace_list_card.tsx | 207 ++++++++++-------- 7 files changed, 366 insertions(+), 244 deletions(-) create mode 100644 changelogs/fragments/7547.yml diff --git a/changelogs/fragments/7547.yml b/changelogs/fragments/7547.yml new file mode 100644 index 000000000000..8921d0ba4d14 --- /dev/null +++ b/changelogs/fragments/7547.yml @@ -0,0 +1,2 @@ +fix: +- [Workspace] updating workspace-list-card and home-list-card ([#7547](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7547)) \ 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 index 892d6a8dc225..8ff4e1d85325 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 @@ -6,45 +6,65 @@ 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 - - +
+
+ + 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 index 3e0a646e7279..8558c62727a4 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 @@ -25,3 +25,38 @@ describe('', () => { expect(baseElement).toMatchSnapshot(); }); }); + +it('should render View All button when allLink is provided', () => { + 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', + }, + ], + allLink: 'https://opensearch.org/docs/latest/', + }; + + const { getByText } = render(); + expect(getByText('View all')).toBeInTheDocument(); +}); + +it('should not show View All button when allLink is not provided', () => { + 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 { queryByText } = render(); + expect(queryByText('View all')).not.toBeInTheDocument(); +}); 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 c905ca3272cc..707c22e98ff0 100644 --- a/src/plugins/home/public/application/components/home_list_card.tsx +++ b/src/plugins/home/public/application/components/home_list_card.tsx @@ -9,10 +9,12 @@ import { EuiText, EuiLink, EuiTitle, - EuiPanel, EuiDescriptionListTitle, EuiDescriptionListDescription, + EuiPanel, EuiSpacer, + EuiFlexGroup, + EuiFlexItem, } from '@elastic/eui'; import { i18n } from '@osd/i18n'; @@ -67,35 +69,49 @@ 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} + + + +

{config.title}

+ + + + + {config.list.length > 0 && ( + + {config.list.map((item) => ( + <> + + + {item.label} + + + + {item.description} + + + ))} + + )} + + + + {config.allLink ? ( + + + {i18n.translate('home.list.card.view_all', { + defaultMessage: 'View all', + })} + + + ) : null} + + ); diff --git a/src/plugins/workspace/public/components/service_card/__snapshots__/workspace_list_card.test.tsx.snap b/src/plugins/workspace/public/components/service_card/__snapshots__/workspace_list_card.test.tsx.snap index 35970676eb7e..0607b29799a9 100644 --- a/src/plugins/workspace/public/components/service_card/__snapshots__/workspace_list_card.test.tsx.snap +++ b/src/plugins/workspace/public/components/service_card/__snapshots__/workspace_list_card.test.tsx.snap @@ -6,116 +6,131 @@ exports[`workspace list card render normally should show workspace list card cor class="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPanel--noBorder" >
-

- Workspaces -

-
-
- - - -
-
- -
+
+
+ + +
+
+
+
- + +
+ + +
+
-
-
-
    +
    -
    -

    - No Workspaces found -

    - +
    -
    - Workspaces you have recently viewed will appear here. -
    - + No Workspaces found +

    + +
    +
    + Workspaces you have recently viewed will appear here. +
    + +
    -
-
- +
`; diff --git a/src/plugins/workspace/public/components/service_card/workspace_list_card.test.tsx b/src/plugins/workspace/public/components/service_card/workspace_list_card.test.tsx index 24d45d42e725..10efd2b6b591 100644 --- a/src/plugins/workspace/public/components/service_card/workspace_list_card.test.tsx +++ b/src/plugins/workspace/public/components/service_card/workspace_list_card.test.tsx @@ -63,4 +63,25 @@ describe('workspace list card render normally', () => { expect(getByText('foo')).toBeInTheDocument(); expect(getByText('bar')).toBeInTheDocument(); }); + + it('should render create workspace button when is dashboard admin and navigate to create new workspace page when clicking on plus button', () => { + coreStart.application.capabilities = { + ...coreStart.application.capabilities, + dashboards: { + isDashboardAdmin: true, + }, + }; + + const { getByTestId } = render(); + const mockButton = getByTestId('create_workspace'); + fireEvent.click(mockButton); + expect(coreStart.application.navigateToApp).toHaveBeenCalledWith('workspace_create'); + }); + + it('should navigate to workspace list page when click on View all button', () => { + const { getByText } = render(); + const mockButton = getByText('View all'); + fireEvent.click(mockButton); + expect(coreStart.application.navigateToApp).toHaveBeenCalledWith('workspace_list'); + }); }); diff --git a/src/plugins/workspace/public/components/service_card/workspace_list_card.tsx b/src/plugins/workspace/public/components/service_card/workspace_list_card.tsx index 12b14325ce11..009f6519ce8f 100644 --- a/src/plugins/workspace/public/components/service_card/workspace_list_card.tsx +++ b/src/plugins/workspace/public/components/service_card/workspace_list_card.tsx @@ -5,17 +5,16 @@ import React, { useState, useEffect, useMemo } from 'react'; import { - EuiPanel, + EuiFlexGroup, EuiLink, EuiDescriptionList, EuiIcon, - EuiFlexGroup, EuiFlexItem, EuiSelect, EuiButtonIcon, - EuiSpacer, - EuiListGroup, EuiText, + EuiSpacer, + EuiPanel, EuiTitle, EuiToolTip, EuiEmptyPrompt, @@ -89,104 +88,118 @@ export const WorkspaceListCard = (props: WorkspaceListCardProps) => { return ( - - - -

Workspaces

- + + + + + +

Workspaces

+ + + + + + + + + { + setFilter(e.target.value); + }} + options={[ + { + value: 'viewed', + text: i18n.translate('workspace.list.card.filter.viewed', { + defaultMessage: 'Recently viewed', + }), + }, + { + value: 'updated', + text: i18n.translate('workspace.list.card.filter.updated', { + defaultMessage: 'Recently updated', + }), + }, + ]} + /> + + {isDashboardAdmin && ( + + + { + application.navigateToApp(WORKSPACE_CREATE_APP_ID); + }} + /> + + + )} + - - - - + + + {workspaceList && workspaceList.length === 0 ? ( + No Workspaces found

} + body={i18n.translate('workspace.list.card.empty', { + values: { + filter, + }, + defaultMessage: 'Workspaces you have recently {filter} will appear here.', + })} + /> + ) : ( + ({ + title: ( + { + handleSwitchWorkspace(workspace.id); + }} + > + {workspace.name} + + ), + description: ( + + {moment(workspace.time).fromNow()} + + ), + }))} + /> + )} - - { - setFilter(e.target.value); + + + { + application.navigateToApp(WORKSPACE_LIST_APP_ID); }} - options={[ - { - value: 'viewed', - text: i18n.translate('workspace.list.card.filter.viewed', { - defaultMessage: 'Recently viewed', - }), - }, - { - value: 'updated', - text: i18n.translate('workspace.list.card.filter.updated', { - defaultMessage: 'Recently updated', - }), - }, - ]} - /> + > + + {i18n.translate('workspace.list.card.view_all', { + defaultMessage: 'View all', + })} + + - {isDashboardAdmin && ( - - - { - application.navigateToApp(WORKSPACE_CREATE_APP_ID); - }} - /> - - - )} - - - - {workspaceList && workspaceList.length === 0 ? ( - No Workspaces found

} - body={i18n.translate('workspace.list.card.empty', { - values: { - filter, - }, - defaultMessage: 'Workspaces you have recently {filter} will appear here.', - })} - /> - ) : ( - ({ - title: ( - { - handleSwitchWorkspace(workspace.id); - }} - > - {workspace.name} - - ), - description: ( - - {moment(workspace.time).fromNow()} - - ), - }))} - /> - )} - - - { - application.navigateToApp(WORKSPACE_LIST_APP_ID); - }} - > - View all - ); };