feat(ui): add option to add picture link for groups

datahub-graphql-core/src/main/java/com/linkedin/datahub/graphql/types/corpgroup/CorpGroupType.java

@@ -7,6 +7,7 @@
 import com.datahub.authorization.DisjunctivePrivilegeGroup;
 import com.google.common.collect.ImmutableList;
 import com.google.common.collect.ImmutableSet;
+import com.linkedin.common.url.Url;
 import com.linkedin.common.urn.Urn;
 import com.linkedin.common.urn.UrnUtils;
 import com.linkedin.data.template.RecordTemplate;
@@ -231,6 +232,9 @@ private RecordTemplate mapCorpGroupEditableInfo(
     if (input.getEmail() != null) {
       result.setEmail(input.getEmail());
     }
+    if (input.getPictureLink() != null) {
+      result.setPictureLink(new Url(input.getPictureLink()));
+    }
     return result;
   }
 }

datahub-graphql-core/src/main/java/com/linkedin/datahub/graphql/types/corpgroup/mappers/CorpGroupEditablePropertiesMapper.java

@@ -1,9 +1,12 @@
 package com.linkedin.datahub.graphql.types.corpgroup.mappers;
 
 import com.linkedin.data.template.GetMode;
+import com.linkedin.data.template.RecordTemplate;
 import com.linkedin.datahub.graphql.generated.CorpGroupEditableProperties;
 import com.linkedin.datahub.graphql.types.mappers.ModelMapper;
 import javax.annotation.Nonnull;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
 
 /**
  * Maps Pegasus {@link RecordTemplate} objects to objects conforming to the GQL schema.
@@ -14,6 +17,9 @@ public class CorpGroupEditablePropertiesMapper
     implements ModelMapper<
         com.linkedin.identity.CorpGroupEditableInfo, CorpGroupEditableProperties> {
 
+  private final Logger _logger =
+      LoggerFactory.getLogger(CorpGroupEditablePropertiesMapper.class.getName());
+
   public static final CorpGroupEditablePropertiesMapper INSTANCE =
       new CorpGroupEditablePropertiesMapper();
 
@@ -29,6 +35,13 @@ public CorpGroupEditableProperties apply(
     result.setDescription(corpGroupEditableInfo.getDescription(GetMode.DEFAULT));
     result.setSlack(corpGroupEditableInfo.getSlack(GetMode.DEFAULT));
     result.setEmail(corpGroupEditableInfo.getEmail(GetMode.DEFAULT));
+    com.linkedin.common.url.Url pictureLinkObject =
+        corpGroupEditableInfo.getPictureLink(GetMode.NULL);
+    String pictureLink = null;
+    if (pictureLinkObject != null) {
+      pictureLink = pictureLinkObject.toString();
+    }
+    result.setPictureLink(pictureLink);
     return result;
   }
 }

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

@@ -4077,6 +4077,11 @@ type CorpGroupEditableProperties {
   Email address for the group
   """
   email: String
+
+  """ 
+  A URL which points to a picture which user wants to set as a profile photo
+  """
+  pictureLink: String
 }
 
 """
@@ -4097,6 +4102,11 @@ input CorpGroupUpdateInput {
   Email address for the group
   """
   email: String
+
+  """
+  A URL which points to a picture which user wants to set as a profile photo
+  """
+  pictureLink: String
 }
 
 """

datahub-web-react/src/app/entity/group/GroupEditModal.tsx

@@ -7,6 +7,7 @@ type PropsData = {
     email: string | undefined;
     slack: string | undefined;
     urn: string | undefined;
+    photoUrl: string | undefined;
 };
 
 type Props = {
@@ -27,6 +28,7 @@ export default function GroupEditModal({ visible, onClose, onSave, editModalData
         slack: editModalData.slack,
         email: editModalData.email,
         urn: editModalData.urn,
+        photoUrl: editModalData.photoUrl,
     });
 
     useEffect(() => {
@@ -41,6 +43,7 @@ export default function GroupEditModal({ visible, onClose, onSave, editModalData
                 input: {
                     email: data.email,
                     slack: data.slack,
+                    pictureLink: data.photoUrl,
                 },
             },
         })
@@ -55,6 +58,7 @@ export default function GroupEditModal({ visible, onClose, onSave, editModalData
                     email: '',
                     slack: '',
                     urn: '',
+                    photoUrl: '',
                 });
             })
             .catch((e) => {
@@ -125,6 +129,19 @@ export default function GroupEditModal({ visible, onClose, onSave, editModalData
                         onChange={(event) => setData({ ...data, slack: event.target.value })}
                     />
                 </Form.Item>
+
+                <Form.Item
+                    name="photoUrl"
+                    label={<Typography.Text strong>Image URL</Typography.Text>}
+                    rules={[{ whitespace: true }, { type: 'url', message: 'not valid url' }]}
+                    hasFeedback
+                >
+                    <Input
+                        placeholder="https://www.example.com/photo.png"
+                        value={data.photoUrl}
+                        onChange={(event) => setData({ ...data, photoUrl: event.target.value })}
+                    />
+                </Form.Item>
             </Form>
         </Modal>
     );

datahub-web-react/src/app/entity/group/GroupInfoSideBar.tsx

@@ -216,6 +216,7 @@ export default function GroupInfoSidebar({ sideBarData, refetch }: Props) {
         urn,
         email,
         slack,
+        photoUrl
     };
 
     // About Text save

datahub-web-react/src/app/entity/group/GroupProfile.tsx

@@ -89,7 +89,7 @@ export default function GroupProfile() {
 
     // Side bar data
     const sideBarData = {
-        photoUrl: undefined,
+        photoUrl: data?.corpGroup?.editableProperties?.pictureLink || undefined,
         avatarName:
             data?.corpGroup?.properties?.displayName ||
             data?.corpGroup?.name ||

datahub-web-react/src/app/identity/group/GroupListItem.tsx

@@ -54,7 +54,7 @@ export default function GroupListItem({ group, onDelete, selectRoleOptions, refe
             <GroupItemContainer>
                 <Link to={`${entityRegistry.getEntityUrl(EntityType.CorpGroup, group.urn)}`}>
                     <GroupHeaderContainer>
-                        <CustomAvatar size={32} name={displayName} />
+                        <CustomAvatar size={32} name={displayName}   photoUrl={group?.editableProperties?.pictureLink || undefined}/>
                         <div style={{ marginLeft: 16, marginRight: 16 }}>
                             <div>
                                 <Typography.Text>{displayName}</Typography.Text>

datahub-web-react/src/app/identity/group/cacheUtils.ts

@@ -45,6 +45,9 @@ const createFullGroup = (baseGroup) => {
         },
         memberCount: null,
         roles: null,
+        editableProperties: {
+            pictureLink: null,
+        },
     };
 };
 

datahub-web-react/src/graphql/group.graphql

@@ -17,6 +17,7 @@ query getGroup($urn: String!, $membersCount: Int!) {
             description
             slack
             email
+            pictureLink
         }
         properties {
             displayName
@@ -201,6 +202,9 @@ query listGroups($input: ListGroupsInput!) {
                 description
                 email
             }
+            editableProperties {
+                pictureLink
+            }
             memberCount: relationships(
                 input: { types: ["IsMemberOfGroup", "IsMemberOfNativeGroup"], direction: INCOMING, start: 0, count: 1 }
             ) {

smoke-test/tests/cypress/cypress/e2e/settings/managing_groups.js

@@ -64,7 +64,6 @@ describe("create and manage group", () => {
     });
 
     it("update group info", () => {
-        var expected_name = Cypress.env('ADMIN_USERNAME');
         cy.loginWithCredentials();
         cy.visit("/settings/identities/groups");
         cy.clickOptionWithText(group_name);
@@ -79,14 +78,14 @@ describe("create and manage group", () => {
         cy.waitTextVisible("Changes saved.");
         cy.contains("Test group description EDITED").should("be.visible");
         cy.clickOptionWithText("Add Owners");
-        cy.contains("Search for users or groups...").click({ force: true });
-        cy.focused().type(expected_name);
-        cy.get(".ant-select-item-option").contains(expected_name, { matchCase: false }).click();
+        cy.get('[id="owner"]').click({ force: true });
+        cy.focused().type(username);
+        cy.get(".ant-select-item-option").contains(username, { matchCase: false }).click();
         cy.focused().blur();
-        cy.contains(expected_name, { matchCase: false }).should("have.length", 1);
+        cy.contains(username, { matchCase: false }).should("have.length", 1);
         cy.get('[role="dialog"] button').contains("Done").click();
         cy.waitTextVisible("Owners Added");
-        cy.contains(expected_name, { matchCase: false }).should("be.visible");
+        cy.contains(username, { matchCase: false }).should("be.visible");
         cy.clickOptionWithText("Edit Group");
         cy.waitTextVisible("Edit Profile");
         cy.get("#email").type(`${test_id}@testemail.com`);
@@ -97,7 +96,7 @@ describe("create and manage group", () => {
         cy.waitTextVisible(`#${test_id}`);
     });
 
-    it("test user verify group participation", () => {
+    it("test User verify group participation", () => {
         cy.loginWithCredentials();
         cy.visit("/settings/identities/groups");
         cy.hideOnboardingTour();