Fix breadcrumb over fetching

Signed-off-by: Émile Ré <nemile.re@gmail.com>
This commit is contained in:
Émile Ré
2025-03-14 10:46:26 +04:00
parent 279429c8dc
commit 05a0965fa9
4 changed files with 86 additions and 520 deletions

View File

@@ -1,6 +1,6 @@
import { Link, Outlet, Route, Routes, useParams } from "react-router";
import { AppSidebar } from "@/components/AppSidebar";
import React from "react";
import React, { Suspense } from "react";
import {
Breadcrumb,
BreadcrumbItem,
@@ -22,10 +22,7 @@ import { ConsoleLayoutBreadcrumbPeopleOverviewQuery } from "./__generated__/Cons
import { ConsoleLayoutBreadcrumbVendorOverviewQuery } from "./__generated__/ConsoleLayoutBreadcrumbVendorOverviewQuery.graphql";
import { ConsoleLayoutBreadcrumbControlOverviewQuery } from "./__generated__/ConsoleLayoutBreadcrumbControlOverviewQuery.graphql";
import { ConsoleLayoutOrganizationQuery } from "./__generated__/ConsoleLayoutOrganizationQuery.graphql";
import { ConsoleLayoutBreadcrumbCreateControlQuery } from "./__generated__/ConsoleLayoutBreadcrumbCreateControlQuery.graphql";
import { ConsoleLayoutBreadcrumbUpdateFrameworkQuery } from "./__generated__/ConsoleLayoutBreadcrumbUpdateFrameworkQuery.graphql";
import { ConsoleLayoutBreadcrumbPolicyOverviewQuery } from "./__generated__/ConsoleLayoutBreadcrumbPolicyOverviewQuery.graphql";
import { ConsoleLayoutBreadcrumbUpdatePolicyQuery } from "./__generated__/ConsoleLayoutBreadcrumbUpdatePolicyQuery.graphql";
function BreadcrumbHome({ children }: { children: React.ReactNode }) {
const { organizationId } = useParams();
@@ -141,43 +138,12 @@ function BreadcrumbFrameworkOverview() {
}
function BreadcrumbUpdateFramework() {
const { organizationId, frameworkId } = useParams();
const data = useLazyLoadQuery<ConsoleLayoutBreadcrumbUpdateFrameworkQuery>(
graphql`
query ConsoleLayoutBreadcrumbUpdateFrameworkQuery($frameworkId: ID!) {
framework: node(id: $frameworkId) {
id
... on Framework {
name
}
}
}
`,
{ frameworkId: frameworkId! },
{ fetchPolicy: "store-or-network" }
);
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink
asChild
className="max-w-[160px] truncate"
aria-label={data.framework?.name}
>
<Link
to={`/organizations/${organizationId}/frameworks/${frameworkId}`}
>
{data.framework?.name}
</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Update</BreadcrumbPage>
</BreadcrumbItem>
<Outlet />
</>
);
}
@@ -324,32 +290,8 @@ function BreadcrumbControlOverview() {
}
function BreadcrumbCreateControl() {
const { organizationId, frameworkId } = useParams();
const data = useLazyLoadQuery<ConsoleLayoutBreadcrumbCreateControlQuery>(
graphql`
query ConsoleLayoutBreadcrumbCreateControlQuery($frameworkId: ID!) {
framework: node(id: $frameworkId) {
... on Framework {
name
}
}
}
`,
{ frameworkId: frameworkId! }
);
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link
to={`/organizations/${organizationId}/frameworks/${frameworkId}`}
>
{data.framework?.name}
</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Create Control</BreadcrumbPage>
@@ -417,41 +359,12 @@ function BreadcrumbPolicyOverview() {
}
function BreadcrumbUpdatePolicy() {
const { organizationId, policyId } = useParams();
const data = useLazyLoadQuery<ConsoleLayoutBreadcrumbUpdatePolicyQuery>(
graphql`
query ConsoleLayoutBreadcrumbUpdatePolicyQuery($policyId: ID!) {
policy: node(id: $policyId) {
id
... on Policy {
name
}
}
}
`,
{ policyId: policyId! },
{ fetchPolicy: "store-or-network" }
);
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink
asChild
className="max-w-[160px] truncate"
aria-label={data.policy?.name}
>
<Link to={`/organizations/${organizationId}/policies/${policyId}`}>
{data.policy?.name}
</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Update</BreadcrumbPage>
</BreadcrumbItem>
<Outlet />
</>
);
}
@@ -468,62 +381,93 @@ export default function ConsoleLayout() {
<div className="flex items-center gap-2 px-4">
<SidebarTrigger className="-ml-1" />
<Separator orientation="vertical" className="mr-2 h-4" />
<BreadcrumbHome>
{showBreadcrumb && (
<Routes>
<Route
path="frameworks"
element={<BreadcrumbFrameworkList />}
>
<Route
path=":frameworkId"
element={<BreadcrumbFrameworkOverview />}
>
<Suspense>
<BreadcrumbHome>
{showBreadcrumb && (
<Routes>
<Route path="organizations/:organizationsId">
<Route
path="controls/create"
element={<BreadcrumbCreateControl />}
/>
<Route
path="controls/:controlId"
element={<BreadcrumbControlOverview />}
/>
path="frameworks"
element={<BreadcrumbFrameworkList />}
>
<Route
path=":frameworkId"
element={
<Suspense>
<BreadcrumbFrameworkOverview />
</Suspense>
}
>
<Route
path="controls/create"
element={<BreadcrumbCreateControl />}
/>
<Route
path="controls/:controlId"
element={
<Suspense>
<BreadcrumbControlOverview />
</Suspense>
}
/>
<Route
path="update"
element={<BreadcrumbUpdateFramework />}
/>
</Route>
<Route
path="create"
element={<BreadcrumbCreateFramework />}
/>
</Route>
<Route path="peoples" element={<BreadcrumbPeopleList />}>
<Route
path=":peopleId"
element={
<Suspense>
<BreadcrumbPeopleOverview />
</Suspense>
}
/>
<Route
path="create"
element={<BreadcrumbCreatePeople />}
/>
</Route>
<Route path="vendors" element={<BreadcrumbVendorList />}>
<Route
path=":vendorId"
element={
<Suspense>
<BreadcrumbVendorOverview />
</Suspense>
}
/>
</Route>
<Route path="policies" element={<BreadcrumbPolicyList />}>
<Route
path=":policyId"
element={
<Suspense>
<BreadcrumbPolicyOverview />
</Suspense>
}
>
<Route
path="update"
element={<BreadcrumbUpdatePolicy />}
/>
</Route>
<Route
path="create"
element={<BreadcrumbCreatePolicy />}
/>
</Route>
</Route>
<Route
path=":frameworkId/update"
element={<BreadcrumbUpdateFramework />}
/>
<Route
path="create"
element={<BreadcrumbCreateFramework />}
/>
</Route>
<Route path="peoples" element={<BreadcrumbPeopleList />}>
<Route
path=":peopleId"
element={<BreadcrumbPeopleOverview />}
/>
<Route path="create" element={<BreadcrumbCreatePeople />} />
</Route>
<Route path="vendors" element={<BreadcrumbVendorList />}>
<Route
path=":vendorId"
element={<BreadcrumbVendorOverview />}
/>
</Route>
<Route path="policies" element={<BreadcrumbPolicyList />}>
<Route
path=":policyId"
element={<BreadcrumbPolicyOverview />}
/>
<Route
path=":policyId/update"
element={<BreadcrumbUpdatePolicy />}
/>
<Route path="create" element={<BreadcrumbCreatePolicy />} />
</Route>
</Routes>
)}
</BreadcrumbHome>
</Routes>
)}
</BreadcrumbHome>
</Suspense>
</div>
</header>
<div className="flex flex-1 flex-col gap-4 p-4 pt-0">

View File

@@ -1,124 +0,0 @@
/**
* @generated SignedSource<<051137c0676ed5fd6b8807a44b9cb2a4>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type ConsoleLayoutBreadcrumbCreateControlQuery$variables = {
frameworkId: string;
};
export type ConsoleLayoutBreadcrumbCreateControlQuery$data = {
readonly framework: {
readonly name?: string;
};
};
export type ConsoleLayoutBreadcrumbCreateControlQuery = {
response: ConsoleLayoutBreadcrumbCreateControlQuery$data;
variables: ConsoleLayoutBreadcrumbCreateControlQuery$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "frameworkId"
}
],
v1 = [
{
"kind": "Variable",
"name": "id",
"variableName": "frameworkId"
}
],
v2 = {
"kind": "InlineFragment",
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
}
],
"type": "Framework",
"abstractKey": null
};
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "ConsoleLayoutBreadcrumbCreateControlQuery",
"selections": [
{
"alias": "framework",
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/)
],
"storageKey": null
}
],
"type": "Query",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "ConsoleLayoutBreadcrumbCreateControlQuery",
"selections": [
{
"alias": "framework",
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
(v2/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "a86ec305f24f6a83d549a31e1469a89c",
"id": null,
"metadata": {},
"name": "ConsoleLayoutBreadcrumbCreateControlQuery",
"operationKind": "query",
"text": "query ConsoleLayoutBreadcrumbCreateControlQuery(\n $frameworkId: ID!\n) {\n framework: node(id: $frameworkId) {\n __typename\n ... on Framework {\n name\n }\n id\n }\n}\n"
}
};
})();
(node as any).hash = "5033069853aec310ad544974f7e64b5b";
export default node;

View File

@@ -1,127 +0,0 @@
/**
* @generated SignedSource<<d4b3974723a445d3d352518d6244afd2>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type ConsoleLayoutBreadcrumbUpdateFrameworkQuery$variables = {
frameworkId: string;
};
export type ConsoleLayoutBreadcrumbUpdateFrameworkQuery$data = {
readonly framework: {
readonly id: string;
readonly name?: string;
};
};
export type ConsoleLayoutBreadcrumbUpdateFrameworkQuery = {
response: ConsoleLayoutBreadcrumbUpdateFrameworkQuery$data;
variables: ConsoleLayoutBreadcrumbUpdateFrameworkQuery$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "frameworkId"
}
],
v1 = [
{
"kind": "Variable",
"name": "id",
"variableName": "frameworkId"
}
],
v2 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v3 = {
"kind": "InlineFragment",
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
}
],
"type": "Framework",
"abstractKey": null
};
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "ConsoleLayoutBreadcrumbUpdateFrameworkQuery",
"selections": [
{
"alias": "framework",
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
(v3/*: any*/)
],
"storageKey": null
}
],
"type": "Query",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "ConsoleLayoutBreadcrumbUpdateFrameworkQuery",
"selections": [
{
"alias": "framework",
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
(v2/*: any*/),
(v3/*: any*/)
],
"storageKey": null
}
]
},
"params": {
"cacheID": "194d6a240ee1e2f0ef799e08bc0e44f5",
"id": null,
"metadata": {},
"name": "ConsoleLayoutBreadcrumbUpdateFrameworkQuery",
"operationKind": "query",
"text": "query ConsoleLayoutBreadcrumbUpdateFrameworkQuery(\n $frameworkId: ID!\n) {\n framework: node(id: $frameworkId) {\n __typename\n id\n ... on Framework {\n name\n }\n }\n}\n"
}
};
})();
(node as any).hash = "c6381fa068566e0ec00356b3e6835700";
export default node;

View File

@@ -1,127 +0,0 @@
/**
* @generated SignedSource<<7fd05943b12b7927bddcb4ee8a1cdd76>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type ConsoleLayoutBreadcrumbUpdatePolicyQuery$variables = {
policyId: string;
};
export type ConsoleLayoutBreadcrumbUpdatePolicyQuery$data = {
readonly policy: {
readonly id: string;
readonly name?: string;
};
};
export type ConsoleLayoutBreadcrumbUpdatePolicyQuery = {
response: ConsoleLayoutBreadcrumbUpdatePolicyQuery$data;
variables: ConsoleLayoutBreadcrumbUpdatePolicyQuery$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "policyId"
}
],
v1 = [
{
"kind": "Variable",
"name": "id",
"variableName": "policyId"
}
],
v2 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v3 = {
"kind": "InlineFragment",
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
}
],
"type": "Policy",
"abstractKey": null
};
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "ConsoleLayoutBreadcrumbUpdatePolicyQuery",
"selections": [
{
"alias": "policy",
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
(v3/*: any*/)
],
"storageKey": null
}
],
"type": "Query",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "ConsoleLayoutBreadcrumbUpdatePolicyQuery",
"selections": [
{
"alias": "policy",
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
(v2/*: any*/),
(v3/*: any*/)
],
"storageKey": null
}
]
},
"params": {
"cacheID": "6b895165c1104f2caf67bf4ded9a795d",
"id": null,
"metadata": {},
"name": "ConsoleLayoutBreadcrumbUpdatePolicyQuery",
"operationKind": "query",
"text": "query ConsoleLayoutBreadcrumbUpdatePolicyQuery(\n $policyId: ID!\n) {\n policy: node(id: $policyId) {\n __typename\n id\n ... on Policy {\n name\n }\n }\n}\n"
}
};
})();
(node as any).hash = "ee8e83ba02f1545ad73fe5d9742136ff";
export default node;