UBER-462: prevent creating existing enum value and disable the button in that case (#3465)

Signed-off-by: Vyacheslav Tumanov <me@slavatumanov.me>

packages/ui/src/components/ActionIcon.svelte

@@ -28,6 +28,7 @@
   export let size: 'x-small' | 'small' | 'medium' | 'large'
   export let action: (ev: MouseEvent) => Promise<void> | void = async () => {}
   export let invisible: boolean = false
+  export let disabled: boolean = false
 </script>
 
 <button
@@ -35,6 +36,7 @@
   use:tooltip={{ label, direction, props: labelProps }}
   tabindex="0"
   on:click|stopPropagation|preventDefault={action}
+  {disabled}
 >
   <div class="icon {size}" class:invisible>
     <Icon {icon} {size} {iconProps} />
@@ -53,7 +55,7 @@
         opacity: 0;
       }
     }
-    &:hover .icon {
+    &:not(:disabled):hover .icon {
       color: var(--theme-caption-color);
       opacity: 1;
     }
@@ -64,6 +66,9 @@
         opacity: 1;
       }
     }
+    &:disabled {
+      cursor: default;
+    }
   }
   .small {
     width: 1rem;

plugins/setting-resources/src/components/EnumValues.svelte

@@ -29,6 +29,7 @@
 
   async function add () {
     if (newValue.trim().length === 0) return
+    if (value.enumValues.includes(newValue.trim())) return
     await client.update(value, {
       $push: { enumValues: newValue }
     })
@@ -123,7 +124,13 @@
       bind:value={newValue}
     />
     <div class="flex gap-2">
-      <ActionIcon icon={IconAdd} label={setting.string.Add} action={add} size={'small'} />
+      <ActionIcon
+        icon={IconAdd}
+        label={setting.string.Add}
+        action={add}
+        size={'small'}
+        disabled={value.enumValues.includes(newValue.trim())}
+      />
 
       <ActionIcon
         icon={IconAttachment}