invalidate muxes after changing preferred model

Author: kantord

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

@@ -48,4 +48,6 @@ test("submit preferred model", async () => {
   await waitFor(() => {
     expect(screen.getByText(/preferred model for fake-workspace updated/i));
   });
+
+  expect(screen.queryByText(/revert changes/i)).not.toBeInTheDocument();
 });

src/features/workspace/components/workspace-name.tsx

@@ -12,6 +12,7 @@ import { useNavigate } from "react-router-dom";
 import { twMerge } from "tailwind-merge";
 import { useFormState } from "@/hooks/useFormState";
 import { FormButtons } from "@/components/FormButtons";
+import { FormEvent } from "react";
 
 export function WorkspaceName({
   className,
@@ -32,7 +33,7 @@ export function WorkspaceName({
   const isDefault = workspaceName === "default";
   const isUneditable = isArchived || isPending || isDefault;
 
-  const handleSubmit = (event: { preventDefault: () => void }) => {
+  const handleSubmit = (event: FormEvent) => {
     event.preventDefault();
 
     mutateAsync(

src/features/workspace/components/workspace-preferred-model.tsx

@@ -16,6 +16,9 @@ import { usePreferredModelWorkspace } from "../hooks/use-preferred-preferred-mod
 import { Select, SelectButton } from "@stacklok/ui-kit";
 import { useQueryListAllModelsForAllProviders } from "@/hooks/use-query-list-all-models-for-all-providers";
 import { FormButtons } from "@/components/FormButtons";
+import { invalidateQueries } from "@/lib/react-query-utils";
+import { v1GetWorkspaceMuxesQueryKey } from "@/api/generated/@tanstack/react-query.gen";
+import { useQueryClient } from "@tanstack/react-query";
 
 function MissingProviderBanner() {
   return (
@@ -39,25 +42,30 @@ export function WorkspacePreferredModel({
   workspaceName: string;
   isArchived: boolean | undefined;
 }) {
+  const queryClient = useQueryClient();
   const { formState, isPending } = usePreferredModelWorkspace(workspaceName);
   const { mutateAsync } = useMutationPreferredModelWorkspace();
   const { data: providerModels = [] } = useQueryListAllModelsForAllProviders();
-  const { model, provider_id } = formState.values.preferredModel;
   const isModelsEmpty = !isPending && providerModels.length === 0;
 
   const handleSubmit = (event: FormEvent) => {
     event.preventDefault();
-    mutateAsync({
-      path: { workspace_name: workspaceName },
-      body: [
-        {
-          matcher: "",
-          provider_id,
-          model,
-          matcher_type: MuxMatcherType.CATCH_ALL,
-        },
-      ],
-    });
+    mutateAsync(
+      {
+        path: { workspace_name: workspaceName },
+        body: [
+          {
+            matcher: "",
+            matcher_type: MuxMatcherType.CATCH_ALL,
+            ...formState.values.preferredModel,
+          },
+        ],
+      },
+      {
+        onSuccess: () =>
+          invalidateQueries(queryClient, [v1GetWorkspaceMuxesQueryKey]),
+      },
+    );
   };
 
   return (