From de769fb1f5f3362d196dfd59b10c9ec62dffb117 Mon Sep 17 00:00:00 2001 From: Ashish Gupta Date: Fri, 28 Jul 2023 18:33:27 +0530 Subject: [PATCH] fix(ui):change table constraints ui for primary key (#12629) * change table constraints ui for primary key * added tooltip for long content --- .../TableConstraints/PrimaryKeyConstraint.tsx | 5 +-- .../TableConstraints/TableConstraints.tsx | 35 +++++++++++++------ .../TableConstraints/table-constraints.less | 16 ++++++++- 3 files changed, 43 insertions(+), 13 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableConstraints/PrimaryKeyConstraint.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableConstraints/PrimaryKeyConstraint.tsx index 712374d811c..711cb0a092b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableConstraints/PrimaryKeyConstraint.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableConstraints/PrimaryKeyConstraint.tsx @@ -13,7 +13,8 @@ import Icon from '@ant-design/icons/lib/components/Icon'; import { Tooltip } from 'antd'; 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 { useTranslation } from 'react-i18next'; @@ -22,7 +23,7 @@ const PrimaryKeyConstraint = () => { return (
- + = ({ constraints }) => { {supportedConstraints.map( ({ constraintType, columns, referredColumns }) => { if (constraintType === ConstraintType.PrimaryKey) { - const columnsLength = (columns?.length ?? 0) - 1; - return ( - - {columns?.map((column, index) => ( - - {column} - {index < columnsLength ? : null} - - ))} - +
+ + {columns?.map((column, index) => ( + + {(columns?.length ?? 0) - 1 !== index ? ( + + ) : null} + + ))} + + + + {columns?.map((column) => ( + + {column} + + ))} + +
); } if (constraintType === ConstraintType.ForeignKey) { diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableConstraints/table-constraints.less b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableConstraints/table-constraints.less index f3cb129f988..fef16628dc0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableConstraints/table-constraints.less +++ b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableConstraints/table-constraints.less @@ -18,6 +18,11 @@ padding: 16px; max-width: 300px; min-width: 300px; + + .constraint-icon-container { + margin-top: 12px; + margin-right: 8px; + } } .referred-column-name { display: block; @@ -26,15 +31,23 @@ .constraint-primary-key { position: relative; + display: flex; + + .primary-key-section-line { + margin-top: -2px; + } .primary-key-icon { position: absolute; - transform: translate(48px, -8px); + top: 50%; + left: 0; + transform: translate(-50%, -50%); background: white; height: 20px; width: 20px; border-radius: 50%; border: @global-border; padding: 2px; + cursor: pointer; } } @@ -51,5 +64,6 @@ border: @global-border; padding: 2px; transform: translate(-7px, -31px); + cursor: pointer; } }