coder · jaaydenh · Sep 24, 2024 · Sep 17, 2024 · Sep 20, 2024 · Sep 20, 2024
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -704,6 +704,30 @@ class ApiMethods {
 		return response.data;
 	};
 
+	/**
+	 * @param organization Can be the organization's ID or name
+	 */
+	getGroupIdpSyncSettingsByOrganization = async (
+		organization: string,
+	): Promise<TypesGen.GroupSyncSettings> => {
+		const response = await this.axios.get<TypesGen.GroupSyncSettings>(
+			`/api/v2/organizations/${organization}/settings/idpsync/groups`,
+		);
+		return response.data;
+	};
+
+	/**
+	 * @param organization Can be the organization's ID or name
+	 */
+	getRoleIdpSyncSettingsByOrganization = async (
+		organization: string,
+	): Promise<TypesGen.RoleSyncSettings> => {
+		const response = await this.axios.get<TypesGen.RoleSyncSettings>(
+			`/api/v2/organizations/${organization}/settings/idpsync/roles`,
+		);
+		return response.data;
+	};
+
 	getTemplate = async (templateId: string): Promise<TypesGen.Template> => {
 		const response = await this.axios.get<TypesGen.Template>(
 			`/api/v2/templates/${templateId}`,

diff --git a/site/src/api/queries/organizations.ts b/site/src/api/queries/organizations.ts
@@ -141,6 +141,32 @@ export const provisionerDaemonGroups = (organization: string) => {
 	};
 };
 
+export const getGroupIdpSyncSettingsKey = (organization: string) => [
+	"organizations",
+	organization,
+	"groupIdpSyncSettings",
+];
+
+export const groupIdpSyncSettings = (organization: string) => {
+	return {
+		queryKey: getGroupIdpSyncSettingsKey(organization),
+		queryFn: () => API.getGroupIdpSyncSettingsByOrganization(organization),
+	};
+};
+
+export const getRoleIdpSyncSettingsKey = (organization: string) => [
+	"organizations",
+	organization,
+	"roleIdpSyncSettings",
+];
+
+export const roleIdpSyncSettings = (organization: string) => {
+	return {
+		queryKey: getRoleIdpSyncSettingsKey(organization),
+		queryFn: () => API.getRoleIdpSyncSettingsByOrganization(organization),
+	};
+};
+
 /**
  * Fetch permissions for a single organization.
  *
@@ -243,6 +269,13 @@ export const organizationsPermissions = (
 					},
 					action: "read",
 				},
+				viewIdpSyncSettings: {
+					object: {
+						resource_type: "idpsync_settings",
+						organization_id: organizationId,
+					},
+					action: "read",
+				},
 			});
 
 			// The endpoint takes a flat array, so to avoid collisions prepend each

diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
@@ -74,7 +74,7 @@ export const AppearanceSettingsPageView: FC<
 					<PopoverContent css={{ transform: "translateY(-28px)" }}>
 						<PopoverPaywall
 							message="Appearance"
-							description="With a Premium license, you can customize the appearance of your deployment."
+							description="With a Premium license, you can customize the appearance and branding of your deployment."
 							documentationLink="https://coder.com/docs/admin/appearance"
 						/>
 					</PopoverContent>

diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
@@ -29,12 +29,12 @@ import { Link as RouterLink, useNavigate } from "react-router-dom";
 import { docs } from "utils/docs";
 import { PermissionPillsList } from "./PermissionPillsList";
 
-export type CustomRolesPageViewProps = {
+interface CustomRolesPageViewProps {
 	roles: Role[] | undefined;
 	onDeleteRole: (role: Role) => void;
 	canAssignOrgRole: boolean;
 	isCustomRolesEnabled: boolean;
-};
+}
 
 export const CustomRolesPageView: FC<CustomRolesPageViewProps> = ({
 	roles,

diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/ExportPolicyButton.stories.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/ExportPolicyButton.stories.tsx
@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
+import {
+	MockGroupSyncSettings,
+	MockOrganization,
+	MockRoleSyncSettings,
+} from "testHelpers/entities";
+import { ExportPolicyButton } from "./ExportPolicyButton";
+
+const meta: Meta<typeof ExportPolicyButton> = {
+	title: "modules/resources/ExportPolicyButton",
+	component: ExportPolicyButton,
+	args: {
+		syncSettings: MockGroupSyncSettings,
+		type: "groups",
+		organization: MockOrganization,
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof ExportPolicyButton>;
+
+export const Default: Story = {};
+
+export const ClickExportGroupPolicy: Story = {
+	args: {
+		syncSettings: MockGroupSyncSettings,
+		type: "groups",
+		organization: MockOrganization,
+		download: fn(),
+	},
+	play: async ({ canvasElement, args }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(
+			canvas.getByRole("button", { name: "Export Policy" }),
+		);
+		await waitFor(() =>
+			expect(args.download).toHaveBeenCalledWith(
+				expect.anything(),
-				expect.anything(),
+expect.any(Blob)
-				expect.anything(),
+expect.any(Blob)
+				`${MockOrganization.name}_groups-policy.json`,
+			),
+		);
+		const blob: Blob = (args.download as jest.Mock).mock.lastCall[0];
+		await expect(blob.type).toEqual("application/json");
+		await expect(await blob.text()).toEqual(
+			JSON.stringify(MockGroupSyncSettings, null, 2),
+		);
+	},
+};
+
+export const ClickExportRolePolicy: Story = {
+	args: {
+		syncSettings: MockRoleSyncSettings,
+		type: "roles",
+		organization: MockOrganization,
+		download: fn(),
+	},
+	play: async ({ canvasElement, args }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(
+			canvas.getByRole("button", { name: "Export Policy" }),
+		);
+		await waitFor(() =>
+			expect(args.download).toHaveBeenCalledWith(
+				expect.anything(),
+				`${MockOrganization.name}_roles-policy.json`,
+			),
+		);
+		const blob: Blob = (args.download as jest.Mock).mock.lastCall[0];
+		await expect(blob.type).toEqual("application/json");
+		await expect(await blob.text()).toEqual(
+			JSON.stringify(MockRoleSyncSettings, null, 2),
+		);
+	},
+};
diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/ExportPolicyButton.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/ExportPolicyButton.tsx
@@ -0,0 +1,57 @@
+import DownloadOutlined from "@mui/icons-material/DownloadOutlined";
+import Button from "@mui/material/Button";
+import type {
+	GroupSyncSettings,
+	Organization,
+	RoleSyncSettings,
+} from "api/typesGenerated";
+import { displayError } from "components/GlobalSnackbar/utils";
+import { saveAs } from "file-saver";
+import { type FC, useMemo, useState } from "react";
+
+interface DownloadPolicyButtonProps {
+	syncSettings: RoleSyncSettings | GroupSyncSettings | undefined;
+	type: "groups" | "roles";
+	organization: Organization;
+	download?: (file: Blob, filename: string) => void;
+}
+
+export const ExportPolicyButton: FC<DownloadPolicyButtonProps> = ({
+	syncSettings,
+	type,
+	organization,
+	download = saveAs,
+}) => {
+	const [isDownloading, setIsDownloading] = useState(false);
+
+	const policyJSON = useMemo(() => {
+		return syncSettings?.field && syncSettings.mapping
+			? JSON.stringify(syncSettings, null, 2)
+			: null;
+	}, [syncSettings]);
+
+	return (
+		<Button
+			startIcon={<DownloadOutlined />}
+			disabled={!policyJSON || isDownloading}
+			onClick={async () => {
+				if (policyJSON) {
+					try {
+						setIsDownloading(true);
+						const file = new Blob([policyJSON], {
+							type: "application/json",
+						});
+						download(file, `${organization.name}_${type}-policy.json`);
+					} catch (e) {
+						console.error(e);
+						displayError("Failed to export policy json");
+					} finally {
+						setIsDownloading(false);
+					}
+				}
+			}}
+		>
+			Export Policy
+		</Button>
+	);
+};
diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpPillList.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpPillList.tsx
@@ -0,0 +1,106 @@
+import { type Interpolation, type Theme, useTheme } from "@emotion/react";
+import Stack from "@mui/material/Stack";
+import { Pill } from "components/Pill/Pill";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "components/Popover/Popover";
+import type { FC } from "react";
+
+interface PillListProps {
+	roles: readonly string[];
+}
+
+// used to check if the role is a UUID
+const UUID =
+	/^[0-9a-f]{8}-[0-9a-f]{4}-[0-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+
+export const IdpPillList: FC<PillListProps> = ({ roles }) => {
+	return (
+		<Stack direction="row" spacing={1}>
+			{roles.length > 0 ? (
+				<Pill css={UUID.test(roles[0]) ? styles.errorPill : styles.pill}>
+					{roles[0]}
+				</Pill>
+			) : (
+				<p>None</p>
+			)}
+
+			{roles.length > 1 && <OverflowPill roles={roles.slice(1)} />}
+		</Stack>
+	);
+};
+
+interface OverflowPillProps {
+	roles: string[];
+}
+
+const OverflowPill: FC<OverflowPillProps> = ({ roles }) => {
+	const theme = useTheme();
+
+	return (
+		<Popover mode="hover">
+			<PopoverTrigger>
+				<Pill
+					css={{
+						backgroundColor: theme.palette.background.paper,
+						borderColor: theme.palette.divider,
+					}}
+					data-testid="overflow-pill"
+				>
+					+{roles.length} more
+				</Pill>
+			</PopoverTrigger>
+
+			<PopoverContent
+				disableRestoreFocus
+				disableScrollLock
+				css={{
+					".MuiPaper-root": {
+						display: "flex",
+						flexFlow: "column wrap",
+						columnGap: 8,
+						rowGap: 12,
+						padding: "12px 16px",
+						alignContent: "space-around",
+						minWidth: "auto",
+						backgroundColor: theme.palette.background.default,
+					},
+				}}
+				anchorOrigin={{
+					vertical: -4,
+					horizontal: "center",
+				}}
+				transformOrigin={{
+					vertical: "bottom",
+					horizontal: "center",
+				}}
+			>
+				{roles.map((role) => (
+					<Pill
+						key={role}
+						css={UUID.test(role) ? styles.errorPill : styles.pill}
+					>
+						{role}
+					</Pill>
+				))}
+			</PopoverContent>
+		</Popover>
+	);
+};
+
+const styles = {
+	pill: (theme) => ({
+		backgroundColor: theme.experimental.pillDefault.background,
+		borderColor: theme.experimental.pillDefault.outline,
+		color: theme.experimental.pillDefault.text,
+		width: "fit-content",
+	}),
+	errorPill: (theme) => ({
+		backgroundColor: theme.roles.error.background,
+		borderColor: theme.roles.error.outline,
+		color: theme.roles.error.text,
+		width: "fit-content",
+	}),
+} satisfies Record<string, Interpolation<Theme>>;