can compute the right i18n keys

VulcanJS · May 3, 2022 · 1420c90 · 1420c90
1 parent 6b20704
commit 1420c90
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 65 deletions.
diff --git a/packages/i18n/intl.ts b/packages/i18n/intl.ts
@@ -322,18 +322,21 @@ export const validateIntlField = (Locales: Array<LocaleType>) =>
     }
   };
 
-/*
+/**
 
 Get an array of intl keys to try for a field
 
+@example For model Foo of schema { foobar: { type: String, intlId: "foobar_translation"}} 
+=> ["foobar_translation", "foo.foobar"]
+
 */
 export const getIntlKeys = ({
   fieldName,
-  collectionName,
+  modelName,
   schema,
 }: {
   fieldName: string;
-  collectionName: string;
+  modelName: string;
   schema: VulcanSchema;
 }) => {
   const fieldSchema =
@@ -345,8 +348,8 @@ export const getIntlKeys = ({
   if (intlId) {
     intlKeys.push(intlId);
   }
-  if (collectionName) {
-    intlKeys.push(`${collectionName.toLowerCase()}.${fieldName}`);
+  if (modelName) {
+    intlKeys.push(`${modelName.toLowerCase()}.${fieldName}`);
   }
   intlKeys.push(`global.${fieldName}`);
   intlKeys.push(fieldName);

diff --git a/packages/react-ui/components/form/Form/fields.ts b/packages/react-ui/components/form/Form/fields.ts
@@ -41,10 +41,9 @@ const getModelIntlKeys = (
   flatSchema: any,
   fieldName: string
 ) => {
-  const collectionName = model.name.toLowerCase();
   return getIntlKeys({
     fieldName: fieldName,
-    collectionName,
+    modelName: model.name,
     schema: flatSchema,
   });
 };
@@ -216,15 +215,15 @@ export const getFieldNames = (
 // --------------------------------------------------------------------- //
 
 const initField = (
-  props,
+  props: { model: VulcanModel; layout?: "horizontal" | "vertical" },
   state: Pick<FormState, "currentDocument" | "flatSchema" | "originalSchema">,
-  context,
-  fieldName,
-  fieldSchema
+  context: any,
+  fieldName: string,
+  fieldSchema: VulcanFieldSchema
 ) => {
   const { model } = props;
   const { currentDocument, flatSchema } = state;
-  const isArray = get(fieldSchema, "type.0.type") === Array;
+  const isArray = fieldSchema.type === Array;
 
   // intialize properties
   let field: Partial<FormField> = {
@@ -242,7 +241,11 @@ const initField = (
   }
 
   field.label = getLabel(model, flatSchema, context, fieldName);
-  field.intlKeys = getIntlKeys(fieldName);
+  field.intlKeys = getIntlKeys({
+    fieldName,
+    modelName: model.name,
+    schema: model.schema,
+  });
   // // replace value by prefilled value if value is empty
   // const prefill = fieldSchema.prefill || (fieldSchema.form && fieldSchema.form.prefill);
   // if (prefill) {

diff --git a/packages/react-ui/components/form/Form/tests/Form.stories.tsx b/packages/react-ui/components/form/Form/tests/Form.stories.tsx
@@ -84,6 +84,21 @@ OneTextInput.args = {
   }),
 };
 
+export const I18nField = FormTemplate.bind({});
+I18nField.args = {
+  model: createModel({
+    name: "Biography",
+    schema: {
+      someText: {
+        ...defaultFieldSchema,
+        type: String,
+        intlId: "field_token",
+        intl: true,
+      },
+    },
+  }),
+};
+
 export const AllBasicFields = FormTemplate.bind({});
 AllBasicFields.args = {
   model: createModel({

diff --git a/packages/react-ui/components/form/Form/tests/fields.test.ts b/packages/react-ui/components/form/Form/tests/fields.test.ts
@@ -1,63 +1,61 @@
 import { createModel } from "@vulcanjs/model";
 import { getLabel } from "../fields";
 
-describe("react-components/components/Form - Fields", () => {
-  describe("getLabel", () => {
-    const common = {
-      formatDate: () => "",
-      formatTime: () => "",
-      formatRelative: () => "",
-      formatNumber: () => "",
-      formatPlural: () => "",
-      formatHTMLMessage: () => "",
-      now: Date.now(),
-      locale: "en",
-    };
-    // TODO: make this a reusable fixture
-    const contextWithI18n = {
-      formatMessage: (m) => m,
-      ...common,
-    };
-    const context = {
-      formatMessage: () => "", // key not found, will fallback to label or name
-      ...common,
-    };
-    test("internationalize label if possible", () => {
-      const model = createModel({
-        name: "Foo",
-        schema: {
-          attr1: {
-            type: String,
-          },
+describe("getLabel", () => {
+  const common = {
+    formatDate: () => "",
+    formatTime: () => "",
+    formatRelative: () => "",
+    formatNumber: () => "",
+    formatPlural: () => "",
+    formatHTMLMessage: () => "",
+    now: Date.now(),
+    locale: "en",
+  };
+  // TODO: make this a reusable fixture
+  const contextWithI18n = {
+    formatMessage: (m) => m,
+    ...common,
+  };
+  const context = {
+    formatMessage: () => "", // key not found, will fallback to label or name
+    ...common,
+  };
+  test("internationalize label if possible", () => {
+    const model = createModel({
+      name: "Foo",
+      schema: {
+        attr1: {
+          type: String,
         },
-      });
-      const label = getLabel(model, model.schema, contextWithI18n, "attr1");
-      expect(label).toEqual({ id: "foo.attr1" });
+      },
     });
-    test("use explicit field label if set", () => {
-      const model = createModel({
-        name: "Foo",
-        schema: {
-          attr1: {
-            type: String,
-            label: "Hello World",
-          },
+    const label = getLabel(model, model.schema, contextWithI18n, "attr1");
+    expect(label).toEqual({ id: "foo.attr1" });
+  });
+  test("use explicit field label if set", () => {
+    const model = createModel({
+      name: "Foo",
+      schema: {
+        attr1: {
+          type: String,
+          label: "Hello World",
         },
-      });
-      const label = getLabel(model, model.schema, context, "attr1");
-      expect(label).toEqual("Hello World");
+      },
     });
-    test("fallback to field name as label", () => {
-      const model = createModel({
-        name: "Foo",
-        schema: {
-          attr1: {
-            type: String,
-          },
+    const label = getLabel(model, model.schema, context, "attr1");
+    expect(label).toEqual("Hello World");
+  });
+  test("fallback to field name as label", () => {
+    const model = createModel({
+      name: "Foo",
+      schema: {
+        attr1: {
+          type: String,
         },
-      });
-      const label = getLabel(model, model.schema, context, "attr1");
-      expect(label).toEqual("Attr1");
+      },
     });
+    const label = getLabel(model, model.schema, context, "attr1");
+    expect(label).toEqual("Attr1");
   });
 });