chore: miscellaneous cleanup (#11785)

site/src/modules/dashboard/entitlements.ts

@@ -1,4 +1,4 @@
-import { Entitlements, Feature, FeatureName } from "api/typesGenerated";
+import type { Entitlements, Feature, FeatureName } from "api/typesGenerated";
 
 /**
  * @param hasLicense true if Enterprise edition

site/src/modules/dashboard/useFeatureVisibility.ts

@@ -1,6 +1,6 @@
 import { FeatureName } from "api/typesGenerated";
+import { selectFeatureVisibility } from "./entitlements";
 import { useDashboard } from "./useDashboard";
-import { selectFeatureVisibility } from "utils/entitlements";
 
 export const useFeatureVisibility = (): Record<FeatureName, boolean> => {
   const { entitlements } = useDashboard();

site/src/pages/CliAuthPage/CliAuthPage.tsx

@@ -1,28 +1,21 @@
-import { useEffect, useState, FC, PropsWithChildren } from "react";
+import { type FC } from "react";
 import { Helmet } from "react-helmet-async";
+import { useQuery } from "react-query";
 import { getApiKey } from "api/api";
 import { pageTitle } from "utils/page";
 import { CliAuthPageView } from "./CliAuthPageView";
 
-export const CliAuthenticationPage: FC<PropsWithChildren<unknown>> = () => {
-  const [apiKey, setApiKey] = useState<string | null>(null);
-
-  useEffect(() => {
-    getApiKey()
-      .then(({ key }) => {
-        setApiKey(key);
-      })
-      .catch((error) => {
-        console.error(error);
-      });
-  }, []);
+export const CliAuthenticationPage: FC = () => {
+  const { data } = useQuery({
+    queryFn: () => getApiKey(),
+  });
 
   return (
     <>
       <Helmet>
         <title>{pageTitle("CLI Auth")}</title>
       </Helmet>
-      <CliAuthPageView sessionToken={apiKey} />
+      <CliAuthPageView sessionToken={data?.key} />
     </>
   );
 };

site/src/pages/CliAuthPage/CliAuthPageView.tsx

@@ -1,5 +1,5 @@
 import Button from "@mui/material/Button";
-import { useTheme } from "@emotion/react";
+import { type Interpolation, type Theme } from "@emotion/react";
 import { type FC } from "react";
 import { Link as RouterLink } from "react-router-dom";
 import { CodeExample } from "components/CodeExample/CodeExample";
@@ -8,12 +8,10 @@ import { Welcome } from "components/Welcome/Welcome";
 import { FullScreenLoader } from "components/Loader/FullScreenLoader";
 
 export interface CliAuthPageViewProps {
-  sessionToken: string | null;
+  sessionToken?: string;
 }
 
 export const CliAuthPageView: FC<CliAuthPageViewProps> = ({ sessionToken }) => {
-  const theme = useTheme();
-
   if (!sessionToken) {
     return <FullScreenLoader />;
   }
@@ -22,15 +20,7 @@ export const CliAuthPageView: FC<CliAuthPageViewProps> = ({ sessionToken }) => {
     <SignInLayout>
       <Welcome>Session token</Welcome>
 
-      <p
-        css={{
-          fontSize: 16,
-          color: theme.palette.text.secondary,
-          marginBottom: 32,
-          textAlign: "center",
-          lineHeight: "160%",
-        }}
-      >
+      <p css={styles.instructions}>
         Copy the session token below and{" "}
         <strong css={{ whiteSpace: "nowrap" }}>
           paste it in your terminal
@@ -40,13 +30,7 @@ export const CliAuthPageView: FC<CliAuthPageViewProps> = ({ sessionToken }) => {
 
       <CodeExample code={sessionToken} secret />
 
-      <div
-        css={{
-          display: "flex",
-          justifyContent: "flex-end",
-          paddingTop: 8,
-        }}
-      >
+      <div css={styles.backButton}>
         <Button component={RouterLink} size="large" to="/workspaces" fullWidth>
           Go to workspaces
         </Button>
@@ -54,3 +38,19 @@ export const CliAuthPageView: FC<CliAuthPageViewProps> = ({ sessionToken }) => {
     </SignInLayout>
   );
 };
+
+const styles = {
+  instructions: (theme) => ({
+    fontSize: 16,
+    color: theme.palette.text.secondary,
+    marginBottom: 32,
+    textAlign: "center",
+    lineHeight: "160%",
+  }),
+
+  backButton: {
+    display: "flex",
+    justifyContent: "flex-end",
+    paddingTop: 8,
+  },
+} satisfies Record<string, Interpolation<Theme>>;