(gravitino) branch branch-0.6 updated: [#3280] Improvement(ui): Truncate key and values detail properties (#4601)

[jshao]

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

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


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

commit ba0b97480f6552eecdda749943e9b08811fe293f
Author: github-actions[bot] 
<41898282+github-actions[bot]@users.noreply.github.com>
AuthorDate: Wed Aug 21 11:08:17 2024 +0800

    [#3280] Improvement(ui): Truncate key and values detail properties (#4601)
    
    ### 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";>
    
    Co-authored-by: Qian Xia <lauraxiaq...@gmail.com>
---
 .../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>
                   )