Sacha Al Himdani
45
apps/console/src/components/SnapshotBanner.tsx
Normal file
45
apps/console/src/components/SnapshotBanner.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import { IconClock } from "@probo/ui";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import { useLazyLoadQuery, graphql } from "react-relay";
|
||||
import type { SnapshotBannerQuery } from "./__generated__/SnapshotBannerQuery.graphql";
|
||||
|
||||
const snapshotQuery = graphql`
|
||||
query SnapshotBannerQuery($snapshotId: ID!) {
|
||||
node(id: $snapshotId) {
|
||||
... on Snapshot {
|
||||
id
|
||||
name
|
||||
createdAt
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
snapshotId: string;
|
||||
};
|
||||
|
||||
export function SnapshotBanner({ snapshotId }: Props) {
|
||||
const { __, dateFormat } = useTranslate();
|
||||
|
||||
const data = useLazyLoadQuery<SnapshotBannerQuery>(snapshotQuery, { snapshotId });
|
||||
const snapshot = data.node;
|
||||
|
||||
if (!snapshot) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-warning rounded-lg p-4 flex items-center gap-3">
|
||||
<IconClock className="text-warning-600 flex-shrink-0" size={20} />
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="font-medium text-warning-800">{__("Snapshot")} {snapshot.name}</span>
|
||||
</div>
|
||||
<p className="text-sm text-warning-700">
|
||||
{__("You are viewing a snapshot of data from")} {dateFormat(snapshot.createdAt, { year: "numeric", month: "short", day: "numeric" })}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
144
apps/console/src/components/__generated__/SnapshotBannerQuery.graphql.ts
generated
Normal file
144
apps/console/src/components/__generated__/SnapshotBannerQuery.graphql.ts
generated
Normal file
@@ -0,0 +1,144 @@
|
||||
/**
|
||||
* @generated SignedSource<<a11c48ca33ac17dd7eaf6eeca4a0c20d>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
export type SnapshotBannerQuery$variables = {
|
||||
snapshotId: string;
|
||||
};
|
||||
export type SnapshotBannerQuery$data = {
|
||||
readonly node: {
|
||||
readonly createdAt?: any;
|
||||
readonly id?: string;
|
||||
readonly name?: string;
|
||||
};
|
||||
};
|
||||
export type SnapshotBannerQuery = {
|
||||
response: SnapshotBannerQuery$data;
|
||||
variables: SnapshotBannerQuery$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = [
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "snapshotId"
|
||||
}
|
||||
],
|
||||
v1 = [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "id",
|
||||
"variableName": "snapshotId"
|
||||
}
|
||||
],
|
||||
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": "createdAt",
|
||||
"storageKey": null
|
||||
};
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "SnapshotBannerQuery",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v1/*: any*/),
|
||||
"concreteType": null,
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"kind": "InlineFragment",
|
||||
"selections": [
|
||||
(v2/*: any*/),
|
||||
(v3/*: any*/),
|
||||
(v4/*: any*/)
|
||||
],
|
||||
"type": "Snapshot",
|
||||
"abstractKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Query",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Operation",
|
||||
"name": "SnapshotBannerQuery",
|
||||
"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*/)
|
||||
],
|
||||
"type": "Snapshot",
|
||||
"abstractKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "8f21371ececf96444bb6b00e52783573",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "SnapshotBannerQuery",
|
||||
"operationKind": "query",
|
||||
"text": "query SnapshotBannerQuery(\n $snapshotId: ID!\n) {\n node(id: $snapshotId) {\n __typename\n ... on Snapshot {\n id\n name\n createdAt\n }\n id\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "1602d5b6c0ae4a3122998e4d3419af05";
|
||||
|
||||
export default node;
|
||||
17
apps/console/src/components/form/SnapshotTypeOptions.tsx
Normal file
17
apps/console/src/components/form/SnapshotTypeOptions.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import { Option } from "@probo/ui";
|
||||
import { snapshotTypes, getSnapshotTypeLabel } from "@probo/helpers";
|
||||
|
||||
export function SnapshotTypeOptions() {
|
||||
const { __ } = useTranslate();
|
||||
|
||||
return (
|
||||
<>
|
||||
{snapshotTypes.map((type) => (
|
||||
<Option key={type} value={type}>
|
||||
{getSnapshotTypeLabel(__, type)}
|
||||
</Option>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,23 +1,32 @@
|
||||
import { Avatar, Field, Option, Select, Badge, Button, IconCrossLargeX } from "@probo/ui";
|
||||
import { Suspense, useState, type ComponentProps } from "react";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import { type Control, Controller } from "react-hook-form";
|
||||
import { type Control, Controller, type FieldValues } from "react-hook-form";
|
||||
import { useVendors } from "/hooks/graph/VendorGraph.ts";
|
||||
import { faviconUrl } from "@probo/helpers";
|
||||
import type { Path } from "react-hook-form";
|
||||
|
||||
type Props = {
|
||||
type Vendor = {
|
||||
id: string;
|
||||
name: string;
|
||||
websiteUrl: string | null | undefined;
|
||||
};
|
||||
|
||||
type Props<T extends FieldValues = FieldValues> = {
|
||||
organizationId: string;
|
||||
control: Control<any>;
|
||||
control: Control<T>;
|
||||
name: string;
|
||||
label?: string;
|
||||
error?: string;
|
||||
selectedVendors?: Vendor[];
|
||||
} & ComponentProps<typeof Field>;
|
||||
|
||||
export function VendorsMultiSelectField({
|
||||
export function VendorsMultiSelectField<T extends FieldValues = FieldValues>({
|
||||
organizationId,
|
||||
control,
|
||||
selectedVendors = [],
|
||||
...props
|
||||
}: Props) {
|
||||
}: Props<T>) {
|
||||
return (
|
||||
<Field {...props}>
|
||||
<Suspense
|
||||
@@ -28,29 +37,40 @@ export function VendorsMultiSelectField({
|
||||
control={control}
|
||||
name={props.name}
|
||||
disabled={props.disabled}
|
||||
selectedVendors={selectedVendors}
|
||||
/>
|
||||
</Suspense>
|
||||
</Field>
|
||||
);
|
||||
}
|
||||
|
||||
function VendorsMultiSelectWithQuery(
|
||||
props: Pick<Props, "organizationId" | "control" | "name" | "disabled">
|
||||
function VendorsMultiSelectWithQuery<T extends FieldValues = FieldValues>(
|
||||
props: Pick<Props<T>, "organizationId" | "control" | "name" | "disabled" | "selectedVendors">
|
||||
) {
|
||||
const { __ } = useTranslate();
|
||||
const { name, organizationId, control } = props;
|
||||
const { name, organizationId, control, selectedVendors = [] } = props;
|
||||
const vendors = useVendors(organizationId);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const allVendors = [...vendors];
|
||||
if (props.disabled) {
|
||||
selectedVendors.forEach(selectedVendor => {
|
||||
if (!allVendors.find(v => v.id === selectedVendor.id)) {
|
||||
allVendors.push(selectedVendor);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Controller
|
||||
control={control}
|
||||
name={name}
|
||||
name={name as Path<T>}
|
||||
render={({ field }) => {
|
||||
const selectedVendorIds = Array.isArray(field.value) ? field.value : [];
|
||||
const selectedVendors = vendors.filter(v => selectedVendorIds.includes(v.id));
|
||||
const availableVendors = vendors.filter(v => !selectedVendorIds.includes(v.id));
|
||||
const selectedVendorIds = (Array.isArray(field.value) ? field.value : []) as string[];
|
||||
|
||||
const selectedVendors = allVendors.filter(v => selectedVendorIds.includes(v.id));
|
||||
const availableVendors = allVendors.filter(v => !selectedVendorIds.includes(v.id));
|
||||
|
||||
const handleAddVendor = (vendorId: string) => {
|
||||
const newValue = [...selectedVendorIds, vendorId];
|
||||
@@ -65,7 +85,7 @@ function VendorsMultiSelectWithQuery(
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{availableVendors.length > 0 && (
|
||||
{availableVendors.length > 0 && !props.disabled && (
|
||||
<Select
|
||||
disabled={props.disabled}
|
||||
id={name}
|
||||
@@ -108,12 +128,14 @@ function VendorsMultiSelectWithQuery(
|
||||
size="s"
|
||||
/>
|
||||
<span>{vendor.name}</span>
|
||||
<Button
|
||||
variant="tertiary"
|
||||
icon={IconCrossLargeX}
|
||||
onClick={() => handleRemoveVendor(vendor.id)}
|
||||
className="h-4 w-4 p-0 hover:bg-transparent"
|
||||
/>
|
||||
{!props.disabled && (
|
||||
<Button
|
||||
variant="tertiary"
|
||||
icon={IconCrossLargeX}
|
||||
onClick={() => handleRemoveVendor(vendor.id)}
|
||||
className="h-4 w-4 p-0 hover:bg-transparent"
|
||||
/>
|
||||
)}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -5,10 +5,10 @@ import { useTranslate } from "@probo/i18n";
|
||||
import { promisifyMutation, sprintf } from "@probo/helpers";
|
||||
|
||||
export const dataQuery = graphql`
|
||||
query DatumGraphListQuery($organizationId: ID!) {
|
||||
query DatumGraphListQuery($organizationId: ID!, $snapshotId: ID = null) {
|
||||
node(id: $organizationId) {
|
||||
... on Organization {
|
||||
...DataPageFragment
|
||||
...DataPageFragment @arguments(snapshotId: $snapshotId)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -60,7 +60,7 @@ export const createDatumMutation = graphql`
|
||||
id
|
||||
fullName
|
||||
}
|
||||
vendors(first: 10) {
|
||||
vendors(first: 50) {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
|
||||
129
apps/console/src/hooks/graph/SnapshotGraph.ts
Normal file
129
apps/console/src/hooks/graph/SnapshotGraph.ts
Normal file
@@ -0,0 +1,129 @@
|
||||
import { graphql } from "relay-runtime";
|
||||
import { useMutation } from "react-relay";
|
||||
import { useConfirm } from "@probo/ui";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import { promisifyMutation, sprintf } from "@probo/helpers";
|
||||
import { useMutationWithToasts } from "../useMutationWithToasts";
|
||||
|
||||
export const SnapshotsConnectionKey = "SnapshotsPage_snapshots";
|
||||
|
||||
export const snapshotsQuery = graphql`
|
||||
query SnapshotGraphListQuery($organizationId: ID!) {
|
||||
organization: node(id: $organizationId) {
|
||||
... on Organization {
|
||||
...SnapshotsPageFragment
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const snapshotNodeQuery = graphql`
|
||||
query SnapshotGraphNodeQuery($snapshotId: ID!) {
|
||||
node(id: $snapshotId) {
|
||||
... on Snapshot {
|
||||
id
|
||||
name
|
||||
description
|
||||
type
|
||||
organization {
|
||||
id
|
||||
name
|
||||
}
|
||||
createdAt
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const createSnapshotMutation = graphql`
|
||||
mutation SnapshotGraphCreateMutation(
|
||||
$input: CreateSnapshotInput!
|
||||
$connections: [ID!]!
|
||||
) {
|
||||
createSnapshot(input: $input) {
|
||||
snapshotEdge @prependEdge(connections: $connections) {
|
||||
node {
|
||||
id
|
||||
name
|
||||
description
|
||||
type
|
||||
createdAt
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const deleteSnapshotMutation = graphql`
|
||||
mutation SnapshotGraphDeleteMutation(
|
||||
$input: DeleteSnapshotInput!
|
||||
$connections: [ID!]!
|
||||
) {
|
||||
deleteSnapshot(input: $input) {
|
||||
deletedSnapshotId @deleteEdge(connections: $connections)
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const useDeleteSnapshot = (
|
||||
snapshot: { id: string; name: string },
|
||||
connectionId: string
|
||||
) => {
|
||||
const { __ } = useTranslate();
|
||||
const [mutate] = useMutationWithToasts(deleteSnapshotMutation, {
|
||||
successMessage: __("Snapshot deleted successfully"),
|
||||
errorMessage: __("Failed to delete snapshot"),
|
||||
});
|
||||
const confirm = useConfirm();
|
||||
|
||||
return () => {
|
||||
confirm(
|
||||
() =>
|
||||
mutate({
|
||||
variables: {
|
||||
input: {
|
||||
snapshotId: snapshot.id,
|
||||
},
|
||||
connections: [connectionId],
|
||||
},
|
||||
}),
|
||||
{
|
||||
message: sprintf(
|
||||
__(
|
||||
"This will permanently delete the snapshot %s. This action cannot be undone."
|
||||
),
|
||||
snapshot.name
|
||||
),
|
||||
}
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
export const useCreateSnapshot = (connectionId: string) => {
|
||||
const [mutate] = useMutation(createSnapshotMutation);
|
||||
const { __ } = useTranslate();
|
||||
|
||||
return (input: {
|
||||
organizationId: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
}) => {
|
||||
if (!input.organizationId) {
|
||||
return alert(__("Failed to create snapshot: organization is required"));
|
||||
}
|
||||
if (!input.name) {
|
||||
return alert(__("Failed to create snapshot: name is required"));
|
||||
}
|
||||
|
||||
return promisifyMutation(mutate)({
|
||||
variables: {
|
||||
input: {
|
||||
organizationId: input.organizationId,
|
||||
name: input.name,
|
||||
description: input.description,
|
||||
},
|
||||
connections: [connectionId],
|
||||
},
|
||||
});
|
||||
};
|
||||
};
|
||||
@@ -188,9 +188,13 @@ const vendorsSelectQuery = graphql`
|
||||
`;
|
||||
|
||||
export function useVendors(organizationId: string) {
|
||||
const data = useLazyLoadQuery<VendorGraphSelectQuery>(vendorsSelectQuery, {
|
||||
organizationId: organizationId,
|
||||
});
|
||||
const data = useLazyLoadQuery<VendorGraphSelectQuery>(
|
||||
vendorsSelectQuery,
|
||||
{
|
||||
organizationId: organizationId,
|
||||
},
|
||||
{ fetchPolicy: "network-only" }
|
||||
);
|
||||
return useMemo(() => {
|
||||
return data.organization?.vendors?.edges.map((edge) => edge.node) ?? [];
|
||||
}, [data]);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* @generated SignedSource<<36898ed088182687925ddd9d0b08b66a>>
|
||||
* @generated SignedSource<<43b67fe6155860e492f2a36543727d49>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
@@ -133,7 +133,7 @@ v5 = {
|
||||
{
|
||||
"kind": "Literal",
|
||||
"name": "first",
|
||||
"value": 10
|
||||
"value": 50
|
||||
}
|
||||
],
|
||||
"concreteType": "VendorConnection",
|
||||
@@ -173,7 +173,7 @@ v5 = {
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": "vendors(first:10)"
|
||||
"storageKey": "vendors(first:50)"
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
@@ -254,16 +254,16 @@ return {
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "31d614c716382bedf677502633969fac",
|
||||
"cacheID": "23ff315b0cc090bcaca7739d945d8d1b",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "DatumGraphCreateMutation",
|
||||
"operationKind": "mutation",
|
||||
"text": "mutation DatumGraphCreateMutation(\n $input: CreateDatumInput!\n) {\n createDatum(input: $input) {\n datumEdge {\n node {\n id\n name\n dataClassification\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 DatumGraphCreateMutation(\n $input: CreateDatumInput!\n) {\n createDatum(input: $input) {\n datumEdge {\n node {\n id\n name\n dataClassification\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 = "b99929d8e7d004f77b06510051ee2e04";
|
||||
(node as any).hash = "b148ef55d18d3a45c04b5072581f2285";
|
||||
|
||||
export default node;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* @generated SignedSource<<157213d294566208969ddbfd7e79fd91>>
|
||||
* @generated SignedSource<<453e3cd4a7a9fdbacd183d097ec95a05>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
@@ -12,6 +12,7 @@ import { ConcreteRequest } from 'relay-runtime';
|
||||
import { FragmentRefs } from "relay-runtime";
|
||||
export type DatumGraphListQuery$variables = {
|
||||
organizationId: string;
|
||||
snapshotId?: string | null | undefined;
|
||||
};
|
||||
export type DatumGraphListQuery$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": "DataPageFragment"
|
||||
}
|
||||
@@ -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": "DatumConnection",
|
||||
"kind": "LinkedField",
|
||||
"name": "data",
|
||||
@@ -143,8 +161,8 @@ return {
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v3/*: any*/),
|
||||
(v5/*: any*/),
|
||||
(v4/*: any*/),
|
||||
(v6/*: any*/),
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
@@ -167,7 +185,7 @@ return {
|
||||
"name": "fullName",
|
||||
"storageKey": null
|
||||
},
|
||||
(v3/*: any*/)
|
||||
(v4/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
},
|
||||
@@ -201,8 +219,8 @@ return {
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v3/*: any*/),
|
||||
(v5/*: any*/),
|
||||
(v4/*: any*/),
|
||||
(v6/*: any*/),
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
@@ -226,7 +244,7 @@ return {
|
||||
"name": "createdAt",
|
||||
"storageKey": null
|
||||
},
|
||||
(v2/*: any*/)
|
||||
(v3/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
},
|
||||
@@ -292,13 +310,14 @@ return {
|
||||
]
|
||||
}
|
||||
],
|
||||
"storageKey": "data(first:10)"
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v4/*: any*/),
|
||||
"args": (v5/*: any*/),
|
||||
"filters": [
|
||||
"orderBy"
|
||||
"orderBy",
|
||||
"filter"
|
||||
],
|
||||
"handle": "connection",
|
||||
"key": "DataPage_data",
|
||||
@@ -315,16 +334,16 @@ return {
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "93f16f8bcd6ae56a947a18b90146fac4",
|
||||
"cacheID": "7200b7cf37859346d740de3f96f1d443",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "DatumGraphListQuery",
|
||||
"operationKind": "query",
|
||||
"text": "query DatumGraphListQuery(\n $organizationId: ID!\n) {\n node(id: $organizationId) {\n __typename\n ... on Organization {\n ...DataPageFragment\n }\n id\n }\n}\n\nfragment DataPageFragment on Organization {\n data(first: 10) {\n edges {\n node {\n id\n name\n dataClassification\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 hasPreviousPage\n startCursor\n }\n }\n id\n}\n"
|
||||
"text": "query DatumGraphListQuery(\n $organizationId: ID!\n $snapshotId: ID = null\n) {\n node(id: $organizationId) {\n __typename\n ... on Organization {\n ...DataPageFragment_3iomuz\n }\n id\n }\n}\n\nfragment DataPageFragment_3iomuz on Organization {\n data(first: 10, filter: {snapshotId: $snapshotId}) {\n edges {\n node {\n id\n name\n dataClassification\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 hasPreviousPage\n startCursor\n }\n }\n id\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "ebacc146f9ff0dc7fac8dcfcb8e6f74a";
|
||||
(node as any).hash = "e0782332e7e82bd1a5e7f5e40ada2dae";
|
||||
|
||||
export default node;
|
||||
|
||||
194
apps/console/src/hooks/graph/__generated__/SnapshotGraphCreateMutation.graphql.ts
generated
Normal file
194
apps/console/src/hooks/graph/__generated__/SnapshotGraphCreateMutation.graphql.ts
generated
Normal file
@@ -0,0 +1,194 @@
|
||||
/**
|
||||
* @generated SignedSource<<459d0a122659971be9b24c79f47691e7>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
export type SnapshotsType = "ASSETS" | "COMPLIANCE_REGISTRIES" | "DATA" | "NON_CONFORMITY_REGISTRIES" | "RISKS" | "VENDORS";
|
||||
export type CreateSnapshotInput = {
|
||||
description?: string | null | undefined;
|
||||
name: string;
|
||||
organizationId: string;
|
||||
type: SnapshotsType;
|
||||
};
|
||||
export type SnapshotGraphCreateMutation$variables = {
|
||||
connections: ReadonlyArray<string>;
|
||||
input: CreateSnapshotInput;
|
||||
};
|
||||
export type SnapshotGraphCreateMutation$data = {
|
||||
readonly createSnapshot: {
|
||||
readonly snapshotEdge: {
|
||||
readonly node: {
|
||||
readonly createdAt: any;
|
||||
readonly description: string | null | undefined;
|
||||
readonly id: string;
|
||||
readonly name: string;
|
||||
readonly type: SnapshotsType;
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
export type SnapshotGraphCreateMutation = {
|
||||
response: SnapshotGraphCreateMutation$data;
|
||||
variables: SnapshotGraphCreateMutation$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,
|
||||
"concreteType": "SnapshotEdge",
|
||||
"kind": "LinkedField",
|
||||
"name": "snapshotEdge",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "Snapshot",
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "name",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "description",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "type",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"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": "SnapshotGraphCreateMutation",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v2/*: any*/),
|
||||
"concreteType": "CreateSnapshotPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "createSnapshot",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v3/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Mutation",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": [
|
||||
(v1/*: any*/),
|
||||
(v0/*: any*/)
|
||||
],
|
||||
"kind": "Operation",
|
||||
"name": "SnapshotGraphCreateMutation",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v2/*: any*/),
|
||||
"concreteType": "CreateSnapshotPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "createSnapshot",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v3/*: any*/),
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"filters": null,
|
||||
"handle": "prependEdge",
|
||||
"key": "",
|
||||
"kind": "LinkedHandle",
|
||||
"name": "snapshotEdge",
|
||||
"handleArgs": [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "connections",
|
||||
"variableName": "connections"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "aa2e8ace42f6154271b5d035ae18cad2",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "SnapshotGraphCreateMutation",
|
||||
"operationKind": "mutation",
|
||||
"text": "mutation SnapshotGraphCreateMutation(\n $input: CreateSnapshotInput!\n) {\n createSnapshot(input: $input) {\n snapshotEdge {\n node {\n id\n name\n description\n type\n createdAt\n }\n }\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "97d681687efde567b46938fc0541635f";
|
||||
|
||||
export default node;
|
||||
132
apps/console/src/hooks/graph/__generated__/SnapshotGraphDeleteMutation.graphql.ts
generated
Normal file
132
apps/console/src/hooks/graph/__generated__/SnapshotGraphDeleteMutation.graphql.ts
generated
Normal file
@@ -0,0 +1,132 @@
|
||||
/**
|
||||
* @generated SignedSource<<6a696f2d1ebd4a2e733bd9d1b3c42017>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
export type DeleteSnapshotInput = {
|
||||
snapshotId: string;
|
||||
};
|
||||
export type SnapshotGraphDeleteMutation$variables = {
|
||||
connections: ReadonlyArray<string>;
|
||||
input: DeleteSnapshotInput;
|
||||
};
|
||||
export type SnapshotGraphDeleteMutation$data = {
|
||||
readonly deleteSnapshot: {
|
||||
readonly deletedSnapshotId: string;
|
||||
};
|
||||
};
|
||||
export type SnapshotGraphDeleteMutation = {
|
||||
response: SnapshotGraphDeleteMutation$data;
|
||||
variables: SnapshotGraphDeleteMutation$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": "deletedSnapshotId",
|
||||
"storageKey": null
|
||||
};
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": [
|
||||
(v0/*: any*/),
|
||||
(v1/*: any*/)
|
||||
],
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "SnapshotGraphDeleteMutation",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v2/*: any*/),
|
||||
"concreteType": "DeleteSnapshotPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "deleteSnapshot",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v3/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Mutation",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": [
|
||||
(v1/*: any*/),
|
||||
(v0/*: any*/)
|
||||
],
|
||||
"kind": "Operation",
|
||||
"name": "SnapshotGraphDeleteMutation",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v2/*: any*/),
|
||||
"concreteType": "DeleteSnapshotPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "deleteSnapshot",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v3/*: any*/),
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"filters": null,
|
||||
"handle": "deleteEdge",
|
||||
"key": "",
|
||||
"kind": "ScalarHandle",
|
||||
"name": "deletedSnapshotId",
|
||||
"handleArgs": [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "connections",
|
||||
"variableName": "connections"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "f5f81e50b61dbc8d5668e421cf88223f",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "SnapshotGraphDeleteMutation",
|
||||
"operationKind": "mutation",
|
||||
"text": "mutation SnapshotGraphDeleteMutation(\n $input: DeleteSnapshotInput!\n) {\n deleteSnapshot(input: $input) {\n deletedSnapshotId\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "cc7cb0955bf74c611136392354ff8dcf";
|
||||
|
||||
export default node;
|
||||
253
apps/console/src/hooks/graph/__generated__/SnapshotGraphListQuery.graphql.ts
generated
Normal file
253
apps/console/src/hooks/graph/__generated__/SnapshotGraphListQuery.graphql.ts
generated
Normal file
@@ -0,0 +1,253 @@
|
||||
/**
|
||||
* @generated SignedSource<<f4a719bca36d682b094afe419b9129e8>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
import { FragmentRefs } from "relay-runtime";
|
||||
export type SnapshotGraphListQuery$variables = {
|
||||
organizationId: string;
|
||||
};
|
||||
export type SnapshotGraphListQuery$data = {
|
||||
readonly organization: {
|
||||
readonly " $fragmentSpreads": FragmentRefs<"SnapshotsPageFragment">;
|
||||
};
|
||||
};
|
||||
export type SnapshotGraphListQuery = {
|
||||
response: SnapshotGraphListQuery$data;
|
||||
variables: SnapshotGraphListQuery$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": "__typename",
|
||||
"storageKey": null
|
||||
},
|
||||
v3 = [
|
||||
{
|
||||
"kind": "Literal",
|
||||
"name": "first",
|
||||
"value": 100
|
||||
}
|
||||
],
|
||||
v4 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
};
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "SnapshotGraphListQuery",
|
||||
"selections": [
|
||||
{
|
||||
"alias": "organization",
|
||||
"args": (v1/*: any*/),
|
||||
"concreteType": null,
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"kind": "InlineFragment",
|
||||
"selections": [
|
||||
{
|
||||
"args": null,
|
||||
"kind": "FragmentSpread",
|
||||
"name": "SnapshotsPageFragment"
|
||||
}
|
||||
],
|
||||
"type": "Organization",
|
||||
"abstractKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Query",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Operation",
|
||||
"name": "SnapshotGraphListQuery",
|
||||
"selections": [
|
||||
{
|
||||
"alias": "organization",
|
||||
"args": (v1/*: any*/),
|
||||
"concreteType": null,
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v2/*: any*/),
|
||||
{
|
||||
"kind": "InlineFragment",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v3/*: any*/),
|
||||
"concreteType": "SnapshotConnection",
|
||||
"kind": "LinkedField",
|
||||
"name": "snapshots",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "SnapshotEdge",
|
||||
"kind": "LinkedField",
|
||||
"name": "edges",
|
||||
"plural": true,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "Snapshot",
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v4/*: any*/),
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "name",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "description",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "type",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "createdAt",
|
||||
"storageKey": null
|
||||
},
|
||||
(v2/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "cursor",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"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
|
||||
},
|
||||
{
|
||||
"kind": "ClientExtension",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "__id",
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"storageKey": "snapshots(first:100)"
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v3/*: any*/),
|
||||
"filters": null,
|
||||
"handle": "connection",
|
||||
"key": "SnapshotsGraphListQuery__snapshots",
|
||||
"kind": "LinkedHandle",
|
||||
"name": "snapshots"
|
||||
}
|
||||
],
|
||||
"type": "Organization",
|
||||
"abstractKey": null
|
||||
},
|
||||
(v4/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "eda538d8a5e4e94551012bbb6b8da92f",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "SnapshotGraphListQuery",
|
||||
"operationKind": "query",
|
||||
"text": "query SnapshotGraphListQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n ...SnapshotsPageFragment\n }\n id\n }\n}\n\nfragment SnapshotsPageFragment on Organization {\n snapshots(first: 100) {\n edges {\n node {\n id\n name\n description\n type\n createdAt\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "0f264bca502a59b7f8b8ec729d0ce1ff";
|
||||
|
||||
export default node;
|
||||
184
apps/console/src/hooks/graph/__generated__/SnapshotGraphNodeQuery.graphql.ts
generated
Normal file
184
apps/console/src/hooks/graph/__generated__/SnapshotGraphNodeQuery.graphql.ts
generated
Normal file
@@ -0,0 +1,184 @@
|
||||
/**
|
||||
* @generated SignedSource<<5bcc9f9b743d01fc99fd749b970dccd3>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
export type SnapshotsType = "ASSETS" | "COMPLIANCE_REGISTRIES" | "DATA" | "NON_CONFORMITY_REGISTRIES" | "RISKS" | "VENDORS";
|
||||
export type SnapshotGraphNodeQuery$variables = {
|
||||
snapshotId: string;
|
||||
};
|
||||
export type SnapshotGraphNodeQuery$data = {
|
||||
readonly node: {
|
||||
readonly createdAt?: any;
|
||||
readonly description?: string | null | undefined;
|
||||
readonly id?: string;
|
||||
readonly name?: string;
|
||||
readonly organization?: {
|
||||
readonly id: string;
|
||||
readonly name: string;
|
||||
};
|
||||
readonly type?: SnapshotsType;
|
||||
};
|
||||
};
|
||||
export type SnapshotGraphNodeQuery = {
|
||||
response: SnapshotGraphNodeQuery$data;
|
||||
variables: SnapshotGraphNodeQuery$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = [
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "snapshotId"
|
||||
}
|
||||
],
|
||||
v1 = [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "id",
|
||||
"variableName": "snapshotId"
|
||||
}
|
||||
],
|
||||
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": "description",
|
||||
"storageKey": null
|
||||
},
|
||||
v5 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "type",
|
||||
"storageKey": null
|
||||
},
|
||||
v6 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "Organization",
|
||||
"kind": "LinkedField",
|
||||
"name": "organization",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v2/*: any*/),
|
||||
(v3/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
},
|
||||
v7 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "createdAt",
|
||||
"storageKey": null
|
||||
};
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "SnapshotGraphNodeQuery",
|
||||
"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*/)
|
||||
],
|
||||
"type": "Snapshot",
|
||||
"abstractKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Query",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Operation",
|
||||
"name": "SnapshotGraphNodeQuery",
|
||||
"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*/)
|
||||
],
|
||||
"type": "Snapshot",
|
||||
"abstractKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "8dafbbd8ecc8442fa065d19bba932ce2",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "SnapshotGraphNodeQuery",
|
||||
"operationKind": "query",
|
||||
"text": "query SnapshotGraphNodeQuery(\n $snapshotId: ID!\n) {\n node(id: $snapshotId) {\n __typename\n ... on Snapshot {\n id\n name\n description\n type\n organization {\n id\n name\n }\n createdAt\n }\n id\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "b687d3da56dbfa333e66f4f2c9c0c824";
|
||||
|
||||
export default node;
|
||||
@@ -5,6 +5,7 @@ import {
|
||||
IconBank,
|
||||
IconBook,
|
||||
IconCircleQuestionmark,
|
||||
IconClock,
|
||||
IconCrossLargeX,
|
||||
IconFire3,
|
||||
IconGroup1,
|
||||
@@ -150,6 +151,11 @@ export function MainLayout() {
|
||||
icon={IconBook}
|
||||
to={`${prefix}/complianceRegistries`}
|
||||
/>
|
||||
<SidebarItem
|
||||
label={__("Snapshots")}
|
||||
icon={IconClock}
|
||||
to={`${prefix}/snapshots`}
|
||||
/>
|
||||
<SidebarItem
|
||||
label={__("Trust Center")}
|
||||
icon={IconShield}
|
||||
|
||||
@@ -21,6 +21,7 @@ import {
|
||||
usePreloadedQuery,
|
||||
type PreloadedQuery,
|
||||
} from "react-relay";
|
||||
import { useParams } from "react-router";
|
||||
import { useOrganizationId } from "/hooks/useOrganizationId";
|
||||
import { CreateDatumDialog } from "./dialogs/CreateDatumDialog";
|
||||
import { useDeleteDatum, dataQuery } from "../../../hooks/graph/DatumGraph";
|
||||
@@ -28,27 +29,31 @@ import type { DatumGraphListQuery } from "/hooks/graph/__generated__/DatumGraphL
|
||||
import { faviconUrl } from "@probo/helpers";
|
||||
import type { NodeOf } from "/types";
|
||||
import type {
|
||||
DataPageFragment$data,
|
||||
DataPageFragment$key,
|
||||
DataPageFragment$data
|
||||
} from "./__generated__/DataPageFragment.graphql";
|
||||
import type { DataListQuery } from "./__generated__/DataListQuery.graphql";
|
||||
import { SortableTable } from "/components/SortableTable";
|
||||
import { SnapshotBanner } from "/components/SnapshotBanner";
|
||||
|
||||
const paginatedDataFragment = graphql`
|
||||
fragment DataPageFragment on Organization
|
||||
@refetchable(queryName: "DataListQuery")
|
||||
@argumentDefinitions(
|
||||
first: { type: "Int", defaultValue: 10 }
|
||||
orderBy: { type: "DatumOrder", defaultValue: null }
|
||||
order: { type: "DatumOrder", defaultValue: null }
|
||||
after: { type: "CursorKey", defaultValue: null }
|
||||
before: { type: "CursorKey", defaultValue: null }
|
||||
last: { type: "Int", defaultValue: null }
|
||||
snapshotId: { type: "ID", defaultValue: null }
|
||||
) {
|
||||
data(
|
||||
first: $first
|
||||
after: $after
|
||||
last: $last
|
||||
before: $before
|
||||
orderBy: $orderBy
|
||||
orderBy: $order
|
||||
filter: { snapshotId: $snapshotId }
|
||||
) @connection(key: "DataPage_data") {
|
||||
__id
|
||||
edges {
|
||||
@@ -84,34 +89,61 @@ type Props = {
|
||||
export default function DataPage(props: Props) {
|
||||
const { __ } = useTranslate();
|
||||
const organizationId = useOrganizationId();
|
||||
const { snapshotId } = useParams<{ snapshotId?: string }>();
|
||||
const isSnapshotMode = Boolean(snapshotId);
|
||||
|
||||
const data = usePreloadedQuery(dataQuery, props.queryRef);
|
||||
const pagination = usePaginationFragment(
|
||||
const queryData = usePreloadedQuery<DatumGraphListQuery>(
|
||||
dataQuery,
|
||||
props.queryRef
|
||||
);
|
||||
|
||||
const data = queryData.node;
|
||||
|
||||
const pagination = usePaginationFragment<DataListQuery, DataPageFragment$key>(
|
||||
paginatedDataFragment,
|
||||
data.node as DataPageFragment$key
|
||||
data
|
||||
);
|
||||
|
||||
const dataEntries = pagination.data.data.edges.map((edge) => edge.node);
|
||||
const connectionId = pagination.data.data.__id;
|
||||
|
||||
const refetch = ({ order }: { order: { direction: string; field: string } }) => {
|
||||
pagination.refetch({
|
||||
snapshotId,
|
||||
order: {
|
||||
direction: order.direction as "ASC" | "DESC",
|
||||
field: order.field as "CREATED_AT" | "DATA_CLASSIFICATION" | "NAME"
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
usePageTitle(__("Data"));
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{isSnapshotMode && snapshotId && (
|
||||
<SnapshotBanner snapshotId={snapshotId} />
|
||||
)}
|
||||
<PageHeader
|
||||
title={__("Data")}
|
||||
description={__(
|
||||
"Manage your organization's data assets and their classifications."
|
||||
)}
|
||||
>
|
||||
<CreateDatumDialog
|
||||
connection={connectionId}
|
||||
organizationId={organizationId}
|
||||
>
|
||||
<Button icon={IconPlusLarge}>{__("Add data")}</Button>
|
||||
</CreateDatumDialog>
|
||||
{!snapshotId && (
|
||||
<CreateDatumDialog
|
||||
connection={connectionId}
|
||||
organizationId={organizationId}
|
||||
onCreated={() => pagination.refetch({ snapshotId })}
|
||||
>
|
||||
<Button icon={IconPlusLarge}>{__("Add data")}</Button>
|
||||
</CreateDatumDialog>
|
||||
)}
|
||||
</PageHeader>
|
||||
<SortableTable {...pagination}>
|
||||
<SortableTable
|
||||
{...pagination}
|
||||
refetch={refetch}
|
||||
>
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>{__("Name")}</Th>
|
||||
@@ -123,7 +155,7 @@ export default function DataPage(props: Props) {
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{dataEntries.map((entry) => (
|
||||
<DataRow key={entry.id} entry={entry} connectionId={connectionId} />
|
||||
<DataRow key={entry.id} entry={entry} connectionId={connectionId} snapshotId={snapshotId} />
|
||||
))}
|
||||
</Tbody>
|
||||
</SortableTable>
|
||||
@@ -134,17 +166,23 @@ export default function DataPage(props: Props) {
|
||||
function DataRow({
|
||||
entry,
|
||||
connectionId,
|
||||
snapshotId,
|
||||
}: {
|
||||
entry: DataEntry;
|
||||
connectionId: string;
|
||||
snapshotId?: string;
|
||||
}) {
|
||||
const organizationId = useOrganizationId();
|
||||
const { __ } = useTranslate();
|
||||
const deleteDatum = useDeleteDatum(entry, connectionId);
|
||||
const vendors = entry.vendors?.edges.map((edge) => edge.node) ?? [];
|
||||
|
||||
const detailUrl = snapshotId
|
||||
? `/organizations/${organizationId}/snapshots/${snapshotId}/data/${entry.id}`
|
||||
: `/organizations/${organizationId}/data/${entry.id}`;
|
||||
|
||||
return (
|
||||
<Tr to={`/organizations/${organizationId}/data/${entry.id}`}>
|
||||
<Tr to={detailUrl}>
|
||||
<Td>{entry.name}</Td>
|
||||
<Td>
|
||||
<Badge variant="info">{entry.dataClassification}</Badge>
|
||||
@@ -178,15 +216,16 @@ function DataRow({
|
||||
)}
|
||||
</Td>
|
||||
<Td noLink width={50} className="text-end">
|
||||
<ActionDropdown>
|
||||
<DropdownItem
|
||||
onClick={deleteDatum}
|
||||
variant="danger"
|
||||
icon={IconTrashCan}
|
||||
>
|
||||
{__("Delete")}
|
||||
</DropdownItem>
|
||||
</ActionDropdown>
|
||||
{!snapshotId && (<ActionDropdown>
|
||||
<DropdownItem
|
||||
onClick={deleteDatum}
|
||||
variant="danger"
|
||||
icon={IconTrashCan}
|
||||
>
|
||||
{__("Delete")}
|
||||
</DropdownItem>
|
||||
</ActionDropdown>
|
||||
)}
|
||||
</Td>
|
||||
</Tr>
|
||||
);
|
||||
|
||||
@@ -3,6 +3,7 @@ import {
|
||||
type PreloadedQuery,
|
||||
usePreloadedQuery,
|
||||
} from "react-relay";
|
||||
import { useParams } from "react-router";
|
||||
import {
|
||||
datumNodeQuery,
|
||||
useDeleteDatum,
|
||||
@@ -25,7 +26,8 @@ import { PeopleSelectField } from "/components/form/PeopleSelectField";
|
||||
import { VendorsMultiSelectField } from "/components/form/VendorsMultiSelectField";
|
||||
import { useFormWithSchema } from "/hooks/useFormWithSchema";
|
||||
import z from "zod";
|
||||
import type { DatumGraphNodeQuery } from "/hooks/graph/__generated__/DatumGraphNodeQuery.graphql.ts";
|
||||
import { SnapshotBanner } from "/components/SnapshotBanner";
|
||||
import type { DatumGraphNodeQuery } from "/hooks/graph/__generated__/DatumGraphNodeQuery.graphql";
|
||||
|
||||
const updateDatumSchema = z.object({
|
||||
name: z.string().min(1, "Name is required"),
|
||||
@@ -39,17 +41,26 @@ type Props = {
|
||||
};
|
||||
|
||||
export default function DatumDetailsPage(props: Props) {
|
||||
const datum = usePreloadedQuery(datumNodeQuery, props.queryRef);
|
||||
const datumEntry = datum.node;
|
||||
const { snapshotId } = useParams<{ snapshotId?: string }>();
|
||||
const isSnapshotMode = Boolean(snapshotId);
|
||||
|
||||
const queryData = usePreloadedQuery<DatumGraphNodeQuery>(
|
||||
datumNodeQuery,
|
||||
props.queryRef
|
||||
);
|
||||
|
||||
const datumEntry = queryData.node;
|
||||
|
||||
const { __ } = useTranslate();
|
||||
const organizationId = useOrganizationId();
|
||||
|
||||
const deleteDatum = useDeleteDatum(
|
||||
datumEntry,
|
||||
ConnectionHandler.getConnectionID(organizationId, "DataPage_data"),
|
||||
);
|
||||
|
||||
const vendors = datumEntry?.vendors?.edges.map((edge) => edge.node) ?? [];
|
||||
const vendorIds = vendors.map((vendor) => vendor.id);
|
||||
const vendors = datumEntry?.vendors?.edges.map(edge => edge.node) ?? [];
|
||||
const vendorIds = vendors.map(vendor => vendor.id);
|
||||
|
||||
const { control, formState, handleSubmit, register, reset } =
|
||||
useFormWithSchema(updateDatumSchema, {
|
||||
@@ -64,7 +75,7 @@ export default function DatumDetailsPage(props: Props) {
|
||||
const updateDatum = useUpdateDatum();
|
||||
|
||||
const onSubmit = handleSubmit(async (formData) => {
|
||||
if (!datumEntry.id) {
|
||||
if (!datumEntry?.id) {
|
||||
alert("id is missing from data");
|
||||
return;
|
||||
}
|
||||
@@ -79,44 +90,59 @@ export default function DatumDetailsPage(props: Props) {
|
||||
}
|
||||
});
|
||||
|
||||
const breadcrumbDataUrl = isSnapshotMode
|
||||
? `/organizations/${organizationId}/snapshots/${snapshotId}/data`
|
||||
: `/organizations/${organizationId}/data`;
|
||||
|
||||
const breadcrumbItems = [
|
||||
{
|
||||
label: __("Data"),
|
||||
to: breadcrumbDataUrl,
|
||||
},
|
||||
{
|
||||
label: datumEntry?.name || "",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{
|
||||
label: __("Data"),
|
||||
to: `/organizations/${organizationId}/data`,
|
||||
},
|
||||
{
|
||||
label: datumEntry?.name ?? "",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
{isSnapshotMode && snapshotId && (
|
||||
<SnapshotBanner snapshotId={snapshotId} />
|
||||
)}
|
||||
<Breadcrumb items={breadcrumbItems} />
|
||||
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-2xl">{datumEntry?.name}</div>
|
||||
<Badge variant="info">{datumEntry?.dataClassification}</Badge>
|
||||
</div>
|
||||
<ActionDropdown variant="secondary">
|
||||
<DropdownItem
|
||||
variant="danger"
|
||||
icon={IconTrashCan}
|
||||
onClick={deleteDatum}
|
||||
>
|
||||
{__("Delete")}
|
||||
</DropdownItem>
|
||||
</ActionDropdown>
|
||||
{!isSnapshotMode && (
|
||||
<ActionDropdown variant="secondary">
|
||||
<DropdownItem
|
||||
variant="danger"
|
||||
icon={IconTrashCan}
|
||||
onClick={deleteDatum}
|
||||
>
|
||||
{__("Delete")}
|
||||
</DropdownItem>
|
||||
</ActionDropdown>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<form onSubmit={onSubmit} className="space-y-6 max-w-2xl">
|
||||
<Field label={__("Name")} {...register("name")} type="text" />
|
||||
<Field
|
||||
label={__("Name")}
|
||||
{...register("name")}
|
||||
type="text"
|
||||
disabled={isSnapshotMode}
|
||||
/>
|
||||
|
||||
<ControlledField
|
||||
control={control}
|
||||
name="dataClassification"
|
||||
type="select"
|
||||
label={__("Classification")}
|
||||
disabled={isSnapshotMode}
|
||||
>
|
||||
<Option value="PUBLIC">{__("Public")}</Option>
|
||||
<Option value="INTERNAL">{__("Internal")}</Option>
|
||||
@@ -129,6 +155,7 @@ export default function DatumDetailsPage(props: Props) {
|
||||
control={control}
|
||||
name="ownerId"
|
||||
label={__("Owner")}
|
||||
disabled={isSnapshotMode}
|
||||
/>
|
||||
|
||||
<VendorsMultiSelectField
|
||||
@@ -136,15 +163,19 @@ export default function DatumDetailsPage(props: Props) {
|
||||
control={control}
|
||||
name="vendorIds"
|
||||
label={__("Vendors")}
|
||||
disabled={isSnapshotMode}
|
||||
selectedVendors={vendors}
|
||||
/>
|
||||
|
||||
<div className="flex justify-end">
|
||||
{formState.isDirty && (
|
||||
<Button type="submit" disabled={formState.isSubmitting}>
|
||||
{formState.isSubmitting ? __("Updating...") : __("Update")}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{!isSnapshotMode && (
|
||||
<div className="flex justify-end">
|
||||
{formState.isDirty && (
|
||||
<Button type="submit" disabled={formState.isSubmitting}>
|
||||
{formState.isSubmitting ? __("Updating...") : __("Update")}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* @generated SignedSource<<4894c4387072fb7ac2f379ab04b4168a>>
|
||||
* @generated SignedSource<<8364d9457b59a3ef50b508ab55991638>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
@@ -22,7 +22,8 @@ export type DataListQuery$variables = {
|
||||
first?: number | null | undefined;
|
||||
id: string;
|
||||
last?: number | null | undefined;
|
||||
orderBy?: DatumOrder | null | undefined;
|
||||
order?: DatumOrder | null | undefined;
|
||||
snapshotId?: string | null | undefined;
|
||||
};
|
||||
export type DataListQuery$data = {
|
||||
readonly node: {
|
||||
@@ -63,57 +64,78 @@ v4 = {
|
||||
v5 = {
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "orderBy"
|
||||
"name": "order"
|
||||
},
|
||||
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": "snapshotId",
|
||||
"variableName": "snapshotId"
|
||||
},
|
||||
v13 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "__typename",
|
||||
"storageKey": null
|
||||
},
|
||||
v9 = {
|
||||
v14 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
},
|
||||
v10 = {
|
||||
v15 = [
|
||||
(v8/*: any*/),
|
||||
(v9/*: any*/),
|
||||
{
|
||||
"fields": [
|
||||
(v12/*: any*/)
|
||||
],
|
||||
"kind": "ObjectValue",
|
||||
"name": "filter"
|
||||
},
|
||||
(v10/*: any*/),
|
||||
(v11/*: any*/),
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "orderBy",
|
||||
"variableName": "order"
|
||||
}
|
||||
],
|
||||
v16 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
@@ -128,7 +150,8 @@ return {
|
||||
(v2/*: any*/),
|
||||
(v3/*: any*/),
|
||||
(v4/*: any*/),
|
||||
(v5/*: any*/)
|
||||
(v5/*: any*/),
|
||||
(v6/*: any*/)
|
||||
],
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
@@ -136,14 +159,25 @@ 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*/),
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "order",
|
||||
"variableName": "order"
|
||||
},
|
||||
(v12/*: any*/)
|
||||
],
|
||||
"kind": "FragmentSpread",
|
||||
"name": "DataPageFragment"
|
||||
}
|
||||
@@ -162,6 +196,7 @@ return {
|
||||
(v2/*: any*/),
|
||||
(v4/*: any*/),
|
||||
(v5/*: any*/),
|
||||
(v6/*: any*/),
|
||||
(v3/*: any*/)
|
||||
],
|
||||
"kind": "Operation",
|
||||
@@ -169,20 +204,20 @@ return {
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v6/*: any*/),
|
||||
"args": (v7/*: any*/),
|
||||
"concreteType": null,
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v8/*: any*/),
|
||||
(v9/*: any*/),
|
||||
(v13/*: any*/),
|
||||
(v14/*: any*/),
|
||||
{
|
||||
"kind": "InlineFragment",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v7/*: any*/),
|
||||
"args": (v15/*: any*/),
|
||||
"concreteType": "DatumConnection",
|
||||
"kind": "LinkedField",
|
||||
"name": "data",
|
||||
@@ -204,8 +239,8 @@ return {
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v9/*: any*/),
|
||||
(v10/*: any*/),
|
||||
(v14/*: any*/),
|
||||
(v16/*: any*/),
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
@@ -228,7 +263,7 @@ return {
|
||||
"name": "fullName",
|
||||
"storageKey": null
|
||||
},
|
||||
(v9/*: any*/)
|
||||
(v14/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
},
|
||||
@@ -262,8 +297,8 @@ return {
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v9/*: any*/),
|
||||
(v10/*: any*/),
|
||||
(v14/*: any*/),
|
||||
(v16/*: any*/),
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
@@ -287,7 +322,7 @@ return {
|
||||
"name": "createdAt",
|
||||
"storageKey": null
|
||||
},
|
||||
(v8/*: any*/)
|
||||
(v13/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
},
|
||||
@@ -357,9 +392,10 @@ return {
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v7/*: any*/),
|
||||
"args": (v15/*: any*/),
|
||||
"filters": [
|
||||
"orderBy"
|
||||
"orderBy",
|
||||
"filter"
|
||||
],
|
||||
"handle": "connection",
|
||||
"key": "DataPage_data",
|
||||
@@ -376,16 +412,16 @@ return {
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "d6742fb1de534407018aeb39ca1438d5",
|
||||
"cacheID": "dbca2ff147e8b1e367a266fcf016b184",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "DataListQuery",
|
||||
"operationKind": "query",
|
||||
"text": "query DataListQuery(\n $after: CursorKey = null\n $before: CursorKey = null\n $first: Int = 10\n $last: Int = null\n $orderBy: DatumOrder = null\n $id: ID!\n) {\n node(id: $id) {\n __typename\n ...DataPageFragment_sdb03\n id\n }\n}\n\nfragment DataPageFragment_sdb03 on Organization {\n data(first: $first, after: $after, last: $last, before: $before, orderBy: $orderBy) {\n edges {\n node {\n id\n name\n dataClassification\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 hasPreviousPage\n startCursor\n }\n }\n id\n}\n"
|
||||
"text": "query DataListQuery(\n $after: CursorKey = null\n $before: CursorKey = null\n $first: Int = 10\n $last: Int = null\n $order: DatumOrder = null\n $snapshotId: ID = null\n $id: ID!\n) {\n node(id: $id) {\n __typename\n ...DataPageFragment_25MC8O\n id\n }\n}\n\nfragment DataPageFragment_25MC8O on Organization {\n data(first: $first, after: $after, last: $last, before: $before, orderBy: $order, filter: {snapshotId: $snapshotId}) {\n edges {\n node {\n id\n name\n dataClassification\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 hasPreviousPage\n startCursor\n }\n }\n id\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "a797d00b7f2cac2876322b23aa781efa";
|
||||
(node as any).hash = "a60d9b34a83df89eb59ffcd359903ce8";
|
||||
|
||||
export default node;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* @generated SignedSource<<0eb94f0da29f50445248a3d133714be2>>
|
||||
* @generated SignedSource<<17f6d8607b6d2a1b575e1251019b8375>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
@@ -88,7 +88,12 @@ return {
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "orderBy"
|
||||
"name": "order"
|
||||
},
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "snapshotId"
|
||||
}
|
||||
],
|
||||
"kind": "Fragment",
|
||||
@@ -128,10 +133,21 @@ return {
|
||||
{
|
||||
"alias": "data",
|
||||
"args": [
|
||||
{
|
||||
"fields": [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "snapshotId",
|
||||
"variableName": "snapshotId"
|
||||
}
|
||||
],
|
||||
"kind": "ObjectValue",
|
||||
"name": "filter"
|
||||
},
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "orderBy",
|
||||
"variableName": "orderBy"
|
||||
"variableName": "order"
|
||||
}
|
||||
],
|
||||
"concreteType": "DatumConnection",
|
||||
@@ -318,6 +334,6 @@ return {
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "a797d00b7f2cac2876322b23aa781efa";
|
||||
(node as any).hash = "a60d9b34a83df89eb59ffcd359903ce8";
|
||||
|
||||
export default node;
|
||||
|
||||
@@ -27,12 +27,14 @@ type Props = {
|
||||
children: React.ReactNode;
|
||||
connection: string;
|
||||
organizationId: string;
|
||||
onCreated?: () => void;
|
||||
};
|
||||
|
||||
export function CreateDatumDialog({
|
||||
children,
|
||||
connection,
|
||||
organizationId,
|
||||
onCreated,
|
||||
}: Props) {
|
||||
const { __ } = useTranslate();
|
||||
const { control, handleSubmit, register, formState, reset } =
|
||||
@@ -55,6 +57,7 @@ export function CreateDatumDialog({
|
||||
});
|
||||
ref.current?.close();
|
||||
reset();
|
||||
onCreated?.();
|
||||
} catch (error) {
|
||||
console.error("Failed to create datum:", error);
|
||||
}
|
||||
|
||||
176
apps/console/src/pages/organizations/snapshots/SnapshotsPage.tsx
Normal file
176
apps/console/src/pages/organizations/snapshots/SnapshotsPage.tsx
Normal file
@@ -0,0 +1,176 @@
|
||||
import type { SnapshotGraphListQuery } from "/hooks/graph/__generated__/SnapshotGraphListQuery.graphql";
|
||||
import {
|
||||
useFragment,
|
||||
usePreloadedQuery,
|
||||
type PreloadedQuery,
|
||||
} from "react-relay";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import { getSnapshotTypeLabel } from "@probo/helpers";
|
||||
import {
|
||||
ActionDropdown,
|
||||
Button,
|
||||
DropdownItem,
|
||||
IconPlusLarge,
|
||||
IconTrashCan,
|
||||
PageHeader,
|
||||
Table,
|
||||
Tbody,
|
||||
Td,
|
||||
Th,
|
||||
Thead,
|
||||
Tr,
|
||||
} from "@probo/ui";
|
||||
import {
|
||||
snapshotsQuery,
|
||||
useDeleteSnapshot,
|
||||
} from "/hooks/graph/SnapshotGraph";
|
||||
import { graphql } from "relay-runtime";
|
||||
import type {
|
||||
SnapshotsPageFragment$data,
|
||||
SnapshotsPageFragment$key,
|
||||
} from "./__generated__/SnapshotsPageFragment.graphql";
|
||||
import type { NodeOf } from "/types";
|
||||
import SnapshotFormDialog from "./dialog/SnapshotFormDialog";
|
||||
import { usePageTitle } from "@probo/hooks";
|
||||
import { useOrganizationId } from "/hooks/useOrganizationId";
|
||||
|
||||
type Props = {
|
||||
queryRef: PreloadedQuery<SnapshotGraphListQuery>;
|
||||
};
|
||||
|
||||
const snapshotsFragment = graphql`
|
||||
fragment SnapshotsPageFragment on Organization {
|
||||
snapshots(first: 100) @connection(key: "SnapshotsGraphListQuery__snapshots") {
|
||||
__id
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
name
|
||||
description
|
||||
type
|
||||
createdAt
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default function SnapshotsPage(props: Props) {
|
||||
const { __ } = useTranslate();
|
||||
const organizationId = useOrganizationId();
|
||||
const organization = usePreloadedQuery(
|
||||
snapshotsQuery,
|
||||
props.queryRef
|
||||
).organization;
|
||||
const data = useFragment<SnapshotsPageFragment$key>(
|
||||
snapshotsFragment,
|
||||
organization
|
||||
);
|
||||
const connectionId = data.snapshots.__id;
|
||||
const snapshots = data.snapshots.edges.map((edge) => edge.node);
|
||||
usePageTitle(__("Snapshots"));
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title={__("Snapshots")}
|
||||
description={__(
|
||||
"Snapshots capture point-in-time views of your organization's compliance state. Create snapshots to track progress over time."
|
||||
)}
|
||||
>
|
||||
<SnapshotFormDialog connection={connectionId}>
|
||||
<Button variant="primary" icon={IconPlusLarge}>
|
||||
{__("New snapshot")}
|
||||
</Button>
|
||||
</SnapshotFormDialog>
|
||||
</PageHeader>
|
||||
|
||||
{snapshots.length > 0 ? (
|
||||
<Table>
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>{__("Name")}</Th>
|
||||
<Th>{__("Type")}</Th>
|
||||
<Th>{__("Description")}</Th>
|
||||
<Th>{__("Created")}</Th>
|
||||
<Th></Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{snapshots.map((snapshot) => (
|
||||
<SnapshotRow
|
||||
key={snapshot.id}
|
||||
snapshot={snapshot}
|
||||
connectionId={connectionId}
|
||||
organizationId={organizationId}
|
||||
/>
|
||||
))}
|
||||
</Tbody>
|
||||
</Table>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<h3 className="text-lg font-medium text-txt-secondary mb-2">
|
||||
{__("No snapshots yet")}
|
||||
</h3>
|
||||
<p className="text-txt-tertiary mb-6">
|
||||
{__("Create your first snapshot to get started")}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type SnapshotRowProps = {
|
||||
snapshot: NodeOf<SnapshotsPageFragment$data["snapshots"]>;
|
||||
connectionId: string;
|
||||
organizationId: string;
|
||||
};
|
||||
|
||||
function SnapshotRow(props: SnapshotRowProps) {
|
||||
const { __, dateFormat } = useTranslate();
|
||||
const deleteSnapshot = useDeleteSnapshot(props.snapshot, props.connectionId);
|
||||
|
||||
const getSnapshotUrl = (snapshot: SnapshotRowProps["snapshot"]) => {
|
||||
const baseUrl = `/organizations/${props.organizationId}/snapshots/${snapshot.id}`;
|
||||
|
||||
switch (snapshot.type) {
|
||||
case "DATA":
|
||||
return `${baseUrl}/data`;
|
||||
case "VENDORS":
|
||||
return `${baseUrl}/vendors`;
|
||||
case "RISKS":
|
||||
return `${baseUrl}/risks`;
|
||||
case "ASSETS":
|
||||
return `${baseUrl}/assets`;
|
||||
default:
|
||||
return baseUrl;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Tr to={getSnapshotUrl(props.snapshot)}>
|
||||
<Td className="font-medium">{props.snapshot.name}</Td>
|
||||
<Td className="text-txt-secondary">
|
||||
{getSnapshotTypeLabel(__, props.snapshot.type)}
|
||||
</Td>
|
||||
<Td className="text-txt-secondary">
|
||||
{props.snapshot.description || __("No description")}
|
||||
</Td>
|
||||
<Td className="text-txt-tertiary">
|
||||
{dateFormat(props.snapshot.createdAt, { year: "numeric", month: "short", day: "numeric" })}
|
||||
</Td>
|
||||
<Td noLink width={50} className="text-end">
|
||||
<ActionDropdown>
|
||||
<DropdownItem
|
||||
onClick={deleteSnapshot}
|
||||
variant="danger"
|
||||
icon={IconTrashCan}
|
||||
>
|
||||
{__("Delete")}
|
||||
</DropdownItem>
|
||||
</ActionDropdown>
|
||||
</Td>
|
||||
</Tr>
|
||||
);
|
||||
}
|
||||
177
apps/console/src/pages/organizations/snapshots/__generated__/SnapshotsPageFragment.graphql.ts
generated
Normal file
177
apps/console/src/pages/organizations/snapshots/__generated__/SnapshotsPageFragment.graphql.ts
generated
Normal file
@@ -0,0 +1,177 @@
|
||||
/**
|
||||
* @generated SignedSource<<05658205222e432a115cecc9c8f34d05>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ReaderFragment } from 'relay-runtime';
|
||||
export type SnapshotsType = "ASSETS" | "COMPLIANCE_REGISTRIES" | "DATA" | "NON_CONFORMITY_REGISTRIES" | "RISKS" | "VENDORS";
|
||||
import { FragmentRefs } from "relay-runtime";
|
||||
export type SnapshotsPageFragment$data = {
|
||||
readonly snapshots: {
|
||||
readonly __id: string;
|
||||
readonly edges: ReadonlyArray<{
|
||||
readonly node: {
|
||||
readonly createdAt: any;
|
||||
readonly description: string | null | undefined;
|
||||
readonly id: string;
|
||||
readonly name: string;
|
||||
readonly type: SnapshotsType;
|
||||
};
|
||||
}>;
|
||||
};
|
||||
readonly " $fragmentType": "SnapshotsPageFragment";
|
||||
};
|
||||
export type SnapshotsPageFragment$key = {
|
||||
readonly " $data"?: SnapshotsPageFragment$data;
|
||||
readonly " $fragmentSpreads": FragmentRefs<"SnapshotsPageFragment">;
|
||||
};
|
||||
|
||||
const node: ReaderFragment = {
|
||||
"argumentDefinitions": [],
|
||||
"kind": "Fragment",
|
||||
"metadata": {
|
||||
"connection": [
|
||||
{
|
||||
"count": null,
|
||||
"cursor": null,
|
||||
"direction": "forward",
|
||||
"path": [
|
||||
"snapshots"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"name": "SnapshotsPageFragment",
|
||||
"selections": [
|
||||
{
|
||||
"alias": "snapshots",
|
||||
"args": null,
|
||||
"concreteType": "SnapshotConnection",
|
||||
"kind": "LinkedField",
|
||||
"name": "__SnapshotsGraphListQuery__snapshots_connection",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "SnapshotEdge",
|
||||
"kind": "LinkedField",
|
||||
"name": "edges",
|
||||
"plural": true,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "Snapshot",
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "name",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "description",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "type",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "createdAt",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "__typename",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "cursor",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"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
|
||||
},
|
||||
{
|
||||
"kind": "ClientExtension",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "__id",
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Organization",
|
||||
"abstractKey": null
|
||||
};
|
||||
|
||||
(node as any).hash = "700dede55fd00f2b57dbbb6ed2e2613d";
|
||||
|
||||
export default node;
|
||||
@@ -0,0 +1,145 @@
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
Input,
|
||||
Label,
|
||||
PropertyRow,
|
||||
Textarea,
|
||||
useDialogRef,
|
||||
} from "@probo/ui";
|
||||
import type { ReactNode } from "react";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import { Breadcrumb } from "@probo/ui";
|
||||
import { graphql } from "relay-runtime";
|
||||
import { z } from "zod";
|
||||
import { useFormWithSchema } from "/hooks/useFormWithSchema";
|
||||
import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
|
||||
import { useOrganizationId } from "/hooks/useOrganizationId";
|
||||
import { ControlledField } from "/components/form/ControlledField";
|
||||
import { SnapshotTypeOptions } from "/components/form/SnapshotTypeOptions";
|
||||
|
||||
const snapshotCreateMutation = graphql`
|
||||
mutation SnapshotFormDialogCreateMutation(
|
||||
$input: CreateSnapshotInput!
|
||||
$connections: [ID!]!
|
||||
) {
|
||||
createSnapshot(input: $input) {
|
||||
snapshotEdge @prependEdge(connections: $connections) {
|
||||
node {
|
||||
id
|
||||
name
|
||||
description
|
||||
type
|
||||
createdAt
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const snapshotSchema = z.object({
|
||||
name: z.string().min(2, { message: "Name is required" }),
|
||||
description: z.string().optional(),
|
||||
type: z.enum(["RISKS", "VENDORS", "ASSETS", "DATA", "NON_CONFORMITY_REGISTRIES", "COMPLIANCE_REGISTRIES"]),
|
||||
});
|
||||
|
||||
type Props = {
|
||||
children?: ReactNode;
|
||||
connection?: string;
|
||||
};
|
||||
|
||||
export default function SnapshotFormDialog(props: Props) {
|
||||
const { __ } = useTranslate();
|
||||
const dialogRef = useDialogRef();
|
||||
const organizationId = useOrganizationId();
|
||||
const [mutate] = useMutationWithToasts(snapshotCreateMutation, {
|
||||
successMessage: __("Snapshot created successfully."),
|
||||
errorMessage: __("Failed to create snapshot. Please try again."),
|
||||
});
|
||||
|
||||
const { handleSubmit, register, reset, control, formState: { errors } } =
|
||||
useFormWithSchema(snapshotSchema, {
|
||||
defaultValues: {
|
||||
name: "",
|
||||
description: "",
|
||||
type: "RISKS",
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = handleSubmit(async (data) => {
|
||||
await mutate({
|
||||
variables: {
|
||||
input: {
|
||||
organizationId,
|
||||
name: data.name,
|
||||
description: data.description || undefined,
|
||||
type: data.type,
|
||||
},
|
||||
connections: props.connection ? [props.connection] : [],
|
||||
},
|
||||
});
|
||||
reset();
|
||||
dialogRef.current?.close();
|
||||
});
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
ref={dialogRef}
|
||||
trigger={props.children}
|
||||
title={
|
||||
<Breadcrumb
|
||||
items={[
|
||||
__("Snapshots"),
|
||||
__("New Snapshot"),
|
||||
]}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<form onSubmit={onSubmit}>
|
||||
<DialogContent className="grid grid-cols-[1fr_420px]">
|
||||
<div className="py-8 px-10 space-y-4">
|
||||
<Input
|
||||
id="name"
|
||||
required
|
||||
variant="title"
|
||||
placeholder={__("Snapshot name")}
|
||||
{...register("name")}
|
||||
/>
|
||||
<Textarea
|
||||
id="description"
|
||||
variant="ghost"
|
||||
autogrow
|
||||
placeholder={__("Add description (optional)")}
|
||||
{...register("description")}
|
||||
/>
|
||||
</div>
|
||||
{/* Properties form */}
|
||||
<div className="py-5 px-6 bg-subtle">
|
||||
<Label>{__("Properties")}</Label>
|
||||
|
||||
<PropertyRow
|
||||
id="type"
|
||||
label={__("Type")}
|
||||
error={errors.type?.message}
|
||||
>
|
||||
<ControlledField
|
||||
control={control}
|
||||
name="type"
|
||||
type="select"
|
||||
>
|
||||
<SnapshotTypeOptions />
|
||||
</ControlledField>
|
||||
</PropertyRow>
|
||||
</div>
|
||||
</DialogContent>
|
||||
<DialogFooter>
|
||||
<Button type="submit">
|
||||
{__("Create snapshot")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,194 @@
|
||||
/**
|
||||
* @generated SignedSource<<22c84eaaec91c3555b99f0e067bea54f>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
export type SnapshotsType = "ASSETS" | "COMPLIANCE_REGISTRIES" | "DATA" | "NON_CONFORMITY_REGISTRIES" | "RISKS" | "VENDORS";
|
||||
export type CreateSnapshotInput = {
|
||||
description?: string | null | undefined;
|
||||
name: string;
|
||||
organizationId: string;
|
||||
type: SnapshotsType;
|
||||
};
|
||||
export type SnapshotFormDialogCreateMutation$variables = {
|
||||
connections: ReadonlyArray<string>;
|
||||
input: CreateSnapshotInput;
|
||||
};
|
||||
export type SnapshotFormDialogCreateMutation$data = {
|
||||
readonly createSnapshot: {
|
||||
readonly snapshotEdge: {
|
||||
readonly node: {
|
||||
readonly createdAt: any;
|
||||
readonly description: string | null | undefined;
|
||||
readonly id: string;
|
||||
readonly name: string;
|
||||
readonly type: SnapshotsType;
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
export type SnapshotFormDialogCreateMutation = {
|
||||
response: SnapshotFormDialogCreateMutation$data;
|
||||
variables: SnapshotFormDialogCreateMutation$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,
|
||||
"concreteType": "SnapshotEdge",
|
||||
"kind": "LinkedField",
|
||||
"name": "snapshotEdge",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "Snapshot",
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "name",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "description",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "type",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"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": "SnapshotFormDialogCreateMutation",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v2/*: any*/),
|
||||
"concreteType": "CreateSnapshotPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "createSnapshot",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v3/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Mutation",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": [
|
||||
(v1/*: any*/),
|
||||
(v0/*: any*/)
|
||||
],
|
||||
"kind": "Operation",
|
||||
"name": "SnapshotFormDialogCreateMutation",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v2/*: any*/),
|
||||
"concreteType": "CreateSnapshotPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "createSnapshot",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v3/*: any*/),
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"filters": null,
|
||||
"handle": "prependEdge",
|
||||
"key": "",
|
||||
"kind": "LinkedHandle",
|
||||
"name": "snapshotEdge",
|
||||
"handleArgs": [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "connections",
|
||||
"variableName": "connections"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "e60d598bc7f5c4958168405725664334",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "SnapshotFormDialogCreateMutation",
|
||||
"operationKind": "mutation",
|
||||
"text": "mutation SnapshotFormDialogCreateMutation(\n $input: CreateSnapshotInput!\n) {\n createSnapshot(input: $input) {\n snapshotEdge {\n node {\n id\n name\n description\n type\n createdAt\n }\n }\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "b03087e1699a90953aad7cdedaeee1a4";
|
||||
|
||||
export default node;
|
||||
@@ -31,6 +31,7 @@ import { auditRoutes } from "./routes/auditRoutes.ts";
|
||||
import { trustCenterRoutes } from "./routes/trustCenterRoutes.ts";
|
||||
import { nonconformityRegistryRoutes } from "./routes/nonconformityRegistryRoutes.ts";
|
||||
import { complianceRegistryRoutes } from "./routes/complianceRegistryRoutes.ts";
|
||||
import { snapshotsRoutes } from "./routes/snapshotsRoutes.ts";
|
||||
import { lazy } from "@probo/react-lazy";
|
||||
|
||||
export type AppRoute = Omit<RouteObject, "Component" | "children"> & {
|
||||
@@ -153,6 +154,7 @@ const routes = [
|
||||
...auditRoutes,
|
||||
...nonconformityRegistryRoutes,
|
||||
...complianceRegistryRoutes,
|
||||
...snapshotsRoutes,
|
||||
...trustCenterRoutes,
|
||||
{
|
||||
path: "*",
|
||||
|
||||
@@ -9,7 +9,22 @@ export const dataRoutes = [
|
||||
path: "data",
|
||||
fallback: PageSkeleton,
|
||||
queryLoader: (params: Record<string, string>) =>
|
||||
loadQuery(relayEnvironment, dataQuery, { organizationId: params.organizationId }),
|
||||
loadQuery(relayEnvironment, dataQuery, {
|
||||
organizationId: params.organizationId,
|
||||
snapshotId: null
|
||||
}),
|
||||
Component: lazy(
|
||||
() => import("/pages/organizations/data/DataPage")
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "snapshots/:snapshotId/data",
|
||||
fallback: PageSkeleton,
|
||||
queryLoader: (params: Record<string, string>) =>
|
||||
loadQuery(relayEnvironment, dataQuery, {
|
||||
organizationId: params.organizationId,
|
||||
snapshotId: params.snapshotId
|
||||
}),
|
||||
Component: lazy(
|
||||
() => import("/pages/organizations/data/DataPage")
|
||||
),
|
||||
@@ -23,4 +38,13 @@ export const dataRoutes = [
|
||||
() => import("../pages/organizations/data/DatumDetailsPage")
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "snapshots/:snapshotId/data/:dataId",
|
||||
fallback: PageSkeleton,
|
||||
queryLoader: (params: Record<string, string>) =>
|
||||
loadQuery(relayEnvironment, datumNodeQuery, { dataId: params.dataId }),
|
||||
Component: lazy(
|
||||
() => import("../pages/organizations/data/DatumDetailsPage")
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
18
apps/console/src/routes/snapshotsRoutes.ts
Normal file
18
apps/console/src/routes/snapshotsRoutes.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
import { loadQuery } from "react-relay";
|
||||
import { PageSkeleton } from "/components/skeletons/PageSkeleton";
|
||||
import { relayEnvironment } from "/providers/RelayProviders";
|
||||
import { snapshotsQuery } from "/hooks/graph/SnapshotGraph";
|
||||
import type { AppRoute } from "/routes";
|
||||
import { lazy } from "@probo/react-lazy";
|
||||
|
||||
export const snapshotsRoutes = [
|
||||
{
|
||||
path: "snapshots",
|
||||
fallback: PageSkeleton,
|
||||
queryLoader: ({ organizationId }) =>
|
||||
loadQuery(relayEnvironment, snapshotsQuery, { organizationId }),
|
||||
Component: lazy(
|
||||
() => import("/pages/organizations/snapshots/SnapshotsPage")
|
||||
),
|
||||
},
|
||||
] satisfies AppRoute[];
|
||||
Reference in New Issue
Block a user