[apache#3280] Improvement(ui): Truncate key and values detail propert…

…ies (apache#4594) ### What changes were proposed in this pull request? When the key and values are too long, they are not truncated and ellipses are added at the end of that string. The full key or value can be shown by hovering over with the tool tip. <img width="441" alt="Pasted Graphic 12" src="https://github.com/user-attachments/assets/587e4195-6360-410a-90a7-ad65500c14f2"> ### Why are the changes needed? When the key and values are too long, it will not be fully displayed unless the user uses the horizontal scroll bar. Fix: apache#3280 ### Does this PR introduce _any_ user-facing change? N/A ### How was this patch tested? Run the CI test case locally <img width="382" alt="image" src="https://github.com/user-attachments/assets/b1100e10-c4b9-4f1c-8646-2f409fbd6017">
LiuQhahah · Aug 20, 2024 · c220c81 · c220c81
1 parent 4f484a1
commit c220c81
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/...ion-test/src/test/java/org/apache/gravitino/integration/test/web/ui/CatalogsPageTest.java b/...ion-test/src/test/java/org/apache/gravitino/integration/test/web/ui/CatalogsPageTest.java
@@ -392,6 +392,7 @@ public void testViewTabMetalakeDetails() throws InterruptedException {
   @Order(8)
   public void testViewCatalogDetails() throws InterruptedException {
     catalogsPage.clickViewCatalogBtn(HIVE_CATALOG_NAME);
+    mouseMoveTo(By.xpath(".//*[@data-prev-refer='details-props-key-metastore.uris']"));
     Assertions.assertTrue(
         catalogsPage.verifyShowCatalogDetails(HIVE_CATALOG_NAME, hiveMetastoreUri));
   }

diff --git a/...n-test/src/test/java/org/apache/gravitino/integration/test/web/ui/pages/CatalogsPage.java b/...n-test/src/test/java/org/apache/gravitino/integration/test/web/ui/pages/CatalogsPage.java
@@ -395,7 +395,7 @@ public boolean verifyShowCatalogDetails(String name, String hiveMetastoreUris)
       boolean isHiveURIS =
           waitShowText(
               hiveMetastoreUris,
-              By.xpath(".//*[@data-prev-refer='details-props-key-metastore.uris']"));
+              By.xpath(".//*[@data-prev-refer='tip-details-props-key-metastore.uris']"));
       boolean isShowCheck =
           waitShowText(
               "false",

diff --git a/web/src/components/DetailsDrawer.js b/web/src/components/DetailsDrawer.js
@@ -199,14 +199,27 @@ const DetailsDrawer = props => {
                   return (
                     <TableRow key={index} data-refer={`details-props-index-${index}`}>
                       <TableCell className={'twc-py-[0.7rem]'} data-refer={`details-props-key-${item.key}`}>
-                        {item.key}
+                        <Tooltip
+                          title={<span data-refer={`tip-details-props-key-${item.key}`}>{item.key}</span>}
+                          placement='bottom'
+                        >
+                          {item.key.length > 22 ? `${item.key.substring(0, 22)}...` : item.key}
+                        </Tooltip>
                       </TableCell>
                       <TableCell
                         className={'twc-py-[0.7rem]'}
                         data-refer={`details-props-value-${item.value}`}
                         data-prev-refer={`details-props-key-${item.key}`}
                       >
-                        {item.key === 'jdbc-password' ? '[HIDDEN]' : item.value}
+                        {item.key === 'jdbc-password' && '[HIDDEN]'}
+                        {item.key !== 'jdbc-password' && (
+                          <Tooltip
+                            title={<span data-prev-refer={`tip-details-props-key-${item.key}`}>{item.value}</span>}
+                            placement='bottom'
+                          >
+                            {item.value.length > 22 ? `${item.value.substring(0, 22)}...` : item.value}
+                          </Tooltip>
+                        )}
                       </TableCell>
                     </TableRow>
                   )