Skip to content

fix(additional-links): show multilingual name fallback and literal badge - #2302

Open
AbhishekPAnil wants to merge 1 commit into
developfrom
bugfix/issue-1874
Open

fix(additional-links): show multilingual name fallback and literal badge#2302
AbhishekPAnil wants to merge 1 commit into
developfrom
bugfix/issue-1874

Conversation

@AbhishekPAnil

Copy link
Copy Markdown
Contributor

This pull request improves the handling of multi-lingual additional links, especially when used inside dynamic form lists. The changes ensure that language fallback values are correctly injected, initial values are handled robustly, and form field names are managed accurately both for rendering and for imperative form API calls. These updates address subtle bugs in fallback value injection and ensure consistency in how multi-lingual fields are managed in both editable and read-only contexts.

Multi-lingual Additional Links Improvements:

  • Added logic to compute and pass absolute field names (namePrefix) to multi-lingual form components, ensuring that imperative form API calls (like getFieldValue, setFieldValue, and isFieldTouched) work correctly inside Form.List contexts. This affects CreateMultiLingualFormItems, MultilingualInput, and useChildrenWithLanguageFallback. [1] [2] [3] [4] [5] [6]

  • Improved fallback value injection for multi-lingual fields inside Form.List by imperatively setting fallback values only when the field is empty and untouched, ensuring that users see the correct default/fallback values even if initial values are loaded after mount.

  • Refactored how field names and paths are constructed and used throughout the multi-lingual form logic, distinguishing between relative and absolute paths for rendering and imperative API calls, and ensuring accurate field state tracking (dirty, touched, etc.). [1] [2] [3]

Read-only Page Adjustments:

  • Updated the fieldName prop for FallbackInjectorForReadOnlyPages in both OrganizationsReadOnly and PersonReadOnly to be unique per link, preventing key collisions and ensuring correct fallback injection in read-only views. [1] [2]

Payload Handling:

  • Enhanced the additional links payload handler to filter out unedited fallback values for the name field, using the correct field naming scheme and initial values, ensuring only user-edited values are submitted. [1] [2]

Initial Data Handling:

  • Ensured that only non-empty initial data for link names is used when populating the form, preventing unnecessary or empty language fields from being rendered.

@aws-amplify-ca-central-1

Copy link
Copy Markdown

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-2302.dla06mbe0wyl7.amplifyapp.com

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR improves multilingual “additional links” handling across editable forms (including Form.List) and read-only views by fixing how fallback values and field paths are computed and applied, and by filtering unedited fallback literals from outgoing payloads.

Changes:

  • Added “absolute name path” support (namePrefix) for imperative Ant Design form APIs within Form.List contexts.
  • Improved fallback value injection so empty/untouched list fields receive the correct fallback after mount/initialization.
  • Filtered out unedited fallback literal values for additional-links name during payload construction and avoided read-only fallback collisions by making fieldName unique per link.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
src/utils/formPayloadHandler.js Filters unedited fallback literal values from additional-links name before submitting payload.
src/pages/Dashboard/PersonReadOnly/PersonReadOnly.jsx Makes additional-link read-only fallback fieldName unique per row to prevent collisions.
src/pages/Dashboard/OrganizationsReadOnly/OrganizationsReadOnly.jsx Makes additional-link read-only fallback fieldName unique per row to prevent collisions.
src/layout/CreateMultiLingualFormItems/CreateMultiLingualFormItems.jsx Separates relative vs absolute field paths; uses absolute paths for imperative calls and watchers; forwards namePrefix.
src/hooks/useChildrenWithLanguageFallback.js Adds absolute-path handling for list contexts and injects fallback values imperatively for list items.
src/components/MultilingualInput/MultilingualInput.jsx Ensures label/fallback detection reads the correct absolute field value in Form.List contexts via namePrefix.
src/components/AdditonalLinks/AdditionalLinks.jsx Passes namePrefix and filters initial multilingual name data to non-empty values for more robust initialization/rendering.
Suppressed comments (2)

src/hooks/useChildrenWithLanguageFallback.js:101

  • This effect updates redux activeFallbackFieldsInfo using combinedName, calendarContentLanguage, isFieldsDirty, and the previous activeFallbackFieldsInfo, but only re-runs when fallbackStatus changes. That can leave the store out of sync if any of those referenced values change without a fallbackStatus change.
      // eslint-disable-next-line no-unused-vars
      const { [combinedName]: _, ...rest } = activeFallbackFieldsInfo;
      dispatch(setActiveFallbackFieldsInfo({ data: rest, method: 'remove' }));
    }
  }, [fallbackStatus]);

src/hooks/useChildrenWithLanguageFallback.js:120

  • The imperative fallback injection effect uses children, form, namePrefix, and toAbsolutePath, but its dependency array only includes fallbackStatus. If children/namePrefix/form changes (common when Form.List items are added/removed), the effect may not inject fallback values for the new fields.
      if ((currentValue === undefined || currentValue === '') && !form.isFieldTouched(absolutePath)) {
        form.setFieldValue(absolutePath, fallbackValue);
      }
    });
  }, [fallbackStatus]);

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

form.setFieldValue(absolutePath(lanKey), value);
}
});
}, [data]);
Comment on lines 58 to +63
children?.map((child) => {
const name = child?.props?.name;
if (Array.isArray(name)) {
const langKey = name?.length > 1 && name[1];
const langKey = name?.length > 1 && name[name.length - 1];
if (langKey) {
currentActiveDataInFormFields[langKey] = form.getFieldValue(name);
currentActiveDataInFormFields[langKey] = form.getFieldValue(toAbsolutePath(name));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Elements inside Additional links Form list not displaying language literals.

2 participants