feat: initial commit for idp org sync settings

coder · jaaydenh · Dec 4, 2024 · Nov 13, 2024 · Nov 15, 2024 · Nov 17, 2024
commit d0baa8cdd2c75bdf7730e7afc1ed8b87d01c6cd5
diff --git a/site/components.json b/site/components.json
@@ -16,5 +16,6 @@
 		"ui": "/components/ui",
 		"lib": "/lib",
 		"hooks": "/hooks"
-	}
+	},
+	"iconLibrary": "lucide"
 }
diff --git a/site/package.json b/site/package.json
@@ -50,7 +50,11 @@
 		"@mui/system": "5.16.7",
 		"@mui/utils": "5.16.6",
 		"@mui/x-tree-view": "7.18.0",
+		"@radix-ui/react-dialog": "1.1.2",
+		"@radix-ui/react-label": "2.1.0",
+		"@radix-ui/react-slider": "1.2.1",
 		"@radix-ui/react-slot": "1.1.0",
+		"@radix-ui/react-switch": "1.1.1",
 		"@tanstack/react-query-devtools": "4.35.3",
 		"@xterm/addon-canvas": "0.7.0",
 		"@xterm/addon-fit": "0.10.0",
@@ -67,6 +71,7 @@
 		"chroma-js": "2.4.2",
 		"class-variance-authority": "0.7.0",
 		"clsx": "2.1.1",
+		"cmdk": "1.0.0",
 		"color-convert": "2.0.1",
 		"cron-parser": "4.9.0",
 		"cronstrue": "2.50.0",

diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -712,6 +712,27 @@ class ApiMethods {
 		return response.data;
 	};
 
+	/**
+	 * @param organization Can be the organization's ID or name
+	 */
+	getOrganizationIdpSyncSettings =
+		async (): Promise<TypesGen.OrganizationSyncSettings> => {
+			const response = await this.axios.get<TypesGen.OrganizationSyncSettings>(
+				"/api/v2/settings/idpsync/organization",
+			);
+			return response.data;
+		};
+
+	patchOrganizationIdpSyncSettings = async (
+		data: TypesGen.OrganizationSyncSettings,
+	) => {
+		const response = await this.axios.patch<TypesGen.Response>(
+			"/api/v2/settings/idpsync/organization",
+			data,
+		);
+		return response.data;
+	};
+
 	/**
 	 * @param organization Can be the organization's ID or name
 	 */

diff --git a/site/src/api/queries/idpsync.ts b/site/src/api/queries/idpsync.ts
@@ -0,0 +1,23 @@
+import { API } from "api/api";
+import type { OrganizationSyncSettings } from "api/typesGenerated";
+import type { QueryClient } from "react-query";
+
+export const getOrganizationIdpSyncSettingsKey = () => [
+	"organizationIdpSyncSettings",
+];
+
+export const patchOrganizationSyncSettings = (queryClient: QueryClient) => {
+	return {
+		mutationFn: (request: OrganizationSyncSettings) =>
+			API.patchOrganizationIdpSyncSettings(request),
+		onSuccess: async () =>
+			await queryClient.invalidateQueries(getOrganizationIdpSyncSettingsKey()),
+	};
+};
+
+export const organizationIdpSyncSettings = () => {
+	return {
+		queryKey: getOrganizationIdpSyncSettingsKey(),
+		queryFn: () => API.getOrganizationIdpSyncSettings(),
+	};
+};
diff --git a/site/src/components/ui/badge.tsx b/site/src/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "utils/cn";
+
+const badgeVariants = cva(
+	"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+	{
+		variants: {
+			variant: {
+				default:
+					"border-transparent bg-surface-secondary text-content-secondary shadow hover:bg-surface-tertiary",
+				secondary:
+					"border-transparent bg-surface-secondary text-content-secondary hover:bg-surface-tertiary",
+				destructive:
+					"border-transparent bg-surface-error text-content-danger shadow hover:bg-surface-error/80",
+				outline: "text-content-primary",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+export interface BadgeProps
+	extends React.HTMLAttributes<HTMLDivElement>,
+		VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+	return (
+		<div className={cn(badgeVariants({ variant }), className)} {...props} />
+	);
+}
+
+export { Badge, badgeVariants };
diff --git a/site/src/components/ui/button.tsx b/site/src/components/ui/button.tsx
@@ -10,7 +10,7 @@ const buttonVariants = cva(
 		variants: {
 			variant: {
 				default:
-					"bg-surface-invert-primary text-content-invert hover:bg-surface-invert-secondary",
+					"bg-surface-invert-primary text-content-invert hover:bg-surface-invert-secondary border-none",
 				outline:
 					"border border-border-default text-content-primary bg-transparent hover:bg-surface-secondary",
 				subtle:
@@ -19,7 +19,7 @@ const buttonVariants = cva(
 					"border border-border-error text-content-primary bg-surface-error hover:bg-transparent",
 			},
 			size: {
-				default: "h-10 px-3 py-2",
+				default: "h-9 px-3 py-2",
 				sm: "h-8 px-2 text-xs",
 			},
 		},

diff --git a/site/src/components/ui/command.tsx b/site/src/components/ui/command.tsx
@@ -0,0 +1,151 @@
+import type { DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+import * as React from "react";
+
+import { Dialog, DialogContent } from "components/ui/dialog";
+import { cn } from "utils/cn";
+
+const Command = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive
+		ref={ref}
+		className={cn(
+			"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-content-primary",
+			className,
+		)}
+		{...props}
+	/>
+));
+Command.displayName = CommandPrimitive.displayName;
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+	return (
+		<Dialog {...props}>
+			<DialogContent className="overflow-hidden p-0">
+				<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+					{children}
+				</Command>
+			</DialogContent>
+		</Dialog>
+	);
+};
+
+const CommandInput = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Input>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+	<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+		<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+		<CommandPrimitive.Input
+			ref={ref}
+			className={cn(
+				"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-content-secondary disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		/>
+	</div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.List>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.List
+		ref={ref}
+		className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+		{...props}
+	/>
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Empty>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+	<CommandPrimitive.Empty
+		ref={ref}
+		className="py-6 text-center text-sm"
+		{...props}
+	/>
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Group>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Group
+		ref={ref}
+		className={cn(
+			"overflow-hidden p-1 text-content-primary [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-content-secondary",
+			className,
+		)}
+		{...props}
+	/>
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Separator
+		ref={ref}
+		className={cn("-mx-1 h-px bg-border", className)}
+		{...props}
+	/>
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Item
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-surface-secondary data-[selected=true]:text-content-primary data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+			className,
+		)}
+		{...props}
+	/>
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+	return (
+		<span
+			className={cn(
+				"ml-auto text-xs tracking-widest text-muted-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+	Command,
+	CommandDialog,
+	CommandInput,
+	CommandList,
+	CommandEmpty,
+	CommandGroup,
+	CommandItem,
+	CommandShortcut,
+	CommandSeparator,
+};