Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 14 commits into from
May 16, 2025

Conversation

Dzuming
Copy link
Contributor

@Dzuming Dzuming commented May 9, 2025

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

Copy link
Contributor

github-actions bot commented May 9, 2025

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

Dzuming and others added 7 commits May 14, 2025 14:43
…ters-loading

# Conflicts:
#	designer/client/src/actions/nk/nodeDetails.ts
#	designer/client/src/components/graph/node-modal/parametersList.tsx
…amic-parameters-loading

# Conflicts:
#	designer/client/package-lock.json
#	designer/client/src/components/graph/node-modal/NodeTypeDetailsContent.tsx
#	designer/client/src/components/graph/node-modal/node/NodeDetails.tsx
#	designer/submodules/package-lock.json
@Dzuming Dzuming requested a review from Copilot May 16, 2025 11:43
Copy link
Contributor

@Copilot Copilot AI left a comment

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 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}>

@Dzuming Dzuming requested a review from Copilot May 16, 2025 11:53
Copy link
Contributor

@Copilot Copilot AI left a comment

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 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;

Dzuming and others added 4 commits May 16, 2025 14:26
@Dzuming Dzuming merged commit dc19e87 into staging May 16, 2025
14 checks passed
@Dzuming Dzuming deleted the NU-2160-show-loader-during-dynamic-parameters-loading branch May 16, 2025 13:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
client client main fe ui
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants