diff --git a/datahub-web-react/src/app/permissions/policy/PolicyActorForm.tsx b/datahub-web-react/src/app/permissions/policy/PolicyActorForm.tsx
index 8adfcdc76d..0c75a4cc2b 100644
--- a/datahub-web-react/src/app/permissions/policy/PolicyActorForm.tsx
+++ b/datahub-web-react/src/app/permissions/policy/PolicyActorForm.tsx
@@ -1,14 +1,16 @@
+import { Text } from '@components';
import { Form, Select, Switch, Tag, Typography } from 'antd';
import { Maybe } from 'graphql/jsutils/Maybe';
import React from 'react';
import styled from 'styled-components';
import { CustomAvatar } from '@app/shared/avatar';
+import ActorPill from '@app/sharedV2/owners/ActorPill';
import { useEntityRegistry } from '@app/useEntityRegistry';
import { useListOwnershipTypesQuery } from '@graphql/ownership.generated';
-import { useGetSearchResultsLazyQuery } from '@graphql/search.generated';
-import { ActorFilter, CorpUser, EntityType, PolicyType, SearchResult } from '@types';
+import { useGetSearchResultsForMultipleLazyQuery } from '@graphql/search.generated';
+import { ActorFilter, CorpGroup, CorpUser, EntityType, PolicyType, SearchResult } from '@types';
type Props = {
policyType: PolicyType;
@@ -37,12 +39,26 @@ const SearchResultContent = styled.div`
display: flex;
justify-content: center;
align-items: center;
+ gap: 3px;
+`;
+
+const ActorWrapper = styled.div`
+ margin-top: 2px;
+ margin-right: 2px;
`;
const OwnershipWrapper = styled.div`
margin-top: 12px;
`;
+const StyledTag = styled(Tag)`
+ padding: 0px 7px 0px 7px;
+ margin-right: 3px;
+ display: flex;
+ justify-content: start;
+ align-items: center;
+`;
+
/**
* Component used to construct the "actors" portion of a DataHub
* access Policy by populating an ActorFilter object.
@@ -51,8 +67,8 @@ export default function PolicyActorForm({ policyType, actors, setActors }: Props
const entityRegistry = useEntityRegistry();
// Search for actors while building policy.
- const [userSearch, { data: userSearchData }] = useGetSearchResultsLazyQuery();
- const [groupSearch, { data: groupSearchData }] = useGetSearchResultsLazyQuery();
+ const [userSearch, { data: userSearchData }] = useGetSearchResultsForMultipleLazyQuery();
+ const [groupSearch, { data: groupSearchData }] = useGetSearchResultsForMultipleLazyQuery();
const { data: ownershipData } = useListOwnershipTypesQuery({
variables: {
input: {},
@@ -87,6 +103,10 @@ export default function PolicyActorForm({ policyType, actors, setActors }: Props
});
};
+ // User and group dropdown search results!
+ const userSearchResults = userSearchData?.searchAcrossEntities?.searchResults;
+ const groupSearchResults = groupSearchData?.searchAcrossEntities?.searchResults;
+
// When a user search result is selected, add the urn to the ActorFilter
const onSelectUserActor = (newUser: string) => {
if (newUser === 'All') {
@@ -96,9 +116,18 @@ export default function PolicyActorForm({ policyType, actors, setActors }: Props
});
} else {
const newUserActors = [...(actors.users || []), newUser];
+
+ // Find the selected user entity from search results and add it to resolved users
+ const selectedUserEntity = userSearchResults?.find((result) => result.entity.urn === newUser)
+ ?.entity as CorpUser;
+ const newResolvedUsers = selectedUserEntity
+ ? [...(actors.resolvedUsers || []), selectedUserEntity]
+ : actors.resolvedUsers;
+
setActors({
...actors,
users: newUserActors,
+ resolvedUsers: newResolvedUsers,
});
}
};
@@ -128,9 +157,18 @@ export default function PolicyActorForm({ policyType, actors, setActors }: Props
});
} else {
const newGroupActors = [...(actors.groups || []), newGroup];
+
+ // Find the selected group entity from search results and add it to resolved groups
+ const selectedGroupEntity = groupSearchResults?.find((result) => result.entity.urn === newGroup)
+ ?.entity as CorpGroup;
+ const newResolvedGroups = selectedGroupEntity
+ ? [...(actors.resolvedGroups || []), selectedGroupEntity]
+ : actors.resolvedGroups;
+
setActors({
...actors,
groups: newGroupActors,
+ resolvedGroups: newResolvedGroups,
});
}
};
@@ -156,7 +194,7 @@ export default function PolicyActorForm({ policyType, actors, setActors }: Props
searchQuery({
variables: {
input: {
- type,
+ types: [type],
query: text,
start: 0,
count: 10,
@@ -185,13 +223,10 @@ export default function PolicyActorForm({ policyType, actors, setActors }: Props
return (
-
- {displayName}
+
+
+ {displayName}
+
);
@@ -200,38 +235,16 @@ export default function PolicyActorForm({ policyType, actors, setActors }: Props
// Whether to show "owners" switch.
const showAppliesToOwners = policyType === PolicyType.Metadata;
- // User and group dropdown search results!
- const userSearchResults = userSearchData?.search?.searchResults;
- const groupSearchResults = groupSearchData?.search?.searchResults;
-
// Select dropdown values.
- const usersSelectValue = actors.allUsers ? ['All'] : actors.users || [];
- const groupsSelectValue = actors.allGroups ? ['All'] : actors.groups || [];
+ const usersSelectUrns = actors.allUsers ? ['All'] : actors.users || [];
+ const groupsSelectUrns = actors.allGroups ? ['All'] : actors.groups || [];
const ownershipTypesSelectValue = actors.resourceOwnersTypes || [];
+ const usersSelectValues = actors.resolvedUsers?.filter((u) => usersSelectUrns.includes(u.urn)) || [];
+ const groupsSelectValues = actors.resolvedGroups?.filter((g) => groupsSelectUrns.includes(g.urn)) || [];
- const tagRender = (props) => {
- // eslint-disable-next-line react/prop-types
- const { label, closable, onClose, value } = props;
- const onPreventMouseDown = (event) => {
- event.preventDefault();
- event.stopPropagation();
- };
- return (
-
- {label}
-
- );
+ const onPreventMouseDown = (event) => {
+ event.preventDefault();
+ event.stopPropagation();
};
return (
@@ -287,14 +300,36 @@ export default function PolicyActorForm({ policyType, actors, setActors }: Props