From cad1f335a4bdb631b7f968f85cba77e06a07a2b7 Mon Sep 17 00:00:00 2001
From: Jerry Shao <jerryshao@datastrato.com>
Date: Wed, 10 Jan 2024 16:22:50 +0800
Subject: [PATCH] [#1428] improvement(UI): Filtering empty keys when create or
 update (#1430)

### What changes were proposed in this pull request?

Filtering empty keys when operating create or update.

<img width="480" alt="image"
src="https://github.com/datastrato/gravitino/assets/17310559/c2bbf850-dfe9-4419-9f6d-6d9cd2fbe0f1">

After adding an empty key, the API will prompt an error message, so we
need to prevent this from happening at the frontend level.

### Why are the changes needed?

Fix: #1428

### Does this PR introduce _any_ user-facing change?

N/A

### How was this patch tested?

N/A

Co-authored-by: CHEYNE <contact@ch3yne.com>
---
 web/app/(home)/CreateMetalakeDialog.js   | 10 ++++++----
 web/app/metalakes/CreateCatalogDialog.js | 10 ++++++----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/web/app/(home)/CreateMetalakeDialog.js b/web/app/(home)/CreateMetalakeDialog.js
index ace3036012c..dc6be5cf7c8 100644
--- a/web/app/(home)/CreateMetalakeDialog.js
+++ b/web/app/(home)/CreateMetalakeDialog.js
@@ -91,11 +91,13 @@ const CreateMetalakeDialog = props => {
   }
 
   const onSubmit = data => {
-    const properties = innerProps.reduce((acc, item) => {
-      acc[item.key] = item.value
+    const properties = innerProps
+      .filter(i => i.key.trim() !== '')
+      .reduce((acc, item) => {
+        acc[item.key] = item.value
 
-      return acc
-    }, {})
+        return acc
+      }, {})
 
     const metalakeData = {
       ...data,
diff --git a/web/app/metalakes/CreateCatalogDialog.js b/web/app/metalakes/CreateCatalogDialog.js
index e2d9243854d..049a599c7d4 100644
--- a/web/app/metalakes/CreateCatalogDialog.js
+++ b/web/app/metalakes/CreateCatalogDialog.js
@@ -174,11 +174,13 @@ const CreateCatalogDialog = props => {
       .then(() => {
         let properties = {}
 
-        const prevProperties = innerProps.reduce((acc, item) => {
-          acc[item.key] = item.value
+        const prevProperties = innerProps
+          .filter(i => i.key.trim() !== '')
+          .reduce((acc, item) => {
+            acc[item.key] = item.value
 
-          return acc
-        }, {})
+            return acc
+          }, {})
 
         const {
           'catalog-backend': catalogBackend,