feat: react-hook-form field array for provider muxes

src/features/workspace/components/__tests__/form-muxing-rules.test.tsx

@@ -0,0 +1,144 @@
+import { render } from '@/lib/test-utils'
+import { screen, waitFor } from '@testing-library/react'
+import { FormMuxRules } from '../form-mux-rules'
+import userEvent from '@testing-library/user-event'
+
+test('all fields are disabled if the form is disabled', async () => {
+ render(<FormMuxRules isDisabled={true} workspaceName="fake-workspace" />)
+
+ expect(
+ screen.getByLabelText(/matcher type/i, { selector: 'button' })
+ ).toBeDisabled()
+ expect(
+ screen.getByLabelText(/matcher/i, { selector: 'input' })
+ ).toBeDisabled()
+ expect(screen.getByLabelText(/model/i, { selector: 'input' })).toBeDisabled()
+ expect(
+ screen.getByLabelText(/delete/i, { selector: 'button' })
+ ).toBeDisabled()
+ expect(
+ screen.getByLabelText(/add filter/i, { selector: 'button' })
+ ).toBeDisabled()
+ expect(
+ screen.getByLabelText(/revert changes/i, { selector: 'button' })
+ ).toBeDisabled()
+ expect(screen.getByLabelText(/save/i, { selector: 'button' })).toBeDisabled()
+})
+
+test('muxing rules form works correctly', async () => {
+ render(<FormMuxRules isDisabled={false} workspaceName="fake-workspace" />)
+
+ // should only have 1 row initially
+ expect(
+ screen.getAllByLabelText(/matcher type/i, { selector: 'button' }).length
+ ).toEqual(1)
+ expect(
+ screen.getAllByLabelText(/matcher/i, { selector: 'input' }).length
+ ).toEqual(1)
+ expect(
+ screen.getAllByLabelText(/model/i, { selector: 'input' }).length
+ ).toEqual(1)
+ expect(
+ screen.getAllByLabelText(/delete/i, { selector: 'button' }).length
+ ).toEqual(1)
+
+ // shouldn't be able to delete the catch-all row
+ expect(
+ screen.getAllByLabelText(/delete/i, { selector: 'button' })[0]
+ ).toBeDisabled()
+
+ // populate the "catch-all" row
+ await userEvent.click(screen.getByLabelText('Model', { selector: 'input' }))
+ await userEvent.click(screen.getByRole('option', { name: /claude-3.6/i }))
+ await waitFor(() => {
+ expect(screen.getByLabelText('Model', { selector: 'input' })).toHaveValue(
+ 'claude-3.6'
+ )
+ })
+
+ // add a new row
+ await userEvent.click(
+ screen.getByLabelText(/add filter/i, { selector: 'button' })
+ )
+
+ // add a new row
+ expect(
+ screen.getAllByLabelText(/matcher type/i, { selector: 'button' }).length
+ ).toEqual(2)
+ expect(
+ screen.getAllByLabelText(/matcher/i, { selector: 'input' }).length
+ ).toEqual(2)
+ expect(
+ screen.getAllByLabelText(/model/i, { selector: 'input' }).length
+ ).toEqual(2)
+ expect(
+ screen.getAllByLabelText(/delete/i, { selector: 'button' }).length
+ ).toEqual(2)
+
+ // shouldn't be able to delete the catch-all row
+ expect(
+ screen.getAllByLabelText(/delete/i, { selector: 'button' })[1]
+ ).toBeDisabled()
+
+ // populate new row
+ const newMatcherTypeSelect = screen.getAllByLabelText(/matcher type/i, {
+ selector: 'button',
+ })[0]
+ const newMatcherInput = screen.getAllByLabelText(/matcher/i, {
+ selector: 'input',
+ })[0]
+ const newModelComboBox = screen.getAllByLabelText(/model/i, {
+ selector: 'input',
+ })[0]
+
+ await userEvent.click(newMatcherTypeSelect as HTMLFormElement)
+ await userEvent.click(screen.getByRole('option', { name: 'FIM' }))
+
+ await userEvent.type(newMatcherInput as HTMLFormElement, '.tsx')
+
+ await userEvent.click(newModelComboBox as HTMLFormElement)
+ await userEvent.click(screen.getByRole('option', { name: /chatgpt-4p/i }))
+
+ await userEvent.click(screen.getByRole('button', { name: /save/i }))
+
+ await waitFor(() => {
+ expect(
+ screen.getByText(/muxing rules for fake-workspace updated/i)
+ ).toBeVisible()
+ })
+})
+
+test('displays validation errors with invalid config', async () => {
+ render(<FormMuxRules isDisabled={false} workspaceName="fake-workspace" />)
+
+ // should only have 1 row initially
+ expect(
+ screen.getAllByLabelText(/matcher type/i, { selector: 'button' }).length
+ ).toEqual(1)
+ expect(
+ screen.getAllByLabelText(/matcher/i, { selector: 'input' }).length
+ ).toEqual(1)
+ expect(
+ screen.getAllByLabelText(/model/i, { selector: 'input' }).length
+ ).toEqual(1)
+ expect(
+ screen.getAllByLabelText(/delete/i, { selector: 'button' }).length
+ ).toEqual(1)
+
+ // add a new row
+ await userEvent.click(
+ screen.getByLabelText(/add filter/i, { selector: 'button' })
+ )
+
+ // populate the matcher input, but not the model
+ const matcherInput = screen.getAllByLabelText(/matcher/i, {
+ selector: 'input',
+ })[0]
+ await userEvent.type(matcherInput as HTMLFormElement, '.tsx')
+
+ await userEvent.click(screen.getByRole('button', { name: /save/i }))
+
+ await waitFor(() => {
+ expect(screen.getByText(/muxing: model is required/i)).toBeVisible()
+ })
+})

src/features/workspace/components/form-mux-button-add-row.tsx

@@ -0,0 +1,26 @@
+import { Button } from '@stacklok/ui-kit'
+import { MuxMatcherType } from '@/api/generated'
+import { Plus } from '@untitled-ui/icons-react'
+import { useFormMuxRulesContext } from './form-mux-context-provider'
+
+export function FormMuxButtonAddRow({ isDisabled }: { isDisabled: boolean }) {
+ const { prepend } = useFormMuxRulesContext()
+
+ return (
+ <Button
+ aria-label="Add filter"
+ className="w-fit"
+ variant="tertiary"
+ isDisabled={isDisabled}
+ onPress={() =>
+ prepend({
+ model: '',
+ matcher: '',
+ matcher_type: MuxMatcherType.FILENAME_MATCH,
+ })
+ }
+ >
+ <Plus /> Add Filter
+ </Button>
+ )
+}

src/features/workspace/components/form-mux-button-delete-rule.tsx

@@ -0,0 +1,29 @@
+import { Button } from '@stacklok/ui-kit'
+import { Trash01 } from '@untitled-ui/icons-react'
+import { useFormMuxRulesContext } from './form-mux-context-provider'
+import { FieldValuesMuxRow } from '../lib/schema-mux'
+import { MuxMatcherType } from '@/api/generated'
+
+export function FormMuxButtonDeleteRow({
+ index,
+ row,
+ isDisabled,
+}: {
+ index: number
+ row: FieldValuesMuxRow & { id: string }
+ isDisabled: boolean
+}) {
+ const { remove } = useFormMuxRulesContext()
+
+ return (
+ <Button
+ aria-label="Delete"
+ isIcon
+ isDisabled={row.matcher_type === MuxMatcherType.CATCH_ALL || isDisabled}
+ variant="secondary"
+ onPress={() => remove(index)}
+ >
+ <Trash01 />
+ </Button>
+ )
+}