From c390fd0e641003e7c58f20b4b64a2847dd4779e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pavel=20Zbytovsk=C3=BD?= <zbytovsky@gmail.com>
Date: Fri, 27 Dec 2024 13:07:06 +0100
Subject: [PATCH] EditDialog: enable adding more rows in TagsEditor (#859)

---
 .../FeatureEditSection/TagsEditor/KeyInput.tsx   | 16 ++--------------
 .../FeatureEditSection/TagsEditor/TagsEditor.tsx |  9 +--------
 .../FeatureEditSection/TagsEditor/helpers.tsx    | 10 +++++-----
 3 files changed, 8 insertions(+), 27 deletions(-)

diff --git a/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/TagsEditor/KeyInput.tsx b/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/TagsEditor/KeyInput.tsx
index 0feb17a1..09a1884f 100644
--- a/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/TagsEditor/KeyInput.tsx
+++ b/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/TagsEditor/KeyInput.tsx
@@ -37,15 +37,12 @@ const useIsError = (index: number) => {
   const { tagsEntries } = useFeatureEditData();
   const [currentKey, currentValue] = tagsEntries[index];
 
+  const isEmptyKey = !!currentValue && !currentKey;
   const isDuplicateKey = tagsEntries.some(
     ([key], idx) => key && key === currentKey && index !== idx,
   );
-  const isLastIndex = index === tagsEntries.length - 1;
-  const emptyKeyCondition = isLastIndex
-    ? !currentKey && !!currentValue
-    : !currentKey;
 
-  return emptyKeyCondition || isDuplicateKey;
+  return isEmptyKey || isDuplicateKey;
 };
 
 export const KeyInput = ({ index }: { index: number }) => {
@@ -62,15 +59,6 @@ export const KeyInput = ({ index }: { index: number }) => {
       autoCapitalize="none"
       maxLength={255}
       error={isError}
-      // slotProps={{
-      //   input: {
-      //     endAdornment: isError ? (
-      //       <InputAdornment position="end">
-      //         <WarningIcon color="error" />
-      //       </InputAdornment>
-      //     ) : undefined,
-      //   },
-      // }}
     />
   );
 };
diff --git a/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/TagsEditor/TagsEditor.tsx b/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/TagsEditor/TagsEditor.tsx
index 54a75939..92a00e81 100644
--- a/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/TagsEditor/TagsEditor.tsx
+++ b/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/TagsEditor/TagsEditor.tsx
@@ -67,24 +67,17 @@ const TagsEditorInfo = () => (
   </tr>
 );
 
-const lastKeyAndValueSet = (tagsEntries: TagsEntries) => {
-  const [lastKey, lastValue] = tagsEntries[tagsEntries.length - 1];
-  return lastKey && lastValue;
-};
-
 const AddButton = () => {
   const { tagsEntries, setTagsEntries } = useFeatureEditData();
-  const active = tagsEntries.length === 0 || lastKeyAndValueSet(tagsEntries);
-
   return (
     <tr>
       <td />
       <td>
         <Button
           variant="contained"
+          color="secondary"
           disableElevation
           onClick={() => setTagsEntries((state) => [...state, ['', '']])}
-          disabled={!active}
         >
           <AddIcon />
         </Button>
diff --git a/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/TagsEditor/helpers.tsx b/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/TagsEditor/helpers.tsx
index 514bf09b..d567d5f1 100644
--- a/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/TagsEditor/helpers.tsx
+++ b/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/TagsEditor/helpers.tsx
@@ -16,17 +16,16 @@ export const FastInput = styled.input<{ error?: boolean }>`
   height: 32px;
   padding: 0 8px;
   font-size: 13px;
-
   color: ${({ theme }) => theme.palette.text.primary};
   background-color: ${({ theme }) => theme.palette.background.paper};
-
   border: 1px solid ${({ theme }) => theme.palette.action.disabled};
-  ${({ theme, error }) => error && `border-color: ${theme.palette.error.main};`}
   border-radius: 4px;
 
-  ${({ error }) =>
+  ${({ error, theme }) =>
     error &&
-    `background: ${WarningSvgDataUrl} no-repeat right 8px center; padding-right: 35px;`}
+    `padding-right: 35px;
+    border-color: ${theme.palette.error.main};
+    background: ${WarningSvgDataUrl} no-repeat right 8px center;`}
 
   &:hover {
     border-color: ${({ theme }) => theme.palette.secondary.main};
@@ -35,6 +34,7 @@ export const FastInput = styled.input<{ error?: boolean }>`
     outline: none;
     border-color: ${({ theme }) => theme.palette.primary.main};
     border-width: 2px;
+    background-position: right 7px center;
   }
 
   transition: border-color 0.2s;