Migrate current organization from in memory to url state

Signed-off-by: gearnode <bryan@frimin.fr>

apps/console/src/layouts/ConsoleLayout.tsx

@@ -29,14 +29,32 @@ import { ConsoleLayoutBreadcrumbFrameworkOverviewQuery } from "./__generated__/C
 import { ConsoleLayoutBreadcrumbPeopleOverviewQuery } from "./__generated__/ConsoleLayoutBreadcrumbPeopleOverviewQuery.graphql";
 import { ConsoleLayoutBreadcrumbVendorOverviewQuery } from "./__generated__/ConsoleLayoutBreadcrumbVendorOverviewQuery.graphql";
 import { ConsoleLayoutBreadcrumbControlOverviewQuery } from "./__generated__/ConsoleLayoutBreadcrumbControlOverviewQuery.graphql";
+import { ConsoleLayoutOrganizationQuery } from "./__generated__/ConsoleLayoutOrganizationQuery.graphql";
 
 function BreadcrumbHome({ children }: { children: React.ReactNode }) {
+  const { organizationId } = useParams();
+  const data = useLazyLoadQuery<ConsoleLayoutOrganizationQuery>(
+    graphql`
+      query ConsoleLayoutOrganizationQuery($organizationId: ID!) {
+        organization: node(id: $organizationId) {
+          ... on Organization {
+            name
+          }
+        }
+      }
+    `,
+    { organizationId: organizationId! },
+    { fetchPolicy: "store-or-network" }
+  );
+
   return (
     <Breadcrumb>
       <BreadcrumbList>
         <BreadcrumbItem>
           <BreadcrumbLink asChild>
-            <Link to="/">Home</Link>
+            <Link to={`/organizations/${organizationId}`}>
+              {data.organization?.name || "Home"}
+            </Link>
           </BreadcrumbLink>
         </BreadcrumbItem>
         {children}
@@ -46,12 +64,15 @@ function BreadcrumbHome({ children }: { children: React.ReactNode }) {
 }
 
 function BreadcrumbFrameworkList() {
+  const { organizationId } = useParams();
   return (
     <>
       <BreadcrumbSeparator />
       <BreadcrumbItem>
         <BreadcrumbLink asChild>
-          <Link to="/frameworks">Frameworks</Link>
+          <Link to={`/organizations/${organizationId}/frameworks`}>
+            Frameworks
+          </Link>
         </BreadcrumbLink>
       </BreadcrumbItem>
       <Outlet />
@@ -60,7 +81,7 @@ function BreadcrumbFrameworkList() {
 }
 
 function BreadcrumbFrameworkOverview() {
-  const { frameworkId } = useParams();
+  const { organizationId, frameworkId } = useParams();
   const data = useLazyLoadQuery<ConsoleLayoutBreadcrumbFrameworkOverviewQuery>(
     graphql`
       query ConsoleLayoutBreadcrumbFrameworkOverviewQuery($frameworkId: ID!) {
@@ -81,7 +102,9 @@ function BreadcrumbFrameworkOverview() {
       <BreadcrumbSeparator />
       <BreadcrumbItem>
         <BreadcrumbLink asChild>
-          <Link to={`/frameworks/${data.framework.id}`}>
+          <Link
+            to={`/organizations/${organizationId}/frameworks/${data.framework.id}`}
+          >
             {data.framework.name}
           </Link>
         </BreadcrumbLink>
@@ -91,71 +114,14 @@ function BreadcrumbFrameworkOverview() {
   );
 }
 
-function BreadcrumbPeopleList() {
-  return (
-    <>
-      <BreadcrumbSeparator />
-      <BreadcrumbItem>
-        <BreadcrumbLink asChild>
-          <Link to="/peoples">People</Link>
-        </BreadcrumbLink>
-      </BreadcrumbItem>
-      <Outlet />
-    </>
-  );
-}
-
-function BreadcrumbCreatePeople() {
-  return (
-    <>
-      <BreadcrumbSeparator />
-      <BreadcrumbItem>
-        <BreadcrumbLink asChild>
-          <Link to="/peoples/create">Create 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() {
+  const { organizationId } = useParams();
   return (
     <>
       <BreadcrumbSeparator />
       <BreadcrumbItem>
         <BreadcrumbLink asChild>
-          <Link to="/vendors">Vendors</Link>
+          <Link to={`/organizations/${organizationId}/vendors`}>Vendors</Link>
         </BreadcrumbLink>
       </BreadcrumbItem>
       <Outlet />
@@ -164,7 +130,7 @@ function BreadcrumbVendorList() {
 }
 
 function BreadcrumbVendorOverview() {
-  const { vendorId } = useParams();
+  const { organizationId, vendorId } = useParams();
   const data = useLazyLoadQuery<ConsoleLayoutBreadcrumbVendorOverviewQuery>(
     graphql`
       query ConsoleLayoutBreadcrumbVendorOverviewQuery($vendorId: ID!) {
@@ -185,15 +151,91 @@ function BreadcrumbVendorOverview() {
       <BreadcrumbSeparator />
       <BreadcrumbItem>
         <BreadcrumbLink asChild>
-          <Link to={`/vendors/${data.vendor.id}`}>{data.vendor.name}</Link>
+          <Link
+            to={`/organizations/${organizationId}/vendors/${data.vendor.id}`}
+          >
+            {data.vendor.name}
+          </Link>
         </BreadcrumbLink>
       </BreadcrumbItem>
+      <Outlet />
+    </>
+  );
+}
+
+function BreadcrumbPeopleList() {
+  const { organizationId } = useParams();
+  return (
+    <>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbLink asChild>
+          <Link to={`/organizations/${organizationId}/peoples`}>People</Link>
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+      <Outlet />
+    </>
+  );
+}
+
+function BreadcrumbCreatePeople() {
+  return (
+    <>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbPage>Create</BreadcrumbPage>
+      </BreadcrumbItem>
+    </>
+  );
+}
+
+function BreadcrumbPeopleOverview() {
+  const { organizationId, 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={`/organizations/${organizationId}/peoples/${data.people.id}`}
+          >
+            {data.people.fullName}
+          </Link>
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+      <Outlet />
+    </>
+  );
+}
+
+function BreadcrumbCreateOrganization() {
+  return (
+    <>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbPage>Create Organization</BreadcrumbPage>
+      </BreadcrumbItem>
     </>
   );
 }
 
 function BreadcrumbControlOverview() {
-  const { frameworkId, controlId } = useParams();
+  const { organizationId, frameworkId, controlId } = useParams();
   const data = useLazyLoadQuery<ConsoleLayoutBreadcrumbControlOverviewQuery>(
     graphql`
       query ConsoleLayoutBreadcrumbControlOverviewQuery(
@@ -223,7 +265,9 @@ function BreadcrumbControlOverview() {
       <BreadcrumbSeparator />
       <BreadcrumbItem>
         <BreadcrumbLink asChild>
-          <Link to={`/frameworks/${data.framework.id}`}>
+          <Link
+            to={`/organizations/${organizationId}/frameworks/${data.framework.id}`}
+          >
             {data.framework.name}
           </Link>
         </BreadcrumbLink>
@@ -232,7 +276,7 @@ function BreadcrumbControlOverview() {
       <BreadcrumbItem>
         <BreadcrumbLink asChild>
           <Link
-            to={`/frameworks/${data.framework.id}/controls/${data.control.id}`}
+            to={`/organizations/${organizationId}/frameworks/${data.framework.id}/controls/${data.control.id}`}
           >
             {data.control.name}
           </Link>
@@ -243,21 +287,9 @@ function BreadcrumbControlOverview() {
   );
 }
 
-function BreadcrumbCreateOrganization() {
-  return (
-    <>
-      <BreadcrumbSeparator />
-      <BreadcrumbItem>
-        <BreadcrumbLink asChild>
-          <Link to="/organizations/create">Create Organization</Link>
-        </BreadcrumbLink>
-      </BreadcrumbItem>
-      <Outlet />
-    </>
-  );
-}
-
 export default function ConsoleLayout() {
+  const { organizationId } = useParams();
+
   return (
     <SidebarProvider>
       <AppSidebar />
@@ -268,36 +300,29 @@ export default function ConsoleLayout() {
             <Separator orientation="vertical" className="mr-2 h-4" />
             <BreadcrumbHome>
               <Routes>
-                <Route path="/frameworks" element={<BreadcrumbFrameworkList />}>
+                <Route path="frameworks" element={<BreadcrumbFrameworkList />}>
                   <Route
-                    path="/frameworks/:frameworkId"
+                    path=":frameworkId"
                     element={<BreadcrumbFrameworkOverview />}
                   />
                   <Route
-                    path="/frameworks/:frameworkId/controls/:controlId"
+                    path=":frameworkId/controls/:controlId"
                     element={<BreadcrumbControlOverview />}
                   />
                 </Route>
-                <Route path="/peoples" element={<BreadcrumbPeopleList />}>
+                <Route path="peoples" element={<BreadcrumbPeopleList />}>
                   <Route
-                    path="/peoples/:peopleId"
+                    path=":peopleId"
                     element={<BreadcrumbPeopleOverview />}
                   />
-                  <Route
-                    path="/peoples/create"
-                    element={<BreadcrumbCreatePeople />}
-                  />
+                  <Route path="create" element={<BreadcrumbCreatePeople />} />
                 </Route>
-                <Route path="/vendors" element={<BreadcrumbVendorList />}>
+                <Route path="vendors" element={<BreadcrumbVendorList />}>
                   <Route
-                    path="/vendors/:vendorId"
+                    path=":vendorId"
                     element={<BreadcrumbVendorOverview />}
                   />
                 </Route>
-                <Route
-                  path="/organizations/create"
-                  element={<BreadcrumbCreateOrganization />}
-                />
               </Routes>
             </BreadcrumbHome>
           </div>

apps/console/src/layouts/__generated__/ConsoleLayoutOrganizationQuery.graphql.ts

@@ -0,0 +1,124 @@
+/**
+ * @generated SignedSource<<93800eee21fa3f30cc45da37370359fd>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type ConsoleLayoutOrganizationQuery$variables = {
+  organizationId: string;
+};
+export type ConsoleLayoutOrganizationQuery$data = {
+  readonly organization: {
+    readonly name?: string;
+  };
+};
+export type ConsoleLayoutOrganizationQuery = {
+  response: ConsoleLayoutOrganizationQuery$data;
+  variables: ConsoleLayoutOrganizationQuery$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "organizationId"
+  }
+],
+v1 = [
+  {
+    "kind": "Variable",
+    "name": "id",
+    "variableName": "organizationId"
+  }
+],
+v2 = {
+  "kind": "InlineFragment",
+  "selections": [
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "name",
+      "storageKey": null
+    }
+  ],
+  "type": "Organization",
+  "abstractKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "ConsoleLayoutOrganizationQuery",
+    "selections": [
+      {
+        "alias": "organization",
+        "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": "ConsoleLayoutOrganizationQuery",
+    "selections": [
+      {
+        "alias": "organization",
+        "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": "e275faa366380b1b423251e6a06ab743",
+    "id": null,
+    "metadata": {},
+    "name": "ConsoleLayoutOrganizationQuery",
+    "operationKind": "query",
+    "text": "query ConsoleLayoutOrganizationQuery(\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 = "3310c40eb8f1e3874139c934fb08cbb1";
+
+export default node;