feat: pre-populate queue preferences dialog with existing user data

When opening the Queue Preferences modal, fetch the user's existing
record and set initial_options on each checkbox group so returning
users see their current selections pre-filled.

Author: kylehoehns

src/bot/__tests__/joinQueue.test.ts

@@ -19,6 +19,7 @@ describe('joinQueue', () => {
     beforeEach(() => {
       shortCutParam = buildMockShortcutParam();
       languageRepo.listAll = jest.fn();
+      userRepo.find = jest.fn().mockResolvedValue(null);
       shortCutParam.client.conversations.open = jest
         .fn()
         .mockResolvedValue({ channel: { id: DIRECT_MESSAGE_ID } });
@@ -53,6 +54,82 @@ describe('joinQueue', () => {
         expect(blockIds).toContain('interview-format-selection');
       });
 
+      describe('when user has existing preferences', () => {
+        const existingUser = {
+          id: 'some-user-id',
+          name: 'Test User',
+          languages: ['Javascript'],
+          interviewTypes: [InterviewType.PAIRING],
+          formats: [InterviewFormat.IN_PERSON],
+          lastReviewedDate: undefined,
+          lastPairingReviewedDate: undefined,
+        };
+
+        beforeEach(() => {
+          userRepo.find = jest.fn().mockResolvedValue(existingUser);
+        });
+
+        it('should pre-select existing language preferences', async () => {
+          await joinQueue.shortcut(shortCutParam);
+
+          const viewCall = (shortCutParam.client.views.open as jest.Mock).mock.calls[0][0];
+          const langBlock = viewCall.view.blocks.find(
+            (b: { block_id: string }) => b.block_id === ActionId.LANGUAGE_SELECTIONS,
+          );
+          const initialValues = langBlock.element.initial_options.map(
+            (o: { value: string }) => o.value,
+          );
+
+          expect(initialValues).toEqual(['Javascript']);
+        });
+
+        it('should pre-select existing interview type preferences', async () => {
+          await joinQueue.shortcut(shortCutParam);
+
+          const viewCall = (shortCutParam.client.views.open as jest.Mock).mock.calls[0][0];
+          const typeBlock = viewCall.view.blocks.find(
+            (b: { block_id: string }) => b.block_id === ActionId.INTERVIEW_TYPE_SELECTIONS,
+          );
+          const initialValues = typeBlock.element.initial_options.map(
+            (o: { value: string }) => o.value,
+          );
+
+          expect(initialValues).toEqual([InterviewType.PAIRING]);
+        });
+
+        it('should pre-select existing format preferences', async () => {
+          await joinQueue.shortcut(shortCutParam);
+
+          const viewCall = (shortCutParam.client.views.open as jest.Mock).mock.calls[0][0];
+          const formatBlock = viewCall.view.blocks.find(
+            (b: { block_id: string }) => b.block_id === ActionId.INTERVIEW_FORMAT_SELECTION,
+          );
+          const initialValues = formatBlock.element.initial_options.map(
+            (o: { value: string }) => o.value,
+          );
+
+          expect(initialValues).toEqual([InterviewFormat.IN_PERSON]);
+        });
+      });
+
+      describe('when user has no existing preferences', () => {
+        beforeEach(() => {
+          userRepo.find = jest.fn().mockResolvedValue(null);
+        });
+
+        it('should open dialog with no pre-selected options', async () => {
+          await joinQueue.shortcut(shortCutParam);
+
+          const viewCall = (shortCutParam.client.views.open as jest.Mock).mock.calls[0][0];
+          const blocks = viewCall.view.blocks;
+          const inputBlocks = blocks.filter((b: { type: string }) => b.type === 'input');
+
+          for (const block of inputBlocks) {
+            expect(block.element.initial_options).toBeUndefined();
+          }
+        });
+      });
+
       it('should include Leave Queue as a danger button', async () => {
         await joinQueue.shortcut(shortCutParam);
 

src/bot/joinQueue.ts

@@ -1,4 +1,5 @@
 import { ActionParam, CallbackParam, ShortcutParam } from '@/slackTypes';
+import { User } from '@models/User';
 import { languageRepo } from '@repos/languageRepo';
 import { userRepo } from '@repos/userRepo';
 import { App } from '@slack/bolt';
@@ -27,7 +28,43 @@ export const joinQueue = {
     app.action(ActionId.LEAVE_QUEUE, this.handleLeaveQueue.bind(this));
   },
 
-  dialog(languages: string[]): View {
+  dialog(languages: string[], existingUser?: User): View {
+    const initialOptions = <T extends string>(
+      options: Option[],
+      saved: T[] | undefined,
+    ): Option[] | undefined => {
+      if (!saved?.length) return undefined;
+      const filtered = options.filter(o => saved.includes(o.value as T));
+      return filtered.length ? filtered : undefined;
+    };
+
+    const languageOptions = languages.map<Option>(lang => ({
+      text: { text: lang, type: 'plain_text' },
+      value: lang,
+    }));
+
+    const interviewTypeOptions: Option[] = [
+      {
+        text: { text: InterviewTypeLabel.get(InterviewType.HACKERRANK)!, type: 'plain_text' },
+        value: InterviewType.HACKERRANK,
+      },
+      {
+        text: { text: InterviewTypeLabel.get(InterviewType.PAIRING)!, type: 'plain_text' },
+        value: InterviewType.PAIRING,
+      },
+    ];
+
+    const formatOptions: Option[] = [
+      {
+        text: { text: InterviewFormatLabel.get(InterviewFormat.REMOTE)!, type: 'plain_text' },
+        value: InterviewFormat.REMOTE,
+      },
+      {
+        text: { text: InterviewFormatLabel.get(InterviewFormat.IN_PERSON)!, type: 'plain_text' },
+        value: InterviewFormat.IN_PERSON,
+      },
+    ];
+
     return {
       title: { text: 'Queue Preferences', type: 'plain_text' },
       type: 'modal',
@@ -40,10 +77,10 @@ export const joinQueue = {
           element: {
             type: 'checkboxes',
             action_id: ActionId.LANGUAGE_SELECTIONS,
-            options: languages.map<Option>(lang => ({
-              text: { text: lang, type: 'plain_text' },
-              value: lang,
-            })),
+            options: languageOptions,
+            ...(initialOptions(languageOptions, existingUser?.languages) && {
+              initial_options: initialOptions(languageOptions, existingUser?.languages),
+            }),
           },
         },
         {
@@ -53,19 +90,10 @@ export const joinQueue = {
           element: {
             type: 'checkboxes',
             action_id: ActionId.INTERVIEW_TYPE_SELECTIONS,
-            options: [
-              {
-                text: {
-                  text: InterviewTypeLabel.get(InterviewType.HACKERRANK)!,
-                  type: 'plain_text',
-                },
-                value: InterviewType.HACKERRANK,
-              },
-              {
-                text: { text: InterviewTypeLabel.get(InterviewType.PAIRING)!, type: 'plain_text' },
-                value: InterviewType.PAIRING,
-              },
-            ],
+            options: interviewTypeOptions,
+            ...(initialOptions(interviewTypeOptions, existingUser?.interviewTypes) && {
+              initial_options: initialOptions(interviewTypeOptions, existingUser?.interviewTypes),
+            }),
           },
         },
         {
@@ -75,22 +103,10 @@ export const joinQueue = {
           element: {
             type: 'checkboxes',
             action_id: ActionId.INTERVIEW_FORMAT_SELECTION,
-            options: [
-              {
-                text: {
-                  text: InterviewFormatLabel.get(InterviewFormat.REMOTE)!,
-                  type: 'plain_text',
-                },
-                value: InterviewFormat.REMOTE,
-              },
-              {
-                text: {
-                  text: InterviewFormatLabel.get(InterviewFormat.IN_PERSON)!,
-                  type: 'plain_text',
-                },
-                value: InterviewFormat.IN_PERSON,
-              },
-            ],
+            options: formatOptions,
+            ...(initialOptions(formatOptions, existingUser?.formats) && {
+              initial_options: initialOptions(formatOptions, existingUser?.formats),
+            }),
           },
         },
         {
@@ -119,8 +135,14 @@ export const joinQueue = {
     log.d('joinQueue.shortcut', `Opening queue preferences, user.id=${shortcut.user.id}`);
     await ack();
     try {
-      const languages = await languageRepo.listAll();
-      await client.views.open({ trigger_id: shortcut.trigger_id, view: this.dialog(languages) });
+      const [languages, existingUser] = await Promise.all([
+        languageRepo.listAll(),
+        userRepo.find(shortcut.user.id),
+      ]);
+      await client.views.open({
+        trigger_id: shortcut.trigger_id,
+        view: this.dialog(languages, existingUser ?? undefined),
+      });
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       log.e('joinQueue.shortcut', 'Failed', err);