feat(ui) Add framework for template/module state and editing templates/modules to UI #14029

chriscollins3456 · 2025-07-10T15:39:18Z

This PR introduces a comprehensive framework for managing customizable page templates and modules in the DataHub UI, enabling users to dynamically add and organize widgets on their home pages.

Key Features

🏗️ Template & Module Framework

Page Template Context: New React context managing both personal and global templates
Module Operations: Centralized system for adding existing modules and creating new ones
Dynamic Module Menu: Updated useAddModuleMenu hook with context-based module addition

🎯 Built-in Modules

Default Modules: "Your Assets" and "Domains" modules ready for immediate use
Admin Module Support: Framework for admin-created modules with proper fragment structure
Position Control: Add modules to specific row locations (left/right sides)

🧪 Testing & Quality

Comprehensive Tests: high coverage with proper context mocking
Type Safety: Full TypeScript support with PageModuleFragment and AddModuleHandlerInput types
Updated Test Suite: All existing tests updated to match new implementation

UI/UX Impact

Users can now customize their home page by adding relevant modules through a clean, organized dropdown menu. This establishes the foundation for a fully personalized DataHub experience.

Technical Notes

Context-based state management for template editing
Proper handling of module positioning and persistence
Framework ready for future Quick Link and Documentation modules

NOTE: the diff is deceptively high with at least 70% being tests here

… - working correctly with minimal testing

alwaysmeticulous · 2025-07-10T15:44:56Z

🔴 Meticulous spotted visual differences in 18 of 1162 screens tested: view and approve differences detected.

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

_{Last updated for commit cd0b4e5. This comment will update as new commits are pushed.}

chriscollins3456 · 2025-07-10T15:46:01Z

datahub-web-react/src/app/homeV3/HomePageContent.tsx

+    const personalTemplate = user?.settings?.homePage?.pageTemplate || null;
+    const globalTemplate = settings.globalHomePageSettings?.defaultTemplate || null;
+
+    if (!userLoaded || !globalSettingsLoaded) return null;


we'll probably want to add some loading state here later

chriscollins3456 · 2025-07-10T15:56:25Z

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

+        const quickLink = {
+            title: 'Quick Link',
+            key: 'quick-link',
+            label: <MenuItem description="Choose links that are important" title="Quick Link" icon="LinkSimple" />,
+            onClick: () => {
+                // TODO: open up modal to add a quick link
+            },
+        };



decided to hardcode these here so we can have easy onClick handlers here instead of in a constants class. open to changing this up though

chriscollins3456 · 2025-07-10T16:00:18Z

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

+            } else {
+                // Add to existing row
+                const { rowIndex } = position;
+                if (rowIndex >= newRows.length) {
+                    // Create new row if index is out of bounds
+                    newRows.push({
+                        modules: [module],
+                    });
+                } else {
+                    const row = { ...newRows[rowIndex] };
+                    const newModules = [...(row.modules || [])];
+
+                    if (position.rowSide === 'left') {
+                        newModules.unshift(module);
+                    } else {
+                        newModules.push(module);
+                    }
+
+                    row.modules = newModules;
+                    newRows[rowIndex] = row;
+                }


we can update the logic in here for adding a 4th module to the next row.

once we add more logic it probably makes sense to break all this into a helper utility function with even more tests on it

codecov · 2025-07-10T16:15:21Z

Bundle Report

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

Detailed changes

Bundle name	Size	Change
datahub-react-web-esm	21.99MB	3.82kB (0.02%) ⬆️

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`	3.82kB	18.36MB	0.02%

Files in assets/index-*.js:

./src/app/homeV3/template/components/AddModuleButton.tsx → Total Size: 1.98kB
./src/app/homeV3/template/Template.tsx → Total Size: 1.05kB
./src/app/homeV3/template/components/addModuleMenu/useAddModuleMenu.tsx → Total Size: 3.57kB
./src/app/homeV3/modules/hooks/useModulesAvailableToAdd.ts → Total Size: 1.06kB
./src/app/homeV3/templateRow/TemplateRow.tsx → Total Size: 635 bytes
./src/app/homeV3/context/PageTemplateContext.tsx → Total Size: 1.54kB
./src/app/homeV3/context/hooks/useModuleOperations.ts → Total Size: 2.54kB
./src/app/homeV3/templateRow/utils.ts → Total Size: 474 bytes
./src/app/homeV3/context/hooks/useTemplateOperations.ts → Total Size: 2.47kB
./src/app/homeV3/modules/utils.ts → Total Size: 606 bytes
./src/app/homeV3/context/hooks/useTemplateState.ts → Total Size: 909 bytes
./src/app/homeV3/HomePageContent.tsx → Total Size: 856 bytes

codecov · 2025-07-10T17:03:29Z

❌ 2 Tests Failed:

Tests completed	Failed	Passed	Skipped
3088	2	3086	41

View the full list of 3 ❄️ flaky tests

search cypress/e2e/search/searchFilters.js::cypress/e2e/search/searchFilters.js

Flake rate in main: 20.90% (Passed 53 times, Failed 14 times)

Stack Traces | 16.6s run time

2025-07-14T19:57:09.619Z
Timed out retrying after 10000ms: Expected to find element: `[data-testid=update-filters`, but never found it.

glossary cypress/e2e/glossaryV2/v2_glossary.js::cypress/e2e/glossaryV2/v2_glossary.js

Flake rate in main: 66.67% (Passed 8 times, Failed 16 times)

Stack Traces | 63.3s run time

2025-07-14T19:54:13.659Z
Timed out retrying after 10000ms: Expected to find content: 'CypressGlossaryTerm' but never did.

glossary sidebar navigation test cypress/e2e/glossaryV2/v2_glossary_navigation.js::cypress/e2e/glossaryV2/v2_glossary_navigation.js

Flake rate in main: 88.00% (Passed 3 times, Failed 22 times)

Stack Traces | 105s run time

2025-07-14T19:55:59.991Z
Timed out retrying after 10000ms: Expected to find content: 'CypressGlosssaryNavigationTerm' but never did.

To view more test analytics, go to the Test Analytics Dashboard
_{📋 Got 3 mins? Take this short survey to help us improve Test Analytics.}

v-tarasevich-blitz-brain · 2025-07-11T10:38:51Z

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

+                name,
+                type,
+                scope,
+                visibility: {


I see that we don't have visibility attribute in UpsertPageModuleInput

v-tarasevich-blitz-brain · 2025-07-15T16:04:23Z

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

+import { DataHubPageModuleType, EntityType, PageModuleScope } from '@types';
+
+// Input types for the methods
+export interface CreateModuleInput {


I see that we already have CreateModuleInput and AddModuleInput in context/types.ts

yes i actually fix this in a followup PR that is currently blocked from being put up by a few things. i have such a weave of PRs right now, is it cool if I just handle these duplicate types in a followup once that PR comes into plat?

v-tarasevich-blitz-brain · 2025-07-15T16:19:43Z

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

    className?: string;
-    originRowIndex?: number;


It's edge case but if we get more that 3 modules in a single row we will wrap them during the rendering and rowIndex can be increased because of it. So in this case we could add module in the wrong place. Maybe it's possible to preprocess PageTemplateFragment (global and personal) to get rows wrapped in the state before rendering instead of wrapping them during rendering. What do you think about?

hmm is it okay if we handle that in a separate ticket? this is such a monster PR and so many things depend on this getting in that I'd like to handle anything like edge cases in followups if possible

chriscollins3456 added 4 commits July 10, 2025 11:03

WIP - ability to add modules to rows for our default modules at least…

8dd7e42

… - working correctly with minimal testing

after first round of cleaning up the code

68676dd

add tests, fix linting, format

778285d

fix up tests and linting

913260d

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

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

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

vercel bot deployed to Preview July 10, 2025 15:53 View deployment

last second tweaks

505b0c8

chriscollins3456 commented Jul 10, 2025

View reviewed changes

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

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

format gms graphql enging

2cd3ede

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

vercel bot deployed to Preview July 10, 2025 16:56 View deployment

v-tarasevich-blitz-brain reviewed Jul 11, 2025

View reviewed changes

datahub-cyborg bot added pending-submitter-response Issue/request has been reviewed but requires a response from the submitter and removed needs-review Label for PRs that need review from a maintainer. labels Jul 11, 2025

merge in master, resolve conflicts

4ceb568

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

vercel bot deployed to Preview July 13, 2025 20:32 View deployment

chriscollins3456 added 2 commits July 14, 2025 15:19

Merge branch 'master' into cc--ch-530-edit-template-in-ui

cbe946f

fix linting

cd0b4e5

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

datahub-cyborg bot added needs-review Label for PRs that need review from a maintainer. and removed pending-submitter-response Issue/request has been reviewed but requires a response from the submitter labels Jul 14, 2025

vercel bot deployed to Preview July 14, 2025 19:52 View deployment

v-tarasevich-blitz-brain reviewed Jul 15, 2025

View reviewed changes

datahub-cyborg bot added pending-submitter-response Issue/request has been reviewed but requires a response from the submitter and removed needs-review Label for PRs that need review from a maintainer. labels Jul 15, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(ui) Add framework for template/module state and editing templates/modules to UI #14029

feat(ui) Add framework for template/module state and editing templates/modules to UI #14029

chriscollins3456 commented Jul 10, 2025 •

edited

Loading

Uh oh!

alwaysmeticulous bot commented Jul 10, 2025 •

edited

Loading

Uh oh!

chriscollins3456 Jul 10, 2025

Uh oh!

chriscollins3456 Jul 10, 2025

Uh oh!

chriscollins3456 Jul 10, 2025

Uh oh!

codecov bot commented Jul 10, 2025 •

edited

Loading

Assets Changed:

Uh oh!

codecov bot commented Jul 10, 2025 •

edited

Loading

Uh oh!

v-tarasevich-blitz-brain Jul 11, 2025

Uh oh!

v-tarasevich-blitz-brain Jul 15, 2025

Uh oh!

chriscollins3456 Jul 15, 2025

Uh oh!

v-tarasevich-blitz-brain Jul 15, 2025

Uh oh!

chriscollins3456 Jul 15, 2025

Uh oh!

Uh oh!

feat(ui) Add framework for template/module state and editing templates/modules to UI #14029

Are you sure you want to change the base?

feat(ui) Add framework for template/module state and editing templates/modules to UI #14029

Conversation

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Jul 10, 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!

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

Uh oh!

❌ 2 Tests Failed:

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

chriscollins3456 commented Jul 10, 2025 •

edited

Loading

alwaysmeticulous bot commented Jul 10, 2025 •

edited

Loading

codecov bot commented Jul 10, 2025 •

edited

Loading

codecov bot commented Jul 10, 2025 •

edited

Loading