feat: add description and placeholder to additional fields (#582)

* feat: add description and placeholder to the additional fields

* feat: refresh lockfile

* chore: test coverage

Author: mateusz-kleszcz

README.md

@@ -176,7 +176,33 @@ Config for this plugin is stored as a part of the `config/plugins.{js|ts}` or `c
 
 It is advised to configure additional fields through the plugin's Settings Page. There you can find the table of custom fields and toggle input for the audience field. When enabled, the audience field can be customized through the content manager. Custom fields can be added, edited, toggled, and removed with the use of the table provided on the Settings Page. When removing custom fields be advised that their values in navigation items will be lost. Disabling the custom fields will not affect the data and can be done with no consequence of loosing information.
 
-Creating configuration for additional fields with the `config.(js|ts)` file should be done with caution. Config object contains the `additionalFields` property of type `Array<CustomField | 'audience'>`, where CustomField is of type `{ type: 'string' | 'boolean' | 'media', name: string, label: string, enabled?: boolean }`. When creating custom fields be advised that the `name` property has to be unique. When editing a custom field it is advised not to edit its `name` and `type` properties. After config has been restored the custom fields that are not present in `config.js` file will be deleted and their values in navigation items will be lost.
+Creating configuration for additional fields with the `config.(js|ts)` file should be done with caution. Config object contains the `additionalFields` property of type `Array<CustomField | 'audience'>`, where CustomField is of type
+
+```ts
+type CustomField =
+  | {
+      type: 'string' | 'boolean' | 'media';
+      name: string;
+      label: string;
+      description?: string;
+      placeholder?: string;
+      required?: boolean;
+      enabled?: boolean;
+    }
+  | {
+      type: 'select';
+      name: string;
+      label: string;
+      description?: string;
+      placeholder?: string;
+      multi: boolean;
+      options: string[];
+      required?: boolean;
+      enabled?: boolean;
+    };
+```
+
+When creating custom fields be advised that the `name` property has to be unique. When editing a custom field it is advised not to edit its `name` and `type` properties. After config has been restored the custom fields that are not present in `config.js` file will be deleted and their values in navigation items will be lost.
 
 ## 🔧 GQL Configuration
 

admin/src/api/validators.ts

@@ -59,9 +59,13 @@ export const navigationSchema = z.object({
 });
 
 const navigationCustomFieldBase = z.object({
-  // TODO: Proper message translation
-  name: z.string().refine((current) => !current.includes(' '), { message: 'No space allowed' }),
-  label: z.string(),
+  name: z
+    .string({ required_error: 'requiredError' })
+    .nonempty('requiredError')
+    .refine((current) => !current.includes(' '), { message: 'noSpaceError' }),
+  label: z.string({ required_error: 'requiredError' }).nonempty('requiredError'),
+  description: z.string().optional(),
+  placeholder: z.string().optional(),
   required: z.boolean().optional(),
   enabled: z.boolean().optional(),
 });
@@ -70,7 +74,9 @@ export type NavigationItemCustomFieldSelect = z.infer<typeof navigationItemCusto
 const navigationItemCustomFieldSelect = navigationCustomFieldBase.extend({
   type: z.literal('select'),
   multi: z.boolean(),
-  options: z.array(z.string()),
+  options: z
+    .array(z.string(), { required_error: 'requiredError' })
+    .min(1, { message: 'requiredError' }),
 });
 
 export type NavigationItemCustomFieldPrimitive = z.infer<typeof navigationItemCustomFieldPrimitive>;
@@ -88,9 +94,11 @@ const navigationItemCustomFieldMedia = navigationCustomFieldBase.extend({
 });
 
 export type NavigationItemCustomField = z.infer<typeof navigationItemCustomField>;
-export const navigationItemCustomField = navigationItemCustomFieldPrimitive
-  .or(navigationItemCustomFieldMedia)
-  .or(navigationItemCustomFieldSelect);
+export const navigationItemCustomField = z.discriminatedUnion('type', [
+  navigationItemCustomFieldPrimitive,
+  navigationItemCustomFieldMedia,
+  navigationItemCustomFieldSelect,
+]);
 
 export type NavigationItemAdditionalField = z.infer<typeof navigationItemAdditionalField>;
 export const navigationItemAdditionalField = z.union([

admin/src/pages/HomePage/components/AdditionalFieldInput/index.tsx

@@ -63,6 +63,7 @@ export const AdditionalFieldInput: React.FC<AdditionalFieldInputProps> = ({
       id: field.name,
       name: name || field.name,
       disabled: isLoading || disabled,
+      placeholder: field.placeholder,
     }),
     [field, isLoading]
   );

admin/src/pages/HomePage/components/NavigationItemForm/index.tsx

@@ -833,6 +833,8 @@ export const NavigationItemForm: React.FC<NavigationItemFormProps> = ({
                                 <Field
                                   name={`additionalFields.${additionalField.name}`}
                                   label={additionalField.label}
+                                  hint={additionalField.description}
+                                  required={additionalField.required}
                                   error={renderError(`additionalFields.${additionalField.name}`)}
                                 >
                                   <AdditionalFieldInput

admin/src/pages/SettingsPage/components/CustomFieldForm/index.tsx

@@ -28,7 +28,7 @@ import { get, isNil, isObject, isString, set } from 'lodash';
 const tradPrefix = 'pages.settings.form.customFields.popup.';
 
 interface ICustomFieldFormProps {
-  customField: Partial<NavigationItemCustomField>;
+  customField: NavigationItemCustomField | null;
   isEditForm: boolean;
   onSubmit: Effect<NavigationItemCustomField>;
   onClose: VoidEffect;
@@ -59,9 +59,14 @@ const CustomFieldForm: React.FC<ICustomFieldFormProps> = ({
 
   const { formatMessage } = useIntl();
 
-  const [formValue, setFormValue] = useState<NavigationItemCustomField>(
-    {} as NavigationItemCustomField
-  );
+  const [formValue, setFormValue] = useState<NavigationItemCustomField>({
+    name: '',
+    label: '',
+    type: 'string',
+    required: false,
+    multi: false,
+    enabled: true,
+  });
   const [formError, setFormError] = useState<FormItemErrorSchema<NavigationItemCustomField>>();
 
   const { type } = formValue;
@@ -70,7 +75,7 @@ const CustomFieldForm: React.FC<ICustomFieldFormProps> = ({
     if (customField) {
       setFormValue({
         ...customField,
-      } as NavigationItemCustomField);
+      });
     }
   }, [customField]);
 
@@ -111,16 +116,13 @@ const CustomFieldForm: React.FC<ICustomFieldFormProps> = ({
   const renderError = (error: string): string | undefined => {
     const errorOccurence = get(formError, error);
     if (errorOccurence) {
-      return formatMessage(getTrad(error));
+      return formatMessage(getTrad(`${tradPrefix}${error}.${errorOccurence}`));
     }
     return undefined;
   };
 
   const submit = (e: React.MouseEvent, values: NavigationItemCustomField) => {
-    const { success, data, error } = navigationItemCustomField.safeParse({
-      ...values,
-      enabled: true,
-    });
+    const { success, data, error } = navigationItemCustomField.safeParse(values);
     if (success) {
       onSubmit(data);
     } else if (error) {
@@ -148,6 +150,7 @@ const CustomFieldForm: React.FC<ICustomFieldFormProps> = ({
                     label={formatMessage(getTrad(`${tradPrefix}name.label`))}
                     hint={formatMessage(getTrad(`${tradPrefix}name.description`))}
                     error={renderError('name')}
+                    required
                   >
                     <TextInput
                       name="name"
@@ -168,6 +171,7 @@ const CustomFieldForm: React.FC<ICustomFieldFormProps> = ({
                     label={formatMessage(getTrad(`${tradPrefix}label.label`))}
                     hint={formatMessage(getTrad(`${tradPrefix}label.description`))}
                     error={renderError('label')}
+                    required
                   >
                     <TextInput
                       name="label"
@@ -181,11 +185,50 @@ const CustomFieldForm: React.FC<ICustomFieldFormProps> = ({
                     />
                   </Field>
                 </Grid.Item>
+                <Grid.Item key="description" col={12}>
+                  <Field
+                    name="description"
+                    label={formatMessage(getTrad(`${tradPrefix}description.label`))}
+                    hint={formatMessage(getTrad(`${tradPrefix}description.description`))}
+                    error={renderError('description')}
+                  >
+                    <TextInput
+                      name="description"
+                      value={values.description}
+                      onChange={(eventOrPath: FormChangeEvent, value?: any) =>
+                        handleChange(eventOrPath, value, onChange)
+                      }
+                      placeholder={formatMessage(getTrad(`${tradPrefix}description.placeholder`))}
+                      type="string"
+                      width="100%"
+                    />
+                  </Field>
+                </Grid.Item>
+                <Grid.Item key="placeholder" col={12}>
+                  <Field
+                    name="placeholder"
+                    label={formatMessage(getTrad(`${tradPrefix}placeholder.label`))}
+                    hint={formatMessage(getTrad(`${tradPrefix}placeholder.description`))}
+                    error={renderError('placeholder')}
+                  >
+                    <TextInput
+                      name="placeholder"
+                      value={values.placeholder}
+                      onChange={(eventOrPath: FormChangeEvent, value?: any) =>
+                        handleChange(eventOrPath, value, onChange)
+                      }
+                      placeholder={formatMessage(getTrad(`${tradPrefix}placeholder.placeholder`))}
+                      type="string"
+                      width="100%"
+                    />
+                  </Field>
+                </Grid.Item>
                 <Grid.Item key="type" col={12}>
                   <Field
                     name="type"
                     label={formatMessage(getTrad(`${tradPrefix}type.label`))}
                     hint={formatMessage(getTrad(`${tradPrefix}type.description`))}
+                    required
                   >
                     <SingleSelect
                       name="type"

admin/src/pages/SettingsPage/components/CustomFieldModal/index.tsx

@@ -1,7 +1,6 @@
 import { Modal, Typography } from '@strapi/design-system';
 import React from 'react';
 
-import { pick } from 'lodash';
 import { useIntl } from 'react-intl';
 import { NavigationItemCustomField } from '../../../../schemas';
 import { getTrad } from '../../../../translations';
@@ -53,7 +52,7 @@ const CustomFieldModal: React.FC<ICustomFieldModalProps> = ({
         </Modal.Header>
         <CustomFieldForm
           isEditForm={isEditMode}
-          customField={pick(data, 'name', 'label', 'type', 'required', 'options', 'multi')}
+          customField={data}
           onSubmit={onSubmit}
           onClose={onClose}
         />

admin/src/schemas/config.ts

@@ -2,9 +2,13 @@ import { z } from 'zod';
 
 export type NavigationItemCustomFieldBase = z.infer<typeof navigationCustomFieldBase>;
 const navigationCustomFieldBase = z.object({
-  // TODO: Proper message translation
-  name: z.string().refine((current) => !current.includes(' '), { message: 'No space allowed' }),
-  label: z.string(),
+  name: z
+    .string({ required_error: 'requiredError' })
+    .nonempty('requiredError')
+    .refine((current) => !current.includes(' '), { message: 'noSpaceError' }),
+  label: z.string({ required_error: 'requiredError' }).nonempty('requiredError'),
+  description: z.string().optional(),
+  placeholder: z.string().optional(),
   required: z.boolean().optional(),
   enabled: z.boolean().optional(),
 });
@@ -13,7 +17,9 @@ export type NavigationItemCustomFieldSelect = z.infer<typeof navigationItemCusto
 const navigationItemCustomFieldSelect = navigationCustomFieldBase.extend({
   type: z.literal('select'),
   multi: z.boolean(),
-  options: z.array(z.string()),
+  options: z
+    .array(z.string(), { required_error: 'requiredError' })
+    .min(1, { message: 'requiredError' }),
 });
 
 export type NavigationItemCustomFieldPrimitive = z.infer<typeof navigationItemCustomFieldPrimitive>;
@@ -31,7 +37,7 @@ const navigationItemCustomFieldMedia = navigationCustomFieldBase.extend({
 });
 
 export type NavigationItemCustomField = z.infer<typeof navigationItemCustomField>;
-export const navigationItemCustomField = z.union([
+export const navigationItemCustomField = z.discriminatedUnion('type', [
   navigationItemCustomFieldPrimitive,
   navigationItemCustomFieldMedia,
   navigationItemCustomFieldSelect,

admin/src/translations/ca.ts

@@ -354,12 +354,26 @@ const ca = {
               label: 'Nom du champ personnalisé',
               placeholder: 'exemple_nom',
               description: 'Le nom du champ personnalisé doit être unique',
+              requiredError: 'El nom és obligatori',
+              noSpaceError: "No s'admeten espais",
             },
             label: {
               label: 'Étiquette du champ personnalisé',
               placeholder: "Exemple d'étiquette",
               description:
                 "Cette étiquette sera affichée sur le formulaire de l'élément de navigation",
+              requiredError: "L'etiqueta és obligatòria",
+            },
+            description: {
+              label: 'Descripció del camp personalitzat',
+              placeholder: 'Exemple de descripció',
+              description: 'Aquesta descripció es mostrarà sota el camp com a pista o explicació',
+            },
+            placeholder: {
+              label: 'Marcador de posició del camp personalitzat',
+              placeholder: 'Exemple de marcador de posició',
+              description:
+                'Aquest text de marcador de posició apareixerà dins del camp abans de la interacció',
             },
             type: {
               label: 'Type de champ personnalisé',
@@ -373,6 +387,7 @@ const ca = {
               label: "Options pour l'entrée de sélection",
               description:
                 'Activer ce champ ne changera pas les éléments de navigation déjà existants',
+              requiredError: 'Cal almenys una opció',
             },
             multi: {
               label: "Activer l'entrée de plusieurs options",

admin/src/translations/en.ts

@@ -355,11 +355,26 @@ const en = {
               label: 'Custom field name',
               placeholder: 'example_name',
               description: 'Name of the custom field must be unique',
+              requiredError: 'Name is required',
+              noSpaceError: 'No space allowed',
             },
             label: {
               label: 'Custom field label',
               placeholder: 'Example label',
               description: 'This label will be displayed on navigation item form',
+              requiredError: 'Label is required',
+            },
+            description: {
+              label: 'Custom field description',
+              placeholder: 'Example description',
+              description:
+                'This description will be displayed under the field as a hint or explenation',
+            },
+            placeholder: {
+              label: 'Custom field placeholder',
+              placeholder: 'Example placeholder',
+              description:
+                'This placeholder text will appear inside the field before the interaction',
             },
             type: {
               label: 'Custom field type',
@@ -372,6 +387,7 @@ const en = {
             options: {
               label: 'Options for select input',
               description: 'Provide options separated by ";"',
+              requiredError: 'At least one option is required',
             },
             multi: {
               label: 'Enable multiple options input',

admin/src/translations/es.ts

@@ -358,11 +358,24 @@ const en = {
               label: 'Nombre del campo personalizado',
               placeholder: 'ejemplo_nombre',
               description: 'El nombre del campo personalizado debe ser único',
+              requiredError: 'El nombre es obligatorio',
+              noSpaceError: 'No se permiten espacios',
             },
             label: {
               label: 'Etiqueta del campo personalizado',
               placeholder: 'Ejemplo de etiqueta',
               description: 'Esta etiqueta se mostrará en el formulario del elemento de navegación',
+              requiredError: 'La etiqueta es obligatoria',
+            },
+            description: {
+              label: 'Descripción del campo personalizado',
+              placeholder: 'Ejemplo de descripción',
+              description: 'Esta descripción se mostrará debajo del campo como pista o explicación',
+            },
+            placeholder: {
+              label: 'Marcador de posición del campo personalizado',
+              placeholder: 'Ejemplo de marcador de posición',
+              description: 'Este texto aparecerá dentro del campo antes de la interacción',
             },
             type: {
               label: 'Tipo de campo personalizado',
@@ -376,6 +389,7 @@ const en = {
             options: {
               label: 'Opciones para la entrada de selección',
               description: 'Proporciona opciones separadas por ";"',
+              requiredError: 'Se requiere al menos una opción',
             },
             multi: {
               label: 'Habilitar entrada de múltiples opciones',