feat: add providers endpoint and enable muxing

[peppescg]

Add provider endpoint page CRUD, this allow to select preferred model per workspace (muxing).

Add providers item into Settings menu

Create provider and save preferred model in the workspace

Kapture.2025-02-05.at.10.52.35.mp4

Delete provider

Kapture.2025-02-05.at.10.14.46.mp4

nit: tests are on going

[coveralls]

Pull Request Test Coverage Report for Build 13156904333

Details

• 24 of 111 (21.62%) changed or added relevant lines in 22 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage decreased (-3.8%) to 69.83%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/features/providers/hooks/use-providers.ts	0	1	0.0%
src/features/providers/components/provider-dialog-footer.tsx	0	2	0.0%
src/features/providers/components/provider-dialog.tsx	0	2	0.0%
src/lib/utils.ts	0	2	0.0%
src/mocks/msw/handlers.ts	1	3	33.33%
src/features/providers/components/table-actions.tsx	1	4	25.0%
src/features/providers/hooks/use-invalidate-providers-queries.ts	0	4	0.0%
src/features/providers/hooks/use-mutation-delete-provider.ts	1	5	20.0%
src/features/providers/lib/utils.ts	1	5	20.0%
src/features/providers/hooks/use-mutation-create-provider.ts	0	5	0.0%

Totals
Change from base Build 13154295391:	-3.8%
Covered Lines:	813
Relevant Lines:	1101

---

💛 - Coveralls

[alex-mcgovern]

suggestion: eliminate the useState+useEffect & lean on react-query for state management?

Suggested change

	import { useQuery } from "@tanstack/react-query";
	import { v1GetProviderEndpointOptions } from "@/api/generated/@tanstack/react-query.gen";
	import { AddProviderEndpointRequest, ProviderType } from "@/api/generated";
	import { useEffect, useState } from "react";
	export function useProvider(providerId: string) {
	const [provider, setProvider] = useState<AddProviderEndpointRequest>({
	name: "",
	description: "",
	auth_type: null,
	provider_type: ProviderType.OPENAI,
	endpoint: "",
	api_key: "",
	});
	const { data, isPending, isError } = useQuery({
	...v1GetProviderEndpointOptions({ path: { provider_id: providerId } }),
	});
	useEffect(() => {
	if (data) {
	setProvider(data);
	}
	}, [data]);
	return { isPending, isError, provider, setProvider };
	}
	import { useQuery } from "@tanstack/react-query";
	import { v1GetProviderEndpointOptions } from "@/api/generated/@tanstack/react-query.gen";
	import { ProviderType, V1GetProviderEndpointResponse } from "@/api/generated";
	const DEFAULT_PROVIDER = {
	name: "",
	description: "",
	auth_type: null,
	provider_type: ProviderType.OPENAI,
	endpoint: "",
	api_key: "",
	} as const satisfies V1GetProviderEndpointResponse & { api_key: string };
	export function useProvider(providerId: string) {
	const { data = DEFAULT_PROVIDER, ...rest } = useQuery({
	...v1GetProviderEndpointOptions({ path: { provider_id: providerId } }),
	});
	return { data, ...rest };
	}

[peppescg]

that's cool for default state, but how I can handle the setProvider? and submit the data within a mutation? I guess that having the Form the state is needed 🤔

[alex-mcgovern]

nit: I would prefer to do this without zustand. We are already doing something similar with useActiveWorkspaceName:

import { ListActiveWorkspacesResponse } from "@/api/generated";
import { useActiveWorkspaces } from "./use-active-workspaces";

// NOTE: This needs to be a stable function reference to enable memo-isation of
// the select operation on each React re-render.
function select(data: ListActiveWorkspacesResponse | undefined): string | null {
  return data?.workspaces?.[0]?.name ?? null;
}

export function useActiveWorkspaceName() {
  return useActiveWorkspaces({
    select,
  });
}

The reason I'm opposed to zustand is the data is already globally available via react-query, but we're introducing a copy/syncing mechanism that seems unnecessary.

[peppescg]

the zustand was a leftover from the muxing first PR with the array and drag n drop feature, but I guess that having the Form the state is needed 🤔 so I would replace it with a basic useState