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

datahub-graphql-core/src/main/java/com/linkedin/datahub/graphql/GmsGraphQLEngine.java

@@ -1952,6 +1952,15 @@ private void configureCorpUserResolvers(final RuntimeWiring.Builder builder) {
                 new LoadableTypeResolver<>(
                     corpUserType,
                     (env) -> ((CorpUserInfo) env.getSource()).getManager().getUrn())));
+    builder.type(
+        "CorpUserHomePageSettings",
+        typeWiring ->
+            typeWiring.dataFetcher(
+                "pageTemplate",
+                new LoadableTypeResolver<>(
+                    dataHubPageTemplateType,
+                    (env) ->
+                        ((CorpUserHomePageSettings) env.getSource()).getPageTemplate().getUrn())));
     builder.type(
         "CorpUserEditableProperties",
         typeWiring ->

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

@@ -3,24 +3,30 @@ import React from 'react';
 import { useGlobalSettings } from '@app/context/GlobalSettingsContext';
 import { useUserContext } from '@app/context/useUserContext';
 import { Announcements } from '@app/homeV3/announcements/Announcements';
+import { PageTemplateProvider } from '@app/homeV3/context/PageTemplateContext';
 import { CenteredContainer, ContentContainer, ContentDiv } from '@app/homeV3/styledComponents';
 import Template from '@app/homeV3/template/Template';
 
 const HomePageContent = () => {
-    const { settings } = useGlobalSettings();
-    const { user } = useUserContext();
+    const { settings, loaded: globalSettingsLoaded } = useGlobalSettings();
+    const { user, loaded: userLoaded } = useUserContext();
 
-    const template = user?.settings?.homePage?.pageTemplate || settings.globalHomePageSettings?.defaultTemplate;
+    const personalTemplate = user?.settings?.homePage?.pageTemplate || null;
+    const globalTemplate = settings.globalHomePageSettings?.defaultTemplate || null;
+
+    if (!userLoaded || !globalSettingsLoaded) return null;
 
     return (
-        <ContentContainer>
-            <CenteredContainer>
-                <ContentDiv>
-                    <Announcements />
-                    <Template template={template} />
-                </ContentDiv>
-            </CenteredContainer>
-        </ContentContainer>
+        <PageTemplateProvider personalTemplate={personalTemplate} globalTemplate={globalTemplate}>
+            <ContentContainer>
+                <CenteredContainer>
+                    <ContentDiv>
+                        <Announcements />
+                        <Template />
+                    </ContentDiv>
+                </CenteredContainer>
+            </ContentContainer>
+        </PageTemplateProvider>
     );
 };
 

datahub-web-react/src/app/homeV3/context/PageTemplateContext.tsx

@@ -0,0 +1,86 @@
+import React, { ReactNode, createContext, useContext, useMemo } from 'react';
+
+import { useModuleOperations } from '@app/homeV3/context/hooks/useModuleOperations';
+import { useTemplateOperations } from '@app/homeV3/context/hooks/useTemplateOperations';
+import { useTemplateState } from '@app/homeV3/context/hooks/useTemplateState';
+import { PageTemplateContextState } from '@app/homeV3/context/types';
+
+import { PageTemplateFragment } from '@graphql/template.generated';
+
+const PageTemplateContext = createContext<PageTemplateContextState | undefined>(undefined);
+
+export const PageTemplateProvider = ({
+    personalTemplate: initialPersonalTemplate,
+    globalTemplate: initialGlobalTemplate,
+    children,
+}: {
+    personalTemplate: PageTemplateFragment | null | undefined;
+    globalTemplate: PageTemplateFragment | null | undefined;
+    children: ReactNode;
+}) => {
+    // Template state management
+    const {
+        personalTemplate,
+        globalTemplate,
+        template,
+        isEditingGlobalTemplate,
+        setIsEditingGlobalTemplate,
+        setPersonalTemplate,
+        setGlobalTemplate,
+        setTemplate,
+    } = useTemplateState(initialPersonalTemplate, initialGlobalTemplate);
+
+    // Template operations
+    const { updateTemplateWithModule, upsertTemplate } = useTemplateOperations();
+
+    // Module operations
+    const { addModule, createModule } = useModuleOperations(
+        isEditingGlobalTemplate,
+        personalTemplate,
+        globalTemplate,
+        setPersonalTemplate,
+        setGlobalTemplate,
+        updateTemplateWithModule,
+        upsertTemplate,
+    );
+
+    const value = useMemo(
+        () => ({
+            personalTemplate,
+            globalTemplate,
+            template,
+            isEditingGlobalTemplate,
+            setIsEditingGlobalTemplate,
+            setPersonalTemplate,
+            setGlobalTemplate,
+            setTemplate,
+            addModule,
+            createModule,
+        }),
+        [
+            personalTemplate,
+            globalTemplate,
+            template,
+            isEditingGlobalTemplate,
+            setIsEditingGlobalTemplate,
+            setPersonalTemplate,
+            setGlobalTemplate,
+            setTemplate,
+            addModule,
+            createModule,
+        ],
+    );
+
+    return <PageTemplateContext.Provider value={value}>{children}</PageTemplateContext.Provider>;
+};
+
+export function usePageTemplateContext() {
+    const context = useContext(PageTemplateContext);
+    if (!context) {
+        throw new Error('usePageTemplateContext must be used within a PageTemplateProvider');
+    }
+    return context;
+}
+
+// Re-export types for convenience
+export type { CreateModuleInput, AddModuleInput } from './types';