Add hosts settings page for managing host access

apps/desktop/src/renderer/routes/_authenticated/hooks/useOptimisticCollectionActions/useOptimisticCollectionActions.ts

@@ -1,4 +1,4 @@
-import type { TaskPriority } from "@superset/db/enums";
+import type { TaskPriority, V2UsersHostRole } from "@superset/db/enums";
 import { toast } from "@superset/ui/sonner";
 import { useCallback, useMemo } from "react";
 import { isDesktopChatDevMode } from "renderer/lib/dev-chat";
@@ -94,6 +94,11 @@ export function useOptimisticCollectionActions() {
 			mutation: () => PersistableTransaction,
 		) => runMutation("optimistic.chatSessions", failureTitle, mutation);
 
+		const runUsersHostsMutation = (
+			failureTitle: string,
+			mutation: () => PersistableTransaction,
+		) => runMutation("optimistic.v2UsersHosts", failureTitle, mutation);
+
 		return {
 			tasks: {
 				updateTitle: (taskId: string, title: string) =>
@@ -197,6 +202,36 @@ export function useOptimisticCollectionActions() {
 					);
 				},
 			},
+			v2UsersHosts: {
+				addMember: (input: {
+					hostId: string;
+					userId: string;
+					organizationId: string;
+					role?: V2UsersHostRole;
+				}) =>
+					runUsersHostsMutation("Failed to add member", () => {
+						const now = new Date();
+						return collections.v2UsersHosts.insert({
+							id: crypto.randomUUID(),
+							hostId: input.hostId,
+							userId: input.userId,
+							organizationId: input.organizationId,
+							role: input.role ?? "member",
+							createdAt: now,
+							updatedAt: now,
+						});
+					}),
+				removeMember: (rowId: string) =>
+					runUsersHostsMutation("Failed to remove member", () =>
+						collections.v2UsersHosts.delete(rowId),
+					),
+				setMemberRole: (rowId: string, role: V2UsersHostRole) =>
+					runUsersHostsMutation("Failed to update role", () =>
+						collections.v2UsersHosts.update(rowId, (draft) => {
+							draft.role = role;
+						}),
+					),
+			},
 		};
 	}, [collections, runMutation]);
 }

apps/desktop/src/renderer/routes/_authenticated/providers/CollectionsProvider/collections.ts

@@ -335,6 +335,36 @@ function createOrgCollections(organizationId: string): OrgCollections {
 				columnMapper,
 			},
 			getKey: (item) => item.id,
+			onInsert: async ({ transaction }) => {
+				const item = transaction.mutations[0].modified;
+				const result = await apiClient.v2Host.addMember.mutate({
+					id: item.id,
+					hostId: item.hostId,
+					userId: item.userId,
+					role: item.role,
+				});
+				return { txid: result.txid };
+			},
+			onUpdate: async ({ transaction }) => {
+				const { original, changes } = transaction.mutations[0];
+				if (changes.role === undefined) {
+					throw new Error("Only role updates are supported on v2_users_hosts");
+				}
+				const result = await apiClient.v2Host.setMemberRole.mutate({
+					hostId: original.hostId,
+					userId: original.userId,
+					role: changes.role,
+				});
+				return { txid: result.txid };
+			},
+			onDelete: async ({ transaction }) => {
+				const item = transaction.mutations[0].original;
+				const result = await apiClient.v2Host.removeMember.mutate({
+					hostId: item.hostId,
+					userId: item.userId,
+				});
+				return { txid: result.txid };
+			},
 		}),
 	);
 

apps/desktop/src/renderer/routes/_authenticated/settings/components/SettingsSidebar/GeneralSettings.tsx

@@ -5,8 +5,10 @@ import {
 	HiOutlineBell,
 	HiOutlineBuildingOffice2,
 	HiOutlineCommandLine,
+	HiOutlineComputerDesktop,
 	HiOutlineCpuChip,
 	HiOutlineCreditCard,
+	HiOutlineFolder,
 	HiOutlineKey,
 	HiOutlineLink,
 	HiOutlineLockClosed,
@@ -41,7 +43,9 @@ type SettingsRoute =
 	| "/settings/billing"
 	| "/settings/api-keys"
 	| "/settings/security"
-	| "/settings/permissions";
+	| "/settings/permissions"
+	| "/settings/projects"
+	| "/settings/hosts";
 
 interface SectionItem {
 	id: SettingsRoute;
@@ -136,6 +140,18 @@ const SECTION_GROUPS: SectionGroup[] = [
 				label: "Organization",
 				icon: <HiOutlineBuildingOffice2 className="h-4 w-4" />,
 			},
+			{
+				id: "/settings/projects",
+				section: "project",
+				label: "Projects",
+				icon: <HiOutlineFolder className="h-4 w-4" />,
+			},
+			{
+				id: "/settings/hosts",
+				section: "hosts",
+				label: "Hosts",
+				icon: <HiOutlineComputerDesktop className="h-4 w-4" />,
+			},
 			{
 				id: "/settings/integrations",
 				section: "integrations",
@@ -206,7 +222,10 @@ export function GeneralSettings({ matchCounts }: GeneralSettingsProps) {
 						</h2>
 						<nav className="flex flex-col">
 							{filteredItems.map((section) => {
-								const isActive = matchRoute({ to: section.id });
+								const isActive = !!matchRoute({
+									to: section.id,
+									fuzzy: true,
+								});
 								const count = matchCounts?.[section.section];
 
 								return (

apps/desktop/src/renderer/routes/_authenticated/settings/components/SettingsSidebar/SettingsSidebar.tsx

@@ -13,15 +13,13 @@ import {
 } from "renderer/stores/settings-state";
 import { getMatchCountBySection } from "../../utils/settings-search";
 import { GeneralSettings } from "./GeneralSettings";
-import { ProjectsSettings } from "./ProjectsSettings";
 
 export function SettingsSidebar() {
 	const searchQuery = useSettingsSearchQuery();
 	const setSearchQuery = useSetSettingsSearchQuery();
 	const originRoute = useSettingsOriginRoute();
 	const normalizedSearchQuery = searchQuery.trim();
-	const isSearchActive = normalizedSearchQuery.length > 0;
-	const matchCounts = isSearchActive
+	const matchCounts = normalizedSearchQuery
 		? getMatchCountBySection(normalizedSearchQuery)
 		: null;
 
@@ -62,10 +60,6 @@ export function SettingsSidebar() {
 
 			<div className="flex-1 overflow-y-auto min-h-0">
 				<GeneralSettings matchCounts={matchCounts} />
-				<ProjectsSettings
-					isSearchActive={isSearchActive}
-					matchCounts={matchCounts}
-				/>
 			</div>
 
 			<div className="pt-3 mt-3 border-t border-border">