yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-12-24 14:08:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Revamp Policies CollapseTable in Card style (#7189)

Browse Source 
* Convert Policies Collapse Table in Card style

* changes as per comments
This commit is contained in:
Ashish Gupta 2022-09-03 18:58:30 +05:30 committed by GitHub
parent 6ebaa23bc5
commit ec7dd2caba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 69 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/PoliciesDetailPage.tsx
View File

@ -14,11 +14,13 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
Button,
Collapse,
Card,
Col,
Dropdown,
Empty,
Menu,
Modal,
Row,
Space,
Table,
Tabs,
@ -28,7 +30,7 @@ import {
import { ColumnsType } from 'antd/lib/table';
import { AxiosError } from 'axios';
import { compare } from 'fast-json-patch';
import { isEmpty, isUndefined, startCase, uniqueId } from 'lodash';
import { isEmpty, isUndefined, startCase } from 'lodash';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Link, useHistory, useParams } from 'react-router-dom';
import {
@ -69,8 +71,6 @@ import SVGIcons, { Icons } from '../../../utils/SvgUtils';
import { showErrorToast } from '../../../utils/ToastUtils';
import './PoliciesDetail.less';
const { Panel } = Collapse;
const { TabPane } = Tabs;
type Attribute = 'roles' | 'teams';
@ -474,89 +474,97 @@ const PoliciesDetailPage = () => {
Add Rule
</Button>
</Tooltip>
<Space className="tw-w-full" direction="vertical" size={16}>
<Space
className="tw-w-full tw-pt-4"
direction="vertical"
size={20}>
{policy.rules.map((rule) => (
<Collapse key={uniqueId()}>
<Panel
header={
<Space
className="tw-w-full"
direction="vertical"
size={4}>
<Space
align="baseline"
className="tw-w-full tw-justify-between"
size={4}>
<Typography.Text
className="tw-font-medium tw-text-base tw-text-grey-body"
data-testid="rule-name">
{rule.name}
</Typography.Text>
{getRuleActionElement(rule)}
</Space>
<div
className="tw--ml-5"
data-testid="description">
<Card key={rule.name || 'rule'}>
<Space
align="baseline"
className="tw-w-full tw-justify-between tw-pb-5"
direction="horizontal">
<Typography.Text
className="tw-font-medium tw-text-base tw-text-grey-body"
data-testid="rule-name">
{rule.name}
</Typography.Text>
{getRuleActionElement(rule)}
</Space>
<Space
className="tw-w-full"
direction="vertical"
size={12}>
{rule.description && (
<Row data-testid="description">
<Col span={2}>
<Typography.Text className="tw-text-grey-muted">
Description:
Description :
</Typography.Text>
</Col>
<Col span={22}>
<RichTextEditorPreviewer
markdown={rule.description || ''}
/>
</div>
</Space>
}
key={rule.name || 'rule'}>
<Space direction="vertical" size={16}>
<Space
data-testid="resources"
direction="vertical"
size={4}>
</Col>
</Row>
)}
<Row data-testid="resources">
<Col span={2}>
<Typography.Text className="tw-text-grey-muted tw-mb-0">
Resources:
Resources :
</Typography.Text>
</Col>
<Col span={22}>
<Typography.Text className="tw-text-grey-body">
{rule.resources
?.map((resource) => startCase(resource))
?.join(', ')}
</Typography.Text>
</Space>
</Col>
</Row>
<Space
data-testid="operations"
direction="vertical"
size={4}>
<Row data-testid="operations">
<Col span={2}>
<Typography.Text className="tw-text-grey-muted">
Operations:
Operations :
</Typography.Text>
</Col>
<Col span={22}>
<Typography.Text className="tw-text-grey-body">
{rule.operations?.join(', ')}
</Typography.Text>
</Space>
<Space
data-testid="effect"
direction="vertical"
size={4}>
</Col>
</Row>
<Row data-testid="effect">
<Col span={2}>
<Typography.Text className="tw-text-grey-muted">
Effect:
Effect :
</Typography.Text>
</Col>
<Col span={22}>
<Typography.Text className="tw-text-grey-body">
{startCase(rule.effect)}
</Typography.Text>
</Space>
{rule.condition && (
<Space direction="vertical" size={4}>
</Col>
</Row>
{rule.condition && (
<Row data-testid="condition">
<Col span={2}>
<Typography.Text className="tw-text-grey-muted">
Condition:
Condition :
</Typography.Text>
<code data-testid="condition">
{rule.condition}
</code>
</Space>
)}
</Space>
</Panel>
</Collapse>
</Col>
<Col span={22}>
<code>{rule.condition}</code>
</Col>
</Row>
)}
</Space>
</Card>
))}
</Space>
</Space>