Project

General

Profile

« Previous | Next » 

Revision 32cedde5

Added by Karolína Małyjurková 4 months ago

Fixes #37067 - closing parent nav should close child nav

View differences:

webpack/assets/javascripts/react_app/components/Layout/LayoutSelectors.js
id: `menu_item_${snakeCase(child.name)}`,
title: child.title,
isDivider: child.type === 'divider',
className:
child.title === currentLocation || child.title === currentOrganization
? 'mobile-active'
: '',
href: child.url,
onClick: child.onClick || null,
});
webpack/assets/javascripts/react_app/components/Layout/Navigation.js
} from '@patternfly/react-core';
import { getCurrentPath } from './LayoutHelper';
import { NavigationSearch } from './NavigationSearch';
import {
useForemanOrganization,
useForemanLocation,
} from '../../Root/Context/ForemanContext';
const titleWithIcon = (title, iconClass) => (
<div>
......
});
});
const currentLocation = useForemanLocation()?.title;
const currentOrganization = useForemanOrganization()?.title;
const groupedItems = useMemo(
() =>
items.map(({ subItems, ...rest }) => {
items.map(({ className, subItems, ...rest }) => {
const groups = [];
let currIndex = 0;
if (subItems.length) {
......
groups.push({ title: sub.title, groupItems: [] });
currIndex++;
} else {
const isCurrentLocation =
className.includes('location-menu') &&
(sub.title === currentLocation ||
(currentLocation === undefined &&
sub.id === 'menu_item_any_location'));
const isCurrentOrganization =
className.includes('organization-menu') &&
(sub.title === currentOrganization ||
(currentOrganization === undefined &&
sub.id === 'menu_item_any_organization'));
groups[currIndex].groupItems.push({
...sub,
isActive: currentPath === sub.href?.split('?')[0],
isActive:
(currentPath && currentPath === sub.href?.split('?')[0]) ||
isCurrentLocation ||
isCurrentOrganization,
});
}
});
}
return { ...rest, groups };
return { ...rest, groups, className };
}),
// eslint-disable-next-line react-hooks/exhaustive-deps
[items, currentPath]
[items, currentPath, currentLocation, currentOrganization]
);
const [currentExpanded, setCurrentExpanded] = useState(
webpack/assets/javascripts/react_app/components/Layout/__tests__/__snapshots__/LayoutSelectors.test.js.snap
"iconClass": "fa fa-tachometer",
"subItems": Array [
Object {
"className": "mobile-active",
"href": "/",
"id": "menu_item_dashboard",
"isDivider": false,
......
"title": undefined,
},
Object {
"className": "mobile-active",
"href": "/fact_values",
"id": "menu_item_facts",
"isDivider": false,
......
"title": undefined,
},
Object {
"className": "mobile-active",
"href": "/audits",
"id": "menu_item_audits",
"isDivider": false,
......
"title": undefined,
},
Object {
"className": "mobile-active",
"href": undefined,
"id": "menu_item_reports",
"isDivider": true,
......
"title": undefined,
},
Object {
"className": "mobile-active",
"href": "/config_reports?search=eventful+%3D+true",
"id": "menu_item_config_management",
"isDivider": false,
......
"title": undefined,
},
Object {
"className": "mobile-active",
"href": "/templates/report_templates",
"id": "menu_item_report_templates",
"isDivider": false,
......
"iconClass": "fa fa-server",
"subItems": Array [
Object {
"className": "mobile-active",
"href": "/hosts",
"id": "menu_item_all_hosts",
"isDivider": false,
......
"title": undefined,
},
Object {
"className": "mobile-active",
"href": "/hosts/new",
"id": "menu_item_create_host",
"isDivider": false,
......
"title": undefined,
},
Object {
"className": "mobile-active",
"href": undefined,
"id": "menu_item_provisioning_setup",
"isDivider": true,
......
"title": undefined,
},
Object {
"className": "mobile-active",
"href": "/architectures",
"id": "menu_item_architectures",
"isDivider": false,
......
"iconClass": "fa fa-wrench",
"subItems": Array [
Object {
"className": "mobile-active",
"href": "/hostgroups",
"id": "menu_item_host_groups",
"isDivider": false,
......
"title": undefined,
},
Object {
"className": "mobile-active",
"href": "/common_parameters",
"id": "menu_item_global_parameters",
"isDivider": false,

Also available in: Unified diff