feat(homepage): Add support for Quick Link modules in the new home page

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

@@ -9,6 +9,7 @@
 import com.linkedin.datahub.graphql.concurrency.GraphQLConcurrencyUtils;
 import com.linkedin.datahub.graphql.generated.DataHubPageModule;
 import com.linkedin.datahub.graphql.generated.DataHubPageModuleType;
+import com.linkedin.datahub.graphql.generated.LinkModuleParamsInput;
 import com.linkedin.datahub.graphql.generated.PageModuleScope;
 import com.linkedin.datahub.graphql.generated.UpsertPageModuleInput;
 import com.linkedin.datahub.graphql.types.module.PageModuleMapper;
@@ -82,8 +83,18 @@ private DataHubPageModuleParams mapParamsInput(
     DataHubPageModuleParams gmsParams = new DataHubPageModuleParams();
 
     if (paramsInput.getLinkParams() != null) {
+      LinkModuleParamsInput inputValues = paramsInput.getLinkParams();
       com.linkedin.module.LinkModuleParams linkParams = new com.linkedin.module.LinkModuleParams();
-      linkParams.setLinkUrn(UrnUtils.getUrn(paramsInput.getLinkParams().getLinkUrn()));
+
+      linkParams.setLinkUrl(inputValues.getLinkUrl());
+
+      if (inputValues.getImageUrl() != null) {
+        linkParams.setImageUrl(inputValues.getImageUrl());
+      }
+      if (inputValues.getDescription() != null) {
+        linkParams.setDescription(inputValues.getDescription());
+      }
+
       gmsParams.setLinkParams(linkParams);
     }
 

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

@@ -3,9 +3,7 @@
 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;
@@ -32,13 +30,22 @@ public com.linkedin.datahub.graphql.generated.DataHubPageModuleParams apply(
         new com.linkedin.datahub.graphql.generated.DataHubPageModuleParams();
 
     // Map link params if present
-    if (params.getLinkParams() != null && params.getLinkParams().getLinkUrn() != null) {
-      LinkModuleParams linkModuleParams = new LinkModuleParams();
-      Post link = new Post();
-      link.setUrn(params.getLinkParams().getLinkUrn().toString());
-      link.setType(EntityType.POST);
-      linkModuleParams.setLink(link);
-      result.setLinkParams(linkModuleParams);
+    if (params.getLinkParams() != null) {
+      com.linkedin.module.LinkModuleParams linkParams = params.getLinkParams();
+
+      if (linkParams.getLinkUrl() != null) {
+        LinkModuleParams linkModuleParams = new LinkModuleParams();
+
+        linkModuleParams.setLinkUrl(linkParams.getLinkUrl());
+
+        if (linkParams.getImageUrl() != null) {
+          linkModuleParams.setImageUrl(linkParams.getImageUrl());
+        }
+        if (linkParams.getDescription() != null) {
+          linkModuleParams.setDescription(linkParams.getDescription());
+        }
+        result.setLinkParams(linkModuleParams);
+      }
     }
 
     // Map rich text params if present

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

@@ -90,9 +90,19 @@ Input for the params required if the module is type LINK
 """
 input LinkModuleParamsInput {
   """
-  The URN of the Post entity containing the link
+  The URL of the link
   """
-  linkUrn: String!
+  linkUrl: String!
+
+  """
+  The image URL of the link
+  """
+  imageUrl: String
+
+  """
+  The description of the link
+  """
+  description: String
 }
 
 """
@@ -229,9 +239,19 @@ The params required if the module is type LINK
 """
 type LinkModuleParams {
   """
-  The Post entity containing the link
+  The URL of the link
+  """
+  linkUrl: String!
+
+  """
+  The image URL of the link
+  """
+  imageUrl: String
+
+  """
+  The description of the link
   """
-  link: Post!
+  description: String
 }
 
 """

datahub-graphql-core/src/test/java/com/linkedin/datahub/graphql/resolvers/module/UpsertPageModuleResolverTest.java

@@ -136,7 +136,7 @@ public void testUpsertPageModuleWithLinkParams() throws Exception {
 
     PageModuleParamsInput paramsInput = new PageModuleParamsInput();
     paramsInput.setLinkParams(new LinkModuleParamsInput());
-    paramsInput.getLinkParams().setLinkUrn("urn:li:post:test-post");
+    paramsInput.getLinkParams().setLinkUrl("https://example.com/test-link");
     input.setParams(paramsInput);
 
     Urn moduleUrn = UrnUtils.getUrn(TEST_MODULE_URN);
@@ -226,7 +226,7 @@ public void testUpsertPageModuleValidationFailureRichTextWithWrongParams() throw
     // Set link params instead of rich text params
     PageModuleParamsInput paramsInput = new PageModuleParamsInput();
     paramsInput.setLinkParams(new LinkModuleParamsInput());
-    paramsInput.getLinkParams().setLinkUrn("urn:li:post:test-post");
+    paramsInput.getLinkParams().setLinkUrl("https://example.com/test-link");
     input.setParams(paramsInput);
 
     when(mockEnvironment.getArgument("input")).thenReturn(input);

datahub-graphql-core/src/test/java/com/linkedin/datahub/graphql/types/module/PageModuleTypeTest.java

@@ -202,7 +202,9 @@ private EntityResponse createMockEntityResponse(String urn, String name) {
     com.linkedin.module.DataHubPageModuleParams params =
         new com.linkedin.module.DataHubPageModuleParams();
     com.linkedin.module.LinkModuleParams linkParams = new com.linkedin.module.LinkModuleParams();
-    linkParams.setLinkUrn(UrnUtils.getUrn("urn:li:post:test-post"));
+
+    linkParams.setLinkUrl("https://example.com/test-link");
+
     params.setLinkParams(linkParams);
     gmsProperties.setParams(params);
 

datahub-web-react/src/app/homeV3/module/Module.tsx

@@ -6,6 +6,7 @@ import YourAssetsModule from '@app/homeV3/modules/YourAssetsModule';
 import AssetCollectionModule from '@app/homeV3/modules/assetCollection/AssetCollectionModule';
 import DocumentationModule from '@app/homeV3/modules/documentation/DocumentationModule';
 import TopDomainsModule from '@app/homeV3/modules/domains/TopDomainsModule';
+import LinkModule from '@app/homeV3/modules/link/LinkModule';
 
 import { DataHubPageModuleType } from '@types';
 
@@ -17,6 +18,7 @@ function Module(props: ModuleProps) {
         if (module.properties.type === DataHubPageModuleType.OwnedAssets) return YourAssetsModule;
         if (module.properties.type === DataHubPageModuleType.Domains) return TopDomainsModule;
         if (module.properties.type === DataHubPageModuleType.AssetCollection) return AssetCollectionModule;
+        if (module.properties.type === DataHubPageModuleType.Link) return LinkModule;
         if (module.properties.type === DataHubPageModuleType.RichText) return DocumentationModule;
 
         // TODO: remove the sample large module once we have other modules to fill this out

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

@@ -7,6 +7,7 @@ import ModuleContainer from '@app/homeV3/module/components/ModuleContainer';
 import ModuleMenu from '@app/homeV3/module/components/ModuleMenu';
 import ModuleName from '@app/homeV3/module/components/ModuleName';
 import { ModuleProps } from '@app/homeV3/module/types';
+import { FloatingRightHeaderSection } from '@app/homeV3/styledComponents';
 
 const ModuleHeader = styled.div`
     position: relative;
@@ -33,18 +34,6 @@ const DragHandle = styled.div<{ $isDragging?: boolean }>`
     flex: 1;
 `;
 
-const FloatingRightHeaderSection = styled.div`
-    position: absolute;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 8px;
-    padding-right: 16px;
-    right: 0px;
-    top: 0px;
-    height: 100%;
-`;
-
 const Content = styled.div<{ $hasViewAll: boolean }>`
     margin: 16px;
     overflow-y: auto;

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

@@ -1,14 +1,12 @@
 import { borders, colors, radius } from '@components';
 import styled from 'styled-components';
 
-const ModuleContainer = styled.div<{ $height: string; $isDragging?: boolean }>`
+const ModuleContainer = styled.div<{ $height?: string; $isDragging?: boolean }>`
     background: ${colors.white};
     border: ${borders['1px']} ${colors.gray[100]};
     border-radius: ${radius.lg};
     flex: 1;
     overflow-x: hidden;
-
-    height: ${(props) => props.$height};
     box-shadow:
         0px 2px 18px 0px rgba(17, 7, 69, 0.01),
         0px 4px 12px 0px rgba(17, 7, 69, 0.03);
@@ -24,6 +22,12 @@ const ModuleContainer = styled.div<{ $height: string; $isDragging?: boolean }>`
         transform: translateZ(0) scale(1.02);
         opacity: 0.5;
     `}
+
+    ${(props) =>
+        props.$height &&
+        `
+            height: ${props.$height};
+        `}
 `;
 
 export default ModuleContainer;

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

@@ -15,6 +15,8 @@ const StyledIcon = styled(Icon)`
     }
 ` as typeof Icon;
 
+const DropdownWrapper = styled.div``;
+
 interface Props {
     module: PageModuleFragment;
     position: ModulePositionInput;
@@ -40,39 +42,45 @@ export default function ModuleMenu({ module, position }: Props) {
         });
     }, [removeModule, module.urn, position]);
 
+    const handleMenuClick = useCallback((e: React.MouseEvent) => {
+        e.stopPropagation();
+    }, []);
+
     return (
-        <Dropdown
-            trigger={['click']}
-            menu={{
-                items: [
-                    ...(canEdit
-                        ? [
-                              {
-                                  title: 'Edit',
-                                  key: 'edit',
-                                  label: 'Edit',
-                                  style: {
-                                      color: colors.gray[600],
-                                      fontSize: '14px',
+        <DropdownWrapper onClick={handleMenuClick}>
+            <Dropdown
+                trigger={['click']}
+                menu={{
+                    items: [
+                        ...(canEdit
+                            ? [
+                                  {
+                                      title: 'Edit',
+                                      key: 'edit',
+                                      label: 'Edit',
+                                      style: {
+                                          color: colors.gray[600],
+                                          fontSize: '14px',
+                                      },
+                                      onClick: handleEditModule,
                                   },
-                                  onClick: handleEditModule,
-                              },
-                          ]
-                        : []),
-                    {
-                        title: 'Delete',
-                        label: 'Delete',
-                        key: 'delete',
-                        style: {
-                            color: colors.red[500],
-                            fontSize: '14px',
+                              ]
+                            : []),
+                        {
+                            title: 'Delete',
+                            label: 'Delete',
+                            key: 'delete',
+                            style: {
+                                color: colors.red[500],
+                                fontSize: '14px',
+                            },
+                            onClick: handleDelete,
                         },
-                        onClick: handleDelete,
-                    },
-                ],
-            }}
-        >
-            <StyledIcon icon="DotsThreeVertical" source="phosphor" size="lg" />
-        </Dropdown>
+                    ],
+                }}
+            >
+                <StyledIcon icon="DotsThreeVertical" source="phosphor" size="lg" />
+            </Dropdown>
+        </DropdownWrapper>
     );
 }

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import ModuleContainer from '@app/homeV3/module/components/ModuleContainer';
+import ModuleMenu from '@app/homeV3/module/components/ModuleMenu';
+import { ModuleProps } from '@app/homeV3/module/types';
+import { FloatingRightHeaderSection } from '@app/homeV3/styledComponents';
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    height: 100%;
+    justify-content: center;
+`;
+
+const Content = styled.div`
+    margin: 16px 32px 16px 16px;
+    position: relative;
+`;
+
+const StyledModuleContainer = styled(ModuleContainer)<{ clickable?: boolean }>`
+    max-height: 72px;
+
+    ${({ clickable }) => clickable && `cursor: pointer;`}
+`;
+
+export default function SmallModule({ children, module, position, onClick }: React.PropsWithChildren<ModuleProps>) {
+    return (
+        <StyledModuleContainer clickable={!!onClick} onClick={onClick}>
+            <Container>
+                <Content>{children}</Content>
+                <FloatingRightHeaderSection>
+                    <ModuleMenu module={module} position={position} />
+                </FloatingRightHeaderSection>
+            </Container>
+        </StyledModuleContainer>
+    );
+}

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

@@ -14,6 +14,7 @@ vi.mock('styled-components', () => {
     };
     styledFactory.div = styledFactory('div');
     styledFactory.button = styledFactory('button');
+    styledFactory.Icon = styledFactory(() => null);
     return {
         __esModule: true,
         default: styledFactory,
@@ -45,6 +46,7 @@ vi.mock('@components', () => ({
     ),
     Loader: () => <div data-testid="loader">Loading...</div>,
     Text: ({ children }: any) => <span>{children}</span>,
+    Icon: () => <svg />,
     borders: {
         '1px': '1px solid',
     },

datahub-web-react/src/app/homeV3/module/types.ts

@@ -7,4 +7,5 @@ import { PageModuleFragment } from '@graphql/template.generated';
 export interface ModuleProps {
     module: PageModuleFragment;
     position: ModulePositionInput;
+    onClick?: () => void;
 }

datahub-web-react/src/app/homeV3/moduleModals/ModuleModalMapper.tsx

@@ -3,6 +3,7 @@ import React, { useMemo } from 'react';
 import { usePageTemplateContext } from '@app/homeV3/context/PageTemplateContext';
 import AssetCollectionModal from '@app/homeV3/modules/assetCollection/AssetCollectionModal';
 import DocumentationModal from '@app/homeV3/modules/documentation/DocumentationModal';
+import LinkModal from '@app/homeV3/modules/link/LinkModal';
 
 import { DataHubPageModuleType } from '@types';
 
@@ -16,6 +17,8 @@ export default function ModuleModalMapper() {
             // TODO: add support of other module types
             case DataHubPageModuleType.AssetCollection:
                 return AssetCollectionModal;
+            case DataHubPageModuleType.Link:
+                return LinkModal;
             case DataHubPageModuleType.RichText:
                 return DocumentationModal;
             default: