fix: update rules and add tests case

Author: peppescg

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

@@ -3,51 +3,115 @@ import { screen, waitFor } from "@testing-library/react";
 import { WorkspacePreferredModel } from "../workspace-preferred-model";
 import userEvent from "@testing-library/user-event";
 
-// next commit, I needs to refactor it
-test.skip("render model overrides", async () => {
+test("render model overrides", async () => {
   render(
     <WorkspacePreferredModel
       isArchived={false}
       workspaceName="fake-workspace"
     />,
   );
-  expect(screen.getByText(/preferred model/i)).toBeVisible();
+  expect(screen.getByText(/model muxing/i)).toBeVisible();
   expect(
     screen.getByText(
-      /select the model you would like to use in this workspace./i,
+      /filters will be applied in order \(top to bottom\), empty filters will apply to all\./i,
     ),
   ).toBeVisible();
   expect(
-    screen.getByRole("button", { name: /select the model/i }),
+    screen.getByRole("link", {
+      name: /learn more/i,
+    }),
   ).toBeVisible();
 
-  await waitFor(() => {
-    expect(screen.getByRole("button", { name: /save/i })).toBeVisible();
-  });
+  await userEvent.type(
+    screen.getByRole("textbox", {
+      name: /filter by/i,
+    }),
+    ".tsx",
+  );
+
+  await userEvent.click(screen.getByTestId(/workspace-models-dropdown/i));
+  await userEvent.click(
+    screen.getByRole("option", {
+      name: /claude-3.6/i,
+    }),
+  );
+
+  expect(screen.getByRole("button", { name: /add filter/i })).toBeVisible();
+  expect(
+    screen.getByRole("button", { name: /manage providers/i }),
+  ).toBeVisible();
+  expect(screen.getByRole("button", { name: /revert changes/i })).toBeVisible();
+  expect(screen.getByRole("button", { name: /save/i })).toBeVisible();
+});
+
+test("disabled muxing fields and buttons for archived workspace", async () => {
+  render(
+    <WorkspacePreferredModel
+      isArchived={true}
+      workspaceName="fake-workspace"
+    />,
+  );
+
+  expect(await screen.findByRole("button", { name: /save/i })).toBeDisabled();
+  expect(screen.getByTestId(/workspace-models-dropdown/i)).toBeDisabled();
+  expect(
+    await screen.findByRole("button", { name: /add filter/i }),
+  ).toBeDisabled();
 });
 
-// next commit, I needs to refactor it
-test.skip("submit preferred model", async () => {
+test("submit additional model overrides", async () => {
   render(
     <WorkspacePreferredModel
       isArchived={false}
       workspaceName="fake-workspace"
     />,
   );
 
+  expect(screen.getAllByRole("textbox", { name: /filter by/i }).length).toEqual(
+    1,
+  );
+  await userEvent.type(
+    screen.getByRole("textbox", {
+      name: /filter by/i,
+    }),
+    ".tsx",
+  );
+  await userEvent.click(screen.getByTestId(/workspace-models-dropdown/i));
+  await userEvent.click(
+    screen.getByRole("option", {
+      name: /claude-3.6/i,
+    }),
+  );
+
+  await userEvent.click(screen.getByRole("button", { name: /add filter/i }));
+
+  const textFields = await screen.findAllByRole("textbox", {
+    name: /filter by/i,
+  });
+  expect(textFields.length).toEqual(2);
+  const modelsButton = await screen.findAllByTestId(
+    /workspace-models-dropdown/i,
+  );
+  expect(modelsButton.length).toEqual(2);
+
+  await userEvent.type(textFields[1] as HTMLFormElement, ".ts");
   await userEvent.click(
-    screen.getByRole("button", { name: /select the model/i }),
+    (await screen.findByRole("button", {
+      name: /select a model/i,
+    })) as HTMLFormElement,
   );
 
   await userEvent.click(
     screen.getByRole("option", {
-      name: "anthropic/claude-3.5",
+      name: /chatgpt-4p/i,
     }),
   );
 
   await userEvent.click(screen.getByRole("button", { name: /save/i }));
 
   await waitFor(() => {
-    expect(screen.getByText(/preferred model for fake-workspace updated/i));
+    expect(
+      screen.getByText(/muxing rules for fake-workspace updated/i),
+    ).toBeVisible();
   });
 });

src/features/workspace/components/workspace-models-dropdown.tsx

@@ -18,6 +18,7 @@ import { useState } from "react";
 
 type Props = {
   rule: MuxRule & { id: string };
+  isArchived: boolean;
   models: V1ListAllModelsForAllProvidersResponse;
   onChange: ({
     model,
@@ -80,6 +81,7 @@ function filterModels({
 
 export function WorkspaceModelsDropdown({
   rule,
+  isArchived,
   models = [],
   onChange,
 }: Props) {
@@ -99,10 +101,12 @@ export function WorkspaceModelsDropdown({
       <DialogTrigger isOpen={isOpen} onOpenChange={(test) => setIsOpen(test)}>
         <Button
           variant="secondary"
+          isDisabled={isArchived}
+          data-testid="workspace-models-dropdown"
           className="flex justify-between cursor-pointer bg-gray-25 border-gray-400 shadow-none font-normal w-full"
         >
-          {currentModel}
-          <ChevronDown />
+          <span>{currentModel || "Select a model"}</span>
+          <ChevronDown className="shrink-0" />
         </Button>
 
         <Popover className="w-[32rem] p-3" placement="top end">

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

@@ -54,6 +54,7 @@ type SortableItemProps = {
   index: number;
   rule: PreferredMuxRule;
   models: V1ListAllModelsForAllProvidersResponse;
+  isArchived: boolean;
   showRemoveButton: boolean;
   setRuleItem: (rule: PreferredMuxRule) => void;
   removeRule: (index: number) => void;
@@ -66,6 +67,7 @@ function SortableItem({
   removeRule,
   models,
   showRemoveButton,
+  isArchived,
 }: SortableItemProps) {
   return (
     <div className="flex items-center gap-2" key={rule.id}>
@@ -74,6 +76,7 @@ function SortableItem({
           aria-labelledby="filter-by-label-id"
           onFocus={(event) => event.preventDefault()}
           value={rule?.matcher ?? ""}
+          isDisabled={isArchived}
           name="matcher"
           onChange={(matcher) => {
             setRuleItem({ ...rule, matcher });
@@ -85,6 +88,7 @@ function SortableItem({
       <div className="flex w-3/5 gap-2">
         <WorkspaceModelsDropdown
           rule={rule}
+          isArchived={isArchived}
           models={models}
           onChange={({ model, provider_id }) =>
             setRuleItem({ ...rule, provider_id, model })
@@ -142,7 +146,7 @@ export function WorkspacePreferredModel({
     return (
       <Card className={twMerge(className, "shrink-0")}>
         <CardBody className="flex flex-col gap-2">
-          <Text className="text-primary">Preferred Model</Text>
+          <Text className="text-primary">Model Muxing</Text>
           <MissingProviderBanner />
         </CardBody>
       </Card>
@@ -193,6 +197,7 @@ export function WorkspacePreferredModel({
                   removeRule={removeRule}
                   models={providerModels}
                   showRemoveButton={showRemoveButton}
+                  isArchived={isArchived}
                 />
               )}
             </SortableArea>

src/features/workspace/hooks/use-muxing-rules-form-workspace.ts

@@ -17,13 +17,13 @@ export const useMuxingRulesFormState = (initialValues: MuxRule[]) => {
   const formState = useFormState<{
     rules: PreferredMuxRule[];
   }>({
-    rules: initialValues.map((item) => ({ ...item, id: uuidv4() })) ?? [
-      { ...DEFAULT_STATE, id: uuidv4() },
-    ],
+    rules: [{ ...DEFAULT_STATE, id: uuidv4() }],
   });
   const { values, updateFormValues } = formState;
 
   useEffect(() => {
+    if (initialValues.length === 0) return;
+
     updateFormValues({
       rules: initialValues.map((item) => ({ ...item, id: uuidv4() })),
     });

src/hooks/useFormState.ts

@@ -23,15 +23,12 @@ export function useFormState<Values extends Record<string, unknown>>(
   // this could be replaced with some form library later
   const [values, setValues] = useState<Values>(memoizedInitialValues);
 
-  const updateFormValues = useCallback(
-    (newState: Partial<Values>) => {
-      setValues((prevState: Values) => ({
-        ...prevState,
-        ...newState,
-      }));
-    },
-    [setValues],
-  );
+  const updateFormValues = useCallback((newState: Partial<Values>) => {
+    setValues((prevState: Values) => {
+      if (isEqual(newState, prevState)) return prevState;
+      return { ...prevState, ...newState };
+    });
+  }, []);
 
   const resetForm = useCallback(() => {
     setValues(memoizedInitialValues);