Feb 29, 2024 · Feb 29, 2024 · Feb 29, 2024 · Feb 29, 2024 · Feb 29, 2024 · Feb 29, 2024
diff --git a/site/src/pages/ExternalAuthPage/ExternalAuthPage.tsx b/site/src/pages/ExternalAuthPage/ExternalAuthPage.tsx
  if (isAxiosError(exchangeExternalAuthDeviceQuery.failureReason)) {
    deviceExchangeError =
      exchangeExternalAuthDeviceQuery.failureReason.response?.data;
  } else if (isAxiosError(externalAuthDeviceQuery.failureReason)) {
    deviceExchangeError = externalAuthDeviceQuery.failureReason.response?.data;
  }

  if (
diff --git a/site/src/pages/ExternalAuthPage/ExternalAuthPageView.stories.tsx b/site/src/pages/ExternalAuthPage/ExternalAuthPageView.stories.tsx
  },
 };

 export const Device429Error = Template.bind({});
 Device429Error.args = {
  externalAuth: {
    display_name: "GitHub",
    authenticated: false,
    device: true,
    installations: [],
    app_install_url: "",
    app_installable: false,
  },
  // This is intentionally undefined.
  // If we get a 429 on the first /device call, then this
  // is undefined with a 429 error.
  externalAuthDevice: undefined,
  deviceExchangeError: {
    message: "Failed to authorize device.",
    detail:
      "rate limit hit, unable to authorize device. please try again later",
  },
 };

 export const DeviceUnauthenticatedError = Template.bind({});
 DeviceUnauthenticatedError.args = {
  externalAuth: {
diff --git a/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx
 import { type Interpolation, type Theme } from "@emotion/react";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import AlertTitle from "@mui/material/AlertTitle";
 import CircularProgress from "@mui/material/CircularProgress";
 import Link from "@mui/material/Link";
 import Tooltip from "@mui/material/Tooltip";
 import type { ApiErrorResponse } from "api/errors";
 import type { ExternalAuth, ExternalAuthDevice } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
 import { Alert, AlertDetail } from "components/Alert/Alert";
 import { Avatar } from "components/Avatar/Avatar";
 import { CopyButton } from "components/CopyButton/CopyButton";
 import { SignInLayout } from "components/SignInLayout/SignInLayout";
      default:
        status = (
          <Alert severity="error">
            An unknown error occurred. Please try again:{" "}
            {deviceExchangeError.message}
            <AlertTitle>{deviceExchangeError.message}</AlertTitle>
            {deviceExchangeError.detail && (
              <AlertDetail>{deviceExchangeError.detail}</AlertDetail>
            )}
          </Alert>
        );
        break;
    }
  }

  // If the error comes from the `externalAuthDevice` query,
  // we cannot even display the user_code.
  if (deviceExchangeError && !externalAuthDevice) {
    return <div>{status}</div>;
  }

  if (!externalAuthDevice) {
    return <CircularProgress />;
  }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -53,6 +53,8 @@ const ExternalAuthPage: FC = () => {
		if (isAxiosError(exchangeExternalAuthDeviceQuery.failureReason)) {
		deviceExchangeError =
		exchangeExternalAuthDeviceQuery.failureReason.response?.data;
		} else if (isAxiosError(externalAuthDeviceQuery.failureReason)) {
		deviceExchangeError = externalAuthDeviceQuery.failureReason.response?.data;
		}

		if (
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -49,6 +49,27 @@ DeviceUnauthenticated.args = {
		},
		};

		export const Device429Error = Template.bind({});
		Device429Error.args = {
		externalAuth: {
		display_name: "GitHub",
		authenticated: false,
		device: true,
		installations: [],
		app_install_url: "",
		app_installable: false,
		},
		// This is intentionally undefined.
		// If we get a 429 on the first /device call, then this
		// is undefined with a 429 error.
		externalAuthDevice: undefined,
		deviceExchangeError: {
		message: "Failed to authorize device.",
		detail:
		"rate limit hit, unable to authorize device. please try again later",
		},
		};

		export const DeviceUnauthenticatedError = Template.bind({});
		DeviceUnauthenticatedError.args = {
		externalAuth: {
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,12 +1,13 @@
		import { type Interpolation, type Theme } from "@emotion/react";
		import OpenInNewIcon from "@mui/icons-material/OpenInNew";
		import RefreshIcon from "@mui/icons-material/Refresh";
		import AlertTitle from "@mui/material/AlertTitle";
		import CircularProgress from "@mui/material/CircularProgress";
		import Link from "@mui/material/Link";
		import Tooltip from "@mui/material/Tooltip";
		import type { ApiErrorResponse } from "api/errors";
		import type { ExternalAuth, ExternalAuthDevice } from "api/typesGenerated";
		import { Alert } from "components/Alert/Alert";
		import { Alert, AlertDetail } from "components/Alert/Alert";
		import { Avatar } from "components/Avatar/Avatar";
		import { CopyButton } from "components/CopyButton/CopyButton";
		import { SignInLayout } from "components/SignInLayout/SignInLayout";
Expand DownExpand Up		@@ -173,14 +174,22 @@ const GitDeviceAuth: FC<GitDeviceAuthProps> = ({
		default:
		status = (
		<Alert severity="error">
		An unknown error occurred. Please try again:{" "}
		{deviceExchangeError.message}
		<AlertTitle>{deviceExchangeError.message}</AlertTitle>
		{deviceExchangeError.detail && (
		<AlertDetail>{deviceExchangeError.detail}</AlertDetail>
		)}
		</Alert>
		);
		break;
		}
		}

		// If the error comes from the `externalAuthDevice` query,
		// we cannot even display the user_code.
		if (deviceExchangeError && !externalAuthDevice) {
		return <div>{status}</div>;
		}

		if (!externalAuthDevice) {
		return <CircularProgress />;
		}
Expand Down