yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-10-19 12:50:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI : Remove tailwind css dependency from Policies and Rule Page (#9518)

Browse Source 
* Remove tailwind css dependicy from Roles and Basic signup form

* Remove tailwind css dependicy from Policies and Rule Page
This commit is contained in:
Ashish Gupta 2022-12-30 19:15:04 +05:30 committed by GitHub
parent 5de9658545
commit d7e4ec30ac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 49 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
openmetadata-ui/src/main/resources/ui/src/pages/AddServicePage/AddServicePage.component.tsx
View File

@ -185,7 +185,7 @@ const AddServicePage = () => {
return ( return (
<PageContainerV1> <PageContainerV1>
<div className="tw-self-center"> <div className="self-center">
<AddService <AddService
addIngestion={addIngestion} addIngestion={addIngestion}
handleAddIngestion={handleAddIngestion} handleAddIngestion={handleAddIngestion}

4
openmetadata-ui/src/main/resources/ui/src/pages/AlertsPage/AlertsPage.tsx
View File

@ -109,7 +109,7 @@ const AlertsPage = () => {
<Link to={`edit-alert/${id}`}> <Link to={`edit-alert/${id}`}>
<Button <Button
data-testid={`alert-edit-${record.name}`} data-testid={`alert-edit-${record.name}`}
icon={<SVGIcons className="tw-w-4" icon={Icons.EDIT} />} icon={<SVGIcons className="w-4" icon={Icons.EDIT} />}
type="text" type="text"
/> />
</Link> </Link>
@ -118,7 +118,7 @@ const AlertsPage = () => {
<Button <Button
data-testid={`alert-delete-${record.name}`} data-testid={`alert-delete-${record.name}`}
disabled={record.provider === ProviderType.System} disabled={record.provider === ProviderType.System}
icon={<SVGIcons className="tw-w-4" icon={Icons.DELETE} />} icon={<SVGIcons className="w-4" icon={Icons.DELETE} />}
type="text" type="text"
onClick={() => setSelectedAlert(record)} onClick={() => setSelectedAlert(record)}
/> />

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

@ -112,12 +112,12 @@ const AddRulePage = () => {
} }
return ( return (
<Row className="tw-bg-body-main tw-h-auto p-y-lg" gutter={[16, 16]}> <Row className="bg-body-main h-auto p-y-lg" gutter={[16, 16]}>
<Col offset={5} span={14}> <Col offset={5} span={14}>
<TitleBreadcrumb className="m-b-md" titleLinks={breadcrumb} /> <TitleBreadcrumb className="m-b-md" titleLinks={breadcrumb} />
<Card> <Card>
<Typography.Paragraph <Typography.Paragraph
className="tw-text-base" className="text-base"
data-testid="add-rule-title"> data-testid="add-rule-title">
Add New Rule Add New Rule
</Typography.Paragraph> </Typography.Paragraph>
@ -130,7 +130,7 @@ const AddRulePage = () => {
layout="vertical" layout="vertical"
onFinish={handleSubmit}> onFinish={handleSubmit}>
<RuleForm ruleData={ruleData} setRuleData={setRuleData} /> <RuleForm ruleData={ruleData} setRuleData={setRuleData} />
<Space align="center" className="tw-w-full tw-justify-end"> <Space align="center" className="w-full justify-end">
<Button data-testid="cancel-btn" type="link" onClick={handleBack}> <Button data-testid="cancel-btn" type="link" onClick={handleBack}>
Cancel Cancel
</Button> </Button>

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

@ -133,12 +133,12 @@ const EditRulePage = () => {
} }
return ( return (
<Row className="tw-bg-body-main tw-h-auto p-y-lg" gutter={[16, 16]}> <Row className="bg-body-main h-auto p-y-lg" gutter={[16, 16]}>
<Col offset={5} span={14}> <Col offset={5} span={14}>
<TitleBreadcrumb className="m-b-md" titleLinks={breadcrumb} /> <TitleBreadcrumb className="m-b-md" titleLinks={breadcrumb} />
<Card> <Card>
<Typography.Paragraph <Typography.Paragraph
className="tw-text-base" className="text-base"
data-testid="edit-rule-title"> data-testid="edit-rule-title">
Edit Rule {`"${ruleName}"`} Edit Rule {`"${ruleName}"`}
</Typography.Paragraph> </Typography.Paragraph>
@ -155,7 +155,7 @@ const EditRulePage = () => {
layout="vertical" layout="vertical"
onFinish={handleSubmit}> onFinish={handleSubmit}>
<RuleForm ruleData={ruleData} setRuleData={setRuleData} /> <RuleForm ruleData={ruleData} setRuleData={setRuleData} />
<Space align="center" className="tw-w-full tw-justify-end"> <Space align="center" className="w-full justify-end">
<Button data-testid="cancel-btn" type="link" onClick={handleBack}> <Button data-testid="cancel-btn" type="link" onClick={handleBack}>
Cancel Cancel
</Button> </Button>

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

@ -261,7 +261,7 @@ const PoliciesDetailPage = () => {
{ {
label: ( label: (
<Button <Button
className="tw-p-0" className="p-0"
data-testid="edit-rule" data-testid="edit-rule"
type="text" type="text"
onClick={(e) => { onClick={(e) => {
@ -285,7 +285,7 @@ const PoliciesDetailPage = () => {
{ {
label: ( label: (
<Button <Button
className="tw-p-0" className="p-0"
data-testid="delete-rule" data-testid="delete-rule"
type="text" type="text"
onClick={(e) => { onClick={(e) => {
@ -324,7 +324,7 @@ const PoliciesDetailPage = () => {
e.stopPropagation(); e.stopPropagation();
}}> }}>
<FontAwesomeIcon <FontAwesomeIcon
className="tw-text-grey-body" className="text-grey-body"
icon="ellipsis-vertical" icon="ellipsis-vertical"
/> />
</Button> </Button>
@ -390,7 +390,7 @@ const PoliciesDetailPage = () => {
</ErrorPlaceHolder> </ErrorPlaceHolder>
) : ( ) : (
<Space <Space
className="tw-w-full tabpane-space" className="w-full tabpane-space"
direction="vertical"> direction="vertical">
<Tooltip <Tooltip
title={ title={
@ -409,20 +409,17 @@ const PoliciesDetailPage = () => {
</Button> </Button>
</Tooltip> </Tooltip>
<Space <Space className="w-full" direction="vertical" size={20}>
className="tw-w-full"
direction="vertical"
size={20}>
{policy.rules.map((rule) => ( {policy.rules.map((rule) => (
<Card <Card
data-testid="rule-card" data-testid="rule-card"
key={rule.name || 'rule'}> key={rule.name || 'rule'}>
<Space <Space
align="baseline" align="baseline"
className="tw-w-full tw-justify-between tw-pb-5" className="w-full justify-between p-b-lg"
direction="horizontal"> direction="horizontal">
<Typography.Text <Typography.Text
className="tw-font-medium tw-text-base tw-text-grey-body" className="font-medium text-base text-grey-body"
data-testid="rule-name"> data-testid="rule-name">
{rule.name} {rule.name}
</Typography.Text> </Typography.Text>
@ -430,13 +427,13 @@ const PoliciesDetailPage = () => {
</Space> </Space>
<Space <Space
className="tw-w-full" className="w-full"
direction="vertical" direction="vertical"
size={12}> size={12}>
{rule.description && ( {rule.description && (
<Row data-testid="description"> <Row data-testid="description">
<Col span={2}> <Col span={2}>
<Typography.Text className="tw-text-grey-muted"> <Typography.Text className="text-grey-muted">
{t('label.description')} : {t('label.description')} :
</Typography.Text> </Typography.Text>
</Col> </Col>
@ -450,12 +447,12 @@ const PoliciesDetailPage = () => {
<Row data-testid="resources"> <Row data-testid="resources">
<Col span={2}> <Col span={2}>
<Typography.Text className="tw-text-grey-muted tw-mb-0"> <Typography.Text className="text-grey-muted m-b-0">
{t('label.resource-plural')} : {t('label.resources')} :
</Typography.Text> </Typography.Text>
</Col> </Col>
<Col span={22}> <Col span={22}>
<Typography.Text className="tw-text-grey-body"> <Typography.Text className="text-grey-body">
{rule.resources {rule.resources
?.map((resource) => startCase(resource)) ?.map((resource) => startCase(resource))
?.join(', ')} ?.join(', ')}
@ -465,24 +462,24 @@ const PoliciesDetailPage = () => {
<Row data-testid="operations"> <Row data-testid="operations">
<Col span={2}> <Col span={2}>
<Typography.Text className="tw-text-grey-muted"> <Typography.Text className="text-grey-muted">
{t('label.operation-plural')} : {t('label.operations')} :
</Typography.Text> </Typography.Text>
</Col> </Col>
<Col span={22}> <Col span={22}>
<Typography.Text className="tw-text-grey-body"> <Typography.Text className="text-grey-body">
{rule.operations?.join(', ')} {rule.operations?.join(', ')}
</Typography.Text> </Typography.Text>
</Col> </Col>
</Row> </Row>
<Row data-testid="effect"> <Row data-testid="effect">
<Col span={2}> <Col span={2}>
<Typography.Text className="tw-text-grey-muted"> <Typography.Text className="text-grey-muted">
{t('label.effect')} : {t('label.effect')} :
</Typography.Text> </Typography.Text>
</Col> </Col>
<Col span={22}> <Col span={22}>
<Typography.Text className="tw-text-grey-body"> <Typography.Text className="text-grey-body">
{startCase(rule.effect)} {startCase(rule.effect)}
</Typography.Text> </Typography.Text>
</Col> </Col>
@ -490,7 +487,7 @@ const PoliciesDetailPage = () => {
{rule.condition && ( {rule.condition && (
<Row data-testid="condition"> <Row data-testid="condition">
<Col span={2}> <Col span={2}>
<Typography.Text className="tw-text-grey-muted"> <Typography.Text className="text-grey-muted">
{t('label.condition')} : {t('label.condition')} :
</Typography.Text> </Typography.Text>
</Col> </Col>

2
openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/PoliciesDetailsList.component.tsx
View File

@ -61,7 +61,7 @@ const PoliciesDetailsList = ({
} }
return ( return (
<Link className="hover:tw-underline tw-cursor-pointer" to={link}> <Link className="link-hover" to={link}>
{getEntityName(record)} {getEntityName(record)}
</Link> </Link>
); );

8
openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesListPage/PoliciesList.tsx
View File

@ -72,7 +72,7 @@ const PoliciesList: FC<PolicyListProps> = ({ policies, fetchPolicies }) => {
key: 'name', key: 'name',
render: (_, record) => ( render: (_, record) => (
<Link <Link
className="hover:tw-underline tw-cursor-pointer" className="link-hover"
data-testid="policy-name" data-testid="policy-name"
to={getPolicyWithFqnPath(record.fullyQualifiedName || '')}> to={getPolicyWithFqnPath(record.fullyQualifiedName || '')}>
{getEntityName(record)} {getEntityName(record)}
@ -113,7 +113,7 @@ const PoliciesList: FC<PolicyListProps> = ({ policies, fetchPolicies }) => {
)} )}
{hasMore && ( {hasMore && (
<Popover <Popover
className="tw-cursor-pointer" className="cursor-pointer"
content={ content={
<Space wrap size={4}> <Space wrap size={4}>
{record.roles.slice(LIST_CAP).map((role) => {record.roles.slice(LIST_CAP).map((role) =>
@ -135,9 +135,9 @@ const PoliciesList: FC<PolicyListProps> = ({ policies, fetchPolicies }) => {
)} )}
</Space> </Space>
} }
overlayClassName="tw-w-40 tw-text-center" overlayClassName="w-40 text-center"
trigger="click"> trigger="click">
<Tag className="tw-ml-1" data-testid="plus-more-count">{`+${ <Tag className="m-l-xss" data-testid="plus-more-count">{`+${
listLength - LIST_CAP listLength - LIST_CAP
} more`}</Tag> } more`}</Tag>
</Popover> </Popover>

10
openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/RuleForm/RuleForm.tsx
View File

@ -250,7 +250,7 @@ const RuleForm: FC<RuleFormProps> = ({ ruleData, setRuleData }) => {
]}> ]}>
<TreeSelect <TreeSelect
treeCheckable treeCheckable
className="tw-w-full" className="w-full"
data-testid="resources" data-testid="resources"
placeholder={t('label.select-resource-plural')} placeholder={t('label.select-resource-plural')}
showCheckedStrategy={TreeSelect.SHOW_PARENT} showCheckedStrategy={TreeSelect.SHOW_PARENT}
@ -276,7 +276,7 @@ const RuleForm: FC<RuleFormProps> = ({ ruleData, setRuleData }) => {
]}> ]}>
<TreeSelect <TreeSelect
treeCheckable treeCheckable
className="tw-w-full" className="w-full"
data-testid="operations" data-testid="operations"
placeholder="Select Operations" placeholder="Select Operations"
showCheckedStrategy={TreeSelect.SHOW_PARENT} showCheckedStrategy={TreeSelect.SHOW_PARENT}
@ -324,18 +324,18 @@ const RuleForm: FC<RuleFormProps> = ({ ruleData, setRuleData }) => {
onSearch={handleConditionSearch} onSearch={handleConditionSearch}
/> />
{validationError && ( {validationError && (
<div className="tw-mt-1" data-testid="condition-error" role="alert"> <div className="m-t-xss" data-testid="condition-error" role="alert">
{`❌ Invalid condition : ${validationError}`} {`❌ Invalid condition : ${validationError}`}
</div> </div>
)} )}
{isValidatingCondition && ( {isValidatingCondition && (
<div className="tw-mt-1" role="alert"> <div className="m-t-xss" role="alert">
Validating the condition... Validating the condition...
</div> </div>
)} )}
{isValidCondition && !isValidatingCondition && !validationError && ( {isValidCondition && !isValidatingCondition && !validationError && (
<div <div
className="tw-mt-1" className="m-t-xss"
data-testid="condition-success" data-testid="condition-success"
role="alert"> role="alert">
✅ Valid condition ✅ Valid condition

4
openmetadata-ui/src/main/resources/ui/src/pages/ProfilerDashboardPage/ProfilerDashboardPage.tsx
View File

@ -213,7 +213,7 @@ const ProfilerDashboardPage = () => {
if (error) { if (error) {
return ( return (
<ErrorPlaceHolder> <ErrorPlaceHolder>
<p className="tw-text-center"> <p className="text-center">
No data found{' '} No data found{' '}
{decodedEntityFQN {decodedEntityFQN
? `for column ${getNameFromFQN(decodedEntityFQN)}` ? `for column ${getNameFromFQN(decodedEntityFQN)}`
@ -224,7 +224,7 @@ const ProfilerDashboardPage = () => {
} }
return ( return (
<PageContainerV1 className="tw-py-4"> <PageContainerV1 className="p-y-md">
<ProfilerDashboard <ProfilerDashboard
fetchProfilerData={fetchProfilerData} fetchProfilerData={fetchProfilerData}
fetchTestCases={fetchTestCases} fetchTestCases={fetchTestCases}

4
openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/AddAttributeModal/AddAttributeModal.tsx
View File

@ -132,7 +132,7 @@ const AddAttributeModal: FC<Props> = ({
title={ title={
<span data-testid="modal-title"> <span data-testid="modal-title">
{title}{' '} {title}{' '}
<span className="tw-text-grey-muted tw-text-sm"> <span className="text-grey-muted text-sm">
({selectedValues.length}/{data.length} selected) ({selectedValues.length}/{data.length} selected)
</span> </span>
</span> </span>
@ -175,7 +175,7 @@ const AddAttributeModal: FC<Props> = ({
</Col> </Col>
<Col span={2}> <Col span={2}>
{selectedValues.includes(option.id) && ( {selectedValues.includes(option.id) && (
<FontAwesomeIcon className="tw-text-primary" icon="check" /> <FontAwesomeIcon className="text-primary" icon="check" />
)} )}
</Col> </Col>
</Row> </Row>

4
openmetadata-ui/src/main/resources/ui/src/pages/reset-password/reset-password.component.tsx
View File

@ -72,7 +72,7 @@ const ResetPassword = () => {
const handleReVerify = () => history.push(ROUTES.FORGOT_PASSWORD); const handleReVerify = () => history.push(ROUTES.FORGOT_PASSWORD);
return ( return (
<div className="h-full tw-py-36"> <div className="h-full p-y-36">
{tokenValid ? ( {tokenValid ? (
<Card <Card
bodyStyle={{ padding: '48px' }} bodyStyle={{ padding: '48px' }}
@ -104,7 +104,7 @@ const ResetPassword = () => {
</Col> </Col>
<Col className="mt-12 text-center" span={24}> <Col className="mt-12 text-center" span={24}>
<Typography.Text className="tw-text-xl font-medium tw-text-grey-muted"> <Typography.Text className="text-xl font-medium text-grey-muted">
Reset your Password Reset your Password
</Typography.Text> </Typography.Text>
</Col> </Col>

6
openmetadata-ui/src/main/resources/ui/src/styles/app.less
View File

@ -174,6 +174,12 @@
opacity: 0.6; opacity: 0.6;
} }
.link-hover {
&:hover {
text-decoration: underline;
cursor: pointer;
}
}
.cursor-pointer { .cursor-pointer {
cursor: pointer; cursor: pointer;
} }