chore: add refresh icon to tokens that can refresh

Emyrk · Emyrk · commit fe72d045c3a8 · 2024-05-28T09:23:08.000-05:00
diff --git a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.stories.tsx b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.stories.tsx
@@ -2,7 +2,6 @@ import type { Meta, StoryObj } from "@storybook/react";
 import {
   MockGithubAuthLink,
   MockGithubExternalProvider,
-  MockGithubValidateErrorAuthLink,
 } from "testHelpers/entities";
 import { ExternalAuthPageView } from "./ExternalAuthPageView";
 
@@ -69,7 +68,23 @@ export const Failed: Story = {
       providers: [MockGithubExternalProvider],
       links: [
         {
-          ...MockGithubValidateErrorAuthLink,
+          ...MockGithubAuthLink,
+          validate_error: "Failed to refresh token",
+        },
+      ],
+    },
+  },
+};
+
+export const NoRefresh: Story = {
+  args: {
+    ...meta.args,
+    auths: {
+      providers: [MockGithubExternalProvider],
+      links: [
+        {
+          ...MockGithubAuthLink,
+          has_refresh_token: false,
         },
       ],
     },
diff --git a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx
@@ -1,11 +1,14 @@
+import CachedIcon from "@mui/icons-material/Cached";
 import LoadingButton from "@mui/lab/LoadingButton";
+import Badge from "@mui/material/Badge";
 import Divider from "@mui/material/Divider";
 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";
@@ -125,22 +128,39 @@ 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 = (
+      <Badge
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "right",
+        }}
+        badgeContent={
+          <Tooltip
+            title="Authentication token will automatically refresh when expired."
+            placement="right"
+          >
+            <CachedIcon fontSize="small" />
+          </Tooltip>
+        }
+      >
+        {avatar}
+      </Badge>
+    );
+  }
+
   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} />
         {/* TODO: Style this! */}
         {link?.validate_error}
       </TableCell>
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -3455,16 +3455,6 @@ export const MockGithubAuthLink: TypesGen.ExternalAuthLink = {
   validate_error: "",
 };
 
-export const MockGithubValidateErrorAuthLink: TypesGen.ExternalAuthLink = {
-  provider_id: "github",
-  created_at: "",
-  updated_at: "",
-  has_refresh_token: true,
-  expires: "",
-  authenticated: false,
-  validate_error: "Failed to refresh token.",
-};
-
 export const MockOAuth2ProviderApps: TypesGen.OAuth2ProviderApp[] = [
   {
     id: "1",
