Skip to content

chore: add refresh token and error to user's external auth page #13380

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
May 28, 2024
Merged

chore: add refresh token and error to user's external auth page #13380

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
788a7b2
chore: add story for failed refresh error
Emyrk May 28, 2024
4b2558b
add terrible ui element to show the validate error
Emyrk May 28, 2024
fe72d04
chore: add refresh icon to tokens that can refresh
Emyrk May 28, 2024
855e8b8
Add styled error
Emyrk May 28, 2024
5793eec
Fixup styling of the badge
Emyrk May 28, 2024
b39bfa4
add padding instead of fixed sizes
Emyrk May 28, 2024
9639a94
remove import
Emyrk May 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,3 +60,33 @@ export const Unauthenticated: Story = {
},
},
};

export const Failed: Story = {
args: {
...meta.args,
auths: {
providers: [MockGithubExternalProvider],
links: [
{
...MockGithubAuthLink,
validate_error: "Failed to refresh token",
},
],
},
},
};

export const NoRefresh: Story = {
args: {
...meta.args,
auths: {
providers: [MockGithubExternalProvider],
links: [
{
...MockGithubAuthLink,
has_refresh_token: false,
},
],
},
},
};
84 changes: 71 additions & 13 deletions site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
import { useTheme } from "@emotion/react";
import AutorenewIcon from "@mui/icons-material/Autorenew";
import LoadingButton from "@mui/lab/LoadingButton";
import Badge from "@mui/material/Badge";
import Divider from "@mui/material/Divider";
import { styled } from "@mui/material/styles";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Tooltip from "@mui/material/Tooltip";
import visuallyHidden from "@mui/utils/visuallyHidden";
import { type FC, useState, useCallback, useEffect } from "react";
import { useQuery } from "react-query";
Expand Down Expand Up @@ -104,13 +109,33 @@ interface ExternalAuthRowProps {
onValidateExternalAuth: () => void;
}

const StyledBadge = styled(Badge)(({ theme }) => ({
"& .MuiBadge-badge": {
// Make a circular background for the icon. Background provides contrast, with a thin
// border to separate it from the avatar image.
backgroundColor: `${theme.palette.background.paper}`,
borderStyle: "solid",
borderColor: `${theme.palette.secondary.main}`,
borderWidth: "thin",

// Override the default minimum sizes, as they are larger than what we want.
minHeight: "0px",
minWidth: "0px",
// Override the default "height", which is usually set to some constant value.
height: "auto",
// Padding adds some room for the icon to live in.
padding: "0.1em",
},
}));

const ExternalAuthRow: FC<ExternalAuthRowProps> = ({
app,
unlinked,
link,
onUnlinkExternalAuth,
onValidateExternalAuth,
}) => {
const theme = useTheme();
const name = app.display_name || app.id || app.type;
const authURL = "/external-auth/" + app.id;

Expand All @@ -125,22 +150,55 @@ const ExternalAuthRow: FC<ExternalAuthRowProps> = ({
? externalAuth.authenticated
: link?.authenticated ?? false;

let avatar = app.display_icon ? (
<Avatar src={app.display_icon} variant="square" fitImage size="sm" />
) : (
<Avatar>{name}</Avatar>
);

// If the link is authenticated and has a refresh token, show that it will automatically
// attempt to authenticate when the token expires.
if (link?.has_refresh_token && authenticated) {
avatar = (
<StyledBadge
anchorOrigin={{
vertical: "bottom",
horizontal: "right",
}}
color="default"
overlap="circular"
badgeContent={
<Tooltip
title="Authentication token will automatically refresh when expired."
placement="right"
>
<AutorenewIcon
sx={{
fontSize: "1em",
}}
/>
</Tooltip>
}
>
{avatar}
</StyledBadge>
);
}

return (
<TableRow key={app.id}>
<TableCell>
<AvatarData
title={name}
avatar={
app.display_icon && (
<Avatar
src={app.display_icon}
variant="square"
fitImage
size="sm"
/>
)
}
/>
<AvatarData title={name} avatar={avatar} />
{link?.validate_error && (
<>
<span
css={{ paddingLeft: "1em", color: theme.palette.error.light }}
>
Error:{" "}
</span>
{link?.validate_error}
</>
)}
</TableCell>
<TableCell css={{ textAlign: "right" }}>
<LoadingButton
Expand Down
Loading