Merge branch 'features/data-transfer' into data-transfer/tracking-api-token-transfer-token and fix conflicts

packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/Table/DeleteButton/index.js

@@ -1,22 +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, 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', {
-            tokenType,
-          });
-          onClickDelete();
+          setShowConfirmDialog(true);
         }}
         label={formatMessage(
           {
@@ -29,6 +34,11 @@ const DeleteButton = ({ tokenName, onClickDelete, tokenType }) => {
         noBorder
         icon={<Trash />}
       />
+      <ConfirmDialog
+        onToggleDialog={() => setShowConfirmDialog(false)}
+        onConfirm={handleClickDelete}
+        isOpen={showConfirmDialog}
+      />
     </Box>
   );
 };

packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/Table/DeleteButton/tests/DeleteButton.test.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { ThemeProvider, lightTheme } from '@strapi/design-system';
+import { act, fireEvent, render } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { NotificationsProvider } from '@strapi/helper-plugin';
+
+import DeleteButton from '../index';
+
+jest.mock('@strapi/helper-plugin', () => ({
+  ...jest.requireActual('@strapi/helper-plugin'),
+  useTracking: jest.fn(() => ({ trackUsage: jest.fn() })),
+}));
+
+function ComponentToTest(props) {
+  return (
+    <IntlProvider locale="en" messages={{}}>
+      <ThemeProvider theme={lightTheme}>
+        <NotificationsProvider toggleNotification={() => {}}>
+          <DeleteButton
+            tokenType="api-token"
+            tokenName="test"
+            onClickDelete={() => {}}
+            {...props}
+          />
+        </NotificationsProvider>
+      </ThemeProvider>
+    </IntlProvider>
+  );
+}
+
+const setup = (props = { onClickDelete: jest.fn() }) => {
+  return render(<ComponentToTest {...props} />);
+};
+
+describe('DeleteButton', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  it('show confirmation delete dialog when the delete button is clicked', () => {
+    const { queryByText, getByRole } = setup();
+    fireEvent.click(getByRole('button', { name: 'Delete test' }));
+
+    expect(queryByText('Are you sure you want to delete this?')).toBeInTheDocument();
+  });
+
+  it('closes the modal when you click on Cancel button', () => {
+    const { queryByText, getByText, getByRole } = setup();
+    fireEvent.click(getByRole('button', { name: 'Delete test' }));
+
+    act(() => {
+      fireEvent.click(getByText('Cancel'));
+    });
+
+    expect(queryByText('Are you sure you want to delete this?')).not.toBeInTheDocument();
+  });
+
+  it('trigger the onClickDelete function when you click on the Confirm button', () => {
+    const spy = jest.fn();
+    const { getByRole, getByText } = setup({ onClickDelete: spy });
+
+    fireEvent.click(getByRole('button', { name: 'Delete test' }));
+    fireEvent.click(getByText('Confirm'));
+
+    expect(spy).toBeCalledTimes(1);
+  });
+});

packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/Table/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import { Tbody, Tr, Td, Typography, Flex } from '@strapi/design-system';
+import { Typography, Flex, Tbody, Tr, Td } from '@strapi/design-system';
 import {
   RelativeTime,
   onRowClick,

packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/tests/index.test.js

@@ -1010,9 +1010,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                             </span>
                           </a>
                           <div
-                            aria-hidden="true"
                             class="c1 c40"
-                            role="button"
                           >
                             <span>
                               <button

packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/components/FormTransferTokenContainer/index.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { Box, Grid, GridItem, Stack, Typography } from '@strapi/design-system';
-
 import LifeSpanInput from '../../../../../components/Tokens/LifeSpanInput';
 import TokenName from '../../../../../components/Tokens/TokenName';
 import TokenDescription from '../../../../../components/Tokens/TokenDescription';

packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/ListView/index.js

@@ -16,7 +16,7 @@ import {
   LinkButton,
   useFetchClient,
 } from '@strapi/helper-plugin';
-import { Button, Main, HeaderLayout, ContentLayout } from '@strapi/design-system';
+import { HeaderLayout, ContentLayout, Main, Button } from '@strapi/design-system';
 import { Plus } from '@strapi/icons';
 
 import adminPermissions from '../../../../../permissions';

packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/ListView/tests/index.test.js

@@ -1010,9 +1010,7 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                             </span>
                           </a>
                           <div
-                            aria-hidden="true"
                             class="c1 c40"
-                            role="button"
                           >
                             <span>
                               <button

packages/core/data-transfer/src/errors/constants.ts

@@ -5,4 +5,4 @@ export const SeverityKind: Record<string, ErrorDiagnosticSeverity> = {
   ERROR: 'error',
   SILLY: 'silly',
 } as const;
-export type Severity = typeof SeverityKind[keyof typeof SeverityKind];
+export type Severity = (typeof SeverityKind)[keyof typeof SeverityKind];

packages/core/data-transfer/src/strapi/remote/handlers.ts

@@ -13,7 +13,7 @@ import { ProviderTransferError, ProviderInitializationError } from '../../errors
 import { TRANSFER_METHODS } from './constants';
 import { createFlow, DEFAULT_TRANSFER_FLOW } from './flows';
 
-type TransferMethod = typeof TRANSFER_METHODS[number];
+type TransferMethod = (typeof TRANSFER_METHODS)[number];
 
 interface ITransferState {
   transfer?: {