From 35d9b780444e514218f7e845caf2582231b20dd2 Mon Sep 17 00:00:00 2001 From: akarsh991 <154210409+akarsh991@users.noreply.github.com> Date: Tue, 5 Mar 2024 18:00:40 +0530 Subject: [PATCH] feat(ui): add option to add picture link for groups (#9882) Co-authored-by: gaurav2733 --- .../graphql/types/corpgroup/CorpGroupType.java | 4 ++++ .../CorpGroupEditablePropertiesMapper.java | 13 +++++++++++++ .../src/main/resources/entity.graphql | 10 ++++++++++ .../src/app/entity/group/GroupEditModal.tsx | 17 +++++++++++++++++ .../src/app/entity/group/GroupInfoSideBar.tsx | 1 + .../src/app/entity/group/GroupProfile.tsx | 2 +- .../src/app/identity/group/GroupListItem.tsx | 2 +- .../src/app/identity/group/cacheUtils.ts | 3 +++ datahub-web-react/src/graphql/group.graphql | 4 ++++ .../cypress/e2e/settings/managing_groups.js | 13 ++++++------- 10 files changed, 60 insertions(+), 9 deletions(-) diff --git a/datahub-graphql-core/src/main/java/com/linkedin/datahub/graphql/types/corpgroup/CorpGroupType.java b/datahub-graphql-core/src/main/java/com/linkedin/datahub/graphql/types/corpgroup/CorpGroupType.java index 4eb038632c6c69..3e82c543a0098c 100644 --- a/datahub-graphql-core/src/main/java/com/linkedin/datahub/graphql/types/corpgroup/CorpGroupType.java +++ b/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; } } diff --git a/datahub-graphql-core/src/main/java/com/linkedin/datahub/graphql/types/corpgroup/mappers/CorpGroupEditablePropertiesMapper.java b/datahub-graphql-core/src/main/java/com/linkedin/datahub/graphql/types/corpgroup/mappers/CorpGroupEditablePropertiesMapper.java index a6e14535cf0b7f..a7fde4f42a6793 100644 --- a/datahub-graphql-core/src/main/java/com/linkedin/datahub/graphql/types/corpgroup/mappers/CorpGroupEditablePropertiesMapper.java +++ b/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; } } diff --git a/datahub-graphql-core/src/main/resources/entity.graphql b/datahub-graphql-core/src/main/resources/entity.graphql index 855cf19f0cb3b8..ec27bff61f8f3a 100644 --- a/datahub-graphql-core/src/main/resources/entity.graphql +++ b/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 } """ diff --git a/datahub-web-react/src/app/entity/group/GroupEditModal.tsx b/datahub-web-react/src/app/entity/group/GroupEditModal.tsx index 9db52c7598d1e8..be1289ad3202b3 100644 --- a/datahub-web-react/src/app/entity/group/GroupEditModal.tsx +++ b/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 })} /> + + Image URL} + rules={[{ whitespace: true }, { type: 'url', message: 'not valid url' }]} + hasFeedback + > + setData({ ...data, photoUrl: event.target.value })} + /> + ); diff --git a/datahub-web-react/src/app/entity/group/GroupInfoSideBar.tsx b/datahub-web-react/src/app/entity/group/GroupInfoSideBar.tsx index 044b09dc185e53..f4dc03ea0fd324 100644 --- a/datahub-web-react/src/app/entity/group/GroupInfoSideBar.tsx +++ b/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 diff --git a/datahub-web-react/src/app/entity/group/GroupProfile.tsx b/datahub-web-react/src/app/entity/group/GroupProfile.tsx index 11ed31e00003f4..e8001ebccc3b5a 100644 --- a/datahub-web-react/src/app/entity/group/GroupProfile.tsx +++ b/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 || diff --git a/datahub-web-react/src/app/identity/group/GroupListItem.tsx b/datahub-web-react/src/app/identity/group/GroupListItem.tsx index 74c0a8afb4d02e..e5aada4800253c 100644 --- a/datahub-web-react/src/app/identity/group/GroupListItem.tsx +++ b/datahub-web-react/src/app/identity/group/GroupListItem.tsx @@ -54,7 +54,7 @@ export default function GroupListItem({ group, onDelete, selectRoleOptions, refe - +
{displayName} diff --git a/datahub-web-react/src/app/identity/group/cacheUtils.ts b/datahub-web-react/src/app/identity/group/cacheUtils.ts index 272b9f841d25c8..3674a1e3ebf1e2 100644 --- a/datahub-web-react/src/app/identity/group/cacheUtils.ts +++ b/datahub-web-react/src/app/identity/group/cacheUtils.ts @@ -45,6 +45,9 @@ const createFullGroup = (baseGroup) => { }, memberCount: null, roles: null, + editableProperties: { + pictureLink: null, + }, }; }; diff --git a/datahub-web-react/src/graphql/group.graphql b/datahub-web-react/src/graphql/group.graphql index c8d3ff5e4731c8..7c47a83451a4ee 100644 --- a/datahub-web-react/src/graphql/group.graphql +++ b/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 } ) { diff --git a/smoke-test/tests/cypress/cypress/e2e/settings/managing_groups.js b/smoke-test/tests/cypress/cypress/e2e/settings/managing_groups.js index 8421bd288edf07..d9f69cd9a5ec42 100644 --- a/smoke-test/tests/cypress/cypress/e2e/settings/managing_groups.js +++ b/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();