From 4fbb5acb70466f43de37127ff7d41da3e432a081 Mon Sep 17 00:00:00 2001 From: Sacha Al Himdani Date: Thu, 12 Mar 2026 14:23:24 +0100 Subject: [PATCH] Change compliance update modals - Merge new and edit modals design - Create a send modal Signed-off-by: Sacha Al Himdani --- ...UpdateFormDialogCreateMutation.graphql.ts} | 24 +-- ...UpdateFormDialogUpdateMutation.graphql.ts} | 24 +-- ...ts => SendUpdateDialogMutation.graphql.ts} | 24 +-- .../CompliancePageMailingListPage.tsx | 7 +- .../_components/CompliancePageUpdatesList.tsx | 62 ++---- .../ComplianceUpdateFormDialog.tsx | 180 ++++++++++++++++++ .../EditComplianceUpdateDialog.tsx | 118 ------------ .../_components/NewComplianceUpdateDialog.tsx | 102 ---------- .../_components/SendUpdateDialog.tsx | 80 ++++++++ 9 files changed, 315 insertions(+), 306 deletions(-) rename apps/console/src/__generated__/core/{NewComplianceUpdateDialogMutation.graphql.ts => ComplianceUpdateFormDialogCreateMutation.graphql.ts} (80%) rename apps/console/src/__generated__/core/{EditComplianceUpdateDialogMutation.graphql.ts => ComplianceUpdateFormDialogUpdateMutation.graphql.ts} (74%) rename apps/console/src/__generated__/core/{CompliancePageUpdatesListSendMutation.graphql.ts => SendUpdateDialogMutation.graphql.ts} (75%) create mode 100644 apps/console/src/pages/organizations/compliance-page/mailing-list/_components/ComplianceUpdateFormDialog.tsx delete mode 100644 apps/console/src/pages/organizations/compliance-page/mailing-list/_components/EditComplianceUpdateDialog.tsx delete mode 100644 apps/console/src/pages/organizations/compliance-page/mailing-list/_components/NewComplianceUpdateDialog.tsx create mode 100644 apps/console/src/pages/organizations/compliance-page/mailing-list/_components/SendUpdateDialog.tsx diff --git a/apps/console/src/__generated__/core/NewComplianceUpdateDialogMutation.graphql.ts b/apps/console/src/__generated__/core/ComplianceUpdateFormDialogCreateMutation.graphql.ts similarity index 80% rename from apps/console/src/__generated__/core/NewComplianceUpdateDialogMutation.graphql.ts rename to apps/console/src/__generated__/core/ComplianceUpdateFormDialogCreateMutation.graphql.ts index 6ed0c94ee..5d13c492c 100644 --- a/apps/console/src/__generated__/core/NewComplianceUpdateDialogMutation.graphql.ts +++ b/apps/console/src/__generated__/core/ComplianceUpdateFormDialogCreateMutation.graphql.ts @@ -1,5 +1,5 @@ /** - * @generated SignedSource<<458f30b721ecd9df210621a8853008c3>> + * @generated SignedSource<<2cec7e8ca8209de4cb2d007ad8bfe9fa>> * @lightSyntaxTransform * @nogrep */ @@ -15,11 +15,11 @@ export type CreateMailingListUpdateInput = { mailingListId: string; title: string; }; -export type NewComplianceUpdateDialogMutation$variables = { +export type ComplianceUpdateFormDialogCreateMutation$variables = { connections: ReadonlyArray; input: CreateMailingListUpdateInput; }; -export type NewComplianceUpdateDialogMutation$data = { +export type ComplianceUpdateFormDialogCreateMutation$data = { readonly createMailingListUpdate: { readonly mailingListUpdate: { readonly body: string; @@ -31,9 +31,9 @@ export type NewComplianceUpdateDialogMutation$data = { }; }; }; -export type NewComplianceUpdateDialogMutation = { - response: NewComplianceUpdateDialogMutation$data; - variables: NewComplianceUpdateDialogMutation$variables; +export type ComplianceUpdateFormDialogCreateMutation = { + response: ComplianceUpdateFormDialogCreateMutation$data; + variables: ComplianceUpdateFormDialogCreateMutation$variables; }; const node: ConcreteRequest = (function(){ @@ -115,7 +115,7 @@ return { ], "kind": "Fragment", "metadata": null, - "name": "NewComplianceUpdateDialogMutation", + "name": "ComplianceUpdateFormDialogCreateMutation", "selections": [ { "alias": null, @@ -140,7 +140,7 @@ return { (v0/*: any*/) ], "kind": "Operation", - "name": "NewComplianceUpdateDialogMutation", + "name": "ComplianceUpdateFormDialogCreateMutation", "selections": [ { "alias": null, @@ -178,16 +178,16 @@ return { ] }, "params": { - "cacheID": "33fc392100d93803de3a189e75961a75", + "cacheID": "52d07d51ab21154cf26f8a932aba5e77", "id": null, "metadata": {}, - "name": "NewComplianceUpdateDialogMutation", + "name": "ComplianceUpdateFormDialogCreateMutation", "operationKind": "mutation", - "text": "mutation NewComplianceUpdateDialogMutation(\n $input: CreateMailingListUpdateInput!\n) {\n createMailingListUpdate(input: $input) {\n mailingListUpdate {\n id\n title\n body\n status\n createdAt\n updatedAt\n }\n }\n}\n" + "text": "mutation ComplianceUpdateFormDialogCreateMutation(\n $input: CreateMailingListUpdateInput!\n) {\n createMailingListUpdate(input: $input) {\n mailingListUpdate {\n id\n title\n body\n status\n createdAt\n updatedAt\n }\n }\n}\n" } }; })(); -(node as any).hash = "bf02b571efaf38d4f4a8fde50b311832"; +(node as any).hash = "6e8c7b014c850c90bcfb876d6e504f4d"; export default node; diff --git a/apps/console/src/__generated__/core/EditComplianceUpdateDialogMutation.graphql.ts b/apps/console/src/__generated__/core/ComplianceUpdateFormDialogUpdateMutation.graphql.ts similarity index 74% rename from apps/console/src/__generated__/core/EditComplianceUpdateDialogMutation.graphql.ts rename to apps/console/src/__generated__/core/ComplianceUpdateFormDialogUpdateMutation.graphql.ts index 137a3b9ab..1193c2800 100644 --- a/apps/console/src/__generated__/core/EditComplianceUpdateDialogMutation.graphql.ts +++ b/apps/console/src/__generated__/core/ComplianceUpdateFormDialogUpdateMutation.graphql.ts @@ -1,5 +1,5 @@ /** - * @generated SignedSource<<622eccc63036573a8e38ffc8dd36e7d7>> + * @generated SignedSource<<160a29eaaba4b3db2c1b7aca34164dd7>> * @lightSyntaxTransform * @nogrep */ @@ -15,10 +15,10 @@ export type UpdateMailingListUpdateInput = { id: string; title: string; }; -export type EditComplianceUpdateDialogMutation$variables = { +export type ComplianceUpdateFormDialogUpdateMutation$variables = { input: UpdateMailingListUpdateInput; }; -export type EditComplianceUpdateDialogMutation$data = { +export type ComplianceUpdateFormDialogUpdateMutation$data = { readonly updateMailingListUpdate: { readonly mailingListUpdate: { readonly body: string; @@ -29,9 +29,9 @@ export type EditComplianceUpdateDialogMutation$data = { }; }; }; -export type EditComplianceUpdateDialogMutation = { - response: EditComplianceUpdateDialogMutation$data; - variables: EditComplianceUpdateDialogMutation$variables; +export type ComplianceUpdateFormDialogUpdateMutation = { + response: ComplianceUpdateFormDialogUpdateMutation$data; + variables: ComplianceUpdateFormDialogUpdateMutation$variables; }; const node: ConcreteRequest = (function(){ @@ -112,7 +112,7 @@ return { "argumentDefinitions": (v0/*: any*/), "kind": "Fragment", "metadata": null, - "name": "EditComplianceUpdateDialogMutation", + "name": "ComplianceUpdateFormDialogUpdateMutation", "selections": (v1/*: any*/), "type": "Mutation", "abstractKey": null @@ -121,20 +121,20 @@ return { "operation": { "argumentDefinitions": (v0/*: any*/), "kind": "Operation", - "name": "EditComplianceUpdateDialogMutation", + "name": "ComplianceUpdateFormDialogUpdateMutation", "selections": (v1/*: any*/) }, "params": { - "cacheID": "49b4c9f194a0bf6ebe01408ae6387f2e", + "cacheID": "49b5feb2a9a2e157568ad2431e032425", "id": null, "metadata": {}, - "name": "EditComplianceUpdateDialogMutation", + "name": "ComplianceUpdateFormDialogUpdateMutation", "operationKind": "mutation", - "text": "mutation EditComplianceUpdateDialogMutation(\n $input: UpdateMailingListUpdateInput!\n) {\n updateMailingListUpdate(input: $input) {\n mailingListUpdate {\n id\n title\n body\n status\n updatedAt\n }\n }\n}\n" + "text": "mutation ComplianceUpdateFormDialogUpdateMutation(\n $input: UpdateMailingListUpdateInput!\n) {\n updateMailingListUpdate(input: $input) {\n mailingListUpdate {\n id\n title\n body\n status\n updatedAt\n }\n }\n}\n" } }; })(); -(node as any).hash = "8b2246ab3bddba658cc488610afcd80f"; +(node as any).hash = "3737c127b41a55df71e09d64aaa3da9e"; export default node; diff --git a/apps/console/src/__generated__/core/CompliancePageUpdatesListSendMutation.graphql.ts b/apps/console/src/__generated__/core/SendUpdateDialogMutation.graphql.ts similarity index 75% rename from apps/console/src/__generated__/core/CompliancePageUpdatesListSendMutation.graphql.ts rename to apps/console/src/__generated__/core/SendUpdateDialogMutation.graphql.ts index 334e30aa1..8f04ae7f3 100644 --- a/apps/console/src/__generated__/core/CompliancePageUpdatesListSendMutation.graphql.ts +++ b/apps/console/src/__generated__/core/SendUpdateDialogMutation.graphql.ts @@ -1,5 +1,5 @@ /** - * @generated SignedSource<> + * @generated SignedSource<<7eced414e0638e806b52e86afcb6cca4>> * @lightSyntaxTransform * @nogrep */ @@ -13,10 +13,10 @@ export type MailingListUpdateStatus = "DRAFT" | "ENQUEUED" | "PROCESSING" | "SEN export type SendMailingListUpdateInput = { id: string; }; -export type CompliancePageUpdatesListSendMutation$variables = { +export type SendUpdateDialogMutation$variables = { input: SendMailingListUpdateInput; }; -export type CompliancePageUpdatesListSendMutation$data = { +export type SendUpdateDialogMutation$data = { readonly sendMailingListUpdate: { readonly mailingListUpdate: { readonly body: string; @@ -27,9 +27,9 @@ export type CompliancePageUpdatesListSendMutation$data = { }; }; }; -export type CompliancePageUpdatesListSendMutation = { - response: CompliancePageUpdatesListSendMutation$data; - variables: CompliancePageUpdatesListSendMutation$variables; +export type SendUpdateDialogMutation = { + response: SendUpdateDialogMutation$data; + variables: SendUpdateDialogMutation$variables; }; const node: ConcreteRequest = (function(){ @@ -110,7 +110,7 @@ return { "argumentDefinitions": (v0/*: any*/), "kind": "Fragment", "metadata": null, - "name": "CompliancePageUpdatesListSendMutation", + "name": "SendUpdateDialogMutation", "selections": (v1/*: any*/), "type": "Mutation", "abstractKey": null @@ -119,20 +119,20 @@ return { "operation": { "argumentDefinitions": (v0/*: any*/), "kind": "Operation", - "name": "CompliancePageUpdatesListSendMutation", + "name": "SendUpdateDialogMutation", "selections": (v1/*: any*/) }, "params": { - "cacheID": "23fee99a4999d2c9cbeecd6fa9863b67", + "cacheID": "714c7cc9cdb06cb384690e17cdaa9958", "id": null, "metadata": {}, - "name": "CompliancePageUpdatesListSendMutation", + "name": "SendUpdateDialogMutation", "operationKind": "mutation", - "text": "mutation CompliancePageUpdatesListSendMutation(\n $input: SendMailingListUpdateInput!\n) {\n sendMailingListUpdate(input: $input) {\n mailingListUpdate {\n id\n title\n body\n status\n updatedAt\n }\n }\n}\n" + "text": "mutation SendUpdateDialogMutation(\n $input: SendMailingListUpdateInput!\n) {\n sendMailingListUpdate(input: $input) {\n mailingListUpdate {\n id\n title\n body\n status\n updatedAt\n }\n }\n}\n" } }; })(); -(node as any).hash = "37c68b46d761280e2ff16f5bff08b249"; +(node as any).hash = "9ec6f363395b934616b97fe50b83d328"; export default node; diff --git a/apps/console/src/pages/organizations/compliance-page/mailing-list/CompliancePageMailingListPage.tsx b/apps/console/src/pages/organizations/compliance-page/mailing-list/CompliancePageMailingListPage.tsx index 27d00afd3..82a828350 100644 --- a/apps/console/src/pages/organizations/compliance-page/mailing-list/CompliancePageMailingListPage.tsx +++ b/apps/console/src/pages/organizations/compliance-page/mailing-list/CompliancePageMailingListPage.tsx @@ -10,9 +10,8 @@ import { useMutationWithToasts } from "#/hooks/useMutationWithToasts"; import { CompliancePageMailingList } from "./_components/CompliancePageMailingList"; import { CompliancePageUpdatesList, type UpdateNode } from "./_components/CompliancePageUpdatesList"; -import { EditComplianceUpdateDialog } from "./_components/EditComplianceUpdateDialog"; +import { ComplianceUpdateFormDialog } from "./_components/ComplianceUpdateFormDialog"; import { NewCompliancePageSubscriberDialog } from "./_components/NewCompliancePageSubscriberDialog"; -import { NewComplianceUpdateDialog } from "./_components/NewComplianceUpdateDialog"; export const compliancePageMailingListPageQuery = graphql` query CompliancePageMailingListPageQuery($organizationId: ID!) { @@ -174,14 +173,14 @@ export function CompliancePageMailingListPage(props: { {mailingListId && updatesConnectionId && ( - )} - diff --git a/apps/console/src/pages/organizations/compliance-page/mailing-list/_components/CompliancePageUpdatesList.tsx b/apps/console/src/pages/organizations/compliance-page/mailing-list/_components/CompliancePageUpdatesList.tsx index 83be541de..fea43d3f4 100644 --- a/apps/console/src/pages/organizations/compliance-page/mailing-list/_components/CompliancePageUpdatesList.tsx +++ b/apps/console/src/pages/organizations/compliance-page/mailing-list/_components/CompliancePageUpdatesList.tsx @@ -1,14 +1,16 @@ import { useTranslate } from "@probo/i18n"; -import { Badge, Button, IconChevronDown, IconPencil, IconSend, IconTrashCan, Spinner, Table, Tbody, Td, Th, Thead, Tr, useConfirm } from "@probo/ui"; +import { Badge, Button, IconChevronDown, IconPageTextLine, IconPencil, IconSend, IconTrashCan, Spinner, Table, Tbody, Td, Th, Thead, Tr, useDialogRef } from "@probo/ui"; +import { useState } from "react"; import { usePaginationFragment } from "react-relay"; import { graphql } from "relay-runtime"; import type { CompliancePageUpdatesListDeleteMutation } from "#/__generated__/core/CompliancePageUpdatesListDeleteMutation.graphql"; import type { CompliancePageUpdatesListFragment$data, CompliancePageUpdatesListFragment$key } from "#/__generated__/core/CompliancePageUpdatesListFragment.graphql"; import type { CompliancePageUpdatesListQuery } from "#/__generated__/core/CompliancePageUpdatesListQuery.graphql"; -import type { CompliancePageUpdatesListSendMutation } from "#/__generated__/core/CompliancePageUpdatesListSendMutation.graphql"; import { useMutationWithToasts } from "#/hooks/useMutationWithToasts"; +import { SendUpdateDialog } from "./SendUpdateDialog"; + const deleteMutation = graphql` mutation CompliancePageUpdatesListDeleteMutation( $input: DeleteMailingListUpdateInput! @@ -20,20 +22,6 @@ const deleteMutation = graphql` } `; -const sendMutation = graphql` - mutation CompliancePageUpdatesListSendMutation($input: SendMailingListUpdateInput!) { - sendMailingListUpdate(input: $input) { - mailingListUpdate { - id - title - body - status - updatedAt - } - } - } -`; - const fragment = graphql` fragment CompliancePageUpdatesListFragment on MailingList @argumentDefinitions( @@ -72,7 +60,9 @@ export function CompliancePageUpdatesList(props: { }) { const { fragmentRef, onEdit } = props; const { __ } = useTranslate(); - const confirm = useConfirm(); + + const sendDialogRef = useDialogRef(); + const [updateToSend, setUpdateToSend] = useState(null); const { data, hasNext, loadNext, isLoadingNext } = usePaginationFragment< CompliancePageUpdatesListQuery, @@ -87,12 +77,6 @@ export function CompliancePageUpdatesList(props: { errorMessage: __("Failed to delete update"), }); - const [sendUpdate, isSending] - = useMutationWithToasts(sendMutation, { - successMessage: __("Update enqueued for delivery"), - errorMessage: __("Failed to enqueue update for delivery"), - }); - const handleDelete = (id: string) => { void deleteUpdate({ variables: { @@ -103,26 +87,13 @@ export function CompliancePageUpdatesList(props: { }; const handleSend = (node: UpdateNode) => { - confirm( - () => - sendUpdate({ - variables: { - input: { - id: node.id, - }, - }, - }), - { - title: __("Send this update to all subscribers?"), - message: `"${node.title}" — ${node.body.length > 120 ? node.body.slice(0, 120) + "…" : node.body}`, - label: __("Send"), - variant: "primary", - }, - ); + setUpdateToSend(node); + sendDialogRef.current?.open(); }; return ( <> + {connection.edges.length === 0 ? ( @@ -159,26 +130,25 @@ export function CompliancePageUpdatesList(props: { {new Date(node.createdAt).toLocaleDateString()}
-
+
{node.status === "DRAFT" && ( )}