Merge branch 'main' into fix/duplicate-react-query-devtools

Author: alex-mcgovern

.github/actions/setup/action.yaml

@@ -13,7 +13,7 @@ runs:
 
     - name: Cache dependencies
       id: cache
-      uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4
+      uses: actions/cache@v4.2.2
       with:
         path: ./node_modules
         key: modules-${{ hashFiles('package-lock.json') }}

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [0.18.1](https://github.com/stacklok/codegate-ui/compare/v0.18.0...v0.18.1) (2025-03-03)
+
+
+### Bug Fixes
+
+* id separator for provider, model muxing rule ([#360](https://github.com/stacklok/codegate-ui/issues/360)) ([3cff061](https://github.com/stacklok/codegate-ui/commit/3cff0613a57f4c9c69add80f63d072238e797656))
+
+## [0.18.0](https://github.com/stacklok/codegate-ui/compare/v0.17.0...v0.18.0) (2025-02-21)
+
+
+### Features
+
+* support muxing fim and chat ([#343](https://github.com/stacklok/codegate-ui/issues/343)) ([14b1b2d](https://github.com/stacklok/codegate-ui/commit/14b1b2d470889957ca836de4a26a179fb6c56e5c))
+
 ## [0.17.0](https://github.com/stacklok/codegate-ui/compare/v0.16.0...v0.17.0) (2025-02-20)
 
 

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-project",
   "private": true,
-  "version": "0.17.0",
+  "version": "0.18.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -31,7 +31,7 @@
     "@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

@@ -144,11 +144,23 @@ export type ModelByProvider = {
 
 /**
  * Represents the different types of matchers we support.
+ *
+ * The 3 rules present match filenames and request types. They're used in conjunction with the
+ * matcher field in the MuxRule model.
+ * E.g.
+ * - catch_all-> Always match
+ * - filename_match and match: requests.py -> Match the request if the filename is requests.py
+ * - fim_filename and match: main.py -> Match the request if the request type is fim
+ * and the filename is main.py
+ *
+ * NOTE: Removing or updating fields from this enum will require a migration.
+ * Adding new fields is safe.
  */
 export enum MuxMatcherType {
   CATCH_ALL = 'catch_all',
   FILENAME_MATCH = 'filename_match',
-  REQUEST_TYPE_MATCH = 'request_type_match',
+  FIM_FILENAME = 'fim_filename',
+  CHAT_FILENAME = 'chat_filename',
 }
 
 /**

src/api/generated/types.gen.ts

@@ -1642,10 +1642,11 @@
         "enum": [
           "catch_all",
           "filename_match",
-          "request_type_match"
+          "fim_filename",
+          "chat_filename"
         ],
         "title": "MuxMatcherType",
-        "description": "Represents the different types of matchers we support."
+        "description": "Represents the different types of matchers we support.\n\nThe 3 rules present match filenames and request types. They're used in conjunction with the\nmatcher field in the MuxRule model.\nE.g.\n- catch_all-> Always match\n- filename_match and match: requests.py -> Match the request if the filename is requests.py\n- fim_filename and match: main.py -> Match the request if the request type is fim\nand the filename is main.py\n\nNOTE: Removing or updating fields from this enum will require a migration.\nAdding new fields is safe."
       },
       "MuxRule": {
         "properties": {

src/api/openapi.json

@@ -10,7 +10,10 @@ export function WorkspacesByProvider({
   if (workspaces.length === 0) return null
   return (
     <div className="mb-6 flex flex-col gap-1">
-      <p>The following workspaces will be impacted by this action</p>
+      <p>
+        The following workspaces are currently using this provider and will need
+        to be updated:
+      </p>
       <div className="flex flex-wrap gap-1">
         {uniqBy(workspaces, 'name').map((item, index) => {
           return (

src/features/providers/components/workspaces-by-provider.tsx

@@ -7,6 +7,12 @@ test('renders muxing model', async () => {
   render(
     <WorkspaceMuxingModel isArchived={false} workspaceName="fake-workspace" />
   )
+
+  expect(
+    screen.getByRole('button', {
+      name: /all types/i,
+    })
+  ).toBeVisible()
   expect(screen.getByText(/model muxing/i)).toBeVisible()
   expect(
     screen.getByText(
@@ -46,6 +52,11 @@ test('disabled muxing fields and buttons for archived workspace', async () => {
 
   expect(await screen.findByRole('button', { name: /save/i })).toBeDisabled()
   expect(screen.getByTestId(/workspace-models-dropdown/i)).toBeDisabled()
+  expect(
+    screen.getByRole('button', {
+      name: /all types/i,
+    })
+  ).toBeDisabled()
   expect(
     await screen.findByRole('button', { name: /add filter/i })
   ).toBeDisabled()
@@ -75,12 +86,27 @@ test('submit additional model overrides', async () => {
     name: /filter by/i,
   })
   expect(textFields.length).toEqual(2)
+
+  const requestTypeSelect = screen.getAllByRole('button', {
+    name: /fim & chat/i,
+  })[0]
+  await userEvent.click(requestTypeSelect as HTMLFormElement)
+  await userEvent.click(
+    screen.getByRole('option', {
+      name: 'FIM',
+    })
+  )
+  expect(
+    screen.getByRole('button', {
+      name: 'FIM',
+    })
+  ).toBeVisible()
   const modelsButton = await screen.findAllByTestId(
     /workspace-models-dropdown/i
   )
   expect(modelsButton.length).toEqual(2)
 
-  await userEvent.type(textFields[1] as HTMLFormElement, '.ts')
+  await userEvent.type(textFields[0] as HTMLFormElement, '.tsx')
 
   await userEvent.click(
     (await screen.findByRole('button', {
@@ -94,6 +120,37 @@ test('submit additional model overrides', async () => {
     })
   )
 
+  await userEvent.click(screen.getByRole('button', { name: /add filter/i }))
+  await userEvent.click(
+    screen.getAllByRole('button', {
+      name: /chat/i,
+    })[1] as HTMLFormElement
+  )
+
+  await userEvent.click(
+    screen.getByRole('option', {
+      name: 'Chat',
+    })
+  )
+
+  await userEvent.type(
+    screen.getAllByRole('textbox', {
+      name: /filter by/i,
+    })[1] as HTMLFormElement,
+    '.ts'
+  )
+
+  await userEvent.click(
+    (await screen.findByRole('button', {
+      name: /select a model/i,
+    })) as HTMLFormElement
+  )
+
+  await userEvent.click(
+    screen.getByRole('option', {
+      name: /chatgpt-4o/i,
+    })
+  )
   await userEvent.click(screen.getByRole('button', { name: /save/i }))
 
   await waitFor(() => {

src/features/workspace/components/__tests__/workspace-muxing-model.test.tsx

@@ -37,7 +37,7 @@ function groupModelsByProviderName(
     id: providerName,
     textValue: providerName,
     items: items.map((item) => ({
-      id: `${item.provider_id}/${item.name}`,
+      id: `${item.provider_id}@${item.name}`,
       textValue: item.name,
     })),
   }))
@@ -116,8 +116,10 @@ export function WorkspaceModelsDropdown({
               const selectedValue = v.values().next().value
               if (!selectedValue && typeof selectedValue !== 'string') return
               if (typeof selectedValue === 'string') {
-                const [provider_id, modelName] = selectedValue.split('/')
-                if (!provider_id || !modelName) return
+                const atIndex = selectedValue.indexOf('@')
+                const provider_id = selectedValue.slice(0, atIndex)
+                const modelName = selectedValue.slice(atIndex + 1)
+                if (atIndex === -1 && (!provider_id || !modelName)) return
                 onChange({
                   model: modelName,
                   provider_id,