NU-2160-show-loader-during-dynamic-parameters-loading

[Dzuming]

Describe your changes

Screen.Recording.2025-05-09.at.11.30.10.mov

Checklist before merge

• Related issue ID is placed at the beginning of PR title in [brackets] (can be GH issue or Nu Jira issue)
• Code is cleaned from temporary changes and commented out lines
• Parts of the code that are not easy to understand are documented in the code
• Changes are covered by automated tests
• Showcase in dev-application.conf added to demonstrate the feature
• Documentation added or updated
• Added entry in Changelog.md describing the change from the perspective of a public distribution user
• Added MigrationGuide.md entry in the appropriate subcategory if introducing a breaking change
• Verify that PR will be squashed during merge

[github-actions]

created: #8104
⚠️ Be careful! Snapshot changes are not necessarily the cause of the error. Check the logs.

[Copilot]

Pull Request Overview

This PR implements a loader display during dynamic parameters loading, while also refactoring state management and action handling to support this new behavior.

• Added a new flag (changesCanReloadParameters) to the UIParameter type to trigger a loader during dynamic parameter updates.
• Introduced new reducer cases and actions (NODE_VALIDATION_DYNAMIC_PARAMETERS_LOADING/LOADED) to manage dynamic parameters state.
• Updated various UI components (node modals, parameters list, and action buttons) to integrate the loader and dynamic parameters behavior.

Reviewed Changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
designer/client/src/types/definition.ts	Added a new UIParameter flag for parameter reload logic.
designer/client/src/reducers/nodeDetailsState.ts	Introduced actions and state handling for dynamic parameters loading.
designer/client/src/http/HttpService.ts	Updated API response handling and action name constants.
designer/client/src/components/graph/node-modal/useNodeTypeDetailsContentLogic.tsx	Refactored node adjustment logic and integrated dynamic parameter loading controls.
designer/client/src/components/graph/node-modal/parametersListField.tsx	Enhanced parameter field component without functional change.
designer/client/src/components/graph/node-modal/parametersList.tsx	Modified to display a skeleton loader based on dynamic parameters state.
designer/client/src/components/graph/node-modal/node/useNodeState.tsx	Added autoApply handling to clear dynamic parameters loading.
designer/client/src/components/graph/node-modal/NodeGroupContent.tsx	Adjusted hook usage to work with updated node state management.
designer/client/src/components/graph/node-modal/node-action-buttons/GenerateNewEndpoint.tsx	Updated endpoint generation logic and formatting of the resulting topic.
designer/client/src/components/graph/node-modal/SourceSinkCommon.tsx	Consolidated getListFieldPath into a constant.
designer/client/src/components/graph/node-modal/NodeDetailsContent/selectors.tsx	Updated selector to use deep equality checks.
designer/client/src/actions/nk/nodeDetails.ts	Extended actions and revised the callback signature in validateNodeData.

Comments suppressed due to low confidence (1)

designer/client/src/components/graph/node-modal/parametersList.tsx:30

• [nitpick] The key is generated by concatenating multiple values; consider ensuring that these values will always produce a unique and stable key to prevent potential rendering issues.

<Fragment key={node.id + paramWithIndex.param.name + paramWithIndex.index}>

[Copilot]

Pull Request Overview

This PR implements a loader for dynamic parameter updates by introducing a new UI parameter flag, state updates, and corresponding actions to signal dynamic parameter loading. Key changes include:

• Adding a changesCanReloadParameters flag to UIParameter and handling it in the state and parameter update logic.
• Updating reducers, actions, and selectors to track dynamic parameters' loading state.
• Adjusting components (e.g., Parameter field components, node state hooks, and endpoint generation actions) to incorporate the dynamic parameters loading mechanism.

Reviewed Changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
designer/client/src/types/definition.ts	Added changesCanReloadParameters flag to the UIParameter interface.
designer/client/src/reducers/nodeDetailsState.ts	Introduced and maintained changingDynamicParameters in state with new action cases.
designer/client/src/http/HttpService.ts	Updated API response handling and action name string literals.
designer/client/src/components/graph/node-modal/useNodeTypeDetailsContentLogic.tsx	Refactored state update via a helper to extract base paths with dynamic parameters.
designer/client/src/components/graph/node-modal/parametersListField.tsx	Updated the Endpoint field rendering to include a copy-to-clipboard action using parameter editor possibleValues.
designer/client/src/components/graph/node-modal/parametersList.tsx	Modified list rendering by showing a loading skeleton based on dynamic parameter changes.
designer/client/src/components/graph/node-modal/node/useNodeState.tsx	Ensured dynamic parameter loading status is updated on state changes.
designer/client/src/components/graph/node-modal/node-action-buttons/GenerateNewEndpoint.tsx	Adjusted result checking to align with new action name string literals.
designer/client/src/components/graph/node-modal/SourceSinkCommon.tsx	Extracted getListFieldPath into a constant for consistency.
designer/client/src/components/graph/node-modal/NodeDetailsContent/selectors.tsx	Updated dynamic parameter definitions selector and added a dynamic parameter changes selector.
designer/client/src/actions/nk/nodeDetails.ts	Added new action creators and incorporated dynamic parameter loading callbacks in validation.

Comments suppressed due to low confidence (1)

designer/client/src/components/graph/node-modal/parametersListField.tsx:43

• Accessing .editors[0] without a safety check may lead to runtime errors if the 'Endpoint' parameter definition is not found. Consider adding a null/undefined check before accessing editors.

const possibleValues = parameterDefinitions.find((parameterDefinition) => parameterDefinition.name === "Endpoint").editors[0].possibleValues;