From 05a0965fa9b000ee31e1d96ec6bb63e49706a3ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= Date: Fri, 14 Mar 2025 10:46:26 +0400 Subject: [PATCH] Fix breadcrumb over fetching MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Émile Ré --- apps/console/src/layouts/ConsoleLayout.tsx | 228 +++++++----------- ...outBreadcrumbCreateControlQuery.graphql.ts | 124 ---------- ...tBreadcrumbUpdateFrameworkQuery.graphql.ts | 127 ---------- ...youtBreadcrumbUpdatePolicyQuery.graphql.ts | 127 ---------- 4 files changed, 86 insertions(+), 520 deletions(-) delete mode 100644 apps/console/src/layouts/__generated__/ConsoleLayoutBreadcrumbCreateControlQuery.graphql.ts delete mode 100644 apps/console/src/layouts/__generated__/ConsoleLayoutBreadcrumbUpdateFrameworkQuery.graphql.ts delete mode 100644 apps/console/src/layouts/__generated__/ConsoleLayoutBreadcrumbUpdatePolicyQuery.graphql.ts diff --git a/apps/console/src/layouts/ConsoleLayout.tsx b/apps/console/src/layouts/ConsoleLayout.tsx index e0fb91ddb..1e62a969f 100644 --- a/apps/console/src/layouts/ConsoleLayout.tsx +++ b/apps/console/src/layouts/ConsoleLayout.tsx @@ -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( - graphql` - query ConsoleLayoutBreadcrumbUpdateFrameworkQuery($frameworkId: ID!) { - framework: node(id: $frameworkId) { - id - ... on Framework { - name - } - } - } - `, - { frameworkId: frameworkId! }, - { fetchPolicy: "store-or-network" } - ); - return ( <> - - - - - {data.framework?.name} - - - Update - ); } @@ -324,32 +290,8 @@ function BreadcrumbControlOverview() { } function BreadcrumbCreateControl() { - const { organizationId, frameworkId } = useParams(); - const data = useLazyLoadQuery( - graphql` - query ConsoleLayoutBreadcrumbCreateControlQuery($frameworkId: ID!) { - framework: node(id: $frameworkId) { - ... on Framework { - name - } - } - } - `, - { frameworkId: frameworkId! } - ); - return ( <> - - - - - {data.framework?.name} - - - Create Control @@ -417,41 +359,12 @@ function BreadcrumbPolicyOverview() { } function BreadcrumbUpdatePolicy() { - const { organizationId, policyId } = useParams(); - const data = useLazyLoadQuery( - graphql` - query ConsoleLayoutBreadcrumbUpdatePolicyQuery($policyId: ID!) { - policy: node(id: $policyId) { - id - ... on Policy { - name - } - } - } - `, - { policyId: policyId! }, - { fetchPolicy: "store-or-network" } - ); - return ( <> - - - - - {data.policy?.name} - - - Update - ); } @@ -468,62 +381,93 @@ export default function ConsoleLayout() {
- - {showBreadcrumb && ( - - } - > - } - > + + + {showBreadcrumb && ( + + } - /> - } - /> + path="frameworks" + element={} + > + + + + } + > + } + /> + + + + } + /> + } + /> + + } + /> + + }> + + + + } + /> + } + /> + + }> + + + + } + /> + + }> + + + + } + > + } + /> + + } + /> + - } - /> - } - /> - - }> - } - /> - } /> - - }> - } - /> - - }> - } - /> - } - /> - } /> - - - )} - + + )} + +
diff --git a/apps/console/src/layouts/__generated__/ConsoleLayoutBreadcrumbCreateControlQuery.graphql.ts b/apps/console/src/layouts/__generated__/ConsoleLayoutBreadcrumbCreateControlQuery.graphql.ts deleted file mode 100644 index 57e664e1f..000000000 --- a/apps/console/src/layouts/__generated__/ConsoleLayoutBreadcrumbCreateControlQuery.graphql.ts +++ /dev/null @@ -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; diff --git a/apps/console/src/layouts/__generated__/ConsoleLayoutBreadcrumbUpdateFrameworkQuery.graphql.ts b/apps/console/src/layouts/__generated__/ConsoleLayoutBreadcrumbUpdateFrameworkQuery.graphql.ts deleted file mode 100644 index 1baa9a7b2..000000000 --- a/apps/console/src/layouts/__generated__/ConsoleLayoutBreadcrumbUpdateFrameworkQuery.graphql.ts +++ /dev/null @@ -1,127 +0,0 @@ -/** - * @generated SignedSource<> - * @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; diff --git a/apps/console/src/layouts/__generated__/ConsoleLayoutBreadcrumbUpdatePolicyQuery.graphql.ts b/apps/console/src/layouts/__generated__/ConsoleLayoutBreadcrumbUpdatePolicyQuery.graphql.ts deleted file mode 100644 index c3ad0009a..000000000 --- a/apps/console/src/layouts/__generated__/ConsoleLayoutBreadcrumbUpdatePolicyQuery.graphql.ts +++ /dev/null @@ -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;