Skip to content

Commit 3bcff82

Browse files
shivani170shivani170
authored
Merge pull request #2817 from devtron-labs/feat/api-token-removed
feat: Hide api token from webhook and global config
2 parents 0665233 + f893bcd commit 3bcff82

File tree

10 files changed

+141
-242
lines changed

10 files changed

+141
-242
lines changed

‎src/Pages/GlobalConfigurations/Authorization/APITokens/ApiTokens.component.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -80,10 +80,7 @@ const ApiTokens = () => {
8080

8181
const handleFilterChanges = (_searchText: string): void => {
8282
const _searchTextTrimmed = _searchText.trim()
83-
const _filteredData = tokenList.filter(
84-
(_tokenData) =>
85-
_tokenData.name.indexOf(_searchTextTrimmed) >= 0 || _tokenData.token.indexOf(_searchTextTrimmed) >= 0,
86-
)
83+
const _filteredData = tokenList.filter((_tokenData) => _tokenData.name.indexOf(_searchTextTrimmed) >= 0)
8784
setFilteredTokenList(_filteredData)
8885
setNoResults(_filteredData.length === 0)
8986
}

‎src/Pages/GlobalConfigurations/Authorization/APITokens/CreateAPIToken.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -308,14 +308,14 @@ const CreateAPIToken = ({
308308
buttonText="Generate token"
309309
disabled={isSaveDisabled}
310310
/>
311-
{showGenerateModal && (
312-
<GenerateModal
313-
close={handleGenerateTokenActionButton}
314-
token={tokenResponse.token}
315-
reload={reload}
316-
redirectToTokenList={redirectToTokenList}
317-
/>
318-
)}
311+
312+
<GenerateModal
313+
close={handleGenerateTokenActionButton}
314+
token={tokenResponse.token}
315+
reload={reload}
316+
redirectToTokenList={redirectToTokenList}
317+
open={showGenerateModal}
318+
/>
319319
</div>
320320
)
321321
}

‎src/Pages/GlobalConfigurations/Authorization/APITokens/EditAPIToken.tsx

Lines changed: 12 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,11 @@ import { useHistory, useParams, useRouteMatch } from 'react-router-dom'
2020
import moment from 'moment'
2121

2222
import {
23+
Button,
2324
ButtonStyleType,
2425
ButtonVariantType,
25-
ButtonWithLoader,
26-
ClipboardButton,
2726
CustomInput,
27+
Icon,
2828
InfoBlock,
2929
noop,
3030
Progressing,
@@ -35,7 +35,6 @@ import {
3535
useMainContext,
3636
} from '@devtron-labs/devtron-fe-common-lib'
3737

38-
import { ReactComponent as Delete } from '../../../../assets/icons/ic-delete-interactive.svg'
3938
import { importComponentFromFELibrary } from '../../../../components/common'
4039
import { MomentDateFormat } from '../../../../config'
4140
import { API_COMPONENTS } from '../../../../config/constantMessaging'
@@ -168,21 +167,13 @@ const EditAPIToken = ({
168167
}
169168

170169
const getExpirationText = () => {
171-
if (isTokenExpired(editData.expireAtInMs)) {
172-
return (
173-
<span className="cr-5 fw-6">
174-
This token expired on&nbsp;
175-
{moment(editData.expireAtInMs).format(MomentDateFormat)}.
176-
</span>
177-
)
178-
}
179170
if (editData.expireAtInMs === 0) {
180-
return <span className="fw-6">This token has no expiration date.</span>
171+
return <span className="fw-6 cn-9">This token has no expiration date.</span>
181172
}
182173

183174
return (
184-
<span className="fw-6">
185-
This token expires on&nbsp;
175+
<span className="fw-6 cn-9">
176+
This token {isTokenExpired(editData.expireAtInMs) ? 'expired' : 'expires'} on&nbsp;
186177
{moment(editData.expireAtInMs).format(MomentDateFormat)}.
187178
</span>
188179
)
@@ -199,6 +190,7 @@ const EditAPIToken = ({
199190
variant: ButtonVariantType.text,
200191
style: ButtonStyleType.negative,
201192
}}
193+
variant={isTokenExpired(editData.expireAtInMs) ? 'error' : 'information'}
202194
/>
203195
)
204196

@@ -220,16 +212,16 @@ const EditAPIToken = ({
220212
{renderQuestionwithTippy()}
221213
</div>
222214
<div className="flex dc__align-end dc__content-end">
223-
<ButtonWithLoader
224-
rootClassName="flex cta override-button delete scr-5 h-32"
215+
<Button
225216
onClick={handleDeleteButton}
226217
disabled={loader}
227218
isLoading={false}
228219
dataTestId="delete-token"
229-
>
230-
<Delete className="icon-dim-16 mr-8" />
231-
<span>Delete</span>
232-
</ButtonWithLoader>
220+
text="Delete"
221+
variant={ButtonVariantType.secondary}
222+
style={ButtonStyleType.negative}
223+
startIcon={<Icon name="ic-delete" color={null} />}
224+
/>
233225
</div>
234226
</div>
235227
<div className="flexbox-col dc__gap-16">
@@ -251,17 +243,6 @@ const EditAPIToken = ({
251243
placeholder="Enter a description to remember where you have used this token"
252244
error={invalidDescription ? 'Max 350 characters allowed.' : null}
253245
/>
254-
<label className="form__row">
255-
<span className="form__label">Token</span>
256-
<div className="flex dc__content-space top cn-9">
257-
<span data-testid="api-token-string" className="mono fs-14 dc__word-break">
258-
{editData.token}
259-
</span>
260-
<div className="icon-dim-16 ml-8">
261-
<ClipboardButton content={editData.token} />
262-
</div>
263-
</div>
264-
</label>
265246
<div className="dc__border-top" />
266247
<PermissionConfigurationForm showUserPermissionGroupSelector isAddMode={false} />
267248
</div>

‎src/Pages/GlobalConfigurations/Authorization/APITokens/GenerateModal.tsx

Lines changed: 52 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -17,68 +17,77 @@
1717
import { useState } from 'react'
1818

1919
import {
20-
Button,
21-
ButtonVariantType,
2220
ClipboardButton,
23-
ComponentSizeType,
2421
copyToClipboard,
25-
VisibleModal,
22+
GenericModal,
23+
Icon,
24+
InfoBlock,
25+
stopPropagation,
2626
} from '@devtron-labs/devtron-fe-common-lib'
2727

28-
import { ReactComponent as Close } from '../../../../assets/icons/ic-close.svg'
29-
import { ReactComponent as Key } from '../../../../assets/icons/ic-key-bulb.svg'
30-
import { ReactComponent as Success } from '../../../../assets/icons/ic-success-outline.svg'
3128
import { GenerateTokenModalType } from './apiToken.type'
3229

33-
const GenerateModal = ({ close, token, reload, redirectToTokenList, isRegenerationModal }: GenerateTokenModalType) => {
30+
const GenerateModal = ({
31+
close,
32+
token,
33+
reload,
34+
redirectToTokenList,
35+
isRegenerationModal,
36+
open,
37+
}: GenerateTokenModalType) => {
3438
const [copyToClipboardPromise, setCopyToClipboardPromise] = useState<ReturnType<typeof copyToClipboard>>(null)
35-
const modelType = isRegenerationModal ? 'regenerated' : 'generated'
39+
const modelType = isRegenerationModal ? 'Regenerated' : 'Generated'
3640
const handleCloseButton = () => {
3741
close()
3842
reload()
3943
redirectToTokenList()
4044
}
4145

42-
const handleCopyToClipboard = async (e?: React.MouseEvent) => {
43-
e?.stopPropagation()
44-
46+
const handleCopyToClipboard = async (e: React.MouseEvent) => {
47+
stopPropagation(e)
4548
setCopyToClipboardPromise(copyToClipboard(token))
4649
}
4750

4851
return (
49-
<VisibleModal className="generate-token-modal">
50-
<div className="modal__body w-600 pl-20 pr-20 pt-20 pb-20 flex column dc__gap-16">
51-
<button
52-
type="button"
53-
data-testid={`${modelType}-token-modal-close`}
54-
className="w-100 flex right dc__transparent"
55-
onClick={handleCloseButton}
56-
aria-label="Close modal"
57-
>
58-
<Close className="icon-dim-24" />
59-
</button>
60-
<Success className="dc__vertical-align-middle" />
52+
<GenericModal
53+
name="create-ci-cd-pipeline-modal"
54+
open={open}
55+
width={600}
56+
onClose={handleCloseButton}
57+
onEscape={handleCloseButton}
58+
>
59+
<GenericModal.Header title={`API Token ${modelType}`} />
60+
<GenericModal.Body>
61+
<div className="flexbox-col dc__gap-20 p-20">
62+
<div className="flexbox-col dc__gap-4">
63+
<h5 className="m-0 cn-9 lh-1-5 fw-6">
64+
Copy and store this token safely, you won’t be able to view it again.
65+
</h5>
66+
<p className="cn-7 fs-12 lh-1-5 m-0">
67+
You can regenerate a token anytime. If you do, remember to update any scripts or
68+
applications using the old token.
69+
</p>
70+
</div>
6171

62-
<h2 className="modal__title fs-16">API token {modelType}</h2>
63-
<div
64-
className="flex top left bcg-1 br-4 eg-2 bw-1 pl-16 pr-16 pt-10 pb-10 dc__break-word"
65-
style={{ width: '560px' }}
66-
>
67-
<Key className="api-token-icon icon-dim-20 mr-10" />
68-
<span data-testid={`${modelType}-token`} className="api-token-text cn-9 fs-14">
69-
{token}
70-
</span>
72+
<InfoBlock
73+
heading="API Token"
74+
description={token}
75+
variant="success"
76+
customIcon={<Icon name="ic-key" color="G500" />}
77+
/>
7178
</div>
72-
<Button
73-
dataTestId="copy-token"
74-
variant={ButtonVariantType.primary}
75-
size={ComponentSizeType.large}
76-
onClick={handleCopyToClipboard}
77-
startIcon={<ClipboardButton content={token} copyToClipboardPromise={copyToClipboardPromise} />}
78-
text="Copy token"
79-
/>
80-
</div>
81-
</VisibleModal>
79+
</GenericModal.Body>
80+
<GenericModal.Footer
81+
buttonConfig={{
82+
primaryButton: {
83+
dataTestId: 'copy-token',
84+
startIcon: <ClipboardButton content={token} copyToClipboardPromise={copyToClipboardPromise} />,
85+
text: 'Copy token',
86+
onClick: handleCopyToClipboard,
87+
},
88+
}}
89+
/>
90+
</GenericModal>
8291
)
8392
}
8493

‎src/Pages/GlobalConfigurations/Authorization/APITokens/RegenerateModal.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@ const RegeneratedModal = ({
116116
reload={reload}
117117
redirectToTokenList={redirectToTokenList}
118118
isRegenerationModal
119+
open={showGenerateModal}
119120
/>
120121
) : (
121122
<VisibleModal className="regenerate-token-modal">

‎src/Pages/GlobalConfigurations/Authorization/APITokens/apiToken.type.ts

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616

1717
import React from 'react'
1818

19+
import { GenericModalProps } from '@devtron-labs/devtron-fe-common-lib'
20+
1921
export interface FormType {
2022
name: string
2123
description: string
@@ -44,7 +46,6 @@ export interface TokenListType {
4446
expireAtInMs: number
4547
id: number
4648
name: string
47-
token: string
4849
userId: number
4950
userIdentifier: string
5051
description: string
@@ -54,10 +55,7 @@ export interface TokenListType {
5455
}
5556

5657
export interface EditDataType
57-
extends Pick<
58-
TokenListType,
59-
'name' | 'description' | 'expireAtInMs' | 'token' | 'id' | 'userId' | 'userIdentifier'
60-
> {}
58+
extends Pick<TokenListType, 'name' | 'description' | 'expireAtInMs' | 'id' | 'userId' | 'userIdentifier'> {}
6159
export interface EditTokenType {
6260
setShowRegeneratedModal: React.Dispatch<React.SetStateAction<boolean>>
6361
showRegeneratedModal: boolean
@@ -83,6 +81,7 @@ export interface GenerateTokenModalType {
8381
reload: () => void
8482
redirectToTokenList: () => void
8583
isRegenerationModal?: boolean
84+
open: GenericModalProps['open']
8685
}
8786

8887
export interface APITokenListType {

0 commit comments

Comments
 (0)