From 73a6899f2cb41c48fb1e6738f0da72f86f3d684f Mon Sep 17 00:00:00 2001
From: Kayla Washburn-Love <mckayla@hey.com>
Date: Thu, 25 Jan 2024 14:22:52 -0700
Subject: [PATCH] chore: miscellaneous cleanup (#11785)

---
 .../dashboard}/entitlements.test.ts           |  0
 .../dashboard}/entitlements.ts                |  2 +-
 .../modules/dashboard/useFeatureVisibility.ts |  2 +-
 site/src/pages/CliAuthPage/CliAuthPage.tsx    | 21 ++++------
 .../src/pages/CliAuthPage/CliAuthPageView.tsx | 40 +++++++++----------
 5 files changed, 29 insertions(+), 36 deletions(-)
 rename site/src/{utils => modules/dashboard}/entitlements.test.ts (100%)
 rename site/src/{utils => modules/dashboard}/entitlements.ts (92%)

diff --git a/site/src/utils/entitlements.test.ts b/site/src/modules/dashboard/entitlements.test.ts
similarity index 100%
rename from site/src/utils/entitlements.test.ts
rename to site/src/modules/dashboard/entitlements.test.ts
diff --git a/site/src/utils/entitlements.ts b/site/src/modules/dashboard/entitlements.ts
similarity index 92%
rename from site/src/utils/entitlements.ts
rename to site/src/modules/dashboard/entitlements.ts
index b2940ba93b..20cbb5d30b 100644
--- a/site/src/utils/entitlements.ts
+++ b/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
diff --git a/site/src/modules/dashboard/useFeatureVisibility.ts b/site/src/modules/dashboard/useFeatureVisibility.ts
index a43111639e..062685c573 100644
--- a/site/src/modules/dashboard/useFeatureVisibility.ts
+++ b/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();
diff --git a/site/src/pages/CliAuthPage/CliAuthPage.tsx b/site/src/pages/CliAuthPage/CliAuthPage.tsx
index 697f682c69..902651d5cd 100644
--- a/site/src/pages/CliAuthPage/CliAuthPage.tsx
+++ b/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} />
     </>
   );
 };
diff --git a/site/src/pages/CliAuthPage/CliAuthPageView.tsx b/site/src/pages/CliAuthPage/CliAuthPageView.tsx
index 5fe4881037..135a79580e 100644
--- a/site/src/pages/CliAuthPage/CliAuthPageView.tsx
+++ b/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>>;