From 1ba430662d7b1376f29d0f4a6cedcadf7a99bdd0 Mon Sep 17 00:00:00 2001 From: Sacha Al Himdani Date: Wed, 4 Jun 2025 17:12:19 -0700 Subject: [PATCH] Add breadcrumb to data Signed-off-by: Sacha Al Himdani --- .../organizations/OrganizationBreadcrumb.tsx | 59 ++++++ ...rumbBreadcrumbDataOverviewQuery.graphql.ts | 127 ++++++++++++ .../pages/organizations/data/DataListView.tsx | 2 + .../pages/organizations/data/DatumView.tsx | 186 +++++++++--------- .../pages/organizations/data/NewDatumView.tsx | 162 +++++++-------- 5 files changed, 366 insertions(+), 170 deletions(-) create mode 100644 apps/console/src/pages/organizations/__generated__/OrganizationBreadcrumbBreadcrumbDataOverviewQuery.graphql.ts diff --git a/apps/console/src/pages/organizations/OrganizationBreadcrumb.tsx b/apps/console/src/pages/organizations/OrganizationBreadcrumb.tsx index 2f080b3da..be0a802d5 100644 --- a/apps/console/src/pages/organizations/OrganizationBreadcrumb.tsx +++ b/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 ( + <> + + + + Data + + + + + ); +} + +function BreadcrumbDataOverview() { + const { organizationId, datumId } = useParams(); + const data = useLazyLoadQuery( + graphql` + query OrganizationBreadcrumbBreadcrumbDataOverviewQuery($datumId: ID!) { + datum: node(id: $datumId) { + id + ... on Datum { + name + } + } + } + `, + { datumId: datumId! }, + { fetchPolicy: "store-or-network" }, + ); + + return ( + <> + + + + {data.datum?.name} + + + + + ); +} + export function BreadCrumb() { return ( @@ -605,6 +651,19 @@ export function BreadCrumb() { } /> + }> + } /> + + + + } + > + } /> + + > + * @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; diff --git a/apps/console/src/pages/organizations/data/DataListView.tsx b/apps/console/src/pages/organizations/data/DataListView.tsx index c68526d9d..5ec924267 100644 --- a/apps/console/src/pages/organizations/data/DataListView.tsx +++ b/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 ( <> + node != null); return ( - -
-
- handleFieldChange("name", value)} - /> - - -
-
-

Data Details

-
+ <> + + +
+
+ handleFieldChange("name", value)} + /> +
-
- -
- handleFieldChange("ownerId", value)} - placeholder="Select data owner" - /> +

Data Details

-
- - -
- {formData.selectedVendorIds.map((vendorId) => { - const vendor = vendors.find((v) => v.id === vendorId); - if (!vendor) return null; - return ( - - {vendor.name} - - - ); - })} +
+
+
+ +
+ handleFieldChange("ownerId", value)} + placeholder="Select data owner" + />
-
-
-
- +
+ + +
+ {formData.selectedVendorIds.map((vendorId) => { + const vendor = vendors.find((v) => v.id === vendorId); + if (!vendor) return null; + return ( + + {vendor.name} + + + ); + })} +
+
+ +
+
+ +
+
-
-
- + -
- - +
+ + +
-
- + + ); } diff --git a/apps/console/src/pages/organizations/data/NewDatumView.tsx b/apps/console/src/pages/organizations/data/NewDatumView.tsx index 7eba8a3b3..1b631b102 100644 --- a/apps/console/src/pages/organizations/data/NewDatumView.tsx +++ b/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 ( - -
-
- handleFieldChange("name", value)} - required - /> - -
- - handleFieldChange("ownerId", value)} - placeholder="Select data owner" + <> + + + +
+ handleFieldChange("name", value)} required /> -
-
- - -
- {formData.selectedVendorIds.map((vendorId) => { - const vendor = vendors.find((v) => v.id === vendorId); - if (!vendor) return null; - return ( - - {vendor.name} - - - ); - })} +
+ + handleFieldChange("ownerId", value)} + placeholder="Select data owner" + required + />
-
-
- - -
+
+ + +
+ {formData.selectedVendorIds.map((vendorId) => { + const vendor = vendors.find((v) => v.id === vendorId); + if (!vendor) return null; + return ( + + {vendor.name} + + + ); + })} +
+
- -
- - +
+ + +
+ + +
+ + + ); }