@strapi/i18n 0.0.0-experimental.00b482b8dcda6164537baf70d52b4b2535560c36 → 0.0.0-experimental.011bfeb83dc6344ffdc0f9c757af54f61c74e22f

package/dist/admin/components/LocalePicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LocalePicker.mjs","sources":["../../../admin/src/components/LocalePicker.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useQueryParams } from '@strapi/admin/strapi-admin';\nimport { SingleSelect, SingleSelectOption } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useI18n } from '../hooks/useI18n';\nimport { useGetLocalesQuery } from '../services/locales';\nimport { getTranslation } from '../utils/getTranslation';\n\nimport type { I18nBaseQuery } from '../types';\n\ninterface Query extends I18nBaseQuery {\n  page?: number;\n}\n\nconst LocalePicker = () => {\n  const { formatMessage } = useIntl();\n  const [{ query }, setQuery] = useQueryParams<Query>();\n\n  const { hasI18n, canRead, canCreate } = useI18n();\n  const { data: locales = [] } = useGetLocalesQuery(undefined, {\n    skip: !hasI18n,\n  });\n\n  const handleChange = React.useCallback(\n    (code: string, replace = false) => {\n      setQuery(\n        {\n          page: 1,\n          plugins: { ...query.plugins, i18n: { locale: code } },\n        },\n        'push',\n        replace\n      );\n    },\n    [query.plugins, setQuery]\n  );\n\n  React.useEffect(() => {\n    if (!Array.isArray(locales) || !hasI18n) {\n      return;\n    }\n    /**\n     * Handle the case where the current locale query param doesn't exist\n     * in the list of available locales, so we redirect to the default locale.\n     */\n    const currentDesiredLocale = query.plugins?.i18n?.locale;\n    const doesLocaleExist = locales.find((loc) => loc.code === currentDesiredLocale);\n    const defaultLocale = locales.find((locale) => locale.isDefault);\n    if (!doesLocaleExist && defaultLocale?.code) {\n      handleChange(defaultLocale.code, true);\n    }\n  }, [hasI18n, handleChange, locales, query.plugins?.i18n?.locale]);\n\n  if (!hasI18n || !Array.isArray(locales) || locales.length === 0) {\n    return null;\n  }\n\n  const displayedLocales = locales.filter((locale) => {\n    /**\n     * If you can create or read we allow you to see the locale exists\n     * this is because in the ListView, you may be able to create a new entry\n     * in a locale you can't read.\n     */\n    return canCreate.includes(locale.code) || canRead.includes(locale.code);\n  });\n\n  return (\n    <SingleSelect\n      size=\"S\"\n      aria-label={formatMessage({\n        id: getTranslation('actions.select-locale'),\n        defaultMessage: 'Select locale',\n      })}\n      value={query.plugins?.i18n?.locale || locales.find((locale) => locale.isDefault)?.code}\n      // @ts-expect-error – This can be removed in V2 of the DS.\n      onChange={handleChange}\n    >\n      {displayedLocales.map((locale) => (\n        <SingleSelectOption key={locale.id} value={locale.code}>\n          {locale.name}\n        </SingleSelectOption>\n      ))}\n    </SingleSelect>\n  );\n};\n\nexport { LocalePicker };\n"],"names":["LocalePicker","formatMessage","useIntl","query","setQuery","useQueryParams","hasI18n","canRead","canCreate","useI18n","data","locales","useGetLocalesQuery","undefined","skip","handleChange","React","useCallback","code","replace","page","plugins","i18n","locale","useEffect","Array","isArray","currentDesiredLocale","doesLocaleExist","find","loc","defaultLocale","isDefault","length","displayedLocales","filter","includes","_jsx","SingleSelect","size","aria-label","id","getTranslation","defaultMessage","value","onChange","map","SingleSelectOption","name"],"mappings":"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"}
+{"version":3,"file":"LocalePicker.mjs","sources":["../../../admin/src/components/LocalePicker.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useQueryParams } from '@strapi/admin/strapi-admin';\nimport { SingleSelect, SingleSelectOption } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useI18n } from '../hooks/useI18n';\nimport { useGetLocalesQuery } from '../services/locales';\nimport { getTranslation } from '../utils/getTranslation';\n\nimport type { I18nBaseQuery } from '../types';\n\ninterface Query extends I18nBaseQuery {\n  page?: number;\n}\n\nconst LocalePicker = () => {\n  const { formatMessage } = useIntl();\n  const [{ query }, setQuery] = useQueryParams<Query>();\n\n  const { hasI18n, canRead, canCreate } = useI18n();\n  const { data: locales = [] } = useGetLocalesQuery(undefined, {\n    skip: !hasI18n,\n  });\n\n  const handleChange = React.useCallback(\n    (code: string, replace = false) => {\n      setQuery(\n        {\n          page: 1,\n          plugins: { ...query.plugins, i18n: { locale: code } },\n        },\n        'push',\n        replace\n      );\n    },\n    [query.plugins, setQuery]\n  );\n\n  React.useEffect(() => {\n    if (!Array.isArray(locales) || !hasI18n) {\n      return;\n    }\n    /**\n     * Handle the case where the current locale query param doesn't exist\n     * in the list of available locales, so we redirect to the default locale.\n     */\n    const currentDesiredLocale = query.plugins?.i18n?.locale;\n    const doesLocaleExist = locales.find((loc) => loc.code === currentDesiredLocale);\n    const defaultLocale = locales.find((locale) => locale.isDefault);\n    if (!doesLocaleExist && defaultLocale?.code) {\n      handleChange(defaultLocale.code, true);\n    }\n  }, [hasI18n, handleChange, locales, query.plugins?.i18n?.locale]);\n\n  const sortedLocaleOptions = React.useMemo(() => {\n    const displayedLocales = Array.isArray(locales)\n      ? locales.filter((locale) => {\n          /**\n           * If you can create or read we allow you to see the locale exists\n           * this is because in the ListView, you may be able to create a new entry\n           * in a locale you can't read.\n           */\n          return canCreate.includes(locale.code) || canRead.includes(locale.code);\n        })\n      : [];\n\n    return displayedLocales\n      .sort((a, b) => a.name.localeCompare(b.name))\n      .map((locale) => (\n        <SingleSelectOption key={locale.id} value={locale.code}>\n          {locale.name}\n        </SingleSelectOption>\n      ));\n  }, [locales, canCreate, canRead]);\n\n  if (!hasI18n || !Array.isArray(locales) || locales.length === 0) {\n    return null;\n  }\n\n  return (\n    <SingleSelect\n      size=\"S\"\n      aria-label={formatMessage({\n        id: getTranslation('actions.select-locale'),\n        defaultMessage: 'Select locale',\n      })}\n      value={query.plugins?.i18n?.locale || locales.find((locale) => locale.isDefault)?.code}\n      // @ts-expect-error – This can be removed in V2 of the DS.\n      onChange={handleChange}\n    >\n      {sortedLocaleOptions}\n    </SingleSelect>\n  );\n};\n\nexport { LocalePicker };\n"],"names":["LocalePicker","formatMessage","useIntl","query","setQuery","useQueryParams","hasI18n","canRead","canCreate","useI18n","data","locales","useGetLocalesQuery","undefined","skip","handleChange","React","useCallback","code","replace","page","plugins","i18n","locale","useEffect","Array","isArray","currentDesiredLocale","doesLocaleExist","find","loc","defaultLocale","isDefault","sortedLocaleOptions","useMemo","displayedLocales","filter","includes","sort","a","b","name","localeCompare","map","_jsx","SingleSelectOption","value","id","length","SingleSelect","size","aria-label","getTranslation","defaultMessage","onChange"],"mappings":"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"}

package/dist/admin/contentManagerHooks/editView.js

@@ -82,9 +82,12 @@ const LabelAction = ({ title, icon })=>{
                 tag: "span",
                 children: formatMessage(title)
             }),
-            /*#__PURE__*/ React__namespace.cloneElement(icon, {
-                'aria-hidden': true,
-                focusable: false
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
+                label: formatMessage(title),
+                children: /*#__PURE__*/ React__namespace.cloneElement(icon, {
+                    'aria-hidden': true,
+                    focusable: false
+                })
             })
         ]
     });

package/dist/admin/contentManagerHooks/editView.js.map

@@ -1 +1 @@
-{"version":3,"file":"editView.js","sources":["../../../admin/src/contentManagerHooks/editView.tsx"],"sourcesContent":["/* eslint-disable check-file/filename-naming-convention */\nimport * as React from 'react';\n\nimport { Flex, VisuallyHidden } from '@strapi/design-system';\nimport { Earth, EarthStriked } from '@strapi/icons';\nimport { MessageDescriptor, useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTranslation } from '../utils/getTranslation';\n\nimport type { EditFieldLayout, EditLayout } from '@strapi/content-manager/strapi-admin';\n\ninterface MutateEditViewArgs {\n  layout: EditLayout;\n}\n\nconst mutateEditViewHook = ({ layout }: MutateEditViewArgs): MutateEditViewArgs => {\n  // If i18n isn't explicitly enabled on the content type, then no field can be localized\n  if (\n    !('i18n' in layout.options) ||\n    (typeof layout.options.i18n === 'object' &&\n      layout.options.i18n !== null &&\n      'localized' in layout.options.i18n &&\n      !layout.options.i18n.localized)\n  ) {\n    return { layout };\n  }\n\n  const components = Object.entries(layout.components).reduce<EditLayout['components']>(\n    (acc, [key, componentLayout]) => {\n      return {\n        ...acc,\n        [key]: {\n          ...componentLayout,\n          layout: componentLayout.layout.map((row) => row.map(addLabelActionToField)),\n        },\n      };\n    },\n    {}\n  );\n\n  return {\n    layout: {\n      ...layout,\n      components,\n      layout: layout.layout.map((panel) => panel.map((row) => row.map(addLabelActionToField))),\n    },\n  } satisfies Pick<MutateEditViewArgs, 'layout'>;\n};\n\nconst addLabelActionToField = (field: EditFieldLayout) => {\n  const isFieldLocalized = doesFieldHaveI18nPluginOpt(field.attribute.pluginOptions)\n    ? field.attribute.pluginOptions.i18n.localized\n    : true || ['uid', 'relation'].includes(field.attribute.type);\n\n  const labelActionProps = {\n    title: {\n      id: isFieldLocalized\n        ? getTranslation('Field.localized')\n        : getTranslation('Field.not-localized'),\n      defaultMessage: isFieldLocalized\n        ? 'This value is unique for the selected locale'\n        : 'This value is the same across all locales',\n    },\n    icon: isFieldLocalized ? <Earth /> : null,\n  };\n\n  return {\n    ...field,\n    labelAction: isFieldLocalized ? <LabelAction {...labelActionProps} /> : null,\n  };\n};\n\nconst doesFieldHaveI18nPluginOpt = (\n  pluginOpts?: object\n): pluginOpts is { i18n: { localized: boolean } } => {\n  if (!pluginOpts) {\n    return false;\n  }\n\n  return (\n    'i18n' in pluginOpts &&\n    typeof pluginOpts.i18n === 'object' &&\n    pluginOpts.i18n !== null &&\n    'localized' in pluginOpts.i18n\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * LabelAction\n * -----------------------------------------------------------------------------------------------*/\n\ninterface LabelActionProps {\n  title: MessageDescriptor;\n  icon: React.ReactNode;\n}\n\nconst LabelAction = ({ title, icon }: LabelActionProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Span tag=\"span\">\n      <VisuallyHidden tag=\"span\">{formatMessage(title)}</VisuallyHidden>\n      {React.cloneElement(icon as React.ReactElement, {\n        'aria-hidden': true,\n        focusable: false, // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable\n      })}\n    </Span>\n  );\n};\n\nconst Span = styled(Flex)`\n  svg {\n    width: 12px;\n    height: 12px;\n\n    fill: ${({ theme }) => theme.colors.neutral500};\n\n    path {\n      fill: ${({ theme }) => theme.colors.neutral500};\n    }\n  }\n`;\n\nexport { mutateEditViewHook };\n"],"names":["mutateEditViewHook","layout","options","i18n","localized","components","Object","entries","reduce","acc","key","componentLayout","map","row","addLabelActionToField","panel","field","isFieldLocalized","doesFieldHaveI18nPluginOpt","attribute","pluginOptions","labelActionProps","title","id","getTranslation","defaultMessage","icon","_jsx","Earth","labelAction","LabelAction","pluginOpts","formatMessage","useIntl","_jsxs","Span","tag","VisuallyHidden","React","cloneElement","focusable","styled","Flex","theme","colors","neutral500"],"mappings":"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"}
+{"version":3,"file":"editView.js","sources":["../../../admin/src/contentManagerHooks/editView.tsx"],"sourcesContent":["/* eslint-disable check-file/filename-naming-convention */\nimport * as React from 'react';\n\nimport { Flex, Tooltip, VisuallyHidden } from '@strapi/design-system';\nimport { Earth, EarthStriked } from '@strapi/icons';\nimport { MessageDescriptor, useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTranslation } from '../utils/getTranslation';\n\nimport type { EditFieldLayout, EditLayout } from '@strapi/content-manager/strapi-admin';\n\ninterface MutateEditViewArgs {\n  layout: EditLayout;\n}\n\nconst mutateEditViewHook = ({ layout }: MutateEditViewArgs): MutateEditViewArgs => {\n  // If i18n isn't explicitly enabled on the content type, then no field can be localized\n  if (\n    !('i18n' in layout.options) ||\n    (typeof layout.options.i18n === 'object' &&\n      layout.options.i18n !== null &&\n      'localized' in layout.options.i18n &&\n      !layout.options.i18n.localized)\n  ) {\n    return { layout };\n  }\n\n  const components = Object.entries(layout.components).reduce<EditLayout['components']>(\n    (acc, [key, componentLayout]) => {\n      return {\n        ...acc,\n        [key]: {\n          ...componentLayout,\n          layout: componentLayout.layout.map((row) => row.map(addLabelActionToField)),\n        },\n      };\n    },\n    {}\n  );\n\n  return {\n    layout: {\n      ...layout,\n      components,\n      layout: layout.layout.map((panel) => panel.map((row) => row.map(addLabelActionToField))),\n    },\n  } satisfies Pick<MutateEditViewArgs, 'layout'>;\n};\n\nconst addLabelActionToField = (field: EditFieldLayout) => {\n  const isFieldLocalized = doesFieldHaveI18nPluginOpt(field.attribute.pluginOptions)\n    ? field.attribute.pluginOptions.i18n.localized\n    : true || ['uid', 'relation'].includes(field.attribute.type);\n\n  const labelActionProps = {\n    title: {\n      id: isFieldLocalized\n        ? getTranslation('Field.localized')\n        : getTranslation('Field.not-localized'),\n      defaultMessage: isFieldLocalized\n        ? 'This value is unique for the selected locale'\n        : 'This value is the same across all locales',\n    },\n    icon: isFieldLocalized ? <Earth /> : null,\n  };\n\n  return {\n    ...field,\n    labelAction: isFieldLocalized ? <LabelAction {...labelActionProps} /> : null,\n  };\n};\n\nconst doesFieldHaveI18nPluginOpt = (\n  pluginOpts?: object\n): pluginOpts is { i18n: { localized: boolean } } => {\n  if (!pluginOpts) {\n    return false;\n  }\n\n  return (\n    'i18n' in pluginOpts &&\n    typeof pluginOpts.i18n === 'object' &&\n    pluginOpts.i18n !== null &&\n    'localized' in pluginOpts.i18n\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * LabelAction\n * -----------------------------------------------------------------------------------------------*/\n\ninterface LabelActionProps {\n  title: MessageDescriptor;\n  icon: React.ReactNode;\n}\n\nconst LabelAction = ({ title, icon }: LabelActionProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Span tag=\"span\">\n      <VisuallyHidden tag=\"span\">{formatMessage(title)}</VisuallyHidden>\n      <Tooltip label={formatMessage(title)}>\n        {React.cloneElement(icon as React.ReactElement, {\n          'aria-hidden': true,\n          focusable: false, // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable\n        })}\n      </Tooltip>\n    </Span>\n  );\n};\n\nconst Span = styled(Flex)`\n  svg {\n    width: 12px;\n    height: 12px;\n\n    fill: ${({ theme }) => theme.colors.neutral500};\n\n    path {\n      fill: ${({ theme }) => theme.colors.neutral500};\n    }\n  }\n`;\n\nexport { mutateEditViewHook };\n"],"names":["mutateEditViewHook","layout","options","i18n","localized","components","Object","entries","reduce","acc","key","componentLayout","map","row","addLabelActionToField","panel","field","isFieldLocalized","doesFieldHaveI18nPluginOpt","attribute","pluginOptions","labelActionProps","title","id","getTranslation","defaultMessage","icon","_jsx","Earth","labelAction","LabelAction","pluginOpts","formatMessage","useIntl","_jsxs","Span","tag","VisuallyHidden","Tooltip","label","React","cloneElement","focusable","styled","Flex","theme","colors","neutral500"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAMA,kBAAqB,GAAA,CAAC,EAAEC,MAAM,EAAsB,GAAA;;AAExD,IAAA,IACE,EAAE,MAAUA,IAAAA,MAAAA,CAAOC,OAAO,CAAD,IACxB,OAAOD,MAAAA,CAAOC,OAAO,CAACC,IAAI,KAAK,YAC9BF,MAAOC,CAAAA,OAAO,CAACC,IAAI,KAAK,IAAA,IACxB,WAAeF,IAAAA,MAAAA,CAAOC,OAAO,CAACC,IAAI,IAClC,CAACF,OAAOC,OAAO,CAACC,IAAI,CAACC,SAAS,EAChC;QACA,OAAO;AAAEH,YAAAA;AAAO,SAAA;AAClB;AAEA,IAAA,MAAMI,UAAaC,GAAAA,MAAAA,CAAOC,OAAO,CAACN,MAAOI,CAAAA,UAAU,CAAEG,CAAAA,MAAM,CACzD,CAACC,GAAK,EAAA,CAACC,KAAKC,eAAgB,CAAA,GAAA;QAC1B,OAAO;AACL,YAAA,GAAGF,GAAG;AACN,YAAA,CAACC,MAAM;AACL,gBAAA,GAAGC,eAAe;gBAClBV,MAAQU,EAAAA,eAAAA,CAAgBV,MAAM,CAACW,GAAG,CAAC,CAACC,GAAAA,GAAQA,GAAID,CAAAA,GAAG,CAACE,qBAAAA,CAAAA;AACtD;AACF,SAAA;AACF,KAAA,EACA,EAAC,CAAA;IAGH,OAAO;QACLb,MAAQ,EAAA;AACN,YAAA,GAAGA,MAAM;AACTI,YAAAA,UAAAA;AACAJ,YAAAA,MAAAA,EAAQA,MAAOA,CAAAA,MAAM,CAACW,GAAG,CAAC,CAACG,KAAAA,GAAUA,KAAMH,CAAAA,GAAG,CAAC,CAACC,GAAQA,GAAAA,GAAAA,CAAID,GAAG,CAACE,qBAAAA,CAAAA,CAAAA;AAClE;AACF,KAAA;AACF;AAEA,MAAMA,wBAAwB,CAACE,KAAAA,GAAAA;AAC7B,IAAA,MAAMC,mBAAmBC,0BAA2BF,CAAAA,KAAAA,CAAMG,SAAS,CAACC,aAAa,CAC7EJ,GAAAA,KAAAA,CAAMG,SAAS,CAACC,aAAa,CAACjB,IAAI,CAACC,SAAS,GAC5C,IAAyD;AAE7D,IAAA,MAAMiB,gBAAmB,GAAA;QACvBC,KAAO,EAAA;YACLC,EAAIN,EAAAA,gBAAAA,GACAO,6BAAe,CAAA,iBAAA,CAAA,GACfA,6BAAe,CAAA,qBAAA,CAAA;AACnBC,YAAAA,cAAAA,EAAgBR,mBACZ,8CACA,GAAA;AACN,SAAA;QACAS,IAAMT,EAAAA,gBAAAA,iBAAmBU,eAACC,WAAW,EAAA,EAAA,CAAA,GAAA;AACvC,KAAA;IAEA,OAAO;AACL,QAAA,GAAGZ,KAAK;AACRa,QAAAA,WAAAA,EAAaZ,iCAAmBU,cAACG,CAAAA,WAAAA,EAAAA;AAAa,YAAA,GAAGT;AAAuB,SAAA,CAAA,GAAA;AAC1E,KAAA;AACF,CAAA;AAEA,MAAMH,6BAA6B,CACjCa,UAAAA,GAAAA;AAEA,IAAA,IAAI,CAACA,UAAY,EAAA;QACf,OAAO,KAAA;AACT;AAEA,IAAA,OACE,MAAUA,IAAAA,UAAAA,IACV,OAAOA,UAAAA,CAAW5B,IAAI,KAAK,QAC3B4B,IAAAA,UAAAA,CAAW5B,IAAI,KAAK,IACpB,IAAA,WAAA,IAAe4B,WAAW5B,IAAI;AAElC,CAAA;AAWA,MAAM2B,cAAc,CAAC,EAAER,KAAK,EAAEI,IAAI,EAAoB,GAAA;IACpD,MAAM,EAAEM,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAE1B,IAAA,qBACEC,eAACC,CAAAA,IAAAA,EAAAA;QAAKC,GAAI,EAAA,MAAA;;0BACRT,cAACU,CAAAA,2BAAAA,EAAAA;gBAAeD,GAAI,EAAA,MAAA;0BAAQJ,aAAcV,CAAAA,KAAAA;;0BAC1CK,cAACW,CAAAA,oBAAAA,EAAAA;AAAQC,gBAAAA,KAAAA,EAAOP,aAAcV,CAAAA,KAAAA,CAAAA;wCAC3BkB,gBAAAA,CAAMC,YAAY,CAACf,IAA4B,EAAA;oBAC9C,aAAe,EAAA,IAAA;oBACfgB,SAAW,EAAA;AACb,iBAAA;;;;AAIR,CAAA;AAEA,MAAMP,IAAAA,GAAOQ,uBAAOC,CAAAA,iBAAAA,CAAK;;;;;UAKf,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;YAGvC,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;AAGrD,CAAC;;;;"}

package/dist/admin/contentManagerHooks/editView.mjs

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
-import { Flex, VisuallyHidden } from '@strapi/design-system';
+import { Flex, VisuallyHidden, Tooltip } from '@strapi/design-system';
 import { Earth } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
@@ -61,9 +61,12 @@ const LabelAction = ({ title, icon })=>{
                 tag: "span",
                 children: formatMessage(title)
             }),
-            /*#__PURE__*/ React.cloneElement(icon, {
-                'aria-hidden': true,
-                focusable: false
+            /*#__PURE__*/ jsx(Tooltip, {
+                label: formatMessage(title),
+                children: /*#__PURE__*/ React.cloneElement(icon, {
+                    'aria-hidden': true,
+                    focusable: false
+                })
             })
         ]
     });

package/dist/admin/contentManagerHooks/editView.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"editView.mjs","sources":["../../../admin/src/contentManagerHooks/editView.tsx"],"sourcesContent":["/* eslint-disable check-file/filename-naming-convention */\nimport * as React from 'react';\n\nimport { Flex, VisuallyHidden } from '@strapi/design-system';\nimport { Earth, EarthStriked } from '@strapi/icons';\nimport { MessageDescriptor, useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTranslation } from '../utils/getTranslation';\n\nimport type { EditFieldLayout, EditLayout } from '@strapi/content-manager/strapi-admin';\n\ninterface MutateEditViewArgs {\n  layout: EditLayout;\n}\n\nconst mutateEditViewHook = ({ layout }: MutateEditViewArgs): MutateEditViewArgs => {\n  // If i18n isn't explicitly enabled on the content type, then no field can be localized\n  if (\n    !('i18n' in layout.options) ||\n    (typeof layout.options.i18n === 'object' &&\n      layout.options.i18n !== null &&\n      'localized' in layout.options.i18n &&\n      !layout.options.i18n.localized)\n  ) {\n    return { layout };\n  }\n\n  const components = Object.entries(layout.components).reduce<EditLayout['components']>(\n    (acc, [key, componentLayout]) => {\n      return {\n        ...acc,\n        [key]: {\n          ...componentLayout,\n          layout: componentLayout.layout.map((row) => row.map(addLabelActionToField)),\n        },\n      };\n    },\n    {}\n  );\n\n  return {\n    layout: {\n      ...layout,\n      components,\n      layout: layout.layout.map((panel) => panel.map((row) => row.map(addLabelActionToField))),\n    },\n  } satisfies Pick<MutateEditViewArgs, 'layout'>;\n};\n\nconst addLabelActionToField = (field: EditFieldLayout) => {\n  const isFieldLocalized = doesFieldHaveI18nPluginOpt(field.attribute.pluginOptions)\n    ? field.attribute.pluginOptions.i18n.localized\n    : true || ['uid', 'relation'].includes(field.attribute.type);\n\n  const labelActionProps = {\n    title: {\n      id: isFieldLocalized\n        ? getTranslation('Field.localized')\n        : getTranslation('Field.not-localized'),\n      defaultMessage: isFieldLocalized\n        ? 'This value is unique for the selected locale'\n        : 'This value is the same across all locales',\n    },\n    icon: isFieldLocalized ? <Earth /> : null,\n  };\n\n  return {\n    ...field,\n    labelAction: isFieldLocalized ? <LabelAction {...labelActionProps} /> : null,\n  };\n};\n\nconst doesFieldHaveI18nPluginOpt = (\n  pluginOpts?: object\n): pluginOpts is { i18n: { localized: boolean } } => {\n  if (!pluginOpts) {\n    return false;\n  }\n\n  return (\n    'i18n' in pluginOpts &&\n    typeof pluginOpts.i18n === 'object' &&\n    pluginOpts.i18n !== null &&\n    'localized' in pluginOpts.i18n\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * LabelAction\n * -----------------------------------------------------------------------------------------------*/\n\ninterface LabelActionProps {\n  title: MessageDescriptor;\n  icon: React.ReactNode;\n}\n\nconst LabelAction = ({ title, icon }: LabelActionProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Span tag=\"span\">\n      <VisuallyHidden tag=\"span\">{formatMessage(title)}</VisuallyHidden>\n      {React.cloneElement(icon as React.ReactElement, {\n        'aria-hidden': true,\n        focusable: false, // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable\n      })}\n    </Span>\n  );\n};\n\nconst Span = styled(Flex)`\n  svg {\n    width: 12px;\n    height: 12px;\n\n    fill: ${({ theme }) => theme.colors.neutral500};\n\n    path {\n      fill: ${({ theme }) => theme.colors.neutral500};\n    }\n  }\n`;\n\nexport { mutateEditViewHook };\n"],"names":["mutateEditViewHook","layout","options","i18n","localized","components","Object","entries","reduce","acc","key","componentLayout","map","row","addLabelActionToField","panel","field","isFieldLocalized","doesFieldHaveI18nPluginOpt","attribute","pluginOptions","labelActionProps","title","id","getTranslation","defaultMessage","icon","_jsx","Earth","labelAction","LabelAction","pluginOpts","formatMessage","useIntl","_jsxs","Span","tag","VisuallyHidden","React","cloneElement","focusable","styled","Flex","theme","colors","neutral500"],"mappings":";;;;;;;;AAgBA,MAAMA,kBAAqB,GAAA,CAAC,EAAEC,MAAM,EAAsB,GAAA;;AAExD,IAAA,IACE,EAAE,MAAUA,IAAAA,MAAAA,CAAOC,OAAO,CAAD,IACxB,OAAOD,MAAAA,CAAOC,OAAO,CAACC,IAAI,KAAK,YAC9BF,MAAOC,CAAAA,OAAO,CAACC,IAAI,KAAK,IAAA,IACxB,WAAeF,IAAAA,MAAAA,CAAOC,OAAO,CAACC,IAAI,IAClC,CAACF,OAAOC,OAAO,CAACC,IAAI,CAACC,SAAS,EAChC;QACA,OAAO;AAAEH,YAAAA;AAAO,SAAA;AAClB;AAEA,IAAA,MAAMI,UAAaC,GAAAA,MAAAA,CAAOC,OAAO,CAACN,MAAOI,CAAAA,UAAU,CAAEG,CAAAA,MAAM,CACzD,CAACC,GAAK,EAAA,CAACC,KAAKC,eAAgB,CAAA,GAAA;QAC1B,OAAO;AACL,YAAA,GAAGF,GAAG;AACN,YAAA,CAACC,MAAM;AACL,gBAAA,GAAGC,eAAe;gBAClBV,MAAQU,EAAAA,eAAAA,CAAgBV,MAAM,CAACW,GAAG,CAAC,CAACC,GAAAA,GAAQA,GAAID,CAAAA,GAAG,CAACE,qBAAAA,CAAAA;AACtD;AACF,SAAA;AACF,KAAA,EACA,EAAC,CAAA;IAGH,OAAO;QACLb,MAAQ,EAAA;AACN,YAAA,GAAGA,MAAM;AACTI,YAAAA,UAAAA;AACAJ,YAAAA,MAAAA,EAAQA,MAAOA,CAAAA,MAAM,CAACW,GAAG,CAAC,CAACG,KAAAA,GAAUA,KAAMH,CAAAA,GAAG,CAAC,CAACC,GAAQA,GAAAA,GAAAA,CAAID,GAAG,CAACE,qBAAAA,CAAAA,CAAAA;AAClE;AACF,KAAA;AACF;AAEA,MAAMA,wBAAwB,CAACE,KAAAA,GAAAA;AAC7B,IAAA,MAAMC,mBAAmBC,0BAA2BF,CAAAA,KAAAA,CAAMG,SAAS,CAACC,aAAa,CAC7EJ,GAAAA,KAAAA,CAAMG,SAAS,CAACC,aAAa,CAACjB,IAAI,CAACC,SAAS,GAC5C,IAAyD;AAE7D,IAAA,MAAMiB,gBAAmB,GAAA;QACvBC,KAAO,EAAA;YACLC,EAAIN,EAAAA,gBAAAA,GACAO,cAAe,CAAA,iBAAA,CAAA,GACfA,cAAe,CAAA,qBAAA,CAAA;AACnBC,YAAAA,cAAAA,EAAgBR,mBACZ,8CACA,GAAA;AACN,SAAA;QACAS,IAAMT,EAAAA,gBAAAA,iBAAmBU,IAACC,KAAW,EAAA,EAAA,CAAA,GAAA;AACvC,KAAA;IAEA,OAAO;AACL,QAAA,GAAGZ,KAAK;AACRa,QAAAA,WAAAA,EAAaZ,iCAAmBU,GAACG,CAAAA,WAAAA,EAAAA;AAAa,YAAA,GAAGT;AAAuB,SAAA,CAAA,GAAA;AAC1E,KAAA;AACF,CAAA;AAEA,MAAMH,6BAA6B,CACjCa,UAAAA,GAAAA;AAEA,IAAA,IAAI,CAACA,UAAY,EAAA;QACf,OAAO,KAAA;AACT;AAEA,IAAA,OACE,MAAUA,IAAAA,UAAAA,IACV,OAAOA,UAAAA,CAAW5B,IAAI,KAAK,QAC3B4B,IAAAA,UAAAA,CAAW5B,IAAI,KAAK,IACpB,IAAA,WAAA,IAAe4B,WAAW5B,IAAI;AAElC,CAAA;AAWA,MAAM2B,cAAc,CAAC,EAAER,KAAK,EAAEI,IAAI,EAAoB,GAAA;IACpD,MAAM,EAAEM,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,qBACEC,IAACC,CAAAA,IAAAA,EAAAA;QAAKC,GAAI,EAAA,MAAA;;0BACRT,GAACU,CAAAA,cAAAA,EAAAA;gBAAeD,GAAI,EAAA,MAAA;0BAAQJ,aAAcV,CAAAA,KAAAA;;0BACzCgB,KAAMC,CAAAA,YAAY,CAACb,IAA4B,EAAA;gBAC9C,aAAe,EAAA,IAAA;gBACfc,SAAW,EAAA;AACb,aAAA;;;AAGN,CAAA;AAEA,MAAML,IAAAA,GAAOM,MAAOC,CAAAA,IAAAA,CAAK;;;;;UAKf,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;YAGvC,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;AAGrD,CAAC;;;;"}
+{"version":3,"file":"editView.mjs","sources":["../../../admin/src/contentManagerHooks/editView.tsx"],"sourcesContent":["/* eslint-disable check-file/filename-naming-convention */\nimport * as React from 'react';\n\nimport { Flex, Tooltip, VisuallyHidden } from '@strapi/design-system';\nimport { Earth, EarthStriked } from '@strapi/icons';\nimport { MessageDescriptor, useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTranslation } from '../utils/getTranslation';\n\nimport type { EditFieldLayout, EditLayout } from '@strapi/content-manager/strapi-admin';\n\ninterface MutateEditViewArgs {\n  layout: EditLayout;\n}\n\nconst mutateEditViewHook = ({ layout }: MutateEditViewArgs): MutateEditViewArgs => {\n  // If i18n isn't explicitly enabled on the content type, then no field can be localized\n  if (\n    !('i18n' in layout.options) ||\n    (typeof layout.options.i18n === 'object' &&\n      layout.options.i18n !== null &&\n      'localized' in layout.options.i18n &&\n      !layout.options.i18n.localized)\n  ) {\n    return { layout };\n  }\n\n  const components = Object.entries(layout.components).reduce<EditLayout['components']>(\n    (acc, [key, componentLayout]) => {\n      return {\n        ...acc,\n        [key]: {\n          ...componentLayout,\n          layout: componentLayout.layout.map((row) => row.map(addLabelActionToField)),\n        },\n      };\n    },\n    {}\n  );\n\n  return {\n    layout: {\n      ...layout,\n      components,\n      layout: layout.layout.map((panel) => panel.map((row) => row.map(addLabelActionToField))),\n    },\n  } satisfies Pick<MutateEditViewArgs, 'layout'>;\n};\n\nconst addLabelActionToField = (field: EditFieldLayout) => {\n  const isFieldLocalized = doesFieldHaveI18nPluginOpt(field.attribute.pluginOptions)\n    ? field.attribute.pluginOptions.i18n.localized\n    : true || ['uid', 'relation'].includes(field.attribute.type);\n\n  const labelActionProps = {\n    title: {\n      id: isFieldLocalized\n        ? getTranslation('Field.localized')\n        : getTranslation('Field.not-localized'),\n      defaultMessage: isFieldLocalized\n        ? 'This value is unique for the selected locale'\n        : 'This value is the same across all locales',\n    },\n    icon: isFieldLocalized ? <Earth /> : null,\n  };\n\n  return {\n    ...field,\n    labelAction: isFieldLocalized ? <LabelAction {...labelActionProps} /> : null,\n  };\n};\n\nconst doesFieldHaveI18nPluginOpt = (\n  pluginOpts?: object\n): pluginOpts is { i18n: { localized: boolean } } => {\n  if (!pluginOpts) {\n    return false;\n  }\n\n  return (\n    'i18n' in pluginOpts &&\n    typeof pluginOpts.i18n === 'object' &&\n    pluginOpts.i18n !== null &&\n    'localized' in pluginOpts.i18n\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * LabelAction\n * -----------------------------------------------------------------------------------------------*/\n\ninterface LabelActionProps {\n  title: MessageDescriptor;\n  icon: React.ReactNode;\n}\n\nconst LabelAction = ({ title, icon }: LabelActionProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Span tag=\"span\">\n      <VisuallyHidden tag=\"span\">{formatMessage(title)}</VisuallyHidden>\n      <Tooltip label={formatMessage(title)}>\n        {React.cloneElement(icon as React.ReactElement, {\n          'aria-hidden': true,\n          focusable: false, // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable\n        })}\n      </Tooltip>\n    </Span>\n  );\n};\n\nconst Span = styled(Flex)`\n  svg {\n    width: 12px;\n    height: 12px;\n\n    fill: ${({ theme }) => theme.colors.neutral500};\n\n    path {\n      fill: ${({ theme }) => theme.colors.neutral500};\n    }\n  }\n`;\n\nexport { mutateEditViewHook };\n"],"names":["mutateEditViewHook","layout","options","i18n","localized","components","Object","entries","reduce","acc","key","componentLayout","map","row","addLabelActionToField","panel","field","isFieldLocalized","doesFieldHaveI18nPluginOpt","attribute","pluginOptions","labelActionProps","title","id","getTranslation","defaultMessage","icon","_jsx","Earth","labelAction","LabelAction","pluginOpts","formatMessage","useIntl","_jsxs","Span","tag","VisuallyHidden","Tooltip","label","React","cloneElement","focusable","styled","Flex","theme","colors","neutral500"],"mappings":"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"}

package/dist/admin/pages/SettingsPage.js

@@ -1,55 +1,65 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
+require('react');
 var strapiAdmin = require('@strapi/admin/strapi-admin');
+var ee = require('@strapi/admin/strapi-admin/ee');
 var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
 var symbols = require('@strapi/icons/symbols');
 var reactIntl = require('react-intl');
 var CreateLocale = require('../components/CreateLocale.js');
 var LocaleTable = require('../components/LocaleTable.js');
 var constants = require('../constants.js');
 var locales = require('../services/locales.js');
+var settings = require('../services/settings.js');
 var getTranslation = require('../utils/getTranslation.js');
 
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
+const SettingsErrrorTooltip = ({ children, error })=>{
+    const { _unstableFormatAPIError: formatAPIError } = strapiAdmin.useAPIErrorHandler();
+    if (error) {
+        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
+            label: formatAPIError(error),
+            style: {
+                maxWidth: '200px'
+            },
+            children: children
         });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
+    }
+    return children;
+};
 const SettingsPage = ()=>{
     const { formatMessage } = reactIntl.useIntl();
     const { toggleNotification } = strapiAdmin.useNotification();
-    const { _unstableFormatAPIError: formatAPIError } = strapiAdmin.useAPIErrorHandler();
     const { data: locales$1, isLoading: isLoadingLocales, error } = locales.useGetLocalesQuery();
     const { isLoading: isLoadingRBAC, allowedActions: { canUpdate, canCreate, canDelete } } = strapiAdmin.useRBAC(constants.PERMISSIONS);
-    React__namespace.useEffect(()=>{
-        if (error) {
+    const isAIAvailable = ee.useAIAvailability();
+    // Settings state management
+    const { data: settings$1, isLoading: isLoadingSettings, error: settingsError } = settings.useGetSettingsQuery();
+    const [updateSettings] = settings.useUpdateSettingsMutation();
+    const handleToggleChange = async (checked)=>{
+        try {
+            await updateSettings({
+                aiLocalizations: checked
+            }).unwrap();
+            toggleNotification({
+                type: 'success',
+                message: formatMessage({
+                    id: 'notification.form.success.fields'
+                })
+            });
+        } catch (err) {
+            console.error(err);
             toggleNotification({
                 type: 'danger',
-                message: formatAPIError(error)
+                message: formatMessage({
+                    id: 'notification.error',
+                    defaultMessage: 'An error occurred'
+                })
             });
         }
-    }, [
-        error,
-        formatAPIError,
-        toggleNotification
-    ]);
-    const isLoading = isLoadingLocales || isLoadingRBAC;
+    };
+    const isLoading = isLoadingLocales || isLoadingRBAC || isLoadingSettings;
     if (isLoading) {
         return /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Page.Loading, {});
     }
@@ -72,25 +82,90 @@ const SettingsPage = ()=>{
                     defaultMessage: 'Configure the settings'
                 })
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Layouts.Content, {
-                children: locales$1.length > 0 ? /*#__PURE__*/ jsxRuntime.jsx(LocaleTable.LocaleTable, {
-                    locales: locales$1,
-                    canDelete: canDelete,
-                    canUpdate: canUpdate
-                }) : /*#__PURE__*/ jsxRuntime.jsx(designSystem.EmptyStateLayout, {
-                    icon: /*#__PURE__*/ jsxRuntime.jsx(symbols.EmptyDocuments, {
-                        width: undefined,
-                        height: undefined
-                    }),
-                    content: formatMessage({
-                        id: getTranslation.getTranslation('Settings.list.empty.title'),
-                        defaultMessage: 'There are no locales'
+            /*#__PURE__*/ jsxRuntime.jsxs(strapiAdmin.Layouts.Content, {
+                children: [
+                    isAIAvailable && window.strapi.future.isEnabled('unstableAILocalizations') && /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        background: "neutral0",
+                        padding: 6,
+                        marginBottom: 6,
+                        shadow: "filterShadow",
+                        hasRadius: true,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                direction: "column",
+                                alignItems: "stretch",
+                                gap: 1,
+                                flex: 1,
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                        gap: 1,
+                                        children: [
+                                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                                color: "alternative700",
+                                                children: /*#__PURE__*/ jsxRuntime.jsx(icons.Sparkle, {})
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                                variant: "delta",
+                                                tag: "h2",
+                                                children: formatMessage({
+                                                    id: getTranslation.getTranslation('Settings.aiLocalizations.label'),
+                                                    defaultMessage: 'AI Translations'
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                        variant: "pi",
+                                        textColor: "neutral600",
+                                        fontSize: "14px",
+                                        children: formatMessage({
+                                            id: getTranslation.getTranslation('Settings.aiLocalizations.description'),
+                                            defaultMessage: 'Everytime you save in the Content Manager, our AI will use your default locale to translate all other locales automatically.'
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Root, {
+                                name: "aiLocalizations",
+                                minWidth: "200px",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(SettingsErrrorTooltip, {
+                                    error: settingsError,
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Toggle, {
+                                        disabled: Boolean(settingsError),
+                                        checked: settings$1?.data?.aiLocalizations ?? false,
+                                        offLabel: formatMessage({
+                                            id: 'app.components.ToggleCheckbox.disabled-label',
+                                            defaultMessage: 'Disabled'
+                                        }),
+                                        onLabel: formatMessage({
+                                            id: 'app.components.ToggleCheckbox.enabled-label',
+                                            defaultMessage: 'Enabled'
+                                        }),
+                                        onChange: (e)=>handleToggleChange(e.target.checked)
+                                    })
+                                })
+                            })
+                        ]
                     }),
-                    action: /*#__PURE__*/ jsxRuntime.jsx(CreateLocale.CreateLocale, {
-                        disabled: !canCreate,
-                        variant: "secondary"
+                    locales$1.length > 0 ? /*#__PURE__*/ jsxRuntime.jsx(LocaleTable.LocaleTable, {
+                        locales: locales$1,
+                        canDelete: canDelete,
+                        canUpdate: canUpdate
+                    }) : /*#__PURE__*/ jsxRuntime.jsx(designSystem.EmptyStateLayout, {
+                        icon: /*#__PURE__*/ jsxRuntime.jsx(symbols.EmptyDocuments, {
+                            width: undefined,
+                            height: undefined
+                        }),
+                        content: formatMessage({
+                            id: getTranslation.getTranslation('Settings.list.empty.title'),
+                            defaultMessage: 'There are no locales'
+                        }),
+                        action: /*#__PURE__*/ jsxRuntime.jsx(CreateLocale.CreateLocale, {
+                            disabled: !canCreate,
+                            variant: "secondary"
+                        })
                     })
-                })
+                ]
             })
         ]
     });

package/dist/admin/pages/SettingsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsPage.js","sources":["../../../admin/src/pages/SettingsPage.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Page,\n  useAPIErrorHandler,\n  useNotification,\n  useRBAC,\n  Layouts,\n} from '@strapi/admin/strapi-admin';\nimport { EmptyStateLayout } from '@strapi/design-system';\nimport { EmptyDocuments } from '@strapi/icons/symbols';\nimport { useIntl } from 'react-intl';\n\nimport { CreateLocale } from '../components/CreateLocale';\nimport { LocaleTable } from '../components/LocaleTable';\nimport { PERMISSIONS } from '../constants';\nimport { useGetLocalesQuery } from '../services/locales';\nimport { getTranslation } from '../utils/getTranslation';\n\nconst SettingsPage = () => {\n  const { formatMessage } = useIntl();\n  const { toggleNotification } = useNotification();\n  const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();\n  const { data: locales, isLoading: isLoadingLocales, error } = useGetLocalesQuery();\n  const {\n    isLoading: isLoadingRBAC,\n    allowedActions: { canUpdate, canCreate, canDelete },\n  } = useRBAC(PERMISSIONS);\n\n  React.useEffect(() => {\n    if (error) {\n      toggleNotification({\n        type: 'danger',\n        message: formatAPIError(error),\n      });\n    }\n  }, [error, formatAPIError, toggleNotification]);\n\n  const isLoading = isLoadingLocales || isLoadingRBAC;\n\n  if (isLoading) {\n    return <Page.Loading />;\n  }\n\n  if (error || !Array.isArray(locales)) {\n    return <Page.Error />;\n  }\n\n  return (\n    <Page.Main tabIndex={-1}>\n      <Layouts.Header\n        primaryAction={<CreateLocale disabled={!canCreate} />}\n        title={formatMessage({\n          id: getTranslation('plugin.name'),\n          defaultMessage: 'Internationalization',\n        })}\n        subtitle={formatMessage({\n          id: getTranslation('Settings.list.description'),\n          defaultMessage: 'Configure the settings',\n        })}\n      />\n      <Layouts.Content>\n        {locales.length > 0 ? (\n          <LocaleTable locales={locales} canDelete={canDelete} canUpdate={canUpdate} />\n        ) : (\n          <EmptyStateLayout\n            icon={<EmptyDocuments width={undefined} height={undefined} />}\n            content={formatMessage({\n              id: getTranslation('Settings.list.empty.title'),\n              defaultMessage: 'There are no locales',\n            })}\n            action={<CreateLocale disabled={!canCreate} variant=\"secondary\" />}\n          />\n        )}\n      </Layouts.Content>\n    </Page.Main>\n  );\n};\n\nconst ProtectedSettingsPage = () => {\n  return (\n    <Page.Protect permissions={PERMISSIONS.read}>\n      <SettingsPage />\n    </Page.Protect>\n  );\n};\n\nexport { ProtectedSettingsPage, SettingsPage };\n"],"names":["SettingsPage","formatMessage","useIntl","toggleNotification","useNotification","_unstableFormatAPIError","formatAPIError","useAPIErrorHandler","data","locales","isLoading","isLoadingLocales","error","useGetLocalesQuery","isLoadingRBAC","allowedActions","canUpdate","canCreate","canDelete","useRBAC","PERMISSIONS","React","useEffect","type","message","_jsx","Page","Loading","Array","isArray","Error","_jsxs","Main","tabIndex","Layouts","Header","primaryAction","CreateLocale","disabled","title","id","getTranslation","defaultMessage","subtitle","Content","length","LocaleTable","EmptyStateLayout","icon","EmptyDocuments","width","undefined","height","content","action","variant","ProtectedSettingsPage","Protect","permissions","read"],"mappings":"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"}
+{"version":3,"file":"SettingsPage.js","sources":["../../../admin/src/pages/SettingsPage.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { SerializedError } from '@reduxjs/toolkit';\nimport {\n  Page,\n  useAPIErrorHandler,\n  useNotification,\n  useRBAC,\n  Layouts,\n  BaseQueryError,\n} from '@strapi/admin/strapi-admin';\nimport { useAIAvailability } from '@strapi/admin/strapi-admin/ee';\nimport {\n  Box,\n  EmptyStateLayout,\n  Field,\n  Flex,\n  Tooltip,\n  Toggle,\n  Typography,\n} from '@strapi/design-system';\nimport { Sparkle } from '@strapi/icons';\nimport { EmptyDocuments } from '@strapi/icons/symbols';\nimport { useIntl } from 'react-intl';\n\nimport { CreateLocale } from '../components/CreateLocale';\nimport { LocaleTable } from '../components/LocaleTable';\nimport { PERMISSIONS } from '../constants';\nimport { useGetLocalesQuery } from '../services/locales';\nimport { useGetSettingsQuery, useUpdateSettingsMutation } from '../services/settings';\nimport { getTranslation } from '../utils/getTranslation';\n\nconst SettingsErrrorTooltip = ({\n  children,\n  error,\n}: {\n  children: React.ReactNode;\n  error: BaseQueryError | SerializedError | undefined;\n}) => {\n  const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();\n\n  if (error) {\n    return (\n      <Tooltip label={formatAPIError(error)} style={{ maxWidth: '200px' }}>\n        {children}\n      </Tooltip>\n    );\n  }\n\n  return children;\n};\n\nconst SettingsPage = () => {\n  const { formatMessage } = useIntl();\n  const { toggleNotification } = useNotification();\n  const { data: locales, isLoading: isLoadingLocales, error } = useGetLocalesQuery();\n  const {\n    isLoading: isLoadingRBAC,\n    allowedActions: { canUpdate, canCreate, canDelete },\n  } = useRBAC(PERMISSIONS);\n  const isAIAvailable = useAIAvailability();\n\n  // Settings state management\n  const {\n    data: settings,\n    isLoading: isLoadingSettings,\n    error: settingsError,\n  } = useGetSettingsQuery();\n  const [updateSettings] = useUpdateSettingsMutation();\n\n  const handleToggleChange = async (checked: boolean) => {\n    try {\n      await updateSettings({ aiLocalizations: checked }).unwrap();\n\n      toggleNotification({\n        type: 'success',\n        message: formatMessage({ id: 'notification.form.success.fields' }),\n      });\n    } catch (err) {\n      console.error(err);\n      toggleNotification({\n        type: 'danger',\n        message: formatMessage({\n          id: 'notification.error',\n          defaultMessage: 'An error occurred',\n        }),\n      });\n    }\n  };\n\n  const isLoading = isLoadingLocales || isLoadingRBAC || isLoadingSettings;\n\n  if (isLoading) {\n    return <Page.Loading />;\n  }\n\n  if (error || !Array.isArray(locales)) {\n    return <Page.Error />;\n  }\n\n  return (\n    <Page.Main tabIndex={-1}>\n      <Layouts.Header\n        primaryAction={<CreateLocale disabled={!canCreate} />}\n        title={formatMessage({\n          id: getTranslation('plugin.name'),\n          defaultMessage: 'Internationalization',\n        })}\n        subtitle={formatMessage({\n          id: getTranslation('Settings.list.description'),\n          defaultMessage: 'Configure the settings',\n        })}\n      />\n      <Layouts.Content>\n        {isAIAvailable && window.strapi.future.isEnabled('unstableAILocalizations') && (\n          <Flex background=\"neutral0\" padding={6} marginBottom={6} shadow=\"filterShadow\" hasRadius>\n            <Flex direction=\"column\" alignItems=\"stretch\" gap={1} flex={1}>\n              <Flex gap={1}>\n                <Box color=\"alternative700\">\n                  <Sparkle />\n                </Box>\n                <Typography variant=\"delta\" tag=\"h2\">\n                  {formatMessage({\n                    id: getTranslation('Settings.aiLocalizations.label'),\n                    defaultMessage: 'AI Translations',\n                  })}\n                </Typography>\n              </Flex>\n              <Typography variant=\"pi\" textColor=\"neutral600\" fontSize=\"14px\">\n                {formatMessage({\n                  id: getTranslation('Settings.aiLocalizations.description'),\n                  defaultMessage:\n                    'Everytime you save in the Content Manager, our AI will use your default locale to translate all other locales automatically.',\n                })}\n              </Typography>\n            </Flex>\n            <Field.Root name=\"aiLocalizations\" minWidth=\"200px\">\n              <SettingsErrrorTooltip error={settingsError}>\n                <Toggle\n                  disabled={Boolean(settingsError)}\n                  checked={settings?.data?.aiLocalizations ?? false}\n                  offLabel={formatMessage({\n                    id: 'app.components.ToggleCheckbox.disabled-label',\n                    defaultMessage: 'Disabled',\n                  })}\n                  onLabel={formatMessage({\n                    id: 'app.components.ToggleCheckbox.enabled-label',\n                    defaultMessage: 'Enabled',\n                  })}\n                  onChange={(e) => handleToggleChange(e.target.checked)}\n                />\n              </SettingsErrrorTooltip>\n            </Field.Root>\n          </Flex>\n        )}\n        {locales.length > 0 ? (\n          <LocaleTable locales={locales} canDelete={canDelete} canUpdate={canUpdate} />\n        ) : (\n          <EmptyStateLayout\n            icon={<EmptyDocuments width={undefined} height={undefined} />}\n            content={formatMessage({\n              id: getTranslation('Settings.list.empty.title'),\n              defaultMessage: 'There are no locales',\n            })}\n            action={<CreateLocale disabled={!canCreate} variant=\"secondary\" />}\n          />\n        )}\n      </Layouts.Content>\n    </Page.Main>\n  );\n};\n\nconst ProtectedSettingsPage = () => {\n  return (\n    <Page.Protect permissions={PERMISSIONS.read}>\n      <SettingsPage />\n    </Page.Protect>\n  );\n};\n\nexport { ProtectedSettingsPage, SettingsPage };\n"],"names":["SettingsErrrorTooltip","children","error","_unstableFormatAPIError","formatAPIError","useAPIErrorHandler","_jsx","Tooltip","label","style","maxWidth","SettingsPage","formatMessage","useIntl","toggleNotification","useNotification","data","locales","isLoading","isLoadingLocales","useGetLocalesQuery","isLoadingRBAC","allowedActions","canUpdate","canCreate","canDelete","useRBAC","PERMISSIONS","isAIAvailable","useAIAvailability","settings","isLoadingSettings","settingsError","useGetSettingsQuery","updateSettings","useUpdateSettingsMutation","handleToggleChange","checked","aiLocalizations","unwrap","type","message","id","err","console","defaultMessage","Page","Loading","Array","isArray","Error","_jsxs","Main","tabIndex","Layouts","Header","primaryAction","CreateLocale","disabled","title","getTranslation","subtitle","Content","window","strapi","future","isEnabled","Flex","background","padding","marginBottom","shadow","hasRadius","direction","alignItems","gap","flex","Box","color","Sparkle","Typography","variant","tag","textColor","fontSize","Field","Root","name","minWidth","Toggle","Boolean","offLabel","onLabel","onChange","e","target","length","LocaleTable","EmptyStateLayout","icon","EmptyDocuments","width","undefined","height","content","action","ProtectedSettingsPage","Protect","permissions","read"],"mappings":"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"}

package/dist/admin/pages/SettingsPage.mjs

@@ -1,34 +1,63 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import * as React from 'react';
-import { useNotification, useAPIErrorHandler, useRBAC, Page, Layouts } from '@strapi/admin/strapi-admin';
-import { EmptyStateLayout } from '@strapi/design-system';
+import 'react';
+import { useNotification, useRBAC, Page, Layouts, useAPIErrorHandler } from '@strapi/admin/strapi-admin';
+import { useAIAvailability } from '@strapi/admin/strapi-admin/ee';
+import { Flex, Box, Typography, Field, Toggle, EmptyStateLayout, Tooltip } from '@strapi/design-system';
+import { Sparkle } from '@strapi/icons';
 import { EmptyDocuments } from '@strapi/icons/symbols';
 import { useIntl } from 'react-intl';
 import { CreateLocale } from '../components/CreateLocale.mjs';
 import { LocaleTable } from '../components/LocaleTable.mjs';
 import { PERMISSIONS } from '../constants.mjs';
 import { useGetLocalesQuery } from '../services/locales.mjs';
+import { useGetSettingsQuery, useUpdateSettingsMutation } from '../services/settings.mjs';
 import { getTranslation } from '../utils/getTranslation.mjs';
 
+const SettingsErrrorTooltip = ({ children, error })=>{
+    const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
+    if (error) {
+        return /*#__PURE__*/ jsx(Tooltip, {
+            label: formatAPIError(error),
+            style: {
+                maxWidth: '200px'
+            },
+            children: children
+        });
+    }
+    return children;
+};
 const SettingsPage = ()=>{
     const { formatMessage } = useIntl();
     const { toggleNotification } = useNotification();
-    const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
     const { data: locales, isLoading: isLoadingLocales, error } = useGetLocalesQuery();
     const { isLoading: isLoadingRBAC, allowedActions: { canUpdate, canCreate, canDelete } } = useRBAC(PERMISSIONS);
-    React.useEffect(()=>{
-        if (error) {
+    const isAIAvailable = useAIAvailability();
+    // Settings state management
+    const { data: settings, isLoading: isLoadingSettings, error: settingsError } = useGetSettingsQuery();
+    const [updateSettings] = useUpdateSettingsMutation();
+    const handleToggleChange = async (checked)=>{
+        try {
+            await updateSettings({
+                aiLocalizations: checked
+            }).unwrap();
+            toggleNotification({
+                type: 'success',
+                message: formatMessage({
+                    id: 'notification.form.success.fields'
+                })
+            });
+        } catch (err) {
+            console.error(err);
             toggleNotification({
                 type: 'danger',
-                message: formatAPIError(error)
+                message: formatMessage({
+                    id: 'notification.error',
+                    defaultMessage: 'An error occurred'
+                })
             });
         }
-    }, [
-        error,
-        formatAPIError,
-        toggleNotification
-    ]);
-    const isLoading = isLoadingLocales || isLoadingRBAC;
+    };
+    const isLoading = isLoadingLocales || isLoadingRBAC || isLoadingSettings;
     if (isLoading) {
         return /*#__PURE__*/ jsx(Page.Loading, {});
     }
@@ -51,25 +80,90 @@ const SettingsPage = ()=>{
                     defaultMessage: 'Configure the settings'
                 })
             }),
-            /*#__PURE__*/ jsx(Layouts.Content, {
-                children: locales.length > 0 ? /*#__PURE__*/ jsx(LocaleTable, {
-                    locales: locales,
-                    canDelete: canDelete,
-                    canUpdate: canUpdate
-                }) : /*#__PURE__*/ jsx(EmptyStateLayout, {
-                    icon: /*#__PURE__*/ jsx(EmptyDocuments, {
-                        width: undefined,
-                        height: undefined
+            /*#__PURE__*/ jsxs(Layouts.Content, {
+                children: [
+                    isAIAvailable && window.strapi.future.isEnabled('unstableAILocalizations') && /*#__PURE__*/ jsxs(Flex, {
+                        background: "neutral0",
+                        padding: 6,
+                        marginBottom: 6,
+                        shadow: "filterShadow",
+                        hasRadius: true,
+                        children: [
+                            /*#__PURE__*/ jsxs(Flex, {
+                                direction: "column",
+                                alignItems: "stretch",
+                                gap: 1,
+                                flex: 1,
+                                children: [
+                                    /*#__PURE__*/ jsxs(Flex, {
+                                        gap: 1,
+                                        children: [
+                                            /*#__PURE__*/ jsx(Box, {
+                                                color: "alternative700",
+                                                children: /*#__PURE__*/ jsx(Sparkle, {})
+                                            }),
+                                            /*#__PURE__*/ jsx(Typography, {
+                                                variant: "delta",
+                                                tag: "h2",
+                                                children: formatMessage({
+                                                    id: getTranslation('Settings.aiLocalizations.label'),
+                                                    defaultMessage: 'AI Translations'
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsx(Typography, {
+                                        variant: "pi",
+                                        textColor: "neutral600",
+                                        fontSize: "14px",
+                                        children: formatMessage({
+                                            id: getTranslation('Settings.aiLocalizations.description'),
+                                            defaultMessage: 'Everytime you save in the Content Manager, our AI will use your default locale to translate all other locales automatically.'
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(Field.Root, {
+                                name: "aiLocalizations",
+                                minWidth: "200px",
+                                children: /*#__PURE__*/ jsx(SettingsErrrorTooltip, {
+                                    error: settingsError,
+                                    children: /*#__PURE__*/ jsx(Toggle, {
+                                        disabled: Boolean(settingsError),
+                                        checked: settings?.data?.aiLocalizations ?? false,
+                                        offLabel: formatMessage({
+                                            id: 'app.components.ToggleCheckbox.disabled-label',
+                                            defaultMessage: 'Disabled'
+                                        }),
+                                        onLabel: formatMessage({
+                                            id: 'app.components.ToggleCheckbox.enabled-label',
+                                            defaultMessage: 'Enabled'
+                                        }),
+                                        onChange: (e)=>handleToggleChange(e.target.checked)
+                                    })
+                                })
+                            })
+                        ]
                     }),
-                    content: formatMessage({
-                        id: getTranslation('Settings.list.empty.title'),
-                        defaultMessage: 'There are no locales'
-                    }),
-                    action: /*#__PURE__*/ jsx(CreateLocale, {
-                        disabled: !canCreate,
-                        variant: "secondary"
+                    locales.length > 0 ? /*#__PURE__*/ jsx(LocaleTable, {
+                        locales: locales,
+                        canDelete: canDelete,
+                        canUpdate: canUpdate
+                    }) : /*#__PURE__*/ jsx(EmptyStateLayout, {
+                        icon: /*#__PURE__*/ jsx(EmptyDocuments, {
+                            width: undefined,
+                            height: undefined
+                        }),
+                        content: formatMessage({
+                            id: getTranslation('Settings.list.empty.title'),
+                            defaultMessage: 'There are no locales'
+                        }),
+                        action: /*#__PURE__*/ jsx(CreateLocale, {
+                            disabled: !canCreate,
+                            variant: "secondary"
+                        })
                     })
-                })
+                ]
             })
         ]
     });