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

Get rid of previous permission providers

Browse Source 
Signed-off-by: Émile Ré <nemile.re@gmail.com>
This commit is contained in:
Émile Ré
2026-01-02 14:03:47 +01:00
committed by Bryan Frimin
parent 44ce8fdbe6
commit e4a1e75deb
30 changed files with 8380 additions and 8381 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/console/src/pages/iam/memberships/MembershipLayout.tsx
View File

@@ -12,10 +12,14 @@ import { CoreRelayProvider } from "/providers/CoreRelayProvider";
export const membershipLayoutQuery = graphql`
query MembershipLayoutQuery($organizationId: ID!) {
organization: node(id: $organizationId) @required(action: THROW) {
__typename
... on Organization {
...MembershipsDropdown_organizationFragment
...SessionDropdownFragment
...SidebarFragment
viewerMembership @required(action: THROW) {
role
}
}
}
viewer @required(action: THROW) {
@@ -38,6 +42,9 @@ export function MembershipLayout(props: {
membershipLayoutQuery,
queryRef,
);
if (organization.__typename !== "Organization") {
throw new Error("invalid type for organization node");
}
return (
<Layout
@@ -69,7 +76,7 @@ export function MembershipLayout(props: {
sidebar={<Sidebar fKey={organization} />}
>
<CoreRelayProvider>
<Outlet />
<Outlet context={organization.viewerMembership.role} />
</CoreRelayProvider>
</Layout>
);

529
apps/console/src/pages/organizations/rightsRequests/RightsRequestDetailsPage.tsx
View File

@@ -1,289 +1,318 @@
import {
ConnectionHandler,
usePreloadedQuery,
type PreloadedQuery,
ConnectionHandler,
usePreloadedQuery,
type PreloadedQuery,
} from "react-relay";
import {
rightsRequestNodeQuery,
useDeleteRightsRequest,
useUpdateRightsRequest,
RightsRequestsConnectionKey,
rightsRequestNodeQuery,
useDeleteRightsRequest,
useUpdateRightsRequest,
RightsRequestsConnectionKey,
} from "../../../hooks/graph/RightsRequestGraph";
import {
ActionDropdown,
Badge,
Breadcrumb,
Button,
DropdownItem,
Field,
Option,
Input,
Card,
Textarea,
useToast,
Select,
Label,
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,
formatError,
type GraphQLError,
formatDatetime,
toDateInput,
getRightsRequestTypeLabel,
getRightsRequestTypeOptions,
getRightsRequestStateVariant,
getRightsRequestStateLabel,
getRightsRequestStateOptions,
} from "@probo/helpers";
import z from "zod";
import type { RightsRequestGraphNodeQuery } from "/__generated__/core/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(),
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>;
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 data = usePreloadedQuery<RightsRequestGraphNodeQuery>(
rightsRequestNodeQuery,
props.queryRef,
);
const request = data.node;
const { __ } = useTranslate();
const { toast } = useToast();
const organizationId = useOrganizationId();
const updateRequest = useUpdateRightsRequest();
const updateRequest = useUpdateRightsRequest();
const connectionId = ConnectionHandler.getConnectionID(
organizationId,
RightsRequestsConnectionKey,
);
const connectionId = ConnectionHandler.getConnectionID(
organizationId,
RightsRequestsConnectionKey,
);
const deleteRequest = useDeleteRightsRequest(
{ id: request.id! },
connectionId,
);
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 { 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,
});
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",
});
}
});
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 typeOptions = getRightsRequestTypeOptions(__);
const stateOptions = getRightsRequestStateOptions(__);
const breadcrumbRequestsUrl = `/organizations/${organizationId}/rights-requests`;
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",
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! },
]}
/>
{request.canDelete && (
<ActionDropdown>
<DropdownItem onClick={deleteRequest} variant="danger">
{__("Delete")}
</DropdownItem>
</ActionDropdown>
)}
>
{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}
/>
<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>
<Field
label={__("Contact")}
{...register("contact")}
error={formState.errors.contact?.message}
/>
<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>
)}
/>
<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}
<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">
{request.canUpdate && (
<Button
type="submit"
variant="primary"
disabled={formState.isSubmitting}
>
{formState.isSubmitting
? __("Saving...")
: __("Save Changes")}
</Button>
)}
</div>
</form>
</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>
</Card>
</div>
</Card>
</div>
);
);
}

451
apps/console/src/pages/organizations/rightsRequests/RightsRequestsPage.tsx
View File

@@ -1,265 +1,278 @@
import {
Button,
IconPlusLarge,
PageHeader,
Card,
Thead,
Tbody,
Tr,
Th,
Td,
Badge,
ActionDropdown,
DropdownItem,
IconTrashCan,
Table,
useConfirm,
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,
ConnectionHandler,
graphql,
usePaginationFragment,
usePreloadedQuery,
useMutation,
type PreloadedQuery,
} from "react-relay";
import { useOrganizationId } from "/hooks/useOrganizationId";
import { CreateRightsRequestDialog } from "./dialogs/CreateRightsRequestDialog";
import {
deleteRightsRequestMutation,
RightsRequestsConnectionKey,
rightsRequestsQuery,
deleteRightsRequestMutation,
RightsRequestsConnectionKey,
rightsRequestsQuery,
} from "../../../hooks/graph/RightsRequestGraph";
import {
sprintf,
promisifyMutation,
formatDate,
getRightsRequestTypeLabel,
getRightsRequestStateVariant,
getRightsRequestStateLabel,
sprintf,
promisifyMutation,
formatDate,
getRightsRequestTypeLabel,
getRightsRequestStateVariant,
getRightsRequestStateLabel,
} from "@probo/helpers";
import type { NodeOf } from "/types";
import type {
RightsRequestsPageFragment$key,
RightsRequestsPageFragment$data,
RightsRequestsPageFragment$key,
RightsRequestsPageFragment$data,
} from "/__generated__/core/RightsRequestsPageFragment.graphql";
import { use } from "react";
import { PermissionsContext } from "/providers/PermissionsContext";
import type { RightsRequestGraphListQuery } from "/__generated__/core/RightsRequestGraphListQuery.graphql";
interface RightsRequestsPageProps {
queryRef: PreloadedQuery<RightsRequestGraphListQuery>;
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
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
canDelete: permission(action: "core:rights-request:delete")
canUpdate: permission(action: "core:rights-request:update")
}
}
pageInfo {
hasNextPage
endCursor
}
}
}
pageInfo {
hasNextPage
endCursor
}
}
}
`;
export default function RightsRequestsPage({
queryRef,
queryRef,
}: RightsRequestsPageProps) {
const { __ } = useTranslate();
const organizationId = useOrganizationId();
const { isAuthorized } = use(PermissionsContext);
const { __ } = useTranslate();
const organizationId = useOrganizationId();
usePageTitle(__("Rights Requests"));
usePageTitle(__("Rights Requests"));
const organization = usePreloadedQuery(rightsRequestsQuery, queryRef);
const organization = usePreloadedQuery<RightsRequestGraphListQuery>(
rightsRequestsQuery,
queryRef,
);
const { data, loadNext, hasNext, isLoadingNext } = usePaginationFragment<
RightsRequestGraphListQuery,
RightsRequestsPageFragment$key
>(rightsRequestsPageFragment, organization.node);
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 connectionId = ConnectionHandler.getConnectionID(
organizationId,
RightsRequestsConnectionKey,
);
const requests =
data?.rightsRequests?.edges?.map((edge) => edge.node) ?? [];
const hasAnyAction =
isAuthorized("RightsRequest", "updateRightsRequest") ||
isAuthorized("RightsRequest", "deleteRightsRequest");
const hasAnyAction = requests.some(
({ canUpdate, canDelete }) => canUpdate || canDelete,
);
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>
return (
<div className="space-y-6">
<PageHeader
title={__("Rights Requests")}
description={__("Manage data subject rights requests.")}
>
{organization.node.canCreateRightsRequest && (
<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>
{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>
);
{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,
connectionId,
hasAnyAction,
}: {
request: NodeOf<
NonNullable<RightsRequestsPageFragment$data["rightsRequests"]>
>;
connectionId: string;
hasAnyAction: boolean;
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 organizationId = useOrganizationId();
const { __ } = useTranslate();
const [deleteRequest] = useMutation(deleteRightsRequestMutation);
const confirm = useConfirm();
const handleDelete = () => {
confirm(
() =>
promisifyMutation(deleteRequest)({
variables: {
input: {
rightsRequestId: request.id,
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.",
),
),
},
connections: [connectionId],
},
}),
{
message: sprintf(
__(
"This will permanently delete the rights request. This action cannot be undone.",
),
),
},
);
};
);
};
const detailsUrl = `/organizations/${organizationId}/rights-requests/${request.id}`;
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>
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>
{request.canDelete && (
<DropdownItem
icon={IconTrashCan}
variant="danger"
onSelect={handleDelete}
>
{__("Delete")}
</DropdownItem>
)}
</ActionDropdown>
</Td>
)}
</ActionDropdown>
</Td>
)}
</Tr>
);
</Tr>
);
}

12
apps/console/src/pages/organizations/states-of-applicability/StateOfApplicabilityDetailPage.tsx
View File

@@ -29,8 +29,7 @@ import {
useDeleteStateOfApplicability,
updateStateOfApplicabilityMutation,
} from "/hooks/graph/StateOfApplicabilityGraph";
import { use, useState, Suspense } from "react";
import { PermissionsContext } from "/providers/PermissionsContext";
import { useState, Suspense } from "react";
import { usePageTitle } from "@probo/hooks";
import { formatDate, validateSnapshotConsistency } from "@probo/helpers";
import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
@@ -67,7 +66,6 @@ export default function StateOfApplicabilityDetailPage(props: Props) {
const stateOfApplicability = data.node;
const { __ } = useTranslate();
const navigate = useNavigate();
const { isAuthorized } = use(PermissionsContext);
const isSnapshotMode = Boolean(snapshotId);
if (!stateOfApplicabilityId || !stateOfApplicability) {
@@ -104,12 +102,8 @@ export default function StateOfApplicabilityDetailPage(props: Props) {
},
);
const canUpdate =
!isSnapshotMode &&
isAuthorized("StateOfApplicability", "updateStateOfApplicability");
const canDelete =
!isSnapshotMode &&
isAuthorized("StateOfApplicability", "deleteStateOfApplicability");
const canUpdate = !isSnapshotMode && stateOfApplicability.canUpdate;
const canDelete = !isSnapshotMode && stateOfApplicability.canDelete;
const [exportStateOfApplicabilityPDF, isExporting] =
useMutationWithToasts<StateOfApplicabilityDetailPageExportMutation>(

75
apps/console/src/pages/organizations/states-of-applicability/StatesOfApplicabilityPage.tsx
View File

@@ -15,21 +15,29 @@ import {
} from "@probo/ui";
import { useTranslate } from "@probo/i18n";
import type { StateOfApplicabilityGraphPaginatedQuery } from "/__generated__/core/StateOfApplicabilityGraphPaginatedQuery.graphql";
import { type PreloadedQuery } from "react-relay";
import {
useStateOfApplicabilityQuery,
usePreloadedQuery,
type PreloadedQuery,
usePaginationFragment,
} from "react-relay";
import {
useDeleteStateOfApplicability,
paginatedStateOfApplicabilityFragment,
paginatedStateOfApplicabilityQuery,
} from "/hooks/graph/StateOfApplicabilityGraph";
import type { StateOfApplicabilityGraphPaginatedFragment$data } from "/__generated__/core/StateOfApplicabilityGraphPaginatedFragment.graphql";
import type {
StateOfApplicabilityGraphPaginatedFragment$data,
StateOfApplicabilityGraphPaginatedFragment$key,
} from "/__generated__/core/StateOfApplicabilityGraphPaginatedFragment.graphql";
import type { NodeOf } from "/types";
import { usePageTitle } from "@probo/hooks";
import { CreateStateOfApplicabilityDialog } from "./dialogs/CreateStateOfApplicabilityDialog";
import { PermissionsContext } from "/providers/PermissionsContext";
import { use, useEffect } from "react";
import { useEffect } from "react";
import { useOrganizationId } from "/hooks/useOrganizationId";
import { formatDate } from "@probo/helpers";
import { useParams } from "react-router";
import { SnapshotBanner } from "/components/SnapshotBanner";
import type { StateOfApplicabilityListQuery } from "/__generated__/core/StateOfApplicabilityListQuery.graphql";
type StateOfApplicability = NodeOf<
StateOfApplicabilityGraphPaginatedFragment$data["statesOfApplicability"]
@@ -41,20 +49,32 @@ export default function StatesOfApplicabilityPage({
queryRef: PreloadedQuery<StateOfApplicabilityGraphPaginatedQuery>;
}) {
const { __ } = useTranslate();
const { isAuthorized } = use(PermissionsContext);
const { snapshotId } = useParams<{ snapshotId?: string }>();
const isSnapshotMode = Boolean(snapshotId);
const {
statesOfApplicability,
connectionId,
hasNext,
loadNext,
isLoadingNext,
refetch,
} = useStateOfApplicabilityQuery(queryRef);
usePageTitle(__("States of Applicability"));
const { organization } =
usePreloadedQuery<StateOfApplicabilityGraphPaginatedQuery>(
paginatedStateOfApplicabilityQuery,
queryRef,
);
if (organization.__typename !== "Organization") {
throw new Error("Organization not found");
}
const {
data: { statesOfApplicability },
loadNext,
hasNext,
refetch,
isLoadingNext,
} = usePaginationFragment<
StateOfApplicabilityListQuery,
StateOfApplicabilityGraphPaginatedFragment$key
>(paginatedStateOfApplicabilityFragment, organization);
// Refetch with snapshot filter when in snapshot mode
useEffect(() => {
if (snapshotId) {
@@ -67,7 +87,9 @@ export default function StatesOfApplicabilityPage({
const hasAnyAction =
!isSnapshotMode &&
isAuthorized("StateOfApplicability", "deleteStateOfApplicability");
statesOfApplicability.edges
.map((edge) => edge.node)
.some(({ canDelete }) => canDelete);
return (
<div className="space-y-6">
@@ -79,12 +101,9 @@ export default function StatesOfApplicabilityPage({
)}
>
{!isSnapshotMode &&
isAuthorized(
"Organization",
"createStateOfApplicability",
) && (
organization.canCreateStateOfApplicability && (
<CreateStateOfApplicabilityDialog
connectionId={connectionId}
connectionId={statesOfApplicability.__id}
>
<Button icon={IconPlusLarge}>
{__("Add state of applicability")}
@@ -93,7 +112,7 @@ export default function StatesOfApplicabilityPage({
)}
</PageHeader>
{statesOfApplicability && statesOfApplicability.length > 0 ? (
{statesOfApplicability && statesOfApplicability.edges.length > 0 ? (
<Card>
<Table>
<Thead>
@@ -105,11 +124,11 @@ export default function StatesOfApplicabilityPage({
</Tr>
</Thead>
<Tbody>
{statesOfApplicability.map((soa) => (
{statesOfApplicability.edges.map((edge) => (
<StateOfApplicabilityRow
key={soa.id}
stateOfApplicability={soa}
connectionId={connectionId}
key={edge.node.id}
stateOfApplicability={edge.node}
connectionId={statesOfApplicability.__id}
hasAnyAction={hasAnyAction}
/>
))}
@@ -164,7 +183,6 @@ function StateOfApplicabilityRow({
stateOfApplicability,
connectionId,
);
const { isAuthorized } = use(PermissionsContext);
const detailUrl = snapshotId
? `/organizations/${organizationId}/snapshots/${snapshotId}/states-of-applicability/${stateOfApplicability.id}`
@@ -182,10 +200,7 @@ function StateOfApplicabilityRow({
{hasAnyAction && (
<Td noLink width={50} className="text-end">
<ActionDropdown>
{isAuthorized(
"StateOfApplicability",
"deleteStateOfApplicability",
) && (
{stateOfApplicability.canDelete && (
<DropdownItem
icon={IconTrashCan}
variant="danger"

17
apps/console/src/pages/organizations/states-of-applicability/tabs/StateOfApplicabilityControlsTab.tsx
View File

@@ -27,8 +27,6 @@ import {
type EditControlDialogRef,
} from "../dialogs/EditControlDialog";
import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
import { use } from "react";
import { PermissionsContext } from "/providers/PermissionsContext";
export const controlsFragment = graphql`
fragment StateOfApplicabilityControlsTabFragment on StateOfApplicability
@@ -37,6 +35,14 @@ export const controlsFragment = graphql`
controlsInfo: controls(first: 0) {
totalCount
}
canCreateStateOfApplicabilityControlMapping: permission(
action: "core:state-of-applicability:control-mapping:create"
)
canDeleteStateOfApplicabilityControlMapping: permission(
action: "core:state-of-applicability:control-mapping:delete"
)
availableControls {
controlId
sectionTitle
@@ -84,7 +90,6 @@ export default function StateOfApplicabilityControlsTab({
const organizationId = useOrganizationId();
const manageDialogRef = useRef<LinkControlDialogRef>(null);
const editDialogRef = useRef<EditControlDialogRef>(null);
const { isAuthorized } = use(PermissionsContext);
const linkedControls = useMemo(
() =>
@@ -103,11 +108,9 @@ export default function StateOfApplicabilityControlsTab({
);
const canLink =
!isSnapshotMode &&
isAuthorized("StateOfApplicability", "updateStateOfApplicability");
!isSnapshotMode && data.canCreateStateOfApplicabilityControlMapping;
const canUnlink =
!isSnapshotMode &&
isAuthorized("StateOfApplicability", "updateStateOfApplicability");
!isSnapshotMode && data.canDeleteStateOfApplicabilityControlMapping;
const handleOpenManageDialog = () => {
manageDialogRef.current?.open(data.id, () => {