Sep 16, 2024 · Sep 13, 2024
diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.tsx
 TableRowSkeleton,
 } from "components/TableLoader/TableLoader";
 import type { FC } from "react";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 import { docs } from "utils/docs";

 export type IdpSyncPageViewProps = {
 Object.entries(oidcConfig?.user_role_mapping).length === 0,
 )}
 >
 <>
 {oidcConfig?.user_role_mapping &&
 Object.entries(oidcConfig.user_role_mapping)
 .sort()
 .map(([idpRole, roles]) => (
 <RoleRow
 key={idpRole}
 idpRole={idpRole}
 coderRoles={roles}
 />
 ))}
 </>
 {oidcConfig?.user_role_mapping &&
 Object.entries(oidcConfig.user_role_mapping)
 .sort()
 .map(([idpRole, roles]) => (
 <RoleRow
 key={idpRole}
 idpRole={idpRole}
 coderRoles={roles}
 />
 ))}
 </IdpMappingTable>
 <IdpMappingTable
 type="Group"
 Object.entries(oidcConfig?.group_mapping).length === 0,
 )}
 >
 <>
 {oidcConfig?.user_role_mapping &&
 Object.entries(oidcConfig.group_mapping)
 .sort()
 .map(([idpGroup, group]) => (
 <GroupRow
 key={idpGroup}
 idpGroup={idpGroup}
 coderGroup={group}
 />
 ))}
 </>
 {oidcConfig?.user_role_mapping &&
 Object.entries(oidcConfig.group_mapping)
 .sort()
 .map(([idpGroup, group]) => (
 <GroupRow
 key={idpGroup}
 idpGroup={idpGroup}
 coderGroup={group}
 />
 ))}
 </IdpMappingTable>
 </Stack>
 </Cond>
 return (
 <span css={{ display: "flex", alignItems: "center", gap: "16px" }}>
 <h4>{name}</h4>
 <p css={styles.secondary}>
 <p css={styles.field}>
 {fieldText ||
 (showStatusIndicator && (
 <div
 return (
 <TableRow data-testid={`group-${idpGroup}`}>
 <TableCell>{idpGroup}</TableCell>
 <TableCell css={styles.secondary}>{coderGroup}</TableCell>
 <TableCell>{coderGroup}</TableCell>
 </TableRow>
 );
 };
 return (
 <TableRow data-testid={`role-${idpRole}`}>
 <TableCell>{idpRole}</TableCell>
 <TableCell css={styles.secondary}>coderRoles Placeholder</TableCell>
 <TableCell>coderRoles Placeholder</TableCell>
 </TableRow>
 );
 };
 };

 const styles = {
 secondary: (theme) => ({
 field: (theme) => ({
 color: theme.palette.text.secondary,
 fontFamily: MONOSPACE_FONT_FAMILY,
 }),
 fields: () => ({
 marginBottom: "60px",
Original file line number	Diff line number	Diff line change
Expand Up		@@ -20,6 +20,7 @@ import {
		TableRowSkeleton,
		} from "components/TableLoader/TableLoader";
		import type { FC } from "react";
		import { MONOSPACE_FONT_FAMILY } from "theme/constants";
		import { docs } from "utils/docs";

		export type IdpSyncPageViewProps = {
Expand DownExpand Up		@@ -85,18 +86,16 @@ export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({ oidcConfig }) => {
		Object.entries(oidcConfig?.user_role_mapping).length === 0,
		)}
		>
		<>
		{oidcConfig?.user_role_mapping &&
		Object.entries(oidcConfig.user_role_mapping)
		.sort()
		.map(([idpRole, roles]) => (
		<RoleRow
		key={idpRole}
		idpRole={idpRole}
		coderRoles={roles}
		/>
		))}
		</>
		{oidcConfig?.user_role_mapping &&
		Object.entries(oidcConfig.user_role_mapping)
		.sort()
		.map(([idpRole, roles]) => (
		<RoleRow
		key={idpRole}
		idpRole={idpRole}
		coderRoles={roles}
		/>
		))}
		</IdpMappingTable>
		<IdpMappingTable
		type="Group"
Expand All		@@ -105,18 +104,16 @@ export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({ oidcConfig }) => {
		Object.entries(oidcConfig?.group_mapping).length === 0,
		)}
		>
		<>
		{oidcConfig?.user_role_mapping &&
		Object.entries(oidcConfig.group_mapping)
		.sort()
		.map(([idpGroup, group]) => (
		<GroupRow
		key={idpGroup}
		idpGroup={idpGroup}
		coderGroup={group}
		/>
		))}
		</>
		{oidcConfig?.user_role_mapping &&
		Object.entries(oidcConfig.group_mapping)
		.sort()
		.map(([idpGroup, group]) => (
		<GroupRow
		key={idpGroup}
		idpGroup={idpGroup}
		coderGroup={group}
		/>
		))}
		</IdpMappingTable>
		</Stack>
		</Cond>
Expand All		@@ -139,7 +136,7 @@ const IdpField: FC<IdpFieldProps> = ({
		return (
		<span css={{ display: "flex", alignItems: "center", gap: "16px" }}>
		<h4>{name}</h4>
		<p css={styles.secondary}>
		<p css={styles.field}>
		{fieldText \|\|
		(showStatusIndicator && (
		<div
Expand DownExpand Up		@@ -225,7 +222,7 @@ const GroupRow: FC<GroupRowProps> = ({ idpGroup, coderGroup }) => {
		return (
		<TableRow data-testid={`group-${idpGroup}`}>
		<TableCell>{idpGroup}</TableCell>
		<TableCell css={styles.secondary}>{coderGroup}</TableCell>
		<TableCell>{coderGroup}</TableCell>
		</TableRow>
		);
		};
Expand All		@@ -239,7 +236,7 @@ const RoleRow: FC<RoleRowProps> = ({ idpRole, coderRoles }) => {
		return (
		<TableRow data-testid={`role-${idpRole}`}>
		<TableCell>{idpRole}</TableCell>
		<TableCell css={styles.secondary}>coderRoles Placeholder</TableCell>
		<TableCell>coderRoles Placeholder</TableCell>
		</TableRow>
		);
		};
Expand All		@@ -263,8 +260,9 @@ const TableLoader = () => {
		};

		const styles = {
		secondary: (theme) => ({
		field: (theme) => ({
		color: theme.palette.text.secondary,
		fontFamily: MONOSPACE_FONT_FAMILY,
		}),
		fields: () => ({
		marginBottom: "60px",
Expand Down