fix(ui):change table constraints ui for primary key (#12629)

* change table constraints ui for primary key

* added tooltip for long content

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 (
     <div className="constraint-primary-key">
-      <img src={StraightLine} />
+      <img className="primary-key-section-line" src={SectionLine} />
       <Tooltip
         placement="bottom"
         title={t('label.primary-key')}

openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableConstraints/TableConstraints.tsx

@@ -54,17 +54,32 @@ const TableConstraints: FC<TableConstraintsProps> = ({ constraints }) => {
       {supportedConstraints.map(
         ({ constraintType, columns, referredColumns }) => {
           if (constraintType === ConstraintType.PrimaryKey) {
-            const columnsLength = (columns?.length ?? 0) - 1;
-
             return (
-              <Space wrap className="constraint-columns">
-                {columns?.map((column, index) => (
-                  <Fragment key={column}>
-                    <Typography.Text>{column}</Typography.Text>
-                    {index < columnsLength ? <PrimaryKeyConstraint /> : null}
-                  </Fragment>
-                ))}
-              </Space>
+              <div className="d-flex constraint-columns">
+                <Space
+                  className="constraint-icon-container"
+                  direction="vertical"
+                  size={0}>
+                  {columns?.map((column, index) => (
+                    <Fragment key={column}>
+                      {(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) {

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