diff --git a/src/core/public/chrome/chrome_service.tsx b/src/core/public/chrome/chrome_service.tsx index f29c6ab262fa..b2504754cad2 100644 --- a/src/core/public/chrome/chrome_service.tsx +++ b/src/core/public/chrome/chrome_service.tsx @@ -320,16 +320,22 @@ export class ChromeService { setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => { if (workspaces.currentWorkspace$.getValue()) { const currentWorkspace = workspaces.currentWorkspace$.getValue()!; - const workspaceCrumb: ChromeBreadcrumb = { - text: currentWorkspace.name, - onClick: () => { - application.navigateToApp('workspace_overview'); - }, - }; - breadcrumbs$.next([workspaceCrumb, ...newBreadcrumbs]); - } else { - breadcrumbs$.next(newBreadcrumbs); + const workspaceInBreadcrumbs = + newBreadcrumbs.findIndex((breadcrumb: ChromeBreadcrumb) => { + return breadcrumb.text === currentWorkspace.name; + }) !== -1; + if (!workspaceInBreadcrumbs) { + const workspaceCrumb: ChromeBreadcrumb = { + text: currentWorkspace.name, + onClick: () => { + application.navigateToApp('workspace_overview'); + }, + }; + breadcrumbs$.next([workspaceCrumb, ...newBreadcrumbs]); + return; + } } + breadcrumbs$.next(newBreadcrumbs); }, getHelpExtension$: () => helpExtension$.pipe(takeUntil(this.stop$)), diff --git a/src/core/utils/default_app_categories.ts b/src/core/utils/default_app_categories.ts index 852d617f0c42..ea9085484ee4 100644 --- a/src/core/utils/default_app_categories.ts +++ b/src/core/utils/default_app_categories.ts @@ -77,35 +77,35 @@ export const DEFAULT_APP_CATEGORIES: Record = Object.freeze getStarted: { id: 'getStarted', label: i18n.translate('core.ui.managementNavList.label', { - defaultMessage: 'get started', + defaultMessage: 'Get started', }), order: 10000, }, dashboardAndReport: { id: 'dashboardReport', label: i18n.translate('core.ui.managementNavList.label', { - defaultMessage: 'dashboard and report', + defaultMessage: 'Dashboard and report', }), order: 11000, }, investigate: { id: 'investigate', label: i18n.translate('core.ui.managementNavList.label', { - defaultMessage: 'investigate', + defaultMessage: 'Investigate', }), order: 12000, }, detect: { id: 'detect', label: i18n.translate('core.ui.managementNavList.label', { - defaultMessage: 'detect', + defaultMessage: 'Detect', }), order: 13000, }, searchSolution: { id: 'searchSolution', label: i18n.translate('core.ui.managementNavList.label', { - defaultMessage: 'build search solution', + defaultMessage: 'Build search solution', }), order: 14000, }, diff --git a/src/plugins/workspace/public/components/workspace_overview/getting_start_card.tsx b/src/plugins/workspace/public/components/workspace_overview/getting_start_card.tsx index d67a71780fbb..851d2171d647 100644 --- a/src/plugins/workspace/public/components/workspace_overview/getting_start_card.tsx +++ b/src/plugins/workspace/public/components/workspace_overview/getting_start_card.tsx @@ -25,15 +25,20 @@ export const WorkspaceOverviewCard = ({ return ( {card.title}} + title={ + +

{card.title}

+
+ } description={''} footer={ <> - {card.description} + + {card.description} + diff --git a/src/plugins/workspace/public/components/workspace_overview/getting_start_modal.tsx b/src/plugins/workspace/public/components/workspace_overview/getting_start_modal.tsx index 92f9c6775ad0..bfaf66e85037 100644 --- a/src/plugins/workspace/public/components/workspace_overview/getting_start_modal.tsx +++ b/src/plugins/workspace/public/components/workspace_overview/getting_start_modal.tsx @@ -30,7 +30,7 @@ interface Props extends Omit { } export const WorkspaceOverviewGettingStartModal = (props: Props) => { - const ALL = 'all'; + const ALL = 'All'; const [selectedItemName, setSelectedItem] = useState(ALL); const scrollToRefs = useRef({} as Record); const allRef = useRef(null as HTMLDivElement | null); @@ -66,48 +66,55 @@ export const WorkspaceOverviewGettingStartModal = (props: Props) => { const sideNav = [ALL, ...categories].map((category) => createItem(category)); - const cardList: ReactNode[] = categories.map((category) => { - const cards = availableCards.filter((card) => { - return card.category.label === category; - }); + const cardList: ReactNode[] = categories + // .filter((category) => category === selectedItemName || selectedItemName === ALL) + .map((category) => { + const cards = availableCards.filter((card) => { + return card.category.label === category; + }); - return ( -
(scrollToRefs.current[slugify(category)] = ref)}> - -

{category}

-
- - - {cards.map((card) => { - return ( - - - - ); - })} - - -
- ); - }); + return ( +
(scrollToRefs.current[slugify(category)] = ref)}> + +

{category}

+
+ + + {cards.map((card) => { + return ( + + + + ); + })} + + +
+ ); + }); return ( -

what are you looking to do?

- find a tool based on your task or goal +

What are you looking to do?

+ Find a tool based on your task or goal
- - + + - -
{cardList}
+ +
+ {cardList} +
diff --git a/src/plugins/workspace/public/components/workspace_overview/index.tsx b/src/plugins/workspace/public/components/workspace_overview/index.tsx index 35eef2f04e53..6f7852a0ec1d 100644 --- a/src/plugins/workspace/public/components/workspace_overview/index.tsx +++ b/src/plugins/workspace/public/components/workspace_overview/index.tsx @@ -18,6 +18,7 @@ import { EuiBadge, EuiFlexGroup, EuiPanel, + EuiToolTip, } from '@elastic/eui'; import { useObservable } from 'react-use'; @@ -34,7 +35,7 @@ import { featureMatchesConfig } from '../../utils'; import { WorkspaceOverviewCard } from './getting_start_card'; import { WorkspaceOverviewGettingStartModal } from './getting_start_modal'; import { convertPermissionsToPermissionSettings } from '../workspace_form/utils'; -import { WORKSPACE_UPDATE_APP_ID } from '../../../../workspace/common/constants'; +import { WORKSPACE_UPDATE_APP_ID } from '../../../common/constants'; export const WorkspaceOverview = () => { const { @@ -70,19 +71,25 @@ export const WorkspaceOverview = () => { if (isPermissionEnabled && currentWorkspace && currentWorkspace.permissions) { const permissions = convertPermissionsToPermissionSettings(currentWorkspace.permissions); - const users: string[] = permissions + const users = permissions .filter((permission) => permission.type === WorkspacePermissionItemType.User) - .map((permission) => (permission as { userId: string }).userId); - const groups: string[] = permissions + .map((permission) => { + return { type: permission.type, id: (permission as { userId: string }).userId }; + }); + const groups = permissions .filter((permission) => permission.type === WorkspacePermissionItemType.Group) - .map((permission) => (permission as { group: string }).group); + .map((permission) => { + return { type: permission.type, id: (permission as { group: string }).group }; + }); const allUserAndGroup = [...new Set(users.concat(groups))]; const userList = allUserAndGroup.slice(0, 3).map((user) => { return ( - - + + + + ); }); @@ -119,7 +126,7 @@ export const WorkspaceOverview = () => { { id: 'settings', name: i18n.translate('workspace.setting.title', { - defaultMessage: 'Setting', + defaultMessage: 'Settings', }), content: , }, @@ -131,12 +138,12 @@ export const WorkspaceOverview = () => { style={{ backgroundColor: 'transparent', padding: '8px' }} iconType={isGettingStartVisible ? 'arrowUp' : 'arrowDown'} iconSide="right" - onClickAriaLabel="Click to toggle start working cards" + onClickAriaLabel={isGettingStartVisible ? 'Collapse' : 'Expand'} onClick={() => { setIsStartWorkingVisible(!isGettingStartVisible); }} > - {isGettingStartVisible ? 'collapse' : 'expand'} + {isGettingStartVisible ? 'Collapse' : 'Expand'} ); @@ -182,7 +189,7 @@ export const WorkspaceOverview = () => { setIsModalVisible(true); }} > - see more ways to get started + see more ways to get started ) : null} diff --git a/src/plugins/workspace/public/components/workspace_overview/types.ts b/src/plugins/workspace/public/components/workspace_overview/types.ts index 156584e4e1d8..cd597c23408c 100644 --- a/src/plugins/workspace/public/components/workspace_overview/types.ts +++ b/src/plugins/workspace/public/components/workspace_overview/types.ts @@ -3,6 +3,8 @@ * SPDX-License-Identifier: Apache-2.0 */ +import { AppCategory } from '../../../../../core/types'; + export interface GetStartCard { /** * application id that used for filter, if app id is not speicified, that means it will always display diff --git a/src/plugins/workspace/public/components/workspace_overview/workspace_overview_content.tsx b/src/plugins/workspace/public/components/workspace_overview/workspace_overview_content.tsx index 232f794fd027..87315e6a4d35 100644 --- a/src/plugins/workspace/public/components/workspace_overview/workspace_overview_content.tsx +++ b/src/plugins/workspace/public/components/workspace_overview/workspace_overview_content.tsx @@ -3,11 +3,10 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { EuiTitle, EuiFlexItem, EuiCard, EuiSpacer, EuiPanel, EuiFlexGroup } from '@elastic/eui'; +import { EuiTitle, EuiFlexItem, EuiCard, EuiPanel, EuiFlexGroup } from '@elastic/eui'; import React from 'react'; import { useObservable } from 'react-use'; import { of } from 'rxjs'; -import { i18n } from '@osd/i18n'; import { useOpenSearchDashboards } from '../../../../../plugins/opensearch_dashboards_react/public'; export const WorkspaceOverviewContent = () => { @@ -19,14 +18,6 @@ export const WorkspaceOverviewContent = () => { return ( - - - {i18n.translate('workspace.overview.title', { - defaultMessage: 'Overview', - })} - - - { const { - services: { chrome }, - } = useOpenSearchDashboards(); + services: { workspaces, chrome, application }, + } = useOpenSearchDashboards(); + + const currentWorkspace = useObservable(workspaces.currentWorkspace$); /** * set breadcrumbs to chrome @@ -20,12 +23,16 @@ export const WorkspaceOverviewApp = () => { useEffect(() => { chrome?.setBreadcrumbs([ { - text: i18n.translate('workspace.workspaceOverviewTitle', { - defaultMessage: 'Workspace overview', - }), + text: 'Home', + onClick: () => { + application.navigateToApp('home'); + }, + }, + { + text: currentWorkspace?.name, }, ]); - }, [chrome]); + }, [chrome, currentWorkspace, application]); return (