{
- // Focus the input when clicking anywhere in the container
- const input = e.currentTarget.querySelector('input');
- if (input) input.focus();
- }}
- >
+
{(tag, index) => (
-
+
{tag}
@@ -67,13 +30,14 @@ export function TagInput(props: TagInputProps) {
)}
setInputValue(e.currentTarget.value)}
- onKeyDown={handleKeyDown}
- onBlur={handleBlur}
- placeholder={props.tags.length === 0 ? props.placeholder : ''}
- class="flex-1 bg-transparent min-w-[120px] focus:outline-none"
+ value={state.inputValue()}
+ onInput={state.handleInput}
+ onKeyDown={state.handleKeyDown}
+ onBlur={state.handleBlur}
+ placeholder={getTagInputPlaceholder(props.tags.length, props.placeholder)}
+ class={TAG_INPUT_FIELD_CLASS}
/>
);
diff --git a/frontend-modern/src/components/shared/tagInputModel.ts b/frontend-modern/src/components/shared/tagInputModel.ts
new file mode 100644
index 000000000..c0b6b42ab
--- /dev/null
+++ b/frontend-modern/src/components/shared/tagInputModel.ts
@@ -0,0 +1,40 @@
+export const TAG_INPUT_CONTAINER_CLASS =
+ 'min-h-[42px] flex flex-wrap items-center gap-2 rounded-md border border-border bg-surface p-2 text-sm text-base-content focus-within:border-sky-500 focus-within:ring-1 focus-within:ring-sky-500';
+export const TAG_INPUT_TAG_CLASS =
+ 'inline-flex items-center gap-1 rounded bg-surface-alt px-2 py-1 text-xs font-medium text-base-content';
+export const TAG_INPUT_REMOVE_BUTTON_CLASS =
+ 'rounded-full p-0.5 text-slate-400 hover:bg-slate-300 hover:bg-surface-hover cursor-pointer focus:outline-none focus:ring-2 focus:ring-sky-500';
+export const TAG_INPUT_FIELD_CLASS = 'flex-1 bg-transparent min-w-[120px] focus:outline-none';
+export const TAG_INPUT_DELIMITER_KEYS = ['Enter', ','] as const;
+
+export function isTagInputCommitKey(key: string): boolean {
+ return TAG_INPUT_DELIMITER_KEYS.includes(key as (typeof TAG_INPUT_DELIMITER_KEYS)[number]);
+}
+
+export function getTagInputPlaceholder(tagCount: number, placeholder?: string): string {
+ return tagCount === 0 ? (placeholder ?? '') : '';
+}
+
+export function normalizeTagInputValue(value: string): string {
+ return value.trim();
+}
+
+export function canAddTag(tags: string[], value: string): boolean {
+ return Boolean(value) && !tags.includes(value);
+}
+
+export function getNextTagsAfterAdd(tags: string[], value: string): string[] {
+ return [...tags, value];
+}
+
+export function getNextTagsAfterBackspace(tags: string[]): string[] {
+ return tags.slice(0, -1);
+}
+
+export function getNextTagsAfterRemove(tags: string[], indexToRemove: number): string[] {
+ return tags.filter((_, index) => index !== indexToRemove);
+}
+
+export function getTagInputRemoveTitle(tag: string): string {
+ return `Remove ${tag}`;
+}
diff --git a/frontend-modern/src/components/shared/useTagInputState.ts b/frontend-modern/src/components/shared/useTagInputState.ts
new file mode 100644
index 000000000..696646216
--- /dev/null
+++ b/frontend-modern/src/components/shared/useTagInputState.ts
@@ -0,0 +1,66 @@
+import { createMemo, createSignal } from 'solid-js';
+import {
+ canAddTag,
+ getNextTagsAfterAdd,
+ getNextTagsAfterBackspace,
+ getNextTagsAfterRemove,
+ isTagInputCommitKey,
+ normalizeTagInputValue,
+ TAG_INPUT_CONTAINER_CLASS,
+} from '@/components/shared/tagInputModel';
+
+export interface TagInputProps {
+ tags: string[];
+ onChange: (tags: string[]) => void;
+ placeholder?: string;
+ class?: string;
+}
+
+export function useTagInputState(props: TagInputProps) {
+ const [inputValue, setInputValue] = createSignal('');
+ let inputRef: HTMLInputElement | undefined;
+
+ const commitTag = () => {
+ const normalizedValue = normalizeTagInputValue(inputValue());
+ if (canAddTag(props.tags, normalizedValue)) {
+ props.onChange(getNextTagsAfterAdd(props.tags, normalizedValue));
+ }
+ setInputValue('');
+ };
+
+ const containerClass = createMemo(() =>
+ `${TAG_INPUT_CONTAINER_CLASS} ${props.class ?? ''}`.trim(),
+ );
+
+ return {
+ containerClass,
+ handleBlur: () => {
+ commitTag();
+ },
+ handleContainerClick: () => {
+ inputRef?.focus();
+ },
+ handleInput: (event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => {
+ setInputValue(event.currentTarget.value);
+ },
+ handleKeyDown: (event: KeyboardEvent) => {
+ if (isTagInputCommitKey(event.key)) {
+ event.preventDefault();
+ commitTag();
+ return;
+ }
+
+ if (event.key === 'Backspace' && !inputValue() && props.tags.length > 0) {
+ props.onChange(getNextTagsAfterBackspace(props.tags));
+ }
+ },
+ handleRemoveTag: (event: MouseEvent, indexToRemove: number) => {
+ event.stopPropagation();
+ props.onChange(getNextTagsAfterRemove(props.tags, indexToRemove));
+ },
+ inputValue,
+ setInputRef: (element: HTMLInputElement) => {
+ inputRef = element;
+ },
+ };
+}
diff --git a/frontend-modern/src/utils/__tests__/frontendResourceTypeBoundaries.test.ts b/frontend-modern/src/utils/__tests__/frontendResourceTypeBoundaries.test.ts
index d872ae019..c57bd5048 100644
--- a/frontend-modern/src/utils/__tests__/frontendResourceTypeBoundaries.test.ts
+++ b/frontend-modern/src/utils/__tests__/frontendResourceTypeBoundaries.test.ts
@@ -14,6 +14,8 @@ import activeUseTrialNudgeSource from '@/components/shared/ActiveUseTrialNudge.t
import activeUseTrialNudgeModelSource from '@/components/shared/activeUseTrialNudgeModel.ts?raw';
import columnPickerSource from '@/components/shared/ColumnPicker.tsx?raw';
import columnPickerModelSource from '@/components/shared/columnPickerModel.ts?raw';
+import tagInputSource from '@/components/shared/TagInput.tsx?raw';
+import tagInputModelSource from '@/components/shared/tagInputModel.ts?raw';
import collapsibleSearchInputSource from '@/components/shared/CollapsibleSearchInput.tsx?raw';
import collapsibleSearchInputModelSource from '@/components/shared/collapsibleSearchInputModel.ts?raw';
import containerUpdateBadgeSource from '@/components/shared/ContainerUpdateBadge.tsx?raw';
@@ -57,6 +59,7 @@ import sharedInfrastructureSummaryTableModelSource from '@/components/shared/inf
import commandPaletteStateSource from '@/components/shared/useCommandPaletteState.ts?raw';
import activeUseTrialNudgeStateSource from '@/components/shared/useActiveUseTrialNudgeState.ts?raw';
import columnPickerStateSource from '@/components/shared/useColumnPickerState.ts?raw';
+import tagInputStateSource from '@/components/shared/useTagInputState.ts?raw';
import collapsibleSearchInputStateSource from '@/components/shared/useCollapsibleSearchInputState.ts?raw';
import containerUpdateButtonStateSource from '@/components/shared/useContainerUpdateButtonState.ts?raw';
import dialogStateSource from '@/components/shared/useDialogState.ts?raw';
@@ -2773,6 +2776,22 @@ describe('frontend resource type boundaries', () => {
expect(columnPickerModelSource).toContain('getHiddenColumnCount');
expect(columnPickerModelSource).toContain('shouldShowColumnPickerReset');
expect(columnPickerModelSource).toContain('getColumnPickerOptionTextClass');
+ expect(tagInputSource).toContain('useTagInputState');
+ expect(tagInputSource).toContain('getTagInputPlaceholder');
+ expect(tagInputSource).not.toContain('createSignal');
+ expect(tagInputSource).not.toContain('querySelector');
+ expect(tagInputSource).not.toContain('Backspace');
+ expect(tagInputSource).not.toContain('addTag');
+ expect(tagInputStateSource).toContain('createSignal');
+ expect(tagInputStateSource).toContain('createMemo');
+ expect(tagInputStateSource).toContain('inputRef?.focus');
+ expect(tagInputStateSource).toContain("event.key === 'Backspace'");
+ expect(tagInputStateSource).toContain('commitTag');
+ expect(tagInputModelSource).toContain('TAG_INPUT_DELIMITER_KEYS');
+ expect(tagInputModelSource).toContain('isTagInputCommitKey');
+ expect(tagInputModelSource).toContain('getTagInputPlaceholder');
+ expect(tagInputModelSource).toContain('getNextTagsAfterRemove');
+ expect(tagInputModelSource).toContain('getTagInputRemoveTitle');
expect(monitoredSystemLimitWarningBannerSource).toContain(
'useMonitoredSystemLimitWarningBannerState',
);