(gravitino) branch main updated: [#3280] Improvement(ui): Truncate key and values detail properties (#4594)

[jshao]

This is an automated email from the ASF dual-hosted git repository.

jshao pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/gravitino.git


The following commit(s) were added to refs/heads/main by this push:
     new c220c8148 [#3280] Improvement(ui): Truncate key and values detail 
properties (#4594)
c220c8148 is described below

commit c220c8148800b85c0232ec732d346534c838d02a
Author: Qian Xia <lauraxiaq...@gmail.com>
AuthorDate: Tue Aug 20 20:48:06 2024 +0800

    [#3280] Improvement(ui): Truncate key and values detail properties (#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: #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";>
---
 .../integration/test/web/ui/CatalogsPageTest.java       |  1 +
 .../integration/test/web/ui/pages/CatalogsPage.java     |  2 +-
 web/src/components/DetailsDrawer.js                     | 17 +++++++++++++++--
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git 
a/integration-test/src/test/java/org/apache/gravitino/integration/test/web/ui/CatalogsPageTest.java
 
b/integration-test/src/test/java/org/apache/gravitino/integration/test/web/ui/CatalogsPageTest.java
index 976165951..2015fd749 100644
--- 
a/integration-test/src/test/java/org/apache/gravitino/integration/test/web/ui/CatalogsPageTest.java
+++ 
b/integration-test/src/test/java/org/apache/gravitino/integration/test/web/ui/CatalogsPageTest.java
@@ -392,6 +392,7 @@ public class CatalogsPageTest extends AbstractWebIT {
   @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/integration-test/src/test/java/org/apache/gravitino/integration/test/web/ui/pages/CatalogsPage.java
 
b/integration-test/src/test/java/org/apache/gravitino/integration/test/web/ui/pages/CatalogsPage.java
index b26db5573..1df4f4172 100644
--- 
a/integration-test/src/test/java/org/apache/gravitino/integration/test/web/ui/pages/CatalogsPage.java
+++ 
b/integration-test/src/test/java/org/apache/gravitino/integration/test/web/ui/pages/CatalogsPage.java
@@ -395,7 +395,7 @@ public class CatalogsPage extends AbstractWebIT {
       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
index 553f0e6fd..a310e5fb1 100644
--- 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>
                   )