Skip to content

Commit 0cfc7ee

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Improve auth methods display
1 parent 55dd4b0 commit 0cfc7ee

File tree

4 files changed

+76
-14
lines changed

4 files changed

+76
-14
lines changed

‎site/src/components/UsersTable/UsersTable.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export interface UsersTableProps {
3838
isNonInitialPage: boolean
3939
actorID: string
4040
oidcRoleSyncEnabled: boolean
41+
authMethods?: TypesGen.AuthMethods
4142
}
4243

4344
export const UsersTable: FC<React.PropsWithChildren<UsersTableProps>> = ({
@@ -57,6 +58,7 @@ export const UsersTable: FC<React.PropsWithChildren<UsersTableProps>> = ({
5758
isNonInitialPage,
5859
actorID,
5960
oidcRoleSyncEnabled,
61+
authMethods,
6062
}) => {
6163
return (
6264
<TableContainer>
@@ -94,6 +96,7 @@ export const UsersTable: FC<React.PropsWithChildren<UsersTableProps>> = ({
9496
isNonInitialPage={isNonInitialPage}
9597
actorID={actorID}
9698
oidcRoleSyncEnabled={oidcRoleSyncEnabled}
99+
authMethods={authMethods}
97100
/>
98101
</TableBody>
99102
</Table>

‎site/src/components/UsersTable/UsersTableBody.tsx

Lines changed: 54 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,11 @@ import { EditRolesButton } from "components/EditRolesButton/EditRolesButton"
1616
import { Stack } from "components/Stack/Stack"
1717
import { EnterpriseBadge } from "components/DeploySettingsLayout/Badges"
1818
import dayjs from "dayjs"
19-
import { Theme } from "@mui/material/styles"
19+
import { SxProps, Theme } from "@mui/material/styles"
20+
import HideSourceOutlined from "@mui/icons-material/HideSourceOutlined"
21+
import KeyOutlined from "@mui/icons-material/KeyOutlined"
22+
import GitHub from "@mui/icons-material/GitHub"
23+
import PasswordOutlined from "@mui/icons-material/PasswordOutlined"
2024

2125
const isOwnerRole = (role: TypesGen.Role): boolean => {
2226
return role.name === "owner"
@@ -32,6 +36,7 @@ const sortRoles = (roles: TypesGen.Role[]) => {
3236

3337
interface UsersTableBodyProps {
3438
users?: TypesGen.User[]
39+
authMethods?: TypesGen.AuthMethods
3540
roles?: TypesGen.AssignableRoles[]
3641
isUpdatingUserRoles?: boolean
3742
canEditUsers?: boolean
@@ -59,6 +64,7 @@ export const UsersTableBody: FC<
5964
React.PropsWithChildren<UsersTableBodyProps>
6065
> = ({
6166
users,
67+
authMethods,
6268
roles,
6369
onSuspendUser,
6470
onDeleteUser,
@@ -157,7 +163,10 @@ export const UsersTableBody: FC<
157163
</Stack>
158164
</TableCell>
159165
<TableCell>
160-
<pre>{user.login_type}</pre>
166+
<LoginType
167+
authMethods={authMethods!}
168+
value={user.login_type}
169+
/>
161170
</TableCell>
162171
<TableCell
163172
className={combineClasses([
@@ -236,10 +245,50 @@ export const UsersTableBody: FC<
236245
)
237246
}
238247

239-
export const LastSeen = ({
248+
const LoginType = ({
249+
authMethods,
240250
value,
241-
...boxProps
242-
}: { value: string } & BoxProps) => {
251+
}: {
252+
authMethods: TypesGen.AuthMethods
253+
value: TypesGen.LoginType
254+
}) => {
255+
let displayName = value as string
256+
let icon = <></>
257+
const iconStyles: SxProps = { width: 14, height: 14 }
258+
259+
if (value === "password") {
260+
displayName = "Password"
261+
icon = <PasswordOutlined sx={iconStyles} />
262+
} else if (value === "none") {
263+
displayName = "None"
264+
icon = <HideSourceOutlined sx={iconStyles} />
265+
} else if (value === "github") {
266+
displayName = "GitHub"
267+
icon = <GitHub sx={iconStyles} />
268+
} else if (value === "token") {
269+
displayName = "Token"
270+
icon = <KeyOutlined />
271+
} else if (value === "oidc") {
272+
displayName = authMethods.oidc.signInText
273+
icon = (
274+
<Box
275+
component="img"
276+
alt="Open ID Connect icon"
277+
src={authMethods.oidc.iconUrl}
278+
sx={iconStyles}
279+
/>
280+
)
281+
}
282+
283+
return (
284+
<Box sx={{ display: "flex", alignItems: "center", gap: 1, fontSize: 14 }}>
285+
{icon}
286+
{displayName}
287+
</Box>
288+
)
289+
}
290+
291+
const LastSeen = ({ value, ...boxProps }: { value: string } & BoxProps) => {
243292
const theme: Theme = useTheme()
244293
const t = dayjs(value)
245294
const now = dayjs()

‎site/src/pages/UsersPage/UsersPage.tsx

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ import { useStatusFilterMenu } from "./UsersFilter"
2020
import { useFilter } from "components/Filter/filter"
2121
import { useDashboard } from "components/Dashboard/DashboardProvider"
2222
import { deploymentConfigMachine } from "xServices/deploymentConfig/deploymentConfigMachine"
23+
import { useQuery } from "@tanstack/react-query"
24+
import { getAuthMethods } from "api/api"
2325

2426
export const Language = {
2527
suspendDialogTitle: "Suspend user",
@@ -78,16 +80,7 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
7880
const oidcRoleSyncEnabled =
7981
viewDeploymentValues &&
8082
deploymentValues?.config.oidc?.user_role_field !== ""
81-
82-
// Is loading if
83-
// - users are loading or
84-
// - the user can edit the users but the roles are loading
85-
const isLoading =
86-
usersState.matches("gettingUsers") ||
87-
(canEditUsers && rolesState.matches("gettingRoles"))
88-
8983
const me = useMe()
90-
9184
const useFilterResult = useFilter({
9285
searchParamsResult,
9386
onUpdate: () => {
@@ -105,6 +98,19 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
10598
status: option?.value,
10699
}),
107100
})
101+
const authMethods = useQuery({
102+
queryKey: ["authMethods"],
103+
queryFn: () => {
104+
return getAuthMethods()
105+
},
106+
})
107+
// Is loading if
108+
// - users are loading or
109+
// - the user can edit the users but the roles are loading
110+
const isLoading =
111+
usersState.matches("gettingUsers") ||
112+
(canEditUsers && rolesState.matches("gettingRoles")) ||
113+
authMethods.isLoading
108114

109115
return (
110116
<>
@@ -115,6 +121,7 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
115121
oidcRoleSyncEnabled={oidcRoleSyncEnabled}
116122
roles={roles}
117123
users={users}
124+
authMethods={authMethods.data}
118125
count={count}
119126
onListWorkspaces={(user) => {
120127
navigate(

‎site/src/pages/UsersPage/UsersPageView.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export interface UsersPageViewProps {
2222
oidcRoleSyncEnabled: boolean
2323
canViewActivity?: boolean
2424
isLoading?: boolean
25+
authMethods?: TypesGen.AuthMethods
2526
onSuspendUser: (user: TypesGen.User) => void
2627
onDeleteUser: (user: TypesGen.User) => void
2728
onListWorkspaces: (user: TypesGen.User) => void
@@ -58,6 +59,7 @@ export const UsersPageView: FC<React.PropsWithChildren<UsersPageViewProps>> = ({
5859
paginationRef,
5960
isNonInitialPage,
6061
actorID,
62+
authMethods,
6163
}) => {
6264
return (
6365
<>
@@ -89,6 +91,7 @@ export const UsersPageView: FC<React.PropsWithChildren<UsersPageViewProps>> = ({
8991
isLoading={isLoading}
9092
isNonInitialPage={isNonInitialPage}
9193
actorID={actorID}
94+
authMethods={authMethods}
9295
/>
9396

9497
<PaginationWidget numRecords={count} paginationRef={paginationRef} />

0 commit comments

Comments
 (0)