feat: override source locale using bulk editor

xillio · Oct 10, 2024 · 20c551e · 20c551e
1 parent 4e656e9
commit 20c551e
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 21 deletions.
diff --git a/apps/xillio-transcreate/src/locations/Dialog/Dialog.tsx b/apps/xillio-transcreate/src/locations/Dialog/Dialog.tsx
@@ -57,7 +57,6 @@ export const Dialog = () => {
 
   if (sdk.parameters.invocation.type === 'translate') {
     const localeOptions: MultiSelectOptions = { ...sdk.locales.names };
-    delete localeOptions[sdk.locales.default];
 
     return (
       <TranslateDialog
@@ -67,6 +66,7 @@ export const Dialog = () => {
           submitter: sdk.user.email,
           translationJobName: defaultTranslationJobName,
           locales: sdk.parameters.invocation.selectedLocales ?? [],
+          sourceLanguage: sdk.locales.default,
         }}
         projectOptions={sdk.parameters.invocation.projectOptions}
         localeOptions={sdk.parameters.invocation.selectedLocales ? undefined : localeOptions}

diff --git a/apps/xillio-transcreate/src/locations/Dialog/TranslateDialog/TranslateDialog.tsx b/apps/xillio-transcreate/src/locations/Dialog/TranslateDialog/TranslateDialog.tsx
@@ -9,41 +9,60 @@ import {
   MultiSelectOptions,
   SelectOption,
 } from '../../../components';
-import { useForm } from 'react-hook-form';
+import { useForm, useWatch } from 'react-hook-form';
 import { appConfig } from '../../../appConfig';
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 
 export type TranslationJobFormData = {
   submitter: string;
   projectName: string;
   translationJobName: string;
+  sourceLanguage: string;
   locales: string[];
   sendRecursively: boolean;
   dueDate: Date;
   description: string;
 };
 
 export type TranslateDialogProps = {
-  defaultValues: Pick<TranslationJobFormData, 'submitter' | 'projectName' | 'translationJobName' | 'sendRecursively' | 'locales'>;
+  defaultValues: Pick<TranslationJobFormData, 'submitter' | 'projectName' | 'translationJobName' | 'sendRecursively' | 'locales' | 'sourceLanguage'>;
   projectOptions: SelectOption[];
   localeOptions?: MultiSelectOptions;
   onClose: (data?: any) => void;
 };
 
 export const TranslateDialog = ({ defaultValues, projectOptions, localeOptions, onClose }: TranslateDialogProps) => {
-  const { control, handleSubmit } = useForm<TranslationJobFormData>({
+  const { control, handleSubmit, setValue, getValues } = useForm<TranslationJobFormData>({
     defaultValues: {
       ...defaultValues,
       description: '',
     },
   });
 
+  const sourceLanguage = useWatch({ control, name: 'sourceLanguage' });
+
+  const sourceLocaleOptions = useMemo(() => Object.entries(localeOptions ?? {}).map(([value, label]) => ({ label, value })), [localeOptions]);
+
+  const targetLocaleOptions = useMemo(() => {
+    const options = { ...localeOptions };
+    delete options[sourceLanguage];
+    return options;
+  }, [localeOptions, sourceLanguage]);
+
+  // On `sourceLanguage` change, remove it from the selected `locales` list
+  useEffect(() => {
+    setValue(
+      'locales',
+      getValues('locales').filter((locale) => locale !== sourceLanguage),
+    );
+  }, [sourceLanguage, setValue, getValues]);
+
   const note = useMemo(() => {
     if (!projectOptions.length) return `No projects found. Please configure at least one project in ${appConfig.name}`;
     if (localeOptions && !Object.keys(localeOptions).length)
       return 'No locales found. Please configure at least one additional locale in your environment settings.';
     if (!localeOptions && !defaultValues.locales.length) return 'No locales selected. Please select at least one locale.';
-  }, [projectOptions, localeOptions]);
+  }, [projectOptions, localeOptions, defaultValues.locales.length]);
 
   const isDisabled = Boolean(note);
 
@@ -79,20 +98,30 @@ export const TranslateDialog = ({ defaultValues, projectOptions, localeOptions,
       <ControlledCheckbox control={control} label="Send all references recursively with entry" name="sendRecursively" disabled={isDisabled} />
 
       {localeOptions && (
-        <ControlledMultiSelect
-          control={control}
-          label="Locales"
-          name="locales"
-          minSelect={{
-            value: 1,
-            message: 'Select at least one locale',
-          }}
-          options={localeOptions}
-          disabled={isDisabled}
-          helpText="Select the locales to translate to"
-          isAutoalignmentEnabled={false}
-          placement="top-start"
-        />
+        <>
+          <ControlledSelect
+            options={sourceLocaleOptions}
+            label="Source locale"
+            helpText="Select the locale to translate from"
+            name="sourceLanguage"
+            control={control}
+          />
+
+          <ControlledMultiSelect
+            control={control}
+            label="Locales"
+            name="locales"
+            minSelect={{
+              value: 1,
+              message: 'Select at least one locale',
+            }}
+            options={targetLocaleOptions}
+            disabled={isDisabled}
+            helpText="Select the locales to translate to"
+            isAutoalignmentEnabled={false}
+            placement="top-start"
+          />
+        </>
       )}
 
       <ControlledDatepicker

diff --git a/apps/xillio-transcreate/src/locations/Page/BulkEditor/BulkEditor.tsx b/apps/xillio-transcreate/src/locations/Page/BulkEditor/BulkEditor.tsx
@@ -519,7 +519,7 @@ export const BulkEditor = () => {
             generatedToken: token,
             recursive: data.sendRecursively,
             dueDate: data.dueDate.toISOString(),
-            sourceLanguage: sdk.locales.default,
+            sourceLanguage: data.sourceLanguage,
             projectId: data.projectName,
             jobName: data.translationJobName,
             jobDescription: data.description,