From a10cb84b37df3182763926520b828d0afb09073a Mon Sep 17 00:00:00 2001 From: SuZhou-Joe Date: Thu, 3 Oct 2024 13:34:50 +0800 Subject: [PATCH] feat: optimize code based on comments Signed-off-by: SuZhou-Joe --- src/core/public/chrome/nav_group/nav_group_service.ts | 6 +++++- .../chrome/ui/header/collapsible_nav_group_enabled.scss | 5 ++++- src/core/public/chrome/ui/header/collapsible_nav_groups.tsx | 3 +++ src/core/public/chrome/ui/header/variables.scss | 1 + .../components/workspace_selector/workspace_selector.scss | 5 +++++ .../components/workspace_selector/workspace_selector.tsx | 5 +++-- 6 files changed, 21 insertions(+), 4 deletions(-) create mode 100644 src/core/public/chrome/ui/header/variables.scss create mode 100644 src/plugins/workspace/public/components/workspace_selector/workspace_selector.scss diff --git a/src/core/public/chrome/nav_group/nav_group_service.ts b/src/core/public/chrome/nav_group/nav_group_service.ts index 62d61576d3cf..5ff758a056ea 100644 --- a/src/core/public/chrome/nav_group/nav_group_service.ts +++ b/src/core/public/chrome/nav_group/nav_group_service.ts @@ -141,6 +141,8 @@ export class ChromeNavGroupService { // Append all the links that do not have use case info to keep backward compatible const linkIdsWithNavGroupInfo = Object.values(navGroupsMap).reduce((accumulator, navGroup) => { + // Nav groups without type will be regarded as use case, + // we should transform use cases to a category and append links with `showInAllNavGroup: true` under the category if (!navGroup.type) { // Append use case section into left navigation const categoryInfo = { @@ -362,7 +364,9 @@ export class ChromeNavGroupService { }); }; if (visibleUseCases.length === 1) { - // It means we are in a workspace, we should only use the visible use cases + // The length will be 1 if inside a workspace + // as workspace plugin will register a filter to only make the selected nav group visible. + // In order to tell which nav group we are in, we should use the only visible use case if the visibleUseCases.length equals 1. visibleUseCases.forEach((navGroup) => mapAppIdToNavGroup(navGroup)); } else { // Nav group of Hidden status should be filtered out when counting navGroups the currentApp belongs to diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss index 6db5fcb73b49..529f0f749ebb 100644 --- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss +++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss @@ -1,8 +1,11 @@ +@import "./variables"; + .context-nav-wrapper { border: none !important; border-top-right-radius: $euiSizeL; border-bottom-right-radius: $euiSizeL; - background-color: $euiColorLightShade; + background-color: $ouiSideNavBackgroundColorTemp; + overflow: hidden; .nav-link-item { padding: $euiSizeS; diff --git a/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx b/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx index 1dced611f04b..c22920a633ef 100644 --- a/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx +++ b/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx @@ -116,6 +116,9 @@ export function NavGroups({ */ href: undefined, onClick: undefined, + /** + * The data-test-subj has to be undefined because we render the element with the attribute in CollapsibleNavGroupsLabel + */ 'data-test-subj': undefined, className: classNames(props.className, 'nav-link-parent-item'), name: ( diff --git a/src/core/public/chrome/ui/header/variables.scss b/src/core/public/chrome/ui/header/variables.scss new file mode 100644 index 000000000000..ca276818b657 --- /dev/null +++ b/src/core/public/chrome/ui/header/variables.scss @@ -0,0 +1 @@ +$ouiSideNavBackgroundColorTemp: lightOrDarkTheme(#ebe4df, #001c28); /* stylelint-disable-line */ diff --git a/src/plugins/workspace/public/components/workspace_selector/workspace_selector.scss b/src/plugins/workspace/public/components/workspace_selector/workspace_selector.scss new file mode 100644 index 000000000000..4f9b92b074c5 --- /dev/null +++ b/src/plugins/workspace/public/components/workspace_selector/workspace_selector.scss @@ -0,0 +1,5 @@ +@import "../../../../../core/public/chrome/ui/header/variables"; + +.workspaceNameLabel { + background-color: $ouiSideNavBackgroundColorTemp; +} diff --git a/src/plugins/workspace/public/components/workspace_selector/workspace_selector.tsx b/src/plugins/workspace/public/components/workspace_selector/workspace_selector.tsx index 7f48cac24817..e3a530ce507f 100644 --- a/src/plugins/workspace/public/components/workspace_selector/workspace_selector.tsx +++ b/src/plugins/workspace/public/components/workspace_selector/workspace_selector.tsx @@ -25,6 +25,7 @@ import { getFirstUseCaseOfFeatureConfigs } from '../../utils'; import { WorkspaceUseCase } from '../../types'; import { validateWorkspaceColor } from '../../../common/utils'; import { WorkspacePickerContent } from '../workspace_picker_content/workspace_picker_content'; +import './workspace_selector.scss'; const createWorkspaceButton = i18n.translate('workspace.menu.button.createWorkspace', { defaultMessage: 'Create workspace', @@ -82,13 +83,13 @@ export const WorkspaceSelector = ({ coreStart, registeredUseCases$ }: Props) => padding: '0 5px', }} > - + {i18n.translate('workspace.left.nav.selector.label', { defaultMessage: 'WORKSPACE', })} - +