mirror of
https://github.com/open-metadata/OpenMetadata.git
synced 2025-07-23 09:22:18 +00:00
fix(ui):change table constraints ui for primary key (#12629)
* change table constraints ui for primary key * added tooltip for long content
This commit is contained in:
parent
e0d293a801
commit
de769fb1f5
@ -13,7 +13,8 @@
|
|||||||
import Icon from '@ant-design/icons/lib/components/Icon';
|
import Icon from '@ant-design/icons/lib/components/Icon';
|
||||||
import { Tooltip } from 'antd';
|
import { Tooltip } from 'antd';
|
||||||
import { ReactComponent as IconKey } from 'assets/svg/icon-key.svg';
|
import { ReactComponent as IconKey } from 'assets/svg/icon-key.svg';
|
||||||
import StraightLine from 'assets/svg/straight-line.svg';
|
import SectionLine from 'assets/svg/section-line-medium.svg';
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
@ -22,7 +23,7 @@ const PrimaryKeyConstraint = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="constraint-primary-key">
|
<div className="constraint-primary-key">
|
||||||
<img src={StraightLine} />
|
<img className="primary-key-section-line" src={SectionLine} />
|
||||||
<Tooltip
|
<Tooltip
|
||||||
placement="bottom"
|
placement="bottom"
|
||||||
title={t('label.primary-key')}
|
title={t('label.primary-key')}
|
||||||
|
@ -54,17 +54,32 @@ const TableConstraints: FC<TableConstraintsProps> = ({ constraints }) => {
|
|||||||
{supportedConstraints.map(
|
{supportedConstraints.map(
|
||||||
({ constraintType, columns, referredColumns }) => {
|
({ constraintType, columns, referredColumns }) => {
|
||||||
if (constraintType === ConstraintType.PrimaryKey) {
|
if (constraintType === ConstraintType.PrimaryKey) {
|
||||||
const columnsLength = (columns?.length ?? 0) - 1;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Space wrap className="constraint-columns">
|
<div className="d-flex constraint-columns">
|
||||||
{columns?.map((column, index) => (
|
<Space
|
||||||
<Fragment key={column}>
|
className="constraint-icon-container"
|
||||||
<Typography.Text>{column}</Typography.Text>
|
direction="vertical"
|
||||||
{index < columnsLength ? <PrimaryKeyConstraint /> : null}
|
size={0}>
|
||||||
</Fragment>
|
{columns?.map((column, index) => (
|
||||||
))}
|
<Fragment key={column}>
|
||||||
</Space>
|
{(columns?.length ?? 0) - 1 !== index ? (
|
||||||
|
<PrimaryKeyConstraint />
|
||||||
|
) : null}
|
||||||
|
</Fragment>
|
||||||
|
))}
|
||||||
|
</Space>
|
||||||
|
|
||||||
|
<Space direction="vertical" size={16}>
|
||||||
|
{columns?.map((column) => (
|
||||||
|
<Typography.Text
|
||||||
|
className="w-60"
|
||||||
|
ellipsis={{ tooltip: true }}
|
||||||
|
key={column}>
|
||||||
|
{column}
|
||||||
|
</Typography.Text>
|
||||||
|
))}
|
||||||
|
</Space>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (constraintType === ConstraintType.ForeignKey) {
|
if (constraintType === ConstraintType.ForeignKey) {
|
||||||
|
@ -18,6 +18,11 @@
|
|||||||
padding: 16px;
|
padding: 16px;
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
min-width: 300px;
|
min-width: 300px;
|
||||||
|
|
||||||
|
.constraint-icon-container {
|
||||||
|
margin-top: 12px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.referred-column-name {
|
.referred-column-name {
|
||||||
display: block;
|
display: block;
|
||||||
@ -26,15 +31,23 @@
|
|||||||
|
|
||||||
.constraint-primary-key {
|
.constraint-primary-key {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.primary-key-section-line {
|
||||||
|
margin-top: -2px;
|
||||||
|
}
|
||||||
.primary-key-icon {
|
.primary-key-icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transform: translate(48px, -8px);
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
background: white;
|
background: white;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: @global-border;
|
border: @global-border;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -51,5 +64,6 @@
|
|||||||
border: @global-border;
|
border: @global-border;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
transform: translate(-7px, -31px);
|
transform: translate(-7px, -31px);
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user