website: Unify task controls

Also happens to fix some issues with the no-changes are-you-sure dialog only appearing once and other form values not being reset correctly.

website/src/components/Survey/TaskControls.tsx

@@ -4,21 +4,22 @@ import clsx from "clsx";
 import { SkipButton } from "src/components/Buttons/Skip";
 import { SubmitButton } from "src/components/Buttons/Submit";
 import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
+import { TaskStatus } from "src/components/Tasks/Task";
 
 export interface TaskControlsProps {
   // we need a task type
   // eslint-disable-next-line  @typescript-eslint/no-explicit-any
-  tasks: any[];
+  task: any;
   className?: string;
-  onSubmitResponse: (task: { id: string }) => void;
-  onSkipTask: (task: { id: string }, reason: string) => void;
+  taskStatus: TaskStatus;
+  onSubmit: () => void;
+  onSkip: (reason: string) => void;
   onNextTask: () => void;
 }
 
 export const TaskControls = (props: TaskControlsProps) => {
   const { colorMode } = useColorMode();
   const isLightMode = colorMode === "light";
-  const endTask = props.tasks[props.tasks.length - 1];
   return (
     <section
       className={clsx(
@@ -30,15 +31,16 @@ export const TaskControls = (props: TaskControlsProps) => {
         }
       )}
     >
-      <TaskInfo id={props.tasks[0].id} output="Submit your answer" />
+      <TaskInfo id={props.task.id} output="Submit your answer" />
       <Flex justify="center" ml="auto" gap={2}>
-        <SkipButton
-          onSkip={(reason: string) => {
-            props.onSkipTask(props.tasks[0], reason);
-          }}
-        />
-        {endTask.task.type !== "task_done" ? (
-          <SubmitButton colorScheme="blue" data-cy="submit" onClick={() => props.onSubmitResponse(props.tasks[0])}>
+        <SkipButton onSkip={props.onSkip} disabled={props.taskStatus === "SUBMITTED"} />
+        {props.taskStatus !== "SUBMITTED" ? (
+          <SubmitButton
+            colorScheme="blue"
+            data-cy="submit"
+            disabled={props.taskStatus === "NOT_SUBMITTABLE"}
+            onClick={props.onSubmit}
+          >
             Submit
           </SubmitButton>
         ) : (

website/src/components/Survey/TaskControlsOverridable.tsx

@@ -1,60 +0,0 @@
-import {
-  Button,
-  Flex,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  useDisclosure,
-} from "@chakra-ui/react";
-import { TaskControls, TaskControlsProps } from "src/components/Survey/TaskControls";
-
-interface TaskControlsOverridableProps extends TaskControlsProps {
-  isValid: boolean;
-  prepareForSubmit: () => void;
-}
-
-export const TaskControlsOverridable = (props: TaskControlsOverridableProps) => {
-  const { isValid, onSubmitResponse, ...rest } = props;
-  const { isOpen: isModalOpen, onOpen: onOpenModal, onClose: onModalClose } = useDisclosure();
-
-  const unchangedResponsePrompt = () => {
-    onOpenModal();
-
-    // Ideally this happens when the user clicks submit, but we can't
-    // reliably wait for it to be executed before submitting the response
-    // without significant refactoring.
-    // As a result, modal will only display once even if the user doesn't proceed
-    props.prepareForSubmit();
-  };
-
-  const onSubmitResponseOverride = () => {
-    onSubmitResponse(props.tasks[0]);
-    onModalClose();
-  };
-
-  return (
-    <>
-      <Modal isOpen={isModalOpen} onClose={onModalClose} isCentered>
-        <ModalOverlay />
-        <ModalContent>
-          <ModalCloseButton />
-          <ModalHeader>Order Unchanged</ModalHeader>
-          <ModalBody>You have not changed the order of the prompts. Are you sure you would like to submit?</ModalBody>
-          <ModalFooter>
-            <Flex justify="center" ml="auto" gap={2}>
-              <Button variant={"ghost"} onClick={onModalClose}>
-                Cancel
-              </Button>
-              <Button onClick={onSubmitResponseOverride}>Submit anyway</Button>
-            </Flex>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-      <TaskControls onSubmitResponse={isValid ? props.onSubmitResponse : unchangedResponsePrompt} {...rest} />
-    </>
-  );
-};