feat(ui/summary-tab):implement permissions for modules section (#14685)

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

@@ -4,6 +4,7 @@ import React, { memo, useCallback, useMemo } from 'react';
 import styled from 'styled-components';
 
 import analytics, { EventType } from '@app/analytics';
+import { usePageTemplateContext } from '@app/homeV3/context/PageTemplateContext';
 import ModuleContainer from '@app/homeV3/module/components/ModuleContainer';
 import ModuleMenu from '@app/homeV3/module/components/ModuleMenu';
 import ModuleName from '@app/homeV3/module/components/ModuleName';
@@ -35,8 +36,12 @@ const ModuleHeader = styled.div`
     }
 `;
 
-const DragHandle = styled.div<{ $isDragging?: boolean }>`
-    cursor: ${({ $isDragging }) => ($isDragging ? 'grabbing' : 'grab')};
+const DragHandle = styled.div<{ $isDragging?: boolean; $isDisabled?: boolean }>`
+    cursor: ${({ $isDisabled, $isDragging }) => {
+        if ($isDisabled) return 'default';
+        if ($isDragging) return 'grabbing';
+        return 'grab';
+    }};
     flex: 1;
     max-width: calc(100% - 10px);
 `;
@@ -83,6 +88,7 @@ function LargeModule({
             isSmall: false,
         },
     });
+    const { isTemplateEditable } = usePageTemplateContext();
 
     const hasViewAll = useMemo(() => !!onClickViewAll, [onClickViewAll]);
 
@@ -98,26 +104,31 @@ function LargeModule({
         <ModuleContainer $height="316px" ref={setNodeRef} data-testId={dataTestId}>
             <ModuleHeader>
                 <DragHandle
-                    {...listeners}
-                    {...attributes}
+                    {...(isTemplateEditable ? listeners : {})}
+                    {...(isTemplateEditable ? attributes : {})}
                     $isDragging={isDragging}
+                    $isDisabled={!isTemplateEditable}
                     data-testid="large-module-drag-handle"
                 >
-                    <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}
+                        />
+                    )}
                     <ModuleName text={name} />
                     {/* TODO: implement description for modules CH-548 */}
                     {/* <ModuleDescription text={description} /> */}
                 </DragHandle>
-                <FloatingRightHeaderSection>
-                    <ModuleMenu module={module} position={position} />
-                </FloatingRightHeaderSection>
+                {isTemplateEditable && (
+                    <FloatingRightHeaderSection>
+                        <ModuleMenu module={module} position={position} />
+                    </FloatingRightHeaderSection>
+                )}
             </ModuleHeader>
             <Content $hasViewAll={hasViewAll}>
                 {loading ? (

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

@@ -2,6 +2,7 @@ import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
+import { usePageTemplateContext } from '@app/homeV3/context/PageTemplateContext';
 import LargeModule from '@app/homeV3/module/components/LargeModule';
 import { ModuleProps } from '@app/homeV3/module/types';
 
@@ -65,7 +66,15 @@ vi.mock('@components', () => ({
     },
 }));
 
+vi.mock('@app/homeV3/context/PageTemplateContext', () => ({
+    usePageTemplateContext: vi.fn(),
+}));
+
 describe('LargeModule', () => {
+    (usePageTemplateContext as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+        isTemplateEditable: true,
+    });
+
     const mockModule: ModuleProps['module'] = {
         urn: 'urn:li:dataHubPageModule:test',
         type: EntityType.DatahubPageModule,

datahub-web-react/src/app/homeV3/template/Template.tsx

@@ -27,7 +27,7 @@ interface Props {
 }
 
 function Template({ className }: Props) {
-    const { template } = usePageTemplateContext();
+    const { template, isTemplateEditable } = usePageTemplateContext();
     const rows = useMemo(
         () => (template?.properties?.rows ?? []) as DataHubPageTemplateRow[],
         [template?.properties?.rows],
@@ -41,7 +41,7 @@ function Template({ className }: Props) {
                 <TemplateGrid wrappedRows={wrappedRows} />
             </DragAndDropProvider>
 
-            <StyledAddModulesButton orientation="horizontal" $hasRows={hasRows} />
+            {isTemplateEditable && <StyledAddModulesButton orientation="horizontal" $hasRows={hasRows} />}
             <ModuleModalMapper />
         </Wrapper>
     );