fix routes with breadcrumb issues:

team roles title crumb missing
various inventory crums missing
make it so inventories and templates don't get rid of data needed to generate the crumb config
This commit is contained in:
John Mitchell 2021-01-19 11:51:10 -05:00
parent a0ded889f9
commit 7a3002f218
3 changed files with 79 additions and 38 deletions

View File

@ -1,4 +1,4 @@
import React, { useState, useCallback } from 'react';
import React, { useState, useCallback, useRef } from 'react';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { Route, Switch } from 'react-router-dom';
@ -12,14 +12,31 @@ import InventoryAdd from './InventoryAdd';
import SmartInventoryAdd from './SmartInventoryAdd';
function Inventories({ i18n }) {
const [breadcrumbConfig, setBreadcrumbConfig] = useState({
const initScreenHeader = useRef({
'/inventories': i18n._(t`Inventories`),
'/inventories/inventory/add': i18n._(t`Create new inventory`),
'/inventories/smart_inventory/add': i18n._(t`Create new smart inventory`),
});
const buildBreadcrumbConfig = useCallback(
(inventory, nested, schedule) => {
const [breadcrumbConfig, setScreenHeader] = useState(
initScreenHeader.current
);
const [inventory, setInventory] = useState();
const [nestedObject, setNestedGroup] = useState();
const [schedule, setSchedule] = useState();
const setBreadcrumbConfig = useCallback(
(passedInventory, passedNestedObject, passedSchedule) => {
if (passedInventory && passedInventory.id !== inventory?.id) {
setInventory(passedInventory);
}
if (passedNestedObject && passedNestedObject.id !== nestedObject?.id) {
setNestedGroup(passedNestedObject);
}
if (passedSchedule && passedSchedule.id !== schedule?.id) {
setSchedule(passedSchedule);
}
if (!inventory) {
return;
}
@ -32,13 +49,8 @@ function Inventories({ i18n }) {
const inventoryGroupsPath = `${inventoryPath}/groups`;
const inventorySourcesPath = `${inventoryPath}/sources`;
setBreadcrumbConfig({
'/inventories': i18n._(t`Inventories`),
'/inventories/inventory/add': i18n._(t`Create new inventory`),
'/inventories/smart_inventory/add': i18n._(
t`Create new smart inventory`
),
setScreenHeader({
...initScreenHeader.current,
[inventoryPath]: `${inventory.name}`,
[`${inventoryPath}/access`]: i18n._(t`Access`),
[`${inventoryPath}/completed_jobs`]: i18n._(t`Completed jobs`),
@ -47,50 +59,66 @@ function Inventories({ i18n }) {
[inventoryHostsPath]: i18n._(t`Hosts`),
[`${inventoryHostsPath}/add`]: i18n._(t`Create new host`),
[`${inventoryHostsPath}/${nested?.id}`]: `${nested?.name}`,
[`${inventoryHostsPath}/${nested?.id}/edit`]: i18n._(t`Edit details`),
[`${inventoryHostsPath}/${nested?.id}/details`]: i18n._(
[`${inventoryHostsPath}/${nestedObject?.id}`]: `${nestedObject?.name}`,
[`${inventoryHostsPath}/${nestedObject?.id}/edit`]: i18n._(
t`Edit details`
),
[`${inventoryHostsPath}/${nestedObject?.id}/details`]: i18n._(
t`Host details`
),
[`${inventoryHostsPath}/${nested?.id}/completed_jobs`]: i18n._(
[`${inventoryHostsPath}/${nestedObject?.id}/completed_jobs`]: i18n._(
t`Completed jobs`
),
[`${inventoryHostsPath}/${nested?.id}/facts`]: i18n._(t`Facts`),
[`${inventoryHostsPath}/${nested?.id}/groups`]: i18n._(t`Groups`),
[`${inventoryHostsPath}/${nestedObject?.id}/facts`]: i18n._(t`Facts`),
[`${inventoryHostsPath}/${nestedObject?.id}/groups`]: i18n._(t`Groups`),
[inventoryGroupsPath]: i18n._(t`Groups`),
[`${inventoryGroupsPath}/add`]: i18n._(t`Create new group`),
[`${inventoryGroupsPath}/${nested?.id}`]: `${nested?.name}`,
[`${inventoryGroupsPath}/${nested?.id}/edit`]: i18n._(t`Edit details`),
[`${inventoryGroupsPath}/${nested?.id}/details`]: i18n._(
[`${inventoryGroupsPath}/${nestedObject?.id}`]: `${nestedObject?.name}`,
[`${inventoryGroupsPath}/${nestedObject?.id}/edit`]: i18n._(
t`Edit details`
),
[`${inventoryGroupsPath}/${nestedObject?.id}/details`]: i18n._(
t`Group details`
),
[`${inventoryGroupsPath}/${nested?.id}/nested_hosts`]: i18n._(t`Hosts`),
[`${inventoryGroupsPath}/${nested?.id}/nested_hosts/add`]: i18n._(
[`${inventoryGroupsPath}/${nestedObject?.id}/nested_hosts`]: i18n._(
t`Hosts`
),
[`${inventoryGroupsPath}/${nestedObject?.id}/nested_hosts/add`]: i18n._(
t`Create new host`
),
[`${inventoryGroupsPath}/${nested?.id}/nested_groups`]: i18n._(
t`Groups`
[`${inventoryGroupsPath}/${nestedObject?.id}/nested_groups`]: i18n._(
t`Related Groups`
),
[`${inventoryGroupsPath}/${nested?.id}/nested_groups/add`]: i18n._(
[`${inventoryGroupsPath}/${nestedObject?.id}/nested_groups/add`]: i18n._(
t`Create new group`
),
[`${inventorySourcesPath}`]: i18n._(t`Sources`),
[`${inventorySourcesPath}/add`]: i18n._(t`Create new source`),
[`${inventorySourcesPath}/${nested?.id}`]: `${nested?.name}`,
[`${inventorySourcesPath}/${nested?.id}/details`]: i18n._(t`Details`),
[`${inventorySourcesPath}/${nested?.id}/edit`]: i18n._(t`Edit details`),
[`${inventorySourcesPath}/${nested?.id}/schedules`]: i18n._(
[`${inventorySourcesPath}/${nestedObject?.id}`]: `${nestedObject?.name}`,
[`${inventorySourcesPath}/${nestedObject?.id}/details`]: i18n._(
t`Details`
),
[`${inventorySourcesPath}/${nestedObject?.id}/edit`]: i18n._(
t`Edit details`
),
[`${inventorySourcesPath}/${nestedObject?.id}/schedules`]: i18n._(
t`Schedules`
),
[`${inventorySourcesPath}/${nested?.id}/schedules/${schedule?.id}`]: `${schedule?.name}`,
[`${inventorySourcesPath}/${nested?.id}/schedules/${schedule?.id}/details`]: i18n._(
[`${inventorySourcesPath}/${nestedObject?.id}/schedules/${schedule?.id}`]: `${schedule?.name}`,
[`${inventorySourcesPath}/${nestedObject?.id}/schedules/add`]: i18n._(
t`Create New Schedule`
),
[`${inventorySourcesPath}/${nestedObject?.id}/schedules/${schedule?.id}/details`]: i18n._(
t`Schedule details`
),
[`${inventorySourcesPath}/${nestedObject?.id}/notifications`]: i18n._(
t`Notifcations`
),
});
},
[i18n]
[i18n, inventory, nestedObject, schedule]
);
return (
@ -109,12 +137,12 @@ function Inventories({ i18n }) {
<Route path="/inventories/inventory/:id">
<Config>
{({ me }) => (
<Inventory setBreadcrumb={buildBreadcrumbConfig} me={me || {}} />
<Inventory setBreadcrumb={setBreadcrumbConfig} me={me || {}} />
)}
</Config>
</Route>
<Route path="/inventories/smart_inventory/:id">
<SmartInventory setBreadcrumb={buildBreadcrumbConfig} />
<SmartInventory setBreadcrumb={setBreadcrumbConfig} />
</Route>
<Route path="/inventories">
<InventoryList />

View File

@ -29,6 +29,7 @@ function Teams({ i18n }) {
[`/teams/${team.id}/details`]: i18n._(t`Details`),
[`/teams/${team.id}/users`]: i18n._(t`Users`),
[`/teams/${team.id}/access`]: i18n._(t`Access`),
[`/teams/${team.id}/roles`]: i18n._(t`Roles`),
});
},
[i18n]

View File

@ -22,8 +22,18 @@ function Templates({ i18n }) {
const [breadcrumbConfig, setScreenHeader] = useState(
initScreenHeader.current
);
const [schedule, setSchedule] = useState();
const [template, setTemplate] = useState();
const setBreadcrumbConfig = useCallback(
(template, schedule) => {
(passedTemplate, passedSchedule) => {
if (passedTemplate && passedTemplate.id !== template?.id) {
setTemplate(passedTemplate);
}
if (passedSchedule && passedSchedule.id !== schedule?.id) {
setSchedule(passedSchedule);
}
if (!template) return;
const templatePath = `/templates/${template.type}/${template.id}`;
const schedulesPath = `${templatePath}/schedules`;
@ -42,11 +52,13 @@ function Templates({ i18n }) {
[schedulesPath]: i18n._(t`Schedules`),
[`${schedulesPath}/add`]: i18n._(t`Create New Schedule`),
[`${schedulesPath}/${schedule?.id}`]: `${schedule?.name}`,
[`${schedulesPath}/details`]: i18n._(t`Schedule Details`),
[`${schedulesPath}/edit`]: i18n._(t`Edit Details`),
[`${schedulesPath}/${schedule?.id}/details`]: i18n._(
t`Schedule Details`
),
[`${schedulesPath}/${schedule?.id}/edit`]: i18n._(t`Edit Schedule`),
});
},
[i18n]
[i18n, template, schedule]
);
return (