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

Manage errors

Browse Source 
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
This commit is contained in:
Sacha Al Himdani
2025-10-29 14:03:50 +01:00
parent 55743cbb5c
commit 9a33f7b771
84 changed files with 1483 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
apps/console/src/components/PageError.tsx
View File

@@ -68,6 +68,20 @@ export function PageError({ resetErrorBoundary, error: propsError }: Props) {
);
}
if (error && error.toString().includes("UNAUTHORIZED")) {
return (
<div className={classNames.wrapper}>
<h1 className={classNames.title}>
<IconPageCross size={26} />
{__("Access denied")}
</h1>
<p className={classNames.description}>
{__("You don't have permission to access this organization")}
</p>
</div>
);
}
return (
<div className={classNames.wrapper}>
<h1 className={classNames.title}>{__("Unexpected error :(")}</h1>

41
apps/console/src/components/tasks/TaskFormDialog.tsx
View File

@@ -69,13 +69,28 @@ export const taskUpdateMutation = graphql`
}
`;
const schema = z.object({
name: z.string(),
const createTaskSchema = z.object({
name: z.string().min(1),
description: z.string(),
timeEstimate: z.string().nullable(),
assignedToId: z.string(),
measureId: z.string(),
deadline: z.string().optional(),
timeEstimate: z.string().optional().nullable(),
assignedToId: z.preprocess(
(val) => (val === "" || val == null ? undefined : val),
z.string({ required_error: "Assigned to is required" }).min(1, "Assigned to is required")
),
measureId: z.preprocess(
(val) => (val === "" || val == null ? undefined : val),
z.string({ required_error: "Measure is required" }).min(1, "Measure is required")
),
deadline: z.string().optional().nullable(),
});
const updateTaskSchema = z.object({
name: z.string().min(1),
description: z.string(),
timeEstimate: z.string().optional().nullable(),
assignedToId: z.string().optional(),
measureId: z.string().optional(),
deadline: z.string().optional().nullable(),
});
type Props = {
@@ -95,15 +110,17 @@ export default function TaskFormDialog(props: Props) {
const [mutate] = task
? useMutationWithToasts(taskUpdateMutation, {
successMessage: __("Task updated successfully."),
errorMessage: __("Failed to update task. Please try again."),
errorMessage: __("Failed to update task"),
})
: useMutationWithToasts(taskCreateMutation, {
successMessage: __("Task created successfully."),
errorMessage: __("Failed to create task. Please try again."),
errorMessage: __("Failed to create task"),
});
const isUpdating = !!task;
const { control, handleSubmit, register, formState, reset } =
useFormWithSchema(schema, {
useFormWithSchema(isUpdating ? updateTaskSchema : createTaskSchema, {
defaultValues: {
name: task?.name ?? "",
description: task?.description ?? "",
@@ -142,7 +159,7 @@ export default function TaskFormDialog(props: Props) {
connections: [props.connection!],
},
onCompleted: (_response, errors) => {
if (!errors) {
if (!errors && data.measureId) {
updateStoreCounter(relayEnv, data.measureId, "tasks(first:0)", 1);
}
},
@@ -151,7 +168,6 @@ export default function TaskFormDialog(props: Props) {
}
dialogRef.current?.close();
});
const isUpdating = !!task;
const showMeasure = !props.measureId && !isUpdating;
const isCreating = !isUpdating;
@@ -217,9 +233,10 @@ export default function TaskFormDialog(props: Props) {
<Controller
name="timeEstimate"
control={control}
render={({ field: { onChange, ...field } }) => (
render={({ field: { onChange, value, ...field } }) => (
<DurationPicker
{...field}
value={value ?? null}
onValueChange={(value) => onChange(value)}
/>
)}

6
apps/console/src/hooks/forms/useDocumentForm.tsx
View File

@@ -2,9 +2,9 @@ import { z } from "zod";
import { useFormWithSchema } from "../useFormWithSchema";
export const documentSchema = z.object({
title: z.string(),
content: z.string(),
ownerId: z.string(),
title: z.string().min(1, "Title is required"),
content: z.string().min(1, "Content is required"),
ownerId: z.string().min(1, "Owner is required"),
documentType: z.enum(["OTHER", "ISMS", "POLICY", "PROCEDURE"]),
classification: z.enum(["PUBLIC", "INTERNAL", "CONFIDENTIAL", "SECRET"]),
});

8
apps/console/src/hooks/forms/useRiskForm.tsx
View File

@@ -32,10 +32,10 @@ export type RiskKey = useRiskFormFragment$key & { id: string };
// Export the schema so it can be used elsewhere
export const riskSchema = z.object({
category: z.string(),
name: z.string(),
description: z.string(),
ownerId: z.string(),
category: z.string().min(1, "Category is required"),
name: z.string().min(1, "Name is required"),
description: z.string().min(1, "Description is required"),
ownerId: z.string().min(1, "Owner is required"),
treatment: z.enum(["AVOIDED", "MITIGATED", "TRANSFERRED", "ACCEPTED"]),
inherentLikelihood: z.number({ coerce: true }).min(1).max(5),
inherentImpact: z.number({ coerce: true }).min(1).max(5),

26
apps/console/src/hooks/forms/useVendorForm.tsx
View File

@@ -8,21 +8,21 @@ import { useTranslate } from "@probo/i18n";
import { useEffect, useMemo } from "react";
const schema = z.object({
name: z.string(),
description: z.string(),
name: z.string().min(1, "Name is required"),
description: z.string().min(1, "Description is required"),
category: z.string().nullish(),
statusPageUrl: z.string(),
termsOfServiceUrl: z.string(),
privacyPolicyUrl: z.string(),
serviceLevelAgreementUrl: z.string(),
dataProcessingAgreementUrl: z.string(),
websiteUrl: z.string(),
legalName: z.string(),
headquarterAddress: z.string(),
statusPageUrl: z.string().optional(),
termsOfServiceUrl: z.string().optional(),
privacyPolicyUrl: z.string().optional(),
serviceLevelAgreementUrl: z.string().optional(),
dataProcessingAgreementUrl: z.string().optional(),
websiteUrl: z.string().optional(),
legalName: z.string().optional(),
headquarterAddress: z.string().optional(),
certifications: z.array(z.string()),
countries: z.array(z.string()),
securityPageUrl: z.string(),
trustPageUrl: z.string(),
securityPageUrl: z.string().optional(),
trustPageUrl: z.string().optional(),
businessOwnerId: z.string().nullish(),
securityOwnerId: z.string().nullish(),
});
@@ -70,7 +70,7 @@ export function useVendorForm(vendorKey: useVendorFormFragment$key) {
const [mutate] = useMutationWithToasts(vendorUpdateQuery, {
successMessage: __("Vendor updated successfully."),
errorMessage: __("Failed to update vendor. Please try again."),
errorMessage: __("Failed to update vendor"),
});
const defaultValues = useMemo(

10
apps/console/src/hooks/graph/DocumentGraph.ts
View File

@@ -34,7 +34,7 @@ export function useDeleteDocumentMutation() {
deleteDocumentMutation,
{
successMessage: __("Document deleted successfully."),
errorMessage: __("Failed to delete document. Please try again."),
errorMessage: __("Failed to delete document"),
}
);
}
@@ -57,7 +57,7 @@ export function useDeleteDraftDocumentVersionMutation() {
deleteDraftDocumentVersionMutation,
{
successMessage: __("Draft deleted successfully."),
errorMessage: __("Failed to delete draft. Please try again."),
errorMessage: __("Failed to delete draft"),
}
);
}
@@ -79,7 +79,7 @@ export function useBulkDeleteDocumentsMutation() {
bulkDeleteDocumentsMutation,
{
successMessage: __("Documents deleted successfully."),
errorMessage: __("Failed to delete documents. Please try again."),
errorMessage: __("Failed to delete documents"),
}
);
}
@@ -101,7 +101,7 @@ export function useSendSigningNotificationsMutation() {
sendSigningNotificationsMutation,
{
successMessage: __("Signing notifications sent successfully."),
errorMessage: __("Failed to send signing notifications. Please try again."),
errorMessage: __("Failed to send signing notifications"),
}
);
}
@@ -123,7 +123,7 @@ export function useBulkExportDocumentsMutation() {
bulkExportDocumentsMutation,
{
successMessage: __("Document export started successfully. You will receive an email when the export is ready."),
errorMessage: __("Failed to start document export. Please try again."),
errorMessage: __("Failed to start document export"),
}
);
}

4
apps/console/src/hooks/graph/MeasureGraph.ts
View File

@@ -32,7 +32,7 @@ export function useDeleteMeasureMutation() {
deleteMeasureMutation,
{
successMessage: __("Measure deleted successfully."),
errorMessage: __("Failed to delete measure. Please try again."),
errorMessage: __("Failed to delete measure"),
}
);
}
@@ -83,6 +83,6 @@ export const useUpdateMeasure = () => {
return useMutationWithToasts(measureUpdateMutation, {
successMessage: __("Measure updated successfully."),
errorMessage: __("Failed to update measure. Please try again."),
errorMessage: __("Failed to update measure"),
});
};

2
apps/console/src/hooks/graph/OrganizationGraph.ts
View File

@@ -33,7 +33,7 @@ export function useDeleteOrganizationMutation() {
deleteOrganizationMutation,
{
successMessage: __("Organization deleted successfully."),
errorMessage: __("Failed to delete organization. Please try again."),
errorMessage: __("Failed to delete organization"),
}
);
}

11
apps/console/src/hooks/graph/PeopleGraph.ts
View File

@@ -10,9 +10,9 @@ import {
import { useMemo } from "react";
import type { PeopleGraphPaginatedQuery } from "./__generated__/PeopleGraphPaginatedQuery.graphql";
import type { PeopleGraphPaginatedFragment$key } from "./__generated__/PeopleGraphPaginatedFragment.graphql";
import { useConfirm } from "@probo/ui";
import { useConfirm, useToast } from "@probo/ui";
import type { PeopleGraphDeleteMutation } from "./__generated__/PeopleGraphDeleteMutation.graphql";
import { promisifyMutation, sprintf } from "@probo/helpers";
import { promisifyMutation, sprintf, formatError, type GraphQLError } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
const peopleQuery = graphql`
@@ -132,6 +132,7 @@ export const useDeletePeople = (
) => {
const [mutate] = useMutation<PeopleGraphDeleteMutation>(deletePeopleMutation);
const confirm = useConfirm();
const { toast } = useToast();
const { __ } = useTranslate();
return () => {
@@ -147,6 +148,12 @@ export const useDeletePeople = (
},
connections: [connectionId],
},
}).catch((error) => {
toast({
title: __("Error"),
description: formatError(__("Failed to delete people"), error as GraphQLError),
variant: "error",
});
}),
{
message: sprintf(

2
apps/console/src/hooks/graph/RiskGraph.ts
View File

@@ -26,7 +26,7 @@ export function useDeleteRiskMutation() {
return useMutationWithToasts<RiskGraphDeleteMutation>(deleteRiskMutation, {
successMessage: __("Risk deleted successfully."),
errorMessage: __("Failed to delete risk. Please try again."),
errorMessage: __("Failed to delete risk"),
});
}

2
apps/console/src/hooks/graph/SAMLConfigurationGraph.ts
View File

@@ -137,7 +137,7 @@ export function useCreateSAMLConfigurationMutation() {
createSAMLConfigurationMutation,
{
successMessage: "SAML configuration created successfully.",
errorMessage: "Failed to create SAML configuration. Please try again.",
errorMessage: "Failed to create SAML configuration",
}
);
}

2
apps/console/src/hooks/graph/TrustCenterAuditGraph.ts
View File

@@ -22,7 +22,7 @@ export function useTrustCenterAuditUpdate() {
trustCenterAuditUpdateMutation,
{
successMessage: __("Audit visibility updated successfully."),
errorMessage: __("Failed to update audit visibility. Please try again."),
errorMessage: __("Failed to update audit visibility"),
}
);
}

2
apps/console/src/hooks/graph/TrustCenterDocumentGraph.ts
View File

@@ -40,7 +40,7 @@ export function useUpdateDocumentVisibilityMutation() {
updateDocumentVisibilityMutation,
{
successMessage: __("Document visibility updated successfully."),
errorMessage: __("Failed to update document visibility. Please try again."),
errorMessage: __("Failed to update document visibility"),
}
);
}

2
apps/console/src/hooks/graph/TrustCenterVendorGraph.ts
View File

@@ -22,7 +22,7 @@ export function useTrustCenterVendorUpdate() {
trustCenterVendorUpdateMutation,
{
successMessage: __("Vendor visibility updated successfully."),
errorMessage: __("Failed to update vendor visibility. Please try again."),
errorMessage: __("Failed to update vendor visibility"),
}
);
}

2
apps/console/src/hooks/graph/VendorGraph.ts
View File

@@ -36,7 +36,7 @@ export function useCreateVendorMutation() {
createVendorMutation,
{
successMessage: __("Vendor created successfully."),
errorMessage: __("Failed to create vendor. Please try again."),
errorMessage: __("Failed to create vendor"),
}
);
}

26
apps/console/src/hooks/useMutationWithIncrement.ts
View File

@@ -10,6 +10,9 @@ import {
type GraphQLTaggedNode,
type MutationParameters,
} from "relay-runtime";
import { useToast } from "@probo/ui";
import { useTranslate } from "@probo/i18n";
import { formatError, type GraphQLError } from "@probo/helpers";
const defaultOptions = {
field: "totalCount",
@@ -26,17 +29,27 @@ export function useMutationWithIncrement<T extends MutationParameters>(
node: string;
field?: string;
value?: 1 | -1;
errorMessage?: string;
},
) {
const [mutate, isLoading] = useMutation<T>(query);
const relayEnv = useRelayEnvironment();
const { toast } = useToast();
const { __ } = useTranslate();
const options = { ...defaultOptions, ...baseOptions };
const mutateAndIncrement = useCallback(
(queryOptions: UseMutationConfig<T>) => {
return mutate({
...queryOptions,
onCompleted: (response, error) => {
if (!error) {
if (error) {
const errorTitle = options.errorMessage ?? __("Failed to commit this operation");
toast({
title: __("Error"),
description: formatError(errorTitle, error as GraphQLError[]),
variant: "error",
});
} else {
updateStoreCounter(
relayEnv,
options.id,
@@ -47,9 +60,18 @@ export function useMutationWithIncrement<T extends MutationParameters>(
}
queryOptions.onCompleted?.(response, error);
},
onError: (error) => {
const errorTitle = options.errorMessage ?? __("Failed to commit this operation");
toast({
title: __("Error"),
description: formatError(errorTitle, error as GraphQLError),
variant: "error",
});
queryOptions.onError?.(error);
},
});
},
[mutate, options.id, options.node, options.field, options.value, relayEnv],
[mutate, options.id, options.node, options.field, options.value, options.errorMessage, relayEnv, toast, __],
);
return [mutateAndIncrement, isLoading] as const;

10
apps/console/src/hooks/useMutationWithToasts.ts
View File

@@ -3,6 +3,7 @@ import { useMutation, type UseMutationConfig } from "react-relay";
import { useToast } from "@probo/ui";
import { useTranslate } from "@probo/i18n";
import type { MutationParameters, GraphQLTaggedNode } from "relay-runtime";
import { formatError, type GraphQLError } from "@probo/helpers";
/**
* A decorated useMutation hook that emits toast notifications on success or error.
@@ -32,11 +33,10 @@ export function useMutationWithToasts<T extends MutationParameters>(
onCompleted: (response, error) => {
options.onCompleted?.(response, error);
if (error) {
const errorTitle = options.errorMessage ?? __("Failed to commit this operation");
toast({
title: __("Error"),
description:
options.errorMessage ??
__("Failed to commit this operation."),
description: formatError(errorTitle, error as GraphQLError[]),
variant: "error",
});
reject(error);
@@ -57,10 +57,10 @@ export function useMutationWithToasts<T extends MutationParameters>(
resolve();
},
onError: (error) => {
const errorTitle = options.errorMessage ?? __("Failed to commit this operation");
toast({
title: __("Error"),
description:
options.errorMessage ?? __("Failed to commit this operation."),
description: formatError(errorTitle, error as GraphQLError),
variant: "error",
});
reject(error);

4
apps/console/src/pages/auth/ConfirmEmailPage.tsx
View File

@@ -81,7 +81,7 @@ export default function ConfirmEmailPage() {
onError: (err) => {
toast({
title: __("Error"),
description: err.message || __("Failed to confirm email. Please try again."),
description: err.message || __("Failed to confirm email"),
variant: "error",
});
setIsLoading(false);
@@ -90,7 +90,7 @@ export default function ConfirmEmailPage() {
} catch (error) {
toast({
title: __("Error"),
description: error instanceof Error ? error.message : __("Failed to confirm email. Please try again."),
description: error instanceof Error ? error.message : __("Failed to confirm email"),
variant: "error",
});
setIsLoading(false);

6
apps/console/src/pages/organizations/NewOrganizationPage.tsx
View File

@@ -6,6 +6,7 @@ import type { NewOrganizationPageQuery as NewOrganizationPageQueryType } from ".
import type { NewOrganizationPageMutation as NewOrganizationPageMutationType } from "./__generated__/NewOrganizationPageMutation.graphql";
import { useState, type FormEventHandler } from "react";
import { useNavigate } from "react-router";
import { formatError, type GraphQLError } from "@probo/helpers";
const createOrganizationMutation = graphql`
mutation NewOrganizationPageMutation(
@@ -75,11 +76,12 @@ export default function NewOrganizationPage() {
variant: "success",
});
},
onError: (e) => {
onError: (e: GraphQLError) => {
setIsFetching(false);
toast({
title: __("Error"),
description: e.message ?? __("Failed to create organization"),
description: formatError(__("Failed to create organization"), e),
variant: "error",
});
},

4
apps/console/src/pages/organizations/audits/AuditDetailsPage.tsx
View File

@@ -32,7 +32,7 @@ import { FrameworkLogo } from "/components/FrameworkLogo";
import { ControlledField } from "/components/form/ControlledField";
import { useFormWithSchema } from "/hooks/useFormWithSchema";
import z from "zod";
import { getAuditStateLabel, getAuditStateVariant, auditStates, fileSize, sprintf, formatDatetime, formatDate } from "@probo/helpers";
import { getAuditStateLabel, getAuditStateVariant, auditStates, fileSize, sprintf, formatDatetime, formatError, formatDate, type GraphQLError } from "@probo/helpers";
import type { AuditGraphNodeQuery } from "/hooks/graph/__generated__/AuditGraphNodeQuery.graphql";
const updateAuditSchema = z.object({
@@ -96,7 +96,7 @@ export default function AuditDetailsPage(props: Props) {
} catch (error) {
toast({
title: __("Error"),
description: error instanceof Error ? error.message : __("Failed to update audit"),
description: formatError(__("Failed to update audit"), error as GraphQLError),
variant: "error",
});
}

4
apps/console/src/pages/organizations/audits/dialogs/CreateAuditDialog.tsx
View File

@@ -16,7 +16,7 @@ import z from "zod";
import { useFormWithSchema } from "/hooks/useFormWithSchema";
import { ControlledField } from "/components/form/ControlledField";
import { useCreateAudit } from "/hooks/graph/AuditGraph";
import { auditStates, getAuditStateLabel, formatDatetime } from "@probo/helpers";
import { auditStates, getAuditStateLabel, formatDatetime, formatError, type GraphQLError } from "@probo/helpers";
import { useLazyLoadQuery } from "react-relay";
import { graphql } from "relay-runtime";
import { Suspense } from "react";
@@ -94,7 +94,7 @@ export function CreateAuditDialog({
} catch (error) {
toast({
title: __("Error"),
description: error instanceof Error ? error.message : __("Failed to create audit"),
description: formatError(__("Failed to create audit"), error as GraphQLError),
variant: "error",
});
}

3
apps/console/src/pages/organizations/continualImprovements/ContinualImprovementDetailsPage.tsx
View File

@@ -30,6 +30,7 @@ import { useOrganizationId } from "/hooks/useOrganizationId";
import { PeopleSelectField } from "/components/form/PeopleSelectField";
import { useFormWithSchema } from "/hooks/useFormWithSchema";
import { Controller } from "react-hook-form";
import { formatError, type GraphQLError } from "@probo/helpers";
import z from "zod";
import { getStatusVariant, getStatusLabel, formatDatetime, validateSnapshotConsistency } from "@probo/helpers";
import { SnapshotBanner } from "/components/SnapshotBanner";
@@ -113,7 +114,7 @@ export default function ContinualImprovementDetailsPage(props: Props) {
} catch (error) {
toast({
title: __("Error"),
description: __("Failed to update continual improvement entry"),
description: formatError(__("Failed to update continual improvement"), error as GraphQLError),
variant: "error",
});
}

3
apps/console/src/pages/organizations/continualImprovements/dialogs/CreateContinualImprovementDialog.tsx
View File

@@ -20,6 +20,7 @@ import { useFormWithSchema } from "/hooks/useFormWithSchema";
import { useCreateContinualImprovement } from "../../../../hooks/graph/ContinualImprovementGraph";
import { PeopleSelectField } from "/components/form/PeopleSelectField";
import { Controller } from "react-hook-form";
import { formatError, type GraphQLError } from "@probo/helpers";
import { formatDatetime } from "@probo/helpers";
const schema = z.object({
@@ -87,7 +88,7 @@ export function CreateContinualImprovementDialog({
} catch (error) {
toast({
title: __("Error"),
description: __("Failed to create continual improvement entry"),
description: formatError(__("Failed to create continual improvement"), error as GraphQLError),
variant: "error",
});
}

24
apps/console/src/pages/organizations/documents/DocumentDetailPage.tsx
View File

@@ -245,7 +245,7 @@ export default function DocumentDetailPage(props: Props) {
publishDocumentVersionMutation,
{
successMessage: __("Document published successfully."),
errorMessage: __("Failed to publish document. Please try again."),
errorMessage: __("Failed to publish document"),
}
);
const [deleteDocument, isDeleting] = useDeleteDocumentMutation();
@@ -256,23 +256,19 @@ export default function DocumentDetailPage(props: Props) {
exportDocumentVersionPDFMutation,
{
successMessage: __("PDF download started."),
errorMessage: __("Failed to generate PDF. Please try again."),
errorMessage: __("Failed to generate PDF"),
}
);
const userEmailData = useLazyLoadQuery<DocumentDetailPageUserEmailQuery>(
UserEmailQuery,
{}
);
const userEmailData = useLazyLoadQuery<DocumentDetailPageUserEmailQuery>(UserEmailQuery, {});
const defaultEmail = userEmailData.viewer.user.email;
const [updateDocument, isUpdatingDocument] =
useMutationWithToasts<DocumentDetailPageUpdateMutation>(
updateDocumentMutation,
{
successMessage: __("Document updated successfully."),
errorMessage: __("Failed to update document. Please try again."),
}
);
const [updateDocument, isUpdatingDocument] = useMutationWithToasts<DocumentDetailPageUpdateMutation>(
updateDocumentMutation,
{
successMessage: __("Document updated successfully."),
errorMessage: __("Failed to update document"),
}
);
const versionConnectionId = document.versions.__id;
const { register, control, handleSubmit, reset } = useFormWithSchema(

2
apps/console/src/pages/organizations/documents/dialogs/CreateDocumentDialog.tsx
View File

@@ -67,7 +67,7 @@ export function CreateDocumentDialog({ trigger, connection }: Props) {
connections: [connection!],
},
successMessage: __("Document created successfully."),
errorMessage: __("Failed to create document. Please try again."),
errorMessage: __("Failed to create document"),
onSuccess: () => {
dialogRef.current?.close();
reset();

2
apps/console/src/pages/organizations/documents/dialogs/UpdateVersionDialog.tsx
View File

@@ -89,7 +89,7 @@ export default function UpdateVersionDialog({
UpdateDocumentMutation,
{
successMessage: __("Document updated successfully."),
errorMessage: __("Failed to update document. Please try again."),
errorMessage: __("Failed to update document"),
}
);
const { handleSubmit, register } = useFormWithSchema(versionSchema, {

2
apps/console/src/pages/organizations/documents/tabs/DocumentControlsTab.tsx
View File

@@ -78,6 +78,7 @@ export default function DocumentControlsTab() {
{
...incrementOptions,
value: -1,
errorMessage: "Failed to unlink control",
},
);
const [attachControl, isAttaching] = useMutationWithIncrement(
@@ -85,6 +86,7 @@ export default function DocumentControlsTab() {
{
...incrementOptions,
value: 1,
errorMessage: "Failed to link control",
},
);
const isLoading = isDetaching || isAttaching;

67
apps/console/src/pages/organizations/frameworks/FrameworkControlPage.tsx
View File

@@ -2,8 +2,9 @@ import {
useMutation,
usePreloadedQuery,
type PreloadedQuery,
type UseMutationConfig,
} from "react-relay";
import { graphql } from "relay-runtime";
import { graphql, type MutationParameters } from "relay-runtime";
import {
ActionDropdown,
Button,
@@ -11,8 +12,10 @@ import {
IconPencil,
IconTrashCan,
useConfirm,
useToast,
} from "@probo/ui";
import { useTranslate } from "@probo/i18n";
import { formatError, type GraphQLError } from "@probo/helpers";
import { LinkedMeasuresCard } from "/components/measures/LinkedMeasuresCard";
import { useNavigate, useOutletContext } from "react-router";
import { useOrganizationId } from "/hooks/useOrganizationId";
@@ -153,6 +156,7 @@ type Props = {
*/
export default function FrameworkControlPage({ queryRef }: Props) {
const { __ } = useTranslate();
const { toast } = useToast();
const { framework } = useOutletContext<{
framework: FrameworkDetailPageFragment$data;
}>();
@@ -161,25 +165,44 @@ export default function FrameworkControlPage({ queryRef }: Props) {
const organizationId = useOrganizationId();
const confirm = useConfirm();
const navigate = useNavigate();
// Mutations
const [detachMeasure, isDetachingMeasure] = useMutation(
detachMeasureMutation
);
const [attachMeasure, isAttachingMeasure] = useMutation(
attachMeasureMutation
);
const [detachDocument, isDetachingDocument] = useMutation(
detachDocumentMutation
);
const [attachDocument, isAttachingDocument] = useMutation(
attachDocumentMutation
);
const [detachMeasure, isDetachingMeasure] = useMutation(detachMeasureMutation);
const [attachMeasure, isAttachingMeasure] = useMutation(attachMeasureMutation);
const [detachDocument, isDetachingDocument] = useMutation(detachDocumentMutation);
const [attachDocument, isAttachingDocument] = useMutation(attachDocumentMutation);
const [detachAudit, isDetachingAudit] = useMutation(detachAuditMutation);
const [attachAudit, isAttachingAudit] = useMutation(attachAuditMutation);
const [detachSnapshot, isDetachingSnapshot] = useMutation(detachSnapshotMutation);
const [attachSnapshot, isAttachingSnapshot] = useMutation(attachSnapshotMutation);
const [deleteControl] = useMutation(deleteControlMutation);
const withErrorHandling = <T extends MutationParameters>(
mutationFn: (config: UseMutationConfig<T>) => void,
errorMessage: string
) => (options: UseMutationConfig<T>) => {
mutationFn({
...options,
onCompleted: (response, error) => {
if (error) {
toast({
title: __("Error"),
description: formatError(errorMessage, error as GraphQLError),
variant: "error",
});
}
options.onCompleted?.(response, error);
},
onError: (error) => {
toast({
title: __("Error"),
description: formatError(errorMessage, error as GraphQLError),
variant: "error",
});
options.onError?.(error);
},
});
};
const onDelete = () => {
confirm(
() => {
@@ -253,8 +276,8 @@ export default function FrameworkControlPage({ queryRef }: Props) {
measures={control.measures?.edges.map((edge) => edge.node) ?? []}
params={{ controlId: control.id }}
connectionId={control.measures?.__id!}
onAttach={attachMeasure}
onDetach={detachMeasure}
onAttach={withErrorHandling(attachMeasure, __("Failed to link measure"))}
onDetach={withErrorHandling(detachMeasure, __("Failed to unlink measure"))}
disabled={isAttachingMeasure || isDetachingMeasure}
/>
</div>
@@ -264,8 +287,8 @@ export default function FrameworkControlPage({ queryRef }: Props) {
documents={control.documents?.edges.map((edge) => edge.node) ?? []}
params={{ controlId: control.id }}
connectionId={control.documents?.__id!}
onAttach={attachDocument}
onDetach={detachDocument}
onAttach={withErrorHandling(attachDocument, __("Failed to link document"))}
onDetach={withErrorHandling(detachDocument, __("Failed to unlink document"))}
disabled={isAttachingDocument || isDetachingDocument}
/>
</div>
@@ -275,8 +298,8 @@ export default function FrameworkControlPage({ queryRef }: Props) {
audits={control.audits?.edges.map((edge) => edge.node) ?? []}
params={{ controlId: control.id }}
connectionId={control.audits?.__id!}
onAttach={attachAudit}
onDetach={detachAudit}
onAttach={withErrorHandling(attachAudit, __("Failed to link audit"))}
onDetach={withErrorHandling(detachAudit, __("Failed to unlink audit"))}
disabled={isAttachingAudit || isDetachingAudit}
/>
</div>
@@ -286,8 +309,8 @@ export default function FrameworkControlPage({ queryRef }: Props) {
snapshots={control.snapshots?.edges.map((edge) => edge.node) ?? []}
params={{ controlId: control.id }}
connectionId={control.snapshots?.__id!}
onAttach={attachSnapshot}
onDetach={detachSnapshot}
onAttach={withErrorHandling(attachSnapshot, __("Failed to link snapshot"))}
onDetach={withErrorHandling(detachSnapshot, __("Failed to unlink snapshot"))}
disabled={isAttachingSnapshot || isDetachingSnapshot}
/>
</div>

4
apps/console/src/pages/organizations/frameworks/dialogs/FrameworkControlDialog.tsx
View File

@@ -86,11 +86,11 @@ export function FrameworkControlDialog(props: Props) {
const [mutate, isMutating] = props.control
? useMutationWithToasts(updateMutation, {
successMessage: __("Control updated successfully."),
errorMessage: __("Failed to update control. Please try again."),
errorMessage: __("Failed to update control"),
})
: useMutationWithToasts(createMutation, {
successMessage: __("Control created successfully."),
errorMessage: __("Failed to create control. Please try again."),
errorMessage: __("Failed to create control"),
});
const defaultValues = useMemo(() => ({

2
apps/console/src/pages/organizations/measures/MeasuresPage.tsx
View File

@@ -107,7 +107,7 @@ export default function MeasuresPage(props: Props) {
importMeasuresMutation,
{
successMessage: __("Measures imported successfully."),
errorMessage: __("Failed to import measures. Please try again."),
errorMessage: __("Failed to import measures"),
}
);
const importFileRef = useRef<HTMLInputElement>(null);

33
apps/console/src/pages/organizations/measures/dialog/MeasureFormDialog.tsx
View File

@@ -3,11 +3,11 @@ import {
Dialog,
DialogContent,
DialogFooter,
Field,
Input,
Label,
Option,
PropertyRow,
Textarea,
useDialogRef,
type DialogRef,
} from "@probo/ui";
@@ -51,9 +51,9 @@ const measureCreateMutation = graphql`
`;
const measureSchema = z.object({
name: z.string(),
description: z.string(),
category: z.string(),
name: z.string().min(1, "Name is required"),
description: z.string().min(1, "Description is required"),
category: z.string().min(1, "Category is required"),
state: z.enum(measureStates),
});
@@ -73,7 +73,7 @@ export default function MeasureFormDialog(props: Props) {
? useUpdateMeasure()
: useMutationWithToasts(measureCreateMutation, {
successMessage: __("Measure created successfully."),
errorMessage: __("Failed to create measure. Please try again."),
errorMessage: __("Failed to create measure"),
});
const { control, handleSubmit, register, formState, reset } =
@@ -131,20 +131,21 @@ export default function MeasureFormDialog(props: Props) {
>
<form onSubmit={onSubmit}>
<DialogContent className="grid grid-cols-[1fr_420px]">
<div className="py-8 px-10 space-y-4">
<Input
id="title"
required
variant="title"
placeholder={__("Measure title")}
<div className="py-8 px-10 space-y-6">
<Field
{...register("name")}
error={formState.errors.name?.message}
label={__("Measure name")}
placeholder={__("Measure title")}
required
/>
<Textarea
id="content"
variant="ghost"
autogrow
placeholder={__("Add description")}
<Field
{...register("description")}
error={formState.errors.description?.message}
label={__("Description")}
placeholder={__("Add description")}
type="textarea"
required
/>
</div>
{/* Properties form */}

4
apps/console/src/pages/organizations/nonconformities/NonconformityDetailsPage.tsx
View File

@@ -32,7 +32,7 @@ import { PeopleSelectField } from "/components/form/PeopleSelectField";
import { AuditSelectField } from "/components/form/AuditSelectField";
import { useFormWithSchema } from "/hooks/useFormWithSchema";
import z from "zod";
import { getStatusVariant, getStatusLabel, formatDatetime, validateSnapshotConsistency, getStatusOptions } from "@probo/helpers";
import { getStatusVariant, getStatusLabel, formatDatetime, validateSnapshotConsistency, getStatusOptions, formatError, type GraphQLError } from "@probo/helpers";
import type { NonconformityGraphNodeQuery } from "/hooks/graph/__generated__/NonconformityGraphNodeQuery.graphql";
const updateNonconformitySchema = z.object({
@@ -121,7 +121,7 @@ export default function NonconformityDetailsPage(props: Props) {
} catch (error) {
toast({
title: __("Error"),
description: error instanceof Error ? error.message : __("Failed to update nonconformity"),
description: formatError(__("Failed to update nonconformity"), error as GraphQLError),
variant: "error",
});
}

3
apps/console/src/pages/organizations/nonconformities/dialogs/CreateNonconformityDialog.tsx
View File

@@ -21,6 +21,7 @@ import { useCreateNonconformity } from "../../../../hooks/graph/NonconformityGra
import { PeopleSelectField } from "/components/form/PeopleSelectField";
import { AuditSelectField } from "/components/form/AuditSelectField";
import { Controller } from "react-hook-form";
import { formatError, type GraphQLError } from "@probo/helpers";
import { formatDatetime, getStatusOptions } from "@probo/helpers";
const schema = z.object({
@@ -98,7 +99,7 @@ export function CreateNonconformityDialog({
} catch (error) {
toast({
title: __("Error"),
description: __("Failed to create nonconformity"),
description: formatError(__("Failed to create nonconformity"), error as GraphQLError),
variant: "error",
});
}

5
apps/console/src/pages/organizations/obligations/ObligationDetailsPage.tsx
View File

@@ -30,6 +30,7 @@ import { useOrganizationId } from "/hooks/useOrganizationId";
import { PeopleSelectField } from "/components/form/PeopleSelectField";
import { useFormWithSchema } from "/hooks/useFormWithSchema";
import { Controller } from "react-hook-form";
import { formatError, type GraphQLError } from "@probo/helpers";
import z from "zod";
import { getObligationStatusVariant, getObligationStatusLabel, formatDatetime, getObligationStatusOptions, validateSnapshotConsistency } from "@probo/helpers";
import { SnapshotBanner } from "/components/SnapshotBanner";
@@ -120,10 +121,10 @@ export default function ObligationDetailsPage(props: Props) {
description: __("Obligation updated successfully"),
variant: "success",
});
} catch {
} catch (error) {
toast({
title: __("Error"),
description: __("Failed to update obligation"),
description: formatError(__("Failed to update obligation"), error as GraphQLError),
variant: "error",
});
}

5
apps/console/src/pages/organizations/obligations/dialogs/CreateObligationDialog.tsx
View File

@@ -20,6 +20,7 @@ import { useFormWithSchema } from "/hooks/useFormWithSchema";
import { useCreateObligation } from "../../../../hooks/graph/ObligationGraph";
import { PeopleSelectField } from "/components/form/PeopleSelectField";
import { Controller } from "react-hook-form";
import { formatError, type GraphQLError } from "@probo/helpers";
import { formatDatetime, getObligationStatusOptions } from "@probo/helpers";
const schema = z.object({
@@ -91,10 +92,10 @@ export function CreateObligationDialog({
reset();
dialogRef.current?.close();
} catch {
} catch (error) {
toast({
title: __("Error"),
description: __("Failed to create obligation"),
description: formatError(__("Failed to create obligation"), error as GraphQLError),
variant: "error",
});
}

2
apps/console/src/pages/organizations/people/dialogs/CreatePeopleDialog.tsx
View File

@@ -68,7 +68,7 @@ export function CreatePeopleDialog({ children, connectionId }: Props) {
const [mutate, isMutating] = useMutationWithToasts(createPeopleMutation, {
successMessage: __("Person created successfully."),
errorMessage: __("Failed to create person. Please try again."),
errorMessage: __("Failed to create person"),
});
const onSubmit = handleSubmit((data) => {

2
apps/console/src/pages/organizations/people/tabs/PeopleProfileTab.tsx
View File

@@ -45,7 +45,7 @@ export default function PeopleProfileTab() {
updatePeopleMutation,
{
successMessage: __("Member updated successfully."),
errorMessage: __("Failed to update member. Please try again."),
errorMessage: __("Failed to update member"),
}
);

2
apps/console/src/pages/organizations/people/tabs/PeopleRoleTab.tsx
View File

@@ -33,7 +33,7 @@ export default function PeopleRoleTab() {
updatePeopleMutation,
{
successMessage: __("Member updated successfully."),
errorMessage: __("Failed to update member. Please try again."),
errorMessage: __("Failed to update member"),
}
);

3
apps/console/src/pages/organizations/processingActivities/ProcessingActivityDetailsPage.tsx
View File

@@ -27,6 +27,7 @@ import { useOrganizationId } from "/hooks/useOrganizationId";
import { useParams } from "react-router";
import { useFormWithSchema } from "/hooks/useFormWithSchema";
import { Controller } from "react-hook-form";
import { formatError, type GraphQLError } from "@probo/helpers";
import z from "zod";
import { validateSnapshotConsistency } from "@probo/helpers";
import { SnapshotBanner } from "/components/SnapshotBanner";
@@ -146,7 +147,7 @@ export default function ProcessingActivityDetailsPage(props: Props) {
} catch (error) {
toast({
title: __("Error"),
description: __("Failed to update processing activity"),
description: formatError(__("Failed to update processing activity"), error as GraphQLError),
variant: "error",
});
}

3
apps/console/src/pages/organizations/processingActivities/dialogs/CreateProcessingActivityDialog.tsx
View File

@@ -19,6 +19,7 @@ import { useFormWithSchema } from "/hooks/useFormWithSchema";
import { useCreateProcessingActivity } from "../../../../hooks/graph/ProcessingActivityGraph";
import { Controller } from "react-hook-form";
import { VendorsMultiSelectField } from "/components/form/VendorsMultiSelectField";
import { formatError, type GraphQLError } from "@probo/helpers";
import {
SpecialOrCriminalDataOptions,
LawfulBasisOptions,
@@ -119,7 +120,7 @@ export function CreateProcessingActivityDialog({
} catch (error) {
toast({
title: __("Error"),
description: __("Failed to create processing activity"),
description: formatError(__("Failed to create processing activity"), error as GraphQLError),
variant: "error",
});
}

4
apps/console/src/pages/organizations/risks/FormRiskDialog.tsx
View File

@@ -113,7 +113,7 @@ export default function FormRiskDialog({
},
},
successMessage: __("Risk updated successfully."),
errorMessage: __("Failed to update risk. Please try again."),
errorMessage: __("Failed to update risk"),
onSuccess: () => {
ref?.current?.close();
},
@@ -129,7 +129,7 @@ export default function FormRiskDialog({
connections: [connection!],
},
successMessage: __("Risk created successfully."),
errorMessage: __("Failed to create risk. Please try again."),
errorMessage: __("Failed to create risk"),
onSuccess: () => {
ref?.current?.close();
reset();

2
apps/console/src/pages/organizations/snapshots/dialog/SnapshotFormDialog.tsx
View File

@@ -57,7 +57,7 @@ export default function SnapshotFormDialog(props: Props) {
const organizationId = useOrganizationId();
const [mutate] = useMutationWithToasts(snapshotCreateMutation, {
successMessage: __("Snapshot created successfully."),
errorMessage: __("Failed to create snapshot. Please try again."),
errorMessage: __("Failed to create snapshot"),
});
const { handleSubmit, register, reset, control, formState: { errors } } =

6
apps/console/src/pages/organizations/trustCenter/TrustCenterAccessTab.tsx
View File

@@ -142,15 +142,15 @@ export default function TrustCenterAccessTab() {
const [createInvitation, isCreating] = useMutationWithToasts(createTrustCenterAccessMutation, {
successMessage: __("Access created successfully"),
errorMessage: __("Failed to create access. Please try again."),
errorMessage: __("Failed to create access"),
});
const [updateInvitation, isUpdating] = useMutationWithToasts(updateTrustCenterAccessMutation, {
successMessage: __("Access updated successfully"),
errorMessage: __("Failed to update access. Please try again."),
errorMessage: __("Failed to update access"),
});
const [deleteInvitation, isDeleting] = useMutationWithToasts(deleteTrustCenterAccessMutation, {
successMessage: __("Access deleted successfully"),
errorMessage: __("Failed to delete access. Please try again."),
errorMessage: __("Failed to delete access"),
});
const dialogRef = useDialogRef();

6
apps/console/src/pages/organizations/vendors/dialogs/CreateContactDialog.tsx vendored
View File

@@ -47,8 +47,8 @@ export function CreateContactDialog({
const schema = z.object({
fullName: z.string().optional(),
email: z.string().email(__("Please enter a valid email address")).optional().or(z.literal("")),
phone: z.string().regex(phoneRegex, __("Phone number must be in international format (e.g., +1234567890)")).optional().or(z.literal("")),
email: z.union([z.string().email(__("Please enter a valid email address")), z.literal("")]),
phone: z.union([z.string().regex(phoneRegex, __("Phone number must be in international format (e.g., +1234567890)")), z.literal("")]),
role: z.string().optional(),
});
@@ -67,7 +67,7 @@ export function CreateContactDialog({
createContactMutation,
{
successMessage: __("Contact created successfully."),
errorMessage: __("Failed to create contact. Please try again."),
errorMessage: __("Failed to create contact"),
}
);

2
apps/console/src/pages/organizations/vendors/dialogs/CreateRiskAssessmentDialog.tsx vendored
View File

@@ -65,7 +65,7 @@ export function CreateRiskAssessmentDialog({
createRiskAssessmentMutation,
{
successMessage: __("Risk Assessment created successfully."),
errorMessage: __("Failed to create Risk Assessment. Please try again."),
errorMessage: __("Failed to create Risk Assessment"),
}
);

2
apps/console/src/pages/organizations/vendors/dialogs/CreateServiceDialog.tsx vendored
View File

@@ -61,7 +61,7 @@ export function CreateServiceDialog({
createServiceMutation,
{
successMessage: __("Service created successfully."),
errorMessage: __("Failed to create service. Please try again."),
errorMessage: __("Failed to create service"),
}
);

6
apps/console/src/pages/organizations/vendors/dialogs/EditContactDialog.tsx vendored
View File

@@ -43,8 +43,8 @@ export function EditContactDialog({ contactId, contact, onClose }: Props) {
const schema = z.object({
fullName: z.string().optional(),
email: z.string().email(__("Please enter a valid email address")).optional().or(z.literal("")),
phone: z.string().regex(phoneRegex, __("Phone number must be in international format (e.g., +1234567890)")).optional().or(z.literal("")),
email: z.union([z.string().email(__("Please enter a valid email address")), z.literal("")]),
phone: z.union([z.string().regex(phoneRegex, __("Phone number must be in international format (e.g., +1234567890)")), z.literal("")]),
role: z.string().optional(),
});
@@ -64,7 +64,7 @@ export function EditContactDialog({ contactId, contact, onClose }: Props) {
updateContactMutation,
{
successMessage: __("Contact updated successfully."),
errorMessage: __("Failed to update contact. Please try again."),
errorMessage: __("Failed to update contact"),
}
);

2
apps/console/src/pages/organizations/vendors/dialogs/EditServiceDialog.tsx vendored
View File

@@ -56,7 +56,7 @@ export function EditServiceDialog({ serviceId, service, onClose }: Props) {
updateServiceMutation,
{
successMessage: __("Service updated successfully."),
errorMessage: __("Failed to update service. Please try again."),
errorMessage: __("Failed to update service"),
}
);

2
apps/console/src/pages/organizations/vendors/dialogs/ImportAssessmentDialog.tsx vendored
View File

@@ -52,7 +52,7 @@ export function ImportAssessmentDialog({ vendorId, children }: Props) {
importAssessmentMutation,
{
successMessage: __("Vendor assessed successfully."),
errorMessage: __("Failed to assess vendor. Please try again."),
errorMessage: __("Failed to assess vendor"),
}
);

22
apps/console/src/providers/RelayProviders.tsx
View File

@@ -44,6 +44,13 @@ export class AuthenticationRequiredError extends Error {
}
}
export class UnauthorizedError extends Error {
constructor() {
super("UNAUTHORIZED");
this.name = "UnauthorizedError";
}
}
export function buildEndpoint(path: string): string {
const host = import.meta.env.VITE_API_URL;
@@ -71,6 +78,9 @@ const hasUnauthenticatedError = (error: GraphQLError) =>
const hasAuthenticationRequiredError = (error: GraphQLError) =>
error.extensions?.code == "AUTHENTICATION_REQUIRED";
const hasUnauthorizedError = (error: GraphQLError) =>
error.extensions?.code == "UNAUTHORIZED";
const fetchRelay: FetchFunction = async (
request,
variables,
@@ -141,12 +151,10 @@ const fetchRelay: FetchFunction = async (
throw new UnAuthenticatedError();
}
// Check for authentication required errors
const authRequiredError = errors.find(hasAuthenticationRequiredError);
if (authRequiredError?.extensions) {
const { redirectUrl, requiresSaml, organizationId, samlConfigId } = authRequiredError.extensions;
// Throw the error with all the redirect information
throw new AuthenticationRequiredError({
redirectUrl: redirectUrl as string,
requiresSaml: requiresSaml as boolean,
@@ -155,13 +163,9 @@ const fetchRelay: FetchFunction = async (
});
}
throw new Error(
`Error fetching GraphQL query '${
request.name
}' with variables '${JSON.stringify(variables)}': ${JSON.stringify(
json.errors
)}`
);
if (errors.find(hasUnauthorizedError)) {
throw new UnauthorizedError();
}
}
return json;

5
apps/console/src/routes.tsx
View File

@@ -12,6 +12,7 @@ import { Fragment, Suspense } from "react";
import {
relayEnvironment,
UnAuthenticatedError,
UnauthorizedError,
} from "./providers/RelayProviders";
import { PageSkeleton } from "./components/skeletons/PageSkeleton.tsx";
import { loadQuery, type PreloadedQuery } from "react-relay";
@@ -53,6 +54,10 @@ function ErrorBoundary({ error: propsError }: { error?: string }) {
return <Navigate to="/auth/login" />;
}
if (error instanceof UnauthorizedError) {
return <PageError error="UNAUTHORIZED" />;
}
return <PageError error={error?.toString()} />;
}