Fix JsonForms i18n integration and add coverage

web/__test__/helpers/jsonforms-i18n.test.ts

@@ -0,0 +1,135 @@
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { createI18n } from 'vue-i18n';
+
+import { jsonFormsAjv } from '@unraid/ui';
+import { JsonForms } from '@jsonforms/vue';
+import { vanillaRenderers } from '@jsonforms/vue-vanilla';
+import { render, screen } from '@testing-library/vue';
+import { useJsonFormsI18n } from '~/helpers/jsonforms-i18n';
+import { describe, expect, it } from 'vitest';
+
+const schema = {
+  type: 'object',
+  properties: {
+    provider: {
+      type: 'string',
+      minLength: 1,
+      i18n: 'jsonforms.test.provider',
+    },
+  },
+  required: ['provider'],
+} as const;
+
+const uischema = {
+  type: 'Control',
+  scope: '#/properties/provider',
+} as const;
+
+const messages = {
+  en: {
+    jsonforms: {
+      test: {
+        provider: {
+          label: 'Provider label (en)',
+          description: 'English description',
+        },
+      },
+      errors: {
+        required: 'Field is required (en)',
+      },
+    },
+  },
+  fr: {
+    jsonforms: {
+      test: {
+        provider: {
+          label: 'Libellé du fournisseur (fr)',
+          description: 'Description française',
+        },
+      },
+      errors: {
+        required: 'Champ requis (fr)',
+      },
+    },
+  },
+} as const;
+
+const TestHarness = defineComponent(() => {
+  const formData = ref<Record<string, unknown>>({});
+  const i18nState = useJsonFormsI18n();
+
+  const handleChange = ({ data }: { data: Record<string, unknown> }) => {
+    formData.value = data;
+  };
+
+  return () =>
+    h(JsonForms, {
+      schema,
+      uischema,
+      data: formData.value,
+      renderers: vanillaRenderers,
+      ajv: jsonFormsAjv,
+      i18n: i18nState.value,
+      validationMode: 'ValidateAndShow',
+      onChange: handleChange,
+    });
+});
+
+const renderJsonForms = async (locale: 'en' | 'fr' = 'en') => {
+  const i18n = createI18n({
+    legacy: false,
+    locale,
+    messages,
+  });
+
+  const utils = render(TestHarness, {
+    global: {
+      plugins: [i18n],
+    },
+  });
+
+  await screen.findByText('Provider label (en)');
+
+  return { i18n, ...utils };
+};
+
+describe('useJsonFormsI18n', () => {
+  it('translates labels, descriptions, and errors when the locale changes', async () => {
+    const { i18n } = await renderJsonForms('en');
+
+    expect(await screen.findByText('Provider label (en)')).toBeTruthy();
+    expect(screen.getByText('English description')).toBeTruthy();
+    expect(screen.getByText('Field is required (en)')).toBeTruthy();
+
+    i18n.global.locale.value = 'fr';
+    await nextTick();
+    await screen.findByText('Libellé du fournisseur (fr)');
+
+    expect(screen.getByText('Description française')).toBeTruthy();
+    expect(screen.getByText('Champ requis (fr)')).toBeTruthy();
+  });
+
+  it('responds to updated translations for the active locale', async () => {
+    const { i18n } = await renderJsonForms('en');
+
+    i18n.global.mergeLocaleMessage('en', {
+      jsonforms: {
+        test: {
+          provider: {
+            label: 'Provider label (updated)',
+            description: 'Updated English description',
+          },
+        },
+      },
+      errors: {
+        required: 'Field is required (updated)',
+      },
+    });
+
+    await nextTick();
+    await screen.findByText('Provider label (updated)');
+
+    expect(screen.getByText('Updated English description')).toBeTruthy();
+    expect(screen.getByText('Field is required (updated)')).toBeTruthy();
+  });
+});

web/src/components/ApiKey/ApiKeyCreate.vue

@@ -106,6 +106,20 @@ const formData = ref<FormData>({
 const formValid = ref(false);
 const jsonFormsI18n = useJsonFormsI18n();
 
+const jsonFormsConfig = {
+  restrict: false,
+  trim: false,
+};
+
+const renderers = [...jsonFormsRenderers];
+
+const jsonFormsProps = computed(() => ({
+  renderers,
+  config: jsonFormsConfig,
+  ajv: jsonFormsAjv,
+  i18n: jsonFormsI18n.value,
+}));
+
 // Use clipboard for copying
 const { copyWithNotification, copied } = useClipboardWithToast();
 
@@ -464,10 +478,8 @@ const copyApiKey = async () => {
         <JsonForms
           :schema="formSchema.dataSchema"
           :uischema="formSchema.uiSchema"
-          :renderers="jsonFormsRenderers"
+          v-bind="jsonFormsProps"
           :data="formData"
-          :ajv="jsonFormsAjv"
-          :i18n="jsonFormsI18n"
           @change="
             ({ data, errors }) => {
               formData = data;

web/src/components/ConnectSettings/ConnectSettings.standalone.vue

@@ -94,6 +94,13 @@ const jsonFormsConfig = {
 const renderers = [...jsonFormsRenderers];
 const jsonFormsI18n = useJsonFormsI18n();
 
+const jsonFormsProps = computed(() => ({
+  renderers,
+  config: jsonFormsConfig,
+  ajv: jsonFormsAjv,
+  i18n: jsonFormsI18n.value,
+}));
+
 /** Called when the user clicks the "Apply" button */
 const submitSettingsUpdate = async () => {
   console.log('[ConnectSettings] trying to update settings to', formState.value);
@@ -122,13 +129,10 @@ const onChange = ({ data }: { data: Record<string, unknown> }) => {
     <div class="mt-6 pl-3 [&_.vertical-layout]:space-y-6">
       <JsonForms
         v-if="settings"
+        v-bind="jsonFormsProps"
         :schema="settings.dataSchema"
         :uischema="settings.uiSchema"
-        :renderers="renderers"
         :data="formState"
-        :config="jsonFormsConfig"
-        :ajv="jsonFormsAjv"
-        :i18n="jsonFormsI18n"
         :readonly="isUpdating"
         @change="onChange"
       />

web/src/helpers/jsonforms-i18n.ts

@@ -1,30 +1,72 @@
-import { computed } from 'vue';
+import { ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import type { JsonFormsI18nState } from '@jsonforms/core';
 
+const toStringIfNeeded = (value: unknown) => {
+  if (typeof value === 'string') {
+    return value;
+  }
+  if (value == null) {
+    return '';
+  }
+  return String(value);
+};
+
 export function useJsonFormsI18n() {
-  const { t, te, locale } = useI18n();
+  const { t, te, locale, messages } = useI18n();
+
+  const translate: NonNullable<JsonFormsI18nState['translate']> = (id, defaultMessage, values) => {
+    if (id && te(id)) {
+      const result = t(id, values ?? {});
+      return toStringIfNeeded(result);
+    }
+
+    if (defaultMessage) {
+      return toStringIfNeeded(defaultMessage);
+    }
+
+    return id ?? '';
+  };
 
-  return computed<JsonFormsI18nState>(() => ({
+  const translateError: NonNullable<JsonFormsI18nState['translateError']> = (error) => {
+    const key = error.keyword ? `jsonforms.errors.${error.keyword}` : undefined;
+    if (key && te(key)) {
+      const translated = t(key, error.params ?? {});
+      return toStringIfNeeded(translated);
+    }
+    return error.message ?? error.keyword ?? '';
+  };
+
+  const state = ref<JsonFormsI18nState>({
     locale: locale.value,
-    translate: (id, defaultMessage, values) => {
-      if (id && te(id)) {
-        const result = t(id, values);
-        return typeof result === 'string' ? result : String(result);
-      }
-      if (defaultMessage) {
-        return defaultMessage;
-      }
-      return id;
+    translate,
+    translateError,
+  });
+
+  watch(
+    locale,
+    (currentLocale) => {
+      state.value = {
+        locale: currentLocale,
+        translate,
+        translateError,
+      };
     },
-    translateError: (error) => {
-      const key = error.keyword ? `jsonforms.errors.${error.keyword}` : undefined;
-      if (key && te(key)) {
-        const translated = t(key, error.params ?? {});
-        return typeof translated === 'string' ? translated : String(translated);
-      }
-      return error.message ?? error.keyword ?? '';
+    { immediate: true }
+  );
+
+  watch(
+    () => messages.value?.[locale.value],
+    () => {
+      state.value = {
+        locale: locale.value,
+        translate,
+        translateError,
+      };
     },
-  }));
+    { deep: true }
+  );
+
+  return state;
 }