Add assets inventory to the new ui

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
This commit is contained in:
Sacha Al Himdani
2025-06-12 17:06:33 -07:00
parent bf266cfe56
commit 737accc787
16 changed files with 2238 additions and 1 deletions

View File

@@ -0,0 +1,276 @@
import { graphql } from "relay-runtime";
import { useMutation, usePreloadedQuery, type PreloadedQuery } from "react-relay";
import { useConfirm } from "@probo/ui";
import { useTranslate } from "@probo/i18n";
import { promisifyMutation, sprintf } from "@probo/helpers";
import { useMemo } from "react";
import type { AssetGraphListQuery } from "./__generated__/AssetGraphListQuery.graphql";
export const assetsQuery = graphql`
query AssetGraphListQuery($organizationId: ID!) {
node(id: $organizationId) {
... on Organization {
assets(first: 100) @connection(key: "AssetsPage_assets") {
__id
edges {
node {
id
name
amount
criticity
assetType
dataTypesStored
owner {
fullName
}
vendors(first: 50) {
edges {
node {
id
name
websiteUrl
}
}
}
createdAt
}
}
}
peoples(first: 100) {
edges {
node {
id
fullName
}
}
}
}
}
}
`;
export const assetNodeQuery = graphql`
query AssetGraphNodeQuery($assetId: ID!) {
node(id: $assetId) {
... on Asset {
id
name
amount
criticity
assetType
dataTypesStored
owner {
id
fullName
}
vendors(first: 50) {
edges {
node {
id
name
websiteUrl
category
}
}
}
createdAt
updatedAt
}
}
}
`;
export const createAssetMutation = graphql`
mutation AssetGraphCreateMutation(
$input: CreateAssetInput!
$connections: [ID!]!
) {
createAsset(input: $input) {
assetEdge @prependEdge(connections: $connections) {
node {
id
name
amount
criticity
assetType
dataTypesStored
owner {
id
fullName
}
vendors(first: 10) {
edges {
node {
id
name
websiteUrl
}
}
}
createdAt
}
}
}
}
`;
export const updateAssetMutation = graphql`
mutation AssetGraphUpdateMutation($input: UpdateAssetInput!) {
updateAsset(input: $input) {
asset {
id
name
amount
criticity
assetType
dataTypesStored
owner {
id
fullName
}
vendors(first: 50) {
edges {
node {
id
name
websiteUrl
}
}
}
updatedAt
}
}
}
`;
export const deleteAssetMutation = graphql`
mutation AssetGraphDeleteMutation(
$input: DeleteAssetInput!
$connections: [ID!]!
) {
deleteAsset(input: $input) {
deletedAssetId @deleteEdge(connections: $connections)
}
}
`;
export const useDeleteAsset = (
asset: { id?: string; name?: string },
connectionId: string
) => {
const [mutate] = useMutation(deleteAssetMutation);
const confirm = useConfirm();
const { __ } = useTranslate();
return () => {
if (!asset.id || !asset.name) {
return alert(__("Failed to delete asset: missing id or name"));
}
confirm(
() =>
promisifyMutation(mutate)({
variables: {
input: {
assetId: asset.id!,
},
connections: [connectionId],
},
}),
{
message: sprintf(
__(
'This will permanently delete "%s". This action cannot be undone.'
),
asset.name
),
}
);
};
};
export const useCreateAsset = (connectionId: string) => {
const [mutate] = useMutation(createAssetMutation);
const { __ } = useTranslate();
return (input: {
name: string;
amount: number;
criticity: string;
assetType: string;
ownerId: string;
organizationId: string;
vendorIds?: string[];
dataTypesStored: string;
}) => {
if (!input.name?.trim()) {
return alert(__("Failed to create asset: name is required"));
}
if (!input.ownerId) {
return alert(__("Failed to create asset: owner is required"));
}
if (!input.organizationId) {
return alert(__("Failed to create asset: organization is required"));
}
if (!input.dataTypesStored) {
return alert(__("Failed to create asset: data types stored is required"));
}
return promisifyMutation(mutate)({
variables: {
input: {
name: input.name,
amount: input.amount,
criticity: input.criticity,
assetType: input.assetType,
dataTypesStored: input.dataTypesStored || "",
ownerId: input.ownerId,
organizationId: input.organizationId,
vendorIds: input.vendorIds || [],
},
connections: [connectionId],
},
});
};
};
export const useUpdateAsset = () => {
const [mutate] = useMutation(updateAssetMutation);
const { __ } = useTranslate();
return (input: {
id: string;
name?: string;
amount?: number;
criticity?: string;
assetType?: string;
dataTypesStored?: string;
ownerId?: string;
vendorIds?: string[];
}) => {
if (!input.id) {
return alert(__("Failed to update asset: asset ID is required"));
}
return promisifyMutation(mutate)({
variables: {
input,
},
});
};
};
export const useAssets = (queryRef: PreloadedQuery<AssetGraphListQuery>) => {
const data = usePreloadedQuery(assetsQuery, queryRef);
return useMemo(() => {
const organization = data.node;
if (!organization || !organization.assets) {
return { assets: [], connectionId: "" };
}
return {
assets: organization.assets.edges.map((edge) => edge.node),
connectionId: organization.assets.__id,
};
}, [data]);
};

View File

@@ -0,0 +1,297 @@
/**
* @generated SignedSource<<8ddee1e0195c3af2818a78e1224ad297>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type AssetType = "PHYSICAL" | "VIRTUAL";
export type CriticityLevel = "HIGH" | "LOW" | "MEDIUM";
export type CreateAssetInput = {
amount: number;
assetType: AssetType;
criticity?: CriticityLevel;
dataTypesStored: string;
name: string;
organizationId: string;
ownerId: string;
vendorIds?: ReadonlyArray<string> | null | undefined;
};
export type AssetGraphCreateMutation$variables = {
connections: ReadonlyArray<string>;
input: CreateAssetInput;
};
export type AssetGraphCreateMutation$data = {
readonly createAsset: {
readonly assetEdge: {
readonly node: {
readonly amount: number;
readonly assetType: AssetType;
readonly createdAt: any;
readonly criticity: CriticityLevel;
readonly dataTypesStored: string;
readonly id: string;
readonly name: string;
readonly owner: {
readonly fullName: string;
readonly id: string;
};
readonly vendors: {
readonly edges: ReadonlyArray<{
readonly node: {
readonly id: string;
readonly name: string;
readonly websiteUrl: string | null | undefined;
};
}>;
};
};
};
};
};
export type AssetGraphCreateMutation = {
response: AssetGraphCreateMutation$data;
variables: AssetGraphCreateMutation$variables;
};
const node: ConcreteRequest = (function(){
var v0 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "connections"
},
v1 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "input"
},
v2 = [
{
"kind": "Variable",
"name": "input",
"variableName": "input"
}
],
v3 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v4 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
v5 = {
"alias": null,
"args": null,
"concreteType": "AssetEdge",
"kind": "LinkedField",
"name": "assetEdge",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Asset",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v3/*: any*/),
(v4/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amount",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "criticity",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "assetType",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "dataTypesStored",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "People",
"kind": "LinkedField",
"name": "owner",
"plural": false,
"selections": [
(v3/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "fullName",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": [
{
"kind": "Literal",
"name": "first",
"value": 10
}
],
"concreteType": "VendorConnection",
"kind": "LinkedField",
"name": "vendors",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "VendorEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Vendor",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v3/*: any*/),
(v4/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "websiteUrl",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": "vendors(first:10)"
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
};
return {
"fragment": {
"argumentDefinitions": [
(v0/*: any*/),
(v1/*: any*/)
],
"kind": "Fragment",
"metadata": null,
"name": "AssetGraphCreateMutation",
"selections": [
{
"alias": null,
"args": (v2/*: any*/),
"concreteType": "CreateAssetPayload",
"kind": "LinkedField",
"name": "createAsset",
"plural": false,
"selections": [
(v5/*: any*/)
],
"storageKey": null
}
],
"type": "Mutation",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": [
(v1/*: any*/),
(v0/*: any*/)
],
"kind": "Operation",
"name": "AssetGraphCreateMutation",
"selections": [
{
"alias": null,
"args": (v2/*: any*/),
"concreteType": "CreateAssetPayload",
"kind": "LinkedField",
"name": "createAsset",
"plural": false,
"selections": [
(v5/*: any*/),
{
"alias": null,
"args": null,
"filters": null,
"handle": "prependEdge",
"key": "",
"kind": "LinkedHandle",
"name": "assetEdge",
"handleArgs": [
{
"kind": "Variable",
"name": "connections",
"variableName": "connections"
}
]
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "f1d2e4e85879e08931d9d6815cc51ec1",
"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"
}
};
})();
(node as any).hash = "5053ed385668e9f51d916a194ea8936d";
export default node;

View File

@@ -0,0 +1,132 @@
/**
* @generated SignedSource<<067da1978a06c9feadeeff5ae6af7b50>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type DeleteAssetInput = {
assetId: string;
};
export type AssetGraphDeleteMutation$variables = {
connections: ReadonlyArray<string>;
input: DeleteAssetInput;
};
export type AssetGraphDeleteMutation$data = {
readonly deleteAsset: {
readonly deletedAssetId: string;
};
};
export type AssetGraphDeleteMutation = {
response: AssetGraphDeleteMutation$data;
variables: AssetGraphDeleteMutation$variables;
};
const node: ConcreteRequest = (function(){
var v0 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "connections"
},
v1 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "input"
},
v2 = [
{
"kind": "Variable",
"name": "input",
"variableName": "input"
}
],
v3 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "deletedAssetId",
"storageKey": null
};
return {
"fragment": {
"argumentDefinitions": [
(v0/*: any*/),
(v1/*: any*/)
],
"kind": "Fragment",
"metadata": null,
"name": "AssetGraphDeleteMutation",
"selections": [
{
"alias": null,
"args": (v2/*: any*/),
"concreteType": "DeleteAssetPayload",
"kind": "LinkedField",
"name": "deleteAsset",
"plural": false,
"selections": [
(v3/*: any*/)
],
"storageKey": null
}
],
"type": "Mutation",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": [
(v1/*: any*/),
(v0/*: any*/)
],
"kind": "Operation",
"name": "AssetGraphDeleteMutation",
"selections": [
{
"alias": null,
"args": (v2/*: any*/),
"concreteType": "DeleteAssetPayload",
"kind": "LinkedField",
"name": "deleteAsset",
"plural": false,
"selections": [
(v3/*: any*/),
{
"alias": null,
"args": null,
"filters": null,
"handle": "deleteEdge",
"key": "",
"kind": "ScalarHandle",
"name": "deletedAssetId",
"handleArgs": [
{
"kind": "Variable",
"name": "connections",
"variableName": "connections"
}
]
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "bbda9e3ed8effba4140c130883a59d07",
"id": null,
"metadata": {},
"name": "AssetGraphDeleteMutation",
"operationKind": "mutation",
"text": "mutation AssetGraphDeleteMutation(\n $input: DeleteAssetInput!\n) {\n deleteAsset(input: $input) {\n deletedAssetId\n }\n}\n"
}
};
})();
(node as any).hash = "46b040e435edef42987b5524d823f592";
export default node;

View File

@@ -0,0 +1,480 @@
/**
* @generated SignedSource<<eb81ead93d6ec8abc015415a48daaf08>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type AssetType = "PHYSICAL" | "VIRTUAL";
export type CriticityLevel = "HIGH" | "LOW" | "MEDIUM";
export type AssetGraphListQuery$variables = {
organizationId: string;
};
export type AssetGraphListQuery$data = {
readonly node: {
readonly assets?: {
readonly __id: string;
readonly edges: ReadonlyArray<{
readonly node: {
readonly amount: number;
readonly assetType: AssetType;
readonly createdAt: any;
readonly criticity: CriticityLevel;
readonly dataTypesStored: string;
readonly id: string;
readonly name: string;
readonly owner: {
readonly fullName: string;
};
readonly vendors: {
readonly edges: ReadonlyArray<{
readonly node: {
readonly id: string;
readonly name: string;
readonly websiteUrl: string | null | undefined;
};
}>;
};
};
}>;
};
readonly peoples?: {
readonly edges: ReadonlyArray<{
readonly node: {
readonly fullName: string;
readonly id: string;
};
}>;
};
};
};
export type AssetGraphListQuery = {
response: AssetGraphListQuery$data;
variables: AssetGraphListQuery$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "organizationId"
}
],
v1 = [
{
"kind": "Variable",
"name": "id",
"variableName": "organizationId"
}
],
v2 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v3 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
v4 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amount",
"storageKey": null
},
v5 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "criticity",
"storageKey": null
},
v6 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "assetType",
"storageKey": null
},
v7 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "dataTypesStored",
"storageKey": null
},
v8 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "fullName",
"storageKey": null
},
v9 = {
"alias": null,
"args": [
{
"kind": "Literal",
"name": "first",
"value": 50
}
],
"concreteType": "VendorConnection",
"kind": "LinkedField",
"name": "vendors",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "VendorEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Vendor",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
(v3/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "websiteUrl",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": "vendors(first:50)"
},
v10 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
},
v11 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
v12 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "cursor",
"storageKey": null
},
v13 = {
"alias": null,
"args": null,
"concreteType": "PageInfo",
"kind": "LinkedField",
"name": "pageInfo",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "endCursor",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "hasNextPage",
"storageKey": null
}
],
"storageKey": null
},
v14 = {
"kind": "ClientExtension",
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__id",
"storageKey": null
}
]
},
v15 = [
{
"kind": "Literal",
"name": "first",
"value": 100
}
],
v16 = {
"alias": null,
"args": (v15/*: any*/),
"concreteType": "PeopleConnection",
"kind": "LinkedField",
"name": "peoples",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "PeopleEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "People",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
(v8/*: any*/)
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": "peoples(first:100)"
};
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "AssetGraphListQuery",
"selections": [
{
"alias": null,
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"kind": "InlineFragment",
"selections": [
{
"alias": "assets",
"args": null,
"concreteType": "AssetConnection",
"kind": "LinkedField",
"name": "__AssetsPage_assets_connection",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "AssetEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Asset",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
(v3/*: any*/),
(v4/*: any*/),
(v5/*: any*/),
(v6/*: any*/),
(v7/*: any*/),
{
"alias": null,
"args": null,
"concreteType": "People",
"kind": "LinkedField",
"name": "owner",
"plural": false,
"selections": [
(v8/*: any*/)
],
"storageKey": null
},
(v9/*: any*/),
(v10/*: any*/),
(v11/*: any*/)
],
"storageKey": null
},
(v12/*: any*/)
],
"storageKey": null
},
(v13/*: any*/),
(v14/*: any*/)
],
"storageKey": null
},
(v16/*: any*/)
],
"type": "Organization",
"abstractKey": null
}
],
"storageKey": null
}
],
"type": "Query",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "AssetGraphListQuery",
"selections": [
{
"alias": null,
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v11/*: any*/),
{
"kind": "InlineFragment",
"selections": [
{
"alias": null,
"args": (v15/*: any*/),
"concreteType": "AssetConnection",
"kind": "LinkedField",
"name": "assets",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "AssetEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Asset",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
(v3/*: any*/),
(v4/*: any*/),
(v5/*: any*/),
(v6/*: any*/),
(v7/*: any*/),
{
"alias": null,
"args": null,
"concreteType": "People",
"kind": "LinkedField",
"name": "owner",
"plural": false,
"selections": [
(v8/*: any*/),
(v2/*: any*/)
],
"storageKey": null
},
(v9/*: any*/),
(v10/*: any*/),
(v11/*: any*/)
],
"storageKey": null
},
(v12/*: any*/)
],
"storageKey": null
},
(v13/*: any*/),
(v14/*: any*/)
],
"storageKey": "assets(first:100)"
},
{
"alias": null,
"args": (v15/*: any*/),
"filters": null,
"handle": "connection",
"key": "AssetsPage_assets",
"kind": "LinkedHandle",
"name": "assets"
},
(v16/*: any*/)
],
"type": "Organization",
"abstractKey": null
},
(v2/*: any*/)
],
"storageKey": null
}
]
},
"params": {
"cacheID": "2b452fda67547e63fb04fd4c6ae3ec7e",
"id": null,
"metadata": {
"connection": [
{
"count": null,
"cursor": null,
"direction": "forward",
"path": [
"node",
"assets"
]
}
]
},
"name": "AssetGraphListQuery",
"operationKind": "query",
"text": "query AssetGraphListQuery(\n $organizationId: ID!\n) {\n node(id: $organizationId) {\n __typename\n ... on Organization {\n assets(first: 100) {\n edges {\n node {\n id\n name\n amount\n criticity\n assetType\n dataTypesStored\n owner {\n fullName\n id\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 }\n }\n peoples(first: 100) {\n edges {\n node {\n id\n fullName\n }\n }\n }\n }\n id\n }\n}\n"
}
};
})();
(node as any).hash = "63f6a6df2bdbcd5539e28f892e54c686";
export default node;

View File

@@ -0,0 +1,289 @@
/**
* @generated SignedSource<<bdc352ae0c426ad29ff6e0f53dc357cf>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type AssetType = "PHYSICAL" | "VIRTUAL";
export type CriticityLevel = "HIGH" | "LOW" | "MEDIUM";
export type VendorCategory = "ANALYTICS" | "CLOUD_MONITORING" | "CLOUD_PROVIDER" | "COLLABORATION" | "CUSTOMER_SUPPORT" | "DATA_STORAGE_AND_PROCESSING" | "DOCUMENT_MANAGEMENT" | "EMPLOYEE_MANAGEMENT" | "ENGINEERING" | "FINANCE" | "IDENTITY_PROVIDER" | "IT" | "MARKETING" | "OFFICE_OPERATIONS" | "OTHER" | "PASSWORD_MANAGEMENT" | "PRODUCT_AND_DESIGN" | "PROFESSIONAL_SERVICES" | "RECRUITING" | "SALES" | "SECURITY" | "VERSION_CONTROL";
export type AssetGraphNodeQuery$variables = {
assetId: string;
};
export type AssetGraphNodeQuery$data = {
readonly node: {
readonly amount?: number;
readonly assetType?: AssetType;
readonly createdAt?: any;
readonly criticity?: CriticityLevel;
readonly dataTypesStored?: string;
readonly id?: string;
readonly name?: string;
readonly owner?: {
readonly fullName: string;
readonly id: string;
};
readonly updatedAt?: any;
readonly vendors?: {
readonly edges: ReadonlyArray<{
readonly node: {
readonly category: VendorCategory;
readonly id: string;
readonly name: string;
readonly websiteUrl: string | null | undefined;
};
}>;
};
};
};
export type AssetGraphNodeQuery = {
response: AssetGraphNodeQuery$data;
variables: AssetGraphNodeQuery$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "assetId"
}
],
v1 = [
{
"kind": "Variable",
"name": "id",
"variableName": "assetId"
}
],
v2 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v3 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
v4 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amount",
"storageKey": null
},
v5 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "criticity",
"storageKey": null
},
v6 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "assetType",
"storageKey": null
},
v7 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "dataTypesStored",
"storageKey": null
},
v8 = {
"alias": null,
"args": null,
"concreteType": "People",
"kind": "LinkedField",
"name": "owner",
"plural": false,
"selections": [
(v2/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "fullName",
"storageKey": null
}
],
"storageKey": null
},
v9 = {
"alias": null,
"args": [
{
"kind": "Literal",
"name": "first",
"value": 50
}
],
"concreteType": "VendorConnection",
"kind": "LinkedField",
"name": "vendors",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "VendorEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Vendor",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
(v3/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "websiteUrl",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "category",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": "vendors(first:50)"
},
v10 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
},
v11 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "updatedAt",
"storageKey": null
};
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "AssetGraphNodeQuery",
"selections": [
{
"alias": null,
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"kind": "InlineFragment",
"selections": [
(v2/*: any*/),
(v3/*: any*/),
(v4/*: any*/),
(v5/*: any*/),
(v6/*: any*/),
(v7/*: any*/),
(v8/*: any*/),
(v9/*: any*/),
(v10/*: any*/),
(v11/*: any*/)
],
"type": "Asset",
"abstractKey": null
}
],
"storageKey": null
}
],
"type": "Query",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "AssetGraphNodeQuery",
"selections": [
{
"alias": null,
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
(v2/*: any*/),
{
"kind": "InlineFragment",
"selections": [
(v3/*: any*/),
(v4/*: any*/),
(v5/*: any*/),
(v6/*: any*/),
(v7/*: any*/),
(v8/*: any*/),
(v9/*: any*/),
(v10/*: any*/),
(v11/*: any*/)
],
"type": "Asset",
"abstractKey": null
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "cd1d7c48ccf01acee749af3b8948fb9a",
"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"
}
};
})();
(node as any).hash = "47e84c9ea1c9ab9310ad493219c12f3f";
export default node;

View File

@@ -0,0 +1,244 @@
/**
* @generated SignedSource<<ead1e328f3bc8ddc8f4c98cee6838ee9>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type AssetType = "PHYSICAL" | "VIRTUAL";
export type CriticityLevel = "HIGH" | "LOW" | "MEDIUM";
export type UpdateAssetInput = {
amount?: number | null | undefined;
assetType?: AssetType | null | undefined;
criticity?: CriticityLevel | null | undefined;
dataTypesStored?: string | null | undefined;
id: string;
name?: string | null | undefined;
ownerId?: string | null | undefined;
vendorIds?: ReadonlyArray<string> | null | undefined;
};
export type AssetGraphUpdateMutation$variables = {
input: UpdateAssetInput;
};
export type AssetGraphUpdateMutation$data = {
readonly updateAsset: {
readonly asset: {
readonly amount: number;
readonly assetType: AssetType;
readonly criticity: CriticityLevel;
readonly dataTypesStored: string;
readonly id: string;
readonly name: string;
readonly owner: {
readonly fullName: string;
readonly id: string;
};
readonly updatedAt: any;
readonly vendors: {
readonly edges: ReadonlyArray<{
readonly node: {
readonly id: string;
readonly name: string;
readonly websiteUrl: string | null | undefined;
};
}>;
};
};
};
};
export type AssetGraphUpdateMutation = {
response: AssetGraphUpdateMutation$data;
variables: AssetGraphUpdateMutation$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "input"
}
],
v1 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v2 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
v3 = [
{
"alias": null,
"args": [
{
"kind": "Variable",
"name": "input",
"variableName": "input"
}
],
"concreteType": "UpdateAssetPayload",
"kind": "LinkedField",
"name": "updateAsset",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Asset",
"kind": "LinkedField",
"name": "asset",
"plural": false,
"selections": [
(v1/*: any*/),
(v2/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amount",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "criticity",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "assetType",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "dataTypesStored",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "People",
"kind": "LinkedField",
"name": "owner",
"plural": false,
"selections": [
(v1/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "fullName",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": [
{
"kind": "Literal",
"name": "first",
"value": 50
}
],
"concreteType": "VendorConnection",
"kind": "LinkedField",
"name": "vendors",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "VendorEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Vendor",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v1/*: any*/),
(v2/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "websiteUrl",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": "vendors(first:50)"
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "updatedAt",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
];
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "AssetGraphUpdateMutation",
"selections": (v3/*: any*/),
"type": "Mutation",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "AssetGraphUpdateMutation",
"selections": (v3/*: any*/)
},
"params": {
"cacheID": "f5e4ccc38f842f4965c32676ae407012",
"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"
}
};
})();
(node as any).hash = "257fa8f1a9996808403fa65a06b61ba2";
export default node;

View File

@@ -12,6 +12,7 @@ import {
IconStore,
IconTodo,
IconListStack,
IconBox,
Layout,
SidebarItem,
UserDropdown as UserDropdownRoot,
@@ -118,6 +119,11 @@ export function MainLayout() {
icon={IconPageTextLine}
to={`${prefix}/documents`}
/>
<SidebarItem
label={__("Assets")}
icon={IconBox}
to={`${prefix}/assets`}
/>
<SidebarItem
label={__("Data")}
icon={IconListStack}

View File

@@ -0,0 +1,182 @@
import {
ConnectionHandler,
usePreloadedQuery,
type PreloadedQuery,
} from "react-relay";
import {
assetNodeQuery,
useDeleteAsset,
useUpdateAsset,
} from "../../../hooks/graph/AssetGraph";
import {
ActionDropdown,
Badge,
Breadcrumb,
Button,
DropdownItem,
Field,
IconTrashCan,
Option,
} from "@probo/ui";
import { useTranslate } from "@probo/i18n";
import { useOrganizationId } from "/hooks/useOrganizationId";
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 "./utils/badgeVariants";
const updateAssetSchema = z.object({
name: z.string().min(1, "Name is required"),
amount: z.number().min(1, "Amount is required"),
criticity: z.enum(["LOW", "MEDIUM", "HIGH"]),
assetType: z.enum(["PHYSICAL", "VIRTUAL"]),
dataTypesStored: z.string().min(1, "Data types stored is required"),
ownerId: z.string().min(1, "Owner is required"),
vendorIds: z.array(z.string()).optional(),
});
type Props = {
queryRef: PreloadedQuery<any>;
};
export default function AssetDetailsPage(props: Props) {
const asset = usePreloadedQuery(assetNodeQuery, props.queryRef);
const assetEntry = asset.node;
const { __ } = useTranslate();
const organizationId = useOrganizationId();
const deleteAsset = useDeleteAsset(
assetEntry,
ConnectionHandler.getConnectionID(organizationId, "AssetsPage_assets")
);
const vendors = assetEntry?.vendors?.edges.map((edge: any) => edge.node) ?? [];
const vendorIds = vendors.map((vendor: any) => vendor.id);
const { control, formState, handleSubmit, register, reset } = useFormWithSchema(updateAssetSchema, {
defaultValues: {
name: assetEntry?.name || "",
amount: assetEntry?.amount || 0,
criticity: assetEntry?.criticity || "LOW",
assetType: assetEntry?.assetType || "VIRTUAL",
dataTypesStored: assetEntry?.dataTypesStored || "",
ownerId: assetEntry?.owner?.id || "",
vendorIds: vendorIds,
},
});
const updateAsset = useUpdateAsset();
const onSubmit = handleSubmit(async (formData) => {
try {
await updateAsset({
id: assetEntry?.id,
...formData,
});
reset(formData);
} catch (error) {
console.error("Failed to update asset:", error);
}
});
return (
<div className="space-y-6">
<Breadcrumb
items={[
{
label: __("Assets"),
to: `/organizations/${organizationId}/assets`,
},
{
label: assetEntry?.name ?? "",
},
]}
/>
<div className="flex justify-between items-start">
<div className="flex items-center gap-4">
<div className="text-2xl">{assetEntry?.name}</div>
<Badge variant={getAssetTypeVariant(assetEntry?.assetType)}>
{assetEntry?.assetType === "PHYSICAL" ? __("Physical") : __("Virtual")}
</Badge>
<Badge variant={getCriticityVariant(assetEntry?.criticity)}>
{assetEntry?.criticity}
</Badge>
</div>
<ActionDropdown variant="secondary">
<DropdownItem
variant="danger"
icon={IconTrashCan}
onClick={deleteAsset}
>
{__("Delete")}
</DropdownItem>
</ActionDropdown>
</div>
<form onSubmit={onSubmit} className="space-y-6 max-w-2xl">
<Field
label={__("Name")}
{...register("name")}
type="text"
/>
<Field
label={__("Amount")}
{...register("amount", { valueAsNumber: true })}
type="number"
/>
<ControlledField
control={control}
name="criticity"
type="select"
label={__("Criticity")}
>
<Option value="LOW">{__("Low")}</Option>
<Option value="MEDIUM">{__("Medium")}</Option>
<Option value="HIGH">{__("High")}</Option>
</ControlledField>
<ControlledField
control={control}
name="assetType"
type="select"
label={__("Asset Type")}
>
<Option value="VIRTUAL">{__("Virtual")}</Option>
<Option value="PHYSICAL">{__("Physical")}</Option>
</ControlledField>
<Field
label={__("Data Types Stored")}
{...register("dataTypesStored")}
type="text"
/>
<PeopleSelectField
organizationId={organizationId}
control={control}
name="ownerId"
label={__("Owner")}
/>
<VendorsMultiSelectField
organizationId={organizationId}
control={control}
name="vendorIds"
label={__("Vendors")}
/>
<div className="flex justify-end">
{formState.isDirty && (
<Button type="submit" disabled={formState.isSubmitting}>
{formState.isSubmitting ? __("Updating...") : __("Update")}
</Button>
)}
</div>
</form>
</div>
);
}

View File

@@ -0,0 +1,143 @@
import {
Button,
IconPlusLarge,
PageHeader,
Table,
Thead,
Tbody,
Tr,
Th,
Td,
Badge,
ActionDropdown,
DropdownItem,
IconTrashCan,
Avatar,
} from "@probo/ui";
import { useTranslate } from "@probo/i18n";
import { usePageTitle } from "@probo/hooks";
import { type PreloadedQuery } from "react-relay";
import { useOrganizationId } from "/hooks/useOrganizationId";
import { CreateAssetDialog } from "./dialogs/CreateAssetDialog";
import { useDeleteAsset, useAssets } from "../../../hooks/graph/AssetGraph";
import type { AssetGraphListQuery } from "/hooks/graph/__generated__/AssetGraphListQuery.graphql";
import { faviconUrl } from "@probo/helpers";
import type { NodeOf } from "/types";
import { getAssetTypeVariant, getCriticityVariant } from "./utils/badgeVariants";
type AssetEntry = NodeOf<NonNullable<NonNullable<AssetGraphListQuery["response"]["node"]>["assets"]>>;
type Props = {
queryRef: PreloadedQuery<AssetGraphListQuery>;
};
export default function AssetsPage(props: Props) {
const { __ } = useTranslate();
const organizationId = useOrganizationId();
const { assets, connectionId } = useAssets(props.queryRef);
usePageTitle(__("Assets"));
return (
<div className="space-y-6">
<PageHeader
title={__("Assets")}
description={__(
"Manage your organization's assets and their classifications."
)}
>
<CreateAssetDialog connection={connectionId} organizationId={organizationId}>
<Button icon={IconPlusLarge}>{__("Add asset")}</Button>
</CreateAssetDialog>
</PageHeader>
<Table>
<Thead>
<Tr>
<Th>{__("Name")}</Th>
<Th>{__("Type")}</Th>
<Th>{__("Criticity")}</Th>
<Th>{__("Amount")}</Th>
<Th>{__("Owner")}</Th>
<Th>{__("Vendors")}</Th>
<Th></Th>
</Tr>
</Thead>
<Tbody>
{assets.map((entry) => (
<AssetRow
key={entry.id}
entry={entry}
connectionId={connectionId}
/>
))}
</Tbody>
</Table>
</div>
);
}
function AssetRow({
entry,
connectionId,
}: {
entry: AssetEntry;
connectionId: string;
}) {
const organizationId = useOrganizationId();
const { __ } = useTranslate();
const deleteAsset = useDeleteAsset(entry, connectionId);
const vendors = entry.vendors?.edges.map(edge => edge.node) ?? [];
return (
<Tr to={`/organizations/${organizationId}/assets/${entry.id}`}>
<Td>{entry.name}</Td>
<Td>
<Badge variant={getAssetTypeVariant(entry.assetType)}>
{entry.assetType === "PHYSICAL" ? __("Physical") : __("Virtual")}
</Badge>
</Td>
<Td>
<Badge variant={getCriticityVariant(entry.criticity)}>
{entry.criticity}
</Badge>
</Td>
<Td>{entry.amount}</Td>
<Td>{entry.owner?.fullName ?? __("Unassigned")}</Td>
<Td>
{vendors.length > 0 ? (
<div className="flex flex-wrap gap-1">
{vendors.slice(0, 3).map((vendor) => (
<Badge key={vendor.id} variant="neutral" className="flex items-center gap-1">
<Avatar
name={vendor.name}
src={faviconUrl(vendor.websiteUrl)}
size="s"
/>
<span className="text-xs">{vendor.name}</span>
</Badge>
))}
{vendors.length > 3 && (
<Badge variant="neutral" className="text-xs">
+{vendors.length - 3}
</Badge>
)}
</div>
) : (
<span className="text-txt-secondary text-sm">{__("None")}</span>
)}
</Td>
<Td noLink width={50} className="text-end">
<ActionDropdown>
<DropdownItem
onClick={deleteAsset}
variant="danger"
icon={IconTrashCan}
>
{__("Delete")}
</DropdownItem>
</ActionDropdown>
</Td>
</Tr>
);
}

View File

@@ -0,0 +1,125 @@
import {
Button,
Dialog,
DialogContent,
DialogFooter,
Field,
Option,
useDialogRef,
Breadcrumb,
} from "@probo/ui";
import { useTranslate } from "@probo/i18n";
import z from "zod";
import { useFormWithSchema } from "/hooks/useFormWithSchema";
import { ControlledField } from "/components/form/ControlledField";
import { PeopleSelectField } from "/components/form/PeopleSelectField";
import { VendorsMultiSelectField } from "/components/form/VendorsMultiSelectField";
import { useCreateAsset } from "/hooks/graph/AssetGraph";
const schema = z.object({
name: z.string().min(1, "Name is required"),
amount: z.number().min(1, "Amount is required"),
criticity: z.enum(["LOW", "MEDIUM", "HIGH"]),
assetType: z.enum(["PHYSICAL", "VIRTUAL"]),
ownerId: z.string().min(1, "Owner is required"),
vendorIds: z.array(z.string()).optional(),
dataTypesStored: z.string().min(1, "Data types stored is required"),
});
type Props = {
children: React.ReactNode;
connection: string;
organizationId: string;
};
export function CreateAssetDialog({ children, connection, organizationId }: Props) {
const { __ } = useTranslate();
const { control, handleSubmit, register, formState } = useFormWithSchema(schema, {
defaultValues: {
name: "",
amount: 0,
criticity: "LOW",
assetType: "VIRTUAL",
ownerId: "",
vendorIds: [],
},
});
const ref = useDialogRef();
const createAsset = useCreateAsset(connection);
const onSubmit = handleSubmit(async (data) => {
try {
await createAsset({
...data,
organizationId,
});
ref.current?.close();
} catch (error) {
console.error("Failed to create asset:", error);
}
});
return (
<Dialog
ref={ref}
trigger={children}
title={<Breadcrumb items={[__("Assets"), __("New Asset")]} />}
>
<form onSubmit={onSubmit} className="space-y-4">
<DialogContent padded className="space-y-4">
<Field
label={__("Name")}
{...register("name")}
type="text"
/>
<Field
label={__("Amount")}
{...register("amount", { valueAsNumber: true })}
type="number"
/>
<ControlledField
control={control}
name="criticity"
type="select"
label={__("Criticity")}
>
<Option value="LOW">{__("Low")}</Option>
<Option value="MEDIUM">{__("Medium")}</Option>
<Option value="HIGH">{__("High")}</Option>
</ControlledField>
<ControlledField
control={control}
name="assetType"
type="select"
label={__("Asset Type")}
>
<Option value="VIRTUAL">{__("Virtual")}</Option>
<Option value="PHYSICAL">{__("Physical")}</Option>
</ControlledField>
<Field
label={__("Data Types Stored")}
{...register("dataTypesStored")}
type="text"
/>
<PeopleSelectField
organizationId={organizationId}
control={control}
name="ownerId"
label={__("Owner")}
/>
<VendorsMultiSelectField
organizationId={organizationId}
control={control}
name="vendorIds"
label={__("Vendors")}
/>
</DialogContent>
<DialogFooter>
<Button disabled={formState.isSubmitting} type="submit">
{__("Create")}
</Button>
</DialogFooter>
</form>
</Dialog>
);
}

View File

@@ -0,0 +1,23 @@
export const getAssetTypeVariant = (type: string) => {
switch (type) {
case "PHYSICAL":
return "warning";
case "VIRTUAL":
return "info";
default:
return "neutral";
}
};
export const getCriticityVariant = (criticity: string) => {
switch (criticity) {
case "HIGH":
return "danger";
case "MEDIUM":
return "warning";
case "LOW":
return "neutral";
default:
return "neutral";
}
};

View File

@@ -26,6 +26,7 @@ import { frameworkRoutes } from "./routes/frameworkRoutes.ts";
import { PageError } from "./components/PageError.tsx";
import { taskRoutes } from "./routes/taskRoutes.ts";
import { dataRoutes } from "./routes/dataRoutes.ts";
import { assetRoutes } from "./routes/assetRoutes.ts";
import { lazy } from "@probo/react-lazy";
function ErrorBoundary() {
@@ -94,7 +95,6 @@ const routes = [
}),
Component: lazy(() => import("./pages/organizations/SettingsPage")),
},
...dataRoutes,
...riskRoutes,
...measureRoutes,
...documentsRoutes,
@@ -102,6 +102,8 @@ const routes = [
...vendorRoutes,
...frameworkRoutes,
...taskRoutes,
...assetRoutes,
...dataRoutes,
{
path: "*",
Component: PageError,

View File

@@ -0,0 +1,26 @@
import { loadQuery } from "react-relay";
import { relayEnvironment } from "/providers/RelayProviders";
import { PageSkeleton } from "/components/skeletons/PageSkeleton";
import { lazy } from "@probo/react-lazy";
import { assetsQuery, assetNodeQuery } from "../hooks/graph/AssetGraph";
export const assetRoutes = [
{
path: "assets",
fallback: PageSkeleton,
queryLoader: (params: Record<string, string>) =>
loadQuery(relayEnvironment, assetsQuery, { organizationId: params.organizationId }),
Component: lazy(
() => import("/pages/organizations/assets/AssetsPage")
),
},
{
path: "assets/:assetId",
fallback: PageSkeleton,
queryLoader: (params: Record<string, string>) =>
loadQuery(relayEnvironment, assetNodeQuery, { assetId: params.assetId }),
Component: lazy(
() => import("/pages/organizations/assets/AssetDetailsPage")
),
},
];