website: Add a review step before submitting

to hint to the user that they should reread and check what they have written.

Also show numbers for ranked items rather than drag handles in the review step as the items can't be moved in that step.

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<number[]>(new Array(valid_labels.length).fill(0));
@@ -65,7 +65,7 @@ export const LabelTask = ({
             </Box>
           )}
         </>
-        <LabelSliderGroup labelIDs={task.valid_labels} isDisabled={isDisabled} onChange={onSliderChange} />
+        <LabelSliderGroup labelIDs={task.valid_labels} isEditable={isEditable} onChange={onSliderChange} />
       </TwoColumnsWithCards>
     </div>
   );
@@ -75,10 +75,10 @@ export const LabelTask = ({
 interface LabelSliderGroupProps {
   labelIDs: Array<string>;
   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<number[]>(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}
         />
       ))}
     </Grid>
@@ -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 */}
         <span className={labelTextClass}>{props.labelId}</span>
       </label>
-      <Slider defaultValue={0} isDisabled={props.isDisabled} onChangeEnd={(val) => props.sliderHandler(val / 100)}>
+      <Slider defaultValue={0} isDisabled={!props.isEditable} onChangeEnd={(val) => props.sliderHandler(val / 100)}>
         <SliderTrack>
           <SliderFilledTrack />
           <SliderThumb />