Feat/button switch and locale optimisations

README.md

@@ -30,6 +30,8 @@ For this plugin you can configure global settings and configure the plugin per f
 - **Auto apply to fields (switch)**: When enabled this will automatically apply the plugin to all `structured-text`, `rich-text`, `string`, `text` and `seo` fields.
 By changing the following setting you can choose on which fields this plugin will be applied.
 
+- **Show "Translate to all locales" button (switch)**: When enabled this will show a `Translate to all locales` button on for all English text to translate the field into all available languages.
+
 - **Field where this plugin is enabled (multi select)**: You can choose to which fields the plugin will be applied.
 
 > Options of `Field where this plugin is enabled`:

src/entrypoints/ConfigScreen/ConfigScreen.tsx

@@ -9,6 +9,7 @@ import {
 
 import {
   deeplFormalityLevelOptions,
+  defaultShowTranslate,
   defaultDeeplPreserveFormatting,
   fieldsOptions,
   translationServiceOptions,
@@ -85,6 +86,21 @@ export default function ConfigScreen({ ctx }: Props) {
               }}
             />
 
+            <SwitchField
+              name="showTranslateAll"
+              id="showTranslateAll"
+              label='Show "translate to all locales" button'
+              hint='If disabled it will not show the "Translate to all locales" button.'
+              value={pluginParameters?.showTranslateAll ?? defaultShowTranslate}
+              onChange={(newValue) => {
+                ctx.updatePluginParameters({
+                  ...pluginParameters,
+                  showTranslateAll: newValue,
+                })
+                ctx.notice('Settings updated successfully!')
+              }}
+            />
+
             <SelectField
               name="translationService"
               id="translationService"

src/entrypoints/FieldAddon/FieldAddon.tsx

@@ -28,11 +28,12 @@ import {
 } from '../../lib/types'
 import {
   deeplFormalityLevelOptions,
+  defaultShowTranslate,
   defaultDeeplPreserveFormatting,
   translationFormats,
   translationServiceOptions,
 } from '../../lib/constants'
-import { fieldHasFieldValue } from '../../lib/helpers'
+import { fieldHasFieldValue, getFullLocaleText } from '../../lib/helpers'
 
 type Props = {
   ctx: RenderFieldExtensionCtx
@@ -47,6 +48,11 @@ export default function FieldAddon({ ctx }: Props) {
     ctx.plugin.attributes.parameters
   const pluginParameters: Parameters = ctx.parameters
 
+  const showTranslateAll =
+    pluginParameters?.showTranslateAll ??
+    pluginGlobalParameters?.showTranslateAll ??
+    defaultShowTranslate
+
   const translationService =
     pluginParameters?.translationService ||
     pluginGlobalParameters?.translationService ||
@@ -227,7 +233,9 @@ export default function FieldAddon({ ctx }: Props) {
       }
     } else {
       setHasError(
-        `Please add content to the default field (${fromLocale || locales[0]})`,
+        `Please add content to the ${
+          fromLocale ? getFullLocaleText(fromLocale) : ''
+        } field`,
       )
     }
   }
@@ -276,32 +284,34 @@ export default function FieldAddon({ ctx }: Props) {
             }
             disabled={isTranslating}
           >
-            Copy and translate from {locales[0]}
+            Copy and translate from {getFullLocaleText(locales[0])}
           </Button>
         </Form>
       </Canvas>
     )
   }
 
+  if (!showTranslateAll) {
+    ctx.setHeight(0)
+    return null
+  }
+
+  const otherLocales = locales.filter((locale) => locale !== currentLocale)
+  const buttonText =
+    locales.length > 2
+      ? 'Translate to all locales'
+      : `Translate to ${getFullLocaleText(otherLocales[0])}`
+
   return (
     <Canvas ctx={ctx}>
-      <Form
-        onSubmit={() =>
-          translateField(locales.filter((locale) => locale !== currentLocale))
-        }
-      >
+      <Form onSubmit={() => translateField(otherLocales)}>
         <Button
           buttonSize="xxs"
           type="submit"
           rightIcon={isTranslating ? <Spinner size={24} /> : null}
           disabled={isTranslating}
         >
-          {locales.length > 2
-            ? `Translate to all locales (
-          ${locales.filter((locale) => locale !== currentLocale).join(', ')})`
-            : `Translate to ${locales.filter(
-                (locale) => locale !== currentLocale,
-              )}`}
+          {buttonText}
         </Button>
       </Form>
     </Canvas>

src/entrypoints/FieldAddonConfigScreen/FieldAddonConfigScreen.tsx

@@ -9,6 +9,7 @@ import {
 
 import {
   deeplFormalityLevelOptions,
+  defaultShowTranslate,
   defaultDeeplPreserveFormatting,
   translationServiceOptions,
 } from '../../lib/constants'
@@ -33,6 +34,11 @@ export default function ConfigScreen({ ctx }: Props) {
   const pluginGlobalParameters: GlobalParameters =
     ctx.plugin.attributes.parameters
 
+  const selectedShowTranslateAll =
+    pluginParameters?.showTranslateAll ??
+    pluginGlobalParameters?.showTranslateAll ??
+    defaultShowTranslate
+
   const selectedTranslationService =
     pluginParameters?.translationService ||
     pluginGlobalParameters?.translationService ||
@@ -61,6 +67,21 @@ export default function ConfigScreen({ ctx }: Props) {
     <Canvas ctx={ctx}>
       <Form>
         <FieldGroup>
+          <SwitchField
+            name="showTranslateAll"
+            id="showTranslateAll"
+            label='Show "translate to all locales" button'
+            hint='If disabled it will not show the "Translate to all locales" button.'
+            value={selectedShowTranslateAll}
+            onChange={(newValue) => {
+              ctx.setParameters({
+                ...pluginParameters,
+                showTranslateAll: newValue,
+              })
+              ctx.notice('Settings updated successfully!')
+            }}
+          />
+
           <SelectField
             name="translationService"
             id="translationService"
@@ -75,6 +96,8 @@ export default function ConfigScreen({ ctx }: Props) {
                 ...pluginParameters,
                 translationService: newValue,
               })
+
+              ctx.notice('Settings updated successfully!')
             }}
           />
 

src/lib/constants.ts

@@ -7,6 +7,7 @@ import {
   SettingOption,
 } from './types'
 
+export const defaultShowTranslate = true
 export const defaultDeeplPreserveFormatting = false
 
 export const fieldsOptions: SettingOption<DatoFieldType>[] = [

src/lib/helpers.test.ts

@@ -4,6 +4,7 @@ import {
   isJsonString,
   structuredTextValueToDast,
   fieldHasFieldValue,
+  getFullLocaleText,
 } from './helpers'
 import {
   structuredTextDast,
@@ -152,3 +153,23 @@ describe('fieldHasFieldValue', () => {
     expect(fieldHasFieldValue([], extendedDatoCmsCtx)).toBeFalsy()
   })
 })
+
+describe('getFullLocaleText', () => {
+  it('should return full locale text for a given locale', () => {
+    const locale = 'en'
+    const result = 'English'
+    expect(getFullLocaleText(locale)).toBe(result)
+  })
+
+  it('should return full locale text for a different locale', () => {
+    const locale = 'fr'
+    const result = 'French'
+    expect(getFullLocaleText(locale)).toBe(result)
+  })
+
+  it('should return locale if locale is not supported', () => {
+    const locale = 'abc'
+    const result = 'abc'
+    expect(getFullLocaleText(locale)).toBe(result)
+  })
+})

src/lib/helpers.ts

@@ -144,3 +144,10 @@ export function fieldHasFieldValue(
     }
   }
 }
+
+export function getFullLocaleText(locale: string): string {
+  const fullLocaleText = new Intl.DisplayNames(['en'], { type: 'language' }).of(
+    locale,
+  )
+  return fullLocaleText || locale
+}

src/lib/types.ts

@@ -65,6 +65,7 @@ export enum DeeplFormalityLevel {
 }
 
 export type Parameters = {
+  showTranslateAll?: boolean
   translationService?: SettingOption<TranslationService>
   model?: SettingOption<string>
   temperature?: number