Merge pull request #970 from othrayte/improve-e2e-test-reliability

website: Improve reliability of e2e tests

website/src/components/Tasks/CreateTask.tsx

@@ -8,7 +8,7 @@ import { TaskSurveyProps } from "src/components/Tasks/Task";
 import { TaskHeader } from "src/components/Tasks/TaskHeader";
 import { getTypeSafei18nKey } from "src/lib/i18n";
 import { TaskType } from "src/types/Task";
-import { CreateAssistantReplyTask, CreateInitialPromptTask, CreatePrompterReplyTask } from "src/types/Tasks";
+import { CreateTaskType } from "src/types/Tasks";
 
 export const CreateTask = ({
   task,
@@ -17,7 +17,7 @@ export const CreateTask = ({
   isDisabled,
   onReplyChanged,
   onValidityChanged,
-}: TaskSurveyProps<CreateInitialPromptTask | CreateAssistantReplyTask | CreatePrompterReplyTask, { text: string }>) => {
+}: TaskSurveyProps<CreateTaskType, { text: string }>) => {
   const { t, i18n } = useTranslation(["tasks", "common"]);
   const cardColor = useColorModeValue("gray.50", "gray.800");
   const titleColor = useColorModeValue("gray.800", "gray.300");

website/src/components/Tasks/EvaluateTask.tsx

@@ -6,7 +6,7 @@ import { SurveyCard } from "src/components/Survey/SurveyCard";
 import { TaskSurveyProps } from "src/components/Tasks/Task";
 import { TaskHeader } from "src/components/Tasks/TaskHeader";
 import { TaskType } from "src/types/Task";
-import { RankAssistantRepliesTask, RankInitialPromptsTask, RankPrompterRepliesTask } from "src/types/Tasks";
+import { RankTaskType } from "src/types/Tasks";
 
 export const EvaluateTask = ({
   task,
@@ -15,10 +15,7 @@ export const EvaluateTask = ({
   isDisabled,
   onReplyChanged,
   onValidityChanged,
-}: TaskSurveyProps<
-  RankInitialPromptsTask | RankAssistantRepliesTask | RankPrompterRepliesTask,
-  { ranking: number[] }
->) => {
+}: TaskSurveyProps<RankTaskType, { ranking: number[] }>) => {
   const cardColor = useColorModeValue("gray.50", "gray.800");
   const [ranking, setRanking] = useState<number[]>(null);
 

website/src/components/Tasks/Task/Task.stories.tsx

@@ -7,8 +7,10 @@ export default {
   component: Task,
 };
 
-const Template = ({ frontendId, task, trigger, mutate }) => {
-  return <Task frontendId={frontendId} task={task} trigger={trigger} mutate={mutate} />;
+const Template = ({ frontendId, task, isLoading, completeTask, skipTask }) => {
+  return (
+    <Task frontendId={frontendId} task={task} isLoading={isLoading} completeTask={completeTask} skipTask={skipTask} />
+  );
 };
 
 export const Default = Template.bind({});
@@ -23,10 +25,11 @@ Default.args = {
     type: "label_prompter_reply",
     valid_labels: ["spam", "fails_task"],
   },
-  trigger: (id, update_type, content) => {
+  isLoading: false,
+  completeTask: (id, update_type, content) => {
     console.log(content);
   },
-  mutate: () => {
-    console.log("mutate");
+  skipTask: () => {
+    console.log("skip");
   },
 };

website/src/components/Tasks/Task/Task.tsx

@@ -10,6 +10,7 @@ import { UnchangedWarning } from "src/components/Tasks/UnchangedWarning";
 import { post } from "src/lib/api";
 import { getTypeSafei18nKey } from "src/lib/i18n";
 import { BaseTask, TaskContent, TaskReplyValidity } from "src/types/Task";
+import { CreateTaskType, KnownTaskType, LabelTaskType, RankTaskType } from "src/types/Tasks";
 import useSWRMutation from "swr/mutation";
 
 interface EditMode {
@@ -62,7 +63,15 @@ export interface TaskSurveyProps<TaskType extends BaseTask, T> {
   onValidityChanged: (validity: TaskReplyValidity) => void;
 }
 
-export const Task = ({ frontendId, task, trigger, mutate }) => {
+interface TaskProps {
+  frontendId: string;
+  task: KnownTaskType;
+  isLoading: boolean;
+  completeTask: (TaskContent) => void;
+  skipTask: () => void;
+}
+
+export const Task = ({ frontendId, task, isLoading, completeTask, skipTask }: TaskProps) => {
   const { t } = useTranslation("tasks");
   const [taskStatus, taskEvent] = useReducer(
     (
@@ -117,14 +126,13 @@ export const Task = ({ frontendId, task, trigger, mutate }) => {
 
   const rootEl = useRef<HTMLDivElement>(null);
 
-  const taskType = useMemo(
-    () => TaskInfos.find((taskType) => taskType.type === task.type && taskType.mode === task.mode),
-    [task.type, task.mode]
-  );
+  const taskType = useMemo(() => {
+    return TaskInfos.find((taskType) => taskType.type === task.type);
+  }, [task.type]);
 
   const { trigger: sendRejection } = useSWRMutation("/api/reject_task", post, {
     onSuccess: async () => {
-      mutate();
+      skipTask();
     },
   });
 
@@ -144,7 +152,7 @@ export const Task = ({ frontendId, task, trigger, mutate }) => {
 
   const submitResponse = () => {
     if (taskStatus.mode === "REVIEW") {
-      trigger({
+      completeTask({
         id: frontendId,
         update_type: taskType.update_type,
         content: replyContent.current,
@@ -159,7 +167,7 @@ export const Task = ({ frontendId, task, trigger, mutate }) => {
       case TaskCategory.Create:
         return (
           <CreateTask
-            task={task}
+            task={task as CreateTaskType}
             taskType={taskType}
             isEditable={taskStatus.mode === "EDIT"}
             isDisabled={taskStatus.mode === "SUBMITTED"}
@@ -170,7 +178,7 @@ export const Task = ({ frontendId, task, trigger, mutate }) => {
       case TaskCategory.Evaluate:
         return (
           <EvaluateTask
-            task={task}
+            task={task as RankTaskType}
             taskType={taskType}
             isEditable={taskStatus.mode === "EDIT"}
             isDisabled={taskStatus.mode === "SUBMITTED"}
@@ -181,7 +189,7 @@ export const Task = ({ frontendId, task, trigger, mutate }) => {
       case TaskCategory.Label:
         return (
           <LabelTask
-            task={task}
+            task={task as LabelTaskType}
             taskType={taskType}
             isEditable={taskStatus.mode === "EDIT"}
             isDisabled={taskStatus.mode === "SUBMITTED"}
@@ -198,6 +206,7 @@ export const Task = ({ frontendId, task, trigger, mutate }) => {
       <TaskControls
         task={task}
         taskStatus={taskStatus}
+        isLoading={isLoading}
         onEdit={() => taskEvent({ action: "RETURN_EDIT" })}
         onReview={() => taskEvent({ action: "REVIEW" })}
         onSubmit={submitResponse}