chore: API token UAT modifications

shivani170 · shivani170 · commit 171eb5d1a59f · 2025-07-09T14:05:41.000+05:30
diff --git a/src/Pages/GlobalConfigurations/Authorization/APITokens/EditAPIToken.tsx b/src/Pages/GlobalConfigurations/Authorization/APITokens/EditAPIToken.tsx
@@ -20,10 +20,11 @@ import { useHistory, useParams, useRouteMatch } from 'react-router-dom'
 import moment from 'moment'
 
 import {
+    Button,
     ButtonStyleType,
     ButtonVariantType,
-    ButtonWithLoader,
     CustomInput,
+    Icon,
     InfoBlock,
     noop,
     Progressing,
@@ -34,7 +35,6 @@ import {
     useMainContext,
 } from '@devtron-labs/devtron-fe-common-lib'
 
-import { ReactComponent as Delete } from '../../../../assets/icons/ic-delete-interactive.svg'
 import { importComponentFromFELibrary } from '../../../../components/common'
 import { MomentDateFormat } from '../../../../config'
 import { API_COMPONENTS } from '../../../../config/constantMessaging'
@@ -167,21 +167,13 @@ const EditAPIToken = ({
     }
 
     const getExpirationText = () => {
-        if (isTokenExpired(editData.expireAtInMs)) {
-            return (
-                <span className="cr-5 fw-6">
-                    This token expired on&nbsp;
-                    {moment(editData.expireAtInMs).format(MomentDateFormat)}.
-                </span>
-            )
-        }
         if (editData.expireAtInMs === 0) {
-            return <span className="fw-6">This token has no expiration date.</span>
+            return <span className="fw-6 cn-9">This token has no expiration date.</span>
         }
 
         return (
-            <span className="fw-6">
-                This token expires on&nbsp;
+            <span className="fw-6 cn-9">
+                This token {isTokenExpired(editData.expireAtInMs) ? 'expired' : 'expires'} on&nbsp;
                 {moment(editData.expireAtInMs).format(MomentDateFormat)}.
             </span>
         )
@@ -198,6 +190,7 @@ const EditAPIToken = ({
                 variant: ButtonVariantType.text,
                 style: ButtonStyleType.negative,
             }}
+            variant={isTokenExpired(editData.expireAtInMs) ? 'error' : 'information'}
         />
     )
 
@@ -219,16 +212,16 @@ const EditAPIToken = ({
                         {renderQuestionwithTippy()}
                     </div>
                     <div className="flex dc__align-end dc__content-end">
-                        <ButtonWithLoader
-                            rootClassName="flex cta override-button delete scr-5 h-32"
+                        <Button
                             onClick={handleDeleteButton}
                             disabled={loader}
                             isLoading={false}
                             dataTestId="delete-token"
-                        >
-                            <Delete className="icon-dim-16 mr-8" />
-                            <span>Delete</span>
-                        </ButtonWithLoader>
+                            text="Delete"
+                            variant={ButtonVariantType.secondary}
+                            style={ButtonStyleType.negative}
+                            startIcon={<Icon name="ic-delete" color={null} />}
+                        />
                     </div>
                 </div>
                 <div className="flexbox-col dc__gap-16">
diff --git a/src/Pages/GlobalConfigurations/Authorization/APITokens/GenerateModal.tsx b/src/Pages/GlobalConfigurations/Authorization/APITokens/GenerateModal.tsx
@@ -20,6 +20,7 @@ import {
     ClipboardButton,
     copyToClipboard,
     GenericModal,
+    Icon,
     InfoBlock,
     stopPropagation,
 } from '@devtron-labs/devtron-fe-common-lib'
@@ -35,7 +36,7 @@ const GenerateModal = ({
     open,
 }: GenerateTokenModalType) => {
     const [copyToClipboardPromise, setCopyToClipboardPromise] = useState<ReturnType<typeof copyToClipboard>>(null)
-    const modelType = isRegenerationModal ? 'regenerated' : 'generated'
+    const modelType = isRegenerationModal ? 'Regenerated' : 'Generated'
     const handleCloseButton = () => {
         close()
         reload()
@@ -59,14 +60,21 @@ const GenerateModal = ({
             <GenericModal.Body>
                 <div className="flexbox-col dc__gap-20 p-20">
                     <div className="flexbox-col dc__gap-4">
-                        <h4 className="m-0">Copy and store this token safely, you won’t be able to view it again.</h4>
+                        <h5 className="m-0 cn-9 lh-1-5">
+                            Copy and store this token safely, you won’t be able to view it again.
+                        </h5>
                         <p className="cn-7 fs-12 lh-1-5 m-0">
                             You can regenerate a token anytime. If you do, remember to update any scripts or
                             applications using the old token.
                         </p>
                     </div>
 
-                    <InfoBlock description={token} variant="success" />
+                    <InfoBlock
+                        heading="API Token"
+                        description={token}
+                        variant="success"
+                        customIcon={<Icon name="ic-key" color="G500" />}
+                    />
                 </div>
             </GenericModal.Body>
             <GenericModal.Footer
diff --git a/src/components/ciPipeline/Webhook/WebhookDetailsModal.tsx b/src/components/ciPipeline/Webhook/WebhookDetailsModal.tsx
@@ -23,9 +23,7 @@ import {
     copyToClipboard,
     CustomInput,
     ClipboardButton,
-    ButtonWithLoader,
     CodeEditor,
-    SelectPicker,
     TabGroup,
     ComponentSizeType,
     ToastVariantType,
@@ -37,31 +35,23 @@ import {
     ActionTypes,
     InfoBlock,
     DocLink,
+    stopPropagation,
+    ButtonStyleType,
+    Icon,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { useParams } from 'react-router-dom'
 import Tippy from '@tippyjs/react'
 import { ReactComponent as Close } from '../../../assets/icons/ic-close.svg'
 import { ReactComponent as Help } from '../../../assets/icons/ic-help.svg'
 import { ReactComponent as ICHelpOutline } from '../../../assets/icons/ic-help-outline.svg'
 import { ReactComponent as Add } from '../../../assets/icons/ic-add.svg'
-import { ReactComponent as PlayButton } from '../../../assets/icons/ic-play.svg'
 import { ReactComponent as Tag } from '../../../assets/icons/ic-tag.svg'
 import './webhookDetails.scss'
-import {
-    getUserRole,
-    createOrUpdateUser,
-} from '@Pages/GlobalConfigurations/Authorization/authorization.service'
+import { getUserRole, createOrUpdateUser } from '@Pages/GlobalConfigurations/Authorization/authorization.service'
 import { MODES, SERVER_MODE, WEBHOOK_NO_API_TOKEN_ERROR } from '../../../config'
 import { createGeneratedAPIToken } from '@Pages/GlobalConfigurations/Authorization/APITokens/service'
-import {
-    CURL_PREFIX,
-    getWebhookTokenListOptions,
-    PLAYGROUND_TAB_LIST,
-    REQUEST_BODY_TAB_LIST,
-    RESPONSE_TAB_LIST,
-    TOKEN_TAB_LIST,
-} from './webhook.utils'
-import { SchemaType, TabDetailsType, TokenListOptionsType, WebhookDetailsType, WebhookDetailType } from './types'
+import { CURL_PREFIX, PLAYGROUND_TAB_LIST, REQUEST_BODY_TAB_LIST, RESPONSE_TAB_LIST } from './webhook.utils'
+import { SchemaType, TabDetailsType, WebhookDetailsType, WebhookDetailType } from './types'
 import { executeWebhookAPI, getExternalCIConfig, getWebhookAPITokenList } from './webhook.service'
 import { GENERATE_TOKEN_NAME_VALIDATION } from '../../../config/constantMessaging'
 import { createUserPermissionPayload } from '@Pages/GlobalConfigurations/Authorization/utils'
@@ -82,15 +72,12 @@ export const WebhookDetailsModal = ({ close, isTemplateView }: WebhookDetailType
     const [loader, setLoader] = useState(false)
     const [webhookExecutionLoader, setWebhookExecutionLoader] = useState(false)
     const [generateTokenLoader, setGenerateTokenLoader] = useState(false)
-    const [selectedTokenTab, setSelectedTokenTab] = useState<string>(TOKEN_TAB_LIST[0].key)
     const [tokenName, setTokenName] = useState<string>('')
     const [showTokenNameError, setTokenNameError] = useState(false)
     const [selectedPlaygroundTab, setSelectedPlaygroundTab] = useState<string>(PLAYGROUND_TAB_LIST[0].key)
     const [selectedRequestBodyTab, setRequestBodyPlaygroundTab] = useState<string>(REQUEST_BODY_TAB_LIST[0].key)
     const [webhookResponse, setWebhookResponse] = useState<Object>(null)
-    const [selectedToken, setSelectedToken] = useState<TokenListOptionsType>(null)
     const [generatedAPIToken, setGeneratedAPIToken] = useState<string>(null)
-    const [tokenList, setTokenList] = useState<TokenListOptionsType[]>(undefined)
     const [showTokenSection, setShowTokenSection] = useState(false)
     const [isSuperAdmin, setIsSuperAdmin] = useState(false)
     const [samplePayload, setSamplePayload] = useState<any>(null)
@@ -203,7 +190,6 @@ export const WebhookDetailsModal = ({ close, isTemplateView }: WebhookDetailType
                         .map((tokenData) => {
                             return { label: tokenData.name, value: tokenData.id, ...tokenData }
                         }) || []
-                setTokenList(sortedResult)
             }
             setLoader(false)
         } catch (error) {
@@ -379,41 +365,31 @@ export const WebhookDetailsModal = ({ close, isTemplateView }: WebhookDetailType
         )
     }
 
-    const renderSelectedToken = (titlePrefix: string, token: string): JSX.Element => {
-        return (
-            <div>
-                <div className="cn-7 mt-16 mb-8 fs-13">{titlePrefix} API token</div>
-                <div className="fs-13 font-roboto flexbox dc__word-break pl-8-imp" data-testid="generated-api-token">
-                    {token}
-                    <div className="flex pl-4">
-                        <ClipboardButton content={token} />
-                    </div>
-                </div>
-            </div>
-        )
+    const handleCopyToClipboard = async ({ e, token }: { e: React.MouseEvent; token: string }) => {
+        stopPropagation(e)
+        setCopyToClipboardPromise(copyToClipboard(token))
     }
 
-    const renderSelectTokenSection = (): JSX.Element => {
-        const handleSelectedTokenChange = (selectedToken): void => {
-            setSelectedToken(selectedToken)
-        }
-
+    const renderSelectedToken = (token: string): JSX.Element => {
         return (
-            <>
-                <div className="w-400 h-32 mt-16">
-                    <SelectPicker
-                        inputId="select-token"
-                        name="select-token"
-                        classNamePrefix="select-token"
-                        placeholder="Select API token"
-                        isClearable={false}
-                        options={getWebhookTokenListOptions(tokenList)}
-                        value={selectedToken}
-                        onChange={handleSelectedTokenChange}
-                        isSearchable={false}
-                    />
-                </div>
-            </>
+            <div className="mt-16">
+                <InfoBlock
+                    heading="Copy and store this token safely, you won’t be able to view it again."
+                    description={
+                        <div className="fs-13 font-roboto flexbox dc__word-break" data-testid="generated-api-token">
+                            {token}
+                        </div>
+                    }
+                    buttonProps={{
+                        text: 'Copy',
+                        startIcon: <ClipboardButton content={token} copyToClipboardPromise={copyToClipboardPromise} />,
+                        dataTestId: 'copy-generated-api-token',
+                        variant: ButtonVariantType.text,
+                        onClick: (e) => handleCopyToClipboard({ e, token }),
+                    }}
+                    variant="success"
+                />
+            </div>
         )
     }
 
@@ -427,7 +403,7 @@ export const WebhookDetailsModal = ({ close, isTemplateView }: WebhookDetailType
     const renderGenerateTokenSection = (): JSX.Element => {
         return (
             <div className="flexbox-col dc__gap-16">
-                <div className="mt-16">
+                <div className="mt-8">
                     <CustomInput
                         placeholder="Enter token name"
                         name="token-name"
@@ -437,8 +413,9 @@ export const WebhookDetailsModal = ({ close, isTemplateView }: WebhookDetailType
                         disabled={!!generatedAPIToken}
                         error={showTokenNameError && GENERATE_TOKEN_NAME_VALIDATION}
                         helperText="An API token with the required permissions will be auto-generated."
+                        required
                     />
-                    {generatedAPIToken && renderSelectedToken('Generated', generatedAPIToken)}
+                    {generatedAPIToken && renderSelectedToken(generatedAPIToken)}
                 </div>
                 {!generatedAPIToken && (
                     <Button
@@ -470,13 +447,12 @@ export const WebhookDetailsModal = ({ close, isTemplateView }: WebhookDetailType
                 dataTestId="select-or-generate-token"
                 variant={ButtonVariantType.text}
                 onClick={toggleTokenSection}
-                text="Select or auto-generate token with required permissions"
+                text="Auto-generate token with required permissions"
             />
         ) : (
-            <div>
-                {generateTabHeader(TOKEN_TAB_LIST, selectedTokenTab, setSelectedTokenTab)}
-                {selectedTokenTab === TOKEN_TAB_LIST[0].key && renderSelectTokenSection()}
-                {selectedTokenTab === TOKEN_TAB_LIST[1].key && renderGenerateTokenSection()}
+            <div className="cn-9 fs-13 mb-8">
+                <span className="fs-13 lh-1-5 fw-6">Generate token with required permissions</span>
+                {renderGenerateTokenSection()}
             </div>
         )
     }
@@ -820,19 +796,23 @@ export const WebhookDetailsModal = ({ close, isTemplateView }: WebhookDetailType
     const renderTryoutActionSection = (): JSX.Element => {
         return (
             <div className="flex left mt-20">
-                <ButtonWithLoader
-                    rootClassName="cta h-28 flex mr-8"
+                <Button
+                    dataTestId="execute-token"
                     onClick={executeWebhook}
+                    text="Execute"
+                    startIcon={<Icon name="ic-play-outline" color="N0" size={18} />}
                     isLoading={webhookExecutionLoader}
-                >
-                    <PlayButton className="icon-dim-18 mr-8" />
-                    Execute
-                </ButtonWithLoader>
+                    size={ComponentSizeType.small}
+                />
                 {webhookResponse && (
-                    <button className="cta cancel h-28 flex" onClick={clearWebhookResponse}>
-                        <Close className="icon-dim-18 mr-8" />
-                        Clear
-                    </button>
+                    <Button
+                        dataTestId="clear-response"
+                        onClick={clearWebhookResponse}
+                        text="Clear"
+                        startIcon={<Icon name="ic-close-large" color="N0" size={18} />}
+                        size={ComponentSizeType.small}
+                        variant={ButtonVariantType.secondary}
+                    />
                 )}
             </div>
         )
@@ -869,9 +849,15 @@ export const WebhookDetailsModal = ({ close, isTemplateView }: WebhookDetailType
         return (
             <div className="flex flex-align-center flex-justify dc__border-bottom bg__primary pt-16 pr-20 pb-16 pl-20">
                 <h2 className="fs-16 fw-6 lh-1-43 m-0">Webhook Details</h2>
-                <button type="button" className="dc__transparent flex icon-dim-24" onClick={closeWebhook}>
-                    <Close className="icon-dim-24" />
-                </button>
+                <Button
+                    dataTestId="close-webhook-details-modal"
+                    icon={<Icon name="ic-close-large" color={null} />}
+                    ariaLabel="Close"
+                    showAriaLabelInTippy={false}
+                    onClick={closeWebhook}
+                    variant={ButtonVariantType.borderLess}
+                    style={ButtonStyleType.negativeGrey}
+                />
             </div>
         )
     }
diff --git a/src/components/ciPipeline/Webhook/types.ts b/src/components/ciPipeline/Webhook/types.ts
@@ -16,8 +16,6 @@
 
 import { AppConfigProps, ResponseType } from '@devtron-labs/devtron-fe-common-lib'
 
-import { TokenListType } from '@Pages/GlobalConfigurations/Authorization/APITokens/apiToken.type'
-
 export interface WebhookDetailType extends Required<Pick<AppConfigProps, 'isTemplateView'>> {
     close: () => void
 }
@@ -27,12 +25,6 @@ export interface TabDetailsType {
     value: string
 }
 
-export interface TokenListOptionsType extends TokenListType {
-    label: string
-    value: string
-    description: string
-}
-
 export interface TokenPermissionType {
     projectName: string
     environmentName: string
diff --git a/src/components/ciPipeline/Webhook/webhook.utils.ts b/src/components/ciPipeline/Webhook/webhook.utils.ts
