fix: hookup backend data for groups and roles

coder · jaaydenh · Sep 24, 2024 · Sep 17, 2024 · Sep 20, 2024 · Sep 20, 2024
commit 7ff9a07c17edd0dfd8b41a0ac9479444b7cbf5bf
diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPage.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPage.tsx
@@ -1,57 +1,27 @@
 import AddIcon from "@mui/icons-material/AddOutlined";
 import LaunchOutlined from "@mui/icons-material/LaunchOutlined";
 import Button from "@mui/material/Button";
+import { groupsByOrganization } from "api/queries/groups";
+import {
+	groupIdpSyncSettings,
+	organizationsPermissions,
+	roleIdpSyncSettings,
+} from "api/queries/organizations";
+import { EmptyState } from "components/EmptyState/EmptyState";
 import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
+import { Loader } from "components/Loader/Loader";
 import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
+import { useDashboard } from "modules/dashboard/useDashboard";
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
+import { useQuery } from "react-query";
 import { Link as RouterLink, useParams } from "react-router-dom";
 import { docs } from "utils/docs";
 import { pageTitle } from "utils/page";
+import { useOrganizationSettings } from "../ManagementSettingsLayout";
 import { IdpSyncHelpTooltip } from "./IdpSyncHelpTooltip";
 import IdpSyncPageView from "./IdpSyncPageView";
-import {
-	organizationsPermissions,
-	groupIdpSyncSettings,
-	roleIdpSyncSettings,
-} from "api/queries/organizations";
-import { useQuery } from "react-query";
-import { useOrganizationSettings } from "../ManagementSettingsLayout";
-import { Loader } from "components/Loader/Loader";
-import { EmptyState } from "components/EmptyState/EmptyState";
-
-const mockOIDCConfig = {
-	allow_signups: true,
-	client_id: "test",
-	client_secret: "test",
-	client_key_file: "test",
-	client_cert_file: "test",
-	email_domain: [],
-	issuer_url: "test",
-	scopes: [],
-	ignore_email_verified: true,
-	username_field: "",
-	name_field: "",
-	email_field: "",
-	auth_url_params: {},
-	ignore_user_info: true,
-	organization_field: "",
-	organization_mapping: {},
-	organization_assign_default: true,
-	group_auto_create: false,
-	group_regex_filter: "^Coder-.*$",
-	group_allow_list: [],
-	groups_field: "groups",
-	group_mapping: { group1: "developers", group2: "admin", group3: "auditors" },
-	user_role_field: "roles",
-	user_role_mapping: { role1: ["role1", "role2"] },
-	user_roles_default: [],
-	sign_in_text: "",
-	icon_url: "",
-	signups_disabled_text: "string",
-	skip_issuer_checks: true,
-};
 
 export const IdpSyncPage: FC = () => {
 	const { organization: organizationName } = useParams() as {
@@ -64,16 +34,20 @@ export const IdpSyncPage: FC = () => {
 	// 	organization: string;
 	// };
 	const { organizations } = useOrganizationSettings();
+
 	const organization = organizations?.find((o) => o.name === organizationName);
 	const permissionsQuery = useQuery(
 		organizationsPermissions(organizations?.map((o) => o.id)),
 	);
 	const groupIdpSyncSettingsQuery = useQuery(
 		groupIdpSyncSettings(organizationName),
 	);
+
+	const groupsQuery = useQuery(groupsByOrganization(organizationName));
 	const roleIdpSyncSettingsQuery = useQuery(
 		roleIdpSyncSettings(organizationName),
 	);
+
 	// const permissions = permissionsQuery.data;
 
 	if (!organization) {
@@ -121,9 +95,9 @@ export const IdpSyncPage: FC = () => {
 			</Stack>
 
 			<IdpSyncPageView
-				oidcConfig={mockOIDCConfig}
 				groupSyncSettings=
8000
{groupIdpSyncSettingsQuery.data}
 				roleSyncSettings={roleIdpSyncSettingsQuery.data}
+				groups={groupsQuery.data}
 			/>
 		</>
 	);

diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.stories.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.stories.tsx
@@ -1,5 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { MockOIDCConfig } from "testHelpers/entities";
+import {
+	MockGroup,
+	MockGroup2,
+	MockGroupSyncSettings,
+	MockRoleSyncSettings,
+} from "testHelpers/entities";
 import { IdpSyncPageView } from "./IdpSyncPageView";
 
 const meta: Meta<typeof IdpSyncPageView> = {
@@ -11,9 +16,17 @@ export default meta;
 type Story = StoryObj<typeof IdpSyncPageView>;
 
 export const Empty: Story = {
-	args: { oidcConfig: undefined },
+	args: {
+		groupSyncSettings: undefined,
+		roleSyncSettings: undefined,
+		groups: [MockGroup, MockGroup2],
+	},
 };
 
 export const Default: Story = {
-	args: { oidcConfig: MockOIDCConfig },
+	args: {
+		groupSyncSettings: MockGroupSyncSettings,
+		roleSyncSettings: MockRoleSyncSettings,
+		groups: [MockGroup, MockGroup2],
+	},
 };
diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.tsx
@@ -10,7 +10,7 @@ import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import type {
-	OIDCConfig,
+	Group,
 	GroupSyncSettings,
 	RoleSyncSettings,
 } from "api/typesGenerated";
@@ -26,20 +26,32 @@ import {
 import type { FC } from "react";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 import { docs } from "utils/docs";
+import { PillList } from "./PillList";
 
 export type IdpSyncPageViewProps = {
-	oidcConfig: OIDCConfig | undefined;
 	groupSyncSettings: GroupSyncSettings | undefined;
 	roleSyncSettings: RoleSyncSettings | undefined;
+	groups: Group[] | undefined;
 };
 
 export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({
-	oidcConfig,
 	groupSyncSettings,
 	roleSyncSettings,
+	groups,
 }) => {
-	const theme = useTheme();
-	const { user_role_field } = oidcConfig || {};
+	// const theme = useTheme();
+
+	const groupsMap = new Map<string, string>();
+	if (groups) {
+		for (const group of groups) {
+			groupsMap.set(group.id, group.display_name || group.name);
+		}
+	}
+
+	const getGroupNames = (groupIds: readonly string[]) => {
+		return groupIds.map((groupId) => groupsMap.get(groupId) || groupId);
+	};
+
 	return (
 		<>
 			<ChooseOne>
@@ -67,13 +79,13 @@ export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({
 									fieldText={
 										typeof groupSyncSettings?.regex_filter === "string"
 											? groupSyncSettings?.regex_filter
-											: ""
+											: "none"
 									}
 								/>
 								<IdpField
 									name={"Auto Create"}
 									fieldText={String(
-										groupSyncSettings?.auto_create_missing_groups,
+										groupSyncSettings?.auto_create_missing_groups || "n/a",
 									)}
 								/>
 							</Stack>
@@ -83,46 +95,46 @@ export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({
 							<Stack direction={"row"} alignItems={"center"} spacing={3}>
 								<IdpField
 									name={"Sync Field"}
-									fieldText={user_role_field}
+									fieldText={roleSyncSettings?.field}
 									showStatusIndicator
 								/>
 							</Stack>
 						</fieldset>
 					</Stack>
 					<Stack spacing={6}>
 						<IdpMappingTable
-							type="Role"
+							type="Group"
 							isEmpty={Boolean(
-								!oidcConfig?.user_role_mapping ||
-									Object.entries(oidcConfig?.user_role_mapping).length === 0,
+								!groupSyncSettings?.mapping ||
+									Object.entries(groupSyncSettings?.mapping).length === 0,
 							)}
 						>
-							{oidcConfig?.user_role_mapping &&
-								Object.entries(oidcConfig.user_role_mapping)
+							{groupSyncSettings?.mapping &&
+								Object.entries(groupSyncSettings.mapping)
 									.sort()
-									.map(([idpRole, roles]) => (
-										<RoleRow
-											key={idpRole}
-											idpRole={idpRole}
-											coderRoles={roles}
+									.map(([idpGroup, groups]) => (
+										<GroupRow
+											key={idpGroup}
+											idpGroup={idpGroup}
+											coderGroup={getGroupNames(groups)}
 										/>
 									))}
 						</IdpMappingTable>
 						<IdpMappingTable
-							type="Group"
+							type="Role"
 							isEmpty={Boolean(
-								!oidcConfig?.group_mapping ||
-									Object.entries(oidcConfig?.group_mapping).length === 0,
+								!roleSyncSettings?.mapping ||
+									Object.entries(roleSyncSettings?.mapping).length === 0,
 							)}
 						>
-							{oidcConfig?.user_role_mapping &&
-								Object.entries(oidcConfig.group_mapping)
+							{roleSyncSettings?.mapping &&
+								Object.entries(roleSyncSettings.mapping)
 									.sort()
-									.map(([idpGroup, group]) => (
-										<GroupRow
-											key={idpGroup}
-											idpGroup={idpGroup}
-											coderGroup={group}
+									.map(([idpRole, roles]) => (
+										<RoleRow
+											key={idpRole}
+											idpRole={idpRole}
+											coderRoles={roles}
 										/>
 									))}
 						</IdpMappingTable>
@@ -226,28 +238,32 @@ const IdpMappingTable: FC<IdpMappingTableProps> = ({
 
 interface GroupRowProps {
 	idpGroup: string;
-	coderGroup: string;
+	coderGroup: readonly string[];
 }
 
 const GroupRow: FC<GroupRowProps> = ({ idpGroup, coderGroup }) => {
 	return (
 		<TableRow data-testid={`group-${idpGroup}`}>
 			<TableCell>{idpGroup}</TableCell>
-			<TableCell>{coderGroup}</TableCell>
+			<TableCell>
+				<PillList roles={coderGroup} />
+			</TableCell>
 		</TableRow>
 	);
 };
 
 interface RoleRowProps {
 	idpRole: string;
-	coderRoles: ReadonlyArray<string>;
+	coderRoles: readonly string[];
 }
 
 const RoleRow: FC<RoleRowProps> = ({ idpRole, coderRoles }) => {
 	return (
 		<TableRow data-testid={`role-${idpRole}`}>
 			<TableCell>{idpRole}</TableCell>
-			<TableCell>coderRoles Placeholder</TableCell>
+			<TableCell>
+				<PillList roles={coderRoles} />
+			</TableCell>
 		</TableRow>
 	);
 };

diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/PillList.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/PillList.tsx
@@ -0,0 +1,91 @@
+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[];
+}
+
+export const PillList: FC<PillListProps> = ({ roles }) => {
+	return (
+		<Stack direction="row" spacing={1}>
+			{roles.length > 0 ? (
+				<Pill css={styles.pill}>{roles[0]}</Pill>
+			) : (
+				<p>None</p>
+			)}
+
+			{roles.length > 1 && <OverflowPill roles={roles.slice(1)} />}
+		</Stack>
+	);
+};
+
+type 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={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",
+	}),
+} satisfies Record<string, Interpolation<Theme>>;