feat: add success modal with token value to create token page (#7170)

* added token success modal

* added a test for new modal

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:"
+    }
   }
 }

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()
+  })
+})

site/src/pages/CreateTokenPage/CreateTokenPage.tsx

@@ -12,20 +12,26 @@ 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: "",
   lifetime: 30,
 }
 
-const CreateTokenPage: FC = () => {
+export 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