Add breadcrumb to data

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

apps/console/src/pages/organizations/OrganizationBreadcrumb.tsx

@@ -20,6 +20,7 @@ import { OrganizationBreadcrumbBreadcrumbMeasureViewQuery } from "./__generated_
 import { OrganizationBreadcrumbBreadcrumbControlQuery } from "./__generated__/OrganizationBreadcrumbBreadcrumbControlQuery.graphql";
 import { OrganizationBreadcrumbBreadcrumbRiskShowQuery } from "./__generated__/OrganizationBreadcrumbBreadcrumbRiskShowQuery.graphql";
 import { OrganizationBreadcrumbBreadcrumbAssetOverviewQuery } from "./__generated__/OrganizationBreadcrumbBreadcrumbAssetOverviewQuery.graphql";
+import { OrganizationBreadcrumbBreadcrumbDataOverviewQuery } from "./__generated__/OrganizationBreadcrumbBreadcrumbDataOverviewQuery.graphql";
 import ErrorBoundary from "@/components/ErrorBoundary";
 
 const New = () => {
@@ -499,6 +500,51 @@ function BreadcrumbAssetOverview() {
   );
 }
 
+function BreadcrumbDataList() {
+  const { organizationId } = useParams();
+  return (
+    <>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbNavLink to={`/organizations/${organizationId}/data`}>
+          Data
+        </BreadcrumbNavLink>
+      </BreadcrumbItem>
+      <Outlet />
+    </>
+  );
+}
+
+function BreadcrumbDataOverview() {
+  const { organizationId, datumId } = useParams();
+  const data = useLazyLoadQuery<OrganizationBreadcrumbBreadcrumbDataOverviewQuery>(
+    graphql`
+      query OrganizationBreadcrumbBreadcrumbDataOverviewQuery($datumId: ID!) {
+        datum: node(id: $datumId) {
+          id
+          ... on Datum {
+            name
+          }
+        }
+      }
+    `,
+    { datumId: datumId! },
+    { fetchPolicy: "store-or-network" },
+  );
+
+  return (
+    <>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbNavLink to={`/organizations/${organizationId}/data/${datumId || ""}`}>
+          {data.datum?.name}
+        </BreadcrumbNavLink>
+      </BreadcrumbItem>
+      <Outlet />
+    </>
+  );
+}
+
 export function BreadCrumb() {
   return (
     <Routes>
@@ -605,6 +651,19 @@ export function BreadCrumb() {
             <Route path="edit" element={<Edit />} />
           </Route>
         </Route>
+        <Route path="data" element={<BreadcrumbDataList />}>
+          <Route path="new" element={<New />} />
+          <Route
+            path=":datumId"
+            element={
+              <Suspense>
+                <BreadcrumbDataOverview />
+              </Suspense>
+            }
+          >
+            <Route path="edit" element={<Edit />} />
+          </Route>
+        </Route>
         <Route
           path="settings"
           element={

apps/console/src/pages/organizations/__generated__/OrganizationBreadcrumbBreadcrumbDataOverviewQuery.graphql.ts

@@ -0,0 +1,127 @@
+/**
+ * @generated SignedSource<<bb6bbcf9a7c38fa57a96bd1652782ccf>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type OrganizationBreadcrumbBreadcrumbDataOverviewQuery$variables = {
+  datumId: string;
+};
+export type OrganizationBreadcrumbBreadcrumbDataOverviewQuery$data = {
+  readonly datum: {
+    readonly id: string;
+    readonly name?: string;
+  };
+};
+export type OrganizationBreadcrumbBreadcrumbDataOverviewQuery = {
+  response: OrganizationBreadcrumbBreadcrumbDataOverviewQuery$data;
+  variables: OrganizationBreadcrumbBreadcrumbDataOverviewQuery$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "datumId"
+  }
+],
+v1 = [
+  {
+    "kind": "Variable",
+    "name": "id",
+    "variableName": "datumId"
+  }
+],
+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": "Datum",
+  "abstractKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "OrganizationBreadcrumbBreadcrumbDataOverviewQuery",
+    "selections": [
+      {
+        "alias": "datum",
+        "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": "OrganizationBreadcrumbBreadcrumbDataOverviewQuery",
+    "selections": [
+      {
+        "alias": "datum",
+        "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": "def453349ef7d9e50a0c22ae89809a1d",
+    "id": null,
+    "metadata": {},
+    "name": "OrganizationBreadcrumbBreadcrumbDataOverviewQuery",
+    "operationKind": "query",
+    "text": "query OrganizationBreadcrumbBreadcrumbDataOverviewQuery(\n  $datumId: ID!\n) {\n  datum: node(id: $datumId) {\n    __typename\n    id\n    ... on Datum {\n      name\n    }\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "1e0885f1072995735ebaa637b59f3325";
+
+export default node;

apps/console/src/pages/organizations/data/DataListView.tsx

@@ -19,6 +19,7 @@ import { DataListViewPaginationQuery } from "./__generated__/DataListViewPaginat
 import { DataListView_data$key } from "./__generated__/DataListView_data.graphql";
 import { PageTemplate } from "@/components/PageTemplate";
 import { DataListViewSkeleton } from "./DataListPage";
+import { BreadCrumb } from "../OrganizationBreadcrumb";
 
 const ITEMS_PER_PAGE = 25;
 
@@ -185,6 +186,7 @@ function DataListContent({
 
   return (
     <>
+      <BreadCrumb />
       <PageTemplate
         title="Data"
         description="Keep track of your organization's data and their data sensitivity."

apps/console/src/pages/organizations/data/DatumView.tsx

@@ -27,6 +27,7 @@ import {
 import PeopleSelector from "@/components/PeopleSelector";
 import { Badge } from "@/components/ui/badge";
 import { X } from "lucide-react";
+import { BreadCrumb } from "../OrganizationBreadcrumb";
 
 const datumViewQuery = graphql`
   query DatumViewQuery($datumId: ID!, $organizationId: ID!) {
@@ -244,6 +245,8 @@ function DatumViewContent({
     .filter((node): node is Vendor => node != null);
 
   return (
+    <>
+      <BreadCrumb />
       <PageTemplate title={formData.name || "Data Details"}>
         <div className="space-y-6">
           <div className="max-w-4xl space-y-6">
@@ -348,6 +351,7 @@ function DatumViewContent({
           </div>
         </div>
       </PageTemplate>
+    </>
   );
 }
 

apps/console/src/pages/organizations/data/NewDatumView.tsx

@@ -13,6 +13,7 @@ import PeopleSelector from "@/components/PeopleSelector";
 import { NewDatumViewSkeleton } from "./NewDatumPage";
 import { Badge } from "@/components/ui/badge";
 import { X } from "lucide-react";
+import { BreadCrumb } from "../OrganizationBreadcrumb";
 
 const newDatumViewQuery = graphql`
   query NewDatumViewQuery($organizationId: ID!) {
@@ -211,6 +212,8 @@ function NewDataViewContent({
     .filter((node): node is Vendor => node != null);
 
   return (
+    <>
+      <BreadCrumb />
       <PageTemplate
         title="Create Data"
         description="Add new data to your organization"
@@ -296,6 +299,7 @@ function NewDataViewContent({
           </div>
         </form>
       </PageTemplate>
+    </>
   );
 }