rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix breadcrumb make UI blink

Browse Source 
Signed-off-by: gearnode <bryan@frimin.fr>
This commit is contained in:
gearnode
2025-02-20 08:06:28 +01:00
parent 5ebe7a685b
commit 81b01f06a5
12 changed files with 812 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

308
apps/console/src/layouts/ConsoleLayout.tsx
View File

@@ -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 (
<Breadcrumb>
<BreadcrumbList>
@@ -50,51 +39,238 @@ function BreadcrumbNavigation() {
<Link to="/">Home</Link>
</BreadcrumbLink>
</BreadcrumbItem>
{pathSegments.map((segment, index) => {
const path = `/${pathSegments.slice(0, index + 1).join("/")}`;
const isLast = index === pathSegments.length - 1;
return (
<React.Fragment key={path}>
<BreadcrumbSeparator />
<BreadcrumbItem>
{isLast ? (
<BreadcrumbPage>
{getBreadcrumbText(segment, path)}
</BreadcrumbPage>
) : (
<BreadcrumbLink asChild>
<Link to={path}>{getBreadcrumbText(segment, path)}</Link>
</BreadcrumbLink>
)}
</BreadcrumbItem>
</React.Fragment>
);
})}
<Outlet />
</BreadcrumbList>
</Breadcrumb>
);
}
export default function ConsoleLayout() {
function BreadcrumbFrameworkList() {
return (
<BreadcrumbProvider>
<SidebarProvider>
<AppSidebar />
<SidebarInset>
<header className="flex h-16 shrink-0 items-center gap-2">
<div className="flex items-center gap-2 px-4">
<SidebarTrigger className="-ml-1" />
<Separator orientation="vertical" className="mr-2 h-4" />
<BreadcrumbNavigation />
</div>
</header>
<div className="flex flex-1 flex-col gap-4 p-4 pt-0">
<Outlet />
<Toaster />
</div>
</SidebarInset>
</SidebarProvider>
</BreadcrumbProvider>
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link to="/frameworks">Frameworks</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<Outlet />
</>
);
}
function BreadcrumbFrameworkOverview() {
const { frameworkId } = useParams();
const data = useLazyLoadQuery<ConsoleLayoutBreadcrumbFrameworkOverviewQuery>(
graphql`
query ConsoleLayoutBreadcrumbFrameworkOverviewQuery($frameworkId: ID!) {
framework: node(id: $frameworkId) {
id
... on Framework {
name
}
}
}
`,
{ frameworkId: frameworkId! },
{ fetchPolicy: "store-or-network" },
);
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link to={`/frameworks/${data.framework.id}`}>
{data.framework.name}
</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<Outlet />
</>
);
}
function BreadcrumbPeopleList() {
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link to="/peoples">People</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<Outlet />
</>
);
}
function BreadcrumbPeopleOverview() {
const { peopleId } = useParams();
const data = useLazyLoadQuery<ConsoleLayoutBreadcrumbPeopleOverviewQuery>(
graphql`
query ConsoleLayoutBreadcrumbPeopleOverviewQuery($peopleId: ID!) {
people: node(id: $peopleId) {
id
... on People {
fullName
}
}
}
`,
{ peopleId: peopleId! },
{ fetchPolicy: "store-or-network" },
);
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link to={`/peoples/${data.people.id}`}>{data.people.fullName}</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<Outlet />
</>
);
}
function BreadcrumbVendorList() {
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link to="/vendors">Vendors</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<Outlet />
</>
);
}
function BreadcrumbVendorOverview() {
const { vendorId } = useParams();
const data = useLazyLoadQuery<ConsoleLayoutBreadcrumbVendorOverviewQuery>(
graphql`
query ConsoleLayoutBreadcrumbVendorOverviewQuery($vendorId: ID!) {
vendor: node(id: $vendorId) {
id
... on Vendor {
name
}
}
}
`,
{ vendorId: vendorId! },
{ fetchPolicy: "store-or-network" },
);
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link to={`/vendors/${data.vendor.id}`}>{data.vendor.name}</Link>
</BreadcrumbLink>
</BreadcrumbItem>
</>
);
}
function BreadcrumbControlOverview() {
const { frameworkId, controlId } = useParams();
const data = useLazyLoadQuery<ConsoleLayoutBreadcrumbControlOverviewQuery>(
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 (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link to={`/frameworks/${data.framework.id}`}>
{data.framework.name}
</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link
to={`/frameworks/${data.framework.id}/controls/${data.control.id}`}
>
{data.control.name}
</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<Outlet />
</>
);
}
export default function ConsoleLayout() {
return (
<SidebarProvider>
<AppSidebar />
<SidebarInset>
<header className="flex h-16 shrink-0 items-center gap-2">
<div className="flex items-center gap-2 px-4">
<SidebarTrigger className="-ml-1" />
<Separator orientation="vertical" className="mr-2 h-4" />
<Routes>
<Route path="/" element={<BreadcrumbHome />}>
<Route path="/frameworks" element={<BreadcrumbFrameworkList />}>
<Route
path="/frameworks/:frameworkId"
element={<BreadcrumbFrameworkOverview />}
/>
<Route
path="/frameworks/:frameworkId/controls/:controlId"
element={<BreadcrumbControlOverview />}
/>
</Route>
<Route path="/peoples" element={<BreadcrumbPeopleList />}>
<Route
path="/peoples/:peopleId"
element={<BreadcrumbPeopleOverview />}
/>
</Route>
<Route path="/vendors" element={<BreadcrumbVendorList />}>
<Route
path="/vendors/:vendorId"
element={<BreadcrumbVendorOverview />}
/>
</Route>
</Route>
</Routes>
</div>
</header>
<div className="flex flex-1 flex-col gap-4 p-4 pt-0">
<Outlet />
<Toaster />
</div>
</SidebarInset>
</SidebarProvider>
);
}

127
apps/console/src/layouts/__generated__/ConsoleLayoutBreadcrumbControlOverviewQuery.graphql.ts generated Normal file
View File

@@ -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;

127
apps/console/src/layouts/__generated__/ConsoleLayoutBreadcrumbFrameworkOverviewQuery.graphql.ts generated Normal file
View File

@@ -0,0 +1,127 @@
/**
* @generated SignedSource<<b762e82a823e00ae26cd82eff55352b7>>
* @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;

127
apps/console/src/layouts/__generated__/ConsoleLayoutBreadcrumbPeopleOverviewQuery.graphql.ts generated Normal file
View File

@@ -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;

127
apps/console/src/layouts/__generated__/ConsoleLayoutBreadcrumbVendorOverviewQuery.graphql.ts generated Normal file
View File

@@ -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;