Enhance Form Generation Scalability with Seamless Input Value Overrides

[roryscot]

Description

Form generation in the project is powerful but lacks scalability when it comes to overriding input values through props passed from a parent component. Currently, overrides can be specified as props, but they are not seamlessly integrated into the form's state management, validation, or submission processes. This limitation necessitates manual adjustments to the generated form components, which introduces redundancy and risks overwriting logic across different iterations of form generation.

Current Behavior

The current implementation allows for overriding input values via props in the following manner:

// ParentComponent.tsx

import { v4 } from 'uuid';
import ComponentCreateForm from '...';

const uuid = v4();
...
<ComponentCreateForm
  overrides={{
    uuid: {
      value: uuid,
      display: "none",
      disabled: true,
    },
  }}
/>

However, the overrides specified here are not seamlessly integrated into the form's state (initialValues) that drives validation and submission.

Expected Behavior

To enhance scalability and maintainability, the form generation process should allow overriding of default input values through props that seamlessly integrate into the form's state management, validation, and submission processes. This would eliminate the need for manual editing of the generated form components and ensure that custom logic can be managed outside of the form generation process.

Proposed Solution

Introduce a mechanism to pass override props that serve as default values for the form's modelFields or initialValues. This approach would enable most of the custom logic to be handled outside of the form component, allowing generated forms to be more versatile and out-of-the-box usable.

Additional Context

This improvement would significantly enhance the flexibility and scalability of form generation within the project, aligning it with best practices for component reusability and customization. It would also reduce the risk of inadvertently overwriting form logic during subsequent iterations of form generation.

[roryscot]

Potential Enhancement Suggestion:

I've identified a point in the code where the overrides parameter could be integrated into the function signature to streamline input value overrides directly within the form generation process. This adjustment could eliminate the need for manual edits to the generated form, enhancing maintainability and reducing redundancy in our workflow.

Link to the code snippet: form-state.ts#L185

...
export const getInitialValues = (
  fieldConfigs: Record<string, FieldConfigMetadata>,
  component: StudioForm,
  overriddenInitialValues: ...
...

This change would enable the form to directly utilize overridden values from props, ensuring they are properly integrated into form state, validation, and submission processes.

[roryscot]

Closes aws-amplify/amplify-backend#1760

[cwoolum]

Hey @roryscot , thanks for reaching out and providing the PR! Let me talk to the team about this issue.