Allow users to generate API tokens with the desired access

src/components/apiTokens/APITokenList.tsx

@@ -35,20 +35,21 @@ function APITokenList({ tokenList, renderSearchToken, reload }: APITokenListType
         history.push(id ? `${key}/${id}` : key)
     }
 
+    const handleDeleteButton = (tokenList) => {
+        setSelectedToken(tokenList)
+        setDeleteConfirmation(true)
+    }
     return (
         <div>
             <div className="cn-9 fw-6 fs-16">API tokens</div>
-            <p className="fs-13 fw-4">Tokens you have generated that can be used to access the Devtron API.</p>
-            <div className="flex content-space">
+            <p className="fs-12 fw-4">Tokens you have generated that can be used to access the Devtron API.</p>
+            <div className="flex content-space mb-16">
                 <button className="flex cta h-32" onClick={() => handleGenerateRowActionButton('create')}>
                     Generate new token
                 </button>
                 {renderSearchToken()}
             </div>
-            <div
-                className="mt-16 en-2 bw-1 bcn-0 br-8"
-                style={{ minHeight: 'calc(100vh - 235px)', overflow: 'hidden' }}
-            >
+            <div className="api-token__list en-2 bw-1 bcn-0 br-8">
                 <div className="api-list-row fw-6 cn-7 fs-12 border-bottom pt-10 pb-10 pr-20 pl-20 text-uppercase">
                     <div></div>
                     <div>Name</div>
@@ -81,10 +82,12 @@ function APITokenList({ tokenList, renderSearchToken, reload }: APITokenListType
                                 className={`flexbox cb-5 cursor`}
                                 onClick={() => handleGenerateRowActionButton('edit', list.id)}
                             >
-                                {list.name}
+                                <span className="ellipsis-right">{list.name}</span>
+                            </div>
+                            <div className="ellipsis-right">
+                                {list.lastUsedAt ? moment(list.lastUsedAt).format(MomentDateFormat) : 'Never used'}
                             </div>
-                            <div className="ellipsis-right">{moment(list.lastUsedAt).format(MomentDateFormat)}</div>
-                            <div>{list.lastUsedByIp}</div>
+                            <div>{list.lastUsedByIp ? list.lastUsedByIp : '-'}</div>
                             <div className={`${isTokenExpired(list.expireAtInMs) ? 'cr-5' : ''}`}>
                                 {list.expireAtInMs === 0 ? (
                                     'No expiration date'
@@ -95,22 +98,15 @@ function APITokenList({ tokenList, renderSearchToken, reload }: APITokenListType
                                     </>
                                 )}
                             </div>
-                            <div className="api__row-actions flex">
+                            <div className="api__row-actions flex right">
                                 <button
                                     type="button"
-                                    className="transparent mr-8 ml-8"
+                                    className="transparent mr-18"
                                     onClick={() => handleGenerateRowActionButton('edit', list.id)}
                                 >
                                     <Edit className="icon-dim-20" />
                                 </button>
-                                <button
-                                    type="button"
-                                    className="transparent"
-                                    onClick={() => {
-                                        setSelectedToken(list)
-                                        setDeleteConfirmation(true)
-                                    }}
-                                >
+                                <button type="button" className="transparent" onClick={() => handleDeleteButton(list)}>
                                     <Trash className="scn-6 icon-dim-20" />
                                 </button>
                             </div>

src/components/apiTokens/ApiTokens.component.tsx

@@ -12,7 +12,7 @@ import CreateAPIToken from './CreateAPIToken'
 import EditAPIToken from './EditAPIToken'
 import { TokenListType, TokenResponseType } from './authorization.type'
 
-function ApiTokens({ reloadLists }) {
+function ApiTokens() {
     const { path } = useRouteMatch()
     const history = useHistory()
     const { pathname } = useLocation()
@@ -66,7 +66,11 @@ function ApiTokens({ reloadLists }) {
     }, [])
 
     const handleFilterChanges = (_searchText: string): void => {
-        const _filteredData = tokenList.filter((token) => token.name.indexOf(_searchText) >= 0)
+        const _searchTextTrimmed = _searchText.trim()
+        const _filteredData = tokenList.filter(
+            (_tokenData) =>
+                _tokenData.name.indexOf(_searchTextTrimmed) >= 0 || _tokenData.token.indexOf(_searchTextTrimmed) >= 0,
+        )
         setFilteredTokenList(_filteredData)
         setNoResults(_filteredData.length === 0)
     }
@@ -105,14 +109,14 @@ function ApiTokens({ reloadLists }) {
                         type="text"
                         placeholder="Search Token"
                         value={searchText}
-                        className="search__input bcn-0"
+                        className={`search__input bcn-0 ${searchApplied ? 'search-applied' : ''}`}
                         onChange={(event) => {
                             setSearchText(event.target.value)
                         }}
                         onKeyDown={handleFilterKeyPress}
                     />
                     {searchApplied && (
-                        <button className="search__clear-button" type="button" onClick={clearSearch}>
+                        <button className="flex search__clear-button" type="button" onClick={clearSearch}>
                             <Clear className="icon-dim-18 icon-n4 vertical-align-middle" />
                         </button>
                     )}
@@ -170,6 +174,10 @@ function ApiTokens({ reloadLists }) {
         )
     }
 
+    const redirectToCreate = () => {
+        history.push(`${path}/create`)
+    }
+
     const renderEmptyState = (): JSX.Element => {
         return (
             <div className="flex column h-100">
@@ -181,11 +189,11 @@ function ApiTokens({ reloadLists }) {
                         <h4 className="title">Generate a token to access the Devtron API</h4>
                     </EmptyState.Title>
                     <EmptyState.Subtitle>
-                        API tokens function like ordinary OAuth access tokens. They can be used instead of a password
-                        for Git over HTTPS, or can be used to authenticate to the API over Basic Authentication.
+                        API tokens are like ordinary OAuth access tokens. They can be used instead of username and
+                        password for programmatic access to API.
                     </EmptyState.Subtitle>
                     <EmptyState.Button>
-                        <button className="flex cta h-32" onClick={() => history.push(`${path}/create`)}>
+                        <button className="flex cta h-32" onClick={redirectToCreate}>
                             Generate new token
                         </button>
                     </EmptyState.Button>
@@ -208,7 +216,6 @@ function ApiTokens({ reloadLists }) {
     } else if (!pathname.includes('/create') && (!tokenList || tokenList.length === 0)) {
         return renderEmptyState()
     }
-
     return renderAPITokenRoutes()
 }