feat(homePage): add the ability to create asset collection module (#14050)

Co-authored-by: Chris Collins <[email protected]>

Author: purnimagarg1

datahub-graphql-core/src/main/java/com/linkedin/datahub/graphql/resolvers/module/UpsertPageModuleResolver.java

@@ -2,6 +2,7 @@
 
 import static com.linkedin.datahub.graphql.resolvers.ResolverUtils.bindArgument;
 
+import com.linkedin.common.UrnArray;
 import com.linkedin.common.urn.Urn;
 import com.linkedin.common.urn.UrnUtils;
 import com.linkedin.datahub.graphql.QueryContext;
@@ -16,7 +17,9 @@
 import com.linkedin.module.DataHubPageModuleParams;
 import graphql.schema.DataFetcher;
 import graphql.schema.DataFetchingEnvironment;
+import java.util.List;
 import java.util.concurrent.CompletableFuture;
+import java.util.stream.Collectors;
 import javax.annotation.Nonnull;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
@@ -91,6 +94,20 @@ private DataHubPageModuleParams mapParamsInput(
       gmsParams.setRichTextParams(richTextParams);
     }
 
+    if (paramsInput.getAssetCollectionParams() != null) {
+      com.linkedin.module.AssetCollectionModuleParams assetCollectionParams =
+          new com.linkedin.module.AssetCollectionModuleParams();
+
+      List<Urn> urns =
+          paramsInput.getAssetCollectionParams().getAssetUrns().stream()
+              .map(UrnUtils::getUrn)
+              .collect(Collectors.toList());
+
+      UrnArray urnArray = new UrnArray(urns);
+
+      assetCollectionParams.setAssetUrns(urnArray);
+      gmsParams.setAssetCollectionParams(assetCollectionParams);
+    }
     return gmsParams;
   }
 
@@ -106,6 +123,11 @@ private void validateInput(
       if (params.getLinkParams() == null) {
         throw new IllegalArgumentException("Did not provide link params for link module");
       }
+    } else if (type.equals(com.linkedin.module.DataHubPageModuleType.ASSET_COLLECTION)) {
+      if (params.getAssetCollectionParams() == null) {
+        throw new IllegalArgumentException(
+            "Did not provide asset collection params for asset collection module");
+      }
     } else {
       // TODO: add more blocks to this check as we support creating more types of modules to this
       // resolver

datahub-graphql-core/src/main/java/com/linkedin/datahub/graphql/types/module/PageModuleParamsMapper.java

@@ -1,12 +1,16 @@
 package com.linkedin.datahub.graphql.types.module;
 
+import com.linkedin.common.urn.Urn;
 import com.linkedin.datahub.graphql.QueryContext;
+import com.linkedin.datahub.graphql.generated.AssetCollectionModuleParams;
 import com.linkedin.datahub.graphql.generated.EntityType;
 import com.linkedin.datahub.graphql.generated.LinkModuleParams;
 import com.linkedin.datahub.graphql.generated.Post;
 import com.linkedin.datahub.graphql.generated.RichTextModuleParams;
 import com.linkedin.datahub.graphql.types.mappers.ModelMapper;
 import com.linkedin.module.DataHubPageModuleParams;
+import java.util.List;
+import java.util.stream.Collectors;
 import javax.annotation.Nonnull;
 import javax.annotation.Nullable;
 
@@ -44,6 +48,21 @@ public com.linkedin.datahub.graphql.generated.DataHubPageModuleParams apply(
       result.setRichTextParams(richTextParams);
     }
 
+    // Map asset collection params if present
+    if (params.getAssetCollectionParams() != null
+        && params.getAssetCollectionParams().getAssetUrns() != null) {
+
+      AssetCollectionModuleParams assetCollectionParams = new AssetCollectionModuleParams();
+
+      List<String> assetUrnStrings =
+          params.getAssetCollectionParams().getAssetUrns().stream()
+              .map(Urn::toString)
+              .collect(Collectors.toList());
+
+      assetCollectionParams.setAssetUrns(assetUrnStrings);
+      result.setAssetCollectionParams(assetCollectionParams);
+    }
+
     return result;
   }
 }

datahub-graphql-core/src/main/resources/module.graphql

@@ -78,6 +78,11 @@ input PageModuleParamsInput {
   The params required if the module is type RICH_TEXT
   """
   richTextParams: RichTextModuleParamsInput
+
+  """
+  The params required if the module is type ASSET_COLLECTION
+  """
+  assetCollectionParams: AssetCollectionModuleParamsInput
 }
 
 """
@@ -100,6 +105,16 @@ input RichTextModuleParamsInput {
   content: String!
 }
 
+"""
+Input for the params required if the module is type ASSET_COLLECTION
+"""
+input AssetCollectionModuleParamsInput {
+  """
+  The list of asset urns for the asset collection module
+  """
+  assetUrns: [String!]!
+}
+
 """
 The main properties of a DataHub page module
 """
@@ -202,6 +217,11 @@ type DataHubPageModuleParams {
   The params required if the module is type RICH_TEXT
   """
   richTextParams: RichTextModuleParams
+
+  """
+  The params required if the module is type ASSET_COLLECTION
+  """
+  assetCollectionParams: AssetCollectionModuleParams
 }
 
 """
@@ -224,6 +244,16 @@ type RichTextModuleParams {
   content: String!
 }
 
+"""
+The params required if the module is type ASSET_COLLECTION
+"""
+type AssetCollectionModuleParams {
+  """
+  The list of asset urns for the asset collection module
+  """
+  assetUrns: [String!]!
+}
+
 """
 Input for deleting a DataHub page module
 """

datahub-web-react/src/alchemy-components/components/Checkbox/Checkbox.tsx

@@ -49,7 +49,9 @@ export const Checkbox = ({
                 </Label>
             ) : null}
             <CheckboxBase
-                onClick={() => {
+                onClick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
                     if (!isDisabled) {
                         setChecked(!checked);
                         setIsChecked?.(!checked);

datahub-web-react/src/app/entityV2/shared/tabs/Properties/useHydratedEntityMap.ts

@@ -11,7 +11,7 @@ export function useHydratedEntityMap(urns?: (string | undefined | null)[]) {
     );
 
     // Fetch entities
-    const hydratedEntities = useGetEntities(uniqueEntityUrns);
+    const { entities: hydratedEntities } = useGetEntities(uniqueEntityUrns);
 
     // Create entity map
     const hydratedEntityMap = useMemo(

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

@@ -1,5 +1,6 @@
 import React, { ReactNode, createContext, useContext, useMemo } from 'react';
 
+import { useModuleModalState } from '@app/homeV3/context/hooks/useModuleModalState';
 import { useModuleOperations } from '@app/homeV3/context/hooks/useModuleOperations';
 import { useTemplateOperations } from '@app/homeV3/context/hooks/useTemplateOperations';
 import { useTemplateState } from '@app/homeV3/context/hooks/useTemplateState';
@@ -33,8 +34,11 @@ export const PageTemplateProvider = ({
     // Template operations
     const { updateTemplateWithModule, removeModuleFromTemplate, upsertTemplate } = useTemplateOperations();
 
+    // Modal state
+    const moduleModalState = useModuleModalState();
+
     // Module operations
-    const { addModule, removeModule, createModule } = useModuleOperations(
+    const { addModule, removeModule, upsertModule } = useModuleOperations(
         isEditingGlobalTemplate,
         personalTemplate,
         globalTemplate,
@@ -43,6 +47,7 @@ export const PageTemplateProvider = ({
         updateTemplateWithModule,
         removeModuleFromTemplate,
         upsertTemplate,
+        moduleModalState.isEditing,
     );
 
     const value = useMemo(
@@ -57,7 +62,8 @@ export const PageTemplateProvider = ({
             setTemplate,
             addModule,
             removeModule,
-            createModule,
+            upsertModule,
+            moduleModalState,
         }),
         [
             personalTemplate,
@@ -70,7 +76,8 @@ export const PageTemplateProvider = ({
             setTemplate,
             addModule,
             removeModule,
-            createModule,
+            upsertModule,
+            moduleModalState,
         ],
     );
 
@@ -86,4 +93,4 @@ export function usePageTemplateContext() {
 }
 
 // Re-export types for convenience
-export type { CreateModuleInput, AddModuleInput, RemoveModuleInput } from './types';
+export type { UpsertModuleInput, AddModuleInput, RemoveModuleInput } from './types';

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

@@ -87,7 +87,7 @@ const mockSetGlobalTemplate = vi.fn();
 const mockSetTemplate = vi.fn();
 const mockAddModule = vi.fn();
 const mockRemoveModule = vi.fn();
-const mockCreateModule = vi.fn();
+const mockUpsertModule = vi.fn();
 const mockUpdateTemplateWithModule = vi.fn();
 const mockRemoveModuleFromTemplate = vi.fn();
 const mockUpsertTemplate = vi.fn();
@@ -117,7 +117,7 @@ describe('PageTemplateContext', () => {
         mockUseModuleOperations.mockReturnValue({
             addModule: mockAddModule,
             removeModule: mockRemoveModule,
-            createModule: mockCreateModule,
+            upsertModule: mockUpsertModule,
         });
     });
 
@@ -183,6 +183,7 @@ describe('PageTemplateContext', () => {
                 mockUpdateTemplateWithModule,
                 mockRemoveModuleFromTemplate,
                 mockUpsertTemplate,
+                false,
             );
         });
 
@@ -281,6 +282,7 @@ describe('PageTemplateContext', () => {
                 mockUpdateTemplateWithModule,
                 mockRemoveModuleFromTemplate,
                 mockUpsertTemplate,
+                false,
             );
         });
 
@@ -328,7 +330,13 @@ describe('PageTemplateContext', () => {
             expect(result.current.setGlobalTemplate).toBe(mockSetGlobalTemplate);
             expect(result.current.setTemplate).toBe(mockSetTemplate);
             expect(result.current.addModule).toBe(mockAddModule);
-            expect(result.current.createModule).toBe(mockCreateModule);
+            expect(result.current.upsertModule).toBe(mockUpsertModule);
+            expect(result.current.moduleModalState).toMatchObject({
+                isOpen: false,
+                isEditing: false,
+                open: expect.any(Function),
+                close: expect.any(Function),
+            });
         });
 
         it('should throw error when used outside provider', () => {
@@ -372,7 +380,7 @@ describe('PageTemplateContext', () => {
             expect(mockAddModule).toHaveBeenCalledWith(moduleInput);
         });
 
-        it('should provide working createModule function', () => {
+        it('should provide working upsertModule function', () => {
             const { result } = renderHook(() => usePageTemplateContext(), {
                 wrapper: ({ children }) => (
                     <PageTemplateProvider personalTemplate={mockPersonalTemplate} globalTemplate={mockGlobalTemplate}>
@@ -381,7 +389,7 @@ describe('PageTemplateContext', () => {
                 ),
             });
 
-            const createModuleInput = {
+            const upsertModuleInput = {
                 name: 'New Module',
                 type: DataHubPageModuleType.Link,
                 scope: PageModuleScope.Personal,
@@ -393,10 +401,10 @@ describe('PageTemplateContext', () => {
             };
 
             act(() => {
-                result.current.createModule(createModuleInput);
+                result.current.upsertModule(upsertModuleInput);
             });
 
-            expect(mockCreateModule).toHaveBeenCalledWith(createModuleInput);
+            expect(mockUpsertModule).toHaveBeenCalledWith(upsertModuleInput);
         });
 
         it('should provide working setIsEditingGlobalTemplate function', () => {