Merge pull request #872 from othrayte/likert-like-labelling

website: Switch to likert style labeling

website/cypress/e2e/tasks/label_assistant_reply.cy.ts

@@ -0,0 +1,26 @@
+describe("labeling assistant replies", () => {
+  it("completes the current task on submit and on request shows a new task", () => {
+    cy.signInWithEmail("cypress@example.com");
+    cy.visit("/label/label_assistant_reply");
+
+    cy.get('[data-cy="task"]')
+      .invoke("attr", "data-task-type")
+      .then((type) => {
+        cy.log("Task type", type);
+
+        // For specific task pages the no task available result is normal.
+        if (type === undefined) return;
+
+        cy.get('[data-cy="label-options"]').each((label) => {
+          // Click the 4th option
+          cy.wrap(label).find('[data-cy="radio-option"]').eq(3).click();
+        });
+
+        cy.get('[data-cy="review"]').click();
+
+        cy.get('[data-cy="submit"]').click();
+      });
+  });
+});
+
+export {};

website/cypress/e2e/tasks/label_initial_prompt.cy.ts

@@ -0,0 +1,26 @@
+describe("labeling initial prompts", () => {
+  it("completes the current task on submit and on request shows a new task", () => {
+    cy.signInWithEmail("cypress@example.com");
+    cy.visit("/label/label_initial_prompt");
+
+    cy.get('[data-cy="task"]')
+      .invoke("attr", "data-task-type")
+      .then((type) => {
+        cy.log("Task type", type);
+
+        // For specific task pages the no task available result is normal.
+        if (type === undefined) return;
+
+        cy.get('[data-cy="label-options"]').each((label) => {
+          // Click the 4th option
+          cy.wrap(label).find('[data-cy="radio-option"]').eq(3).click();
+        });
+
+        cy.get('[data-cy="review"]').click();
+
+        cy.get('[data-cy="submit"]').click();
+      });
+  });
+});
+
+export {};

website/cypress/e2e/tasks/label_prompter_reply.cy.ts

@@ -0,0 +1,26 @@
+describe("labeling prompter replies", () => {
+  it("completes the current task on submit and on request shows a new task", () => {
+    cy.signInWithEmail("cypress@example.com");
+    cy.visit("/label/label_prompter_reply");
+
+    cy.get('[data-cy="task"]')
+      .invoke("attr", "data-task-type")
+      .then((type) => {
+        cy.log("Task type", type);
+
+        // For specific task pages the no task available result is normal.
+        if (type === undefined) return;
+
+        cy.get('[data-cy="label-options"]').each((label) => {
+          // Click the 4th option
+          cy.wrap(label).find('[data-cy="radio-option"]').eq(3).click();
+        });
+
+        cy.get('[data-cy="review"]').click();
+
+        cy.get('[data-cy="submit"]').click();
+      });
+  });
+});
+
+export {};

website/cypress/e2e/tasks/random.cy.ts

@@ -44,47 +44,22 @@ describe("handles random tasks", () => {
                 break;
               }
               case "label-task": {
-                cy.get('[data-cy="label-group-item"]')
-                  .first()
-                  .invoke("attr", "data-label-type")
-                  .then((label_type) => {
-                    const parent = cy
-                      .get('[data-cy="label-group-item"]')
-                      .first();
-                    cy.log("Label type", label_type);
-
-                    switch (label_type) {
-                      case "slider": {
-                        // Clicking on the slider will set the value to about the middle where it clicks
-                        parent
-                          .get('[aria-roledescription="slider"]')
-                          .first()
-                          .click();
-
-                        cy.get('[data-cy="review"]').click();
-
-                        cy.get('[data-cy="submit"]').click();
-
-                        break;
-                      }
-                      case "radio": {
-                        // Clicking on the slider will set the value to about the middle where it clicks
-                        parent
-                          .get('[aria-roledescription="radio-button"]')
-                          .last()
-                          .click();
+                cy.get('[data-cy="label-options"]').each((label) => {
+                  // Click the 4th option
+                  cy.wrap(label).find('[data-cy="radio-option"]').eq(3).click();
+                });
 
-                        cy.get('[data-cy="review"]').click();
-
-                        cy.get('[data-cy="submit"]').click();
+                cy.get('[data-cy="review"]').click();
 
-                        break;
-                      }
-                    }
-                  });
+                cy.get('[data-cy="submit"]').click();
 
                 break;
               }
+              case undefined: {
+                throw new Error(
+                  "No tasks available, but at least create initial prompt expected"
+                );
+              }
               default:
                 throw new Error(`Unexpected task type: ${type}`);
             }

website/src/components/Buttons/LikertButtons.tsx

@@ -0,0 +1,31 @@
+import { Radio, RadioGroup } from "@chakra-ui/react";
+import { PropsWithChildren } from "react";
+
+export const LikertButtons = ({
+  isDisabled,
+  count,
+  onChange,
+  "data-cy": dataCy,
+}: PropsWithChildren<{
+  isDisabled: boolean;
+  count: number;
+  onChange: (value: number) => void;
+  "data-cy"?: string;
+}>) => {
+  const valueMap = Object.fromEntries(Array.from({ length: count }, (_, idx) => [`${idx}`, idx / (count - 1)]));
+
+  return (
+    <RadioGroup
+      data-cy={dataCy}
+      isDisabled={isDisabled}
+      onChange={(value) => {
+        onChange(valueMap[value]);
+      }}
+      style={{ display: "flex", justifyContent: "space-between" }}
+    >
+      {Object.keys(valueMap).map((value) => {
+        return <Radio key={value} value={value} data-cy="radio-option" size="md" padding="0.6em" />;
+      })}
+    </RadioGroup>
+  );
+};

website/src/components/EmptyState.tsx

@@ -5,13 +5,14 @@ import NextLink from "next/link";
 type EmptyStateProps = {
   text: string;
   icon: LucideIcon;
+  "data-cy"?: string;
 };
 
 export const EmptyState = (props: EmptyStateProps) => {
   const backgroundColor = useColorModeValue("white", "gray.800");
 
   return (
-    <Box bg={backgroundColor} p="10" borderRadius="xl" shadow="base">
+    <Box data-cy={props["data-cy"]} bg={backgroundColor} p="10" borderRadius="xl" shadow="base">
       <Box display="flex" flexDirection="column" alignItems="center" gap="8" fontSize="lg">
         <props.icon size="30" color="DarkOrange" />
         <Text>{props.text}</Text>
@@ -24,5 +25,5 @@ export const EmptyState = (props: EmptyStateProps) => {
 };
 
 export const TaskEmptyState = () => {
-  return <EmptyState text="Looks like no tasks were found." icon={AlertTriangle} />;
+  return <EmptyState text="Looks like no tasks were found." icon={AlertTriangle} data-cy="task" />;
 };

website/src/components/Explain.tsx

@@ -0,0 +1,39 @@
+import {
+  IconButton,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverTrigger,
+  Text,
+} from "@chakra-ui/react";
+import { InformationCircleIcon } from "@heroicons/react/20/solid";
+
+interface ExplainProps {
+  explanation: string[];
+}
+
+export const Explain = ({ explanation }: ExplainProps) => {
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <IconButton
+          aria-label="explanation"
+          variant="link"
+          size="xs"
+          icon={<InformationCircleIcon className="h-4 w-4" />}
+        ></IconButton>
+      </PopoverTrigger>
+      <PopoverContent>
+        <PopoverArrow />
+        <PopoverCloseButton />
+        <PopoverBody>
+          {explanation.map((paragraph, idx) => (
+            <Text key={idx}>{paragraph}</Text>
+          ))}
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};