Skip to content

[8.x] [Solution Side Nav] Add back external link indicator to sidenav (#215946) #217245

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kowalczyk-krzysztof merged 1 commit into from
Apr 4, 2025
Merged

[8.x] [Solution Side Nav] Add back external link indicator to sidenav (#215946) #217245

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 19 additions & 19 deletions ...ackages/chrome/browser-internal/src/project_navigation/project_navigation_service.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ describe('initNavigation()', () => {
path: 'group1.foo',
href: '/app/foo',
deepLink: getNavLink({ id: 'foo', title: 'FOO' }),
isElasticInternalLink: false,
isExternalLink: false,
sideNavStatus: 'visible',
});
expect(node.children![0].href).toBe(node.children![0]!.deepLink!.href);
Expand Down Expand Up @@ -240,14 +240,14 @@ describe('initNavigation()', () => {
title: '',
path: 'node-1',
type: 'navGroup',
isElasticInternalLink: false,
isExternalLink: false,
sideNavStatus: 'visible',
children: [
{
id: 'node-0', // auto generated
path: 'node-1.node-0',
title: '',
isElasticInternalLink: false,
isExternalLink: false,
sideNavStatus: 'visible',
children: [
{
Expand All @@ -261,7 +261,7 @@ describe('initNavigation()', () => {
},
href: '/app/foo',
id: 'foo',
isElasticInternalLink: false,
isExternalLink: false,
path: 'node-1.node-0.foo',
sideNavStatus: 'visible',
title: 'FOO',
Expand All @@ -277,21 +277,21 @@ describe('initNavigation()', () => {
title: 'Footer group',
path: 'node-4',
type: 'navGroup',
isElasticInternalLink: false,
isExternalLink: false,
sideNavStatus: 'visible',
children: [
{
id: 'node-0', // auto generated
path: 'node-4.node-0',
title: '',
isElasticInternalLink: false,
isExternalLink: false,
sideNavStatus: 'visible',
children: [
{
deepLink: expect.any(Object), // we are not testing the deepLink here
href: '/app/foo',
id: 'foo',
isElasticInternalLink: false,
isExternalLink: false,
path: 'node-4.node-0.foo',
sideNavStatus: 'visible',
title: 'FOO',
Expand Down Expand Up @@ -330,7 +330,7 @@ describe('initNavigation()', () => {
},
"href": "/app/discover",
"id": "discover",
"isElasticInternalLink": false,
"isExternalLink": false,
"onClick": undefined,
"path": "rootNav:analytics.discover",
"sideNavStatus": "visible",
Expand All @@ -349,7 +349,7 @@ describe('initNavigation()', () => {
},
"href": "/app/dashboards",
"id": "dashboards",
"isElasticInternalLink": false,
"isExternalLink": false,
"onClick": undefined,
"path": "rootNav:analytics.dashboards",
"sideNavStatus": "visible",
Expand All @@ -368,7 +368,7 @@ describe('initNavigation()', () => {
},
"href": "/app/visualize",
"id": "visualize",
"isElasticInternalLink": false,
"isExternalLink": false,
"onClick": undefined,
"path": "rootNav:analytics.visualize",
"sideNavStatus": "visible",
Expand All @@ -379,7 +379,7 @@ describe('initNavigation()', () => {
"href": undefined,
"icon": "stats",
"id": "rootNav:analytics",
"isElasticInternalLink": false,
"isExternalLink": false,
"onClick": undefined,
"path": "rootNav:analytics",
"renderAs": "accordion",
Expand Down Expand Up @@ -457,7 +457,7 @@ describe('initNavigation()', () => {
deepLink: undefined,
href: 'https://cloud.elastic.co/userAndRoles',
id: 'node-0',
isElasticInternalLink: true,
isExternalLink: true,
path: 'group1.node-0',
sideNavStatus: 'visible',
title: 'Users and roles',
Expand All @@ -468,7 +468,7 @@ describe('initNavigation()', () => {
deepLink: undefined,
href: 'https://cloud.elastic.co/performance',
id: 'node-1',
isElasticInternalLink: true,
isExternalLink: true,
path: 'group1.node-1',
sideNavStatus: 'visible',
title: 'Performance',
Expand All @@ -479,7 +479,7 @@ describe('initNavigation()', () => {
deepLink: undefined,
href: 'https://cloud.elastic.co/billing',
id: 'node-2',
isElasticInternalLink: true,
isExternalLink: true,
path: 'group1.node-2',
sideNavStatus: 'visible',
title: 'Billing and subscription',
Expand All @@ -490,7 +490,7 @@ describe('initNavigation()', () => {
deepLink: undefined,
href: 'https://cloud.elastic.co/deployment',
id: 'node-3',
isElasticInternalLink: true,
isExternalLink: true,
path: 'group1.node-3',
sideNavStatus: 'visible',
title: 'Project',
Expand Down Expand Up @@ -804,15 +804,15 @@ describe('getActiveNodes$()', () => {
id: 'root',
title: 'Root',
path: 'root',
isElasticInternalLink: false,
isExternalLink: false,
sideNavStatus: 'visible',
type: 'navGroup',
},
{
id: 'item1',
title: 'ITEM1',
path: 'root.item1',
isElasticInternalLink: false,
isExternalLink: false,
sideNavStatus: 'visible',
href: '/app/item1',
deepLink: {
Expand Down Expand Up @@ -861,15 +861,15 @@ describe('getActiveNodes$()', () => {
id: 'root',
title: 'Root',
path: 'root',
isElasticInternalLink: false,
isExternalLink: false,
sideNavStatus: 'visible',
type: 'navGroup',
},
{
id: 'item1',
title: 'ITEM1',
path: 'root.item1',
isElasticInternalLink: false,
isExternalLink: false,
sideNavStatus: 'visible',
href: '/app/item1',
deepLink: {
Expand Down
6 changes: 3 additions & 3 deletions src/core/packages/chrome/browser-internal/src/project_navigation/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,8 +321,8 @@ const initNavNode = <

const id = getNavigationNodeId(node, () => `node-${index}`) as Id;
const title = getTitleForNode(node, { deepLink, cloudLinks });
const isElasticInternalLink = cloudLink != null;
const href = isElasticInternalLink ? cloudLinks[cloudLink]?.href : node.href;
const isExternalLink = cloudLink != null;
const href = isExternalLink ? cloudLinks[cloudLink]?.href : node.href;
const path = parentNodePath ? `${parentNodePath}.${id}` : id;

if (href && !isAbsoluteLink(href) && !onClick) {
Expand All @@ -337,7 +337,7 @@ const initNavNode = <
path,
title,
deepLink,
isElasticInternalLink,
isExternalLink,
sideNavStatus,
};

Expand Down
2 changes: 1 addition & 1 deletion src/core/packages/chrome/browser/src/project_navigation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,7 @@ export interface ChromeProjectNavigationNode extends NodeDefinitionBase {
/**
* Flag to indicate if the node is an "external" cloud link
*/
isElasticInternalLink?: boolean;
isExternalLink?: boolean;
}

export type PanelSelectedNode = Pick<
Expand Down
9 changes: 5 additions & 4 deletions ...m/packages/shared/shared-ux/chrome/navigation/src/ui/components/navigation_section_ui.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,6 @@ const serializeNavNode = (
const serialized: ChromeProjectNavigationNode = {
...navNode,
};

serialized.renderAs = getRenderAs(serialized, { isSideNavCollapsed });
serialized.spaceBefore = getSpaceBefore(serialized, {
isSideNavCollapsed,
Expand Down Expand Up @@ -257,7 +256,7 @@ const getEuiProps = (
// if it is the highest match in the URL, not if one of its children is also active.
const onlyIfHighestMatch = isAccordion && !isCollapsible;
const isActive = isActiveFromUrl(navNode.path, activeNodes, onlyIfHighestMatch);
const isExternal = Boolean(href) && !navNode.isElasticInternalLink && isAbsoluteLink(href!);
const isExternal = Boolean(href) && navNode.isExternalLink && isAbsoluteLink(href!);
const isAccordionExpanded = !getIsCollapsed(path);

let isSelected = isActive;
Expand Down Expand Up @@ -386,7 +385,7 @@ function nodeToEuiCollapsibleNavProps(
_navNode,
deps
);
const { id, path, href, renderAs, isCollapsible, spaceBefore } = navNode;
const { id, path, href, renderAs, isCollapsible, spaceBefore, isExternalLink } = navNode;

if (navNode.renderItem) {
// Leave the rendering to the consumer
Expand Down Expand Up @@ -427,7 +426,9 @@ function nodeToEuiCollapsibleNavProps(
// Render as an accordion or a link (handled by EUI) depending if
// "items" is undefined or not. If it is undefined --> a link, otherwise an
// accordion is rendered.
...(subItems ? { items: subItems, isCollapsible } : { href, linkProps }),
...(subItems
? { items: subItems, isCollapsible }
: { href, ...linkProps, external: isExternalLink }),
},
];

Expand Down
7 changes: 6 additions & 1 deletion ...rm/packages/shared/shared-ux/chrome/navigation/src/ui/components/panel/panel_nav_item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ interface Props {
export const PanelNavItem: FC<Props> = ({ item }) => {
const { navigateToUrl } = useServices();
const { close: closePanel } = usePanel();
const { id, icon, deepLink, openInNewTab, renderItem } = item;
const { id, icon, deepLink, openInNewTab, isExternalLink, renderItem } = item;

const href = deepLink?.url ?? item.href;
const { euiTheme } = useEuiTheme();

Expand Down Expand Up @@ -52,13 +53,17 @@ export const PanelNavItem: FC<Props> = ({ item }) => {
&.sideNavPanelLink:hover {
background-color: ${transparentize(euiTheme.colors.lightShade, 0.5)};
}
& svg[class*='EuiExternalLinkIcon'] {
margin-left: auto;
}
`
)}
size="s"
data-test-subj={`panelNavItem panelNavItem-id-${item.id}`}
href={href}
iconType={icon}
onClick={onClick}
external={isExternalLink}
target={openInNewTab ? '_blank' : undefined}
/>
);
Expand Down
3 changes: 3 additions & 0 deletions src/platform/packages/shared/shared-ux/chrome/navigation/src/ui/navigation.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,7 @@ const generalLayoutNavTree: NavigationTreeDefinitionUI = {
title: 'Item 01',
href: '/app/kibana',
icon: 'iInCircle',
isExternalLink: true,
},
{
id: 'item02',
Expand Down Expand Up @@ -203,6 +204,7 @@ const generalLayoutNavTree: NavigationTreeDefinitionUI = {
title: 'Item 17',
href: '/app/kibana',
icon: 'iInCircle',
isExternalLink: true,
},
{
id: 'sub2',
Expand Down Expand Up @@ -403,6 +405,7 @@ const generalLayoutNavTree: NavigationTreeDefinitionUI = {
title: 'Item-Beta',
href: '/app/kibana',
withBadge: true,
isExternalLink: true,
},
{
id: 'item-labs',
Expand Down