diff --git a/packages/doorman-api/src/functions/api/door/edit.ts b/packages/doorman-api/src/functions/api/door/edit.ts index 2ae73b2..98f31bd 100644 --- a/packages/doorman-api/src/functions/api/door/edit.ts +++ b/packages/doorman-api/src/functions/api/door/edit.ts @@ -54,7 +54,9 @@ export const handler: ServerlessFunctionSignature = await Promise.all(discordPromises); - response.setStatusCode(200); + response + .setStatusCode(200) + .setBody(`Configuration change ${approvalId} approved!`); return callback(null, response); } @@ -87,7 +89,7 @@ export const handler: ServerlessFunctionSignature = console.log(approvalUrl); // send update to discord users - const approvalMessage = `Configuration change requested @ Door "${door}" [click to approve it](${approvalUrl})\`\`\`${JSON.stringify(newConfig, null, 4)}\`\`\``; + const approvalMessage = `Configuration change \`${editDoorConfig.approvalId}\` requested @ Door "${door}" [click to approve it](${approvalUrl})\`\`\`${JSON.stringify(newConfig, null, 4)}\`\`\``; const discordPromises = config.discordUsers.map((user) => { return sendMessageToUser( diff --git a/packages/doorman-ui/src/pages/EditPage.tsx b/packages/doorman-ui/src/pages/EditPage.tsx index d77aa4f..6a2dc67 100644 --- a/packages/doorman-ui/src/pages/EditPage.tsx +++ b/packages/doorman-ui/src/pages/EditPage.tsx @@ -1,8 +1,9 @@ -import { AppLayout, BreadcrumbGroup, Button, Container, Form, FormField, Header, Link, SpaceBetween } from "@cloudscape-design/components"; +import { AppLayout, BreadcrumbGroup, Button, Container, Flashbar, FlashbarProps, Form, FormField, Header, Link, SpaceBetween } from "@cloudscape-design/components"; import { useLoaderData, useSearchParams } from "react-router-dom"; import { DoorResponse } from "../types/DoorResponse"; import { useForm } from "react-hook-form"; import { InputTokenGroup } from "../components/InputTokenGroup"; +import { ReactNode, useState } from "react"; export type DoorEditForm = DoorResponse & { pin: string, fallbackNumber: string, discordUser: string }; @@ -13,6 +14,36 @@ export const EditPage = () => { defaultValues: doorResponse, mode: "all", }); + + + const [ alerts, setAlerts ] = useState([]); + + const dismissAlert = (id: string) => { + setAlerts(alerts => alerts.filter(alert => alert.id !== id)); + } + + + const createAlert = (type: FlashbarProps.Type, content: ReactNode): FlashbarProps.MessageDefinition => { + const id = `${Math.random()}`; + return { + id, + type, + content, + dismissible: type !== 'in-progress', + onDismiss: () => dismissAlert(id), + } + } + + const addAlert = (type: FlashbarProps.Type, content: ReactNode): string => { + const newAlert = createAlert(type, content); + setAlerts(alerts => [ + newAlert, + ...alerts, + ]); + + return newAlert.id as string; + } + const fallbackNumbers = watch("fallbackNumbers"); const discordUsers = watch("discordUsers"); @@ -33,6 +64,12 @@ export const EditPage = () => { ]} /> } + notifications={ + + } content={
{ fetch(`/api/door/edit?door=${door}&newConfig=${encodeURIComponent(JSON.stringify(getValues()))}`) .then(res => res.json()) .then(res => { - console.log(res); + addAlert("success", `Created approval, check Discord notifcation from Doorman to confirm and approve the changes`); }) }} >