Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(policy): Add tooltip and view button #4525

Merged
merged 2 commits into from
Mar 29, 2022
Merged

feat(policy): Add tooltip and view button #4525

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
47cdd56
Add tooltip and view
Mar 29, 2022
182484b
Add links to details page
Mar 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 22 additions & 11 deletions datahub-web-react/src/app/policy/PolicyDetailsModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { Button, Divider, Modal, Tag, Typography } from 'antd';
import styled from 'styled-components';
import { useEntityRegistry } from '../useEntityRegistry';
Expand Down Expand Up @@ -74,18 +75,32 @@ export default function PolicyDetailsModal({ policy, visible, onClose, privilege
config: { policiesConfig },
} = useAppConfig();

const actionButtons = (
<ButtonsContainer>
<Button onClick={onClose}>Close</Button>
</ButtonsContainer>
);

const getDisplayName = (entity) => {
if (!entity) {
return null;
}
return entityRegistry.getDisplayName(entity.type, entity);
};

const actionButtons = (
<ButtonsContainer>
<Button onClick={onClose}>Close</Button>
</ButtonsContainer>
);
const getEntityTag = (criterionValue) => {
return (
(criterionValue.entity && (
<Link
target="_blank"
rel="noopener noreferrer"
to={() => `/${entityRegistry.getPathName(criterionValue.entity!.type)}/${criterionValue.value}`}
>
{getDisplayName(criterionValue.entity)}
</Link>
)) || <Typography.Text>{criterionValue.value}</Typography.Text>
);
};

return (
<Modal title={policy?.name} visible={visible} onCancel={onClose} closable width={800} footer={actionButtons}>
Expand Down Expand Up @@ -133,9 +148,7 @@ export default function PolicyDetailsModal({ policy, visible, onClose, privilege
return (
// eslint-disable-next-line react/no-array-index-key
<PoliciesTag key={`resource-${value.value}-${key}`}>
<Typography.Text>
{getDisplayName(value.entity) || value.value}
</Typography.Text>
{getEntityTag(value)}
</PoliciesTag>
);
})) || <PoliciesTag>All</PoliciesTag>}
Expand All @@ -148,9 +161,7 @@ export default function PolicyDetailsModal({ policy, visible, onClose, privilege
return (
// eslint-disable-next-line react/no-array-index-key
<PoliciesTag key={`domain-${value.value}-${key}`}>
<Typography.Text>
{getDisplayName(value.entity) || value.value}
</Typography.Text>
{getEntityTag(value)}
</PoliciesTag>
);
})) || <PoliciesTag>All</PoliciesTag>}
Expand Down
35 changes: 30 additions & 5 deletions datahub-web-react/src/app/policy/PolicyPrivilegeForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useMemo } from 'react';
import { Form, Select, Tag, Typography } from 'antd';
import { Link } from 'react-router-dom';
import { Form, Select, Tag, Tooltip, Typography } from 'antd';
import styled from 'styled-components';

import { useEntityRegistry } from '../useEntityRegistry';
Expand All @@ -26,6 +27,13 @@ type Props = {
setPrivileges: (newPrivs: Array<string>) => void;
};

const SearchResultContainer = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
`;

const PrivilegesForm = styled(Form)`
margin: 12px;
margin-top: 36px;
Expand Down Expand Up @@ -100,7 +108,7 @@ export default function PolicyPrivilegeForm({
const getEntityFromSearchResults = (searchResults, urn) =>
searchResults?.map((result) => result.entity).find((entity) => entity.urn === urn);

// When a privilege is selected, add its type to the privileges list test
// When a privilege is selected, add its type to the privileges list
const onSelectPrivilege = (privilege: string) => {
if (privilege === 'All') {
setPrivileges(privilegeOptions.map((priv) => priv.type) as never[]);
Expand Down Expand Up @@ -246,6 +254,21 @@ export default function PolicyPrivilegeForm({
}
};

const renderSearchResult = (result) => {
return (
<SearchResultContainer>
{entityRegistry.getDisplayName(result.entity.type, result.entity)}
<Link
target="_blank"
rel="noopener noreferrer"
to={() => `/${entityRegistry.getPathName(result.entity.type)}/${result.entity.urn}`}
>
View
</Link>
</SearchResultContainer>
);
};

return (
<PrivilegesForm layout="vertical">
{showResourceFilterInput && (
Expand Down Expand Up @@ -293,12 +316,14 @@ export default function PolicyPrivilegeForm({
onSearch={handleResourceSearch}
tagRender={(tagProps) => (
<Tag closable={tagProps.closable} onClose={tagProps.onClose}>
{resourceUrnToDisplayName[tagProps.value.toString()] || tagProps.value.toString()}
<Tooltip title={tagProps.value.toString()}>
{resourceUrnToDisplayName[tagProps.value.toString()] || tagProps.value.toString()}
</Tooltip>
</Tag>
)}
>
{resourceSearchResults?.map((result) => (
<Select.Option value={result.entity.urn}>{getDisplayName(result.entity)}</Select.Option>
<Select.Option value={result.entity.urn}>{renderSearchResult(result)}</Select.Option>
))}
</Select>
</Form.Item>
Expand All @@ -324,7 +349,7 @@ export default function PolicyPrivilegeForm({
)}
>
{domainSearchResults?.map((result) => (
<Select.Option value={result.entity.urn}>{getDisplayName(result.entity)}</Select.Option>
<Select.Option value={result.entity.urn}>{renderSearchResult(result)}</Select.Option>
))}
</Select>
</Form.Item>
Expand Down