Skip to content

Commit f12e626

Browse files
alex-mcgovernalex-mcgovern
committedMar 6, 2025
begin cleaning up react-hook-form-field-array
1 parent 6e5b8ec commit f12e626

15 files changed

+536
-572
lines changed
 

Diff for: ‎src/features/workspace/components/__tests__/workspace-muxing-model.test.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { render } from '@/lib/test-utils'
22
import { screen, waitFor } from '@testing-library/react'
3-
import { WorkspaceMuxingModel } from '../workspace-muxing-model'
3+
import { WorkspaceMuxingModel } from '../form-mux'
44
import userEvent from '@testing-library/user-event'
55

66
test('renders muxing model', async () => {

Diff for: ‎src/features/workspace/components/form-mux-combobox-model.tsx

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { ModelByProvider } from '@/api/generated'
2+
import { useQueryListAllModelsForAllProviders } from '@/hooks/use-query-list-all-models-for-all-providers'
3+
import {
4+
ComboBoxButton,
5+
ComboBoxClearButton,
6+
ComboBoxFieldGroup,
7+
ComboBoxInput,
8+
FormComboBox,
9+
OptionsSchema,
10+
} from '@stacklok/ui-kit'
11+
import { groupBy, map } from 'lodash'
12+
import { getMuxFieldName } from '../lib/get-mux-field-name'
13+
import { SearchMd } from '@untitled-ui/icons-react'
14+
15+
function groupModels(
16+
models: ModelByProvider[] = []
17+
): OptionsSchema<'listbox'>[] {
18+
return map(groupBy(models, 'provider_name'), (items, providerName) => ({
19+
id: providerName,
20+
textValue: providerName,
21+
items: items.map((item) => ({
22+
id: `${item.provider_id}/${item.name}`,
23+
textValue: item.name,
24+
})),
25+
}))
26+
}
27+
28+
export function FormMuxComboboxModel({ index }: { index: number }) {
29+
const { data: models = [] } = useQueryListAllModelsForAllProviders({
30+
select: groupModels,
31+
})
32+
33+
return (
34+
<FormComboBox
35+
aria-label="Matcher"
36+
items={models}
37+
name={getMuxFieldName({
38+
index,
39+
field: 'model',
40+
})}
41+
>
42+
<ComboBoxFieldGroup>
43+
<ComboBoxInput
44+
icon={<SearchMd />}
45+
isBorderless
46+
placeholder="Type to search..."
47+
/>
48+
<ComboBoxClearButton />
49+
<ComboBoxButton />
50+
</ComboBoxFieldGroup>
51+
</FormComboBox>
52+
)
53+
}

Diff for: ‎src/features/workspace/components/form-mux-dnd-provider.tsx

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import {
2+
closestCenter,
3+
DndContext,
4+
DragEndEvent,
5+
KeyboardSensor,
6+
PointerSensor,
7+
UniqueIdentifier,
8+
useSensor,
9+
useSensors,
10+
} from '@dnd-kit/core'
11+
import {
12+
sortableKeyboardCoordinates,
13+
SortableContext,
14+
verticalListSortingStrategy,
15+
} from '@dnd-kit/sortable'
16+
import { ReactNode } from 'react'
17+
18+
export function DndSortProvider<T extends { id: UniqueIdentifier }>({
19+
children,
20+
onDragEnd,
21+
items,
22+
}: {
23+
children: ReactNode
24+
onDragEnd: (event: DragEndEvent) => void
25+
items: T[]
26+
}) {
27+
const sensors = useSensors(
28+
useSensor(PointerSensor),
29+
useSensor(KeyboardSensor, {
30+
coordinateGetter: sortableKeyboardCoordinates,
31+
})
32+
)
33+
34+
return (
35+
<DndContext
36+
sensors={sensors}
37+
collisionDetection={closestCenter}
38+
onDragEnd={onDragEnd}
39+
>
40+
<SortableContext items={items} strategy={verticalListSortingStrategy}>
41+
{children}
42+
</SortableContext>
43+
</DndContext>
44+
)
45+
}

Diff for: ‎src/features/workspace/components/form-mux-drag-to-reorder-button.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { useSortable } from '@dnd-kit/sortable'
2+
import { DotsGrid } from '@untitled-ui/icons-react'
3+
import { FieldValuesMuxRow } from '../lib/schema-mux'
4+
5+
export function FormMuxDragToReorderButton({
6+
item,
7+
}: {
8+
item: FieldValuesMuxRow
9+
}) {
10+
const { attributes, listeners, setNodeRef } = useSortable({ id: item.id })
11+
12+
return (
13+
<div
14+
ref={setNodeRef}
15+
{...attributes}
16+
{...listeners}
17+
className="pointer-events-auto rounded-sm p-1.5 hover:bg-gray-100 pressed:bg-gray-200"
18+
>
19+
<DotsGrid className="size-5" />
20+
</div>
21+
)
22+
}

Diff for: ‎src/features/workspace/components/form-mux-fields-array.tsx

+131
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import {
2+
Button,
3+
Label,
4+
Tooltip,
5+
TooltipInfoButton,
6+
TooltipTrigger,
7+
} from '@stacklok/ui-kit'
8+
import { useFieldArray, useFormContext } from 'react-hook-form'
9+
import {
10+
WORKSPACE_CONFIG_FIELD_NAME,
11+
WorkspaceConfigFieldValues,
12+
} from '../lib/schema-mux'
13+
import { MuxMatcherType } from '@/api/generated'
14+
import { uniqueId } from 'lodash'
15+
import { Plus } from '@untitled-ui/icons-react'
16+
import { tv } from 'tailwind-variants'
17+
import {
18+
SortableContext,
19+
sortableKeyboardCoordinates,
20+
verticalListSortingStrategy,
21+
} from '@dnd-kit/sortable'
22+
import {
23+
closestCenter,
24+
DndContext,
25+
DragEndEvent,
26+
KeyboardSensor,
27+
PointerSensor,
28+
UniqueIdentifier,
29+
useSensor,
30+
useSensors,
31+
} from '@dnd-kit/core'
32+
import { ReactNode, useCallback } from 'react'
33+
import { FormMuxRuleRow } from './form-mux-rule-row'
34+
import { DndSortProvider } from './form-mux-dnd-provider'
35+
36+
function getIndicesOnDragEnd<T extends { id: UniqueIdentifier }>(
37+
event: DragEndEvent,
38+
items: T[]
39+
): {
40+
from: number
41+
to: number
42+
} | null {
43+
const { active, over } = event
44+
45+
if (over == null || active.id || over.id) return null // no-op
46+
47+
const from = items.findIndex(({ id }) => id === active.id)
48+
const to = items.findIndex(({ id }) => id === over.id)
49+
50+
return {
51+
from,
52+
to,
53+
}
54+
}
55+
56+
const gridStyles = tv({
57+
base: 'grid grid-cols-[2fr_1fr_2.5rem] items-center gap-2',
58+
})
59+
60+
function Labels() {
61+
return (
62+
<div className={gridStyles()}>
63+
<Label className="flex items-center gap-1">
64+
Filter by
65+
<TooltipTrigger delay={0}>
66+
<TooltipInfoButton aria-label="Filter by description" />
67+
<Tooltip placement="right" className="max-w-72 text-balance">
68+
Filters are applied in top-down order. The first rule that matches
69+
each prompt determines the chosen model. An empty filter applies to
70+
all prompts.
71+
</Tooltip>
72+
</TooltipTrigger>
73+
</Label>
74+
<Label>Preferred model</Label>
75+
</div>
76+
)
77+
}
78+
79+
export function FormMuxFieldsArray() {
80+
const { control } = useFormContext<WorkspaceConfigFieldValues>()
81+
82+
const { fields, swap, prepend } = useFieldArray<WorkspaceConfigFieldValues>({
83+
control,
84+
name: WORKSPACE_CONFIG_FIELD_NAME.muxing_rules,
85+
})
86+
console.debug('👉 fields:', fields)
87+
88+
const onDragEnd = useCallback(
89+
(event: DragEndEvent) => {
90+
const { from, to } = getIndicesOnDragEnd(event, fields) || {}
91+
if (from && to) swap(from, to)
92+
},
93+
[fields, swap]
94+
)
95+
96+
return (
97+
<>
98+
<Labels />
99+
<DndSortProvider key={fields.length} items={fields} onDragEnd={onDragEnd}>
100+
<ul>
101+
{fields.map((item, index) => {
102+
console.debug('👉 MAPPED item:', item)
103+
return <FormMuxRuleRow index={index} key={item.id} item={item} />
104+
})}
105+
</ul>
106+
</DndSortProvider>
107+
108+
<div className="flex gap-2">
109+
<Button
110+
className="w-fit"
111+
variant="tertiary"
112+
onPress={() =>
113+
prepend({
114+
id: uniqueId(),
115+
model: undefined,
116+
matcher: '',
117+
matcher_type: MuxMatcherType.FILENAME_MATCH,
118+
})
119+
}
120+
// isDisabled={isArchived}
121+
>
122+
<Plus /> Add Filter
123+
</Button>
124+
125+
{/* <LinkButton className="w-fit" variant="tertiary" href="/providers">
126+
<LayersThree01 /> Manage providers
127+
</LinkButton> */}
128+
</div>
129+
</>
130+
)
131+
}

Diff for: ‎src/features/workspace/components/form-mux-rule-row.tsx

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { MuxMatcherType } from '@/api/generated'
2+
import { useSortable } from '@dnd-kit/sortable'
3+
import { CSS } from '@dnd-kit/utilities'
4+
import { Button } from '@stacklok/ui-kit'
5+
import { tv } from 'tailwind-variants'
6+
import { twMerge } from 'tailwind-merge'
7+
import { FormMuxComboboxModel } from './form-mux-combobox-model'
8+
import { Trash01 } from '@untitled-ui/icons-react'
9+
import { FormMuxTextFieldMatcher } from './form-mux-text-field-matcher'
10+
import { FieldValuesMuxRow } from '../lib/schema-mux'
11+
12+
const gridStyles = tv({
13+
base: 'grid grid-cols-[2fr_1fr_2.5rem] items-center gap-2',
14+
})
15+
16+
export function FormMuxRuleRow({
17+
index,
18+
item,
19+
}: {
20+
index: number
21+
item: FieldValuesMuxRow
22+
}) {
23+
const isCatchAll = item.matcher_type === MuxMatcherType.CATCH_ALL
24+
25+
const { transform, transition } = useSortable({ id: item.id })
26+
const style = {
27+
transform: CSS.Transform.toString(transform),
28+
transition,
29+
}
30+
31+
return (
32+
<li className={twMerge(gridStyles(), 'mb-2')} style={style}>
33+
<FormMuxTextFieldMatcher
34+
key={item.id}
35+
item={item}
36+
isCatchAll={isCatchAll}
37+
index={index}
38+
/>
39+
40+
<FormMuxComboboxModel index={index} />
41+
<Button
42+
aria-label="Delete"
43+
isIcon
44+
isDisabled
45+
isDestructive
46+
variant="secondary"
47+
// onPress={() => removeRule(index)}
48+
>
49+
<Trash01 />
50+
</Button>
51+
</li>
52+
)
53+
}

Diff for: ‎src/features/workspace/components/form-mux-select-matcher-type.tsx

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { MuxMatcherType } from '@/api/generated'
2+
import { FormSelect, SelectButton } from '@stacklok/ui-kit'
3+
import { getMuxFieldName } from '../lib/get-mux-field-name'
4+
5+
export function FormMuxComboboxModel({ index }: { index: number }) {
6+
return (
7+
<FormSelect
8+
aria-label="Matcher type"
9+
items={[
10+
{
11+
id: MuxMatcherType.CATCH_ALL,
12+
textValue: 'Catch-all',
13+
},
14+
{
15+
id: MuxMatcherType.FILENAME_MATCH,
16+
textValue: 'Filename',
17+
},
18+
{
19+
id: MuxMatcherType.REQUEST_TYPE_MATCH,
20+
textValue: 'Request type',
21+
},
22+
]}
23+
name={getMuxFieldName({
24+
index,
25+
field: 'matcher_type',
26+
})}
27+
>
28+
<SelectButton />
29+
</FormSelect>
30+
)
31+
}

Diff for: ‎src/features/workspace/components/form-mux-text-field-matcher.tsx

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { FormTextField, Input } from '@stacklok/ui-kit'
2+
import { getMuxFieldName } from '../lib/get-mux-field-name'
3+
import { FormMuxDragToReorderButton } from './form-mux-drag-to-reorder-button'
4+
import { FieldValuesMuxRow } from '../lib/schema-mux'
5+
6+
export function FormMuxTextFieldMatcher({
7+
index,
8+
isCatchAll,
9+
item,
10+
}: {
11+
index: number
12+
isCatchAll: boolean
13+
item: FieldValuesMuxRow
14+
}) {
15+
console.debug('👉 isCatchAll:', isCatchAll)
16+
return (
17+
<FormTextField
18+
aria-label="Matcher"
19+
isDisabled={isCatchAll}
20+
defaultValue={isCatchAll ? 'Catch-all' : undefined}
21+
name={getMuxFieldName({
22+
index,
23+
field: 'matcher',
24+
})}
25+
>
26+
<Input
27+
icon={
28+
isCatchAll ? undefined : <FormMuxDragToReorderButton item={item} />
29+
}
30+
/>
31+
</FormTextField>
32+
)
33+
}

Diff for: ‎src/features/workspace/components/form-mux.tsx

+131
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import {
2+
Alert,
3+
Card,
4+
CardBody,
5+
CardFooter,
6+
FormSubmitButton,
7+
FormV2,
8+
Link,
9+
LinkButton,
10+
Text,
11+
} from '@stacklok/ui-kit'
12+
import { twMerge } from 'tailwind-merge'
13+
import { useMutationPreferredModelWorkspace } from '../hooks/use-mutation-preferred-model-workspace'
14+
import { MuxMatcherType } from '@/api/generated'
15+
import { LinkExternal01 } from '@untitled-ui/icons-react'
16+
import { useQueryListAllModelsForAllProviders } from '@/hooks/use-query-list-all-models-for-all-providers'
17+
import { useQueryMuxingRulesWorkspace } from '../hooks/use-query-muxing-rules-workspace'
18+
import { FormMuxFieldsArray } from './form-mux-fields-array'
19+
import {
20+
schemaWorkspaceConfig,
21+
WorkspaceConfigFieldValues,
22+
} from '../lib/schema-mux'
23+
import { zodResolver } from '@hookform/resolvers/zod'
24+
25+
const DEFAULT_VALUES: WorkspaceConfigFieldValues = {
26+
muxing_rules: [
27+
{
28+
id: MuxMatcherType.CATCH_ALL,
29+
model: '',
30+
matcher: '',
31+
matcher_type: MuxMatcherType.CATCH_ALL,
32+
},
33+
],
34+
}
35+
36+
function MissingProviderBanner() {
37+
return (
38+
// TODO needs to update the related ui-kit component that diverges from the design
39+
<Alert
40+
variant="warning"
41+
className="bg-brand-200 font-normal text-primary dark:bg-[#272472]"
42+
title="You must configure at least one provider before selecting your desired model."
43+
>
44+
<LinkButton
45+
className="mt-4 text-white dark:bg-[#7D7DED]"
46+
href="/providers"
47+
>
48+
Configure a provider
49+
</LinkButton>
50+
</Alert>
51+
)
52+
}
53+
54+
export function WorkspaceMuxingModel({
55+
className,
56+
workspaceName,
57+
isArchived,
58+
}: {
59+
className?: string
60+
workspaceName: string
61+
isArchived: boolean | undefined
62+
}) {
63+
const { data: muxingRules, isPending } =
64+
useQueryMuxingRulesWorkspace(workspaceName)
65+
66+
const { mutateAsync } = useMutationPreferredModelWorkspace()
67+
const { data: providerModels = [] } = useQueryListAllModelsForAllProviders()
68+
const isModelsEmpty = !isPending && providerModels.length === 0
69+
70+
const handleSubmit = (data: WorkspaceConfigFieldValues) => {
71+
mutateAsync({
72+
path: { workspace_name: workspaceName },
73+
body: data.muxing_rules.map((rule) => {
74+
return rule.matcher
75+
? { ...rule, matcher_type: MuxMatcherType.FILENAME_MATCH }
76+
: { ...rule }
77+
}),
78+
})
79+
}
80+
81+
if (isModelsEmpty) {
82+
return (
83+
<Card className={twMerge(className, 'shrink-0')}>
84+
<CardBody className="flex flex-col gap-2">
85+
<Text className="text-primary">Model Muxing</Text>
86+
<MissingProviderBanner />
87+
</CardBody>
88+
</Card>
89+
)
90+
}
91+
92+
return (
93+
<FormV2<WorkspaceConfigFieldValues>
94+
onSubmit={handleSubmit}
95+
data-testid="preferred-model"
96+
options={{
97+
defaultValues: DEFAULT_VALUES,
98+
resolver: zodResolver(schemaWorkspaceConfig),
99+
}}
100+
>
101+
<Card className={twMerge(className, 'shrink-0')}>
102+
<CardBody className="flex flex-col gap-6">
103+
<div className="flex flex-col justify-start">
104+
<Text className="text-primary">Model Muxing</Text>
105+
<Text className="mb-0 flex items-center gap-1 text-balance text-secondary">
106+
Select the model you would like to use in this workspace. This
107+
section applies only if you are using the MUX endpoint.
108+
<Link
109+
variant="primary"
110+
className="flex items-center gap-1 no-underline"
111+
href="https://docs.codegate.ai/features/muxing"
112+
target="_blank"
113+
>
114+
Learn more <LinkExternal01 className="size-4" />
115+
</Link>
116+
</Text>
117+
</div>
118+
119+
<div className="flex w-full flex-col gap-2">
120+
<FormMuxFieldsArray />
121+
</div>
122+
</CardBody>
123+
<div></div>
124+
125+
<CardFooter className="justify-end">
126+
<FormSubmitButton />
127+
</CardFooter>
128+
</Card>
129+
</FormV2>
130+
)
131+
}

Diff for: ‎src/features/workspace/components/workspace-muxes-fields-array.tsx

-286
This file was deleted.

Diff for: ‎src/features/workspace/components/workspace-muxing-model.tsx

-263
This file was deleted.

Diff for: ‎src/features/workspace/lib/get-mux-field-name.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { MUX_FIELD_NAME } from './schema-mux'
2+
3+
export function getMuxFieldName({
4+
field,
5+
index,
6+
}: {
7+
index: number
8+
field: (typeof MUX_FIELD_NAME)[keyof typeof MUX_FIELD_NAME]
9+
}) {
10+
return `${MUX_FIELD_NAME}.${index}.${field}`
11+
}

Diff for: ‎src/features/workspace/lib/schema-mux.ts

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { MuxMatcherType } from '@/api/generated'
2+
import { z } from 'zod'
3+
4+
const schemaMuxCatchAllId = z.literal(MuxMatcherType.CATCH_ALL)
5+
6+
export type MuxCatchallId = z.infer<typeof schemaMuxCatchAllId>
7+
8+
const schemaMuxRow = z.object({
9+
model: z.string().optional(),
10+
matcher_type: z.nativeEnum(MuxMatcherType),
11+
matcher: z.string(),
12+
id: z.union([z.string().uuid(), schemaMuxCatchAllId]),
13+
})
14+
15+
export type FieldValuesMuxRow = z.infer<typeof schemaMuxRow>
16+
17+
export const schemaWorkspaceConfig = z.object({
18+
muxing_rules: z.array(schemaMuxRow),
19+
})
20+
21+
export type WorkspaceConfigFieldValues = z.infer<typeof schemaWorkspaceConfig>
22+
23+
export const WORKSPACE_CONFIG_FIELD_NAME = schemaWorkspaceConfig.keyof().Enum
24+
export const MUX_FIELD_NAME = schemaMuxRow.keyof().Enum

Diff for: ‎src/features/workspace/lib/workspace-config-schema.ts

-21
This file was deleted.

Diff for: ‎src/routes/route-workspace.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { useParams } from 'react-router-dom'
77
import { useArchivedWorkspaces } from '@/features/workspace/hooks/use-archived-workspaces'
88
import { useRestoreWorkspaceButton } from '@/features/workspace/hooks/use-restore-workspace-button'
99
import { WorkspaceCustomInstructions } from '@/features/workspace/components/workspace-custom-instructions'
10-
import { WorkspaceMuxingModel } from '@/features/workspace/components/workspace-muxing-model'
10+
import { WorkspaceMuxingModel } from '@/features/workspace/components/form-mux'
1111
import { PageContainer } from '@/components/page-container'
1212
import { WorkspaceActivateButton } from '@/features/workspace/components/workspace-activate-button'
1313

0 commit comments

Comments
 (0)
Please sign in to comment.