From 2fddf5313ffc6995f0976dbd620c842faad2c11e Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira@coder.com>
Date: Mon, 17 Apr 2023 15:28:22 +0000
Subject: [PATCH 1/2] added token success modal

---
 site/src/i18n/en/tokensPage.json              |  6 +++-
 .../pages/CreateTokenPage/CreateTokenPage.tsx | 34 ++++++++++++++++++-
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/site/src/i18n/en/tokensPage.json b/site/src/i18n/en/tokensPage.json
index d1bd9c4ca083a..adae2cf239c9b 100644
--- a/site/src/i18n/en/tokensPage.json
+++ b/site/src/i18n/en/tokensPage.json
@@ -46,6 +46,10 @@
       "submit": "Create token"
     },
     "createSuccess": "Token has been created",
-    "createError": "Failed to create token"
+    "createError": "Failed to create token",
+    "successModal": {
+      "title": "Creation successful",
+      "description": "Make sure you copy the below token before proceeding:"
+    }
   }
 }
diff --git a/site/src/pages/CreateTokenPage/CreateTokenPage.tsx b/site/src/pages/CreateTokenPage/CreateTokenPage.tsx
index 9487bad5b987b..7664d7808a753 100644
--- a/site/src/pages/CreateTokenPage/CreateTokenPage.tsx
+++ b/site/src/pages/CreateTokenPage/CreateTokenPage.tsx
@@ -12,6 +12,9 @@ import { createToken, getTokenConfig } from "api/api"
 import { CreateTokenForm } from "./CreateTokenForm"
 import { NANO_HOUR, CreateTokenData } from "./utils"
 import { AlertBanner } from "components/AlertBanner/AlertBanner"
+import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"
+import { CodeExample } from "components/CodeExample/CodeExample"
+import { makeStyles } from "@material-ui/core/styles"
 
 const initialValues: CreateTokenData = {
   name: "",
@@ -20,12 +23,15 @@ const initialValues: CreateTokenData = {
 
 const CreateTokenPage: FC = () => {
   const { t } = useTranslation("tokensPage")
+  const styles = useStyles()
   const navigate = useNavigate()
 
   const {
     mutate: saveToken,
     isLoading: isCreating,
     isError: creationFailed,
+    isSuccess: creationSuccessful,
+    data: newToken,
   } = useMutation(createToken)
   const {
     data: tokenConfig,
@@ -60,12 +66,18 @@ const CreateTokenPage: FC = () => {
         },
         {
           onError: onCreateError,
-          onSuccess: onCreateSuccess,
         },
       )
     },
   })
 
+  const tokenDescription = (
+    <>
+      <p>{t("createToken.successModal.description")}</p>
+      <CodeExample code={newToken?.key ?? ""} className={styles.codeExample} />
+    </>
+  )
+
   if (fetchingTokenConfig) {
     return <Loader />
   }
@@ -90,9 +102,29 @@ const CreateTokenPage: FC = () => {
           isCreating={isCreating}
           creationFailed={creationFailed}
         />
+
+        <ConfirmDialog
+          type="info"
+          hideCancel
+          title={t("createToken.successModal.title")}
+          description={tokenDescription}
+          open={creationSuccessful && Boolean(newToken.key)}
+          confirmLoading={isCreating}
+          onConfirm={onCreateSuccess}
+          onClose={onCreateSuccess}
+        />
       </FullPageHorizontalForm>
     </>
   )
 }
 
+const useStyles = makeStyles((theme) => ({
+  codeExample: {
+    minHeight: "auto",
+    userSelect: "all",
+    width: "100%",
+    marginTop: theme.spacing(3),
+  },
+}))
+
 export default CreateTokenPage

From 685f06a020868d65f67fa62168cdbf999c1517ad Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira@coder.com>
Date: Mon, 17 Apr 2023 17:32:16 +0000
Subject: [PATCH 2/2] added a test for new modal

---
 .../CreateTokenPage/CreateTokenPage.test.tsx  | 32 +++++++++++++++++++
 .../pages/CreateTokenPage/CreateTokenPage.tsx |  2 +-
 2 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 site/src/pages/CreateTokenPage/CreateTokenPage.test.tsx

diff --git a/site/src/pages/CreateTokenPage/CreateTokenPage.test.tsx b/site/src/pages/CreateTokenPage/CreateTokenPage.test.tsx
new file mode 100644
index 0000000000000..34cc8306d2fc1
--- /dev/null
+++ b/site/src/pages/CreateTokenPage/CreateTokenPage.test.tsx
@@ -0,0 +1,32 @@
+import {
+  renderWithAuth,
+  waitForLoaderToBeRemoved,
+} from "testHelpers/renderHelpers"
+import { CreateTokenPage } from "pages/CreateTokenPage/CreateTokenPage"
+import * as API from "api/api"
+import { screen, within } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+
+describe("TokenPage", () => {
+  it("shows the success modal", async () => {
+    jest.spyOn(API, "createToken").mockResolvedValueOnce({
+      key: "abcd",
+    })
+
+    // When
+    const { container } = renderWithAuth(<CreateTokenPage />, {
+      route: "/settings/tokens/new",
+      path: "/settings/tokens/new",
+    })
+    await waitForLoaderToBeRemoved()
+
+    const form = container.querySelector("form") as HTMLFormElement
+    await userEvent.type(screen.getByLabelText(/Name/), "my-token")
+    await userEvent.click(
+      within(form).getByRole("button", { name: /create token/i }),
+    )
+
+    // Then
+    expect(screen.getByText("abcd")).toBeInTheDocument()
+  })
+})
diff --git a/site/src/pages/CreateTokenPage/CreateTokenPage.tsx b/site/src/pages/CreateTokenPage/CreateTokenPage.tsx
index 7664d7808a753..1e1e5c8a12133 100644
--- a/site/src/pages/CreateTokenPage/CreateTokenPage.tsx
+++ b/site/src/pages/CreateTokenPage/CreateTokenPage.tsx
@@ -21,7 +21,7 @@ const initialValues: CreateTokenData = {
   lifetime: 30,
 }
 
-const CreateTokenPage: FC = () => {
+export const CreateTokenPage: FC = () => {
   const { t } = useTranslation("tokensPage")
   const styles = useStyles()
   const navigate = useNavigate()