From 8d6eafdff8566819acf407177b0221cc7c1e9a65 Mon Sep 17 00:00:00 2001
From: Qian Xia <lauraxiaqian@gmail.com>
Date: Wed, 15 May 2024 11:43:38 +0800
Subject: [PATCH] [#3257] fix(web): add a default optional properties for
 fileset catalog (#3384)

<!--
1. Title: [#<issue>] <type>(<scope>): <subject>
   Examples:
     - "[#123] feat(operator): support xxx"
     - "[#233] fix: check null before access result in xxx"
     - "[MINOR] refactor: fix typo in variable name"
     - "[MINOR] docs: fix typo in README"
     - "[#255] test: fix flaky test NameOfTheTest"
   Reference: https://www.conventionalcommits.org/en/v1.0.0/
2. If the PR is unfinished, please mark this PR as draft.
-->

### What changes were proposed in this pull request?
Add a default optional properties for fileset catalog
<img width="597" alt="image"
src="https://github.com/datastrato/gravitino/assets/9210625/1fe02e25-d80e-4182-bb47-6079b956fe39">
Remove fix width of version component
<img width="289" alt="image"
src="https://github.com/datastrato/gravitino/assets/9210625/cbc690cd-d721-4916-9d5d-1dea077499d5">
<img width="335" alt="image"
src="https://github.com/datastrato/gravitino/assets/9210625/19ab6609-32cf-44e1-9bc0-e2eb12241ab0">


### Why are the changes needed?
Although the location property is optional, it is better to be there for
ease of use
The width of version component is should be flexible

Fix: #3257

### Does this PR introduce _any_ user-facing change?
N/A

### How was this patch tested?
manual
---
 .../metalake/rightContent/CreateCatalogDialog.js         | 4 ++--
 web/src/app/rootLayout/VersionView.js                    | 2 +-
 web/src/lib/utils/initial.js                             | 9 ++++++++-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/web/src/app/metalakes/metalake/rightContent/CreateCatalogDialog.js b/web/src/app/metalakes/metalake/rightContent/CreateCatalogDialog.js
index a6ff296de50..2e9b1ab24c4 100644
--- a/web/src/app/metalakes/metalake/rightContent/CreateCatalogDialog.js
+++ b/web/src/app/metalakes/metalake/rightContent/CreateCatalogDialog.js
@@ -236,7 +236,7 @@ const CreateCatalogDialog = props => {
         let properties = {}
 
         const prevProperties = innerProps
-          .filter(i => i.key.trim() !== '')
+          .filter(i => (typeSelect === 'fileset' && i.key === 'location' ? i.value.trim() !== '' : i.key.trim() !== ''))
           .reduce((acc, item) => {
             acc[item.key] = item.value
 
@@ -363,7 +363,7 @@ const CreateCatalogDialog = props => {
       setProviderTypes(providersItems)
 
       const providerItem = providersItems.find(i => i.value === data.provider)
-      let propsItems = [...providerItem.defaultProps]
+      let propsItems = [...providerItem.defaultProps].filter(i => i.required)
 
       propsItems = propsItems.map((it, idx) => {
         let propItem = {
diff --git a/web/src/app/rootLayout/VersionView.js b/web/src/app/rootLayout/VersionView.js
index 8cde1aad75b..5831cff41b6 100644
--- a/web/src/app/rootLayout/VersionView.js
+++ b/web/src/app/rootLayout/VersionView.js
@@ -12,7 +12,7 @@ const VersionView = () => {
   const store = useAppSelector(state => state.sys)
 
   return (
-    <Typography variant='subtitle2' id='gravitino_version' className={'twc-flex twc-justify-end'} sx={{ width: 200 }}>
+    <Typography variant='subtitle2' id='gravitino_version' className={'twc-flex twc-justify-end'}>
       {store.version}
     </Typography>
   )
diff --git a/web/src/lib/utils/initial.js b/web/src/lib/utils/initial.js
index 63c7f878969..035bb14601f 100644
--- a/web/src/lib/utils/initial.js
+++ b/web/src/lib/utils/initial.js
@@ -7,7 +7,14 @@ export const filesetProviders = [
   {
     label: 'hadoop',
     value: 'hadoop',
-    defaultProps: []
+    defaultProps: [
+      {
+        key: 'location',
+        value: '',
+        required: false,
+        description: 'The storage location of the fileset'
+      }
+    ]
   }
 ]