refactor(ui): extract TagButton from TagSelector component [EE-4194] (#8127)

app/portainer/react/components/index.ts

@@ -34,6 +34,7 @@ import { BadgeIcon } from '@@/BadgeIcon';
 import { TeamsSelector } from '@@/TeamsSelector';
 import { PortainerSelect } from '@@/form-components/PortainerSelect';
 import { Slider } from '@@/form-components/Slider';
+import { TagButton } from '@@/TagButton';
 
 import { fileUploadField } from './file-upload-field';
 import { switchField } from './switch-field';
@@ -45,6 +46,10 @@ export const componentsModule = angular
     'tagSelector',
     r2a(withReactQuery(TagSelector), ['allowCreate', 'onChange', 'value'])
   )
+  .component(
+    'tagButton',
+    r2a(TagButton, ['value', 'label', 'title', 'onRemove'])
+  )
   .component(
     'portainerTooltip',
     r2a(Tooltip, ['message', 'position', 'className'])

app/react/components/TagButton/TagButton.tsx

@@ -0,0 +1,33 @@
+import clsx from 'clsx';
+import { Trash2 } from 'lucide-react';
+
+import { Icon } from '@/react/components/Icon';
+
+import styles from './TagButton.module.css';
+
+interface Props {
+  value: number;
+  label: string;
+  title: string;
+  onRemove(): void;
+}
+
+export function TagButton({ value, label, title, onRemove }: Props) {
+  return (
+    <button
+      type="button"
+      title={title}
+      className={clsx(
+        styles.removeTagBtn,
+        'space-left',
+        'tag',
+        'vertical-center'
+      )}
+      onClick={() => onRemove()}
+      key={value}
+    >
+      {label}
+      <Icon icon={Trash2} />
+    </button>
+  );
+}

app/react/components/TagButton/index.ts

@@ -0,0 +1 @@
+export { TagButton } from './TagButton';

app/react/components/TagSelector/TagSelector.tsx

@@ -1,16 +1,13 @@
-import clsx from 'clsx';
 import _ from 'lodash';
-import { Trash2 } from 'lucide-react';
 
 import { TagId } from '@/portainer/tags/types';
-import { Icon } from '@/react/components/Icon';
 import { useCreateTagMutation, useTags } from '@/portainer/tags/queries';
 
 import { Creatable, Select } from '@@/form-components/ReactSelect';
 import { FormControl } from '@@/form-components/FormControl';
 import { Link } from '@@/Link';
 
-import styles from './TagSelector.module.css';
+import { TagButton } from '../TagButton';
 
 interface Props {
   value: TagId[];
@@ -62,21 +59,12 @@ export function TagSelector({ value, allowCreate = false, onChange }: Props) {
       {value.length > 0 && (
         <FormControl label="Selected tags">
           {selectedTags.map((tag) => (
-            <button
+            <TagButton
-              type="button"
               title="Remove tag"
-              className={clsx(
+              value={tag.value}
-                styles.removeTagBtn,
+              label={tag.label}
-                'space-left',
+              onRemove={() => handleRemove(tag.value)}
-                'tag',
+            />
-                'vertical-center'
-              )}
-              onClick={() => handleRemove(tag.value)}
-              key={tag.value}
-            >
-              {tag.label}
-              <Icon icon={Trash2} />
-            </button>
           ))}
         </FormControl>
       )}
@@ -112,6 +100,12 @@ export function TagSelector({ value, allowCreate = false, onChange }: Props) {
     if (!allowCreate) {
       return;
     }
+
+    // Prevent the new tag composed of space from being added
+    if (!inputValue.replace(/\s/g, '').length) {
+      return;
+    }
+
     createTagMutation.mutate(inputValue, {
       onSuccess(tag) {
         handleAdd({ label: tag.Name, value: tag.ID });