feat(ui/groups): add ability to set logos for datahub groups

Author: gaurav2733

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/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 }
             ) {