feat(ui) Update home page template editability (#14772)

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Announcements } from '@app/homeV3/announcements/Announcements';
 import EditDefaultTemplateBar from '@app/homeV3/settings/EditDefaultTemplateBar';
-import EditHomePageSettingsButton from '@app/homeV3/settings/EditHomePageSettingsButton';
+// import EditHomePageSettingsButton from '@app/homeV3/settings/EditHomePageSettingsButton';
 import { CenteredContainer, ContentContainer, ContentDiv } from '@app/homeV3/styledComponents';
 import Template from '@app/homeV3/template/Template';
 
@@ -11,7 +11,7 @@ const HomePageContent = () => {
         <ContentContainer>
             <CenteredContainer>
                 <ContentDiv>
-                    <EditHomePageSettingsButton />
+                    {/* <EditHomePageSettingsButton /> */}
                     <Announcements />
                     <Template />
                     <EditDefaultTemplateBar />

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

@@ -21,7 +21,7 @@ export const PageTemplateProvider = ({ children, templateType }: Props) => {
     const { entityData } = useEntityData();
     const editable = !!entityData?.privileges?.canManageAssetSummary;
     const isTemplateEditable = useMemo(
-        () => (templateType === PageTemplateSurfaceType.AssetSummary ? editable : true),
+        () => (templateType === PageTemplateSurfaceType.AssetSummary ? editable : false),
         [editable, templateType],
     );
     // Template state management

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

@@ -3,6 +3,7 @@ import { useDraggable } from '@dnd-kit/core';
 import React from 'react';
 import styled from 'styled-components';
 
+import { usePageTemplateContext } from '@app/homeV3/context/PageTemplateContext';
 import ModuleContainer from '@app/homeV3/module/components/ModuleContainer';
 import ModuleMenu from '@app/homeV3/module/components/ModuleMenu';
 import { ModuleProps } from '@app/homeV3/module/types';
@@ -56,6 +57,7 @@ export default function SmallModule({
     onClick,
     dataTestId,
 }: React.PropsWithChildren<Props>) {
+    const { isTemplateEditable } = usePageTemplateContext();
     const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
         id: `module-${module.urn}-${position.rowIndex}-${position.moduleIndex}`,
         data: {
@@ -68,20 +70,24 @@ export default function SmallModule({
     return (
         <StyledModuleContainer ref={setNodeRef} {...attributes} data-testId={dataTestId}>
             <ContainerWithHover>
-                <DragIcon
-                    {...listeners}
-                    size="lg"
-                    color="gray"
-                    icon="DotsSixVertical"
-                    source="phosphor"
-                    isDragging={isDragging}
-                />
+                {isTemplateEditable && (
+                    <DragIcon
+                        {...listeners}
+                        size="lg"
+                        color="gray"
+                        icon="DotsSixVertical"
+                        source="phosphor"
+                        isDragging={isDragging}
+                    />
+                )}
                 <Content $clickable={!!onClick} onClick={onClick}>
                     {children}
                 </Content>
-                <FloatingRightHeaderSection>
-                    <ModuleMenu module={module} position={position} />
-                </FloatingRightHeaderSection>
+                {isTemplateEditable && (
+                    <FloatingRightHeaderSection>
+                        <ModuleMenu module={module} position={position} />
+                    </FloatingRightHeaderSection>
+                )}
             </ContainerWithHover>
         </StyledModuleContainer>
     );

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

@@ -2,12 +2,15 @@ import { Button, Dropdown, Icon, colors } from '@components';
 import React, { useMemo, useState } from 'react';
 import styled from 'styled-components';
 
+import { usePageTemplateContext } from '@app/homeV3/context/PageTemplateContext';
 import useAddModuleMenu from '@app/homeV3/template/components/addModuleMenu/useAddModuleMenu';
 import { ModulePositionInput, RowSide } from '@app/homeV3/template/types';
 
 type AddModuleButtonOrientation = 'vertical' | 'horizontal';
 
-const Wrapper = styled.div``;
+const Wrapper = styled.div<{ $isHidden: boolean }>`
+    ${({ $isHidden }) => $isHidden && `visibility: hidden;`}
+`;
 
 const StyledDropdownContainer = styled.div`
     max-width: 335px;
@@ -59,6 +62,7 @@ interface Props {
 }
 
 export default function AddModuleButton({ orientation, className, rowIndex, rowSide }: Props) {
+    const { isTemplateEditable } = usePageTemplateContext();
     const [isOpened, setIsOpened] = useState<boolean>(false);
 
     const ButtonComponent = useMemo(() => (isOpened ? StyledButton : StyledVisibleOnHoverButton), [isOpened]);
@@ -88,7 +92,7 @@ export default function AddModuleButton({ orientation, className, rowIndex, rowS
     };
 
     return (
-        <Wrapper className={className} data-testid="add-button-container">
+        <Wrapper className={className} $isHidden={!isTemplateEditable} data-testid="add-button-container">
             <Dropdown
                 open={isOpened}
                 trigger={['click', 'contextMenu']}

docs/features/feature-guides/custom-home-page.md

@@ -6,7 +6,7 @@ import FeatureAvailability from '@site/src/components/FeatureAvailability';
 
 # Custom Home Page
 
-<FeatureAvailability/>
+<FeatureAvailability saasOnly />
 
 DataHub's **Custom Home Page** empowers organizations and individual users to create personalized, modular home page experiences that put the most relevant data assets and information front and center.
 

smoke-test/tests/cypress/cypress/e2e/homeV3/modules.js

@@ -28,7 +28,7 @@ describe("home page modules", () => {
 
   Cypress.on("uncaught:exception", (err, runnable) => false);
 
-  it("add default modules", () => {
+  it.skip("add default modules", () => {
     addYourAssetsModule();
     cy.getWithTestId("edited-home-page-toast"); // wait for confirmation before continuing to prevent flakiness
     cy.getWithTestId("your-assets-module").should("have.length", 2);
@@ -48,7 +48,7 @@ describe("home page modules", () => {
     resetToOrgDefault();
   });
 
-  it("create custom asset collection module", () => {
+  it.skip("create custom asset collection module", () => {
     createAssetCollectionModule("Collection Module");
     cy.getWithTestId("edited-home-page-toast");
     cy.getWithTestId("asset-collection-module").should("be.visible");
@@ -61,7 +61,7 @@ describe("home page modules", () => {
     resetToOrgDefault();
   });
 
-  it("create custom hierarchy module", () => {
+  it.skip("create custom hierarchy module", () => {
     createHierarchyModule("Hierarchy Module");
     cy.getWithTestId("edited-home-page-toast");
     cy.getWithTestId("hierarchy-module").should("be.visible");
@@ -74,7 +74,7 @@ describe("home page modules", () => {
     resetToOrgDefault();
   });
 
-  it("create custom link module", () => {
+  it.skip("create custom link module", () => {
     const linkName = "Link 1";
     createLinkModule(linkName, "www.google.com");
     cy.getWithTestId("edited-home-page-toast");
@@ -85,7 +85,7 @@ describe("home page modules", () => {
     resetToOrgDefault();
   });
 
-  it("create custom documentation module", () => {
+  it.skip("create custom documentation module", () => {
     const moduleName = "Rich Text module";
     const text = "Rich text description";
     createDocumentationModule(moduleName, text);
@@ -98,7 +98,7 @@ describe("home page modules", () => {
     resetToOrgDefault();
   });
 
-  it("remove default module", () => {
+  it.skip("remove default module", () => {
     addYourAssetsModule();
     cy.getWithTestId("edited-home-page-toast");
     cy.ensureElementWithTestIdPresent("edited-home-page-toast");
@@ -110,7 +110,7 @@ describe("home page modules", () => {
     resetToOrgDefault();
   });
 
-  it("remove custom module", () => {
+  it.skip("remove custom module", () => {
     const moduleName = "Rich Text module";
     const text = "Rich text description";
     createDocumentationModule(moduleName, text);
@@ -123,7 +123,7 @@ describe("home page modules", () => {
     resetToOrgDefault();
   });
 
-  it("should not be able to edit default module", () => {
+  it.skip("should not be able to edit default module", () => {
     cy.getWithTestId("your-assets-module")
       .should("be.visible")
       .within(() => {
@@ -136,7 +136,7 @@ describe("home page modules", () => {
     );
   });
 
-  it("edit custom module", () => {
+  it.skip("edit custom module", () => {
     const name = "Collection Module";
     const updatedName = "Collection Module Updated";
     createAssetCollectionModule(name);
@@ -152,7 +152,7 @@ describe("home page modules", () => {
     resetToOrgDefault();
   });
 
-  it("add home default module", () => {
+  it.skip("add home default module", () => {
     const name = "Global Collection Module";
     addYourAssetsModule();
     cy.ensureElementWithTestIdPresent("edited-home-page-toast");
@@ -175,7 +175,7 @@ describe("home page modules", () => {
     resetToOrgDefault();
   });
 
-  it("reorder module with drag-and-drop", () => {
+  it.skip("reorder module with drag-and-drop", () => {
     expectModulesOrder("your-assets-module", "domains-module");
     dragAndDropModuleToNewRow("your-assets-module");
     cy.getWithTestId("edited-home-page-toast");

smoke-test/tests/cypress/cypress/e2e/homeV3/templates.js

@@ -22,14 +22,14 @@ describe("home page templates", () => {
 
   Cypress.on("uncaught:exception", (err, runnable) => false);
 
-  it("view default homepage template", () => {
+  it.skip("view default homepage template", () => {
     cy.getWithTestId("page-title").should("exist");
     cy.getWithTestId("search-bar").should("exist");
     cy.getWithTestId("edit-home-page-settings").should("exist");
     shouldShowDefaultTemplate();
   });
 
-  it("fork the homepage and create personal template", () => {
+  it.skip("fork the homepage and create personal template", () => {
     addYourAssetsModule();
     cy.getWithTestId("edited-home-page-toast"); // wait for confirmation before continuing to prevent flakiness
     cy.getWithTestId("your-assets-module").should("have.length", 2);
@@ -37,7 +37,7 @@ describe("home page templates", () => {
     resetToOrgDefault();
   });
 
-  it("create personal template, then log back in to check the updated template", () => {
+  it.skip("create personal template, then log back in to check the updated template", () => {
     addYourAssetsModule();
     cy.getWithTestId("edited-home-page-toast");
     createAssetCollectionModule("Collection Module");
@@ -53,7 +53,7 @@ describe("home page templates", () => {
     resetToOrgDefault();
   });
 
-  it("reset the homepage to organization default", () => {
+  it.skip("reset the homepage to organization default", () => {
     addYourAssetsModule();
     cy.getWithTestId("edited-home-page-toast");
     cy.wait(1000);
@@ -61,7 +61,7 @@ describe("home page templates", () => {
     shouldShowDefaultTemplate();
   });
 
-  it("edit the default homepage", () => {
+  it.skip("edit the default homepage", () => {
     startEditingDefaultTemplate();
     addYourAssetsModule();
     finishEditingDefaultTemplate();