Limit question response choices to 99 (#693)

You'd have to try really hard to do this in the UI, but this should also serve as documentation.
seek-oss · Dec 20, 2021 · 7927bdc · 7927bdc
1 parent e7e4e71
commit 7927bdc
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 32 deletions.
diff --git a/.changeset/rotten-mugs-develop.md b/.changeset/rotten-mugs-develop.md
@@ -0,0 +1,5 @@
+---
+'wingman-fe': patch
+---
+
+QuestionnaireBuilder: Limit response choices to 99
diff --git a/.../QuestionnaireBuilder/FormBuilder/components/NewQuestionForm/components/SelectOptions.tsx b/.../QuestionnaireBuilder/FormBuilder/components/NewQuestionForm/components/SelectOptions.tsx
@@ -5,6 +5,7 @@ import {
   Columns,
   FieldMessage,
   Stack,
+  Text,
   TextField,
 } from 'braid-design-system';
 import React, { useMemo, useRef } from 'react';
@@ -15,6 +16,11 @@ import { createResolver } from '../../../../../../utils';
 
 import DisplayOption from './DisplayOption';
 
+/**
+ * https://developer.seek.com/schema/#/named-type/ApplicationQuestionInput/field/responseChoice
+ */
+const RESPONSE_CHOICE_LIMIT = 99;
+
 interface FormValues {
   option: string;
 }
@@ -99,39 +105,45 @@ export default ({ options, setOptionList }: SelectOptionsProps) => {
 
   return (
     <Stack space="medium">
-      <Stack space="small">
-        <Columns alignY="bottom" space="small">
-          <Column>
-            <Controller
-              control={control}
-              name="option"
-              render={({ field }) => (
-                <TextField
-                  {...field}
-                  id="questionnaireBuilderAddOption"
-                  label="Options"
-                  onClear={() => setValue('option', '')}
-                  ref={optionInputRef}
-                  tone={errors.option ? 'critical' : undefined}
-                />
-              )}
+      {options.length >= RESPONSE_CHOICE_LIMIT ? (
+        <Text tone="secondary">
+          You can’t provide more than {RESPONSE_CHOICE_LIMIT} options.
+        </Text>
+      ) : (
+        <Stack space="small">
+          <Columns alignY="bottom" space="small">
+            <Column>
+              <Controller
+                control={control}
+                name="option"
+                render={({ field }) => (
+                  <TextField
+                    {...field}
+                    id="questionnaireBuilderAddOption"
+                    label="Options"
+                    onClear={() => setValue('option', '')}
+                    ref={optionInputRef}
+                    tone={errors.option ? 'critical' : undefined}
+                  />
+                )}
+              />
+            </Column>
+            <Column width="content">
+              <Actions>
+                <Button onClick={handleSubmit(addOption)}>Add</Button>
+              </Actions>
+            </Column>
+          </Columns>
+
+          {errors.option?.message ? (
+            <FieldMessage
+              id="questionnaireBuilderAddOptionMessage"
+              message={errors.option.message}
+              tone="critical"
             />
-          </Column>
-          <Column width="content">
-            <Actions>
-              <Button onClick={handleSubmit(addOption)}>Add</Button>
-            </Actions>
-          </Column>
-        </Columns>
-
-        {errors.option?.message ? (
-          <FieldMessage
-            id="questionnaireBuilderAddOptionMessage"
-            message={errors.option.message}
-            tone="critical"
-          />
-        ) : null}
-      </Stack>
+          ) : null}
+        </Stack>
+      )}
 
       <Stack dividers space="small">
         {options.map(({ text, preferredIndicator }) => (