Move breadcrumb in own file

Signed-off-by: Émile Ré <nemile.re@gmail.com>
This commit is contained in:
Émile Ré
2025-03-28 12:02:54 +04:00
parent 2a21a3c320
commit 50bf6b9c46
8 changed files with 578 additions and 571 deletions

View File

@@ -0,0 +1,502 @@
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { cn } from "@/lib/utils";
import { ReactNode, Suspense } from "react";
import { graphql, useLazyLoadQuery } from "react-relay";
import { NavLink, Outlet, Route, Routes, To, useParams } from "react-router";
import { OrganizationBreadcrumbBreadcrumbFrameworkOverviewQuery } from "./__generated__/OrganizationBreadcrumbBreadcrumbFrameworkOverviewQuery.graphql";
import { OrganizationBreadcrumbBreadcrumbMitigationOverviewQuery } from "./__generated__/OrganizationBreadcrumbBreadcrumbMitigationOverviewQuery.graphql";
import { OrganizationBreadcrumbBreadcrumbPeopleOverviewQuery } from "./__generated__/OrganizationBreadcrumbBreadcrumbPeopleOverviewQuery.graphql";
import { OrganizationBreadcrumbBreadcrumbPolicyOverviewQuery } from "./__generated__/OrganizationBreadcrumbBreadcrumbPolicyOverviewQuery.graphql";
import { OrganizationBreadcrumbBreadcrumbVendorOverviewQuery } from "./__generated__/OrganizationBreadcrumbBreadcrumbVendorOverviewQuery.graphql";
import { OrganizationBreadcrumbOrganizationQuery } from "./__generated__/OrganizationBreadcrumbOrganizationQuery.graphql";
const BreadcrumbNavLink = ({
to,
children,
className,
}: {
to: To;
children?: ReactNode;
className?: string;
}) => {
return (
<BreadcrumbLink asChild>
<NavLink to={to} end>
{({ isActive }) => (
<BreadcrumbPage
className={cn(
"text-gray-300",
isActive && "text-gray-700",
className
)}
>
{children}
</BreadcrumbPage>
)}
</NavLink>
</BreadcrumbLink>
);
};
function BreadcrumbHome() {
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbNavLink to="/">Home</BreadcrumbNavLink>
</BreadcrumbItem>
<Outlet />
</BreadcrumbList>
</Breadcrumb>
);
}
function BreadCrumbOrganization() {
const { organizationId } = useParams();
const data = useLazyLoadQuery<OrganizationBreadcrumbOrganizationQuery>(
graphql`
query OrganizationBreadcrumbOrganizationQuery($organizationId: ID!) {
organization: node(id: $organizationId) {
... on Organization {
name
}
}
}
`,
{ organizationId: organizationId! },
{ fetchPolicy: "store-or-network" }
);
return (
<Breadcrumb className="select-none">
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbNavLink to={`/organizations/${organizationId}`}>
{data.organization?.name || "Home"}
</BreadcrumbNavLink>
</BreadcrumbItem>
<Outlet />
</BreadcrumbList>
</Breadcrumb>
);
}
function BreadcrumbFrameworkList() {
const { organizationId } = useParams();
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbNavLink to={`/organizations/${organizationId}/frameworks`}>
Frameworks
</BreadcrumbNavLink>
</BreadcrumbItem>
<Outlet />
</>
);
}
function BreadcrumbCreateFramework() {
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Create</BreadcrumbPage>
</BreadcrumbItem>
</>
);
}
function BreadcrumbFrameworkOverview() {
const { organizationId, frameworkId } = useParams();
const data =
useLazyLoadQuery<OrganizationBreadcrumbBreadcrumbFrameworkOverviewQuery>(
graphql`
query OrganizationBreadcrumbBreadcrumbFrameworkOverviewQuery(
$frameworkId: ID!
) {
framework: node(id: $frameworkId) {
id
... on Framework {
name
}
}
}
`,
{ frameworkId: frameworkId! }
);
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbNavLink
to={`/organizations/${organizationId}/frameworks/${frameworkId}`}
>
{data.framework?.name}
</BreadcrumbNavLink>
</BreadcrumbItem>
<Outlet />
</>
);
}
function BreadcrumbUpdateFramework() {
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Update</BreadcrumbPage>
</BreadcrumbItem>
</>
);
}
function BreadcrumbVendorList() {
const { organizationId } = useParams();
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbNavLink to={`/organizations/${organizationId}/vendors`}>
Vendors
</BreadcrumbNavLink>
</BreadcrumbItem>
<Outlet />
</>
);
}
function BreadcrumbVendorOverview() {
const { organizationId, vendorId } = useParams();
const data =
useLazyLoadQuery<OrganizationBreadcrumbBreadcrumbVendorOverviewQuery>(
graphql`
query OrganizationBreadcrumbBreadcrumbVendorOverviewQuery(
$vendorId: ID!
) {
vendor: node(id: $vendorId) {
id
... on Vendor {
name
}
}
}
`,
{ vendorId: vendorId! },
{ fetchPolicy: "store-or-network" }
);
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbNavLink
to={`/organizations/${organizationId}/vendors/${data.vendor.id}`}
>
{data.vendor.name}
</BreadcrumbNavLink>
</BreadcrumbItem>
<Outlet />
</>
);
}
function BreadcrumbPeopleList() {
const { organizationId } = useParams();
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbNavLink to={`/organizations/${organizationId}/people`}>
People
</BreadcrumbNavLink>
</BreadcrumbItem>
<Outlet />
</>
);
}
function BreadcrumbCreatePeople() {
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Create</BreadcrumbPage>
</BreadcrumbItem>
</>
);
}
function BreadcrumbUpdatePolicy() {
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Update</BreadcrumbPage>
</BreadcrumbItem>
</>
);
}
function BreadcrumbPeopleOverview() {
const { organizationId, peopleId } = useParams();
const data =
useLazyLoadQuery<OrganizationBreadcrumbBreadcrumbPeopleOverviewQuery>(
graphql`
query OrganizationBreadcrumbBreadcrumbPeopleOverviewQuery(
$peopleId: ID!
) {
people: node(id: $peopleId) {
id
... on People {
fullName
}
}
}
`,
{ peopleId: peopleId! },
{ fetchPolicy: "store-or-network" }
);
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbNavLink
to={`/organizations/${organizationId}/people/${data.people.id}`}
>
{data.people.fullName}
</BreadcrumbNavLink>
</BreadcrumbItem>
<Outlet />
</>
);
}
function BreadcrumbMitigationOverview() {
const { organizationId, frameworkId, mitigationId } = useParams();
const data =
useLazyLoadQuery<OrganizationBreadcrumbBreadcrumbMitigationOverviewQuery>(
graphql`
query OrganizationBreadcrumbBreadcrumbMitigationOverviewQuery(
$mitigationId: ID!
) {
mitigation: node(id: $mitigationId) {
id
... on Mitigation {
name
}
}
}
`,
{ mitigationId: mitigationId! }
);
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbNavLink
to={`/organizations/${organizationId}/frameworks/${frameworkId}/mitigations/${mitigationId}`}
>
{data.mitigation?.name}
</BreadcrumbNavLink>
</BreadcrumbItem>
<Outlet />
</>
);
}
function BreadcrumbCreateMitigation() {
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Create Mitigation</BreadcrumbPage>
</BreadcrumbItem>
</>
);
}
function BreadcrumbUpdateMitigation() {
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Update Mitigation</BreadcrumbPage>
</BreadcrumbItem>
</>
);
}
function BreadcrumbPolicyList() {
const { organizationId } = useParams();
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbNavLink to={`/organizations/${organizationId}/policies`}>
Policies
</BreadcrumbNavLink>
</BreadcrumbItem>
<Outlet />
</>
);
}
function BreadcrumbCreatePolicy() {
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Create Policy</BreadcrumbPage>
</BreadcrumbItem>
</>
);
}
function BreadcrumbPolicyOverview() {
const { organizationId, policyId } = useParams();
const data =
useLazyLoadQuery<OrganizationBreadcrumbBreadcrumbPolicyOverviewQuery>(
graphql`
query OrganizationBreadcrumbBreadcrumbPolicyOverviewQuery(
$policyId: ID!
) {
policy: node(id: $policyId) {
id
... on Policy {
name
}
}
}
`,
{ policyId: policyId! },
{ fetchPolicy: "store-or-network" }
);
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbNavLink
to={`/organizations/${organizationId}/policies/${policyId}`}
>
{data.policy?.name}
</BreadcrumbNavLink>
</BreadcrumbItem>
<Outlet />
</>
);
}
export function BreadCrumb() {
return (
<Routes>
<Route
element={
<Suspense>
<BreadCrumbOrganization />
</Suspense>
}
>
<Route path="frameworks" element={<BreadcrumbFrameworkList />}>
<Route
path=":frameworkId"
element={
<Suspense>
<BreadcrumbFrameworkOverview />
</Suspense>
}
>
<Route
path="mitigations/create"
element={<BreadcrumbCreateMitigation />}
/>
<Route
path="mitigations/:mitigationId"
element={
<Suspense>
<BreadcrumbMitigationOverview />
</Suspense>
}
>
<Route path="update" element={<BreadcrumbUpdateMitigation />} />
</Route>
<Route path="update" element={<BreadcrumbUpdateFramework />} />
</Route>
<Route path="create" element={<BreadcrumbCreateFramework />} />
</Route>
<Route path="people" 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
path="settings"
element={
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Settings</BreadcrumbPage>
</BreadcrumbItem>
</>
}
/>
</Route>
<Route path="*" element={<BreadcrumbHome />}>
<Route
path="create"
element={
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Create Organization</BreadcrumbPage>
</BreadcrumbItem>
</>
}
/>
</Route>
</Routes>
);
}

View File

@@ -1,400 +1,9 @@
import { NavLink, Outlet, Route, Routes, To, useParams } from "react-router";
import { Outlet } from "react-router";
import { AppSidebar } from "@/components/AppSidebar";
import { ReactNode, Suspense } from "react";
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Suspense } from "react";
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
import { Toaster } from "@/components/ui/toaster";
import { graphql, useLazyLoadQuery } from "react-relay";
import { cn } from "@/lib/utils";
import { OrganizationLayoutOrganizationQuery } from "./__generated__/OrganizationLayoutOrganizationQuery.graphql";
import { OrganizationLayoutBreadcrumbMitigationOverviewQuery } from "./__generated__/OrganizationLayoutBreadcrumbMitigationOverviewQuery.graphql";
import { OrganizationLayoutBreadcrumbFrameworkOverviewQuery } from "./__generated__/OrganizationLayoutBreadcrumbFrameworkOverviewQuery.graphql";
import { OrganizationLayoutBreadcrumbPeopleOverviewQuery } from "./__generated__/OrganizationLayoutBreadcrumbPeopleOverviewQuery.graphql";
import { OrganizationLayoutBreadcrumbPolicyOverviewQuery } from "./__generated__/OrganizationLayoutBreadcrumbPolicyOverviewQuery.graphql";
import { OrganizationLayoutBreadcrumbVendorOverviewQuery } from "./__generated__/OrganizationLayoutBreadcrumbVendorOverviewQuery.graphql";
const BreadCrumbNavLink = ({
to,
children,
className,
}: {
to: To;
children?: ReactNode;
className?: string;
}) => {
return (
<BreadcrumbLink asChild>
<NavLink to={to} end>
{({ isActive }) => (
<BreadcrumbPage
className={cn(
"text-gray-300",
isActive && "text-gray-700",
className
)}
>
{children}
</BreadcrumbPage>
)}
</NavLink>
</BreadcrumbLink>
);
};
function BreadcrumbHome() {
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadCrumbNavLink to="/">Home</BreadCrumbNavLink>
</BreadcrumbItem>
<Outlet />
</BreadcrumbList>
</Breadcrumb>
);
}
function BreadCrumbOrganization() {
const { organizationId } = useParams();
const data = useLazyLoadQuery<OrganizationLayoutOrganizationQuery>(
graphql`
query OrganizationLayoutOrganizationQuery($organizationId: ID!) {
organization: node(id: $organizationId) {
... on Organization {
name
}
}
}
`,
{ organizationId: organizationId! },
{ fetchPolicy: "store-or-network" }
);
return (
<Breadcrumb className="select-none">
<BreadcrumbList>
<BreadcrumbItem>
<BreadCrumbNavLink to={`/organizations/${organizationId}`}>
{data.organization?.name || "Home"}
</BreadCrumbNavLink>
</BreadcrumbItem>
<Outlet />
</BreadcrumbList>
</Breadcrumb>
);
}
function BreadcrumbFrameworkList() {
const { organizationId } = useParams();
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadCrumbNavLink to={`/organizations/${organizationId}/frameworks`}>
Frameworks
</BreadCrumbNavLink>
</BreadcrumbItem>
<Outlet />
</>
);
}
function BreadcrumbCreateFramework() {
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Create</BreadcrumbPage>
</BreadcrumbItem>
</>
);
}
function BreadcrumbFrameworkOverview() {
const { organizationId, frameworkId } = useParams();
const data =
useLazyLoadQuery<OrganizationLayoutBreadcrumbFrameworkOverviewQuery>(
graphql`
query OrganizationLayoutBreadcrumbFrameworkOverviewQuery(
$frameworkId: ID!
) {
framework: node(id: $frameworkId) {
id
... on Framework {
name
}
}
}
`,
{ frameworkId: frameworkId! }
);
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadCrumbNavLink
to={`/organizations/${organizationId}/frameworks/${frameworkId}`}
>
{data.framework?.name}
</BreadCrumbNavLink>
</BreadcrumbItem>
<Outlet />
</>
);
}
function BreadcrumbUpdateFramework() {
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Update</BreadcrumbPage>
</BreadcrumbItem>
</>
);
}
function BreadcrumbVendorList() {
const { organizationId } = useParams();
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadCrumbNavLink to={`/organizations/${organizationId}/vendors`}>
Vendors
</BreadCrumbNavLink>
</BreadcrumbItem>
<Outlet />
</>
);
}
function BreadcrumbVendorOverview() {
const { organizationId, vendorId } = useParams();
const data =
useLazyLoadQuery<OrganizationLayoutBreadcrumbVendorOverviewQuery>(
graphql`
query OrganizationLayoutBreadcrumbVendorOverviewQuery($vendorId: ID!) {
vendor: node(id: $vendorId) {
id
... on Vendor {
name
}
}
}
`,
{ vendorId: vendorId! },
{ fetchPolicy: "store-or-network" }
);
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadCrumbNavLink
to={`/organizations/${organizationId}/vendors/${data.vendor.id}`}
>
{data.vendor.name}
</BreadCrumbNavLink>
</BreadcrumbItem>
<Outlet />
</>
);
}
function BreadcrumbPeopleList() {
const { organizationId } = useParams();
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadCrumbNavLink to={`/organizations/${organizationId}/people`}>
People
</BreadCrumbNavLink>
</BreadcrumbItem>
<Outlet />
</>
);
}
function BreadcrumbCreatePeople() {
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Create</BreadcrumbPage>
</BreadcrumbItem>
</>
);
}
function BreadcrumbPeopleOverview() {
const { organizationId, peopleId } = useParams();
const data =
useLazyLoadQuery<OrganizationLayoutBreadcrumbPeopleOverviewQuery>(
graphql`
query OrganizationLayoutBreadcrumbPeopleOverviewQuery($peopleId: ID!) {
people: node(id: $peopleId) {
id
... on People {
fullName
}
}
}
`,
{ peopleId: peopleId! },
{ fetchPolicy: "store-or-network" }
);
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadCrumbNavLink
to={`/organizations/${organizationId}/people/${data.people.id}`}
>
{data.people.fullName}
</BreadCrumbNavLink>
</BreadcrumbItem>
<Outlet />
</>
);
}
function BreadcrumbMitigationOverview() {
const { organizationId, frameworkId, mitigationId } = useParams();
const data =
useLazyLoadQuery<OrganizationLayoutBreadcrumbMitigationOverviewQuery>(
graphql`
query OrganizationLayoutBreadcrumbMitigationOverviewQuery(
$mitigationId: ID!
) {
mitigation: node(id: $mitigationId) {
id
... on Mitigation {
name
}
}
}
`,
{ mitigationId: mitigationId! }
);
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadCrumbNavLink
to={`/organizations/${organizationId}/frameworks/${frameworkId}/mitigations/${mitigationId}`}
>
{data.mitigation?.name}
</BreadCrumbNavLink>
</BreadcrumbItem>
<Outlet />
</>
);
}
function BreadcrumbCreateMitigation() {
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Create Mitigation</BreadcrumbPage>
</BreadcrumbItem>
</>
);
}
function BreadcrumbUpdateMitigation() {
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Update Mitigation</BreadcrumbPage>
</BreadcrumbItem>
</>
);
}
function BreadcrumbPolicyList() {
const { organizationId } = useParams();
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadCrumbNavLink to={`/organizations/${organizationId}/policies`}>
Policies
</BreadCrumbNavLink>
</BreadcrumbItem>
<Outlet />
</>
);
}
function BreadcrumbCreatePolicy() {
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Create Policy</BreadcrumbPage>
</BreadcrumbItem>
</>
);
}
function BreadcrumbPolicyOverview() {
const { organizationId, policyId } = useParams();
const data =
useLazyLoadQuery<OrganizationLayoutBreadcrumbPolicyOverviewQuery>(
graphql`
query OrganizationLayoutBreadcrumbPolicyOverviewQuery($policyId: ID!) {
policy: node(id: $policyId) {
id
... on Policy {
name
}
}
}
`,
{ policyId: policyId! },
{ fetchPolicy: "store-or-network" }
);
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadCrumbNavLink
to={`/organizations/${organizationId}/policies/${policyId}`}
>
{data.policy?.name}
</BreadCrumbNavLink>
</BreadcrumbItem>
<Outlet />
</>
);
}
function BreadcrumbUpdatePolicy() {
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Update</BreadcrumbPage>
</BreadcrumbItem>
</>
);
}
import { BreadCrumb } from "./OrganizationBreadcrumb";
export default function OrganizationLayout() {
return (
@@ -405,111 +14,7 @@ export default function OrganizationLayout() {
<SidebarInset>
<div className="mx-auto w-lg md:w-xl lg:w-3xl xl:w-4xl 2xl:w-5xl p-8">
<header className="flex shrink-0 items-center gap-2">
<Routes>
<Route
element={
<Suspense>
<BreadCrumbOrganization />
</Suspense>
}
>
<Route path="frameworks" element={<BreadcrumbFrameworkList />}>
<Route
path=":frameworkId"
element={
<Suspense>
<BreadcrumbFrameworkOverview />
</Suspense>
}
>
<Route
path="mitigations/create"
element={<BreadcrumbCreateMitigation />}
/>
<Route
path="mitigations/:mitigationId"
element={
<Suspense>
<BreadcrumbMitigationOverview />
</Suspense>
}
>
<Route
path="update"
element={<BreadcrumbUpdateMitigation />}
/>
</Route>
<Route
path="update"
element={<BreadcrumbUpdateFramework />}
/>
</Route>
<Route
path="create"
element={<BreadcrumbCreateFramework />}
/>
</Route>
<Route path="people" 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
path="settings"
element={
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Settings</BreadcrumbPage>
</BreadcrumbItem>
</>
}
/>
</Route>
<Route path="*" element={<BreadcrumbHome />}>
<Route
path="create"
element={
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Create Organization</BreadcrumbPage>
</BreadcrumbItem>
</>
}
/>
</Route>
</Routes>
<BreadCrumb />
</header>
<div className="mt-7 w-full">
<Outlet />

View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<733d7a1785075f67a2b120aec123d3d3>>
* @generated SignedSource<<f0b3ca17f1e3263ada95c2529d127cb9>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -9,18 +9,18 @@
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type OrganizationLayoutBreadcrumbFrameworkOverviewQuery$variables = {
export type OrganizationBreadcrumbBreadcrumbFrameworkOverviewQuery$variables = {
frameworkId: string;
};
export type OrganizationLayoutBreadcrumbFrameworkOverviewQuery$data = {
export type OrganizationBreadcrumbBreadcrumbFrameworkOverviewQuery$data = {
readonly framework: {
readonly id: string;
readonly name?: string;
};
};
export type OrganizationLayoutBreadcrumbFrameworkOverviewQuery = {
response: OrganizationLayoutBreadcrumbFrameworkOverviewQuery$data;
variables: OrganizationLayoutBreadcrumbFrameworkOverviewQuery$variables;
export type OrganizationBreadcrumbBreadcrumbFrameworkOverviewQuery = {
response: OrganizationBreadcrumbBreadcrumbFrameworkOverviewQuery$data;
variables: OrganizationBreadcrumbBreadcrumbFrameworkOverviewQuery$variables;
};
const node: ConcreteRequest = (function(){
@@ -64,7 +64,7 @@ return {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "OrganizationLayoutBreadcrumbFrameworkOverviewQuery",
"name": "OrganizationBreadcrumbBreadcrumbFrameworkOverviewQuery",
"selections": [
{
"alias": "framework",
@@ -87,7 +87,7 @@ return {
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "OrganizationLayoutBreadcrumbFrameworkOverviewQuery",
"name": "OrganizationBreadcrumbBreadcrumbFrameworkOverviewQuery",
"selections": [
{
"alias": "framework",
@@ -112,16 +112,16 @@ return {
]
},
"params": {
"cacheID": "75003c9ef679845e901b7ecd8c591da7",
"cacheID": "7621d4cc3a8961e17c017c147084668e",
"id": null,
"metadata": {},
"name": "OrganizationLayoutBreadcrumbFrameworkOverviewQuery",
"name": "OrganizationBreadcrumbBreadcrumbFrameworkOverviewQuery",
"operationKind": "query",
"text": "query OrganizationLayoutBreadcrumbFrameworkOverviewQuery(\n $frameworkId: ID!\n) {\n framework: node(id: $frameworkId) {\n __typename\n id\n ... on Framework {\n name\n }\n }\n}\n"
"text": "query OrganizationBreadcrumbBreadcrumbFrameworkOverviewQuery(\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 = "c8da93cc3207000e73285e126d12a882";
(node as any).hash = "8556d69533cf7115847e6a676f275714";
export default node;

View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<e194a128ba01be3824345ec9386bc7e5>>
* @generated SignedSource<<5ba3e58b066b4fb849ab455b287dc1ff>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -9,18 +9,18 @@
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type OrganizationLayoutBreadcrumbMitigationOverviewQuery$variables = {
export type OrganizationBreadcrumbBreadcrumbMitigationOverviewQuery$variables = {
mitigationId: string;
};
export type OrganizationLayoutBreadcrumbMitigationOverviewQuery$data = {
export type OrganizationBreadcrumbBreadcrumbMitigationOverviewQuery$data = {
readonly mitigation: {
readonly id: string;
readonly name?: string;
};
};
export type OrganizationLayoutBreadcrumbMitigationOverviewQuery = {
response: OrganizationLayoutBreadcrumbMitigationOverviewQuery$data;
variables: OrganizationLayoutBreadcrumbMitigationOverviewQuery$variables;
export type OrganizationBreadcrumbBreadcrumbMitigationOverviewQuery = {
response: OrganizationBreadcrumbBreadcrumbMitigationOverviewQuery$data;
variables: OrganizationBreadcrumbBreadcrumbMitigationOverviewQuery$variables;
};
const node: ConcreteRequest = (function(){
@@ -64,7 +64,7 @@ return {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "OrganizationLayoutBreadcrumbMitigationOverviewQuery",
"name": "OrganizationBreadcrumbBreadcrumbMitigationOverviewQuery",
"selections": [
{
"alias": "mitigation",
@@ -87,7 +87,7 @@ return {
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "OrganizationLayoutBreadcrumbMitigationOverviewQuery",
"name": "OrganizationBreadcrumbBreadcrumbMitigationOverviewQuery",
"selections": [
{
"alias": "mitigation",
@@ -112,16 +112,16 @@ return {
]
},
"params": {
"cacheID": "12d02036b7f66c280ddd621941750d00",
"cacheID": "1f6462cdfacf6a2ce5bf51135d26daf3",
"id": null,
"metadata": {},
"name": "OrganizationLayoutBreadcrumbMitigationOverviewQuery",
"name": "OrganizationBreadcrumbBreadcrumbMitigationOverviewQuery",
"operationKind": "query",
"text": "query OrganizationLayoutBreadcrumbMitigationOverviewQuery(\n $mitigationId: ID!\n) {\n mitigation: node(id: $mitigationId) {\n __typename\n id\n ... on Mitigation {\n name\n }\n }\n}\n"
"text": "query OrganizationBreadcrumbBreadcrumbMitigationOverviewQuery(\n $mitigationId: ID!\n) {\n mitigation: node(id: $mitigationId) {\n __typename\n id\n ... on Mitigation {\n name\n }\n }\n}\n"
}
};
})();
(node as any).hash = "cd0a93d3c44467278a33729c4a46b0bf";
(node as any).hash = "83c2699bc436040d610f5113cc267e7f";
export default node;

View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<2a843b85994d7b675c2e0504ea8c687e>>
* @generated SignedSource<<e4082102cdacffc65067fc1169e4dc22>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -9,18 +9,18 @@
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type OrganizationLayoutBreadcrumbPeopleOverviewQuery$variables = {
export type OrganizationBreadcrumbBreadcrumbPeopleOverviewQuery$variables = {
peopleId: string;
};
export type OrganizationLayoutBreadcrumbPeopleOverviewQuery$data = {
export type OrganizationBreadcrumbBreadcrumbPeopleOverviewQuery$data = {
readonly people: {
readonly fullName?: string;
readonly id: string;
};
};
export type OrganizationLayoutBreadcrumbPeopleOverviewQuery = {
response: OrganizationLayoutBreadcrumbPeopleOverviewQuery$data;
variables: OrganizationLayoutBreadcrumbPeopleOverviewQuery$variables;
export type OrganizationBreadcrumbBreadcrumbPeopleOverviewQuery = {
response: OrganizationBreadcrumbBreadcrumbPeopleOverviewQuery$data;
variables: OrganizationBreadcrumbBreadcrumbPeopleOverviewQuery$variables;
};
const node: ConcreteRequest = (function(){
@@ -64,7 +64,7 @@ return {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "OrganizationLayoutBreadcrumbPeopleOverviewQuery",
"name": "OrganizationBreadcrumbBreadcrumbPeopleOverviewQuery",
"selections": [
{
"alias": "people",
@@ -87,7 +87,7 @@ return {
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "OrganizationLayoutBreadcrumbPeopleOverviewQuery",
"name": "OrganizationBreadcrumbBreadcrumbPeopleOverviewQuery",
"selections": [
{
"alias": "people",
@@ -112,16 +112,16 @@ return {
]
},
"params": {
"cacheID": "3f43dd20847240f85b9e4f7e1d2ae1e6",
"cacheID": "8e31b69ca914380fb45a65f6caef4f55",
"id": null,
"metadata": {},
"name": "OrganizationLayoutBreadcrumbPeopleOverviewQuery",
"name": "OrganizationBreadcrumbBreadcrumbPeopleOverviewQuery",
"operationKind": "query",
"text": "query OrganizationLayoutBreadcrumbPeopleOverviewQuery(\n $peopleId: ID!\n) {\n people: node(id: $peopleId) {\n __typename\n id\n ... on People {\n fullName\n }\n }\n}\n"
"text": "query OrganizationBreadcrumbBreadcrumbPeopleOverviewQuery(\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 = "715ffb6eaef0bdeec2c1a42e17d37ba9";
(node as any).hash = "754df51d74ab4c3be0b83fdc689e5cfc";
export default node;

View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<02beff12353573ba1a8701513b4e9a7e>>
* @generated SignedSource<<5f81eaad8c66c579401d9c73180f8f91>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -9,18 +9,18 @@
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type OrganizationLayoutBreadcrumbPolicyOverviewQuery$variables = {
export type OrganizationBreadcrumbBreadcrumbPolicyOverviewQuery$variables = {
policyId: string;
};
export type OrganizationLayoutBreadcrumbPolicyOverviewQuery$data = {
export type OrganizationBreadcrumbBreadcrumbPolicyOverviewQuery$data = {
readonly policy: {
readonly id: string;
readonly name?: string;
};
};
export type OrganizationLayoutBreadcrumbPolicyOverviewQuery = {
response: OrganizationLayoutBreadcrumbPolicyOverviewQuery$data;
variables: OrganizationLayoutBreadcrumbPolicyOverviewQuery$variables;
export type OrganizationBreadcrumbBreadcrumbPolicyOverviewQuery = {
response: OrganizationBreadcrumbBreadcrumbPolicyOverviewQuery$data;
variables: OrganizationBreadcrumbBreadcrumbPolicyOverviewQuery$variables;
};
const node: ConcreteRequest = (function(){
@@ -64,7 +64,7 @@ return {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "OrganizationLayoutBreadcrumbPolicyOverviewQuery",
"name": "OrganizationBreadcrumbBreadcrumbPolicyOverviewQuery",
"selections": [
{
"alias": "policy",
@@ -87,7 +87,7 @@ return {
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "OrganizationLayoutBreadcrumbPolicyOverviewQuery",
"name": "OrganizationBreadcrumbBreadcrumbPolicyOverviewQuery",
"selections": [
{
"alias": "policy",
@@ -112,16 +112,16 @@ return {
]
},
"params": {
"cacheID": "a7bbb574545c752bde0eba468ec494d7",
"cacheID": "13d6ac9cf6f904f8a03f141b6b6e2564",
"id": null,
"metadata": {},
"name": "OrganizationLayoutBreadcrumbPolicyOverviewQuery",
"name": "OrganizationBreadcrumbBreadcrumbPolicyOverviewQuery",
"operationKind": "query",
"text": "query OrganizationLayoutBreadcrumbPolicyOverviewQuery(\n $policyId: ID!\n) {\n policy: node(id: $policyId) {\n __typename\n id\n ... on Policy {\n name\n }\n }\n}\n"
"text": "query OrganizationBreadcrumbBreadcrumbPolicyOverviewQuery(\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 = "90b9df71a590d79f4e083aa117ad7302";
(node as any).hash = "6ed45dd2d1fa369329edde6b77eec92d";
export default node;

View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<d0ab5ff850203d4209b0d189e8c28b7c>>
* @generated SignedSource<<8c8b57ca97101932acdb5d73038e228c>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -9,18 +9,18 @@
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type OrganizationLayoutBreadcrumbVendorOverviewQuery$variables = {
export type OrganizationBreadcrumbBreadcrumbVendorOverviewQuery$variables = {
vendorId: string;
};
export type OrganizationLayoutBreadcrumbVendorOverviewQuery$data = {
export type OrganizationBreadcrumbBreadcrumbVendorOverviewQuery$data = {
readonly vendor: {
readonly id: string;
readonly name?: string;
};
};
export type OrganizationLayoutBreadcrumbVendorOverviewQuery = {
response: OrganizationLayoutBreadcrumbVendorOverviewQuery$data;
variables: OrganizationLayoutBreadcrumbVendorOverviewQuery$variables;
export type OrganizationBreadcrumbBreadcrumbVendorOverviewQuery = {
response: OrganizationBreadcrumbBreadcrumbVendorOverviewQuery$data;
variables: OrganizationBreadcrumbBreadcrumbVendorOverviewQuery$variables;
};
const node: ConcreteRequest = (function(){
@@ -64,7 +64,7 @@ return {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "OrganizationLayoutBreadcrumbVendorOverviewQuery",
"name": "OrganizationBreadcrumbBreadcrumbVendorOverviewQuery",
"selections": [
{
"alias": "vendor",
@@ -87,7 +87,7 @@ return {
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "OrganizationLayoutBreadcrumbVendorOverviewQuery",
"name": "OrganizationBreadcrumbBreadcrumbVendorOverviewQuery",
"selections": [
{
"alias": "vendor",
@@ -112,16 +112,16 @@ return {
]
},
"params": {
"cacheID": "cdf321fbd087d345096d8af142d99608",
"cacheID": "e3b7ec1aa637099854e157f0f06f5289",
"id": null,
"metadata": {},
"name": "OrganizationLayoutBreadcrumbVendorOverviewQuery",
"name": "OrganizationBreadcrumbBreadcrumbVendorOverviewQuery",
"operationKind": "query",
"text": "query OrganizationLayoutBreadcrumbVendorOverviewQuery(\n $vendorId: ID!\n) {\n vendor: node(id: $vendorId) {\n __typename\n id\n ... on Vendor {\n name\n }\n }\n}\n"
"text": "query OrganizationBreadcrumbBreadcrumbVendorOverviewQuery(\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 = "41b87834c3e5625381d8434930cf29db";
(node as any).hash = "eb448c353f367e8b4de619facc855959";
export default node;

View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<c8aadda28109f223c394a98b8ac9c14e>>
* @generated SignedSource<<c3c793d3ca3ac86b817343883938ab0c>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -9,17 +9,17 @@
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type OrganizationLayoutOrganizationQuery$variables = {
export type OrganizationBreadcrumbOrganizationQuery$variables = {
organizationId: string;
};
export type OrganizationLayoutOrganizationQuery$data = {
export type OrganizationBreadcrumbOrganizationQuery$data = {
readonly organization: {
readonly name?: string;
};
};
export type OrganizationLayoutOrganizationQuery = {
response: OrganizationLayoutOrganizationQuery$data;
variables: OrganizationLayoutOrganizationQuery$variables;
export type OrganizationBreadcrumbOrganizationQuery = {
response: OrganizationBreadcrumbOrganizationQuery$data;
variables: OrganizationBreadcrumbOrganizationQuery$variables;
};
const node: ConcreteRequest = (function(){
@@ -56,7 +56,7 @@ return {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "OrganizationLayoutOrganizationQuery",
"name": "OrganizationBreadcrumbOrganizationQuery",
"selections": [
{
"alias": "organization",
@@ -78,7 +78,7 @@ return {
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "OrganizationLayoutOrganizationQuery",
"name": "OrganizationBreadcrumbOrganizationQuery",
"selections": [
{
"alias": "organization",
@@ -109,16 +109,16 @@ return {
]
},
"params": {
"cacheID": "f4716079c4ca6a1012c7044a3328af01",
"cacheID": "18cbf77dbfbf76b1f2f51331372de068",
"id": null,
"metadata": {},
"name": "OrganizationLayoutOrganizationQuery",
"name": "OrganizationBreadcrumbOrganizationQuery",
"operationKind": "query",
"text": "query OrganizationLayoutOrganizationQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n name\n }\n id\n }\n}\n"
"text": "query OrganizationBreadcrumbOrganizationQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n name\n }\n id\n }\n}\n"
}
};
})();
(node as any).hash = "878d0ca4790ce128c108f29135074919";
(node as any).hash = "f8d5fa8a458cdd965df43de084f6a095";
export default node;