Merge branch 'fix/dpi-fix-unreliable-use-i18n' into 'master'

refactor(dpi): promote better i18n usage

See merge request piveau/ui/piveau-ui!192

packages/piveau-hub-ui-modules/lib/data-provider-interface/composables/useFormSchema.ts

@@ -34,9 +34,14 @@ const useFormSchemaGlobal = createSharedComposable(() => {
   return { state, getSchema }
 })
 
-export function useFormSchema() {
+export interface UseFormSchemaOptions {
+  t?: (key: string) => string
+  te?: (key: string) => boolean
+}
+
+export function useFormSchema(options?: UseFormSchemaOptions) {
   const dpiContext = useDpiContext()
-  const { t } = useI18n({ useScope: 'global' })
+  const { t, te } = options || useI18n({ useScope: 'global' })
   const { state, getSchema } = useFormSchemaGlobal()
 
   const dpiConfig = computed(() => dpiContext.value.specification)
@@ -86,7 +91,7 @@ export function useFormSchema() {
   function translateSchema({ property, page }: { property: string, page: string }) {
     const schemaCopy = { ...state.value.schema }
     // @ts-ignore
-    translate(schemaCopy[property][page], property);
+    translate(schemaCopy[property][page], property, t, te);
 
     // Update the global state with the new schema
     // @ts-ignore

packages/piveau-hub-ui-modules/lib/data-provider-interface/utils/translation-helper.js

@@ -7,8 +7,7 @@ import { useI18n } from 'vue-i18n';
  * @param {String} property String defining which property translation should be used
  */
 
-function translateProperty(propertyDefinition, property) {
-    const { t, te } = useI18n({ useScope: 'global' });
+function translateProperty(propertyDefinition, property, t, te) {
 
     if (has(propertyDefinition, 'identifier')) { // hidden fields don't need a label and have no identifier
         const translatableParameters = ['label', 'info', 'help', 'placeholder', 'add-label'];
@@ -61,29 +60,29 @@ function translateProperty(propertyDefinition, property) {
  * @param {Object} schema Object containing the forms schema
  * @param {String} property String defining which property translation should be used (datasets/ distribution/ catalogues)
  */
-function translate(schema, property) {
+function translate(schema, property, t, te) {
     for (let index = 0; index < schema.length; index += 1) {
         const schemaPropertyValues = schema[index];
 
         // translation of group forms and their nested properties
         if (has(schemaPropertyValues, 'children')) {
             // group attributes should be translated too
-            translateProperty(schemaPropertyValues, property);
+            translateProperty(schemaPropertyValues, property, t, te);
             // translated nested properties
-            translate(schemaPropertyValues.children, property);
+            translate(schemaPropertyValues.children, property, t, te);
             // translation of conditional forms and their nested properties
         } else if (has(schemaPropertyValues, 'data')) {
             // group attributes should be translated too
-            translateProperty(schemaPropertyValues, property);
+            translateProperty(schemaPropertyValues, property, t, te);
             // translate nested data
             const dataKeys = Object.keys(schemaPropertyValues.data);
             for (let keyIndex = 0; keyIndex < dataKeys.length; keyIndex += 1) {
                 const currentKey = dataKeys[keyIndex];
-                translate(schemaPropertyValues.data[currentKey], property);
+                translate(schemaPropertyValues.data[currentKey], property, t, te);
             }
             // translation of 'normal' singular form properties
         } else {
-            translateProperty(schemaPropertyValues, property);
+            translateProperty(schemaPropertyValues, property, t, te);
         }
     }
 }

packages/piveau-hub-ui-modules/lib/data-provider-interface/views/InputPage.vue

@@ -79,6 +79,7 @@ import { useDpiStepper } from '../composables/useDpiStepper';
 import { useWindowScroll } from '@vueuse/core'
 import { plugin, defaultConfig } from '@formkit/vue'
 import { useDpiContext, useFormSchema } from '../composables';
+import { useI18n } from 'vue-i18n'
 
 export default defineComponent({
   props: {
@@ -397,8 +398,9 @@ export default defineComponent({
       goToNextStep,
       goToPreviousStep,
     } = useDpiStepper();
+    const { t, te } = useI18n()
 
-    const { translateSchema, createSchema, getSchema } = useFormSchema();
+    const { translateSchema, createSchema, getSchema } = useFormSchema({ t, te });
 
     const scrollToTop = () => {
       let { x, y } = useWindowScroll({ behavior: 'smooth' })