chore(demo): allow to build notifications with multiple actions (#3190)

Author: MartinCupela

examples/vite/src/App.tsx

@@ -89,12 +89,6 @@ if (!apiKey) {
   throw new Error('VITE_STREAM_API_KEY is not defined');
 }
 
-const options: ChannelOptions = {
-  presence: true,
-  state: true,
-  limit: 10,
-};
-
 const sort: ChannelSort = { last_message_at: -1, updated_at: -1 };
 
 // @ts-ignore
@@ -211,6 +205,18 @@ const App = () => {
     () => new URLSearchParams(window.location.search),
     [],
   );
+  const options = useMemo<ChannelOptions>(
+    () => ({
+      // filter_values: {
+      //   user_id: userId,
+      // },
+      // predefined_filter: 'livestreams_channels',
+      presence: true,
+      state: true,
+      limit: 10,
+    }),
+    [],
+  );
   const initialChannelId = useMemo(() => getSelectedChannelIdFromUrl(), []);
   const initialChatView = useMemo(() => getSelectedChatViewFromUrl(), []);
   const initialThreadId = useMemo(

examples/vite/src/AppSettings/ActionsMenu/NotificationPromptDialog.tsx

@@ -6,6 +6,7 @@ import {
   IconArrowLeft,
   IconChevronRight,
   Button,
+  IconMinus,
   IconRefresh,
   IconArrowUp,
   IconCheckmark,
@@ -33,6 +34,7 @@ import {
   parseDuration,
   severityOptions,
   targetPanelOptions,
+  type NotificationDraftAction,
   type NotificationDraft,
   type QueuedNotification,
 } from './triggerNotificationUtils';
@@ -66,6 +68,12 @@ const formatDurationLabel = (duration: number) => {
   return `${(duration / 1000).toFixed(1)}s`;
 };
 
+const formatActionsLabel = (count: number) => `${count} action${count === 1 ? '' : 's'}`;
+
+const isDraftActionReady = (
+  action: Pick<NotificationDraftAction, 'feedback' | 'label'>,
+) => action.label.trim().length > 0 && action.feedback.trim().length > 0;
+
 const NotificationEntrySelect = ({
   label,
   onChange,
@@ -154,6 +162,11 @@ const NotificationChipList = ({
               <span className='app__notification-dialog__chip-panel'>
                 {notification.targetPanel}
               </span>
+              {notification.actions.length > 0 && (
+                <span className='app__notification-dialog__chip-panel'>
+                  {formatActionsLabel(notification.actions.length)}
+                </span>
+              )}
             </span>
             <Button
               appearance='ghost'
@@ -180,21 +193,32 @@ const NotificationChipList = ({
 };
 
 const NotificationDraftForm = ({
+  addDraftAction,
   draft,
   queueCurrentDraft,
   queuedNotifications,
   registerQueuedNotifications,
+  toggleDraftActionInPayload,
   removeQueuedNotification,
   setDraft,
+  updateDraftAction,
 }: {
+  addDraftAction: () => void;
   draft: NotificationDraft;
   queueCurrentDraft: () => void;
   queuedNotifications: QueuedNotification[];
   registerQueuedNotifications: () => void;
+  toggleDraftActionInPayload: (id: string) => void;
   removeQueuedNotification: (id: string) => void;
   setDraft: Dispatch<SetStateAction<NotificationDraft>>;
+  updateDraftAction: <Key extends keyof NotificationDraftAction>(
+    actionId: string,
+    key: Key,
+    value: NotificationDraftAction[Key],
+  ) => void;
 }) => {
   const canQueueCurrentDraft = isDraftReady(draft);
+  const canAddDraftAction = draft.actions.every((action) => action.includedInPayload);
 
   return (
     <>
@@ -254,27 +278,68 @@ const NotificationDraftForm = ({
               options={targetPanelOptions}
               value={draft.targetPanel}
             />
-            <TextInput
-              className='app__notification-dialog__text-input'
-              label='Action Label (optional)'
-              onChange={(event) =>
-                setDraft((current) => ({ ...current, actionLabel: event.target.value }))
-              }
-              placeholder='Optional button label'
-              value={draft.actionLabel}
-            />
-            <TextInput
-              className='app__notification-dialog__text-input app__notification-dialog__text-input--wide'
-              label='Action Follow-up Message (optional)'
-              onChange={(event) =>
-                setDraft((current) => ({
-                  ...current,
-                  actionFeedback: event.target.value,
-                }))
-              }
-              placeholder='Optional notification triggered by the action button'
-              value={draft.actionFeedback}
-            />
+            <div className='app__notification-dialog__actions'>
+              <div className='app__notification-dialog__actions-header'>
+                <span className='app__notification-dialog__field-label'>
+                  Action(s) (optional)
+                </span>
+              </div>
+              <div className='app__notification-dialog__actions-list'>
+                {draft.actions.map((action, index) => {
+                  const canAddActionToPayload = isDraftActionReady(action);
+
+                  return (
+                    <div className='app__notification-dialog__action-row' key={action.id}>
+                      <TextInput
+                        className='app__notification-dialog__text-input'
+                        label={`Action ${index + 1} Label`}
+                        onChange={(event) =>
+                          updateDraftAction(action.id, 'label', event.target.value)
+                        }
+                        placeholder='Optional button label'
+                        value={action.label}
+                      />
+                      <TextInput
+                        className='app__notification-dialog__text-input'
+                        label={`Action ${index + 1} Follow-up Message`}
+                        onChange={(event) =>
+                          updateDraftAction(action.id, 'feedback', event.target.value)
+                        }
+                        placeholder='Optional alert triggered by the action button'
+                        value={action.feedback}
+                      />
+                      <Button
+                        aria-label={
+                          action.includedInPayload
+                            ? 'Remove action from payload'
+                            : 'Add action to payload'
+                        }
+                        appearance='outline'
+                        circular
+                        className='app__notification-dialog__action-toggle'
+                        disabled={!action.includedInPayload && !canAddActionToPayload}
+                        onClick={() => toggleDraftActionInPayload(action.id)}
+                        size='xs'
+                        variant='secondary'
+                      >
+                        {action.includedInPayload ? <IconMinus /> : <IconPlusSmall />}
+                      </Button>
+                    </div>
+                  );
+                })}
+              </div>
+              <Button
+                appearance='ghost'
+                className='app__notification-dialog__action-add'
+                disabled={!canAddDraftAction}
+                onClick={addDraftAction}
+                size='sm'
+                variant='secondary'
+              >
+                <IconPlusSmall />
+                Add action
+              </Button>
+            </div>
           </div>
         </div>
       </Prompt.Body>
@@ -325,7 +390,25 @@ export const NotificationPromptDialog = ({
 }: {
   referenceElement: HTMLElement | null;
 }) => {
-  const [draft, setDraft] = useState(initialDraft);
+  const actionIdRef = useRef(0);
+  const createDraftAction = useCallback((): NotificationDraftAction => {
+    actionIdRef.current += 1;
+
+    return {
+      feedback: '',
+      id: `draft-notification-action-${actionIdRef.current}`,
+      includedInPayload: false,
+      label: '',
+    };
+  }, []);
+  const createInitialDraftState = useCallback(
+    (): NotificationDraft => ({
+      ...initialDraft,
+      actions: [createDraftAction()],
+    }),
+    [createDraftAction],
+  );
+  const [draft, setDraft] = useState<NotificationDraft>(() => createInitialDraftState());
   const [queuedNotifications, setQueuedNotifications] = useState<QueuedNotification[]>(
     [],
   );
@@ -337,9 +420,9 @@ export const NotificationPromptDialog = ({
   const dialogIsOpen = useDialogIsOpen(notificationPromptDialogId, dialogManager?.id);
 
   const resetState = useCallback(() => {
-    setDraft(initialDraft);
+    setDraft(createInitialDraftState());
     setQueuedNotifications([]);
-  }, []);
+  }, [createInitialDraftState]);
 
   useEffect(() => {
     if (dialogIsOpen) return;
@@ -376,8 +459,14 @@ export const NotificationPromptDialog = ({
     setQueuedNotifications((current) => [
       ...current,
       {
-        actionFeedback: draft.actionFeedback,
-        actionLabel: draft.actionLabel,
+        actions: draft.actions
+          .map((action) => ({
+            includedInPayload: action.includedInPayload,
+            feedback: action.feedback.trim(),
+            label: action.label.trim(),
+          }))
+          .filter((action) => action.includedInPayload && action.label && action.feedback)
+          .map(({ feedback, label }) => ({ feedback, label })),
         duration,
         entryDirection: draft.entryDirection as NotificationListEnterFrom,
         id: `queued-notification-${chipIdRef.current}`,
@@ -386,8 +475,8 @@ export const NotificationPromptDialog = ({
         targetPanel: draft.targetPanel as NotificationTargetPanel,
       },
     ]);
-    setDraft(initialDraft);
-  }, [draft]);
+    setDraft(createInitialDraftState());
+  }, [createInitialDraftState, draft]);
 
   const registerQueuedNotifications = useCallback(() => {
     queuedNotifications.forEach(publishNotification);
@@ -398,6 +487,56 @@ export const NotificationPromptDialog = ({
     setQueuedNotifications((current) => current.filter((item) => item.id !== id));
   }, []);
 
+  const addDraftAction = useCallback(() => {
+    setDraft((current) => ({
+      ...current,
+      actions: [...current.actions, createDraftAction()],
+    }));
+  }, [createDraftAction]);
+
+  const toggleDraftActionInPayload = useCallback((id: string) => {
+    setDraft((current) => {
+      return {
+        ...current,
+        actions: current.actions.map((action) =>
+          action.id === id
+            ? { ...action, includedInPayload: !action.includedInPayload }
+            : action,
+        ),
+      };
+    });
+  }, []);
+
+  const updateDraftAction = useCallback(
+    <Key extends keyof NotificationDraftAction>(
+      actionId: string,
+      key: Key,
+      value: NotificationDraftAction[Key],
+    ) => {
+      setDraft((current) => ({
+        ...current,
+        actions: current.actions.map((action) =>
+          action.id === actionId
+            ? {
+                ...action,
+                [key]: value,
+                includedInPayload:
+                  key === 'feedback' || key === 'label'
+                    ? isDraftActionReady({
+                        ...action,
+                        [key]: value,
+                      })
+                      ? action.includedInPayload
+                      : false
+                    : action.includedInPayload,
+              }
+            : action,
+        ),
+      }));
+    },
+    [],
+  );
+
   return (
     <DraggableDialog
       dialogClassName='app__notification-dialog'
@@ -412,12 +551,15 @@ export const NotificationPromptDialog = ({
       title='Trigger Notification'
     >
       <NotificationDraftForm
+        addDraftAction={addDraftAction}
         draft={draft}
         queueCurrentDraft={queueCurrentDraft}
         queuedNotifications={queuedNotifications}
         registerQueuedNotifications={registerQueuedNotifications}
         removeQueuedNotification={removeQueuedNotification}
         setDraft={setDraft}
+        toggleDraftActionInPayload={toggleDraftActionInPayload}
+        updateDraftAction={updateDraftAction}
       />
     </DraggableDialog>
   );