diff --git a/website/cypress/e2e/tasks/random.cy.ts b/website/cypress/e2e/tasks/random.cy.ts index 337ed331..2ab3bf40 100644 --- a/website/cypress/e2e/tasks/random.cy.ts +++ b/website/cypress/e2e/tasks/random.cy.ts @@ -15,6 +15,8 @@ describe("handles random tasks", () => { cy.log("reply", reply); cy.get('[data-cy="reply"]').type(reply); + cy.get('[data-cy="review"]').click(); + cy.get('[data-cy="submit"]').click(); cy.get('[data-cy="task-id]"').should((taskIdElement) => { @@ -38,6 +40,8 @@ describe("handles random tasks", () => { .wait(100) .type("{enter}"); + cy.get('[data-cy="review"]').click(); + cy.get('[data-cy="submit"]').click(); cy.get('[data-cy="task-id"]').should((taskIdElement) => { diff --git a/website/src/components/Sortable/Sortable.stories.tsx b/website/src/components/Sortable/Sortable.stories.tsx index 93c6510b..db588cb4 100644 --- a/website/src/components/Sortable/Sortable.stories.tsx +++ b/website/src/components/Sortable/Sortable.stories.tsx @@ -8,8 +8,8 @@ export default { component: Sortable, }; -const Template = ({ items, isDisabled }) => { - return ; +const Template = ({ items, isEditable, isDisabled }) => { + return ; }; export const Default = Template.bind({}); @@ -19,6 +19,7 @@ Default.args = { "euirdteunvglfe23908230892309832098 AAAAAAAA", "Sorry, my cat sat on my keyboard. Can you print a cat in ASCII art?", ], + isEditable: true, isDisabled: false, }; @@ -29,5 +30,6 @@ LongText.args = { "Assistant: Yes, I think they can be helpful when the child misbehaves, but they should be used with a little bit of compassion and understanding that it\u2019s not the natural state of things to have an adult yelling at them. Time outs are also often used without letting the child know how they\u2019re getting out of the time out, which can make it feel arbitrary or like a punishment, rather than a consequence for something they did. It\u2019s really easy for adults to do this kind of thing unconsciously. It\u2019s easy to get caught up in the notion that \u201cThey\u2019re in time out, and that\u2019s the end of it!\u201d but kids can be pretty imaginative, and they can use their own creativity to make their way out of time outs. A compassionate time out ends when the child shows a sign of understanding what they\u2019ve done wrong, and are ready to begin again. That way the child knows they\u2019re learning, and that the parent is seeing them as an intelligent person, even if they sometimes mess up. You can still use the other techniques you were using to be tough when necessary, but using a compassionate approach will let you use them without actually using them!", "Assistant: No. The USA was founded by a Puritan group of Protestants, but it didn\u2019t adopt the religion of the Puritans until much later, and it was always a secular state. The Puritans observed the Sabbath on Sunday, and the Puritans only had a small influence in the early history of the USA. It\u2019s difficult to trace the origins of closing stores on Sunday, but one early and short-lived attempt at forcing the Sabbath on people in the 1800s was motivated by the Protestant ideal that people should spend Sunday focusing on spiritual activities. By the mid-1800s, when the Sunday closing law was made, there was not a lot of pressure from that standpoint, but the church had begun to advocate for Sunday closing laws as a way of counteracting the negative effects of industrialization on the day of rest. Even after that shift, closing stores on Sunday was not always possible, since the religious Sunday was not always chosen for observance. And as industrialization accelerated and mechanization made it possible to operate stores on Sunday, the law was not enforced as much as people liked. The day of rest was also being violated by stores that stayed open all day on Sunday, so closing stores on Sundays became an effort to protect the Sabbath for all citizens.", ], + isEditable: true, isDisabled: false, }; diff --git a/website/src/components/Sortable/Sortable.tsx b/website/src/components/Sortable/Sortable.tsx index 48c2916b..596b341d 100644 --- a/website/src/components/Sortable/Sortable.tsx +++ b/website/src/components/Sortable/Sortable.tsx @@ -24,6 +24,7 @@ import { SortableItem } from "./SortableItem"; export interface SortableProps { items: ReactNode[]; onChange?: (newSortedIndices: number[]) => void; + isEditable: boolean; isDisabled?: boolean; className?: string; } @@ -64,8 +65,8 @@ export const Sortable = (props: SortableProps) => { > - {itemsWithIds.map(({ id, item }) => ( - + {itemsWithIds.map(({ id, item }, index) => ( + ))} diff --git a/website/src/components/Sortable/SortableItem.tsx b/website/src/components/Sortable/SortableItem.tsx index 811cef02..56722694 100644 --- a/website/src/components/Sortable/SortableItem.tsx +++ b/website/src/components/Sortable/SortableItem.tsx @@ -4,12 +4,18 @@ import { CSS } from "@dnd-kit/utilities"; import { PropsWithChildren, useState } from "react"; import { RxDragHandleDots2 } from "react-icons/rx"; -export const SortableItem = ({ children, id, isDisabled }: PropsWithChildren<{ id: number; isDisabled: boolean }>) => { +export const SortableItem = ({ + children, + id, + index, + isEditable, + isDisabled, +}: PropsWithChildren<{ id: number; index: number; isEditable: boolean; isDisabled: boolean }>) => { const backgroundColor = useColorModeValue("gray.700", "gray.500"); const disabledBackgroundColor = useColorModeValue("gray.400", "gray.700"); const textColor = useColorModeValue("white", "white"); - const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id, disabled: isDisabled }); + const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id, disabled: !isEditable }); const style = { transform: CSS.Translate.toString(transform), @@ -27,7 +33,7 @@ export const SortableItem = ({ children, id, isDisabled }: PropsWithChildren<{ i borderRadius="lg" p="4" color={textColor} - cursor={isDisabled ? "auto" : grabbing ? "grabbing" : "grab"} + cursor={isEditable ? (grabbing ? "grabbing" : "grab") : "auto"} onMouseDown={() => { setGrabbing(true); }} @@ -38,9 +44,7 @@ export const SortableItem = ({ children, id, isDisabled }: PropsWithChildren<{ i style={style} shadow="base" > - - - + {isEditable ? : `${index + 1}.`} {children} ); diff --git a/website/src/components/Survey/TaskControls.tsx b/website/src/components/Survey/TaskControls.tsx index 81b2c775..c45b5ce0 100644 --- a/website/src/components/Survey/TaskControls.tsx +++ b/website/src/components/Survey/TaskControls.tsx @@ -1,4 +1,5 @@ -import { Box, Flex, useColorModeValue } from "@chakra-ui/react"; +import { Box, Flex, IconButton, Tooltip, useColorModeValue } from "@chakra-ui/react"; +import { FiEdit2 } from "react-icons/fi"; import { SkipButton } from "src/components/Buttons/Skip"; import { SubmitButton } from "src/components/Buttons/Submit"; import { TaskInfo } from "src/components/TaskInfo/TaskInfo"; @@ -10,6 +11,8 @@ export interface TaskControlsProps { task: any; className?: string; taskStatus: TaskStatus; + onEdit: () => void; + onReview: () => void; onSubmit: () => void; onSkip: (reason: string) => void; } @@ -30,15 +33,33 @@ export const TaskControls = (props: TaskControlsProps) => { > - - - Submit - + {props.taskStatus === "REVIEW" || props.taskStatus === "SUBMITTED" ? ( + <> + + } /> + + + Submit + + + ) : ( + <> + + + Review + + + )} ); diff --git a/website/src/components/Tasks/CreateTask.tsx b/website/src/components/Tasks/CreateTask.tsx index 652a867c..27273acf 100644 --- a/website/src/components/Tasks/CreateTask.tsx +++ b/website/src/components/Tasks/CreateTask.tsx @@ -5,7 +5,13 @@ import { TrackedTextarea } from "src/components/Survey/TrackedTextarea"; import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards"; import { TaskSurveyProps } from "src/components/Tasks/Task"; -export const CreateTask = ({ task, taskType, isDisabled, onReplyChanged }: TaskSurveyProps<{ text: string }>) => { +export const CreateTask = ({ + task, + taskType, + isEditable, + isDisabled, + onReplyChanged, +}: TaskSurveyProps<{ text: string }>) => { const cardColor = useColorModeValue("gray.100", "gray.700"); const titleColor = useColorModeValue("gray.800", "gray.300"); const labelColor = useColorModeValue("gray.600", "gray.400"); @@ -50,7 +56,7 @@ export const CreateTask = ({ task, taskType, isDisabled, onReplyChanged }: TaskS text={inputText} onTextChange={textChangeHandler} thresholds={{ low: 20, medium: 40, goal: 50 }} - textareaProps={{ placeholder: "Write your prompt here...", isDisabled }} + textareaProps={{ placeholder: "Write your prompt here...", isDisabled, isReadOnly: !isEditable }} /> diff --git a/website/src/components/Tasks/EvaluateTask.tsx b/website/src/components/Tasks/EvaluateTask.tsx index 87ee86ea..7e99f490 100644 --- a/website/src/components/Tasks/EvaluateTask.tsx +++ b/website/src/components/Tasks/EvaluateTask.tsx @@ -5,7 +5,12 @@ import { Sortable } from "src/components/Sortable/Sortable"; import { SurveyCard } from "src/components/Survey/SurveyCard"; import { TaskSurveyProps } from "src/components/Tasks/Task"; -export const EvaluateTask = ({ task, isDisabled, onReplyChanged }: TaskSurveyProps<{ ranking: number[] }>) => { +export const EvaluateTask = ({ + task, + isEditable, + isDisabled, + onReplyChanged, +}: TaskSurveyProps<{ ranking: number[] }>) => { const cardColor = useColorModeValue("gray.100", "gray.700"); const titleColor = useColorModeValue("gray.800", "gray.300"); const labelColor = useColorModeValue("gray.600", "gray.400"); @@ -46,7 +51,13 @@ export const EvaluateTask = ({ task, isDisabled, onReplyChanged }: TaskSurveyPro - + diff --git a/website/src/components/Tasks/LabelTask.tsx b/website/src/components/Tasks/LabelTask.tsx index ea56ab34..fe508600 100644 --- a/website/src/components/Tasks/LabelTask.tsx +++ b/website/src/components/Tasks/LabelTask.tsx @@ -12,7 +12,7 @@ export const LabelTask = ({ task, taskType, onReplyChanged, - isDisabled, + isEditable, }: TaskSurveyProps<{ text: string; labels: { [k: string]: number }; message_id: string }>) => { const valid_labels = task.valid_labels; const [sliderValues, setSliderValues] = useState(new Array(valid_labels.length).fill(0)); @@ -65,7 +65,7 @@ export const LabelTask = ({ )} - + ); @@ -75,10 +75,10 @@ export const LabelTask = ({ interface LabelSliderGroupProps { labelIDs: Array; onChange: (sliderValues: number[]) => unknown; - isDisabled?: boolean; + isEditable: boolean; } -export const LabelSliderGroup = ({ labelIDs, onChange, isDisabled }: LabelSliderGroupProps) => { +export const LabelSliderGroup = ({ labelIDs, onChange, isEditable }: LabelSliderGroupProps) => { const [sliderValues, setSliderValues] = useState(Array.from({ length: labelIDs.length }).map(() => 0)); return ( @@ -94,7 +94,7 @@ export const LabelSliderGroup = ({ labelIDs, onChange, isDisabled }: LabelSlider onChange(sliderValues); setSliderValues(newState); }} - isDisabled={isDisabled} + isEditable={isEditable} /> ))} @@ -105,7 +105,7 @@ function CheckboxSliderItem(props: { labelId: string; sliderValue: number; sliderHandler: (newVal: number) => unknown; - isDisabled: boolean; + isEditable: boolean; }) { const id = useId(); const { colorMode } = useColorMode(); @@ -118,7 +118,7 @@ function CheckboxSliderItem(props: { {/* TODO: display real text instead of just the id */} {props.labelId} - props.sliderHandler(val / 100)}> + props.sliderHandler(val / 100)}> diff --git a/website/src/components/Tasks/Task.tsx b/website/src/components/Tasks/Task.tsx index e02f5922..f9b5e50d 100644 --- a/website/src/components/Tasks/Task.tsx +++ b/website/src/components/Tasks/Task.tsx @@ -10,13 +10,14 @@ import { TaskContent } from "src/types/Task"; import { TaskReplyState } from "src/types/TaskReplyState"; import useSWRMutation from "swr/mutation"; -export type TaskStatus = "NOT_SUBMITTABLE" | "DEFAULT" | "SUBMITABLE" | "SUBMITTED"; +export type TaskStatus = "NOT_SUBMITTABLE" | "DEFAULT" | "VALID" | "REVIEW" | "SUBMITTED"; export interface TaskSurveyProps { // we need a task type // eslint-disable-next-line @typescript-eslint/no-explicit-any task: any; taskType: TaskInfo; + isEditable: boolean; isDisabled?: boolean; onReplyChanged: (state: TaskReplyState) => void; } @@ -50,20 +51,38 @@ export const Task = ({ frontendId, task, trigger, mutate }) => { } else if (state.state === "DEFAULT") { if (taskStatus !== "DEFAULT") setTaskStatus("DEFAULT"); } else if (state.state === "VALID") { - if (taskStatus !== "SUBMITABLE") setTaskStatus("SUBMITABLE"); - } else if (state.state == "INVALID") { + if (taskStatus !== "VALID") setTaskStatus("VALID"); + } else if (state.state === "INVALID") { setTaskStatus("NOT_SUBMITTABLE"); } }).current; - const submitResponse = () => { + const reviewResponse = () => { switch (taskStatus) { - case "NOT_SUBMITTABLE": - return; case "DEFAULT": setShowUnchangedWarning(true); break; - case "SUBMITABLE": { + case "VALID": + setTaskStatus("REVIEW"); + break; + default: + return; + } + }; + + const editResponse = () => { + switch (taskStatus) { + case "REVIEW": + setTaskStatus("VALID"); + break; + default: + return; + } + }; + + const submitResponse = () => { + switch (taskStatus) { + case "REVIEW": { trigger({ id: frontendId, update_type: taskType.update_type, @@ -72,11 +91,14 @@ export const Task = ({ frontendId, task, trigger, mutate }) => { setTaskStatus("SUBMITTED"); break; } - case "SUBMITTED": + default: return; } }; + const edit_mode = taskStatus === "NOT_SUBMITTABLE" || taskStatus === "DEFAULT" || taskStatus === "VALID"; + const submitted = taskStatus === "SUBMITTED"; + function taskTypeComponent() { switch (taskType.category) { case TaskCategory.Create: @@ -85,7 +107,8 @@ export const Task = ({ frontendId, task, trigger, mutate }) => { key={task.id} task={task} taskType={taskType} - isDisabled={taskStatus === "SUBMITTED"} + isEditable={edit_mode} + isDisabled={submitted} onReplyChanged={onReplyChanged} /> ); @@ -95,7 +118,8 @@ export const Task = ({ frontendId, task, trigger, mutate }) => { key={task.id} task={task} taskType={taskType} - isDisabled={taskStatus === "SUBMITTED"} + isEditable={edit_mode} + isDisabled={submitted} onReplyChanged={onReplyChanged} /> ); @@ -105,7 +129,8 @@ export const Task = ({ frontendId, task, trigger, mutate }) => { key={task.id} task={task} taskType={taskType} - isDisabled={taskStatus === "SUBMITTED"} + isEditable={edit_mode} + isDisabled={submitted} onReplyChanged={onReplyChanged} /> ); @@ -115,20 +140,23 @@ export const Task = ({ frontendId, task, trigger, mutate }) => { return (
{taskTypeComponent()} - + setShowUnchangedWarning(false)} - onSubmitAnyway={() => { + onContinueAnyway={() => { if (taskStatus === "DEFAULT") { - trigger({ - id: frontendId, - update_type: taskType.update_type, - content: replyContent.current, - }); - setTaskStatus("SUBMITTED"); + setTaskStatus("REVIEW"); setShowUnchangedWarning(false); } }} diff --git a/website/src/components/Tasks/TaskTypes.tsx b/website/src/components/Tasks/TaskTypes.tsx index d6f40d0c..6f0bd2e1 100644 --- a/website/src/components/Tasks/TaskTypes.tsx +++ b/website/src/components/Tasks/TaskTypes.tsx @@ -68,7 +68,7 @@ export const TaskTypes: TaskInfo[] = [ type: "rank_prompter_replies", update_type: "message_ranking", unchanged_title: "Order Unchanged", - unchanged_message: "You have not changed the order of the prompts. Are you sure you would like to submit?", + unchanged_message: "You have not changed the order of the prompts. Are you sure you would like to continue?", }, { label: "Rank Assistant Replies", @@ -78,7 +78,7 @@ export const TaskTypes: TaskInfo[] = [ type: "rank_assistant_replies", update_type: "message_ranking", unchanged_title: "Order Unchanged", - unchanged_message: "You have not changed the order of the prompts. Are you sure you would like to submit?", + unchanged_message: "You have not changed the order of the prompts. Are you sure you would like to continue?", }, { label: "Rank Initial Prompts", @@ -88,7 +88,7 @@ export const TaskTypes: TaskInfo[] = [ type: "rank_initial_prompts", update_type: "message_ranking", unchanged_title: "Order Unchanged", - unchanged_message: "You have not changed the order of the prompts. Are you sure you would like to submit?", + unchanged_message: "You have not changed the order of the prompts. Are you sure you would like to continue?", }, // label { diff --git a/website/src/components/Tasks/UnchangedWarning.tsx b/website/src/components/Tasks/UnchangedWarning.tsx index 65d7b50d..8a4039d1 100644 --- a/website/src/components/Tasks/UnchangedWarning.tsx +++ b/website/src/components/Tasks/UnchangedWarning.tsx @@ -14,8 +14,9 @@ interface UnchangedWarningProps { show: boolean; title: string; message: string; + continueButtonText: string; onClose: () => void; - onSubmitAnyway: () => void; + onContinueAnyway: () => void; } export const UnchangedWarning = (props: UnchangedWarningProps) => { @@ -32,7 +33,7 @@ export const UnchangedWarning = (props: UnchangedWarningProps) => { - +