add the regenerate logic

packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/Regenerate/index.js

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Button } from '@strapi/design-system/Button';
+import Refresh from '@strapi/icons/Refresh';
+import { ConfirmDialog } from '@strapi/helper-plugin';
+import { axiosInstance } from '../../../../../../../core/utils';
+
+const ButtonWithRightMargin = styled(Button)`
+  margin-right: ${({ theme }) => theme.spaces[2]}; ;
+`;
+
+export const Regenerate = ({ onRegenerate, idToRegenerate }) => {
+  let isLoadingConfirmation = false;
+  const { formatMessage } = useIntl();
+  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+  const handleConfirmRegeneration = async () => {
+    isLoadingConfirmation = true;
+    try {
+      const {
+        data: {
+          data: { accessKey },
+        },
+      } = await axiosInstance.post(`/admin/api-tokens/${idToRegenerate}/regenerate`);
+      isLoadingConfirmation = false;
+      onRegenerate(accessKey);
+      setShowConfirmDialog(false);
+    } catch (error) {
+      isLoadingConfirmation = false;
+      console.log('error', error);
+    }
+  };
+
+  return (
+    <>
+      <ButtonWithRightMargin
+        startIcon={<Refresh />}
+        type="button"
+        size="S"
+        variant="tertiary"
+        onClick={() => setShowConfirmDialog(true)}
+      >
+        {formatMessage({
+          id: 'Settings.apiTokens.regenerate',
+          defaultMessage: 'Regenerate',
+        })}
+      </ButtonWithRightMargin>
+
+      <ConfirmDialog
+        bodyText={{
+          id: 'Settings.apiTokens.popUpWarning.message',
+          defaultMessage: 'Are you sure you want to regenerate this token?',
+        }}
+        iconRightButton={<Refresh />}
+        isConfirmButtonLoading={isLoadingConfirmation}
+        isOpen={showConfirmDialog}
+        onToggleDialog={() => setShowConfirmDialog(false)}
+        onConfirm={handleConfirmRegeneration}
+        leftButtonText={{
+          id: 'Settings.apiTokens.Button.cancel',
+          defaultMessage: 'Cancel',
+        }}
+        rightButtonText={{
+          id: 'Settings.apiTokens.Button.regenerate',
+          defaultMessage: 'Regenerate',
+        }}
+        title={{
+          id: 'Settings.apiTokens.RegenerateDialog.title',
+          defaultMessage: 'Regenerate token',
+        }}
+      />
+    </>
+  );
+};
+
+Regenerate.defaultProps = {
+  onRegenerate() {},
+};
+
+Regenerate.propTypes = {
+  onRegenerate: PropTypes.func,
+  idToRegenerate: PropTypes.string.isRequired,
+};
+
+export default Regenerate;

packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/index.js

@@ -1,5 +1,4 @@
-import React, { useEffect, useRef, useReducer, useMemo } from 'react';
+import React, { useEffect, useState, useRef, useReducer, useMemo } from 'react';
-import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 import {
   SettingsPageTitle,
@@ -18,7 +17,6 @@ import { Main } from '@strapi/design-system/Main';
 import { Button } from '@strapi/design-system/Button';
 import { Flex } from '@strapi/design-system/Flex';
 import Check from '@strapi/icons/Check';
-import Refresh from '@strapi/icons/Refresh';
 import ArrowLeft from '@strapi/icons/ArrowLeft';
 import { Formik } from 'formik';
 import { Stack } from '@strapi/design-system/Stack';
@@ -37,23 +35,26 @@ import { getDateOfExpiration, schema, getActionsState } from './utils';
 import LoadingView from './components/LoadingView';
 import HeaderContentBox from './components/ContentBox';
 import Permissions from './components/Permissions';
+import Regenerate from './components/Regenerate';
 import adminPermissions from '../../../../../permissions';
 import { ApiTokenPermissionsContextProvider } from '../../../../../contexts/ApiTokenPermissions';
 import { data as permissions } from './utils/tests/dataMock';
 import init from './init';
 import reducer, { initialState } from './reducer';
 
-const ButtonWithRightMargin = styled(Button)`
-  margin-right: ${({ theme }) => theme.spaces[2]}; ;
-`;
-
 const ApiTokenCreateView = () => {
-  let apiToken;
   useFocusWhenNavigate();
   const { formatMessage } = useIntl();
   const { lockApp, unlockApp } = useOverlayBlocker();
   const toggleNotification = useNotification();
   const history = useHistory();
+  const [apiToken, setApiToken] = useState(
+    history.location.state?.apiToken.accessKey
+      ? {
+          ...history.location.state.apiToken,
+        }
+      : null
+  );
   const { trackUsage } = useTracking();
   const trackUsageRef = useRef(trackUsage);
   const { setCurrentStep } = useGuidedTour();
@@ -73,17 +74,17 @@ const ApiTokenCreateView = () => {
     trackUsageRef.current(isCreating ? 'didAddTokenFromList' : 'didEditTokenFromList');
   }, [isCreating]);
 
-  if (history.location.state?.apiToken.accessKey) {
+  const { status } = useQuery(
-    apiToken = history.location.state.apiToken;
-  }
-
-  const { status, data } = useQuery(
     ['api-token', id],
     async () => {
       const {
         data: { data },
       } = await axiosInstance.get(`/admin/api-tokens/${id}`);
 
+      setApiToken({
+        ...data,
+      });
+
       return data;
     },
     {
@@ -97,10 +98,6 @@ const ApiTokenCreateView = () => {
     }
   );
 
-  if (data) {
-    apiToken = data;
-  }
-
   const handleSubmit = async (body, actions) => {
     trackUsageRef.current(isCreating ? 'willCreateToken' : 'willEditToken');
     lockApp();
@@ -115,8 +112,10 @@ const ApiTokenCreateView = () => {
             description: body.description,
             type: body.type,
           });
-
+      unlockApp();
-      apiToken = response;
+      setApiToken({
+        ...response,
+      });
 
       toggleNotification({
         type: 'success',
@@ -139,9 +138,8 @@ const ApiTokenCreateView = () => {
         type: 'warning',
         message: get(err, 'response.data.message', 'notification.error'),
       });
+      unlockApp();
     }
-
-    unlockApp();
   };
 
   const hasAllActionsSelected = useMemo(() => {
@@ -234,6 +232,13 @@ const ApiTokenCreateView = () => {
     }
   };
 
+  const handleRegenerate = (newKey) => {
+    setApiToken({
+      ...apiToken,
+      accessKey: newKey,
+    });
+  };
+
   const providerValue = {
     ...state,
     onChange: handleChangeCheckbox,
@@ -277,19 +282,10 @@ const ApiTokenCreateView = () => {
                     canEditInputs && (
                       <Flex justifyContent="center">
                         {apiToken?.name && (
-                          <ButtonWithRightMargin
+                          <Regenerate
-                            disabled={isSubmitting}
+                            onRegenerate={handleRegenerate}
-                            loading={isSubmitting}
+                            idToRegenerate={apiToken?.id}
-                            startIcon={<Refresh />}
+                          />
-                            type="button"
-                            size="S"
-                            variant="tertiary"
-                          >
-                            {formatMessage({
-                              id: 'Settings.apiTokens.regenerate',
-                              defaultMessage: 'Regenerate',
-                            })}
-                          </ButtonWithRightMargin>
                         )}
                         <Button
                           disabled={isSubmitting}

packages/core/admin/admin/src/translations/en.json

@@ -102,6 +102,10 @@
   "Settings.apiTokens.form.duration":"Token duration",
   "Settings.apiTokens.form.type":"Token type",
   "Settings.apiTokens.duration.expiration-date":"Expiration date",
+  "Settings.apiTokens.RegenerateDialog.title": "Regenerate token",
+  "Settings.apiTokens.popUpWarning.message": "Are you sure you want to regenerate this token?",
+  "Settings.apiTokens.Button.cancel": "Cancel",
+  "Settings.apiTokens.Button.regenerate": "Regenerate",
   "Settings.application.description": "Administration panel’s global information",
   "Settings.application.edition-title": "current plan",
   "Settings.application.get-help": "Get help",