@strapi/admin 4.6.2 → 4.7.0-exp.3d6a31eb083e9d44afcf98f68c107fb7567e5720

package/admin/src/content-manager/components/CollectionTypeFormWrapper/index.js

@@ -210,8 +210,6 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
 
   const onDelete = useCallback(
     async (trackerProperty) => {
-      console.log('onDelete');
-
       try {
         trackUsageRef.current('willDeleteEntry', trackerProperty);
 

package/admin/src/hooks/useRegenerate/index.js

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { get } from 'lodash';
 import { useFetchClient, useNotification } from '@strapi/helper-plugin';
 
-const useRegenerate = (id, onRegenerate) => {
+const useRegenerate = (url, id, onRegenerate) => {
   const [isLoadingConfirmation, setIsLoadingConfirmation] = useState(false);
   const toggleNotification = useNotification();
   const { post } = useFetchClient();
@@ -13,7 +13,7 @@ const useRegenerate = (id, onRegenerate) => {
         data: {
           data: { accessKey },
         },
-      } = await post(`/admin/api-tokens/${id}/regenerate`);
+      } = await post(`${url}${id}/regenerate`);
       setIsLoadingConfirmation(false);
       onRegenerate(accessKey);
     } catch (error) {

package/admin/src/hooks/useSettingsMenu/utils/defaultGlobalLinks.js

@@ -22,6 +22,13 @@ const defaultGlobalLinks = [
     isDisplayed: false,
     permissions: adminPermissions.settings['api-tokens'].main,
   },
+  {
+    intlLabel: { id: 'Settings.transferTokens.title', defaultMessage: 'Transfer Tokens' },
+    to: '/settings/transfer-tokens?sort=name:ASC',
+    id: 'transfer-tokens',
+    isDisplayed: false,
+    permissions: adminPermissions.settings['transfer-tokens'].main,
+  },
 ];
 
 export default defaultGlobalLinks;

package/admin/src/pages/HomePage/CloudBox.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useIntl } from 'react-intl';
+import { useTracking, pxToRem } from '@strapi/helper-plugin';
+import { Box, Flex, Typography } from '@strapi/design-system';
+import cloudIconBackgroundImage from './assets/strapi-cloud-background.png';
+import cloudIcon from './assets/strapi-cloud-icon.svg';
+import cloudFlagsImage from './assets/strapi-cloud-flags.svg';
+
+const BlockLink = styled.a`
+  text-decoration: none;
+`;
+
+const CloudCustomWrapper = styled(Box)`
+  background-image: url(${({ backgroundImage }) => backgroundImage});
+`;
+
+const CloudIconWrapper = styled(Flex)`
+  background: rgba(255, 255, 255, 0.3);
+`;
+
+const CloudBox = () => {
+  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+
+  return (
+    <BlockLink
+      href="https://cloud.strapi.io"
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+      onClick={() => {
+        trackUsage('didClickOnTryStrapiCloudSection');
+      }}
+    >
+      <Flex
+        shadow="tableShadow"
+        hasRadius
+        padding={6}
+        background="neutral0"
+        position="relative"
+        gap={6}
+      >
+        <CloudCustomWrapper backgroundImage={cloudIconBackgroundImage} hasRadius padding={3}>
+          <CloudIconWrapper
+            width={pxToRem(32)}
+            height={pxToRem(32)}
+            justifyContent="center"
+            hasRadius
+            alignItems="center"
+          >
+            <img
+              src={cloudIcon}
+              alt={formatMessage({
+                id: 'app.components.BlockLink.cloud',
+                defaultMessage: 'Strapi Cloud',
+              })}
+            />
+          </CloudIconWrapper>
+        </CloudCustomWrapper>
+        <Flex gap={1} direction="column" alignItems="start">
+          <Flex>
+            <Typography fontWeight="semiBold" variant="pi">
+              {formatMessage({
+                id: 'app.components.BlockLink.cloud',
+                defaultMessage: 'Strapi Cloud',
+              })}
+            </Typography>
+          </Flex>
+          <Typography textColor="neutral600">
+            {formatMessage({
+              id: 'app.components.BlockLink.cloud.content',
+              defaultMessage:
+                'A fully composable, and collaborative platform to boost your team velocity.',
+            })}
+          </Typography>
+          <Box src={cloudFlagsImage} position="absolute" top={0} right={0} as="img" />
+        </Flex>
+      </Flex>
+    </BlockLink>
+  );
+};
+
+export default CloudBox;

package/admin/src/pages/HomePage/ContentBlocks.js

@@ -4,6 +4,7 @@ import { useIntl } from 'react-intl';
 import { ContentBox, useTracking } from '@strapi/helper-plugin';
 import { Stack } from '@strapi/design-system';
 import { InformationSquare, CodeSquare, PlaySquare, FeatherSquare } from '@strapi/icons';
+import CloudBox from './CloudBox';
 
 const BlockLink = styled.a`
   text-decoration: none;
@@ -19,6 +20,7 @@ const ContentBlocks = () => {
 
   return (
     <Stack spacing={5}>
+      <CloudBox />
       <BlockLink
         href="https://strapi.io/resource-center"
         target="_blank"

package/admin/src/pages/HomePage/assets/strapi-cloud-flags.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="160" fill="none" viewBox="29.41 44 149.09 50.35"><path stroke="#EAEAEF" d="M30.5 44.5c37 27 47.5 38 147.499 32"/><g filter="url(#a)"><path fill="#F29D41" d="m129.467 94.085 8.148-14.142a.598.598 0 0 0-.403-.887 75.099 75.099 0 0 0-3.045-.536c-1.875-.274-2.936-.44-4.837-.505-1.838-.064-2.873.01-4.698.153a64.05 64.05 0 0 0-2.692.293.597.597 0 0 0-.462.851l7.042 14.737c.186.388.732.41.947.036Z"/></g><g filter="url(#b)"><path fill="#F29D41" d="m46.99 75.52 13.813-8.697a.597.597 0 0 0 .058-.971 75.191 75.191 0 0 0-2.442-1.897c-1.53-1.119-2.39-1.761-4.04-2.707-1.595-.915-2.545-1.334-4.226-2.06a64.09 64.09 0 0 0-2.516-.999.597.597 0 0 0-.806.537l-.66 16.319a.535.535 0 0 0 .82.474Z"/></g><g filter="url(#c)"><path fill="#5CB176" d="m29.41 63.51 2.102-16.186a.597.597 0 0 1 .858-.46c.748.371 1.905.954 2.745 1.42 1.657.92 2.602 1.433 4.152 2.534 1.5 1.064 2.278 1.75 3.642 2.972a64.026 64.026 0 0 1 1.962 1.865c.291.286.214.771-.149.957l-14.538 7.443a.535.535 0 0 1-.774-.545Z"/></g><mask id="d" width="17" height="19" x="29" y="46" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#5CB176" d="m29.412 63.51 2.101-16.186a.597.597 0 0 1 .858-.46c.749.371 1.905.954 2.746 1.42 1.657.92 2.601 1.433 4.152 2.534 1.5 1.064 2.278 1.75 3.642 2.972a64.148 64.148 0 0 1 1.962 1.865c.29.286.214.771-.15.957l-14.537 7.443a.535.535 0 0 1-.774-.545Z"/></mask><g stroke="#fff" stroke-linecap="round" stroke-width=".661" mask="url(#d)"><path d="M39.755 51.218c-1.05 1.558-4.606 4.788-10.44 5.247M36.415 47.816c-1.05 1.558-4.606 4.789-10.44 5.247M42.97 53.97c-1.457 1.908-6.341 5.902-14.216 6.619M42.15 58.499c-1.645 1.748-5.29 4.033-13.197 3.939"/></g><g filter="url(#e)"><path fill="#7B79FF" d="m169.813 92.983 5.927-15.208a.598.598 0 0 0-.531-.815 75.213 75.213 0 0 0-3.091-.072c-1.895.01-2.969.007-4.859.228-1.826.214-2.838.442-4.621.859-.815.19-1.893.488-2.617.694a.596.596 0 0 0-.328.91l9.178 13.51a.536.536 0 0 0 .942-.106Z"/></g><g filter="url(#f)"><path fill="#7B79FF" d="m87.001 90.853-4.466-15.699a.597.597 0 0 1 .606-.761c.835.045 2.127.123 3.084.22 1.886.19 2.956.287 4.816.685 1.797.385 2.784.709 4.519 1.291.794.267 1.839.665 2.54.938.38.148.501.624.24.938L87.929 91.048a.535.535 0 0 1-.927-.195Z"/></g><g filter="url(#g)"><path fill="#EE5E52" d="m66.153 85.122 12.355-10.665a.597.597 0 0 0-.087-.97 75.353 75.353 0 0 0-2.698-1.51c-1.68-.877-2.627-1.383-4.4-2.072-1.714-.666-2.716-.938-4.486-1.404a64.083 64.083 0 0 0-2.638-.611.597.597 0 0 0-.716.651l1.788 16.234a.535.535 0 0 0 .882.347Z"/></g><circle cx="70.793" cy="74.511" r=".992" fill="#fff" transform="rotate(8.553 70.793 74.51)"/><circle cx="65.574" cy="78.63" r=".992" fill="#fff" transform="rotate(8.553 65.574 78.63)"/><circle cx="65.408" cy="74.519" r=".992" fill="#fff" transform="rotate(8.553 65.408 74.519)"/><circle cx="67.834" cy="81.943" r=".992" fill="#fff" transform="rotate(8.553 67.834 81.943)"/><circle cx="67.259" cy="69.875" r=".992" fill="#fff" transform="rotate(8.553 67.259 69.875)"/><circle cx="74.691" cy="72.834" r=".992" fill="#fff" transform="rotate(8.553 74.69 72.834)"/><circle cx="71.171" cy="78.968" r=".992" fill="#fff" transform="rotate(8.553 71.171 78.968)"/><g filter="url(#h)"><path fill="#EE5E52" d="m149.911 93.824 6.521-14.963a.598.598 0 0 0-.499-.836 75.255 75.255 0 0 0-3.086-.193c-1.894-.064-2.967-.11-4.863.037-1.833.141-2.854.33-4.651.676-.823.158-1.912.414-2.643.59a.596.596 0 0 0-.364.898l8.64 13.86a.535.535 0 0 0 .945-.07Z"/></g><circle cx="149.5" cy="82.25" r=".992" fill="#fff" transform="rotate(-17.098 149.5 82.25)"/><circle cx="146.579" cy="88.222" r=".992" fill="#fff" transform="rotate(-17.098 146.579 88.222)"/><circle cx="144.65" cy="84.588" r=".992" fill="#fff" transform="rotate(-17.098 144.65 84.588)"/><circle cx="150.049" cy="90.231" r=".992" fill="#fff" transform="rotate(-17.098 150.049 90.231)"/><circle cx="144.306" cy="79.6" r=".992" fill="#fff" transform="rotate(-17.098 144.306 79.6)"/><circle cx="152.287" cy="79.051" r=".992" fill="#fff" transform="rotate(-17.098 152.287 79.05)"/><circle cx="151.77" cy="86.103" r=".992" fill="#fff" transform="rotate(-17.098 151.77 86.103)"/><g filter="url(#i)"><path fill="#5CB176" d="m109.171 93.4 8.86-13.707a.598.598 0 0 0-.357-.906c-.811-.2-2.07-.503-3.013-.69-1.859-.37-2.911-.59-4.806-.753-1.831-.157-2.869-.136-4.699-.086-.837.023-1.953.098-2.703.154a.597.597 0 0 0-.505.827l6.279 15.077c.166.398.71.447.944.084Z"/></g><mask id="j" width="18" height="17" x="101" y="77" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#5CB176" d="m109.17 93.4 8.86-13.707a.598.598 0 0 0-.357-.905c-.811-.201-2.07-.504-3.013-.692-1.859-.37-2.911-.589-4.806-.751-1.831-.158-2.869-.137-4.699-.087-.837.023-1.953.099-2.703.154a.597.597 0 0 0-.505.827l6.279 15.077c.166.398.71.447.944.085Z"/></mask><g stroke="#fff" stroke-linecap="round" stroke-width=".661" mask="url(#j)"><path d="M109.225 77.335c-.207 1.867.418 6.632 4.573 10.753M113.972 76.9c-.207 1.867.418 6.631 4.573 10.753M104.992 77.357c-.121 2.397 1.023 8.602 6.568 14.24M102.69 81.343c.125 2.397 1.429 6.497 7.522 11.537"/></g><defs><filter id="a" width="21.565" height="21.649" x="118.775" y="76.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".661"/><feGaussianBlur stdDeviation="1.322"/><feColorMatrix values="0 0 0 0 0.129412 0 0 0 0 0.129412 0 0 0 0 0.203922 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_12_39"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_12_39" result="shape"/></filter><filter id="b" width="20.201" height="22.741" x="43.526" y="56.167" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".661"/><feGaussianBlur stdDeviation="1.322"/><feColorMatrix values="0 0 0 0 0.129412 0 0 0 0 0.129412 0 0 0 0 0.203922 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_12_39"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_12_39" result="shape"/></filter><filter id="c" width="20.932" height="22.602" x="26.761" y="44.818" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".661"/><feGaussianBlur stdDeviation="1.322"/><feColorMatrix values="0 0 0 0 0.129412 0 0 0 0 0.129412 0 0 0 0 0.203922 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_12_39"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_12_39" result="shape"/></filter><filter id="e" width="21.482" height="21.724" x="156.944" y="74.904" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".661"/><feGaussianBlur stdDeviation="1.322"/><feColorMatrix values="0 0 0 0 0.129412 0 0 0 0 0.129412 0 0 0 0 0.203922 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_12_39"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_12_39" result="shape"/></filter><filter id="f" width="21.256" height="22.139" x="79.868" y="72.409" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".661"/><feGaussianBlur stdDeviation="1.322"/><feColorMatrix values="0 0 0 0 0.129412 0 0 0 0 0.129412 0 0 0 0 0.203922 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_12_39"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_12_39" result="shape"/></filter><filter id="g" width="20.526" height="22.664" x="60.835" y="65.893" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".661"/><feGaussianBlur stdDeviation="1.322"/><feColorMatrix values="0 0 0 0 0.129412 0 0 0 0 0.129412 0 0 0 0 0.203922 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_12_39"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_12_39" result="shape"/></filter><filter id="h" width="21.537" height="21.662" x="137.59" y="75.788" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".661"/><feGaussianBlur stdDeviation="1.322"/><feColorMatrix values="0 0 0 0 0.129412 0 0 0 0 0.129412 0 0 0 0 0.203922 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_12_39"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_12_39" result="shape"/></filter><filter id="i" width="21.515" height="21.712" x="99.257" y="75.238" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".661"/><feGaussianBlur stdDeviation="1.322"/><feColorMatrix values="0 0 0 0 0.129412 0 0 0 0 0.129412 0 0 0 0 0.203922 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_12_39"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_12_39" result="shape"/></filter></defs></svg>

package/admin/src/pages/HomePage/assets/strapi-cloud-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="15" fill="none"><path fill="#fff" fill-rule="evenodd" d="M4.39453 13.8298C1.93859 13.6455 0 11.468 0 8.80884 0 6.0289 2.11876 3.7753 4.73238 3.7753c.46775 0 .91964.07218 1.34638.20664C7.21234 1.62909 9.66469 0 12.5073 0c2.5102 0 4.7161 1.27036 5.9782 3.18766a4.54297 4.54297 0 0 1 .6132-.04144C21.8056 3.14622 24 5.54066 24 8.49436c0 2.89194-2.1036 5.24784-4.7323 5.34504v.0031l-1.8948.278a38.18054 38.18054 0 0 1-11.08354 0l-1.89483-.278v-.0127Z" clip-rule="evenodd"/></svg>

package/admin/src/pages/SettingsPage/{pages/ApiTokens/EditView/components → components/Tokens}/FormHead/index.js

@@ -1,34 +1,41 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { Link } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
+import { Link } from '@strapi/helper-plugin';
 import { ArrowLeft, Check } from '@strapi/icons';
 import { Button, HeaderLayout, Stack } from '@strapi/design-system';
 import Regenerate from '../Regenerate';
 
-const FormHead = ({ apiToken, setApiToken, canEditInputs, canRegenerate, isSubmitting }) => {
+const FormHead = ({
+  title,
+  token,
+  setToken,
+  canEditInputs,
+  canRegenerate,
+  isSubmitting,
+  backUrl,
+  regenerateUrl,
+}) => {
   const { formatMessage } = useIntl();
   const handleRegenerate = (newKey) => {
-    setApiToken({
-      ...apiToken,
+    setToken({
+      ...token,
       accessKey: newKey,
     });
   };
 
   return (
     <HeaderLayout
-      title={
-        apiToken?.name ||
-        formatMessage({
-          id: 'Settings.apiTokens.createPage.title',
-          defaultMessage: 'Create API Token',
-        })
-      }
+      title={token?.name || formatMessage(title)}
       primaryAction={
         canEditInputs ? (
           <Stack horizontal spacing={2}>
-            {canRegenerate && apiToken?.id && (
-              <Regenerate onRegenerate={handleRegenerate} idToRegenerate={apiToken?.id} />
+            {canRegenerate && token?.id && (
+              <Regenerate
+                backUrl={regenerateUrl}
+                onRegenerate={handleRegenerate}
+                idToRegenerate={token?.id}
+              />
             )}
             <Button
               disabled={isSubmitting}
@@ -45,13 +52,17 @@ const FormHead = ({ apiToken, setApiToken, canEditInputs, canRegenerate, isSubmi
           </Stack>
         ) : (
           canRegenerate &&
-          apiToken?.id && (
-            <Regenerate onRegenerate={handleRegenerate} idToRegenerate={apiToken?.id} />
+          token?.id && (
+            <Regenerate
+              onRegenerate={handleRegenerate}
+              idToRegenerate={token?.id}
+              backUrl={regenerateUrl}
+            />
           )
         )
       }
       navigationAction={
-        <Link startIcon={<ArrowLeft />} to="/settings/api-tokens">
+        <Link startIcon={<ArrowLeft />} to={backUrl}>
           {formatMessage({
             id: 'global.back',
             defaultMessage: 'Back',
@@ -63,7 +74,7 @@ const FormHead = ({ apiToken, setApiToken, canEditInputs, canRegenerate, isSubmi
 };
 
 FormHead.propTypes = {
-  apiToken: PropTypes.shape({
+  token: PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     type: PropTypes.string,
     lifespan: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -75,12 +86,18 @@ FormHead.propTypes = {
   }),
   canEditInputs: PropTypes.bool.isRequired,
   canRegenerate: PropTypes.bool.isRequired,
-  setApiToken: PropTypes.func.isRequired,
+  setToken: PropTypes.func.isRequired,
   isSubmitting: PropTypes.bool.isRequired,
+  backUrl: PropTypes.string.isRequired,
+  title: PropTypes.shape({
+    id: PropTypes.string,
+    label: PropTypes.string,
+  }).isRequired,
+  regenerateUrl: PropTypes.string.isRequired,
 };
 
 FormHead.defaultProps = {
-  apiToken: undefined,
+  token: undefined,
 };
 
 export default FormHead;

package/admin/src/pages/SettingsPage/components/Tokens/FormiTokenContainer/LifeSpanInput.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { usePersistentState } from '@strapi/helper-plugin';
+import { Select, Option, Typography } from '@strapi/design-system';
+import { getDateOfExpiration } from '../../../pages/ApiTokens/EditView/utils';
+
+const LifeSpanInput = ({ token, errors, values, onChange, disabled }) => {
+  const { formatMessage } = useIntl();
+  const [lang] = usePersistentState('strapi-admin-language', 'en');
+
+  return (
+    <>
+      <Select
+        name="lifespan"
+        label={formatMessage({
+          id: 'Settings.apiTokens.form.duration',
+          defaultMessage: 'Token duration',
+        })}
+        value={values.lifespan !== null ? values.lifespan : '0'}
+        error={
+          errors.lifespan
+            ? formatMessage(
+                errors.lifespan?.id
+                  ? errors.lifespan
+                  : { id: errors.lifespan, defaultMessage: errors.lifespan }
+              )
+            : null
+        }
+        onChange={(value) => {
+          onChange({ target: { name: 'lifespan', value } });
+        }}
+        required
+        disabled={disabled}
+        placeholder="Select"
+      >
+        <Option value="604800000">
+          {formatMessage({
+            id: 'Settings.apiTokens.duration.7-days',
+            defaultMessage: '7 days',
+          })}
+        </Option>
+        <Option value="2592000000">
+          {formatMessage({
+            id: 'Settings.apiTokens.duration.30-days',
+            defaultMessage: '30 days',
+          })}
+        </Option>
+        <Option value="7776000000">
+          {formatMessage({
+            id: 'Settings.apiTokens.duration.90-days',
+            defaultMessage: '90 days',
+          })}
+        </Option>
+        <Option value="0">
+          {formatMessage({
+            id: 'Settings.apiTokens.duration.unlimited',
+            defaultMessage: 'Unlimited',
+          })}
+        </Option>
+      </Select>
+      <Typography variant="pi" textColor="neutral600">
+        {disabled &&
+          `${formatMessage({
+            id: 'Settings.apiTokens.duration.expiration-date',
+            defaultMessage: 'Expiration date',
+          })}: ${getDateOfExpiration(token?.createdAt, parseInt(values.lifespan, 10, lang))}`}
+      </Typography>
+    </>
+  );
+};
+
+LifeSpanInput.propTypes = {
+  errors: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  values: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  disabled: PropTypes.bool.isRequired,
+  token: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.string,
+    lifespan: PropTypes.string,
+    name: PropTypes.string,
+    accessKey: PropTypes.string,
+    permissions: PropTypes.array,
+    description: PropTypes.string,
+    createdAt: PropTypes.string,
+  }),
+};
+
+LifeSpanInput.defaultProps = {
+  errors: {},
+  token: {},
+};
+
+export default LifeSpanInput;

package/admin/src/pages/SettingsPage/components/Tokens/LifeSpanInput/index.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Select, Option, Typography } from '@strapi/design-system';
+import { getDateOfExpiration } from '../../../pages/ApiTokens/EditView/utils';
+
+const LifeSpanInput = ({ token, errors, values, onChange, isCreating }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <>
+      <Select
+        name="lifespan"
+        label={formatMessage({
+          id: 'Settings.apiTokens.form.duration',
+          defaultMessage: 'Token duration',
+        })}
+        value={values.lifespan !== null ? values.lifespan : '0'}
+        error={
+          errors.lifespan
+            ? formatMessage(
+                errors.lifespan?.id
+                  ? errors.lifespan
+                  : { id: errors.lifespan, defaultMessage: errors.lifespan }
+              )
+            : null
+        }
+        onChange={(value) => {
+          onChange({ target: { name: 'lifespan', value } });
+        }}
+        required
+        disabled={!isCreating}
+        placeholder="Select"
+      >
+        <Option value="604800000">
+          {formatMessage({
+            id: 'Settings.tokens.duration.7-days',
+            defaultMessage: '7 days',
+          })}
+        </Option>
+        <Option value="2592000000">
+          {formatMessage({
+            id: 'Settings.tokens.duration.30-days',
+            defaultMessage: '30 days',
+          })}
+        </Option>
+        <Option value="7776000000">
+          {formatMessage({
+            id: 'Settings.tokens.duration.90-days',
+            defaultMessage: '90 days',
+          })}
+        </Option>
+        <Option value="0">
+          {formatMessage({
+            id: 'Settings.tokens.duration.unlimited',
+            defaultMessage: 'Unlimited',
+          })}
+        </Option>
+      </Select>
+      <Typography variant="pi" textColor="neutral600">
+        {!isCreating &&
+          `${formatMessage({
+            id: 'Settings.tokens.duration.expiration-date',
+            defaultMessage: 'Expiration date',
+          })}: ${getDateOfExpiration(token?.createdAt, parseInt(values.lifespan, 10))}`}
+      </Typography>
+    </>
+  );
+};
+
+LifeSpanInput.propTypes = {
+  errors: PropTypes.shape({
+    lifespan: PropTypes.string,
+  }),
+  onChange: PropTypes.func.isRequired,
+  values: PropTypes.shape({
+    lifespan: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  }).isRequired,
+  isCreating: PropTypes.bool.isRequired,
+  token: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.string,
+    lifespan: PropTypes.string,
+    name: PropTypes.string,
+    accessKey: PropTypes.string,
+    permissions: PropTypes.array,
+    description: PropTypes.string,
+    createdAt: PropTypes.string,
+  }),
+};
+
+LifeSpanInput.defaultProps = {
+  errors: {},
+  token: {},
+};
+
+export default LifeSpanInput;

package/admin/src/pages/SettingsPage/components/Tokens/Regenerate/index.js

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Button } from '@strapi/design-system';
+import { Refresh } from '@strapi/icons';
+import { ConfirmDialog } from '@strapi/helper-plugin';
+import { useRegenerate } from '../../../../../hooks';
+
+export const Regenerate = ({ onRegenerate, idToRegenerate, backUrl }) => {
+  const { formatMessage } = useIntl();
+  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+  const { regenerateData, isLoadingConfirmation } = useRegenerate(
+    backUrl,
+    idToRegenerate,
+    onRegenerate
+  );
+  const handleConfirmRegeneration = async () => {
+    regenerateData();
+    setShowConfirmDialog(false);
+  };
+
+  return (
+    <>
+      <Button
+        startIcon={<Refresh />}
+        type="button"
+        size="S"
+        variant="tertiary"
+        onClick={() => setShowConfirmDialog(true)}
+        name="regenerate"
+      >
+        {formatMessage({
+          id: 'Settings.apiTokens.regenerate',
+          defaultMessage: 'Regenerate',
+        })}
+      </Button>
+
+      <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.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  backUrl: PropTypes.string.isRequired,
+};
+
+export default Regenerate;

package/admin/src/pages/SettingsPage/{pages/ApiTokens/ListView/DynamicTable → components/Tokens/Table}/DeleteButton/index.js

@@ -1,20 +1,27 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Trash } from '@strapi/icons';
 import { IconButton, Box } from '@strapi/design-system';
-import { stopPropagation, useTracking } from '@strapi/helper-plugin';
+import { useTracking, ConfirmDialog } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 
-const DeleteButton = ({ tokenName, onClickDelete }) => {
+const DeleteButton = ({ tokenName, onClickDelete, tokenType }) => {
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
+  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+  const handleClickDelete = () => {
+    setShowConfirmDialog(false);
+    trackUsage('willDeleteToken', {
+      tokenType,
+    });
+    onClickDelete();
+  };
 
   return (
-    <Box paddingLeft={1} {...stopPropagation}>
+    <Box paddingLeft={1} onClick={(e) => e.stopPropagation()}>
       <IconButton
         onClick={() => {
-          trackUsage('willDeleteToken');
-          onClickDelete();
+          setShowConfirmDialog(true);
         }}
         label={formatMessage(
           {
@@ -27,6 +34,11 @@ const DeleteButton = ({ tokenName, onClickDelete }) => {
         noBorder
         icon={<Trash />}
       />
+      <ConfirmDialog
+        onToggleDialog={() => setShowConfirmDialog(false)}
+        onConfirm={handleClickDelete}
+        isOpen={showConfirmDialog}
+      />
     </Box>
   );
 };
@@ -34,6 +46,7 @@ const DeleteButton = ({ tokenName, onClickDelete }) => {
 DeleteButton.propTypes = {
   tokenName: PropTypes.string.isRequired,
   onClickDelete: PropTypes.func.isRequired,
+  tokenType: PropTypes.string.isRequired,
 };
 
 export default DeleteButton;