Dec 4, 2024 · Nov 13, 2024 · Nov 15, 2024 · Nov 17, 2024 · Nov 17, 2024 · Nov 17, 2024
diff --git a/site/components.json b/site/components.json
 "ui": "/components/ui",
 "lib": "/lib",
 "hooks": "/hooks"
 }
 },
 "iconLibrary": "lucide"
 }
diff --git a/site/package.json b/site/package.json
 "@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",
 "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",
 "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
 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
 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 = (isIdpSyncEnabled: boolean) => {
 return {
 queryKey: getOrganizationIdpSyncSettingsKey(),
 queryFn: () => API.getOrganizationIdpSyncSettings(),
 enabled: isIdpSyncEnabled,
 };
 };
diff --git a/site/src/components/Badge/Badge.stories.tsx b/site/src/components/Badge/Badge.stories.tsx
 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
 /**
 * 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
 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
 /**
 * 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",
 exportconst 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:
 "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",
 },
 },
 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}
 />
 );
 });
Original file line number	Diff line number	Diff line change
Expand Up		@@ -16,5 +16,6 @@
		"ui": "/components/ui",
		"lib": "/lib",
		"hooks": "/hooks"
		}
		},
		"iconLibrary": "lucide"
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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",
Expand All		@@ -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",
Expand DownExpand Up		@@ -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"
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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
		*/
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,24 @@
		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 = (isIdpSyncEnabled: boolean) => {
		return {
		queryKey: getOrganizationIdpSyncSettingsKey(),
		queryFn: () => API.getOrganizationIdpSyncSettings(),
		enabled: isIdpSyncEnabled,
		};
		};
Original file line number	Diff line number	Diff line change
		@@ -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 = {};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,32 @@
		/**
		* 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} />
		);
		};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,80 @@
		import type { Meta, StoryObj } from "@storybook/react";
		import { Trash } from "lucide-react";
Copy link Member aslilacDec 3, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. does this bring inall of lucide? how does this affect our bundle size? Copy link ContributorAuthor jaaydenhDec 3, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Only the icons that are used,https://lucide.dev/guide/#code-optimization
		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 />,
		},
		};
Original file line number	Diff line number	Diff line change
		@@ -1,16 +1,19 @@
		/**
		* 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",
		exportconst 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:
Expand All		@@ -19,7 +22,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",
		},
		},
Expand All		@@ -36,18 +39,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}
		/>
		);
		});