add approval id in discord notification and add flashbar after clicking edit

packages/doorman-api/src/functions/api/door/edit.ts

@@ -54,7 +54,9 @@ export const handler: ServerlessFunctionSignature<TwilioContext, EditRequest> =
 
     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<TwilioContext, EditRequest> =
   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(

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<FlashbarProps.MessageDefinition[]>([]);
+
+  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={
+        <Flashbar 
+          stackItems={true}
+          items={alerts}
+        />
+      }
       content={
         <Form
           actions={
@@ -46,7 +83,7 @@ export const EditPage = () => {
                   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`);
                   })
                 }}
               >