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,110 +245,113 @@ function DatumViewContent({
     .filter((node): node is Vendor => node != null);
 
   return (
-    <PageTemplate title={formData.name || "Data Details"}>
+    <>
-      <div className="space-y-6">
+      <BreadCrumb />
-        <div className="max-w-4xl space-y-6">
+      <PageTemplate title={formData.name || "Data Details"}>
-          <EditableField
+        <div className="space-y-6">
-            label="Name"
+          <div className="max-w-4xl space-y-6">
-            value={formData.name}
+            <EditableField
-            onChange={(value) => handleFieldChange("name", value)}
+              label="Name"
-          />
+              value={formData.name}
-
+              onChange={(value) => handleFieldChange("name", value)}
-          <Card className="p-6">
+            />
-            <div className="space-y-4">
-              <div className="space-y-2">
-                <h2 className="text-lg font-medium">Data Details</h2>
-              </div>
 
+            <Card className="p-6">
               <div className="space-y-4">
                 <div className="space-y-2">
-                  <div className="flex items-center gap-2">
+                  <h2 className="text-lg font-medium">Data Details</h2>
-                    <Label className="text-sm">Owner</Label>
-                  </div>
-                  <PeopleSelector
-                    organizationRef={data.organization}
-                    selectedPersonId={formData.ownerId}
-                    onSelect={(value) => handleFieldChange("ownerId", value)}
-                    placeholder="Select data owner"
-                  />
                 </div>
 
-                <div className="space-y-2">
+                <div className="space-y-4">
-                  <Label className="text-sm">Vendors</Label>
+                  <div className="space-y-2">
-                  <Select
+                    <div className="flex items-center gap-2">
-                    value=""
+                      <Label className="text-sm">Owner</Label>
-                    onValueChange={handleVendorSelect}
+                    </div>
-                  >
+                    <PeopleSelector
-                    <SelectTrigger>
+                      organizationRef={data.organization}
-                      <SelectValue placeholder="Select vendors" />
+                      selectedPersonId={formData.ownerId}
-                    </SelectTrigger>
+                      onSelect={(value) => handleFieldChange("ownerId", value)}
-                    <SelectContent>
+                      placeholder="Select data owner"
-                      {vendors.map((vendor) => (
+                    />
-                        <SelectItem key={vendor.id} value={vendor.id}>
-                          {vendor.name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  <div className="flex flex-wrap gap-2 mt-2">
-                    {formData.selectedVendorIds.map((vendorId) => {
-                      const vendor = vendors.find((v) => v.id === vendorId);
-                      if (!vendor) return null;
-                      return (
-                        <Badge key={vendorId} variant="secondary" className="flex items-center gap-1">
-                          {vendor.name}
-                          <button
-                            type="button"
-                            onClick={() => handleVendorSelect(vendorId)}
-                            className="hover:bg-secondary-hover rounded-full p-0.5"
-                          >
-                            <X className="h-3 w-3" />
-                          </button>
-                        </Badge>
-                      );
-                    })}
                   </div>
-                </div>
 
-                <div className="space-y-2">
+                  <div className="space-y-2">
-                  <div className="flex items-center gap-2">
+                    <Label className="text-sm">Vendors</Label>
-                    <Label className="text-sm">Data Sensitivity</Label>
+                    <Select
+                      value=""
+                      onValueChange={handleVendorSelect}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select vendors" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {vendors.map((vendor) => (
+                          <SelectItem key={vendor.id} value={vendor.id}>
+                            {vendor.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <div className="flex flex-wrap gap-2 mt-2">
+                      {formData.selectedVendorIds.map((vendorId) => {
+                        const vendor = vendors.find((v) => v.id === vendorId);
+                        if (!vendor) return null;
+                        return (
+                          <Badge key={vendorId} variant="secondary" className="flex items-center gap-1">
+                            {vendor.name}
+                            <button
+                              type="button"
+                              onClick={() => handleVendorSelect(vendorId)}
+                              className="hover:bg-secondary-hover rounded-full p-0.5"
+                            >
+                              <X className="h-3 w-3" />
+                            </button>
+                          </Badge>
+                        );
+                      })}
+                    </div>
+                  </div>
+
+                  <div className="space-y-2">
+                    <div className="flex items-center gap-2">
+                      <Label className="text-sm">Data Sensitivity</Label>
+                    </div>
+                    <Select
+                      value={formData.dataSensitivity}
+                      onValueChange={(value) => handleFieldChange("dataSensitivity", value)}
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Select data sensitivity" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="NONE">No sensitive data</SelectItem>
+                        <SelectItem value="LOW">Public or non-sensitive data</SelectItem>
+                        <SelectItem value="MEDIUM">Internal/restricted data</SelectItem>
+                        <SelectItem value="HIGH">Confidential data</SelectItem>
+                        <SelectItem value="CRITICAL">Regulated/PII/financial data</SelectItem>
+                      </SelectContent>
+                    </Select>
                   </div>
-                  <Select
-                    value={formData.dataSensitivity}
-                    onValueChange={(value) => handleFieldChange("dataSensitivity", value)}
-                  >
-                    <SelectTrigger className="w-full">
-                      <SelectValue placeholder="Select data sensitivity" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="NONE">No sensitive data</SelectItem>
-                      <SelectItem value="LOW">Public or non-sensitive data</SelectItem>
-                      <SelectItem value="MEDIUM">Internal/restricted data</SelectItem>
-                      <SelectItem value="HIGH">Confidential data</SelectItem>
-                      <SelectItem value="CRITICAL">Regulated/PII/financial data</SelectItem>
-                    </SelectContent>
-                  </Select>
                 </div>
               </div>
-            </div>
+            </Card>
-          </Card>
 
-          <div className="mt-6 flex justify-end gap-2">
+            <div className="mt-6 flex justify-end gap-2">
-            <Button variant="outline" onClick={handleCancel}>
+              <Button variant="outline" onClick={handleCancel}>
-              Cancel
+                Cancel
-            </Button>
+              </Button>
-            <Button
+              <Button
-              onClick={handleSave}
+                onClick={handleSave}
-              className="bg-primary text-invert hover:bg-primary/90"
+                className="bg-primary text-invert hover:bg-primary/90"
-              disabled={!hasChanges}
+                disabled={!hasChanges}
-            >
+              >
-              Save Changes
+                Save Changes
-            </Button>
+              </Button>
+            </div>
           </div>
         </div>
-      </div>
+      </PageTemplate>
-    </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,91 +212,94 @@ function NewDataViewContent({
     .filter((node): node is Vendor => node != null);
 
   return (
-    <PageTemplate
+    <>
-      title="Create Data"
+      <BreadCrumb />
-      description="Add new data to your organization"
+      <PageTemplate
-    >
+        title="Create Data"
-      <form onSubmit={handleSubmit}>
+        description="Add new data to your organization"
-        <div className="max-w-2xl space-y-6">
+      >
-          <EditableField
+        <form onSubmit={handleSubmit}>
-            label="Name"
+          <div className="max-w-2xl space-y-6">
-            value={formData.name}
+            <EditableField
-            onChange={(value) => handleFieldChange("name", value)}
+              label="Name"
-            required
+              value={formData.name}
-          />
+              onChange={(value) => handleFieldChange("name", value)}
-
-          <div className="space-y-2">
-            <Label className="text-sm">Owner</Label>
-            <PeopleSelector
-              organizationRef={data.organization}
-              selectedPersonId={formData.ownerId}
-              onSelect={(value) => handleFieldChange("ownerId", value)}
-              placeholder="Select data owner"
               required
             />
-          </div>
 
-          <div className="space-y-2">
+            <div className="space-y-2">
-            <Label className="text-sm">Vendors</Label>
+              <Label className="text-sm">Owner</Label>
-            <Select
+              <PeopleSelector
-              value=""
+                organizationRef={data.organization}
-              onValueChange={handleVendorSelect}
+                selectedPersonId={formData.ownerId}
-            >
+                onSelect={(value) => handleFieldChange("ownerId", value)}
-              <SelectTrigger>
+                placeholder="Select data owner"
-                <SelectValue placeholder="Select vendors" />
+                required
-              </SelectTrigger>
+              />
-              <SelectContent>
-                {vendors.map((vendor) => (
-                  <SelectItem key={vendor.id} value={vendor.id}>
-                    {vendor.name}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <div className="flex flex-wrap gap-2 mt-2">
-              {formData.selectedVendorIds.map((vendorId) => {
-                const vendor = vendors.find((v) => v.id === vendorId);
-                if (!vendor) return null;
-                return (
-                  <Badge key={vendorId} variant="secondary" className="flex items-center gap-1">
-                    {vendor.name}
-                    <button
-                      type="button"
-                      onClick={() => handleVendorSelect(vendorId)}
-                      className="hover:bg-secondary-hover rounded-full p-0.5"
-                    >
-                      <X className="h-3 w-3" />
-                    </button>
-                  </Badge>
-                );
-              })}
             </div>
-          </div>
 
-          <div className="space-y-2">
+            <div className="space-y-2">
-            <Label className="text-sm">Data Sensitivity</Label>
+              <Label className="text-sm">Vendors</Label>
-            <Select
+              <Select
-              value={formData.dataSensitivity}
+                value=""
-              onValueChange={(value: string) =>
+                onValueChange={handleVendorSelect}
-                handleFieldChange("dataSensitivity", value as "NONE" | "LOW" | "MEDIUM" | "HIGH" | "CRITICAL")}
+              >
-            >
+                <SelectTrigger>
-              <SelectTrigger>
+                  <SelectValue placeholder="Select vendors" />
-                <SelectValue placeholder="Select data sensitivity" />
+                </SelectTrigger>
-              </SelectTrigger>
+                <SelectContent>
-              <SelectContent>
+                  {vendors.map((vendor) => (
-                <SelectItem value="NONE">No sensitive data</SelectItem>
+                    <SelectItem key={vendor.id} value={vendor.id}>
-                <SelectItem value="LOW">Public or non-sensitive data</SelectItem>
+                      {vendor.name}
-                <SelectItem value="MEDIUM">Internal/restricted data</SelectItem>
+                    </SelectItem>
-                <SelectItem value="HIGH">Confidential data</SelectItem>
+                  ))}
-                <SelectItem value="CRITICAL">Regulated/PII/financial data</SelectItem>
+                </SelectContent>
-              </SelectContent>
+              </Select>
-            </Select>
+              <div className="flex flex-wrap gap-2 mt-2">
-          </div>
+                {formData.selectedVendorIds.map((vendorId) => {
+                  const vendor = vendors.find((v) => v.id === vendorId);
+                  if (!vendor) return null;
+                  return (
+                    <Badge key={vendorId} variant="secondary" className="flex items-center gap-1">
+                      {vendor.name}
+                      <button
+                        type="button"
+                        onClick={() => handleVendorSelect(vendorId)}
+                        className="hover:bg-secondary-hover rounded-full p-0.5"
+                      >
+                        <X className="h-3 w-3" />
+                      </button>
+                    </Badge>
+                  );
+                })}
+              </div>
+            </div>
 
-          <Button type="submit">Create Data</Button>
+            <div className="space-y-2">
-        </div>
+              <Label className="text-sm">Data Sensitivity</Label>
-      </form>
+              <Select
-    </PageTemplate>
+                value={formData.dataSensitivity}
+                onValueChange={(value: string) =>
+                  handleFieldChange("dataSensitivity", value as "NONE" | "LOW" | "MEDIUM" | "HIGH" | "CRITICAL")}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select data sensitivity" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="NONE">No sensitive data</SelectItem>
+                  <SelectItem value="LOW">Public or non-sensitive data</SelectItem>
+                  <SelectItem value="MEDIUM">Internal/restricted data</SelectItem>
+                  <SelectItem value="HIGH">Confidential data</SelectItem>
+                  <SelectItem value="CRITICAL">Regulated/PII/financial data</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <Button type="submit">Create Data</Button>
+          </div>
+        </form>
+      </PageTemplate>
+    </>
   );
 }