coder · jaaydenh · Dec 4, 2024 · Nov 13, 2024 · Nov 15, 2024 · Nov 17, 2024
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,12 @@
 		"@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",
+		"@radix-ui/react-visually-hidden": "1.1.0",
 		"@tanstack/react-query-devtools": "4.35.3",
 		"@xterm/addon-canvas": "0.7.0",
 		"@xterm/addon-fit": "0.10.0",
@@ -67,6 +72,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",
@@ -176,7 +182,11 @@
 		"vite-plugin-checker": "0.8.0",
 		"vite-plugin-turbosnap": "1.0.3"
 	},
-	"browserslist": ["chrome 110", "firefox 111", "safari 16.0"],
+	"browserslist": [
+		"chrome 110",
+		"firefox 111",
+		"safari 16.0"
+	],
 	"resolutions": {
 		"optionator": "0.9.3",
 		"semver": "7.6.2"

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,24 @@ class ApiMethods {
 		return response.data;
 	};
 
+	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/Badge/Badge.stories.tsx b/site/src/components/Badge/Badge.stories.tsx
@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Badge } from "./Badge";
+
+const meta: Meta<typeof Badge> = {
+	title: "components/Badge",
+	component: Badge,
+	args: {
+		children: "Badge",
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof Badge>;
+
+export const Default: Story = {};
diff --git a/site/src/components/Badge/Badge.tsx b/site/src/components/Badge/Badge.tsx
@@ -0,0 +1,33 @@
+/**
+ * Copied from shadc/ui on 11/13/2024
+ * @see {@link https://ui.shadcn.com/docs/components/badge}
+ */
+import { type VariantProps, cva } from "class-variance-authority";
+import type { FC } from "react";
+
+import { cn } from "utils/cn";
+
+export const badgeVariants = cva(
+	"inline-flex items-center rounded-md border px-2.5 py-1 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",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+export interface BadgeProps
+	extends React.HTMLAttributes<HTMLDivElement>,
+		VariantProps<typeof badgeVariants> {}
+
+export const Badge: FC<BadgeProps> = ({ className, variant, ...props }) => {
+	return (
+		<div className={cn(badgeVariants({ variant }), className)} {...props} />
+	);
+};
diff --git a/site/src/components/Button/Button.stories.tsx b/site/src/components/Button/Button.stories.tsx
@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Trash } from "lucide-react";
+import { Button } from "./Button";
+
+const meta: Meta<typeof Button> = {
+	title: "components/Button",
+	component: Button,
+	args: {
+		children: (
+			<>
+				<Trash />
+				Button
+			</>
+		),
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {};
+
+export const Outline: Story = {
+	args: {
+		variant: "outline",
+	},
+};
+
+export const Subtle: Story = {
+	args: {
+		variant: "subtle",
+	},
+};
+
+export const Warning: Story = {
+	args: {
+		variant: "warning",
+	},
+};
+
+export const DefaultDisabled: Story = {
+	args: {
+		disabled: true,
+	},
+};
+
+export const OutlineDisabled: Story = {
+	args: {
+		variant: "outline",
+		disabled: true,
+	},
+};
+
+export const SubtleDisabled: Story = {
+	args: {
+		variant: "subtle",
+		disabled: true,
+	},
+};
+
+export const IconButtonDefault: Story = {
+	args: {
+		variant: "default",
+		children: <Trash />,
+	},
+};
+
+export const IconButtonOutline: Story = {
+	args: {
+		variant: "outline",
+		children: <Trash />,
+	},
+};
+
+export const IconButtonSubtle: Story = {
+	args: {
+		variant: "subtle",
+		children: <Trash />,
+	},
+};
diff --git a/site/src/components/ui/button.tsx → site/src/components/Button/Button.tsx b/site/src/components/ui/button.tsx → site/src/components/Button/Button.tsx
@@ -1,16 +1,20 @@
+/**
+ * Copied from shadc/ui on 11/06/2024
+ * @see {@link https://ui.shadcn.com/docs/components/button}
+ */
 import { Slot } from "@radix-ui/react-slot";
 import { type VariantProps, cva } from "class-variance-authority";
-import * as React from "react";
+import { type FC, forwardRef } from "react";
 
 import { cn } from "utils/cn";
 
-const buttonVariants = cva(
-	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 font-semibold border-solid",
+export const buttonVariants = cva(
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link disabled:pointer-events-none disabled:text-content-disabled [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 font-semibold border-solid cursor-pointer",
 	{
 		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 disabled:bg-surface-secondary",
 				outline:
 					"border border-border-default text-content-primary bg-transparent hover:bg-surface-secondary",
 				subtle:
@@ -19,7 +23,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",
 			},
 		},
@@ -36,18 +40,16 @@ export interface ButtonProps
 	asChild?: boolean;
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-	({ className, variant, size, asChild = false, ...props }, ref) => {
-		const Comp = asChild ? Slot : "button";
-		return (
-			<Comp
-				className={cn(buttonVariants({ variant, size, className }))}
-				ref={ref}
-				{...props}
-			/>
-		);
-	},
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };
+export const Button: FC<ButtonProps> = forwardRef<
+	HTMLButtonElement,
+	ButtonProps
+>(({ className, variant, size, asChild = false, ...props }, ref) => {
+	const Comp = asChild ? Slot : "button";
+	return (
+		<Comp
+			className={cn(buttonVariants({ variant, size, className }))}
+			ref={ref}
+			{...props}
+		/>
+	);
+});