From ef9a0f28d42c2fd18d2a7fb5363e27324e5dc565 Mon Sep 17 00:00:00 2001
From: Hitesh Aringa <hitesh.aringa@harness.io>
Date: Tue, 25 Jul 2023 21:04:34 +0000
Subject: [PATCH] feat: [CODE-615]: Show Token after Creation (#233)

---
 .../UserManagementFlows/AddUserModal.tsx      |  1 +
 .../UserManagementFlows.module.scss           | 14 +--
 .../UserManagementFlows.module.scss.d.ts      |  3 +-
 web/src/framework/strings/stringTypes.ts      |  1 +
 web/src/i18n/strings.en.yaml                  |  3 +
 .../pages/UserProfile/NewToken/NewToken.tsx   | 90 +++++++++++++++----
 6 files changed, 86 insertions(+), 26 deletions(-)

diff --git a/web/src/components/UserManagementFlows/AddUserModal.tsx b/web/src/components/UserManagementFlows/AddUserModal.tsx
index c14802e5c..4ebd3c33c 100644
--- a/web/src/components/UserManagementFlows/AddUserModal.tsx
+++ b/web/src/components/UserManagementFlows/AddUserModal.tsx
@@ -216,6 +216,7 @@ export const FormInputWithCopyButton: React.FC<
   return (
     <FormInput.Text
       {...props}
+      className={css.inputWrapper}
       inputGroup={{
         ...props.inputGroup,
         rightElement: (
diff --git a/web/src/components/UserManagementFlows/UserManagementFlows.module.scss b/web/src/components/UserManagementFlows/UserManagementFlows.module.scss
index c5b0a2d3a..d870622ed 100644
--- a/web/src/components/UserManagementFlows/UserManagementFlows.module.scss
+++ b/web/src/components/UserManagementFlows/UserManagementFlows.module.scss
@@ -1,12 +1,6 @@
 .dialogCtn {
   overflow: unset !important;
 
-  button#copyBtn {
-    border-radius: 0 !important;
-    border-left: 1px solid var(--grey-200) !important;
-    margin-left: var(--spacing-small) !important;
-  }
-
   :global {
     .bp3-form-group,
     .TextInput--main {
@@ -45,3 +39,11 @@
     }
   }
 }
+
+.inputWrapper {
+  button#copyBtn {
+    border-radius: 0 !important;
+    border-left: 1px solid var(--grey-200) !important;
+    margin-left: var(--spacing-small) !important;
+  }
+}
diff --git a/web/src/components/UserManagementFlows/UserManagementFlows.module.scss.d.ts b/web/src/components/UserManagementFlows/UserManagementFlows.module.scss.d.ts
index 79d5ec7d8..65a5f8529 100644
--- a/web/src/components/UserManagementFlows/UserManagementFlows.module.scss.d.ts
+++ b/web/src/components/UserManagementFlows/UserManagementFlows.module.scss.d.ts
@@ -2,10 +2,11 @@
 // this is an auto-generated file
 declare const styles: {
   readonly dialogCtn: string
-  readonly copyBtn: string
   readonly passwordCtn: string
   readonly layout: string
   readonly text: string
   readonly formikForm: string
+  readonly inputWrapper: string
+  readonly copyBtn: string
 }
 export default styles
diff --git a/web/src/framework/strings/stringTypes.ts b/web/src/framework/strings/stringTypes.ts
index f5a016394..5f0918319 100644
--- a/web/src/framework/strings/stringTypes.ts
+++ b/web/src/framework/strings/stringTypes.ts
@@ -218,6 +218,7 @@ export interface StringsMap {
   'newToken.generateToken': string
   'newToken.namePlaceholder': string
   'newToken.text': string
+  'newToken.tokenHelptext': string
   'newUserModal.displayNamePlaceholder': string
   'newUserModal.emailPlaceholder': string
   'newUserModal.passwordHelptext': string
diff --git a/web/src/i18n/strings.en.yaml b/web/src/i18n/strings.en.yaml
index fe020ae47..9563f9b1f 100644
--- a/web/src/i18n/strings.en.yaml
+++ b/web/src/i18n/strings.en.yaml
@@ -518,6 +518,9 @@ newToken:
   namePlaceholder: Enter the name
   expireOn: Token will expire on {{date}}
   generateToken: Generate Token
+  tokenHelptext:
+    Your token has been generated. Please make sure to copy and store your token somewhere safe, you wont be
+    able to see it again.
 deleteToken: Delete token
 deleteTokenMsg: Token deleted successfully
 userProfile:
diff --git a/web/src/pages/UserProfile/NewToken/NewToken.tsx b/web/src/pages/UserProfile/NewToken/NewToken.tsx
index db395107f..c7b9720b6 100644
--- a/web/src/pages/UserProfile/NewToken/NewToken.tsx
+++ b/web/src/pages/UserProfile/NewToken/NewToken.tsx
@@ -1,9 +1,11 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useState } from 'react'
 import {
   Button,
   ButtonVariation,
   Color,
+  Container,
   Dialog,
+  FlexExpander,
   FontVariation,
   FormikForm,
   FormInput,
@@ -15,15 +17,23 @@ import { Formik } from 'formik'
 import { useMutate } from 'restful-react'
 import moment from 'moment'
 import * as Yup from 'yup'
-
-import { REGEX_VALID_REPO_NAME } from 'utils/Utils'
+import { Else, Match, Render, Truthy } from 'react-jsx-match'
 
 import { useStrings } from 'framework/strings'
+import { REGEX_VALID_REPO_NAME } from 'utils/Utils'
+import { CodeIcon } from 'utils/GitUtils'
+import { CopyButton } from 'components/CopyButton/CopyButton'
+import { FormInputWithCopyButton } from 'components/UserManagementFlows/AddUserModal'
+
+import css from 'components/CloneCredentialDialog/CloneCredentialDialog.module.scss'
 
 const useNewToken = ({ onClose }: { onClose: () => void }) => {
   const { getString } = useStrings()
   const { mutate } = useMutate({ path: '/api/v1/user/tokens', verb: 'POST' })
 
+  const [generatedToken, setGeneratedToken] = useState<string>()
+  const isTokenGenerated = Boolean(generatedToken)
+
   const lifeTimeOptions = useMemo(
     () => [
       { label: getString('nDays', { number: 7 }), value: 604800000000000 },
@@ -34,9 +44,15 @@ const useNewToken = ({ onClose }: { onClose: () => void }) => {
     [getString]
   )
 
+  const onModalClose = () => {
+    hideModal()
+    onClose()
+    setGeneratedToken()
+  }
+
   const [openModal, hideModal] = useModalHook(() => {
     return (
-      <Dialog isOpen enforceFocus={false} onClose={hideModal} title={getString('createNewToken')}>
+      <Dialog isOpen enforceFocus={false} onClose={onModalClose} title={getString('createNewToken')}>
         <Formik
           initialValues={{
             uid: '',
@@ -49,9 +65,8 @@ const useNewToken = ({ onClose }: { onClose: () => void }) => {
             lifeTime: Yup.number().required(getString('validation.expirationDateRequired'))
           })}
           onSubmit={async values => {
-            await mutate(values)
-            hideModal()
-            onClose()
+            const res = await mutate(values)
+            setGeneratedToken(res?.access_token)
           }}>
           {formikProps => {
             const expiresAtString = moment(Date.now() + formikProps.values.lifeTime / 1000000).format(
@@ -60,32 +75,69 @@ const useNewToken = ({ onClose }: { onClose: () => void }) => {
 
             return (
               <FormikForm>
-                <FormInput.Text
+                <FormInputWithCopyButton
                   name="uid"
                   label={getString('name')}
                   placeholder={getString('newToken.namePlaceholder')}
+                  disabled={isTokenGenerated}
+                />
+                <FormInput.Select
+                  name="lifeTime"
+                  label={getString('expiration')}
+                  items={lifeTimeOptions}
+                  usePortal
+                  disabled={isTokenGenerated}
                 />
-                <FormInput.Select name="lifeTime" label={getString('expiration')} items={lifeTimeOptions} usePortal />
                 {formikProps.values.lifeTime ? (
-                  <Text font={{ variation: FontVariation.SMALL_SEMI }} color={Color.GREY_400}>
+                  <Text
+                    font={{ variation: FontVariation.SMALL_SEMI }}
+                    color={Color.GREY_400}
+                    margin={{ bottom: 'medium' }}>
                     {getString('newToken.expireOn', { date: expiresAtString })}
                   </Text>
                 ) : null}
-                <Layout.Horizontal margin={{ top: 'xxxlarge' }} spacing="medium">
-                  <Button
-                    text={getString('newToken.generateToken')}
-                    type="submit"
-                    variation={ButtonVariation.PRIMARY}
-                  />
-                  <Button text={getString('cancel')} onClick={hideModal} variation={ButtonVariation.TERTIARY} />
-                </Layout.Horizontal>
+                <Render when={isTokenGenerated}>
+                  <Text padding={{ bottom: 'small' }} font={{ variation: FontVariation.FORM_LABEL, size: 'small' }}>
+                    {getString('token')}
+                  </Text>
+                  <Container padding={{ bottom: 'medium' }}>
+                    <Layout.Horizontal className={css.layout}>
+                      <Text className={css.url}>{generatedToken}</Text>
+                      <FlexExpander />
+                      <CopyButton
+                        content={generatedToken || ''}
+                        id={css.cloneCopyButton}
+                        icon={CodeIcon.Copy}
+                        iconProps={{ size: 14 }}
+                      />
+                    </Layout.Horizontal>
+                  </Container>
+                  <Text padding={{ bottom: 'medium' }} font={{ variation: FontVariation.BODY2_SEMI, size: 'small' }}>
+                    {getString('newToken.tokenHelptext')}
+                  </Text>
+                </Render>
+                <Match expr={isTokenGenerated}>
+                  <Truthy>
+                    <Button text={getString('close')} variation={ButtonVariation.TERTIARY} onClick={onModalClose} />
+                  </Truthy>
+                  <Else>
+                    <Layout.Horizontal margin={{ top: 'xxxlarge' }} spacing="medium">
+                      <Button
+                        text={getString('newToken.generateToken')}
+                        type="submit"
+                        variation={ButtonVariation.PRIMARY}
+                      />
+                      <Button text={getString('cancel')} onClick={hideModal} variation={ButtonVariation.TERTIARY} />
+                    </Layout.Horizontal>
+                  </Else>
+                </Match>
               </FormikForm>
             )
           }}
         </Formik>
       </Dialog>
     )
-  }, [])
+  }, [generatedToken])
 
   return {
     openModal,