Add right requests
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
This commit is contained in:
Sacha Al Himdani
@@ -0,0 +1,279 @@
|
||||
import {
|
||||
ConnectionHandler,
|
||||
usePreloadedQuery,
|
||||
type PreloadedQuery,
|
||||
} from "react-relay";
|
||||
import {
|
||||
rightsRequestNodeQuery,
|
||||
useDeleteRightsRequest,
|
||||
useUpdateRightsRequest,
|
||||
RightsRequestsConnectionKey,
|
||||
} from "../../../hooks/graph/RightsRequestGraph";
|
||||
import {
|
||||
ActionDropdown,
|
||||
Badge,
|
||||
Breadcrumb,
|
||||
Button,
|
||||
DropdownItem,
|
||||
Field,
|
||||
Option,
|
||||
Input,
|
||||
Card,
|
||||
Textarea,
|
||||
useToast,
|
||||
Select,
|
||||
Label,
|
||||
} from "@probo/ui";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import { useOrganizationId } from "/hooks/useOrganizationId";
|
||||
import { useFormWithSchema } from "/hooks/useFormWithSchema";
|
||||
import { Controller } from "react-hook-form";
|
||||
import {
|
||||
formatError,
|
||||
type GraphQLError,
|
||||
formatDatetime,
|
||||
toDateInput,
|
||||
getRightsRequestTypeLabel,
|
||||
getRightsRequestTypeOptions,
|
||||
getRightsRequestStateVariant,
|
||||
getRightsRequestStateLabel,
|
||||
getRightsRequestStateOptions,
|
||||
} from "@probo/helpers";
|
||||
import z from "zod";
|
||||
import type { RightsRequestGraphNodeQuery } from "/hooks/graph/__generated__/RightsRequestGraphNodeQuery.graphql";
|
||||
import { use } from "react";
|
||||
import { PermissionsContext } from "/providers/PermissionsContext";
|
||||
|
||||
const updateRequestSchema = z.object({
|
||||
requestType: z.enum(["ACCESS", "DELETION", "PORTABILITY"]),
|
||||
requestState: z.enum(["TODO", "IN_PROGRESS", "DONE"]),
|
||||
dataSubject: z.string().optional(),
|
||||
contact: z.string().optional(),
|
||||
details: z.string().optional(),
|
||||
deadline: z.string().optional(),
|
||||
actionTaken: z.string().optional(),
|
||||
});
|
||||
|
||||
type Props = {
|
||||
queryRef: PreloadedQuery<RightsRequestGraphNodeQuery>;
|
||||
};
|
||||
|
||||
export default function RightsRequestDetailsPage(props: Props) {
|
||||
const data = usePreloadedQuery<RightsRequestGraphNodeQuery>(rightsRequestNodeQuery, props.queryRef);
|
||||
const request = data.node;
|
||||
const { __ } = useTranslate();
|
||||
const { toast } = useToast();
|
||||
const organizationId = useOrganizationId();
|
||||
const { isAuthorized } = use(PermissionsContext);
|
||||
|
||||
const updateRequest = useUpdateRightsRequest();
|
||||
|
||||
const connectionId = ConnectionHandler.getConnectionID(
|
||||
organizationId,
|
||||
RightsRequestsConnectionKey
|
||||
);
|
||||
|
||||
const deleteRequest = useDeleteRightsRequest({ id: request.id! }, connectionId);
|
||||
|
||||
const { register, handleSubmit, formState, control } = useFormWithSchema(
|
||||
updateRequestSchema,
|
||||
{
|
||||
defaultValues: {
|
||||
requestType: request.requestType || "ACCESS",
|
||||
requestState: request.requestState || "TODO",
|
||||
dataSubject: request.dataSubject || "",
|
||||
contact: request.contact || "",
|
||||
details: request.details || "",
|
||||
deadline: toDateInput(request.deadline),
|
||||
actionTaken: request.actionTaken || "",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const onSubmit = handleSubmit(async (formData) => {
|
||||
try {
|
||||
await updateRequest({
|
||||
id: request.id!,
|
||||
requestType: formData.requestType,
|
||||
requestState: formData.requestState,
|
||||
dataSubject: formData.dataSubject || undefined,
|
||||
contact: formData.contact || undefined,
|
||||
details: formData.details || undefined,
|
||||
deadline: formatDatetime(formData.deadline) ?? null,
|
||||
actionTaken: formData.actionTaken || undefined,
|
||||
});
|
||||
|
||||
toast({
|
||||
title: __("Success"),
|
||||
description: __("Rights request updated successfully"),
|
||||
variant: "success",
|
||||
});
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: __("Error"),
|
||||
description: formatError(__("Failed to update rights request"), error as GraphQLError),
|
||||
variant: "error",
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const typeOptions = getRightsRequestTypeOptions(__);
|
||||
const stateOptions = getRightsRequestStateOptions(__);
|
||||
|
||||
const breadcrumbRequestsUrl = `/organizations/${organizationId}/rights-requests`;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ label: __("Rights Requests"), to: breadcrumbRequestsUrl },
|
||||
{ label: request.dataSubject || request.id! },
|
||||
]}
|
||||
/>
|
||||
{isAuthorized("RightsRequest", "deleteRightsRequest") && (
|
||||
<ActionDropdown>
|
||||
<DropdownItem onClick={deleteRequest} variant="danger">
|
||||
{__("Delete")}
|
||||
</DropdownItem>
|
||||
</ActionDropdown>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<div className="p-6">
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<h1 className="text-2xl font-bold">{getRightsRequestTypeLabel(__, request.requestType || "ACCESS")}</h1>
|
||||
<Badge variant="neutral">{getRightsRequestTypeLabel(__, request.requestType || "ACCESS")}</Badge>
|
||||
<Badge variant={getRightsRequestStateVariant(request.requestState || "TODO")}>
|
||||
{getRightsRequestStateLabel(__, request.requestState || "TODO")}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={onSubmit} className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Controller
|
||||
control={control}
|
||||
name="requestType"
|
||||
render={({ field }) => (
|
||||
<div>
|
||||
<Label>{__("Request Type")} *</Label>
|
||||
<Select
|
||||
value={field.value}
|
||||
onValueChange={field.onChange}
|
||||
>
|
||||
{typeOptions.map((option) => (
|
||||
<Option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
{formState.errors.requestType?.message && (
|
||||
<div className="text-red-500 text-sm mt-1">
|
||||
{formState.errors.requestType.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
control={control}
|
||||
name="requestState"
|
||||
render={({ field }) => (
|
||||
<div>
|
||||
<Label>{__("State")} *</Label>
|
||||
<Select
|
||||
value={field.value}
|
||||
onValueChange={field.onChange}
|
||||
>
|
||||
{stateOptions.map((option) => (
|
||||
<Option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
{formState.errors.requestState?.message && (
|
||||
<div className="text-red-500 text-sm mt-1">
|
||||
{formState.errors.requestState.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Field
|
||||
label={__("Data Subject")}
|
||||
{...register("dataSubject")}
|
||||
error={formState.errors.dataSubject?.message}
|
||||
/>
|
||||
|
||||
<Field
|
||||
label={__("Contact")}
|
||||
{...register("contact")}
|
||||
error={formState.errors.contact?.message}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<Label>{__("Details")}</Label>
|
||||
<Textarea
|
||||
{...register("details")}
|
||||
placeholder={__("Enter request details")}
|
||||
rows={3}
|
||||
/>
|
||||
{formState.errors.details?.message && (
|
||||
<div className="text-red-500 text-sm mt-1">
|
||||
{formState.errors.details.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label>{__("Deadline")}</Label>
|
||||
<Input
|
||||
type="date"
|
||||
{...register("deadline")}
|
||||
/>
|
||||
{formState.errors.deadline?.message && (
|
||||
<div className="text-red-500 text-sm mt-1">
|
||||
{formState.errors.deadline.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>{__("Action Taken")}</Label>
|
||||
<Textarea
|
||||
{...register("actionTaken")}
|
||||
placeholder={__("Enter action taken")}
|
||||
rows={3}
|
||||
/>
|
||||
{formState.errors.actionTaken?.message && (
|
||||
<div className="text-red-500 text-sm mt-1">
|
||||
{formState.errors.actionTaken.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end pt-4">
|
||||
{isAuthorized("RightsRequest", "updateRightsRequest") && (
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
disabled={formState.isSubmitting}
|
||||
>
|
||||
{formState.isSubmitting ? __("Saving...") : __("Save Changes")}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,267 @@
|
||||
import {
|
||||
Button,
|
||||
IconPlusLarge,
|
||||
PageHeader,
|
||||
Card,
|
||||
Thead,
|
||||
Tbody,
|
||||
Tr,
|
||||
Th,
|
||||
Td,
|
||||
Badge,
|
||||
ActionDropdown,
|
||||
DropdownItem,
|
||||
IconTrashCan,
|
||||
Table,
|
||||
useConfirm,
|
||||
} from "@probo/ui";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import { usePageTitle } from "@probo/hooks";
|
||||
import {
|
||||
ConnectionHandler,
|
||||
graphql,
|
||||
usePaginationFragment,
|
||||
usePreloadedQuery,
|
||||
useMutation,
|
||||
type PreloadedQuery,
|
||||
} from "react-relay";
|
||||
import { useOrganizationId } from "/hooks/useOrganizationId";
|
||||
import { CreateRightsRequestDialog } from "./dialogs/CreateRightsRequestDialog";
|
||||
import { deleteRightsRequestMutation, RightsRequestsConnectionKey, rightsRequestsQuery } from "../../../hooks/graph/RightsRequestGraph";
|
||||
import {
|
||||
sprintf,
|
||||
promisifyMutation,
|
||||
formatDate,
|
||||
getRightsRequestTypeLabel,
|
||||
getRightsRequestStateVariant,
|
||||
getRightsRequestStateLabel,
|
||||
} from "@probo/helpers";
|
||||
import type { NodeOf } from "/types";
|
||||
import type {
|
||||
RightsRequestsPageFragment$key,
|
||||
RightsRequestsPageFragment$data,
|
||||
} from "./__generated__/RightsRequestsPageFragment.graphql";
|
||||
import { use } from "react";
|
||||
import { PermissionsContext } from "/providers/PermissionsContext";
|
||||
import type { RightsRequestGraphListQuery } from "/hooks/graph/__generated__/RightsRequestGraphListQuery.graphql";
|
||||
|
||||
interface RightsRequestsPageProps {
|
||||
queryRef: PreloadedQuery<RightsRequestGraphListQuery>;
|
||||
}
|
||||
|
||||
const rightsRequestsPageFragment = graphql`
|
||||
fragment RightsRequestsPageFragment on Organization
|
||||
@refetchable(queryName: "RightsRequestsPageRefetchQuery")
|
||||
@argumentDefinitions(
|
||||
first: { type: "Int", defaultValue: 10 }
|
||||
after: { type: "CursorKey" }
|
||||
) {
|
||||
id
|
||||
rightsRequests(
|
||||
first: $first
|
||||
after: $after
|
||||
)
|
||||
@connection(key: "RightsRequestsPage_rightsRequests") {
|
||||
__id
|
||||
totalCount
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
requestType
|
||||
requestState
|
||||
dataSubject
|
||||
contact
|
||||
details
|
||||
deadline
|
||||
actionTaken
|
||||
createdAt
|
||||
updatedAt
|
||||
}
|
||||
}
|
||||
pageInfo {
|
||||
hasNextPage
|
||||
endCursor
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default function RightsRequestsPage({ queryRef }: RightsRequestsPageProps) {
|
||||
const { __ } = useTranslate();
|
||||
const organizationId = useOrganizationId();
|
||||
const { isAuthorized } = use(PermissionsContext);
|
||||
|
||||
usePageTitle(__("Rights Requests"));
|
||||
|
||||
const organization = usePreloadedQuery(
|
||||
rightsRequestsQuery,
|
||||
queryRef
|
||||
);
|
||||
|
||||
const {
|
||||
data,
|
||||
loadNext,
|
||||
hasNext,
|
||||
isLoadingNext,
|
||||
} = usePaginationFragment<
|
||||
RightsRequestGraphListQuery,
|
||||
RightsRequestsPageFragment$key
|
||||
>(rightsRequestsPageFragment, organization.node);
|
||||
|
||||
const connectionId = ConnectionHandler.getConnectionID(
|
||||
organizationId,
|
||||
RightsRequestsConnectionKey
|
||||
);
|
||||
const requests = data?.rightsRequests?.edges?.map((edge) => edge.node) ?? [];
|
||||
|
||||
const hasAnyAction = (
|
||||
isAuthorized("RightsRequest", "updateRightsRequest") ||
|
||||
isAuthorized("RightsRequest", "deleteRightsRequest")
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader title={__("Rights Requests")} description={__("Manage data subject rights requests.")}>
|
||||
{isAuthorized("Organization", "createRightsRequest") && (
|
||||
<CreateRightsRequestDialog
|
||||
organizationId={organizationId}
|
||||
connectionId={connectionId}
|
||||
>
|
||||
<Button icon={IconPlusLarge}>
|
||||
{__("Add rights request")}
|
||||
</Button>
|
||||
</CreateRightsRequestDialog>
|
||||
)}
|
||||
</PageHeader>
|
||||
|
||||
{requests.length > 0 ? (
|
||||
<Card>
|
||||
<Table>
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>{__("Type")}</Th>
|
||||
<Th>{__("State")}</Th>
|
||||
<Th>{__("Data Subject")}</Th>
|
||||
<Th>{__("Contact")}</Th>
|
||||
<Th>{__("Deadline")}</Th>
|
||||
{hasAnyAction && <Th>{__("Actions")}</Th>}
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{requests.map((request) => (
|
||||
<RequestRow
|
||||
key={request.id}
|
||||
request={request}
|
||||
connectionId={connectionId}
|
||||
hasAnyAction={hasAnyAction}
|
||||
/>
|
||||
))}
|
||||
</Tbody>
|
||||
</Table>
|
||||
|
||||
{hasNext && (
|
||||
<div className="p-4 border-t">
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => loadNext(10)}
|
||||
disabled={isLoadingNext}
|
||||
>
|
||||
{isLoadingNext ? __("Loading...") : __("Load more")}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
) : (
|
||||
<Card padded>
|
||||
<div className="text-center py-12">
|
||||
<h3 className="text-lg font-semibold mb-2">
|
||||
{__("No rights requests yet")}
|
||||
</h3>
|
||||
<p className="text-txt-tertiary mb-4">
|
||||
{__("Create your first rights request to get started.")}
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RequestRow({
|
||||
request,
|
||||
connectionId,
|
||||
hasAnyAction,
|
||||
}: {
|
||||
request: NodeOf<NonNullable<RightsRequestsPageFragment$data['rightsRequests']>>;
|
||||
connectionId: string;
|
||||
hasAnyAction: boolean;
|
||||
}) {
|
||||
const organizationId = useOrganizationId();
|
||||
const { __ } = useTranslate();
|
||||
const [deleteRequest] = useMutation(deleteRightsRequestMutation);
|
||||
const confirm = useConfirm();
|
||||
const { isAuthorized } = use(PermissionsContext);
|
||||
|
||||
const handleDelete = () => {
|
||||
confirm(
|
||||
() =>
|
||||
promisifyMutation(deleteRequest)({
|
||||
variables: {
|
||||
input: {
|
||||
rightsRequestId: request.id,
|
||||
},
|
||||
connections: [connectionId],
|
||||
},
|
||||
}),
|
||||
{
|
||||
message: sprintf(
|
||||
__(
|
||||
"This will permanently delete the rights request. This action cannot be undone."
|
||||
)
|
||||
),
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
const detailsUrl = `/organizations/${organizationId}/rights-requests/${request.id}`;
|
||||
|
||||
return (
|
||||
<Tr to={detailsUrl}>
|
||||
<Td>
|
||||
<Badge variant="neutral">{getRightsRequestTypeLabel(__, request.requestType)}</Badge>
|
||||
</Td>
|
||||
<Td>
|
||||
<Badge variant={getRightsRequestStateVariant(request.requestState)}>
|
||||
{getRightsRequestStateLabel(__, request.requestState)}
|
||||
</Badge>
|
||||
</Td>
|
||||
<Td>{request.dataSubject || "-"}</Td>
|
||||
<Td>{request.contact || "-"}</Td>
|
||||
<Td>
|
||||
{request.deadline ? (
|
||||
<time dateTime={request.deadline}>
|
||||
{formatDate(request.deadline)}
|
||||
</time>
|
||||
) : (
|
||||
<span className="text-txt-tertiary">{__("No deadline")}</span>
|
||||
)}
|
||||
</Td>
|
||||
{hasAnyAction && (
|
||||
<Td noLink width={50} className="text-end">
|
||||
<ActionDropdown>
|
||||
{isAuthorized("RightsRequest", "deleteRightsRequest") && (
|
||||
<DropdownItem
|
||||
icon={IconTrashCan}
|
||||
variant="danger"
|
||||
onSelect={handleDelete}
|
||||
>
|
||||
{__("Delete")}
|
||||
</DropdownItem>
|
||||
)}
|
||||
</ActionDropdown>
|
||||
</Td>
|
||||
)}
|
||||
</Tr>
|
||||
);
|
||||
}
|
||||
267
apps/console/src/pages/organizations/rightsRequests/__generated__/RightsRequestsPageFragment.graphql.ts
generated
Normal file
267
apps/console/src/pages/organizations/rightsRequests/__generated__/RightsRequestsPageFragment.graphql.ts
generated
Normal file
@@ -0,0 +1,267 @@
|
||||
/**
|
||||
* @generated SignedSource<<4b94130573ce20c5879e717c00128fbb>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ReaderFragment } from 'relay-runtime';
|
||||
export type RightsRequestState = "DONE" | "IN_PROGRESS" | "TODO";
|
||||
export type RightsRequestType = "ACCESS" | "DELETION" | "PORTABILITY";
|
||||
import { FragmentRefs } from "relay-runtime";
|
||||
export type RightsRequestsPageFragment$data = {
|
||||
readonly id: string;
|
||||
readonly rightsRequests: {
|
||||
readonly __id: string;
|
||||
readonly edges: ReadonlyArray<{
|
||||
readonly node: {
|
||||
readonly actionTaken: string | null | undefined;
|
||||
readonly contact: string | null | undefined;
|
||||
readonly createdAt: any;
|
||||
readonly dataSubject: string | null | undefined;
|
||||
readonly deadline: any | null | undefined;
|
||||
readonly details: string | null | undefined;
|
||||
readonly id: string;
|
||||
readonly requestState: RightsRequestState;
|
||||
readonly requestType: RightsRequestType;
|
||||
readonly updatedAt: any;
|
||||
};
|
||||
}>;
|
||||
readonly pageInfo: {
|
||||
readonly endCursor: any | null | undefined;
|
||||
readonly hasNextPage: boolean;
|
||||
};
|
||||
readonly totalCount: number;
|
||||
};
|
||||
readonly " $fragmentType": "RightsRequestsPageFragment";
|
||||
};
|
||||
export type RightsRequestsPageFragment$key = {
|
||||
readonly " $data"?: RightsRequestsPageFragment$data;
|
||||
readonly " $fragmentSpreads": FragmentRefs<"RightsRequestsPageFragment">;
|
||||
};
|
||||
|
||||
import RightsRequestsPageRefetchQuery_graphql from './RightsRequestsPageRefetchQuery.graphql';
|
||||
|
||||
const node: ReaderFragment = (function(){
|
||||
var v0 = [
|
||||
"rightsRequests"
|
||||
],
|
||||
v1 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
};
|
||||
return {
|
||||
"argumentDefinitions": [
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "after"
|
||||
},
|
||||
{
|
||||
"defaultValue": 10,
|
||||
"kind": "LocalArgument",
|
||||
"name": "first"
|
||||
}
|
||||
],
|
||||
"kind": "Fragment",
|
||||
"metadata": {
|
||||
"connection": [
|
||||
{
|
||||
"count": "first",
|
||||
"cursor": "after",
|
||||
"direction": "forward",
|
||||
"path": (v0/*: any*/)
|
||||
}
|
||||
],
|
||||
"refetch": {
|
||||
"connection": {
|
||||
"forward": {
|
||||
"count": "first",
|
||||
"cursor": "after"
|
||||
},
|
||||
"backward": null,
|
||||
"path": (v0/*: any*/)
|
||||
},
|
||||
"fragmentPathInResult": [
|
||||
"node"
|
||||
],
|
||||
"operation": RightsRequestsPageRefetchQuery_graphql,
|
||||
"identifierInfo": {
|
||||
"identifierField": "id",
|
||||
"identifierQueryVariableName": "id"
|
||||
}
|
||||
}
|
||||
},
|
||||
"name": "RightsRequestsPageFragment",
|
||||
"selections": [
|
||||
(v1/*: any*/),
|
||||
{
|
||||
"alias": "rightsRequests",
|
||||
"args": null,
|
||||
"concreteType": "RightsRequestConnection",
|
||||
"kind": "LinkedField",
|
||||
"name": "__RightsRequestsPage_rightsRequests_connection",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "totalCount",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "RightsRequestEdge",
|
||||
"kind": "LinkedField",
|
||||
"name": "edges",
|
||||
"plural": true,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "RightsRequest",
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v1/*: any*/),
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "requestType",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "requestState",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "dataSubject",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "contact",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "details",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "deadline",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "actionTaken",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "createdAt",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "updatedAt",
|
||||
"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": "hasNextPage",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "endCursor",
|
||||
"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 = "3476c393dc97ae3d730ed5715922e987";
|
||||
|
||||
export default node;
|
||||
@@ -0,0 +1,305 @@
|
||||
/**
|
||||
* @generated SignedSource<<dddf70832ae8eecef831e8832a782f20>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
import { FragmentRefs } from "relay-runtime";
|
||||
export type RightsRequestsPageRefetchQuery$variables = {
|
||||
after?: any | null | undefined;
|
||||
first?: number | null | undefined;
|
||||
id: string;
|
||||
};
|
||||
export type RightsRequestsPageRefetchQuery$data = {
|
||||
readonly node: {
|
||||
readonly " $fragmentSpreads": FragmentRefs<"RightsRequestsPageFragment">;
|
||||
};
|
||||
};
|
||||
export type RightsRequestsPageRefetchQuery = {
|
||||
response: RightsRequestsPageRefetchQuery$data;
|
||||
variables: RightsRequestsPageRefetchQuery$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = [
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "after"
|
||||
},
|
||||
{
|
||||
"defaultValue": 10,
|
||||
"kind": "LocalArgument",
|
||||
"name": "first"
|
||||
},
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "id"
|
||||
}
|
||||
],
|
||||
v1 = [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "id",
|
||||
"variableName": "id"
|
||||
}
|
||||
],
|
||||
v2 = [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "after",
|
||||
"variableName": "after"
|
||||
},
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "first",
|
||||
"variableName": "first"
|
||||
}
|
||||
],
|
||||
v3 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "__typename",
|
||||
"storageKey": null
|
||||
},
|
||||
v4 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
};
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "RightsRequestsPageRefetchQuery",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v1/*: any*/),
|
||||
"concreteType": null,
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"args": (v2/*: any*/),
|
||||
"kind": "FragmentSpread",
|
||||
"name": "RightsRequestsPageFragment"
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Query",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Operation",
|
||||
"name": "RightsRequestsPageRefetchQuery",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v1/*: any*/),
|
||||
"concreteType": null,
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v3/*: any*/),
|
||||
(v4/*: any*/),
|
||||
{
|
||||
"kind": "InlineFragment",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v2/*: any*/),
|
||||
"concreteType": "RightsRequestConnection",
|
||||
"kind": "LinkedField",
|
||||
"name": "rightsRequests",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "totalCount",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "RightsRequestEdge",
|
||||
"kind": "LinkedField",
|
||||
"name": "edges",
|
||||
"plural": true,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "RightsRequest",
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v4/*: any*/),
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "requestType",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "requestState",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "dataSubject",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "contact",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "details",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "deadline",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "actionTaken",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "createdAt",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "updatedAt",
|
||||
"storageKey": null
|
||||
},
|
||||
(v3/*: 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": "hasNextPage",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "endCursor",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"kind": "ClientExtension",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "__id",
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v2/*: any*/),
|
||||
"filters": null,
|
||||
"handle": "connection",
|
||||
"key": "RightsRequestsPage_rightsRequests",
|
||||
"kind": "LinkedHandle",
|
||||
"name": "rightsRequests"
|
||||
}
|
||||
],
|
||||
"type": "Organization",
|
||||
"abstractKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "10c7e9a6f7813d150e34282befd799ff",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "RightsRequestsPageRefetchQuery",
|
||||
"operationKind": "query",
|
||||
"text": "query RightsRequestsPageRefetchQuery(\n $after: CursorKey\n $first: Int = 10\n $id: ID!\n) {\n node(id: $id) {\n __typename\n ...RightsRequestsPageFragment_2HEEH6\n id\n }\n}\n\nfragment RightsRequestsPageFragment_2HEEH6 on Organization {\n id\n rightsRequests(first: $first, after: $after) {\n totalCount\n edges {\n node {\n id\n requestType\n requestState\n dataSubject\n contact\n details\n deadline\n actionTaken\n createdAt\n updatedAt\n __typename\n }\n cursor\n }\n pageInfo {\n hasNextPage\n endCursor\n }\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "3476c393dc97ae3d730ed5715922e987";
|
||||
|
||||
export default node;
|
||||
@@ -0,0 +1,235 @@
|
||||
import { type ReactNode } from "react";
|
||||
import {
|
||||
Button,
|
||||
Field,
|
||||
useToast,
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
useDialogRef,
|
||||
Textarea,
|
||||
Breadcrumb,
|
||||
Label,
|
||||
Select,
|
||||
Option,
|
||||
Input,
|
||||
} from "@probo/ui";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import { z } from "zod";
|
||||
import { useFormWithSchema } from "/hooks/useFormWithSchema";
|
||||
import { useCreateRightsRequest } from "../../../../hooks/graph/RightsRequestGraph";
|
||||
import { Controller } from "react-hook-form";
|
||||
import {
|
||||
formatError,
|
||||
type GraphQLError,
|
||||
formatDatetime,
|
||||
getRightsRequestTypeOptions,
|
||||
getRightsRequestStateOptions,
|
||||
} from "@probo/helpers";
|
||||
|
||||
const schema = z.object({
|
||||
requestType: z.enum(["ACCESS", "DELETION", "PORTABILITY"]),
|
||||
requestState: z.enum(["TODO", "IN_PROGRESS", "DONE"]),
|
||||
dataSubject: z.string().optional(),
|
||||
contact: z.string().optional(),
|
||||
details: z.string().optional(),
|
||||
deadline: z.string().optional(),
|
||||
actionTaken: z.string().optional(),
|
||||
});
|
||||
|
||||
type FormData = z.infer<typeof schema>;
|
||||
|
||||
interface CreateRightsRequestDialogProps {
|
||||
children: ReactNode;
|
||||
organizationId: string;
|
||||
connectionId?: string;
|
||||
}
|
||||
|
||||
export function CreateRightsRequestDialog({
|
||||
children,
|
||||
organizationId,
|
||||
connectionId,
|
||||
}: CreateRightsRequestDialogProps) {
|
||||
const { __ } = useTranslate();
|
||||
const { toast } = useToast();
|
||||
const dialogRef = useDialogRef();
|
||||
|
||||
const createRequest = useCreateRightsRequest(connectionId || "");
|
||||
|
||||
const { register, handleSubmit, formState, reset, control } = useFormWithSchema(schema, {
|
||||
defaultValues: {
|
||||
requestType: "ACCESS" as const,
|
||||
requestState: "TODO" as const,
|
||||
dataSubject: "",
|
||||
contact: "",
|
||||
details: "",
|
||||
deadline: "",
|
||||
actionTaken: "",
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = handleSubmit(async (formData: FormData) => {
|
||||
try {
|
||||
await createRequest({
|
||||
organizationId,
|
||||
requestType: formData.requestType,
|
||||
requestState: formData.requestState,
|
||||
dataSubject: formData.dataSubject || undefined,
|
||||
contact: formData.contact || undefined,
|
||||
details: formData.details || undefined,
|
||||
deadline: formatDatetime(formData.deadline),
|
||||
actionTaken: formData.actionTaken || undefined,
|
||||
});
|
||||
|
||||
toast({
|
||||
title: __("Success"),
|
||||
description: __("Rights request created successfully"),
|
||||
variant: "success",
|
||||
});
|
||||
|
||||
reset();
|
||||
dialogRef.current?.close();
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: __("Error"),
|
||||
description: formatError(__("Failed to create rights request"), error as GraphQLError),
|
||||
variant: "error",
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const typeOptions = getRightsRequestTypeOptions(__);
|
||||
const stateOptions = getRightsRequestStateOptions(__);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
ref={dialogRef}
|
||||
trigger={children}
|
||||
title={<Breadcrumb items={[__("Rights Requests"), __("Create Request")]} />}
|
||||
className="max-w-2xl"
|
||||
>
|
||||
<form onSubmit={onSubmit}>
|
||||
<DialogContent padded className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Controller
|
||||
control={control}
|
||||
name="requestType"
|
||||
render={({ field }) => (
|
||||
<div>
|
||||
<Label>{__("Request Type")} *</Label>
|
||||
<Select
|
||||
value={field.value}
|
||||
onValueChange={field.onChange}
|
||||
>
|
||||
{typeOptions.map((option) => (
|
||||
<Option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
{formState.errors.requestType?.message && (
|
||||
<div className="text-red-500 text-sm mt-1">
|
||||
{formState.errors.requestType.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
control={control}
|
||||
name="requestState"
|
||||
render={({ field }) => (
|
||||
<div>
|
||||
<Label>{__("State")} *</Label>
|
||||
<Select
|
||||
value={field.value}
|
||||
onValueChange={field.onChange}
|
||||
>
|
||||
{stateOptions.map((option) => (
|
||||
<Option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
{formState.errors.requestState?.message && (
|
||||
<div className="text-red-500 text-sm mt-1">
|
||||
{formState.errors.requestState.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Field
|
||||
label={__("Data Subject")}
|
||||
{...register("dataSubject")}
|
||||
placeholder={__("Enter data subject name")}
|
||||
error={formState.errors.dataSubject?.message}
|
||||
/>
|
||||
|
||||
<Field
|
||||
label={__("Contact")}
|
||||
{...register("contact")}
|
||||
placeholder={__("Enter contact information")}
|
||||
error={formState.errors.contact?.message}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<Label>{__("Details")}</Label>
|
||||
<Textarea
|
||||
{...register("details")}
|
||||
placeholder={__("Enter request details")}
|
||||
rows={3}
|
||||
/>
|
||||
{formState.errors.details?.message && (
|
||||
<div className="text-red-500 text-sm mt-1">
|
||||
{formState.errors.details.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label>{__("Deadline")}</Label>
|
||||
<Input
|
||||
type="date"
|
||||
{...register("deadline")}
|
||||
/>
|
||||
{formState.errors.deadline?.message && (
|
||||
<div className="text-red-500 text-sm mt-1">
|
||||
{formState.errors.deadline.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>{__("Action Taken")}</Label>
|
||||
<Textarea
|
||||
{...register("actionTaken")}
|
||||
placeholder={__("Enter action taken")}
|
||||
rows={3}
|
||||
/>
|
||||
{formState.errors.actionTaken?.message && (
|
||||
<div className="text-red-500 text-sm mt-1">
|
||||
{formState.errors.actionTaken.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
disabled={formState.isSubmitting}
|
||||
>
|
||||
{formState.isSubmitting ? __("Creating...") : __("Create Request")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user