rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add assets snapshots

Browse Source 
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
This commit is contained in:
Sacha Al Himdani
2025-08-29 19:05:17 +02:00
parent 612149afc8
commit 89036d3a0f
25 changed files with 839 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/console/src/hooks/graph/AssetGraph.ts
View File

@@ -5,10 +5,10 @@ import { useTranslate } from "@probo/i18n";
import { promisifyMutation, sprintf } from "@probo/helpers";
export const assetsQuery = graphql`
query AssetGraphListQuery($organizationId: ID!) {
query AssetGraphListQuery($organizationId: ID!, $snapshotId: ID) {
node(id: $organizationId) {
... on Organization {
...AssetsPageFragment
...AssetsPageFragment @arguments(snapshotId: $snapshotId)
}
}
}
@@ -19,6 +19,7 @@ export const assetNodeQuery = graphql`
node(id: $assetId) {
... on Asset {
id
snapshotId
name
amount
criticity
@@ -54,6 +55,7 @@ export const createAssetMutation = graphql`
assetEdge @prependEdge(connections: $connections) {
node {
id
snapshotId
name
amount
criticity
@@ -63,7 +65,7 @@ export const createAssetMutation = graphql`
id
fullName
}
vendors(first: 10) {
vendors(first: 50) {
edges {
node {
id
@@ -84,6 +86,7 @@ export const updateAssetMutation = graphql`
updateAsset(input: $input) {
asset {
id
snapshotId
name
amount
criticity

20
apps/console/src/hooks/graph/__generated__/AssetGraphCreateMutation.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<8ddee1e0195c3af2818a78e1224ad297>>
* @generated SignedSource<<9f6605e9adebeee2a681da0278642501>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -40,6 +40,7 @@ export type AssetGraphCreateMutation$data = {
readonly fullName: string;
readonly id: string;
};
readonly snapshotId: string | null | undefined;
readonly vendors: {
readonly edges: ReadonlyArray<{
readonly node: {
@@ -107,6 +108,13 @@ v5 = {
"plural": false,
"selections": [
(v3/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "snapshotId",
"storageKey": null
},
(v4/*: any*/),
{
"alias": null,
@@ -161,7 +169,7 @@ v5 = {
{
"kind": "Literal",
"name": "first",
"value": 10
"value": 50
}
],
"concreteType": "VendorConnection",
@@ -201,7 +209,7 @@ v5 = {
"storageKey": null
}
],
"storageKey": "vendors(first:10)"
"storageKey": "vendors(first:50)"
},
{
"alias": null,
@@ -282,16 +290,16 @@ return {
]
},
"params": {
"cacheID": "f1d2e4e85879e08931d9d6815cc51ec1",
"cacheID": "f11f5052ed6dd175bd701812c0cd136b",
"id": null,
"metadata": {},
"name": "AssetGraphCreateMutation",
"operationKind": "mutation",
"text": "mutation AssetGraphCreateMutation(\n $input: CreateAssetInput!\n) {\n createAsset(input: $input) {\n assetEdge {\n node {\n id\n name\n amount\n criticity\n assetType\n dataTypesStored\n owner {\n id\n fullName\n }\n vendors(first: 10) {\n edges {\n node {\n id\n name\n websiteUrl\n }\n }\n }\n createdAt\n }\n }\n }\n}\n"
"text": "mutation AssetGraphCreateMutation(\n $input: CreateAssetInput!\n) {\n createAsset(input: $input) {\n assetEdge {\n node {\n id\n snapshotId\n name\n amount\n criticity\n assetType\n dataTypesStored\n owner {\n id\n fullName\n }\n vendors(first: 50) {\n edges {\n node {\n id\n name\n websiteUrl\n }\n }\n }\n createdAt\n }\n }\n }\n}\n"
}
};
})();
(node as any).hash = "5053ed385668e9f51d916a194ea8936d";
(node as any).hash = "3cec119022d8dffb8536d93294e2633b";
export default node;

65
apps/console/src/hooks/graph/__generated__/AssetGraphListQuery.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<8758668524dc47bc04757126d7f423b3>>
* @generated SignedSource<<8d257a13d23e2dd68542540dd12ca35b>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -12,6 +12,7 @@ import { ConcreteRequest } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime";
export type AssetGraphListQuery$variables = {
organizationId: string;
snapshotId?: string | null | undefined;
};
export type AssetGraphListQuery$data = {
readonly node: {
@@ -29,6 +30,11 @@ var v0 = [
"defaultValue": null,
"kind": "LocalArgument",
"name": "organizationId"
},
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "snapshotId"
}
],
v1 = [
@@ -38,28 +44,40 @@ v1 = [
"variableName": "organizationId"
}
],
v2 = {
v2 = [
{
"kind": "Variable",
"name": "snapshotId",
"variableName": "snapshotId"
}
],
v3 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
v3 = {
v4 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v4 = [
v5 = [
{
"fields": (v2/*: any*/),
"kind": "ObjectValue",
"name": "filter"
},
{
"kind": "Literal",
"name": "first",
"value": 10
}
],
v5 = {
v6 = {
"alias": null,
"args": null,
"kind": "ScalarField",
@@ -85,7 +103,7 @@ return {
"kind": "InlineFragment",
"selections": [
{
"args": null,
"args": (v2/*: any*/),
"kind": "FragmentSpread",
"name": "AssetsPageFragment"
}
@@ -114,14 +132,14 @@ return {
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
(v3/*: any*/),
(v4/*: any*/),
{
"kind": "InlineFragment",
"selections": [
{
"alias": null,
"args": (v4/*: any*/),
"args": (v5/*: any*/),
"concreteType": "AssetConnection",
"kind": "LinkedField",
"name": "assets",
@@ -143,8 +161,15 @@ return {
"name": "node",
"plural": false,
"selections": [
(v3/*: any*/),
(v5/*: any*/),
(v4/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "snapshotId",
"storageKey": null
},
(v6/*: any*/),
{
"alias": null,
"args": null,
@@ -181,7 +206,7 @@ return {
"name": "owner",
"plural": false,
"selections": [
(v3/*: any*/),
(v4/*: any*/),
{
"alias": null,
"args": null,
@@ -222,8 +247,8 @@ return {
"name": "node",
"plural": false,
"selections": [
(v3/*: any*/),
(v5/*: any*/),
(v4/*: any*/),
(v6/*: any*/),
{
"alias": null,
"args": null,
@@ -247,7 +272,7 @@ return {
"name": "createdAt",
"storageKey": null
},
(v2/*: any*/)
(v3/*: any*/)
],
"storageKey": null
},
@@ -313,13 +338,13 @@ return {
]
}
],
"storageKey": "assets(first:10)"
"storageKey": null
},
{
"alias": null,
"args": (v4/*: any*/),
"args": (v5/*: any*/),
"filters": [
"orderBy"
"filter"
],
"handle": "connection",
"key": "AssetsPage_assets",
@@ -336,16 +361,16 @@ return {
]
},
"params": {
"cacheID": "7e293e732d5ff8246a1ed772e1c33984",
"cacheID": "29eec1243d3cceb5d9931562635e1f24",
"id": null,
"metadata": {},
"name": "AssetGraphListQuery",
"operationKind": "query",
"text": "query AssetGraphListQuery(\n $organizationId: ID!\n) {\n node(id: $organizationId) {\n __typename\n ... on Organization {\n ...AssetsPageFragment\n }\n id\n }\n}\n\nfragment AssetsPageFragment on Organization {\n assets(first: 10) {\n edges {\n node {\n id\n name\n amount\n criticity\n assetType\n dataTypesStored\n owner {\n id\n fullName\n }\n vendors(first: 50) {\n edges {\n node {\n id\n name\n websiteUrl\n }\n }\n }\n createdAt\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n id\n}\n"
"text": "query AssetGraphListQuery(\n $organizationId: ID!\n $snapshotId: ID\n) {\n node(id: $organizationId) {\n __typename\n ... on Organization {\n ...AssetsPageFragment_3iomuz\n }\n id\n }\n}\n\nfragment AssetsPageFragment_3iomuz on Organization {\n assets(first: 10, filter: {snapshotId: $snapshotId}) {\n edges {\n node {\n id\n snapshotId\n name\n amount\n criticity\n assetType\n dataTypesStored\n owner {\n id\n fullName\n }\n vendors(first: 50) {\n edges {\n node {\n id\n name\n websiteUrl\n }\n }\n }\n createdAt\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n id\n}\n"
}
};
})();
(node as any).hash = "88644d5fcb5f2e017df4b5d6373ce27f";
(node as any).hash = "4cbb1234b0884823285d3660334a2b29";
export default node;

40
apps/console/src/hooks/graph/__generated__/AssetGraphNodeQuery.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<bdc352ae0c426ad29ff6e0f53dc357cf>>
* @generated SignedSource<<f1d88685da6d13c894f029b8ac4cf3e4>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -28,6 +28,7 @@ export type AssetGraphNodeQuery$data = {
readonly fullName: string;
readonly id: string;
};
readonly snapshotId?: string | null | undefined;
readonly updatedAt?: any;
readonly vendors?: {
readonly edges: ReadonlyArray<{
@@ -72,38 +73,45 @@ v3 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"name": "snapshotId",
"storageKey": null
},
v4 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amount",
"name": "name",
"storageKey": null
},
v5 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "criticity",
"name": "amount",
"storageKey": null
},
v6 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "assetType",
"name": "criticity",
"storageKey": null
},
v7 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "dataTypesStored",
"name": "assetType",
"storageKey": null
},
v8 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "dataTypesStored",
"storageKey": null
},
v9 = {
"alias": null,
"args": null,
"concreteType": "People",
@@ -122,7 +130,7 @@ v8 = {
],
"storageKey": null
},
v9 = {
v10 = {
"alias": null,
"args": [
{
@@ -153,7 +161,7 @@ v9 = {
"plural": false,
"selections": [
(v2/*: any*/),
(v3/*: any*/),
(v4/*: any*/),
{
"alias": null,
"args": null,
@@ -177,14 +185,14 @@ v9 = {
],
"storageKey": "vendors(first:50)"
},
v10 = {
v11 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
},
v11 = {
v12 = {
"alias": null,
"args": null,
"kind": "ScalarField",
@@ -218,7 +226,8 @@ return {
(v8/*: any*/),
(v9/*: any*/),
(v10/*: any*/),
(v11/*: any*/)
(v11/*: any*/),
(v12/*: any*/)
],
"type": "Asset",
"abstractKey": null
@@ -263,7 +272,8 @@ return {
(v8/*: any*/),
(v9/*: any*/),
(v10/*: any*/),
(v11/*: any*/)
(v11/*: any*/),
(v12/*: any*/)
],
"type": "Asset",
"abstractKey": null
@@ -274,16 +284,16 @@ return {
]
},
"params": {
"cacheID": "cd1d7c48ccf01acee749af3b8948fb9a",
"cacheID": "6c6e10d25c9bd116703346393adb7a3f",
"id": null,
"metadata": {},
"name": "AssetGraphNodeQuery",
"operationKind": "query",
"text": "query AssetGraphNodeQuery(\n $assetId: ID!\n) {\n node(id: $assetId) {\n __typename\n ... on Asset {\n id\n name\n amount\n criticity\n assetType\n dataTypesStored\n owner {\n id\n fullName\n }\n vendors(first: 50) {\n edges {\n node {\n id\n name\n websiteUrl\n category\n }\n }\n }\n createdAt\n updatedAt\n }\n id\n }\n}\n"
"text": "query AssetGraphNodeQuery(\n $assetId: ID!\n) {\n node(id: $assetId) {\n __typename\n ... on Asset {\n id\n snapshotId\n name\n amount\n criticity\n assetType\n dataTypesStored\n owner {\n id\n fullName\n }\n vendors(first: 50) {\n edges {\n node {\n id\n name\n websiteUrl\n category\n }\n }\n }\n createdAt\n updatedAt\n }\n id\n }\n}\n"
}
};
})();
(node as any).hash = "47e84c9ea1c9ab9310ad493219c12f3f";
(node as any).hash = "60053f70c9a65d4658be7b830a3dae72";
export default node;

16
apps/console/src/hooks/graph/__generated__/AssetGraphUpdateMutation.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<ead1e328f3bc8ddc8f4c98cee6838ee9>>
* @generated SignedSource<<6bc692e9d9ab5b78611dc2a326227761>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -37,6 +37,7 @@ export type AssetGraphUpdateMutation$data = {
readonly fullName: string;
readonly id: string;
};
readonly snapshotId: string | null | undefined;
readonly updatedAt: any;
readonly vendors: {
readonly edges: ReadonlyArray<{
@@ -101,6 +102,13 @@ v3 = [
"plural": false,
"selections": [
(v1/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "snapshotId",
"storageKey": null
},
(v2/*: any*/),
{
"alias": null,
@@ -229,16 +237,16 @@ return {
"selections": (v3/*: any*/)
},
"params": {
"cacheID": "f5e4ccc38f842f4965c32676ae407012",
"cacheID": "1447ea6f965bbd6fcdba1ebc72e2d23f",
"id": null,
"metadata": {},
"name": "AssetGraphUpdateMutation",
"operationKind": "mutation",
"text": "mutation AssetGraphUpdateMutation(\n $input: UpdateAssetInput!\n) {\n updateAsset(input: $input) {\n asset {\n id\n name\n amount\n criticity\n assetType\n dataTypesStored\n owner {\n id\n fullName\n }\n vendors(first: 50) {\n edges {\n node {\n id\n name\n websiteUrl\n }\n }\n }\n updatedAt\n }\n }\n}\n"
"text": "mutation AssetGraphUpdateMutation(\n $input: UpdateAssetInput!\n) {\n updateAsset(input: $input) {\n asset {\n id\n snapshotId\n name\n amount\n criticity\n assetType\n dataTypesStored\n owner {\n id\n fullName\n }\n vendors(first: 50) {\n edges {\n node {\n id\n name\n websiteUrl\n }\n }\n }\n updatedAt\n }\n }\n}\n"
}
};
})();
(node as any).hash = "257fa8f1a9996808403fa65a06b61ba2";
(node as any).hash = "21b0c94b6245eb849e6118a58fb97490";
export default node;

58
apps/console/src/hooks/graph/__generated__/ProcessingActivityRegistryGraphNodeQuery.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<4453e7e28a9c546de765219f287f129a>>
* @generated SignedSource<<676223ac3bde5a9edf7e3d68fe3ed981>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -38,7 +38,6 @@ export type ProcessingActivityRegistryGraphNodeQuery$data = {
readonly retentionPeriod?: string | null | undefined;
readonly securityMeasures?: string | null | undefined;
readonly snapshotId?: string | null | undefined;
readonly sourceId?: string | null | undefined;
readonly specialOrCriminalData?: ProcessingActivityRegistrySpecialOrCriminalData;
readonly transferImpactAssessment?: ProcessingActivityRegistryTransferImpactAssessment;
readonly transferSafeguards?: ProcessingActivityRegistryTransferSafeguards | null | undefined;
@@ -83,115 +82,108 @@ v4 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "sourceId",
"name": "name",
"storageKey": null
},
v5 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"name": "purpose",
"storageKey": null
},
v6 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "purpose",
"name": "dataSubjectCategory",
"storageKey": null
},
v7 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "dataSubjectCategory",
"name": "personalDataCategory",
"storageKey": null
},
v8 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "personalDataCategory",
"name": "specialOrCriminalData",
"storageKey": null
},
v9 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "specialOrCriminalData",
"name": "consentEvidenceLink",
"storageKey": null
},
v10 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "consentEvidenceLink",
"name": "lawfulBasis",
"storageKey": null
},
v11 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "lawfulBasis",
"name": "recipients",
"storageKey": null
},
v12 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "recipients",
"name": "location",
"storageKey": null
},
v13 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "location",
"name": "internationalTransfers",
"storageKey": null
},
v14 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "internationalTransfers",
"name": "transferSafeguards",
"storageKey": null
},
v15 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "transferSafeguards",
"name": "retentionPeriod",
"storageKey": null
},
v16 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "retentionPeriod",
"name": "securityMeasures",
"storageKey": null
},
v17 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "securityMeasures",
"name": "dataProtectionImpactAssessment",
"storageKey": null
},
v18 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "dataProtectionImpactAssessment",
"storageKey": null
},
v19 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "transferImpactAssessment",
"storageKey": null
},
v20 = {
v19 = {
"alias": null,
"args": null,
"concreteType": "Organization",
@@ -200,18 +192,18 @@ v20 = {
"plural": false,
"selections": [
(v2/*: any*/),
(v5/*: any*/)
(v4/*: any*/)
],
"storageKey": null
},
v21 = {
v20 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
},
v22 = {
v21 = {
"alias": null,
"args": null,
"kind": "ScalarField",
@@ -255,8 +247,7 @@ return {
(v18/*: any*/),
(v19/*: any*/),
(v20/*: any*/),
(v21/*: any*/),
(v22/*: any*/)
(v21/*: any*/)
],
"type": "ProcessingActivityRegistry",
"abstractKey": null
@@ -311,8 +302,7 @@ return {
(v18/*: any*/),
(v19/*: any*/),
(v20/*: any*/),
(v21/*: any*/),
(v22/*: any*/)
(v21/*: any*/)
],
"type": "ProcessingActivityRegistry",
"abstractKey": null
@@ -323,16 +313,16 @@ return {
]
},
"params": {
"cacheID": "b8a3edd61ea5d94cc3594f40f181d27f",
"cacheID": "10b9608f3b93e930c05f415a0ac9fbec",
"id": null,
"metadata": {},
"name": "ProcessingActivityRegistryGraphNodeQuery",
"operationKind": "query",
"text": "query ProcessingActivityRegistryGraphNodeQuery(\n $processingActivityRegistryId: ID!\n) {\n node(id: $processingActivityRegistryId) {\n __typename\n ... on ProcessingActivityRegistry {\n id\n snapshotId\n sourceId\n name\n purpose\n dataSubjectCategory\n personalDataCategory\n specialOrCriminalData\n consentEvidenceLink\n lawfulBasis\n recipients\n location\n internationalTransfers\n transferSafeguards\n retentionPeriod\n securityMeasures\n dataProtectionImpactAssessment\n transferImpactAssessment\n organization {\n id\n name\n }\n createdAt\n updatedAt\n }\n id\n }\n}\n"
"text": "query ProcessingActivityRegistryGraphNodeQuery(\n $processingActivityRegistryId: ID!\n) {\n node(id: $processingActivityRegistryId) {\n __typename\n ... on ProcessingActivityRegistry {\n id\n snapshotId\n name\n purpose\n dataSubjectCategory\n personalDataCategory\n specialOrCriminalData\n consentEvidenceLink\n lawfulBasis\n recipients\n location\n internationalTransfers\n transferSafeguards\n retentionPeriod\n securityMeasures\n dataProtectionImpactAssessment\n transferImpactAssessment\n organization {\n id\n name\n }\n createdAt\n updatedAt\n }\n id\n }\n}\n"
}
};
})();
(node as any).hash = "6714c1965f54321530f73a5b7ef86fa6";
(node as any).hash = "c1728cff79a3773498b383bb32728cf6";
export default node;

57
apps/console/src/pages/organizations/assets/AssetDetailsPage.tsx
View File

@@ -20,12 +20,14 @@ import {
} from "@probo/ui";
import { useTranslate } from "@probo/i18n";
import { useOrganizationId } from "/hooks/useOrganizationId";
import { useParams } from "react-router";
import { ControlledField } from "/components/form/ControlledField";
import { PeopleSelectField } from "/components/form/PeopleSelectField";
import { VendorsMultiSelectField } from "/components/form/VendorsMultiSelectField";
import { useFormWithSchema } from "/hooks/useFormWithSchema";
import z from "zod";
import { getAssetTypeVariant, getCriticityVariant } from "@probo/helpers";
import { getAssetTypeVariant, getCriticityVariant, validateSnapshotConsistency } from "@probo/helpers";
import { SnapshotBanner } from "/components/SnapshotBanner";
const updateAssetSchema = z.object({
name: z.string().min(1, "Name is required"),
@@ -46,10 +48,21 @@ export default function AssetDetailsPage(props: Props) {
const assetEntry = asset.node;
const { __ } = useTranslate();
const organizationId = useOrganizationId();
const deleteAsset = useDeleteAsset(
assetEntry,
ConnectionHandler.getConnectionID(organizationId, "AssetsPage_assets")
const { snapshotId } = useParams<{ snapshotId?: string }>();
const isSnapshotMode = Boolean(snapshotId);
if (!assetEntry) {
return <div>{__("Asset not found")}</div>;
}
validateSnapshotConsistency(assetEntry, snapshotId);
const connectionId = ConnectionHandler.getConnectionID(
organizationId,
"AssetsPage_assets",
{ filter: { snapshotId: snapshotId || null } }
);
const deleteAsset = useDeleteAsset(assetEntry, connectionId);
const vendors = assetEntry?.vendors?.edges.map((edge: any) => edge.node) ?? [];
const vendorIds = vendors.map((vendor: any) => vendor.id);
@@ -80,13 +93,18 @@ export default function AssetDetailsPage(props: Props) {
}
});
const breadcrumbAssetsUrl = isSnapshotMode && snapshotId
? `/organizations/${organizationId}/snapshots/${snapshotId}/assets`
: `/organizations/${organizationId}/assets`;
return (
<div className="space-y-6">
{snapshotId && <SnapshotBanner snapshotId={snapshotId} />}
<Breadcrumb
items={[
{
label: __("Assets"),
to: `/organizations/${organizationId}/assets`,
to: breadcrumbAssetsUrl,
},
{
label: assetEntry?.name ?? "",
@@ -104,15 +122,17 @@ export default function AssetDetailsPage(props: Props) {
{assetEntry?.criticity}
</Badge>
</div>
<ActionDropdown variant="secondary">
<DropdownItem
variant="danger"
icon={IconTrashCan}
onClick={deleteAsset}
>
{__("Delete")}
</DropdownItem>
</ActionDropdown>
{!isSnapshotMode && (
<ActionDropdown variant="secondary">
<DropdownItem
variant="danger"
icon={IconTrashCan}
onClick={deleteAsset}
>
{__("Delete")}
</DropdownItem>
</ActionDropdown>
)}
</div>
<form onSubmit={onSubmit} className="space-y-6 max-w-2xl">
@@ -120,12 +140,14 @@ export default function AssetDetailsPage(props: Props) {
label={__("Name")}
{...register("name")}
type="text"
disabled={isSnapshotMode}
/>
<Field
label={__("Amount")}
{...register("amount", { valueAsNumber: true })}
type="number"
disabled={isSnapshotMode}
/>
<ControlledField
@@ -133,6 +155,7 @@ export default function AssetDetailsPage(props: Props) {
name="criticity"
type="select"
label={__("Criticity")}
disabled={isSnapshotMode}
>
<Option value="LOW">{__("Low")}</Option>
<Option value="MEDIUM">{__("Medium")}</Option>
@@ -144,6 +167,7 @@ export default function AssetDetailsPage(props: Props) {
name="assetType"
type="select"
label={__("Asset Type")}
disabled={isSnapshotMode}
>
<Option value="VIRTUAL">{__("Virtual")}</Option>
<Option value="PHYSICAL">{__("Physical")}</Option>
@@ -153,6 +177,7 @@ export default function AssetDetailsPage(props: Props) {
label={__("Data Types Stored")}
{...register("dataTypesStored")}
type="text"
disabled={isSnapshotMode}
/>
<PeopleSelectField
@@ -160,6 +185,7 @@ export default function AssetDetailsPage(props: Props) {
control={control}
name="ownerId"
label={__("Owner")}
disabled={isSnapshotMode}
/>
<VendorsMultiSelectField
@@ -167,10 +193,11 @@ export default function AssetDetailsPage(props: Props) {
control={control}
name="vendorIds"
label={__("Vendors")}
disabled={isSnapshotMode}
/>
<div className="flex justify-end">
{formState.isDirty && (
{formState.isDirty && !isSnapshotMode && (
<Button type="submit" disabled={formState.isSubmitting}>
{formState.isSubmitting ? __("Updating...") : __("Update")}
</Button>

52
apps/console/src/pages/organizations/assets/AssetsPage.tsx
View File

@@ -22,6 +22,7 @@ import {
type PreloadedQuery,
} from "react-relay";
import { useOrganizationId } from "/hooks/useOrganizationId";
import { useParams } from "react-router";
import { CreateAssetDialog } from "./dialogs/CreateAssetDialog";
import { useDeleteAsset, assetsQuery } from "../../../hooks/graph/AssetGraph";
import type { AssetGraphListQuery } from "/hooks/graph/__generated__/AssetGraphListQuery.graphql";
@@ -33,6 +34,7 @@ import type {
AssetsPageFragment$key,
} from "./__generated__/AssetsPageFragment.graphql";
import { SortableTable } from "/components/SortableTable";
import { SnapshotBanner } from "/components/SnapshotBanner";
const paginatedAssetsFragment = graphql`
fragment AssetsPageFragment on Organization
@@ -43,6 +45,7 @@ const paginatedAssetsFragment = graphql`
after: { type: "CursorKey", defaultValue: null }
before: { type: "CursorKey", defaultValue: null }
last: { type: "Int", defaultValue: null }
snapshotId: { type: "ID", defaultValue: null }
) {
assets(
first: $first
@@ -50,11 +53,13 @@ const paginatedAssetsFragment = graphql`
last: $last
before: $before
orderBy: $orderBy
) @connection(key: "AssetsPage_assets") {
filter: { snapshotId: $snapshotId }
) @connection(key: "AssetsPage_assets", filters: ["filter"]) {
__id
edges {
node {
id
snapshotId
name
amount
criticity
@@ -89,6 +94,8 @@ type Props = {
export default function AssetsPage(props: Props) {
const { __ } = useTranslate();
const organizationId = useOrganizationId();
const { snapshotId } = useParams<{ snapshotId?: string }>();
const isSnapshotMode = Boolean(snapshotId);
const data = usePreloadedQuery(assetsQuery, props.queryRef);
const pagination = usePaginationFragment(
@@ -102,18 +109,21 @@ export default function AssetsPage(props: Props) {
return (
<div className="space-y-6">
{snapshotId && <SnapshotBanner snapshotId={snapshotId} />}
<PageHeader
title={__("Assets")}
description={__(
"Manage your organization's assets and their classifications."
)}
>
<CreateAssetDialog
connection={connectionId}
organizationId={organizationId}
>
<Button icon={IconPlusLarge}>{__("Add asset")}</Button>
</CreateAssetDialog>
{!isSnapshotMode && (
<CreateAssetDialog
connection={connectionId}
organizationId={organizationId}
>
<Button icon={IconPlusLarge}>{__("Add asset")}</Button>
</CreateAssetDialog>
)}
</PageHeader>
<SortableTable {...pagination}>
<Thead>
@@ -150,11 +160,17 @@ function AssetRow({
}) {
const organizationId = useOrganizationId();
const { __ } = useTranslate();
const { snapshotId } = useParams<{ snapshotId?: string }>();
const isSnapshotMode = Boolean(snapshotId);
const deleteAsset = useDeleteAsset(entry, connectionId);
const vendors = entry.vendors?.edges.map((edge) => edge.node) ?? [];
const assetUrl = isSnapshotMode && snapshotId
? `/organizations/${organizationId}/snapshots/${snapshotId}/assets/${entry.id}`
: `/organizations/${organizationId}/assets/${entry.id}`;
return (
<Tr to={`/organizations/${organizationId}/assets/${entry.id}`}>
<Tr to={assetUrl}>
<Td>{entry.name}</Td>
<Td>
<Badge variant={getAssetTypeVariant(entry.assetType)}>
@@ -196,15 +212,17 @@ function AssetRow({
)}
</Td>
<Td noLink width={50} className="text-end">
<ActionDropdown>
<DropdownItem
onClick={deleteAsset}
variant="danger"
icon={IconTrashCan}
>
{__("Delete")}
</DropdownItem>
</ActionDropdown>
{!isSnapshotMode && (
<ActionDropdown>
<DropdownItem
onClick={deleteAsset}
variant="danger"
icon={IconTrashCan}
>
{__("Delete")}
</DropdownItem>
</ActionDropdown>
)}
</Td>
</Tr>
);

137
apps/console/src/pages/organizations/assets/__generated__/AssetsListQuery.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<305c2e15c19e7ead66752260c29d8794>>
* @generated SignedSource<<f2135bf85e1d0dffde8c1bcaa7940504>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -23,6 +23,7 @@ export type AssetsListQuery$variables = {
id: string;
last?: number | null | undefined;
orderBy?: AssetOrder | null | undefined;
snapshotId?: string | null | undefined;
};
export type AssetsListQuery$data = {
readonly node: {
@@ -65,55 +66,77 @@ v5 = {
"kind": "LocalArgument",
"name": "orderBy"
},
v6 = [
v6 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "snapshotId"
},
v7 = [
{
"kind": "Variable",
"name": "id",
"variableName": "id"
}
],
v7 = [
{
"kind": "Variable",
"name": "after",
"variableName": "after"
},
{
"kind": "Variable",
"name": "before",
"variableName": "before"
},
{
"kind": "Variable",
"name": "first",
"variableName": "first"
},
{
"kind": "Variable",
"name": "last",
"variableName": "last"
},
{
"kind": "Variable",
"name": "orderBy",
"variableName": "orderBy"
}
],
v8 = {
"kind": "Variable",
"name": "after",
"variableName": "after"
},
v9 = {
"kind": "Variable",
"name": "before",
"variableName": "before"
},
v10 = {
"kind": "Variable",
"name": "first",
"variableName": "first"
},
v11 = {
"kind": "Variable",
"name": "last",
"variableName": "last"
},
v12 = {
"kind": "Variable",
"name": "orderBy",
"variableName": "orderBy"
},
v13 = {
"kind": "Variable",
"name": "snapshotId",
"variableName": "snapshotId"
},
v14 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
v9 = {
v15 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v10 = {
v16 = [
(v8/*: any*/),
(v9/*: any*/),
{
"fields": [
(v13/*: any*/)
],
"kind": "ObjectValue",
"name": "filter"
},
(v10/*: any*/),
(v11/*: any*/),
(v12/*: any*/)
],
v17 = {
"alias": null,
"args": null,
"kind": "ScalarField",
@@ -128,7 +151,8 @@ return {
(v2/*: any*/),
(v3/*: any*/),
(v4/*: any*/),
(v5/*: any*/)
(v5/*: any*/),
(v6/*: any*/)
],
"kind": "Fragment",
"metadata": null,
@@ -136,14 +160,21 @@ return {
"selections": [
{
"alias": null,
"args": (v6/*: any*/),
"args": (v7/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"args": (v7/*: any*/),
"args": [
(v8/*: any*/),
(v9/*: any*/),
(v10/*: any*/),
(v11/*: any*/),
(v12/*: any*/),
(v13/*: any*/)
],
"kind": "FragmentSpread",
"name": "AssetsPageFragment"
}
@@ -162,6 +193,7 @@ return {
(v2/*: any*/),
(v4/*: any*/),
(v5/*: any*/),
(v6/*: any*/),
(v3/*: any*/)
],
"kind": "Operation",
@@ -169,20 +201,20 @@ return {
"selections": [
{
"alias": null,
"args": (v6/*: any*/),
"args": (v7/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v8/*: any*/),
(v9/*: any*/),
(v14/*: any*/),
(v15/*: any*/),
{
"kind": "InlineFragment",
"selections": [
{
"alias": null,
"args": (v7/*: any*/),
"args": (v16/*: any*/),
"concreteType": "AssetConnection",
"kind": "LinkedField",
"name": "assets",
@@ -204,8 +236,15 @@ return {
"name": "node",
"plural": false,
"selections": [
(v9/*: any*/),
(v10/*: any*/),
(v15/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "snapshotId",
"storageKey": null
},
(v17/*: any*/),
{
"alias": null,
"args": null,
@@ -242,7 +281,7 @@ return {
"name": "owner",
"plural": false,
"selections": [
(v9/*: any*/),
(v15/*: any*/),
{
"alias": null,
"args": null,
@@ -283,8 +322,8 @@ return {
"name": "node",
"plural": false,
"selections": [
(v9/*: any*/),
(v10/*: any*/),
(v15/*: any*/),
(v17/*: any*/),
{
"alias": null,
"args": null,
@@ -308,7 +347,7 @@ return {
"name": "createdAt",
"storageKey": null
},
(v8/*: any*/)
(v14/*: any*/)
],
"storageKey": null
},
@@ -378,9 +417,9 @@ return {
},
{
"alias": null,
"args": (v7/*: any*/),
"args": (v16/*: any*/),
"filters": [
"orderBy"
"filter"
],
"handle": "connection",
"key": "AssetsPage_assets",
@@ -397,16 +436,16 @@ return {
]
},
"params": {
"cacheID": "d712227ae7c1c1a4151005092f7eeaf9",
"cacheID": "2eab5fe4d402f48ac4dcd8220284ea41",
"id": null,
"metadata": {},
"name": "AssetsListQuery",
"operationKind": "query",
"text": "query AssetsListQuery(\n $after: CursorKey = null\n $before: CursorKey = null\n $first: Int = 10\n $last: Int = null\n $orderBy: AssetOrder = null\n $id: ID!\n) {\n node(id: $id) {\n __typename\n ...AssetsPageFragment_sdb03\n id\n }\n}\n\nfragment AssetsPageFragment_sdb03 on Organization {\n assets(first: $first, after: $after, last: $last, before: $before, orderBy: $orderBy) {\n edges {\n node {\n id\n name\n amount\n criticity\n assetType\n dataTypesStored\n owner {\n id\n fullName\n }\n vendors(first: 50) {\n edges {\n node {\n id\n name\n websiteUrl\n }\n }\n }\n createdAt\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n id\n}\n"
"text": "query AssetsListQuery(\n $after: CursorKey = null\n $before: CursorKey = null\n $first: Int = 10\n $last: Int = null\n $orderBy: AssetOrder = null\n $snapshotId: ID = null\n $id: ID!\n) {\n node(id: $id) {\n __typename\n ...AssetsPageFragment_38J9tm\n id\n }\n}\n\nfragment AssetsPageFragment_38J9tm on Organization {\n assets(first: $first, after: $after, last: $last, before: $before, orderBy: $orderBy, filter: {snapshotId: $snapshotId}) {\n edges {\n node {\n id\n snapshotId\n name\n amount\n criticity\n assetType\n dataTypesStored\n owner {\n id\n fullName\n }\n vendors(first: 50) {\n edges {\n node {\n id\n name\n websiteUrl\n }\n }\n }\n createdAt\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n id\n}\n"
}
};
})();
(node as any).hash = "e25e58aa9cf789614d280313c6059d5e";
(node as any).hash = "4bc1af55d208f3c773c49b753a76aa5c";
export default node;

29
apps/console/src/pages/organizations/assets/__generated__/AssetsPageFragment.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<8bacf647a39e3c33616be7e9159928df>>
* @generated SignedSource<<663b14d82ccaeebe2dda8dc256fddfc5>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -28,6 +28,7 @@ export type AssetsPageFragment$data = {
readonly fullName: string;
readonly id: string;
};
readonly snapshotId: string | null | undefined;
readonly vendors: {
readonly edges: ReadonlyArray<{
readonly node: {
@@ -94,6 +95,11 @@ return {
"defaultValue": null,
"kind": "LocalArgument",
"name": "orderBy"
},
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "snapshotId"
}
],
"kind": "Fragment",
@@ -134,9 +140,15 @@ return {
"alias": "assets",
"args": [
{
"kind": "Variable",
"name": "orderBy",
"variableName": "orderBy"
"fields": [
{
"kind": "Variable",
"name": "snapshotId",
"variableName": "snapshotId"
}
],
"kind": "ObjectValue",
"name": "filter"
}
],
"concreteType": "AssetConnection",
@@ -161,6 +173,13 @@ return {
"plural": false,
"selections": [
(v1/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "snapshotId",
"storageKey": null
},
(v2/*: any*/),
{
"alias": null,
@@ -345,6 +364,6 @@ return {
};
})();
(node as any).hash = "e25e58aa9cf789614d280313c6059d5e";
(node as any).hash = "4bc1af55d208f3c773c49b753a76aa5c";
export default node;

29
apps/console/src/routes/assetRoutes.ts
View File

@@ -3,13 +3,29 @@ import { relayEnvironment } from "/providers/RelayProviders";
import { PageSkeleton } from "/components/skeletons/PageSkeleton";
import { lazy } from "@probo/react-lazy";
import { assetsQuery, assetNodeQuery } from "../hooks/graph/AssetGraph";
import type { AppRoute } from "/routes";
export const assetRoutes = [
{
path: "assets",
fallback: PageSkeleton,
queryLoader: (params: Record<string, string>) =>
loadQuery(relayEnvironment, assetsQuery, { organizationId: params.organizationId }),
loadQuery(relayEnvironment, assetsQuery, {
organizationId: params.organizationId,
snapshotId: null
}),
Component: lazy(
() => import("/pages/organizations/assets/AssetsPage")
),
},
{
path: "snapshots/:snapshotId/assets",
fallback: PageSkeleton,
queryLoader: (params: Record<string, string>) =>
loadQuery(relayEnvironment, assetsQuery, {
organizationId: params.organizationId,
snapshotId: params.snapshotId
}),
Component: lazy(
() => import("/pages/organizations/assets/AssetsPage")
),
@@ -23,4 +39,13 @@ export const assetRoutes = [
() => import("/pages/organizations/assets/AssetDetailsPage")
),
},
];
{
path: "snapshots/:snapshotId/assets/:assetId",
fallback: PageSkeleton,
queryLoader: (params: Record<string, string>) =>
loadQuery(relayEnvironment, assetNodeQuery, { assetId: params.assetId }),
Component: lazy(
() => import("/pages/organizations/assets/AssetDetailsPage")
),
},
] satisfies AppRoute[];