Skip to content

Commit a75ad85

Browse files
jaaydenhjaaydenh
committed
feat: add mock data and update pageview for mock data
1 parent 8298346 commit a75ad85

File tree

2 files changed

+122
-34
lines changed

2 files changed

+122
-34
lines changed

‎site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPage.tsx

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,38 @@ import { useOrganizationSettings } from "../ManagementSettingsLayout";
1919
import { IdpSyncHelpTooltip } from "./IdpSyncHelpTooltip";
2020
import IdpSyncPageView from "./IdpSyncPageView";
2121

22+
const mockOIDCConfig = {
23+
allow_signups: true,
24+
client_id: "test",
25+
client_secret: "test",
26+
client_key_file: "test",
27+
client_cert_file: "test",
28+
email_domain: [],
29+
issuer_url: "test",
30+
scopes: [],
31+
ignore_email_verified: true,
32+
username_field: "",
33+
name_field: "",
34+
email_field: "",
35+
auth_url_params: {},
36+
ignore_user_info: true,
37+
organization_field: "",
38+
organization_mapping: {},
39+
organization_assign_default: true,
40+
group_auto_create: false,
41+
group_regex_filter: "^Coder-.*$",
42+
group_allow_list: [],
43+
groups_field: "groups",
44+
group_mapping: { group1: "developers", group2: "admin", group3: "auditors" },
45+
user_role_field: "roles",
46+
user_role_mapping: { role1: ["role1", "role2"] },
47+
user_roles_default: [],
48+
sign_in_text: "",
49+
icon_url: "",
50+
signups_disabled_text: "string",
51+
skip_issuer_checks: true,
52+
};
53+
2254
export const IdpSyncPage: FC = () => {
2355
const queryClient = useQueryClient();
2456
// const { custom_roles: isCustomRolesEnabled } = useFeatureVisibility();
@@ -77,7 +109,7 @@ export const IdpSyncPage: FC = () => {
77109
</Stack>
78110
</Stack>
79111

80-
<IdpSyncPageView roles={[]} />
112+
<IdpSyncPageView oidcConfig={mockOIDCConfig} />
81113
</>
82114
);
83115
};

‎site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.tsx

Lines changed: 89 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import TableCell from "@mui/material/TableCell";
88
import TableContainer from "@mui/material/TableContainer";
99
import TableHead from "@mui/material/TableHead";
1010
import TableRow from "@mui/material/TableRow";
11-
import type { Role } from "api/typesGenerated";
11+
import type { OIDCConfig } from "api/typesGenerated";
1212
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
1313
import { EmptyState } from "components/EmptyState/EmptyState";
1414
import { Paywall } from "components/Paywall/Paywall";
@@ -21,10 +21,10 @@ import type { FC } from "react";
2121
import { docs } from "utils/docs";
2222

2323
export type IdpSyncPageViewProps = {
24-
roles: Role[] | undefined;
24+
oidcConfig: OIDCConfig | undefined;
2525
};
2626

27-
export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({ roles }) => {
27+
export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({ oidcConfig }) => {
2828
return (
2929
<>
3030
<ChooseOne>
@@ -43,45 +43,93 @@ export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({ roles }) => {
4343
<legend css={styles.legend}>Groups</legend>
4444
<Stack direction={"row"} alignItems={"center"} spacing={3}>
4545
<h4>Sync Field</h4>
46-
<p css={styles.secondary}>groups</p>
46+
<p css={styles.secondary}>{oidcConfig?.groups_field}</p>
4747
<h4>Regex Filter</h4>
48-
<p css={styles.secondary}>^Coder-.*$</p>
48+
<p css={styles.secondary}>{oidcConfig?.group_regex_filter}</p>
4949
<h4>Auto Create</h4>
50-
<p css={styles.secondary}>false</p>
50+
<p css={styles.secondary}>
51+
{oidcConfig?.group_auto_create.toString()}
52+
</p>
5153
</Stack>
5254
</fieldset>
5355
<fieldset css={styles.box}>
5456
<legend css={styles.legend}>Roles</legend>
5557
<Stack direction={"row"} alignItems={"center"} spacing={3}>
5658
<h4>Sync Field</h4>
57-
<p css={styles.secondary}>roles</p>
59+
<p css={styles.secondary}>{oidcConfig?.user_role_field}</p>
5860
</Stack>
5961
</fieldset>
6062
</Stack>
61-
<Stack spacing={4}>
62-
<RoleTable roles={roles} />
63-
<RoleTable roles={roles} />
63+
<Stack spacing={6}>
64+
<IdpMappingTable
65+
type="Role"
66+
isEmpty={Boolean(
67+
(oidcConfig?.user_role_mapping &&
68+
Object.entries(oidcConfig?.user_role_mapping).length === 0) ||
69+
false,
70+
)}
71+
>
72+
<>
73+
{oidcConfig?.user_role_mapping &&
74+
Object.entries(oidcConfig.user_role_mapping).map(
75+
([idpRole, roles]) => (
76+
<RoleRow
77+
key={idpRole}
78+
idpRole={idpRole}
79+
coderRoles={roles}
80+
/>
81+
),
82+
)}
83+
</>
84+
</IdpMappingTable>
85+
<IdpMappingTable
86+
type="Group"
87+
isEmpty={Boolean(
88+
(oidcConfig?.user_role_mapping &&
89+
Object.entries(oidcConfig?.group_mapping).length === 0) ||
90+
false,
91+
)}
92+
>
93+
<>
94+
{oidcConfig?.user_role_mapping &&
95+
Object.entries(oidcConfig.group_mapping).map(
96+
([idpGroup, group]) => (
97+
<GroupRow
98+
key={idpGroup}
99+
idpGroup={idpGroup}
100+
coderGroup={group}
101+
/>
102+
),
103+
)}
104+
</>
105+
</IdpMappingTable>
64106
</Stack>
65107
</Cond>
66108
</ChooseOne>
67109
</>
68110
);
69111
};
70112

71-
interface RoleTableProps {
72-
roles: Role[] | undefined;
113+
interface IdpMappingTableProps {
114+
type: "Role" | "Group";
115+
isEmpty: boolean;
116+
children: React.ReactNode;
73117
}
74118

75-
const RoleTable: FC<RoleTableProps> = ({ roles }) => {
119+
const IdpMappingTable: FC<IdpMappingTableProps> = ({
120+
type,
121+
isEmpty,
122+
children,
123+
}) => {
76124
const isLoading = false;
77-
const isEmpty = Boolean(roles && roles.length === 0);
125+
78126
return (
79127
<TableContainer>
80128
<Table>
81129
<TableHead>
82130
<TableRow>
83-
<TableCell width="45%">Idp Role</TableCell>
84-
<TableCell width="55%">Coder Role</TableCell>
131+
<TableCell width="45%">Idp {type}</TableCell>
132+
<TableCell width="55%">Coder {type}</TableCell>
85133
</TableRow>
86134
</TableHead>
87135
<TableBody>
@@ -94,10 +142,7 @@ const RoleTable: FC<RoleTableProps> = ({ roles }) => {
94142
<TableRow>
95143
<TableCell colSpan={999}>
96144
<EmptyState
97-
message="No Role Mappings"
98-
description={
99-
"Configure role sync mappings to manage permissions outside of Coder."
100-
}
145+
message={`No ${type} Mappings`}
101146
isCompact
102147
cta={
103148
<Button
@@ -106,35 +151,46 @@ const RoleTable: FC<RoleTableProps> = ({ roles }) => {
106151
href={docs("/admin/auth#group-sync-enterprise")}
107152
target="_blank"
108153
>
109-
How to setup IdP role sync
154+
How to setup IdP {type} sync
110155
</Button>
111156
}
112157
/>
113158
</TableCell>
114159
</TableRow>
115160
</Cond>
116161

117-
<Cond>
118-
{roles?.map((role) => (
119-
<RoleRow key={role.name} role={role} />
120-
))}
121-
</Cond>
162+
<Cond>{children}</Cond>
122163
</ChooseOne>
123164
</TableBody>
124165
</Table>
125166
</TableContainer>
126167
);
127168
};
128169

170+
interface GroupRowProps {
171+
idpGroup: string;
172+
coderGroup: string;
173+
}
174+
175+
const GroupRow: FC<GroupRowProps> = ({ idpGroup, coderGroup }) => {
176+
return (
177+
<TableRow data-testid={`group-${idpGroup}`}>
178+
<TableCell>{idpGroup}</TableCell>
179+
<TableCell css={styles.secondary}>{coderGroup}</TableCell>
180+
</TableRow>
181+
);
182+
};
183+
129184
interface RoleRowProps {
130-
role: Role;
185+
idpRole: string;
186+
coderRoles: ReadonlyArray<string>;
131187
}
132188

133-
const RoleRow: FC<RoleRowProps> = ({ role }) => {
189+
const RoleRow: FC<RoleRowProps> = ({ idpRole, coderRoles }) => {
134190
return (
135-
<TableRow data-testid={`role-${role.name}`}>
136-
<TableCell>{role.display_name || role.name}</TableCell>
137-
<TableCell css={styles.secondary}>test</TableCell>
191+
<TableRow data-testid={`role-${idpRole}`}>
192+
<TableCell>{idpRole}</TableCell>
193+
<TableCell css={styles.secondary}>coderRoles Placeholder</TableCell>
138194
</TableRow>
139195
);
140196
};
@@ -161,10 +217,10 @@ const styles = {
161217
secondary: (theme) => ({
162218
color: theme.palette.text.secondary,
163219
}),
164-
fields: (theme) => ({
220+
fields: () => ({
165221
marginBottom: "60px",
166222
}),
167-
legend: (theme) => ({
223+
legend: () => ({
168224
padding: "0px 6px",
169225
fontWeight: 600,
170226
}),

0 commit comments

Comments
 (0)