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