feat(ui) Add drag and drop functionality to modules on home page #14100

chriscollins3456 · 2025-07-15T22:29:46Z

This PR adds the ability to drag and drop modules between rows, within rows, and to new rows. The functionality utilizes a well known library that's already being used in our SaaS product, so it is still consistent.

Leverage the existing page module context in order to moveModule and save the state of the template and save the correct template on the backend as well. This works with the same logic for updating templates as is with other edits to modules like adding or removing them.

There's a good amount of refactoring here to factor in the drag and drop context and logic. It's pretty complicated stuff so I tried to modularize it and break it down into readable functions as much as possible.

Note: a huge part of the diff is yarn lock changes and tests

Screen.Recording.2025-07-16.at.7.09.37.PM.1.mov

codecov · 2025-07-15T22:47:47Z

Bundle Report

Changes will increase total bundle size by 49.53kB (0.22%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
datahub-react-web-esm	22.23MB	49.53kB (0.22%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: datahub-react-web-esm

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`assets/index-*.js`	49.53kB	18.59MB	0.27%

Files in assets/index-*.js:

./src/app/homeV3/templateRow/components/ModuleDropZone.tsx → Total Size: 828 bytes
./src/app/homeV3/context/hooks/useModuleOperations.ts → Total Size: 8.79kB
./src/app/homeV3/context/hooks/utils/moduleOperationsUtils.ts → Total Size: 2.42kB
./src/app/homeV3/modules/assetCollection/AssetCollectionModal.tsx → Total Size: 1.72kB
./src/app/homeV3/module/components/LargeModule.tsx → Total Size: 2.65kB
./src/app/homeV3/template/components/NewRowDropZone.tsx → Total Size: 700 bytes
./src/app/homeV3/templateRow/components/RowLayout.tsx → Total Size: 1.39kB
./src/app/homeV3/context/PageTemplateContext.tsx → Total Size: 1.81kB
./src/app/homeV3/template/components/DragAndDropProvider.tsx → Total Size: 931 bytes
./src/app/homeV3/template/Template.tsx → Total Size: 1.14kB
./src/app/homeV3/template/components/TemplateGrid.tsx → Total Size: 1.0kB
./src/app/homeV3/templateRow/TemplateRow.tsx → Total Size: 365 bytes
./src/app/homeV3/templateRow/hooks/useDragRowContext.ts → Total Size: 264 bytes
./src/app/homeV3/templateRow/hooks/useTemplateRowLogic.ts → Total Size: 879 bytes
./src/app/homeV3/module/Module.tsx → Total Size: 657 bytes
./src/app/homeV3/module/components/ModuleContainer.tsx → Total Size: 669 bytes
./src/app/homeV3/context/hooks/useDragAndDrop.ts → Total Size: 1.56kB

alwaysmeticulous · 2025-07-15T23:00:48Z

✅ Meticulous spotted 0 visual differences across 1589 screens tested: view results.

Meticulous evaluated ~9 hours of user flows against your PR.

_{Expected differences? Click here. Last updated for commit eb9915c. This comment will update as new commits are pushed.}

codecov · 2025-07-16T20:36:48Z

Codecov Report

Attention: Patch coverage is 73.78436% with 124 lines in your changes missing coverage. Please review.

✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...rc/app/homeV3/context/hooks/useModuleOperations.ts	75.25%	24 Missing ⚠️
...rc/app/homeV3/templateRow/components/RowLayout.tsx	36.11%	23 Missing ⚠️
...rc/app/homeV3/template/components/TemplateGrid.tsx	15.38%	22 Missing ⚠️
...p/homeV3/templateRow/components/ModuleDropZone.tsx	28.00%	18 Missing ⚠️
.../app/homeV3/template/components/NewRowDropZone.tsx	38.88%	11 Missing ⚠️
...homeV3/template/components/DragAndDropProvider.tsx	47.36%	10 Missing ⚠️
...b-react/src/app/homeV3/templateRow/TemplateRow.tsx	33.33%	8 Missing ⚠️
...hub-web-react/src/app/homeV3/template/Template.tsx	62.50%	3 Missing ⚠️
datahub-web-react/src/app/homeV3/module/Module.tsx	60.00%	2 Missing ⚠️
...c/app/homeV3/module/components/ModuleContainer.tsx	60.00%	2 Missing ⚠️
... and 1 more

❌ Your patch status has failed because the patch coverage (73.78%) is below the target coverage (75.00%). You can increase the patch coverage or adjust the target coverage.

📢 Thoughts on this report? Let us know!

jayacryl

beauty

jayacryl · 2025-07-17T19:45:58Z

datahub-web-react/src/app/homeV3/context/hooks/useModuleOperations.ts

+            if (!template) return null;
+
+            const { rowIndex: toRowIndex } = toPosition;
+            if (toRowIndex === undefined) {


when would this happen?

jayacryl · 2025-07-17T19:48:56Z

datahub-web-react/src/app/homeV3/module/components/LargeModule.tsx

@@ -85,3 +107,6 @@ export default function LargeModule({ children, module, loading, onClickViewAll
        </ModuleContainer>
    );
 }
+
+// Export memoized component to prevent unnecessary re-renders
+export default memo(LargeModule);


jayacryl · 2025-07-17T19:50:25Z

datahub-web-react/src/app/homeV3/template/components/NewRowDropZone.tsx

+    insertNewRow?: boolean;
+}
+
+function NewRowDropZoneComponent({ rowIndex, insertNewRow = false }: Props) {


can guess for this one, but comments for many of these sub components describing where & how they're used / expected behavior could be helpful longer term

jayacryl · 2025-07-17T19:50:35Z

datahub-web-react/src/app/homeV3/template/components/TemplateGrid.tsx

+import TemplateRow from '@app/homeV3/templateRow/TemplateRow';
+import { WrappedRow } from '@app/homeV3/templateRow/types';
+
+// import NewRowDropZone from './NewRowDropZone';


jayacryl · 2025-07-17T19:51:30Z

datahub-web-react/src/app/homeV3/templateRow/hooks/useDragRowContext.ts

+    const { active } = useDndContext();
+
+    return useMemo(() => {
+        const activeDragData = active?.data?.current as { position?: ModulePositionInput } | undefined;


is there a way to avoid cast here?

…ows of 3. looks ugly though

…ahub-project#14100)

github-actions bot added the product PR or Issue related to the DataHub UI/UX label Jul 15, 2025

github-actions bot deployed to datahub-project-web-react (Preview) July 15, 2025 22:39 View deployment

datahub-cyborg bot added the needs-review Label for PRs that need review from a maintainer. label Jul 15, 2025

vercel bot deployed to Preview July 15, 2025 22:44 View deployment

chriscollins3456 force-pushed the cc--ch-555-remove-modules branch from 5d047ae to 5988dd8 Compare July 16, 2025 15:05

chriscollins3456 force-pushed the cc--ch-535-drag-and-drop branch from be15f62 to 0ef8415 Compare July 16, 2025 20:12

github-actions bot deployed to datahub-project-web-react (Preview) July 16, 2025 20:17 View deployment

vercel bot deployed to Preview July 16, 2025 20:28 View deployment

chriscollins3456 changed the title ~~[WIP] Add drag and drop functionality to modules on home page~~ feat(ui) Add drag and drop functionality to modules on home page Jul 16, 2025

github-actions bot deployed to datahub-project-web-react (Preview) July 16, 2025 23:08 View deployment

vercel bot deployed to Preview July 16, 2025 23:19 View deployment

Base automatically changed from cc--ch-555-remove-modules to master July 17, 2025 13:34

jayacryl approved these changes Jul 17, 2025

View reviewed changes

datahub-cyborg bot added pending-submitter-merge and removed needs-review Label for PRs that need review from a maintainer. labels Jul 17, 2025

chriscollins3456 added 11 commits July 17, 2025 17:20

WIP - drag and drop functionally works well, except for rearranging r…

1c352a5

…ows of 3. looks ugly though

logic for rearranging within a row

4e58abe

make drag and drop more performant

651dbf1

update styling and functionality looks good, just a little laggy

64088bf

dragging/inserting between rows

4213e53

fix bug with not clicking menu

ede7be1

first round of refactoring the existing code

4908e7a

refactor TemplateRow

89657dc

add tests and lint everything except for the test files

0aba03e

update tests and final fixes for drag and drop

2669758

fix linting and tests after rebase

eb9915c

chriscollins3456 force-pushed the cc--ch-535-drag-and-drop branch from 2ca1df7 to eb9915c Compare July 17, 2025 22:14

github-actions bot deployed to datahub-project-web-react (Preview) July 17, 2025 22:19 View deployment

vercel bot deployed to Preview July 17, 2025 22:30 View deployment

chriscollins3456 merged commit 784c005 into master Jul 18, 2025
32 of 34 checks passed

chriscollins3456 deleted the cc--ch-535-drag-and-drop branch July 18, 2025 13:51

kartikey-visa pushed a commit to kartikey-visa/datahub that referenced this pull request Jul 23, 2025

feat(ui) Add drag and drop functionality to modules on home page (dat…

dd2aa11

…ahub-project#14100)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(ui) Add drag and drop functionality to modules on home page #14100

feat(ui) Add drag and drop functionality to modules on home page #14100

Uh oh!

chriscollins3456 commented Jul 15, 2025 •

edited

Loading

Uh oh!

codecov bot commented Jul 15, 2025 •

edited

Loading

Assets Changed:

Uh oh!

alwaysmeticulous bot commented Jul 15, 2025 •

edited

Loading

Uh oh!

codecov bot commented Jul 16, 2025 •

edited

Loading

Uh oh!

jayacryl left a comment

Uh oh!

jayacryl Jul 17, 2025

Uh oh!

jayacryl Jul 17, 2025

Uh oh!

jayacryl Jul 17, 2025

Uh oh!

jayacryl Jul 17, 2025

Uh oh!

jayacryl Jul 17, 2025

Uh oh!

Uh oh!

Uh oh!

feat(ui) Add drag and drop functionality to modules on home page #14100

feat(ui) Add drag and drop functionality to modules on home page #14100

Uh oh!

Conversation

chriscollins3456 commented Jul 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Jul 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Uh oh!

alwaysmeticulous bot commented Jul 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

jayacryl left a comment

Choose a reason for hiding this comment

Uh oh!

jayacryl Jul 17, 2025

Choose a reason for hiding this comment

Uh oh!

jayacryl Jul 17, 2025

Choose a reason for hiding this comment

Uh oh!

jayacryl Jul 17, 2025

Choose a reason for hiding this comment

Uh oh!

jayacryl Jul 17, 2025

Choose a reason for hiding this comment

Uh oh!

jayacryl Jul 17, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

chriscollins3456 commented Jul 15, 2025 •

edited

Loading

codecov bot commented Jul 15, 2025 •

edited

Loading

alwaysmeticulous bot commented Jul 15, 2025 •

edited

Loading

codecov bot commented Jul 16, 2025 •

edited

Loading