diff --git a/apps/console/src/App.tsx b/apps/console/src/App.tsx index 01375dc31..d24c7a8cf 100644 --- a/apps/console/src/App.tsx +++ b/apps/console/src/App.tsx @@ -123,7 +123,7 @@ function App() { } /> diff --git a/apps/console/src/contexts/BreadcrumbContext.tsx b/apps/console/src/contexts/BreadcrumbContext.tsx deleted file mode 100644 index b99fbb442..000000000 --- a/apps/console/src/contexts/BreadcrumbContext.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React, { createContext, useContext, useState, useCallback } from "react"; - -type BreadcrumbContextType = { - segments: Record; - setBreadcrumbSegment: (path: string, display: string) => void; -}; - -const BreadcrumbContext = createContext( - undefined, -); - -export function BreadcrumbProvider({ - children, -}: { - children: React.ReactNode; -}) { - const [segments, setSegments] = useState>({}); - - const setBreadcrumbSegment = useCallback((path: string, display: string) => { - setSegments((prev) => ({ - ...prev, - [path]: display, - })); - }, []); - - return ( - - {children} - - ); -} - -export function useBreadcrumb() { - const context = useContext(BreadcrumbContext); - if (context === undefined) { - throw new Error("useBreadcrumb must be used within a BreadcrumbProvider"); - } - return context; -} diff --git a/apps/console/src/layouts/ConsoleLayout.tsx b/apps/console/src/layouts/ConsoleLayout.tsx index f60a763f7..e0ed36b1b 100644 --- a/apps/console/src/layouts/ConsoleLayout.tsx +++ b/apps/console/src/layouts/ConsoleLayout.tsx @@ -1,4 +1,11 @@ -import { Link, Outlet, useLocation } from "react-router"; +import { + Link, + Outlet, + Route, + Routes, + useLocation, + useParams, +} from "react-router"; import { AppSidebar } from "@/components/AppSidebar"; import React from "react"; import { @@ -15,33 +22,15 @@ import { SidebarProvider, SidebarTrigger, } from "@/components/ui/sidebar"; -import { - BreadcrumbProvider, - useBreadcrumb, -} from "@/contexts/BreadcrumbContext"; import { Toaster } from "@/components/ui/toaster"; +import { graphql } from "react-relay"; +import { useLazyLoadQuery } from "react-relay"; +import { ConsoleLayoutBreadcrumbFrameworkOverviewQuery } from "./__generated__/ConsoleLayoutBreadcrumbFrameworkOverviewQuery.graphql"; +import { ConsoleLayoutBreadcrumbPeopleOverviewQuery } from "./__generated__/ConsoleLayoutBreadcrumbPeopleOverviewQuery.graphql"; +import { ConsoleLayoutBreadcrumbVendorOverviewQuery } from "./__generated__/ConsoleLayoutBreadcrumbVendorOverviewQuery.graphql"; +import { ConsoleLayoutBreadcrumbControlOverviewQuery } from "./__generated__/ConsoleLayoutBreadcrumbControlOverviewQuery.graphql"; -function BreadcrumbNavigation() { - const location = useLocation(); - const pathSegments = location.pathname.split("/").filter(Boolean); - const { segments } = useBreadcrumb(); - - const getBreadcrumbText = (segment: string, path: string) => { - // Check if we have a custom segment name - const fullPath = pathSegments - .slice(0, pathSegments.indexOf(segment) + 1) - .join("/"); - - // Look for patterns like 'vendors/:id' in our segments - const patternPath = fullPath.replace(/\/[^/]+$/, "/:id"); - if (segments[patternPath]) { - return segments[patternPath]; - } - - // Default to capitalized segment - return segment.charAt(0).toUpperCase() + segment.slice(1); - }; - +function BreadcrumbHome() { return ( @@ -50,51 +39,238 @@ function BreadcrumbNavigation() { Home - {pathSegments.map((segment, index) => { - const path = `/${pathSegments.slice(0, index + 1).join("/")}`; - const isLast = index === pathSegments.length - 1; - - return ( - - - - {isLast ? ( - - {getBreadcrumbText(segment, path)} - - ) : ( - - {getBreadcrumbText(segment, path)} - - )} - - - ); - })} + ); } -export default function ConsoleLayout() { +function BreadcrumbFrameworkList() { return ( - - - - -
-
- - - -
-
-
- - -
- - - + <> + + + + Frameworks + + + + + ); +} + +function BreadcrumbFrameworkOverview() { + const { frameworkId } = useParams(); + const data = useLazyLoadQuery( + graphql` + query ConsoleLayoutBreadcrumbFrameworkOverviewQuery($frameworkId: ID!) { + framework: node(id: $frameworkId) { + id + ... on Framework { + name + } + } + } + `, + { frameworkId: frameworkId! }, + { fetchPolicy: "store-or-network" }, + ); + + return ( + <> + + + + + {data.framework.name} + + + + + + ); +} + +function BreadcrumbPeopleList() { + return ( + <> + + + + People + + + + + ); +} + +function BreadcrumbPeopleOverview() { + const { peopleId } = useParams(); + const data = useLazyLoadQuery( + graphql` + query ConsoleLayoutBreadcrumbPeopleOverviewQuery($peopleId: ID!) { + people: node(id: $peopleId) { + id + ... on People { + fullName + } + } + } + `, + { peopleId: peopleId! }, + { fetchPolicy: "store-or-network" }, + ); + + return ( + <> + + + + {data.people.fullName} + + + + + ); +} + +function BreadcrumbVendorList() { + return ( + <> + + + + Vendors + + + + + ); +} + +function BreadcrumbVendorOverview() { + const { vendorId } = useParams(); + const data = useLazyLoadQuery( + graphql` + query ConsoleLayoutBreadcrumbVendorOverviewQuery($vendorId: ID!) { + vendor: node(id: $vendorId) { + id + ... on Vendor { + name + } + } + } + `, + { vendorId: vendorId! }, + { fetchPolicy: "store-or-network" }, + ); + + return ( + <> + + + + {data.vendor.name} + + + + ); +} + +function BreadcrumbControlOverview() { + const { frameworkId, controlId } = useParams(); + const data = useLazyLoadQuery( + graphql` + query ConsoleLayoutBreadcrumbControlOverviewQuery( + $frameworkId: ID! + $controlId: ID! + ) { + framework: node(id: $frameworkId) { + id + ... on Framework { + name + } + } + control: node(id: $controlId) { + id + ... on Control { + name + } + } + } + `, + { frameworkId: frameworkId!, controlId: controlId! }, + { fetchPolicy: "store-or-network" }, + ); + + return ( + <> + + + + + {data.framework.name} + + + + + + + + {data.control.name} + + + + + + ); +} + +export default function ConsoleLayout() { + return ( + + + +
+
+ + + + }> + }> + } + /> + } + /> + + }> + } + /> + + }> + } + /> + + + +
+
+
+ + +
+ + ); } diff --git a/apps/console/src/layouts/__generated__/ConsoleLayoutBreadcrumbControlOverviewQuery.graphql.ts b/apps/console/src/layouts/__generated__/ConsoleLayoutBreadcrumbControlOverviewQuery.graphql.ts new file mode 100644 index 000000000..86af99e49 --- /dev/null +++ b/apps/console/src/layouts/__generated__/ConsoleLayoutBreadcrumbControlOverviewQuery.graphql.ts @@ -0,0 +1,127 @@ +/** + * @generated SignedSource<<2369d48ac2f92f14d77f24d397fe7c18>> + * @lightSyntaxTransform + * @nogrep + */ + +/* tslint:disable */ +/* eslint-disable */ +// @ts-nocheck + +import { ConcreteRequest } from 'relay-runtime'; +export type ConsoleLayoutBreadcrumbControlOverviewQuery$variables = { + controlId: string; +}; +export type ConsoleLayoutBreadcrumbControlOverviewQuery$data = { + readonly vendor: { + readonly id: string; + readonly name?: string; + }; +}; +export type ConsoleLayoutBreadcrumbControlOverviewQuery = { + response: ConsoleLayoutBreadcrumbControlOverviewQuery$data; + variables: ConsoleLayoutBreadcrumbControlOverviewQuery$variables; +}; + +const node: ConcreteRequest = (function(){ +var v0 = [ + { + "defaultValue": null, + "kind": "LocalArgument", + "name": "controlId" + } +], +v1 = [ + { + "kind": "Variable", + "name": "id", + "variableName": "controlId" + } +], +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": "Control", + "abstractKey": null +}; +return { + "fragment": { + "argumentDefinitions": (v0/*: any*/), + "kind": "Fragment", + "metadata": null, + "name": "ConsoleLayoutBreadcrumbControlOverviewQuery", + "selections": [ + { + "alias": "vendor", + "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": "ConsoleLayoutBreadcrumbControlOverviewQuery", + "selections": [ + { + "alias": "vendor", + "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": "00384256b541f268704b25cbb9c2cb0a", + "id": null, + "metadata": {}, + "name": "ConsoleLayoutBreadcrumbControlOverviewQuery", + "operationKind": "query", + "text": "query ConsoleLayoutBreadcrumbControlOverviewQuery(\n $controlId: ID!\n) {\n vendor: node(id: $controlId) {\n __typename\n id\n ... on Control {\n name\n }\n }\n}\n" + } +}; +})(); + +(node as any).hash = "cfa3ce6c9e7a6c25f7b147ba61a00b55"; + +export default node; diff --git a/apps/console/src/layouts/__generated__/ConsoleLayoutBreadcrumbFrameworkOverviewQuery.graphql.ts b/apps/console/src/layouts/__generated__/ConsoleLayoutBreadcrumbFrameworkOverviewQuery.graphql.ts new file mode 100644 index 000000000..b892bcd00 --- /dev/null +++ b/apps/console/src/layouts/__generated__/ConsoleLayoutBreadcrumbFrameworkOverviewQuery.graphql.ts @@ -0,0 +1,127 @@ +/** + * @generated SignedSource<> + * @lightSyntaxTransform + * @nogrep + */ + +/* tslint:disable */ +/* eslint-disable */ +// @ts-nocheck + +import { ConcreteRequest } from 'relay-runtime'; +export type ConsoleLayoutBreadcrumbFrameworkOverviewQuery$variables = { + peopleId: string; +}; +export type ConsoleLayoutBreadcrumbFrameworkOverviewQuery$data = { + readonly people: { + readonly fullName?: string; + readonly id: string; + }; +}; +export type ConsoleLayoutBreadcrumbFrameworkOverviewQuery = { + response: ConsoleLayoutBreadcrumbFrameworkOverviewQuery$data; + variables: ConsoleLayoutBreadcrumbFrameworkOverviewQuery$variables; +}; + +const node: ConcreteRequest = (function(){ +var v0 = [ + { + "defaultValue": null, + "kind": "LocalArgument", + "name": "peopleId" + } +], +v1 = [ + { + "kind": "Variable", + "name": "id", + "variableName": "peopleId" + } +], +v2 = { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "id", + "storageKey": null +}, +v3 = { + "kind": "InlineFragment", + "selections": [ + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "fullName", + "storageKey": null + } + ], + "type": "People", + "abstractKey": null +}; +return { + "fragment": { + "argumentDefinitions": (v0/*: any*/), + "kind": "Fragment", + "metadata": null, + "name": "ConsoleLayoutBreadcrumbFrameworkOverviewQuery", + "selections": [ + { + "alias": "people", + "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": "ConsoleLayoutBreadcrumbFrameworkOverviewQuery", + "selections": [ + { + "alias": "people", + "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": "38bda48229b0d45b23dff36b33fa3adb", + "id": null, + "metadata": {}, + "name": "ConsoleLayoutBreadcrumbFrameworkOverviewQuery", + "operationKind": "query", + "text": "query ConsoleLayoutBreadcrumbFrameworkOverviewQuery(\n $peopleId: ID!\n) {\n people: node(id: $peopleId) {\n __typename\n id\n ... on People {\n fullName\n }\n }\n}\n" + } +}; +})(); + +(node as any).hash = "1f4b25d943e1d8a79c3e77936833e998"; + +export default node; diff --git a/apps/console/src/layouts/__generated__/ConsoleLayoutBreadcrumbPeopleOverviewQuery.graphql.ts b/apps/console/src/layouts/__generated__/ConsoleLayoutBreadcrumbPeopleOverviewQuery.graphql.ts new file mode 100644 index 000000000..bdcfb1de3 --- /dev/null +++ b/apps/console/src/layouts/__generated__/ConsoleLayoutBreadcrumbPeopleOverviewQuery.graphql.ts @@ -0,0 +1,127 @@ +/** + * @generated SignedSource<<6f086aeafe55fd91abdf75b5832f76e8>> + * @lightSyntaxTransform + * @nogrep + */ + +/* tslint:disable */ +/* eslint-disable */ +// @ts-nocheck + +import { ConcreteRequest } from 'relay-runtime'; +export type ConsoleLayoutBreadcrumbPeopleOverviewQuery$variables = { + peopleId: string; +}; +export type ConsoleLayoutBreadcrumbPeopleOverviewQuery$data = { + readonly people: { + readonly fullName?: string; + readonly id: string; + }; +}; +export type ConsoleLayoutBreadcrumbPeopleOverviewQuery = { + response: ConsoleLayoutBreadcrumbPeopleOverviewQuery$data; + variables: ConsoleLayoutBreadcrumbPeopleOverviewQuery$variables; +}; + +const node: ConcreteRequest = (function(){ +var v0 = [ + { + "defaultValue": null, + "kind": "LocalArgument", + "name": "peopleId" + } +], +v1 = [ + { + "kind": "Variable", + "name": "id", + "variableName": "peopleId" + } +], +v2 = { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "id", + "storageKey": null +}, +v3 = { + "kind": "InlineFragment", + "selections": [ + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "fullName", + "storageKey": null + } + ], + "type": "People", + "abstractKey": null +}; +return { + "fragment": { + "argumentDefinitions": (v0/*: any*/), + "kind": "Fragment", + "metadata": null, + "name": "ConsoleLayoutBreadcrumbPeopleOverviewQuery", + "selections": [ + { + "alias": "people", + "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": "ConsoleLayoutBreadcrumbPeopleOverviewQuery", + "selections": [ + { + "alias": "people", + "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": "ae4480910071c40c530fabf42d140afd", + "id": null, + "metadata": {}, + "name": "ConsoleLayoutBreadcrumbPeopleOverviewQuery", + "operationKind": "query", + "text": "query ConsoleLayoutBreadcrumbPeopleOverviewQuery(\n $peopleId: ID!\n) {\n people: node(id: $peopleId) {\n __typename\n id\n ... on People {\n fullName\n }\n }\n}\n" + } +}; +})(); + +(node as any).hash = "ffd8d5be8b9b8a930c956c8d292715d8"; + +export default node; diff --git a/apps/console/src/layouts/__generated__/ConsoleLayoutBreadcrumbVendorOverviewQuery.graphql.ts b/apps/console/src/layouts/__generated__/ConsoleLayoutBreadcrumbVendorOverviewQuery.graphql.ts new file mode 100644 index 000000000..908cb44c3 --- /dev/null +++ b/apps/console/src/layouts/__generated__/ConsoleLayoutBreadcrumbVendorOverviewQuery.graphql.ts @@ -0,0 +1,127 @@ +/** + * @generated SignedSource<<266ca8730d2832be4d4c96d325c3e4ab>> + * @lightSyntaxTransform + * @nogrep + */ + +/* tslint:disable */ +/* eslint-disable */ +// @ts-nocheck + +import { ConcreteRequest } from 'relay-runtime'; +export type ConsoleLayoutBreadcrumbVendorOverviewQuery$variables = { + vendorId: string; +}; +export type ConsoleLayoutBreadcrumbVendorOverviewQuery$data = { + readonly vendor: { + readonly id: string; + readonly name?: string; + }; +}; +export type ConsoleLayoutBreadcrumbVendorOverviewQuery = { + response: ConsoleLayoutBreadcrumbVendorOverviewQuery$data; + variables: ConsoleLayoutBreadcrumbVendorOverviewQuery$variables; +}; + +const node: ConcreteRequest = (function(){ +var v0 = [ + { + "defaultValue": null, + "kind": "LocalArgument", + "name": "vendorId" + } +], +v1 = [ + { + "kind": "Variable", + "name": "id", + "variableName": "vendorId" + } +], +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": "Vendor", + "abstractKey": null +}; +return { + "fragment": { + "argumentDefinitions": (v0/*: any*/), + "kind": "Fragment", + "metadata": null, + "name": "ConsoleLayoutBreadcrumbVendorOverviewQuery", + "selections": [ + { + "alias": "vendor", + "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": "ConsoleLayoutBreadcrumbVendorOverviewQuery", + "selections": [ + { + "alias": "vendor", + "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": "d0b39b21eec610e1162705b7e2799468", + "id": null, + "metadata": {}, + "name": "ConsoleLayoutBreadcrumbVendorOverviewQuery", + "operationKind": "query", + "text": "query ConsoleLayoutBreadcrumbVendorOverviewQuery(\n $vendorId: ID!\n) {\n vendor: node(id: $vendorId) {\n __typename\n id\n ... on Vendor {\n name\n }\n }\n}\n" + } +}; +})(); + +(node as any).hash = "20bb1420f2d13cf7974591da5e6b654f"; + +export default node; diff --git a/apps/console/src/pages/ControlOverviewPage.tsx b/apps/console/src/pages/ControlOverviewPage.tsx index 7f4bc1de3..d02dca162 100644 --- a/apps/console/src/pages/ControlOverviewPage.tsx +++ b/apps/console/src/pages/ControlOverviewPage.tsx @@ -10,11 +10,18 @@ import { CheckCircle2 } from "lucide-react"; import { Card, CardContent } from "@/components/ui/card"; import { Helmet } from "react-helmet-async"; -import { useBreadcrumb } from "@/contexts/BreadcrumbContext"; import type { ControlOverviewPageQuery as ControlOverviewPageQueryType } from "./__generated__/ControlOverviewPageQuery.graphql"; + const controlOverviewPageQuery = graphql` - query ControlOverviewPageQuery($controlId: ID!) { - node(id: $controlId) { + query ControlOverviewPageQuery($frameworkId: ID!, $controlId: ID!) { + framework: node(id: $frameworkId) { + id + ... on Framework { + name + } + } + + control: node(id: $controlId) { id ... on Control { name @@ -45,21 +52,15 @@ function ControlOverviewPageContent({ controlOverviewPageQuery, queryRef, ); - const { setBreadcrumbSegment } = useBreadcrumb(); - const control = data.node; - const tasks = control.tasks?.edges.map((edge) => edge?.node) ?? []; - - useEffect(() => { - if (control?.name) { - setBreadcrumbSegment("frameworks/:frameworkId/:controlId", control.name); - } - }, [control?.name, setBreadcrumbSegment]); + const control = data.control; + const framework = data.framework; + const tasks = control?.tasks?.edges.map((edge) => edge?.node) ?? []; return (
-

{control.name}

+

{control?.name}

30 min @@ -72,7 +73,7 @@ function ControlOverviewPageContent({
-

{control.description}

+

{control?.description}

@@ -80,52 +81,64 @@ function ControlOverviewPageContent({
- {control.state === "IMPLEMENTED" ? "Validated" : "Not validated"} + {control?.state === "IMPLEMENTED" ? "Validated" : "Not validated"}
-

Tasks

+

Tasks

{tasks.map((task) => (
{task?.state === "DONE" && ( - + )}
-
-
-
-

- {task?.name} -

-

- {task?.description} -

-
-
-
- {task?.state.toLowerCase()} -
-
+
+
+

+ {task?.name} +

+
+
+
06.00 - 07.30
+
@@ -158,14 +171,14 @@ function ControlOverviewPageFallback() { } export default function ControlOverviewPage() { - const { controlId } = useParams(); + const { frameworkId, controlId } = useParams(); const [queryRef, loadQuery] = useQueryLoader( controlOverviewPageQuery, ); useEffect(() => { - loadQuery({ controlId: controlId! }); - }, [loadQuery, controlId]); + loadQuery({ frameworkId: frameworkId!, controlId: controlId! }); + }, [loadQuery, frameworkId, controlId]); return ( <> diff --git a/apps/console/src/pages/FrameworkOverviewPage.tsx b/apps/console/src/pages/FrameworkOverviewPage.tsx index 14393cef9..996aed162 100644 --- a/apps/console/src/pages/FrameworkOverviewPage.tsx +++ b/apps/console/src/pages/FrameworkOverviewPage.tsx @@ -12,7 +12,6 @@ import { Progress } from "@/components/ui/progress"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import type { FrameworkOverviewPageQuery as FrameworkOverviewPageQueryType } from "./__generated__/FrameworkOverviewPageQuery.graphql"; import { Helmet } from "react-helmet-async"; -import { useBreadcrumb } from "@/contexts/BreadcrumbContext"; import { createPortal } from "react-dom"; const FrameworkOverviewPageQuery = graphql` @@ -44,7 +43,6 @@ function FrameworkOverviewPageContent({ queryRef: PreloadedQuery; }) { const data = usePreloadedQuery(FrameworkOverviewPageQuery, queryRef); - const { setBreadcrumbSegment } = useBreadcrumb(); const framework = data.node; const controls = framework.controls?.edges.map((edge) => edge?.node) ?? []; const [hoveredCard, setHoveredCard] = useState(null); @@ -57,12 +55,6 @@ function FrameworkOverviewPageContent({ const [isTooltipHovered, setIsTooltipHovered] = useState(false); const navigate = useNavigate(); - useEffect(() => { - if (framework?.name) { - setBreadcrumbSegment("frameworks/:id", framework.name); - } - }, [framework?.name, setBreadcrumbSegment]); - // Group controls by their category const controlsByCategory = controls.reduce( (acc, control) => { @@ -198,7 +190,7 @@ function FrameworkOverviewPageContent({ onClick={() => { if (control?.id) { navigate( - `/frameworks/${framework.id}/${control.id}`, + `/frameworks/${framework.id}/controls/${control.id}`, ); } }} diff --git a/apps/console/src/pages/PeopleListPage.tsx b/apps/console/src/pages/PeopleListPage.tsx index 8430823e4..61882f21c 100644 --- a/apps/console/src/pages/PeopleListPage.tsx +++ b/apps/console/src/pages/PeopleListPage.tsx @@ -15,6 +15,7 @@ import { Button } from "@/components/ui/button"; import { Link } from "react-router"; import { Helmet } from "react-helmet-async"; import type { PeopleListPageQuery as PeopleListPageQueryType } from "./__generated__/PeopleListPageQuery.graphql"; +import type { PeopleListPageDeletePeopleMutation } from "./__generated__/PeopleListPageDeletePeopleMutation.graphql"; import { PeopleListPagePaginationQuery } from "./__generated__/PeopleListPagePaginationQuery.graphql"; import { PeopleListPage_peoples$key } from "./__generated__/PeopleListPage_peoples.graphql"; @@ -132,7 +133,8 @@ function PeopleListContent({ ); const [searchParams, setSearchParams] = useSearchParams(); const [isPending, startTransition] = useTransition(); - const [deletePeople] = useMutation(deletePeopleMutation); + const [deletePeople] = + useMutation(deletePeopleMutation); const { data: peoplesConnection, diff --git a/apps/console/src/pages/PeopleOverviewPage.tsx b/apps/console/src/pages/PeopleOverviewPage.tsx index 0fd788342..6528320a7 100644 --- a/apps/console/src/pages/PeopleOverviewPage.tsx +++ b/apps/console/src/pages/PeopleOverviewPage.tsx @@ -17,7 +17,6 @@ import { Suspense, useEffect, useState, useCallback } from "react"; import type { PeopleOverviewPageQuery as PeopleOverviewPageQueryType } from "./__generated__/PeopleOverviewPageQuery.graphql"; import { useParams } from "react-router"; import { Helmet } from "react-helmet-async"; -import { useBreadcrumb } from "@/contexts/BreadcrumbContext"; import { cn } from "@/lib/utils"; const peopleOverviewPageQuery = graphql` @@ -88,7 +87,6 @@ function PeopleOverviewPageContent({ queryRef: PreloadedQuery; }) { const data = usePreloadedQuery(peopleOverviewPageQuery, queryRef); - const { setBreadcrumbSegment } = useBreadcrumb(); const [editedFields, setEditedFields] = useState>(new Set()); const [formData, setFormData] = useState({ fullName: data.node.fullName || "", @@ -159,12 +157,6 @@ function PeopleOverviewPageContent({ setEditedFields(new Set()); }; - useEffect(() => { - if (data.node?.fullName) { - setBreadcrumbSegment("peoples/:id", data.node.fullName); - } - }, [data.node?.fullName, setBreadcrumbSegment]); - return ( <>
diff --git a/apps/console/src/pages/VendorOverviewPage.tsx b/apps/console/src/pages/VendorOverviewPage.tsx index 067777c8e..221d03bec 100644 --- a/apps/console/src/pages/VendorOverviewPage.tsx +++ b/apps/console/src/pages/VendorOverviewPage.tsx @@ -17,9 +17,7 @@ import { Suspense, useEffect, useState, useCallback, useMemo } from "react"; import type { VendorOverviewPageQuery as VendorOverviewPageQueryType } from "./__generated__/VendorOverviewPageQuery.graphql"; import { useParams } from "react-router"; import { Helmet } from "react-helmet-async"; -import { useBreadcrumb } from "@/contexts/BreadcrumbContext"; import { cn } from "@/lib/utils"; -import type { UpdateVendorInput } from "./__generated__/VendorOverviewPageUpdateVendorMutation.graphql"; const vendorOverviewPageQuery = graphql` query VendorOverviewPageQuery($vendorId: ID!) { @@ -112,7 +110,6 @@ function VendorOverviewPageContent({ queryRef: PreloadedQuery; }) { const data = usePreloadedQuery(vendorOverviewPageQuery, queryRef); - const { setBreadcrumbSegment } = useBreadcrumb(); const [editedFields, setEditedFields] = useState>(new Set()); const [formData, setFormData] = useState({ name: data.node.name || "", @@ -207,12 +204,6 @@ function VendorOverviewPageContent({ setEditedFields(new Set()); }; - useEffect(() => { - if (data.node?.name) { - setBreadcrumbSegment("vendors/:id", data.node.name); - } - }, [data.node?.name, setBreadcrumbSegment]); - return ( <>