From 9e24568c61bf5eca387bd99bce92610a3556d976 Mon Sep 17 00:00:00 2001
From: Amogh <100332169+abant07@users.noreply.github.com>
Date: Wed, 24 Jan 2024 19:36:35 -0800
Subject: [PATCH] [#1419] fix(UI): Fix adding a property of the same name
 updates the value  (#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 #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 | 31 ++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/web/app/ui/CreateMetalakeDialog.js b/web/app/ui/CreateMetalakeDialog.js
index 424bb0dbbd7..f9b7ca22c20 100644
--- a/web/app/ui/CreateMetalakeDialog.js
+++ b/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>
                 )