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:
Ashish Gupta 2023-07-28 18:33:27 +05:30 committed by GitHub
parent e0d293a801
commit de769fb1f5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 43 additions and 13 deletions

View File

@ -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')}

View File

@ -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) {

View File

@ -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;
} }
} }