fix: Fixed issue with API tokens refetch and copy button (#4382)

Signed-off-by: Hrishav <hrishav.kumar@harness.io>
litmuschaos · Jan 15, 2024 · 7a29dc1 · 7a29dc1
1 parent 7e12fc4
commit 7a29dc1
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 22 deletions.
diff --git a/chaoscenter/web/src/controllers/APITokens/APITokens.tsx b/chaoscenter/web/src/controllers/APITokens/APITokens.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useToaster } from '@harnessio/uicore';
 import ApiTokensView from '@views/ApiTokens';
-import { useGetApiTokensQuery } from '@api/auth';
+import { GetApiTokensResponse, useGetApiTokensQuery } from '@api/auth';
 import { getUserDetails } from '@utils';
 
 interface APITokensControllerProps {
@@ -12,26 +12,24 @@ export default function APITokensController(props: APITokensControllerProps): Re
   const { setApiTokensCount } = props;
   const { showError } = useToaster();
   const { accountID } = getUserDetails();
+  const [apiTokenData, setApiTokenData] = React.useState<GetApiTokensResponse | undefined>(undefined);
 
-  const {
-    data: apiTokensData,
-    isLoading: apiTokensLoading,
-    refetch: apiTokensRefetch
-  } = useGetApiTokensQuery(
+  const { isLoading: apiTokensLoading, refetch: apiTokensRefetch } = useGetApiTokensQuery(
     { user_id: accountID },
     {
       onError: error => {
         showError(error.error);
       },
       onSuccess: data => {
+        setApiTokenData(data);
         setApiTokensCount(data.apiTokens.length);
       }
     }
   );
 
   return (
     <ApiTokensView
-      apiTokensData={apiTokensData}
+      apiTokensData={apiTokenData}
       apiTokensRefetch={apiTokensRefetch}
       getApiTokensQueryLoading={apiTokensLoading}
     />

diff --git a/chaoscenter/web/src/views/ApiTokens/ApiTokens.tsx b/chaoscenter/web/src/views/ApiTokens/ApiTokens.tsx
@@ -1,4 +1,4 @@
-import { Button, ButtonVariation, Layout, TableV2, Text, useToaster, useToggleOpen } from '@harnessio/uicore';
+import { Button, ButtonVariation, Layout, TableV2, Text, useToggleOpen } from '@harnessio/uicore';
 import { Color, FontVariation } from '@harnessio/design-system';
 import React from 'react';
 import type { QueryObserverResult, RefetchOptions, RefetchQueryFilters } from '@tanstack/react-query';
@@ -11,6 +11,7 @@ import Loader from '@components/Loader';
 import { getFormattedTime, killEvent } from '@utils';
 import DeleteApiTokenController from '@controllers/DeleteApiToken';
 import CreateNewTokenController from '@controllers/CreateNewToken';
+import CopyButton from '@components/CopyButton';
 import css from './ApiTokens.module.scss';
 
 interface ApiTokensViewProps {
@@ -27,7 +28,6 @@ interface MemoizedApiTokensTableProps extends Omit<ApiTokensViewProps, 'apiToken
 
 function MemoizedApiTokensTable({ apiTokens, apiTokensRefetch }: MemoizedApiTokensTableProps): React.ReactElement {
   const { getString } = useStrings();
-  const { showSuccess } = useToaster();
 
   const columns: Column<ApiToken>[] = React.useMemo(() => {
     return [
@@ -60,18 +60,7 @@ function MemoizedApiTokensTable({ apiTokens, apiTokensRefetch }: MemoizedApiToke
         id: 'accessToken',
         Header: getString('value'),
         Cell: ({ row: { original: data } }: { row: Row<ApiToken> }) => {
-          return (
-            data.token && (
-              <Icon
-                name="code-copy"
-                size={20}
-                onClick={() => {
-                  navigator.clipboard.writeText(data.token || '');
-                  showSuccess(getString('copiedToClipboard'));
-                }}
-              />
-            )
-          );
+          return data.token && <CopyButton stringToCopy={data.token} />;
         }
       },
       {
@@ -145,7 +134,7 @@ export default function ApiTokensView(props: ApiTokensViewProps): React.ReactEle
         small
         loading={getApiTokensQueryLoading}
         noData={{
-          when: () => !apiTokens.length,
+          when: () => apiTokens?.length === 0,
           message: getString('noApiTokensFound')
         }}
       >