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

Author: alex-mcgovern

package-lock.json

@@ -24,14 +24,15 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@hey-api/client-fetch": "^0.7.1",
+    "@hookform/resolvers": "^4.1.0",
     "@jsonforms/core": "^3.5.1",
     "@jsonforms/react": "^3.5.1",
     "@jsonforms/vanilla-renderers": "^3.5.1",
     "@monaco-editor/react": "^4.6.0",
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
-    "@stacklok/ui-kit": "^1.0.1-4",
+    "@stacklok/ui-kit": "^1.0.1-9",
     "@tanstack/react-query": "^5.64.1",
     "@tanstack/react-query-devtools": "^5.66.0",
     "@types/lodash": "^4.17.15",

package.json

@@ -0,0 +1,281 @@
+import {
+  Button,
+  ComboBoxButton,
+  ComboBoxClearButton,
+  ComboBoxFieldGroup,
+  ComboBoxInput,
+  FormComboBox,
+  FormTextField,
+  Input,
+  Label,
+  OptionsSchema,
+  TextField,
+  Tooltip,
+  TooltipInfoButton,
+  TooltipTrigger,
+} from '@stacklok/ui-kit'
+import { useFieldArray, useFormContext } from 'react-hook-form'
+import {
+  MUX_FIELD_NAME,
+  WORKSPACE_CONFIG_FIELD_NAME,
+  WorkspaceMuxFieldValues,
+} from '../lib/workspace-config-schema'
+import { useQueryListAllModelsForAllProviders } from '@/hooks/use-query-list-all-models-for-all-providers'
+import { ModelByProvider, MuxMatcherType, MuxRule } from '@/api/generated'
+import { groupBy, map } from 'lodash'
+import {
+  BracketsSlash,
+  DotsGrid,
+  GridDotsTop,
+  Plus,
+  SearchMd,
+  Trash01,
+} from '@untitled-ui/icons-react'
+import { tv } from 'tailwind-variants'
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import {
+  closestCenter,
+  DndContext,
+  DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  UniqueIdentifier,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core'
+import { ReactNode, useCallback } from 'react'
+import { twMerge } from 'tailwind-merge'
+
+function getMuxComponentName({
+  field,
+  index,
+}: {
+  index: number
+  field: (typeof MUX_FIELD_NAME)[keyof typeof MUX_FIELD_NAME]
+}) {
+  return `${MUX_FIELD_NAME}.${index}.${field}`
+}
+
+function groupModels(
+  models: ModelByProvider[] = []
+): OptionsSchema<'listbox'>[] {
+  return map(groupBy(models, 'provider_name'), (items, providerName) => ({
+    id: providerName,
+    textValue: providerName,
+    items: items.map((item) => ({
+      id: `${item.provider_id}/${item.name}`,
+      textValue: item.name,
+    })),
+  }))
+}
+
+function getIndicesOnDragEnd<T extends { id: UniqueIdentifier }>(
+  event: DragEndEvent,
+  items: T[]
+): {
+  from: number
+  to: number
+} | null {
+  const { active, over } = event
+
+  if (over == null || active.id || over.id) return null // no-op
+
+  const from = items.findIndex(({ id }) => id === active.id)
+  const to = items.findIndex(({ id }) => id === over.id)
+
+  return {
+    from,
+    to,
+  }
+}
+
+function DndSortProvider<T extends { id: UniqueIdentifier }>({
+  children,
+  onDragEnd,
+  items,
+}: {
+  children: ReactNode
+  onDragEnd: (event: DragEndEvent) => void
+  items: T[]
+}) {
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  )
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragEnd={onDragEnd}
+    >
+      <SortableContext items={items} strategy={verticalListSortingStrategy}>
+        {children}
+      </SortableContext>
+    </DndContext>
+  )
+}
+
+const gridStyles = tv({
+  base: 'grid grid-cols-[2fr_1fr_2.5rem] items-center gap-2',
+})
+
+function Labels() {
+  return (
+    <div className={gridStyles()}>
+      <Label className="flex items-center gap-1">
+        Filter by
+        <TooltipTrigger delay={0}>
+          <TooltipInfoButton aria-label="Filter by description" />
+          <Tooltip placement="right" className="max-w-72 text-balance">
+            Filters are applied in top-down order. The first rule that matches
+            each prompt determines the chosen model. An empty filter applies to
+            all prompts.
+          </Tooltip>
+        </TooltipTrigger>
+      </Label>
+      <Label>Preferred model</Label>
+    </div>
+  )
+}
+
+function MuxRuleRow({
+  index,
+  item,
+  models,
+  hasDragDisabled,
+}: {
+  index: number
+  item: MuxRule & { id: string }
+  models: OptionsSchema<'listbox'>[]
+  hasDragDisabled: boolean
+}) {
+  console.debug('👉 item:', item)
+
+  const isCatchAll = item.matcher_type === MuxMatcherType.CATCH_ALL
+
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id: item.id })
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  }
+
+  return (
+    <li key={item.id} className={twMerge(gridStyles(), 'mb-2')} style={style}>
+      <FormTextField
+        aria-label="Matcher"
+        isDisabled={isCatchAll}
+        defaultValue={isCatchAll ? 'Catch-all' : undefined}
+        name={getMuxComponentName({
+          index,
+          field: 'matcher',
+        })}
+      >
+        <Input
+          icon={
+            isCatchAll ? undefined : (
+              <div
+                ref={setNodeRef}
+                {...attributes}
+                {...listeners}
+                className="pointer-events-auto"
+              >
+                <DotsGrid className="size-5" />
+              </div>
+            )
+          }
+        />
+      </FormTextField>
+
+      <FormComboBox
+        aria-label="Matcher"
+        items={models}
+        // isDisabled={isArchived || isDefaultRule}
+        name={getMuxComponentName({
+          index,
+          field: 'model',
+        })}
+      >
+        <ComboBoxFieldGroup>
+          <ComboBoxInput
+            icon={<SearchMd />}
+            isBorderless
+            placeholder="Type to search..."
+          />
+          <ComboBoxClearButton />
+          <ComboBoxButton />
+        </ComboBoxFieldGroup>
+      </FormComboBox>
+      <Button
+        aria-label="Delete"
+        isIcon
+        isDisabled
+        isDestructive
+        variant="secondary"
+        // onPress={() => removeRule(index)}
+      >
+        <Trash01 />
+      </Button>
+    </li>
+  )
+}
+
+export function WorkspaceMuxesFieldsArray() {
+  const { control } = useFormContext()
+
+  const { fields, move, prepend } = useFieldArray({
+    control,
+    name: WORKSPACE_CONFIG_FIELD_NAME.muxing_rules,
+  })
+
+  const { data: models = [] } = useQueryListAllModelsForAllProviders({
+    select: groupModels,
+  })
+
+  const onDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { from, to } = getIndicesOnDragEnd(event, fields) || {}
+      if (from && to) move(from, to)
+    },
+    [fields, move]
+  )
+
+  console.debug('👉 fields:', fields)
+
+  return (
+    <>
+      <Labels />
+      <DndSortProvider items={fields} onDragEnd={onDragEnd}>
+        <ul>
+          {fields.map((item, index) => (
+            <MuxRuleRow index={index} item={item} models={models} />
+          ))}
+        </ul>
+      </DndSortProvider>
+
+      <div className="flex gap-2">
+        <Button
+          className="w-fit"
+          variant="tertiary"
+          onPress={() => prepend({})}
+          // isDisabled={isArchived}
+        >
+          <Plus /> Add Filter
+        </Button>
+
+        {/* <LinkButton className="w-fit" variant="tertiary" href="/providers">
+          <LayersThree01 /> Manage providers
+        </LinkButton> */}
+      </div>
+    </>
+  )
+}