CONSOLE-5015: Replace react-dnd with PF MultipleFileUpload in topology

[logonoff]

Replace the react-dnd DropTarget/withDragDropContext HOC pattern in DroppableTopologyComponent with PatternFly's MultipleFileUpload, which wraps react-dropzone internally. This removes the dependency on react-dnd and react-dnd-html5-backend for the topology file drop zone.

DroppableTopologyComponent now wraps TopologyView in a MultipleFileUpload (with noClick/noKeyboard to prevent accidental file dialogs) when file upload extensions are available.

TopologyView no longer receives connectDropTarget, isOver, canDrop, or onDrop props. The drop overlay is always rendered but hidden via CSS, becoming visible when MultipleFileUpload applies pf-m-drag-over on drag enter (handled by existing rules in _file-input.scss).

Summary by CodeRabbit

Release Notes

• Refactor
  • Updated the file upload drag-and-drop interface in the topology view component to use a standardized upload component, improving consistency with platform design patterns and user experience.

[openshift-ci-robot]

@logonoff: This pull request references CONSOLE-5015 which is a valid jira issue.

Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the story to target the "4.22.0" version, but no target version was set.

Details

In response to this:

Replace the react-dnd DropTarget/withDragDropContext HOC pattern in DroppableTopologyComponent with PatternFly's MultipleFileUpload, which wraps react-dropzone internally. This removes the dependency on react-dnd and react-dnd-html5-backend for the topology file drop zone.

DroppableTopologyComponent now wraps TopologyView in a MultipleFileUpload (with noClick/noKeyboard to prevent accidental file dialogs) when file upload extensions are available.

TopologyView no longer receives connectDropTarget, isOver, canDrop, or onDrop props. The drop overlay is always rendered but hidden via CSS, becoming visible when MultipleFileUpload applies pf-m-drag-over on drag enter (handled by existing rules in _file-input.scss).

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[logonoff]

/label px-approved
/label docs-approved

[openshift-ci-robot]

@logonoff: This pull request references CONSOLE-5015 which is a valid jira issue.

Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the story to target the "4.22.0" version, but no target version was set.

Details

In response to this:

Replace the react-dnd DropTarget/withDragDropContext HOC pattern in DroppableTopologyComponent with PatternFly's MultipleFileUpload, which wraps react-dropzone internally. This removes the dependency on react-dnd and react-dnd-html5-backend for the topology file drop zone.

DroppableTopologyComponent now wraps TopologyView in a MultipleFileUpload (with noClick/noKeyboard to prevent accidental file dialogs) when file upload extensions are available.

TopologyView no longer receives connectDropTarget, isOver, canDrop, or onDrop props. The drop overlay is always rendered but hidden via CSS, becoming visible when MultipleFileUpload applies pf-m-drag-over on drag enter (handled by existing rules in _file-input.scss).

Summary by CodeRabbit

Release Notes

• Refactor
• Updated the file upload drag-and-drop interface in the topology view component to use a standardized upload component, improving consistency with platform design patterns and user experience.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: logonoff

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• frontend/OWNERS [logonoff]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[coderabbitai]

📝 Walkthrough

Walkthrough

The drag-and-drop implementation for file uploads in the Topology component has been refactored. The react-dnd library integration, including the DropTarget HOC wrapper and associated monitor-based logic, has been replaced with PatternFly's MultipleFileUpload component in DroppableTopologyComponent. Drop-related props (connectDropTarget, isOver, canDrop, onDrop, canDropFile) have been removed from TopologyView, simplifying the component's contract. File handling now uses the MultipleFileUpload callback mechanism instead of DnD monitor extraction. The handleFileDrop callback is memoized, and the export pattern shifted from a higher-order component to a functional component with explicit React.FC typing.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

📝 Coding Plan

• Generate coding plan for human review comments

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

CodeRabbit can generate a title for your PR based on the changes with custom instructions.

Set the reviews.auto_title_instructions setting to generate a title for your PR based on the changes in the PR with custom instructions.

[coderabbitai]

🧹 Nitpick comments (1)

frontend/packages/topology/src/components/page/DroppableTopologyComponent.tsx (1)

12-21: Add accept property to dropzoneProps to filter files at the UI layer.

Validation does occur downstream in setFileUpload (file-upload-context.ts), which checks extensions and shows a warning toast for unsupported files. However, this component has access to extensions from context but doesn't prevent invalid files from reaching onFileDrop via the dropzone. PatternFly's MultipleFileUpload supports an accept property (see droppable-edit-yaml.tsx for pattern), which would reject incompatible files at the UI layer rather than requiring downstream handling.

Build the accept object from the available extensions array and pass it in dropzoneProps to provide early feedback to users and avoid unnecessary processing.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@frontend/packages/topology/src/components/page/DroppableTopologyComponent.tsx`
around lines 12 - 21, DroppableTopologyComponent currently computes canDropFile
and handles files in handleFileDrop/setFileUpload but doesn't prevent invalid
types at the UI; construct an accept map from the extensions array (e.g.,
mapping MIME/types or extensions to their patterns) and pass that as accept
inside the dropzoneProps passed to the MultipleFileUpload component so the
dropzone rejects unsupported files before onFileDrop is invoked; update the
component where dropzoneProps are defined to include accept (use the existing
extensions and canDropFile to build the accept object and include it in the
props supplied to MultipleFileUpload).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In
`@frontend/packages/topology/src/components/page/DroppableTopologyComponent.tsx`:
- Around line 12-21: DroppableTopologyComponent currently computes canDropFile
and handles files in handleFileDrop/setFileUpload but doesn't prevent invalid
types at the UI; construct an accept map from the extensions array (e.g.,
mapping MIME/types or extensions to their patterns) and pass that as accept
inside the dropzoneProps passed to the MultipleFileUpload component so the
dropzone rejects unsupported files before onFileDrop is invoked; update the
component where dropzoneProps are defined to include accept (use the existing
extensions and canDropFile to build the accept object and include it in the
props supplied to MultipleFileUpload).

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 73b6ebab-63b0-4430-ba0a-d8765b0675d2

📥 Commits

Reviewing files that changed from the base of the PR and between 1374d1d and 3eb2163.

📒 Files selected for processing (2)

• frontend/packages/topology/src/components/page/DroppableTopologyComponent.tsx
• frontend/packages/topology/src/components/page/TopologyView.tsx

📜 Review details

🧰 Additional context used

📓 Path-based instructions (1)

**

⚙️ CodeRabbit configuration file

-Focus on major issues impacting performance, readability, maintainability and security. Avoid nitpicks and avoid verbosity.

Files:

• frontend/packages/topology/src/components/page/TopologyView.tsx
• frontend/packages/topology/src/components/page/DroppableTopologyComponent.tsx

🔇 Additional comments (1)

frontend/packages/topology/src/components/page/TopologyView.tsx (1)

330-334: Good decoupling of view from DnD wiring.

This keeps TopologyView focused on rendering while drop mechanics stay in the wrapper component, which improves maintainability.

Also applies to: 360-360

[logonoff]

note we don't use accept here because it suppresses downstream file type validation. dropzone rejections at this stage do not produce feedback for the user.

[openshift-ci]

@logonoff: The following test failed, say /retest to rerun all failed tests or /retest-required to rerun all mandatory failed tests:

Test name	Commit	Details	Required	Rerun command
ci/prow/e2e-gcp-console	3eb2163	link	true	/test e2e-gcp-console

Full PR test history. Your PR dashboard.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.