[apache#1419] fix(UI): Fix adding a property of the same name updates…

… the value (apache#1622)

**Changes proposed:**

When creating a metalake or editing a metalake, it was allowing users to
enter keys with the same name without notifying the user. So, to solve
this, a little error message underneath the property text field says
that the key is already in use. Also, if they have any duplicate fields
present, it prevents them from creating the meta lake or adding new
fields until the duplicate is resolved.

**Why these changes are needed?**

This change was needed because it reduces the confusion for the user who
may not know the nature of relational databases and that they cannot
have the same keys. So instead of just having the key disappear and
override the previous value, it will properly notify the user that they
need to rename.

Fix apache#1419 

**Does this PR introduce any user-facing change?**

Yes and no. There is not a significant user change other than it just
helps the user know what is going on and directs them in the correct
way.

**How was this patch tested?**
Locally

web/app/ui/CreateMetalakeDialog.js

@@ -70,9 +70,25 @@ const CreateMetalakeDialog = props => {
     let data = [...innerProps]
     data[index][event.target.name] = event.target.value
     setInnerProps(data)
+
+    const nonEmptyKeys = data.filter(item => item.key.trim() !== '')
+
+    const duplicateKeys = nonEmptyKeys.some((item, i) => i !== index && item.key === event.target.value)
+    data[index].hasDuplicateKey = duplicateKeys
   }
 
   const addFields = () => {
+    const duplicateKeys = innerProps
+      .filter(item => item.key.trim() !== '')
+      .some(
+        (item, index, filteredItems) =>
+          filteredItems.findIndex(otherItem => otherItem !== item && otherItem.key.trim() === item.key.trim()) !== -1
+      )
+
+    if (duplicateKeys) {
+      return
+    }
+
     let newField = { key: '', value: '' }
 
     setInnerProps([...innerProps, newField])
@@ -91,6 +107,17 @@ const CreateMetalakeDialog = props => {
   }
 
   const onSubmit = data => {
+    const duplicateKeys = innerProps
+      .filter(item => item.key.trim() !== '')
+      .some(
+        (item, index, filteredItems) =>
+          filteredItems.findIndex(otherItem => otherItem !== item && otherItem.key.trim() === item.key.trim()) !== -1
+      )
+
+    if (duplicateKeys) {
+      return
+    }
+
     const properties = innerProps
       .filter(i => i.key.trim() !== '')
       .reduce((acc, item) => {
@@ -218,6 +245,7 @@ const CreateMetalakeDialog = props => {
                           label='Key'
                           value={item.key}
                           onChange={event => handleFormChange(index, event)}
+                          error={item.hasDuplicateKey}
                         />
                         <TextField
                           size='small'
@@ -232,6 +260,9 @@ const CreateMetalakeDialog = props => {
                           </IconButton>
                         </Box>
                       </Box>
+                      {item.hasDuplicateKey && (
+                        <FormHelperText className={'twc-text-error-main'}>Key already exists</FormHelperText>
+                      )}
                     </FormControl>
                   </Grid>
                 )