From 1d0fbd2733a9c8d1a1c131ebcadc3b498de3315e Mon Sep 17 00:00:00 2001
From: MehrJonas <jonasmehr97@gmail.com>
Date: Thu, 15 Jun 2023 22:16:17 +0200
Subject: [PATCH 1/2] added confirmation dialog when skipping after entering
 text

---
 website/public/locales/de/common.json         |  1 +
 website/public/locales/en/common.json         |  1 +
 website/src/components/Buttons/Skip.tsx       | 64 +++++++++++++++++++
 .../src/components/Survey/TaskControls.tsx    | 53 ++++++++-------
 4 files changed, 95 insertions(+), 24 deletions(-)
 create mode 100644 website/src/components/Buttons/Skip.tsx

diff --git a/website/public/locales/de/common.json b/website/public/locales/de/common.json
index a9ccb9b3ae..97e4733ae9 100644
--- a/website/public/locales/de/common.json
+++ b/website/public/locales/de/common.json
@@ -45,6 +45,7 @@
   "sign_in": "Anmelden",
   "sign_out": "Abmelden",
   "skip": "Überspringen",
+  "skip_confirmation": "Sind Sie sicher das sie überspringen wollen?",
   "stats": "Statistiken",
   "status": "Status",
   "status_dashboard": "Status-Dashboard",
diff --git a/website/public/locales/en/common.json b/website/public/locales/en/common.json
index 145cdf5e0e..3f60c20318 100644
--- a/website/public/locales/en/common.json
+++ b/website/public/locales/en/common.json
@@ -48,6 +48,7 @@
   "sign_in": "Sign In",
   "sign_out": "Sign Out",
   "skip": "Skip",
+  "skip_confirmation": "Are you sure you want to skip?",
   "sorry_404": "Sorry, the page you are looking for does not exist.",
   "stats": "Stats",
   "status_dashboard": "Status Dashboard",
diff --git a/website/src/components/Buttons/Skip.tsx b/website/src/components/Buttons/Skip.tsx
new file mode 100644
index 0000000000..0d69411bc6
--- /dev/null
+++ b/website/src/components/Buttons/Skip.tsx
@@ -0,0 +1,64 @@
+import {
+  Button,
+  ButtonProps,
+  Modal,
+  ModalBody, ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  useDisclosure
+} from "@chakra-ui/react";
+import {useTranslation} from "next-i18next";
+
+interface SkipButtonProps extends ButtonProps {
+  onSkip: () => void;
+  confirmSkip: boolean;
+}
+
+export const SkipButton = ({...props}: SkipButtonProps) => {
+
+  const {t} = useTranslation();
+  const {isOpen, onOpen: showModal, onClose: closeModal} = useDisclosure();
+
+  const onClick = () => {
+    if (props.confirmSkip) {
+      showModal();
+    } else {
+      props.onSkip();
+    }
+  };
+
+  const onConfirmedSkip = () => {
+    closeModal();
+    props.onSkip();
+  }
+
+  return (
+    <>
+      <Button size="lg" variant="solid" {...props} onClick={onClick}>
+        {t("skip")}
+      </Button>
+      <Modal isOpen={isOpen} onClose={closeModal}>
+        <ModalOverlay></ModalOverlay>
+        <ModalContent>
+          <ModalCloseButton></ModalCloseButton>
+          <ModalHeader>{t("skip")}</ModalHeader>
+          <ModalBody>
+            <div>
+              {t("skip_confirmation")}
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <Button mr={3} onClick={onConfirmedSkip}>
+              {t("yes")}
+            </Button>
+            <Button colorScheme="blue" onClick={closeModal}>
+              {t("no")}
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
diff --git a/website/src/components/Survey/TaskControls.tsx b/website/src/components/Survey/TaskControls.tsx
index 2d4ee69831..5bd4dca223 100644
--- a/website/src/components/Survey/TaskControls.tsx
+++ b/website/src/components/Survey/TaskControls.tsx
@@ -1,10 +1,12 @@
-import { Button, Card, Flex, IconButton, Progress, Tooltip } from "@chakra-ui/react";
-import { Edit2 } from "lucide-react";
-import { useTranslation } from "next-i18next";
-import { SubmitButton } from "src/components/Buttons/Submit";
-import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
-import { TaskStatus } from "src/components/Tasks/Task";
-import { BaseTask } from "src/types/Task";
+import {Card, Flex, IconButton, Progress, Tooltip} from "@chakra-ui/react";
+import {Edit2} from "lucide-react";
+import {useTranslation} from "next-i18next";
+import {SubmitButton} from "src/components/Buttons/Submit";
+import {TaskInfo} from "src/components/TaskInfo/TaskInfo";
+import {TaskStatus} from "src/components/Tasks/Task";
+import {BaseTask} from "src/types/Task";
+
+import {SkipButton} from "../Buttons/Skip";
 
 export interface TaskControlsProps {
   task: BaseTask;
@@ -19,29 +21,32 @@ export interface TaskControlsProps {
 }
 
 export const TaskControls = ({
-  task,
-  taskStatus,
-  isLoading,
-  isRejecting,
-  isSubmitting,
-  onEdit,
-  onReview,
-  onSubmit,
-  onSkip,
-}: TaskControlsProps) => {
-  const { t } = useTranslation();
+                               task,
+                               taskStatus,
+                               isLoading,
+                               isRejecting,
+                               isSubmitting,
+                               onEdit,
+                               onReview,
+                               onSubmit,
+                               onSkip,
+                             }: TaskControlsProps) => {
+  const {t} = useTranslation();
 
   return (
     <Card>
-      {isLoading && <Progress size="sm" isIndeterminate />}
+      {isLoading && <Progress size="sm" isIndeterminate/>}
       <Flex p="6" gap="4" direction={["column", "row"]}>
-        <TaskInfo id={task.id} output={t("submit_your_answer")} />
+        <TaskInfo id={task.id} output={t("submit_your_answer")}/>
         <Flex width={["full", "fit-content"]} justify="center" ml="auto" gap={2}>
           {taskStatus.mode === "EDIT" ? (
             <>
-              <Button size="lg" variant="outline" onClick={onSkip} isLoading={isRejecting}>
-                {t("skip")}
-              </Button>
+              <SkipButton
+                onSkip={onSkip}
+                confirmSkip={taskStatus.replyValidity === "VALID"}
+                isLoading={isRejecting}
+              >
+              </SkipButton>
               <SubmitButton
                 colorScheme="blue"
                 data-cy="review"
@@ -59,7 +64,7 @@ export const TaskControls = ({
                   data-cy="edit"
                   aria-label={t("edit")}
                   onClick={onEdit}
-                  icon={<Edit2 size="1em" />}
+                  icon={<Edit2 size="1em"/>}
                 />
               </Tooltip>
               <SubmitButton

From 3d83e06a4135aaac22a13d64ec02bb3cfc67f1c9 Mon Sep 17 00:00:00 2001
From: MehrJonas <jonasmehr97@gmail.com>
Date: Sat, 17 Jun 2023 00:52:21 +0200
Subject: [PATCH 2/2] move "skip_confirmation" to tasks.json

---
 website/public/locales/de/common.json   | 1 -
 website/public/locales/de/tasks.json    | 1 +
 website/public/locales/en/common.json   | 1 -
 website/public/locales/en/tasks.json    | 1 +
 website/src/components/Buttons/Skip.tsx | 2 +-
 5 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/website/public/locales/de/common.json b/website/public/locales/de/common.json
index 97e4733ae9..a9ccb9b3ae 100644
--- a/website/public/locales/de/common.json
+++ b/website/public/locales/de/common.json
@@ -45,7 +45,6 @@
   "sign_in": "Anmelden",
   "sign_out": "Abmelden",
   "skip": "Überspringen",
-  "skip_confirmation": "Sind Sie sicher das sie überspringen wollen?",
   "stats": "Statistiken",
   "status": "Status",
   "status_dashboard": "Status-Dashboard",
diff --git a/website/public/locales/de/tasks.json b/website/public/locales/de/tasks.json
index c56466664d..ec4e90bf5c 100644
--- a/website/public/locales/de/tasks.json
+++ b/website/public/locales/de/tasks.json
@@ -1,5 +1,6 @@
 {
   "available_task_count": "{{count}} Aufgaben verfügbar",
+  "skip_confirmation": "Sind Sie sicher das sie überspringen wollen?",
   "classify_assistant_reply": {
     "label": "Antwort des Assistenten klassifizieren",
     "desc": "Labeln Sie die Antwort.",
diff --git a/website/public/locales/en/common.json b/website/public/locales/en/common.json
index 3f60c20318..145cdf5e0e 100644
--- a/website/public/locales/en/common.json
+++ b/website/public/locales/en/common.json
@@ -48,7 +48,6 @@
   "sign_in": "Sign In",
   "sign_out": "Sign Out",
   "skip": "Skip",
-  "skip_confirmation": "Are you sure you want to skip?",
   "sorry_404": "Sorry, the page you are looking for does not exist.",
   "stats": "Stats",
   "status_dashboard": "Status Dashboard",
diff --git a/website/public/locales/en/tasks.json b/website/public/locales/en/tasks.json
index 00ccbb91e7..ea19bc062d 100644
--- a/website/public/locales/en/tasks.json
+++ b/website/public/locales/en/tasks.json
@@ -1,6 +1,7 @@
 {
   "any_feedback_on_this_task": "Any feedback on this task?",
   "available_task_count": "{{count}} tasks available",
+  "skip_confirmation": "Are you sure you want to skip?",
   "default": {
     "unchanged_title": "No changes",
     "unchanged_message": "Are you sure you would like to continue?",
diff --git a/website/src/components/Buttons/Skip.tsx b/website/src/components/Buttons/Skip.tsx
index 840646bde8..cbcc6b0a27 100644
--- a/website/src/components/Buttons/Skip.tsx
+++ b/website/src/components/Buttons/Skip.tsx
@@ -45,7 +45,7 @@ export const SkipButton = ({ ...props }: SkipButtonProps) => {
           <ModalCloseButton></ModalCloseButton>
           <ModalHeader>{t("skip")}</ModalHeader>
           <ModalBody>
-            <div>{t("skip_confirmation")}</div>
+            <div>{t("tasks:skip_confirmation")}</div>
           </ModalBody>
           <ModalFooter>
             <Button mr={3} onClick={onConfirmedSkip}>