refactor(frontend): refactor tselectlist with reka-ui

Refactor TSelectList from headlessui to reka-ui which makes it more testable and brings a11y improvements and collision detection.

Signed-off-by: Edward Sammut Alessi <[email protected]>

Author: Slessi

frontend/e2e/omnictl_fixtures.ts

@@ -31,7 +31,7 @@ const test = base.extend<OmnictlFixtures>({
 
     await page.getByRole('button', { name: 'Download omnictl' }).click()
 
-    await page.getByRole('button', { name: 'omnictl:' }).click()
+    await page.getByRole('combobox', { name: 'omnictl:' }).click()
     await page.getByRole('option', { name: `omnictl-${getPlatform()}-${getArch()}` }).click()
 
     const [downloadOmnictl] = await Promise.all([

frontend/src/components/common/Form/EnumRenderer.vue

@@ -29,7 +29,6 @@ const values = computed(() => {
     <TSelectList
       :id="control.id + '-input'"
       class="h-6"
-      menu-align="right"
       :default-value="control.data ?? 'unset'"
       :disabled="!control.enabled"
       :values="values"

frontend/src/components/common/SelectList/TSelectList.spec.ts

@@ -0,0 +1,145 @@
+// Copyright (c) 2025 Sidero Labs, Inc.
+//
+// Use of this software is governed by the Business Source License
+// included in the LICENSE file.
+import userEvent from '@testing-library/user-event'
+import { render, screen, waitFor } from '@testing-library/vue'
+import { mount } from '@vue/test-utils'
+import { expect, test, vi } from 'vitest'
+
+import TSelectList from './TSelectList.vue'
+
+// Used by reka-ui select, test fails without it
+window.HTMLElement.prototype.hasPointerCapture = vi.fn()
+
+test('is accessible with inline label', () => {
+  render(TSelectList, {
+    props: {
+      title: 'My select',
+      values: ['first option', 'second option'],
+    },
+  })
+
+  expect(screen.getByLabelText('My select')).toBeInTheDocument()
+})
+
+test('is accessible with overhead label', () => {
+  render(TSelectList, {
+    props: {
+      title: 'My select',
+      values: ['first option', 'second option'],
+      overheadTitle: true,
+    },
+  })
+
+  expect(screen.getByLabelText('My select')).toBeInTheDocument()
+})
+
+test('accepts a default value', async () => {
+  const user = userEvent.setup()
+  const updateFn = vi.fn()
+  const checkedFn = vi.fn()
+
+  render(TSelectList, {
+    props: {
+      title: 'My select',
+      values: ['first option', 'second option'],
+      defaultValue: 'first option',
+      'onUpdate:modelValue': updateFn,
+      onCheckedValue: checkedFn,
+    },
+  })
+
+  const trigger = screen.getByLabelText('My select')
+
+  expect(updateFn).toHaveBeenCalledExactlyOnceWith('first option')
+  expect(checkedFn).not.toHaveBeenCalled()
+
+  expect(trigger).toHaveTextContent('first option')
+
+  // Open dropdown
+  await user.click(trigger)
+
+  expect(screen.getByRole('option', { name: 'first option' })).toHaveAttribute(
+    'aria-selected',
+    'true',
+  )
+})
+
+test('allows selection', async () => {
+  const user = userEvent.setup()
+  const updateFn = vi.fn()
+  const checkedFn = vi.fn()
+
+  render(TSelectList, {
+    props: {
+      title: 'My select',
+      values: ['first option', 'second option'],
+      'onUpdate:modelValue': updateFn,
+      onCheckedValue: checkedFn,
+    },
+  })
+
+  const trigger = screen.getByLabelText('My select')
+
+  expect(trigger.textContent).toBe('My select') // Exact match to assert no default
+
+  // Open dropdown
+  await user.click(trigger)
+
+  const option = screen.getByRole('option', { name: 'second option' })
+
+  // Select option
+  await user.click(option)
+
+  expect(updateFn).toHaveBeenCalledExactlyOnceWith('second option')
+  expect(checkedFn).toHaveBeenCalledExactlyOnceWith('second option')
+
+  expect(trigger).toHaveTextContent('second option')
+  expect(option).toHaveAttribute('aria-selected', 'true')
+})
+
+test('exposes selectItem', async () => {
+  const updateFn = vi.fn()
+  const checkedFn = vi.fn()
+
+  // Can't test defineExpose with testing-library, using @vue/test-utils instead
+  const wrapper = mount(TSelectList, {
+    props: {
+      title: 'My select',
+      values: ['first option', 'second option'],
+      'onUpdate:modelValue': updateFn,
+      onCheckedValue: checkedFn,
+    },
+  })
+
+  expect(wrapper.text()).not.toContain('second option')
+
+  wrapper.vm.selectItem('second option')
+
+  expect(updateFn).toHaveBeenCalledExactlyOnceWith('second option')
+  expect(checkedFn).toHaveBeenCalledExactlyOnceWith('second option')
+
+  await waitFor(() => {
+    expect(wrapper.text()).toContain('second option')
+  })
+})
+
+test('focuses search on open', async () => {
+  const user = userEvent.setup()
+
+  render(TSelectList, {
+    props: {
+      title: 'My select',
+      values: ['first option', 'second option'],
+      searcheable: true,
+    },
+  })
+
+  const trigger = screen.getByLabelText('My select')
+
+  // Open dropdown
+  await user.click(trigger)
+
+  expect(screen.getByRole('textbox', { name: 'search' })).toHaveFocus()
+})

frontend/src/components/common/SelectList/TSelectList.stories.ts

@@ -0,0 +1,35 @@
+// Copyright (c) 2025 Sidero Labs, Inc.
+//
+// Use of this software is governed by the Business Source License
+// included in the LICENSE file.
+import { faker } from '@faker-js/faker'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { fn } from 'storybook/test'
+
+import TSelectList from './TSelectList.vue'
+
+const values = faker.helpers.uniqueArray(() => faker.animal.cat(), 100).sort()
+
+const meta: Meta<typeof TSelectList> = {
+  // https://github.com/storybookjs/storybook/issues/24238
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  component: TSelectList as any,
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    title: 'Kitty',
+    values,
+    defaultValue: values.at(-Math.round(values.length / 2)),
+    hideSelectedSmallScreens: false,
+    searcheable: true,
+    overheadTitle: false,
+    onCheckedValue: fn(),
+    'onUpdate:modelValue': fn(),
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}