website: Support new widget types for labelling (#966)

* website: Support new widget types for labelling

Adds proper support for yes/no spam style questions as well as a simple interface for flag style labels.

Also cleaned up the Task component to fix some rerender issues.

* website: Fix some UI text, adjust yes/no button alignment

* website: Remove left over console.log

Co-authored-by: notmd <33456881+notmd@users.noreply.github.com>

---------

Co-authored-by: notmd <33456881+notmd@users.noreply.github.com>

website/src/components/Survey/LabelLikertGroup.tsx

@@ -135,7 +135,7 @@ const getLabelInfo = (label: string): LabelInfo => {
         oneDescription: ["Contains text which is incorrect or misleading"],
         inverted: true,
       };
-    case "helpful":
+    case "helpfulness":
       return {
         zeroText: "Unhelful",
         zeroDescription: [],
@@ -186,7 +186,7 @@ const getLabelInfo = (label: string): LabelInfo => {
   }
 };
 
-export const LabelInputGroup = ({ labelIDs, onChange, isEditable = true }: LabelInputGroupProps) => {
+export const LabelLikertGroup = ({ labelIDs, onChange, isEditable = true }: LabelInputGroupProps) => {
   const [labelValues, setLabelValues] = useState<number[]>(Array.from({ length: labelIDs.length }).map(() => null));
 
   const cardColor = useColorModeValue("gray.50", "gray.800");

website/src/components/Survey/TaskControls.tsx

@@ -4,12 +4,10 @@ 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";
+import { BaseTask } from "src/types/Task";
 
 export interface TaskControlsProps {
-  // we need a task type
-  // eslint-disable-next-line  @typescript-eslint/no-explicit-any
-  task: any;
-  className?: string;
+  task: BaseTask;
   taskStatus: TaskStatus;
   onEdit: () => void;
   onReview: () => void;
@@ -17,7 +15,7 @@ export interface TaskControlsProps {
   onSkip: (reason: string) => void;
 }
 
-export const TaskControls = (props: TaskControlsProps) => {
+export const TaskControls = ({ task, taskStatus, onEdit, onReview, onSubmit, onSkip }: TaskControlsProps) => {
   const backgroundColor = useColorModeValue("white", "gray.800");
 
   return (
@@ -31,38 +29,32 @@ export const TaskControls = (props: TaskControlsProps) => {
       shadow="base"
       gap="4"
     >
-      <TaskInfo id={props.task.id} output="Submit your answer" />
+      <TaskInfo id={task.id} output="Submit your answer" />
       <Flex width={["full", "fit-content"]} justify="center" ml="auto" gap={2}>
-        {props.taskStatus === "REVIEW" || props.taskStatus === "SUBMITTED" ? (
+        {taskStatus.mode === "EDIT" ? (
           <>
-            <Tooltip label="Edit">
-              <IconButton
-                size="lg"
-                data-cy="edit"
-                aria-label="edit"
-                onClick={props.onEdit}
-                icon={<Edit2 size="1em" />}
-              />
-            </Tooltip>
+            <SkipButton onSkip={onSkip} />
             <SubmitButton
-              colorScheme="green"
-              data-cy="submit"
-              isDisabled={props.taskStatus === "SUBMITTED"}
-              onClick={props.onSubmit}
+              colorScheme="blue"
+              data-cy="review"
+              isDisabled={taskStatus.replyValidity === "INVALID"}
+              onClick={onReview}
             >
-              Submit
+              Review
             </SubmitButton>
           </>
         ) : (
           <>
-            <SkipButton onSkip={props.onSkip} />
+            <Tooltip label="Edit">
+              <IconButton size="lg" data-cy="edit" aria-label="edit" onClick={onEdit} icon={<Edit2 size="1em" />} />
+            </Tooltip>
             <SubmitButton
-              colorScheme="blue"
-              data-cy="review"
-              isDisabled={props.taskStatus === "NOT_SUBMITTABLE"}
-              onClick={props.onReview}
+              colorScheme="green"
+              data-cy="submit"
+              isDisabled={taskStatus.mode === "SUBMITTED"}
+              onClick={onSubmit}
             >
-              Review
+              Submit
             </SubmitButton>
           </>
         )}