From 58a07dd05d781945248207698d3c9499b2a2c2b8 Mon Sep 17 00:00:00 2001
From: Adrian Cowan <othrayte@gmail.com>
Date: Thu, 26 Jan 2023 18:10:47 +1100
Subject: [PATCH] website: Make the spam question simple again

This is an initial quick fix to get back simple buttons. This should be followed up with some refactoring or maybe a real spam task.
---
 website/cypress/e2e/tasks/random.cy.ts        |  9 ++++
 website/src/components/FlaggableElement.tsx   |  2 +-
 .../src/components/Survey/LabelInputGroup.tsx |  1 -
 .../components/Tasks/LabelTask/LabelTask.tsx  | 54 +++++++++++++++----
 4 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/website/cypress/e2e/tasks/random.cy.ts b/website/cypress/e2e/tasks/random.cy.ts
index 7e14dd1d..467ebda9 100644
--- a/website/cypress/e2e/tasks/random.cy.ts
+++ b/website/cypress/e2e/tasks/random.cy.ts
@@ -55,6 +55,15 @@ describe("handles random tasks", () => {
 
                 break;
               }
+              case "spam-task": {
+                cy.get('[data-cy="not-spam-button"]').click();
+
+                cy.get('[data-cy="review"]').click();
+
+                cy.get('[data-cy="submit"]').click();
+
+                break;
+              }
               case undefined: {
                 throw new Error(
                   "No tasks available, but at least create initial prompt expected"
diff --git a/website/src/components/FlaggableElement.tsx b/website/src/components/FlaggableElement.tsx
index 0bebce97..d7572080 100644
--- a/website/src/components/FlaggableElement.tsx
+++ b/website/src/components/FlaggableElement.tsx
@@ -95,7 +95,7 @@ export const FlaggableElement = (props: FlaggableElementProps) => {
           <ModalHeader>Select one or more labels that apply.</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
-            <LabelInputGroup simple labelIDs={valid_labels.map(({ name }) => name)} onChange={setValues} />
+            <LabelInputGroup labelIDs={valid_labels.map(({ name }) => name)} onChange={setValues} />
           </ModalBody>
           <ModalFooter>
             <Button
diff --git a/website/src/components/Survey/LabelInputGroup.tsx b/website/src/components/Survey/LabelInputGroup.tsx
index 58a78260..06e0888b 100644
--- a/website/src/components/Survey/LabelInputGroup.tsx
+++ b/website/src/components/Survey/LabelInputGroup.tsx
@@ -6,7 +6,6 @@ import { Explain } from "src/components/Explain";
 
 interface LabelInputGroupProps {
   labelIDs: Array<string>;
-  simple?: boolean;
   onChange: (values: number[]) => unknown;
   isEditable?: boolean;
 }
diff --git a/website/src/components/Tasks/LabelTask/LabelTask.tsx b/website/src/components/Tasks/LabelTask/LabelTask.tsx
index 6296f105..2a08eb66 100644
--- a/website/src/components/Tasks/LabelTask/LabelTask.tsx
+++ b/website/src/components/Tasks/LabelTask/LabelTask.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Text, useColorModeValue } from "@chakra-ui/react";
+import { Box, Button, Flex, HStack, Text, useColorModeValue } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { MessageView } from "src/components/Messages";
 import { MessageTable } from "src/components/Messages/MessageTable";
@@ -25,9 +25,10 @@ export const LabelTask = ({
   }, [task, sliderValues, onReplyChanged, onValidityChanged]);
 
   const cardColor = useColorModeValue("gray.50", "gray.800");
+  const isSpamTask = task.mode === "simple" && task.valid_labels.length === 1 && task.valid_labels[0] === "spam";
 
   return (
-    <div data-cy="task" data-task-type="label-task">
+    <div data-cy="task" data-task-type={isSpamTask ? "spam-task" : "label-task"}>
       <TwoColumnsWithCards>
         <>
           <TaskHeader taskType={taskType} />
@@ -51,16 +52,51 @@ export const LabelTask = ({
             </Box>
           )}
         </>
-        <Flex direction="column" alignItems="stretch">
-          <Text>The highlighted message:</Text>
-          <LabelInputGroup
-            simple={task.mode === "simple"}
-            labelIDs={task.valid_labels}
+        {isSpamTask ? (
+          <SpamTaskInput
+            value={sliderValues[0]}
+            onChange={(value) => setSliderValues([value])}
             isEditable={isEditable}
-            onChange={setSliderValues}
           />
-        </Flex>
+        ) : (
+          <Flex direction="column" alignItems="stretch">
+            <Text>The highlighted message:</Text>
+            <LabelInputGroup labelIDs={task.valid_labels} isEditable={isEditable} onChange={setSliderValues} />
+          </Flex>
+        )}
       </TwoColumnsWithCards>
     </div>
   );
 };
+
+const SpamTaskInput = ({
+  isEditable,
+  value,
+  onChange,
+}: {
+  isEditable: boolean;
+  value: number;
+  onChange: (number) => void;
+}) => {
+  return (
+    <HStack>
+      <Text>Is the highlighted message spam?</Text>
+      <Button
+        data-cy="spam-button"
+        isDisabled={!isEditable}
+        colorScheme={value === 1 ? "blue" : undefined}
+        onClick={() => onChange(1)}
+      >
+        Yes
+      </Button>
+      <Button
+        data-cy="not-spam-button"
+        isDisabled={!isEditable}
+        colorScheme={value === 0 ? "blue" : undefined}
+        onClick={() => onChange(0)}
+      >
+        No
+      </Button>
+    </HStack>
+  );
+};