website: "Wrong Language" -> "Not {lang}" (#1300)

Change the "Wrong Language" labelling flag to instead say "Not English", "Not French" etc depending on the messages tagged language

website/public/locales/en/labelling.json

@@ -10,6 +10,8 @@
   "label_message_yes_no_instruction": "Answer the following question(s) about the message:",
   "lang_mismatch": "Wrong Language",
   "lang_mismatch.explanation": "Not written in the currently selected language.",
+  "lang_mismatch_lang": "Not {{language}}",
+  "lang_mismatch_lang.explanation": "Not written in {{language}}.",
   "moral_judgement": "Judges Morality",
   "moral_judgement.explanation": "Expresses moral judgement.",
   "not_appropriate": "Not Appropriate",

website/src/components/Messages/LabelFlagGroup.tsx

@@ -5,16 +5,29 @@ import { getTypeSafei18nKey } from "src/lib/i18n";
 interface LabelFlagGroupProps {
   values: number[];
   labelNames: string[];
+  expectedLanguage: string;
   isEditable?: boolean;
   onChange: (values: number[]) => void;
 }
 
-export const LabelFlagGroup = ({ values, labelNames, isEditable = true, onChange }: LabelFlagGroupProps) => {
-  const { t } = useTranslation("labelling");
+export const LabelFlagGroup = ({
+  values,
+  labelNames,
+  expectedLanguage,
+  isEditable = true,
+  onChange,
+}: LabelFlagGroupProps) => {
+  const { t } = useTranslation(["labelling", "language"]);
+  const expectedLanguageName = t(getTypeSafei18nKey(`language:lang_${expectedLanguage}`));
   return (
     <Flex wrap="wrap" gap="4">
       {labelNames.map((name, idx) => (
-        <Tooltip key={name} label={`${t(getTypeSafei18nKey(`${name}.explanation`))}`}>
+        <Tooltip
+          key={name}
+          label={`${t(getTypeSafei18nKey(`${name}_lang.explanation`), t(getTypeSafei18nKey(`${name}.explanation`)), {
+            language: expectedLanguageName,
+          })}`}
+        >
           <Button
             onClick={() => {
               const newValues = values.slice();
@@ -24,7 +37,7 @@ export const LabelFlagGroup = ({ values, labelNames, isEditable = true, onChange
             isDisabled={!isEditable}
             colorScheme={values[idx] === 1 ? "blue" : undefined}
           >
-            {t(getTypeSafei18nKey(name))}
+            {t(getTypeSafei18nKey(`${name}_lang`), t(getTypeSafei18nKey(name)), { language: expectedLanguageName })}
           </Button>
         </Tooltip>
       ))}

website/src/components/Messages/LabelInputGroup.tsx

@@ -19,6 +19,7 @@ interface LabelInputGroupProps {
   requiredLabels?: string[];
   isEditable?: boolean;
   instructions: LabelInputInstructions;
+  expectedLanguage: string;
   onChange: (values: number[]) => void;
 }
 
@@ -28,6 +29,7 @@ export const LabelInputGroup = ({
   requiredLabels,
   isEditable,
   instructions,
+  expectedLanguage,
   onChange,
 }: LabelInputGroupProps) => {
   const { t } = useTranslation("labelling");
@@ -71,6 +73,7 @@ export const LabelInputGroup = ({
           <LabelFlagGroup
             values={flagIndexes.map((idx) => values[idx])}
             labelNames={flagIndexes.map((idx) => labels[idx].name)}
+            expectedLanguage={expectedLanguage}
             isEditable={isEditable}
             onChange={(flagValues) => {
               const newValues = values.slice();

website/src/components/Messages/LabelPopup.tsx

@@ -12,12 +12,13 @@ import { useTranslation } from "next-i18next";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { LabelInputGroup } from "src/components/Messages/LabelInputGroup";
 import { get, post } from "src/lib/api";
+import { Message } from "src/types/Conversation";
 import { Label } from "src/types/Tasks";
 import useSWRImmutable from "swr/immutable";
 import useSWRMutation from "swr/mutation";
 
 interface LabelMessagePopupProps {
-  messageId: string;
+  message: Message;
   show: boolean;
   onClose: () => void;
 }
@@ -26,15 +27,15 @@ interface ValidLabelsResponse {
   valid_labels: Label[];
 }
 
-export const LabelMessagePopup = ({ messageId, show, onClose }: LabelMessagePopupProps) => {
+export const LabelMessagePopup = ({ message, show, onClose }: LabelMessagePopupProps) => {
   const { t } = useTranslation();
-  const { data: response } = useSWRImmutable<ValidLabelsResponse>(`/api/valid_labels?message_id=${messageId}`, get);
+  const { data: response } = useSWRImmutable<ValidLabelsResponse>(`/api/valid_labels?message_id=${message.id}`, get);
   const valid_labels = useMemo(() => response?.valid_labels ?? [], [response]);
   const [values, setValues] = useState<number[]>(new Array(valid_labels.length).fill(null));
 
   useEffect(() => {
     setValues(new Array(valid_labels.length).fill(null));
-  }, [messageId, valid_labels.length]);
+  }, [message.id, valid_labels.length]);
 
   const { trigger: setLabels } = useSWRMutation("/api/set_label", post);
 
@@ -47,13 +48,13 @@ export const LabelMessagePopup = ({ messageId, show, onClose }: LabelMessagePopu
       }
     });
     setLabels({
-      message_id: messageId,
+      message_id: message.id,
       label_map: Object.fromEntries(label_map),
     });
 
     setValues(new Array(values.length).fill(null));
     onClose();
-  }, [messageId, onClose, setLabels, valid_labels, values]);
+  }, [message.id, onClose, setLabels, valid_labels, values]);
 
   return (
     <Modal isOpen={show} onClose={onClose}>
@@ -70,6 +71,7 @@ export const LabelMessagePopup = ({ messageId, show, onClose }: LabelMessagePopu
               flagInstruction: t("labelling:label_message_flag_instruction"),
               likertInstruction: t("labelling:label_message_likert_instruction"),
             }}
+            expectedLanguage={message.lang}
             onChange={setValues}
           />
         </ModalBody>

website/src/components/Messages/MessageTableEntry.tsx

@@ -128,7 +128,7 @@ export function MessageTableEntry({ message, enabled, highlight }: MessageTableE
             onReport={showReportPopup}
             message={message}
           />
-          <LabelMessagePopup messageId={message.id} show={labelPopupOpen} onClose={closeLabelPopup} />
+          <LabelMessagePopup message={message} show={labelPopupOpen} onClose={closeLabelPopup} />
           <ReportPopup messageId={message.id} show={reportPopupOpen} onClose={closeReportPopup} />
         </HStack>
       </Box>

website/src/components/Tasks/LabelTask/LabelTask.tsx

@@ -50,6 +50,7 @@ export const LabelTask = ({
   const cardColor = useColorModeValue("gray.50", "gray.800");
   const isSpamTask = task.mode === "simple" && task.valid_labels.length === 1 && task.valid_labels[0] === "spam";
 
+  const lastMessage = task.conversation.messages[task.conversation.messages.length - 1];
   return (
     <div data-cy="task" data-task-type={isSpamTask ? "spam-task" : "label-task"}>
       <TwoColumnsWithCards>
@@ -69,6 +70,7 @@ export const LabelTask = ({
             flagInstruction: t("label_highlighted_flag_instruction"),
             likertInstruction: t("label_highlighted_likert_instruction"),
           }}
+          expectedLanguage={lastMessage.lang}
           onChange={(values) => {
             setValues(values);
             setUserInputMade.on();