Merge branch 'features/data-transfer' into data-transfer/progress

packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/FormiTokenContainer/LifeSpanInput.js

@@ -2,8 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { usePersistentState } from '@strapi/helper-plugin';
-import { Select, Option } from '@strapi/design-system/Select';
+import { Select, Option, Typography } from '@strapi/design-system';
-import { Typography } from '@strapi/design-system/Typography';
 import { getDateOfExpiration } from '../../../pages/ApiTokens/EditView/utils';
 
 const LifeSpanInput = ({ token, errors, values, onChange, disabled }) => {

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

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Select, Option } from '@strapi/design-system/Select';
+import { Select, Option, Typography } from '@strapi/design-system';
-import { Typography } from '@strapi/design-system/Typography';
 import { getDateOfExpiration } from '../../../pages/ApiTokens/EditView/utils';
 
 const LifeSpanInput = ({ token, errors, values, onChange, isCreating }) => {

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

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Button } from '@strapi/design-system/Button';
+import { Button } from '@strapi/design-system';
-import Refresh from '@strapi/icons/Refresh';
+import { Refresh } from '@strapi/icons';
 import { ConfirmDialog } from '@strapi/helper-plugin';
 import { useRegenerate } from '../../../../../hooks';
 

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

@@ -1,20 +1,25 @@
-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 { formatMessage } = useIntl();
   const { trackUsage } = useTracking(); // TODO: Track different types of tokens
-
+  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
-  return (
+  const handleClickDelete = () => {
-    <Box paddingLeft={1} {...stopPropagation}>
+    setShowConfirmDialog(false);
-      <IconButton
-        onClick={() => {
     trackUsage('willDeleteToken');
     onClickDelete();
+  };
+
+  return (
+    <Box paddingLeft={1} onClick={(e) => e.stopPropagation()}>
+      <IconButton
+        onClick={() => {
+          setShowConfirmDialog(true);
         }}
         label={formatMessage(
           {
@@ -27,6 +32,11 @@ const DeleteButton = ({ tokenName, onClickDelete }) => {
         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,61 @@
+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 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,9 +1,7 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import { Typography } from '@strapi/design-system/Typography';
+import { Typography, Flex, Tbody, Tr, Td } from '@strapi/design-system';
-import { Tbody, Tr, Td } from '@strapi/design-system/Table';
-import { Flex } from '@strapi/design-system/Flex';
 import {
   RelativeTime,
   onRowClick,

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Textarea } from '@strapi/design-system/Textarea';
+import { Textarea } from '@strapi/design-system';
 
 const TokenDescription = ({ errors, values, onChange, canEditInputs }) => {
   const { formatMessage } = useIntl();

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { TextInput } from '@strapi/design-system/TextInput';
+import { TextInput } from '@strapi/design-system';
 
 const TokenName = ({ errors, values, onChange, canEditInputs }) => {
   const { formatMessage } = useIntl();

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-import { Select, Option } from '@strapi/design-system/Select';
+import { Select, Option } from '@strapi/design-system';
 
 const TokenTypeSelect = ({ errors, values, onChange, canEditInputs, options, label }) => {
   const { formatMessage } = useIntl();

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

@@ -137,6 +137,29 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         color: #666687;
       }
 
+      .c32 {
+        font-size: 0.875rem;
+        line-height: 1.43;
+        font-weight: 600;
+        color: #32324d;
+      }
+
+      .c34 {
+        font-size: 0.875rem;
+        line-height: 1.43;
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: #32324d;
+      }
+
+      .c35 {
+        font-size: 0.875rem;
+        line-height: 1.43;
+        color: #32324d;
+      }
+
       .c2 {
         background: #f6f6f9;
         padding-top: 40px;
@@ -165,7 +188,11 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         padding-left: 24px;
       }
 
-      .c42 {
+      .c33 {
+        max-width: 15.625rem;
+      }
+
+      .c40 {
         padding-left: 4px;
       }
 
@@ -201,6 +228,24 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         flex-direction: row;
       }
 
+      .c36 {
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-box-pack: end;
+        -webkit-justify-content: end;
+        -ms-flex-pack: end;
+        justify-content: end;
+      }
+
       .c27 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -271,7 +316,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         width: 1px;
       }
 
-      .c43 .c1 {
+      .c41 .c1 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -282,23 +327,23 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         align-items: center;
       }
 
-      .c43 .c5 {
+      .c41 .c5 {
         color: #ffffff;
       }
 
-      .c43[aria-disabled='true'] .c5 {
+      .c41[aria-disabled='true'] .c5 {
         color: #666687;
       }
 
-      .c43[aria-disabled='true']:active .c5 {
+      .c41[aria-disabled='true']:active .c5 {
         color: #666687;
       }
 
-      .c43:active .c5 {
+      .c41:active .c5 {
         color: #4945ff;
       }
 
-      .c43 .c5 {
+      .c41 .c5 {
         color: #271fe0;
       }
 
@@ -382,6 +427,10 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         overflow-x: auto;
       }
 
+      .c31 tr:last-of-type {
+        border-bottom: none;
+      }
+
       .c22 {
         border-bottom: 1px solid #eaeaef;
       }
@@ -431,10 +480,6 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         padding-right: 8px;
       }
 
-      .c35 {
-        max-width: 15.625rem;
-      }
-
       .c12 {
         font-size: 0.75rem;
         line-height: 1.33;
@@ -442,53 +487,12 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         color: #32324d;
       }
 
-      .c34 {
+      .c39 {
-        font-size: 0.875rem;
-        line-height: 1.43;
-        font-weight: 600;
-        color: #32324d;
-      }
-
-      .c36 {
-        font-size: 0.875rem;
-        line-height: 1.43;
-        display: block;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        color: #32324d;
-      }
-
-      .c37 {
-        font-size: 0.875rem;
-        line-height: 1.43;
-        color: #32324d;
-      }
-
-      .c41 {
         font-size: 0.875rem;
         line-height: 1.43;
         color: #4945ff;
       }
 
-      .c38 {
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-box-pack: end;
-        -webkit-justify-content: end;
-        -ms-flex-pack: end;
-        justify-content: end;
-      }
-
       .c7 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -547,7 +551,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         border: 2px solid #4945ff;
       }
 
-      .c39 {
+      .c37 {
         display: -webkit-inline-box;
         display: -webkit-inline-flex;
         display: -ms-inline-flexbox;
@@ -562,15 +566,15 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         outline: none;
       }
 
-      .c39 svg path {
+      .c37 svg path {
         fill: #4945ff;
       }
 
-      .c39 svg {
+      .c37 svg {
         font-size: 0.625rem;
       }
 
-      .c39:after {
+      .c37:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -585,11 +589,11 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         border: 2px solid transparent;
       }
 
-      .c39:focus-visible {
+      .c37:focus-visible {
         outline: none;
       }
 
-      .c39:focus-visible:after {
+      .c37:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -669,47 +673,12 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         fill: #ffffff;
       }
 
-      .c31 tr:last-of-type {
+      .c38 svg path {
-        border-bottom: none;
-      }
-
-      .c32 {
-        border-bottom: 1px solid #eaeaef;
-      }
-
-      .c32 td,
-      .c32 th {
-        padding: 16px;
-      }
-
-      .c32 td:first-of-type,
-      .c32 th:first-of-type {
-        padding: 0 4px;
-      }
-
-      .c32 th {
-        padding-top: 0;
-        padding-bottom: 0;
-        height: 3.5rem;
-      }
-
-      .c33 {
-        vertical-align: middle;
-        text-align: left;
-        color: #666687;
-        outline-offset: -4px;
-      }
-
-      .c33 input {
-        vertical-align: sub;
-      }
-
-      .c40 svg path {
         fill: #8e8ea9;
       }
 
-      .c40:hover svg path,
+      .c38:hover svg path,
-      .c40:focus svg path {
+      .c38:focus svg path {
         fill: #32324d;
       }
 
@@ -956,41 +925,41 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                   >
                     <tr
                       aria-rowindex="2"
-                      class="c9 c32"
+                      class="c1 c23"
                       style="cursor: pointer;"
                     >
                       <td
                         aria-colindex="1"
-                        class="c9 c33"
+                        class="c1 c24"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <span
-                          class="c11 c34"
+                          class="c5 c32"
                         >
                           My super token
                         </span>
                       </td>
                       <td
                         aria-colindex="2"
-                        class="c9 c35 c33"
+                        class="c1 c33 c24"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <span
-                          class="c11 c36"
+                          class="c5 c34"
                         >
                           This describe my super token
                         </span>
                       </td>
                       <td
                         aria-colindex="3"
-                        class="c9 c33"
+                        class="c1 c24"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <span
-                          class="c11 c37"
+                          class="c5 c35"
                         >
                           <time
                             datetime="2021-11-15T00:00:00.000Z"
@@ -1002,27 +971,27 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                       </td>
                       <td
                         aria-colindex="4"
-                        class="c9 c33"
+                        class="c1 c24"
                         role="gridcell"
                         tabindex="-1"
                       />
                       <td
                         aria-colindex="5"
-                        class="c9 c33"
+                        class="c1 c24"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <div
-                          class="c9 c38"
+                          class="c1 c36"
                         >
                           <a
-                            class="c39 c40"
+                            class="c37 c38"
                             href="/settings/api-tokens/1"
                             tabindex="-1"
                             title="Edit My super token"
                           >
                             <span
-                              class="c11 c41"
+                              class="c11 c39"
                             >
                               <svg
                                 fill="none"
@@ -1041,9 +1010,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                             </span>
                           </a>
                           <div
-                            aria-hidden="true"
+                            class="c1 c40"
-                            class="c1 c42"
-                            role="button"
                           >
                             <span>
                               <button

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

@@ -1,11 +1,7 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
+import { Box, Grid, GridItem, Stack, Typography } from '@strapi/design-system';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Stack } from '@strapi/design-system/Stack';
-
-import { Typography } from '@strapi/design-system/Typography';
 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/EditView/components/LoadingView/index.js

@@ -4,10 +4,8 @@ import {
   LoadingIndicatorPage,
   useFocusWhenNavigate,
 } from '@strapi/helper-plugin';
-import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
+import { HeaderLayout, ContentLayout, Main, Button } from '@strapi/design-system';
-import { Main } from '@strapi/design-system/Main';
+import { Check } from '@strapi/icons';
-import { Button } from '@strapi/design-system/Button';
-import Check from '@strapi/icons/Check';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 

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

@@ -13,9 +13,7 @@ import {
   useRBAC,
   useFetchClient,
 } from '@strapi/helper-plugin';
-import { Main } from '@strapi/design-system/Main';
+import { ContentLayout, Main, Stack } from '@strapi/design-system';
-import { Stack } from '@strapi/design-system/Stack';
-import { ContentLayout } from '@strapi/design-system/Layout';
 import { formatAPIErrors } from '../../../../../utils';
 import { schema } from './utils';
 import LoadingView from './components/LoadingView';

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

@@ -15,10 +15,8 @@ import {
   LinkButton,
   useFetchClient,
 } from '@strapi/helper-plugin';
-import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
+import { HeaderLayout, ContentLayout, Main, Button } from '@strapi/design-system';
-import { Main } from '@strapi/design-system/Main';
+import { Plus } from '@strapi/icons';
-import { Button } from '@strapi/design-system/Button';
-import Plus from '@strapi/icons/Plus';
 
 import adminPermissions from '../../../../../permissions';
 import tableHeaders from './utils/tableHeaders';

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

@@ -116,16 +116,48 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
     });
 
     expect(container.firstChild).toMatchInlineSnapshot(`
-      .c26 {
+      .c6 {
-        border: 0;
+        font-weight: 600;
-        -webkit-clip: rect(0 0 0 0);
+        font-size: 2rem;
-        clip: rect(0 0 0 0);
+        line-height: 1.25;
-        height: 1px;
+        color: #32324d;
-        margin: -1px;
+      }
+
+      .c13 {
+        font-size: 1rem;
+        line-height: 1.5;
+        color: #666687;
+      }
+
+      .c25 {
+        font-weight: 600;
+        font-size: 0.6875rem;
+        line-height: 1.45;
+        text-transform: uppercase;
+        color: #666687;
+      }
+
+      .c32 {
+        font-size: 0.875rem;
+        line-height: 1.43;
+        font-weight: 600;
+        color: #32324d;
+      }
+
+      .c34 {
+        font-size: 0.875rem;
+        line-height: 1.43;
+        display: block;
+        white-space: nowrap;
         overflow: hidden;
-        padding: 0;
+        text-overflow: ellipsis;
-        position: absolute;
+        color: #32324d;
-        width: 1px;
+      }
+
+      .c35 {
+        font-size: 0.875rem;
+        line-height: 1.43;
+        color: #32324d;
       }
 
       .c2 {
@@ -136,35 +168,31 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         padding-left: 56px;
       }
 
-      .c9 {
+      .c14 {
-        padding-right: 8px;
-      }
-
-      .c12 {
         padding-right: 56px;
         padding-left: 56px;
       }
 
-      .c13 {
+      .c15 {
         background: #ffffff;
         border-radius: 4px;
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c15 {
+      .c17 {
         position: relative;
       }
 
-      .c17 {
+      .c19 {
         padding-right: 24px;
         padding-left: 24px;
       }
 
-      .c30 {
+      .c33 {
         max-width: 15.625rem;
       }
 
-      .c37 {
+      .c40 {
         padding-left: 4px;
       }
 
@@ -200,7 +228,7 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         flex-direction: row;
       }
 
-      .c33 {
+      .c36 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -218,58 +246,248 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         justify-content: end;
       }
 
-      .c6 {
+      .c27 {
-        font-weight: 600;
+        display: -webkit-box;
-        font-size: 2rem;
+        display: -webkit-flex;
-        line-height: 1.25;
+        display: -ms-flexbox;
-        color: #32324d;
+        display: flex;
+        cursor: pointer;
+        padding: 8px;
+        border-radius: 4px;
+        background: #ffffff;
+        border: 1px solid #dcdce4;
+        position: relative;
+        outline: none;
+      }
+
+      .c27 svg {
+        height: 12px;
+        width: 12px;
+      }
+
+      .c27 svg > g,
+      .c27 svg path {
+        fill: #ffffff;
+      }
+
+      .c27[aria-disabled='true'] {
+        pointer-events: none;
+      }
+
+      .c27:after {
+        -webkit-transition-property: all;
+        transition-property: all;
+        -webkit-transition-duration: 0.2s;
+        transition-duration: 0.2s;
+        border-radius: 8px;
+        content: '';
+        position: absolute;
+        top: -4px;
+        bottom: -4px;
+        left: -4px;
+        right: -4px;
+        border: 2px solid transparent;
+      }
+
+      .c27:focus-visible {
+        outline: none;
+      }
+
+      .c27:focus-visible:after {
+        border-radius: 8px;
+        content: '';
+        position: absolute;
+        top: -5px;
+        bottom: -5px;
+        left: -5px;
+        right: -5px;
+        border: 2px solid #4945ff;
+      }
+
+      .c29 {
+        border: 0;
+        -webkit-clip: rect(0 0 0 0);
+        clip: rect(0 0 0 0);
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        width: 1px;
+      }
+
+      .c41 .c1 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+      .c41 .c5 {
+        color: #ffffff;
+      }
+
+      .c41[aria-disabled='true'] .c5 {
+        color: #666687;
+      }
+
+      .c41[aria-disabled='true']:active .c5 {
+        color: #666687;
+      }
+
+      .c41:active .c5 {
+        color: #4945ff;
+      }
+
+      .c41 .c5 {
+        color: #271fe0;
+      }
+
+      .c28 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        height: 2rem;
+        width: 2rem;
+        border: none;
+      }
+
+      .c28 svg > g,
+      .c28 svg path {
+        fill: #8e8ea9;
+      }
+
+      .c28:hover svg > g,
+      .c28:hover svg path {
+        fill: #666687;
+      }
+
+      .c28:active svg > g,
+      .c28:active svg path {
+        fill: #a5a5ba;
+      }
+
+      .c28[aria-disabled='true'] {
+        background-color: #eaeaef;
+      }
+
+      .c28[aria-disabled='true'] svg path {
+        fill: #666687;
+      }
+
+      .c0:focus-visible {
+        outline: none;
+      }
+
+      .c16 {
+        overflow: hidden;
+        border: 1px solid #eaeaef;
+      }
+
+      .c21 {
+        width: 100%;
+        white-space: nowrap;
+      }
+
+      .c18:before {
+        background: linear-gradient(90deg,#c0c0cf 0%,rgba(0,0,0,0) 100%);
+        opacity: 0.2;
+        position: absolute;
+        height: 100%;
+        box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
+        width: 8px;
+        left: 0;
+      }
+
+      .c18:after {
+        background: linear-gradient(270deg,#c0c0cf 0%,rgba(0,0,0,0) 100%);
+        opacity: 0.2;
+        position: absolute;
+        height: 100%;
+        box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
+        width: 8px;
+        right: 0;
+        top: 0;
+      }
+
+      .c20 {
+        overflow-x: auto;
+      }
+
+      .c31 tr:last-of-type {
+        border-bottom: none;
+      }
+
+      .c22 {
+        border-bottom: 1px solid #eaeaef;
+      }
+
+      .c23 {
+        border-bottom: 1px solid #eaeaef;
+      }
+
+      .c23 td,
+      .c23 th {
+        padding: 16px;
+      }
+
+      .c23 td:first-of-type,
+      .c23 th:first-of-type {
+        padding: 0 4px;
+      }
+
+      .c23 th {
+        padding-top: 0;
+        padding-bottom: 0;
+        height: 3.5rem;
+      }
+
+      .c24 {
+        vertical-align: middle;
+        text-align: left;
+        color: #666687;
+        outline-offset: -4px;
+      }
+
+      .c24 input {
+        vertical-align: sub;
+      }
+
+      .c26 svg {
+        height: 0.25rem;
+      }
+
+      .c30 {
+        -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+        transform: rotate(180deg);
       }
 
       .c10 {
+        padding-right: 8px;
+      }
+
+      .c12 {
         font-size: 0.75rem;
         line-height: 1.33;
         font-weight: 600;
         color: #32324d;
       }
 
-      .c11 {
+      .c39 {
-        font-size: 1rem;
-        line-height: 1.5;
-        color: #666687;
-      }
-
-      .c23 {
-        font-weight: 600;
-        font-size: 0.6875rem;
-        line-height: 1.45;
-        text-transform: uppercase;
-        color: #666687;
-      }
-
-      .c29 {
-        font-size: 0.875rem;
-        line-height: 1.43;
-        font-weight: 600;
-        color: #32324d;
-      }
-
-      .c31 {
-        font-size: 0.875rem;
-        line-height: 1.43;
-        display: block;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        color: #32324d;
-      }
-
-      .c32 {
-        font-size: 0.875rem;
-        line-height: 1.43;
-        color: #32324d;
-      }
-
-      .c36 {
         font-size: 0.875rem;
         line-height: 1.43;
         color: #4945ff;
@@ -333,157 +551,7 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         border: 2px solid #4945ff;
       }
 
-      .c38 .c1 {
+      .c37 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-      }
-
-      .c38 .c5 {
-        color: #ffffff;
-      }
-
-      .c38[aria-disabled='true'] .c5 {
-        color: #666687;
-      }
-
-      .c38[aria-disabled='true']:active .c5 {
-        color: #666687;
-      }
-
-      .c38:active .c5 {
-        color: #4945ff;
-      }
-
-      .c38 .c5 {
-        color: #271fe0;
-      }
-
-      .c14 {
-        overflow: hidden;
-        border: 1px solid #eaeaef;
-      }
-
-      .c19 {
-        width: 100%;
-        white-space: nowrap;
-      }
-
-      .c16:before {
-        background: linear-gradient(90deg,#c0c0cf 0%,rgba(0,0,0,0) 100%);
-        opacity: 0.2;
-        position: absolute;
-        height: 100%;
-        box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
-        width: 8px;
-        left: 0;
-      }
-
-      .c16:after {
-        background: linear-gradient(270deg,#c0c0cf 0%,rgba(0,0,0,0) 100%);
-        opacity: 0.2;
-        position: absolute;
-        height: 100%;
-        box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
-        width: 8px;
-        right: 0;
-        top: 0;
-      }
-
-      .c18 {
-        overflow-x: auto;
-      }
-
-      .c28 tr:last-of-type {
-        border-bottom: none;
-      }
-
-      .c20 {
-        border-bottom: 1px solid #eaeaef;
-      }
-
-      .c21 {
-        border-bottom: 1px solid #eaeaef;
-      }
-
-      .c21 td,
-      .c21 th {
-        padding: 16px;
-      }
-
-      .c21 td:first-of-type,
-      .c21 th:first-of-type {
-        padding: 0 4px;
-      }
-
-      .c21 th {
-        padding-top: 0;
-        padding-bottom: 0;
-        height: 3.5rem;
-      }
-
-      .c22 {
-        vertical-align: middle;
-        text-align: left;
-        color: #666687;
-        outline-offset: -4px;
-      }
-
-      .c22 input {
-        vertical-align: sub;
-      }
-
-      .c24 svg {
-        height: 0.25rem;
-      }
-
-      .c25 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
-        -ms-flex-pack: center;
-        justify-content: center;
-        height: 2rem;
-        width: 2rem;
-        border: none;
-      }
-
-      .c25 svg > g,
-      .c25 svg path {
-        fill: #8e8ea9;
-      }
-
-      .c25:hover svg > g,
-      .c25:hover svg path {
-        fill: #666687;
-      }
-
-      .c25:active svg > g,
-      .c25:active svg path {
-        fill: #a5a5ba;
-      }
-
-      .c25[aria-disabled='true'] {
-        background-color: #eaeaef;
-      }
-
-      .c25[aria-disabled='true'] svg path {
-        fill: #666687;
-      }
-
-      .c34 {
         display: -webkit-inline-box;
         display: -webkit-inline-flex;
         display: -ms-inline-flexbox;
@@ -498,15 +566,15 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         outline: none;
       }
 
-      .c34 svg path {
+      .c37 svg path {
         fill: #4945ff;
       }
 
-      .c34 svg {
+      .c37 svg {
         font-size: 0.625rem;
       }
 
-      .c34:after {
+      .c37:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -521,11 +589,11 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         border: 2px solid transparent;
       }
 
-      .c34:focus-visible {
+      .c37:focus-visible {
         outline: none;
       }
 
-      .c34:focus-visible:after {
+      .c37:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -549,7 +617,7 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         text-decoration: none;
       }
 
-      .c8 .c1 {
+      .c8 .c9 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -560,7 +628,7 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         align-items: center;
       }
 
-      .c8 .c5 {
+      .c8 .c11 {
         color: #ffffff;
       }
 
@@ -569,7 +637,7 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         background: #eaeaef;
       }
 
-      .c8[aria-disabled='true'] .c5 {
+      .c8[aria-disabled='true'] .c11 {
         color: #666687;
       }
 
@@ -582,7 +650,7 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         background: #eaeaef;
       }
 
-      .c8[aria-disabled='true']:active .c5 {
+      .c8[aria-disabled='true']:active .c11 {
         color: #666687;
       }
 
@@ -605,22 +673,12 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         fill: #ffffff;
       }
 
-      .c27 {
+      .c38 svg path {
-        -webkit-transform: rotate(180deg);
-        -ms-transform: rotate(180deg);
-        transform: rotate(180deg);
-      }
-
-      .c0:focus-visible {
-        outline: none;
-      }
-
-      .c35 svg path {
         fill: #8e8ea9;
       }
 
-      .c35:hover svg path,
+      .c38:hover svg path,
-      .c35:focus svg path {
+      .c38:focus svg path {
         fill: #32324d;
       }
 
@@ -659,7 +717,7 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
               >
                 <div
                   aria-hidden="true"
-                  class="c1 c9"
+                  class="c9 c10"
                 >
                   <svg
                     fill="none"
@@ -675,47 +733,47 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                   </svg>
                 </div>
                 <span
-                  class="c5 c10"
+                  class="c11 c12"
                 >
                   Create new Transfer Token
                 </span>
               </a>
             </div>
             <p
-              class="c5 c11"
+              class="c5 c13"
             >
               "List of generated transfer tokens"
             </p>
           </div>
         </div>
         <div
-          class="c1 c12"
+          class="c1 c14"
-        >
-          <div
-            class="c1 c13 c14"
         >
           <div
             class="c1 c15 c16"
           >
             <div
               class="c1 c17 c18"
+            >
+              <div
+                class="c1 c19 c20"
               >
                 <table
                   aria-colcount="5"
                   aria-rowcount="2"
-                  class="c19"
+                  class="c21"
                   role="grid"
                 >
                   <thead
-                    class="c20"
+                    class="c22"
                   >
                     <tr
                       aria-rowindex="1"
-                      class="c1 c21"
+                      class="c1 c23"
                     >
                       <th
                         aria-colindex="1"
-                        class="c1 c22"
+                        class="c1 c24"
                         role="gridcell"
                         tabindex="0"
                       >
@@ -725,7 +783,7 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                           <span>
                             <span
                               aria-labelledby="0"
-                              class="c5 c23"
+                              class="c5 c25"
                               label="Name"
                               tabindex="-1"
                             >
@@ -733,24 +791,24 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                             </span>
                           </span>
                           <span
-                            class="c24"
+                            class="c26"
                           >
                             <span>
                               <button
                                 aria-disabled="false"
                                 aria-labelledby="1"
-                                class="c7 c25"
+                                class="c27 c28"
                                 tabindex="-1"
                                 type="button"
                               >
                                 <span
-                                  class="c26"
+                                  class="c29"
                                 >
                                   Sort on Name
                                 </span>
                                 <svg
                                   aria-hidden="true"
-                                  class="c27"
+                                  class="c30"
                                   fill="none"
                                   focusable="false"
                                   height="1em"
@@ -772,7 +830,7 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                       </th>
                       <th
                         aria-colindex="2"
-                        class="c1 c22"
+                        class="c1 c24"
                         role="gridcell"
                       >
                         <div
@@ -781,7 +839,7 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                           <span>
                             <span
                               aria-labelledby="2"
-                              class="c5 c23"
+                              class="c5 c25"
                               label="Description"
                               tabindex="-1"
                             >
@@ -789,13 +847,13 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                             </span>
                           </span>
                           <span
-                            class="c24"
+                            class="c26"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="3"
-                        class="c1 c22"
+                        class="c1 c24"
                         role="gridcell"
                       >
                         <div
@@ -804,7 +862,7 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                           <span>
                             <span
                               aria-labelledby="3"
-                              class="c5 c23"
+                              class="c5 c25"
                               label="Created at"
                               tabindex="-1"
                             >
@@ -812,13 +870,13 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                             </span>
                           </span>
                           <span
-                            class="c24"
+                            class="c26"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="4"
-                        class="c1 c22"
+                        class="c1 c24"
                         role="gridcell"
                       >
                         <div
@@ -827,7 +885,7 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                           <span>
                             <span
                               aria-labelledby="4"
-                              class="c5 c23"
+                              class="c5 c25"
                               label="Last used"
                               tabindex="-1"
                             >
@@ -835,13 +893,13 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                             </span>
                           </span>
                           <span
-                            class="c24"
+                            class="c26"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="5"
-                        class="c1 c22"
+                        class="c1 c24"
                         role="gridcell"
                         tabindex="-1"
                       >
@@ -849,59 +907,59 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                           class="c1 c4"
                         >
                           <div
-                            class="c26"
+                            class="c29"
                           >
                             Actions
                           </div>
                           <span
-                            class="c24"
+                            class="c26"
                           />
                         </div>
                       </th>
                     </tr>
                   </thead>
                   <tbody
-                    class="c28"
+                    class="c31"
                     entriestodelete=""
                     headers="[object Object],[object Object],[object Object],[object Object]"
                   >
                     <tr
                       aria-rowindex="2"
-                      class="c1 c21"
+                      class="c1 c23"
                       style="cursor: pointer;"
                     >
                       <td
                         aria-colindex="1"
-                        class="c1 c22"
+                        class="c1 c24"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <span
-                          class="c5 c29"
+                          class="c5 c32"
                         >
                           My super token
                         </span>
                       </td>
                       <td
                         aria-colindex="2"
-                        class="c1 c30 c22"
+                        class="c1 c33 c24"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <span
-                          class="c5 c31"
+                          class="c5 c34"
                         >
                           This describe my super token
                         </span>
                       </td>
                       <td
                         aria-colindex="3"
-                        class="c1 c22"
+                        class="c1 c24"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <span
-                          class="c5 c32"
+                          class="c5 c35"
                         >
                           <time
                             datetime="2021-11-15T00:00:00.000Z"
@@ -913,27 +971,27 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                       </td>
                       <td
                         aria-colindex="4"
-                        class="c1 c22"
+                        class="c1 c24"
                         role="gridcell"
                         tabindex="-1"
                       />
                       <td
                         aria-colindex="5"
-                        class="c1 c22"
+                        class="c1 c24"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <div
-                          class="c1 c33"
+                          class="c1 c36"
                         >
                           <a
-                            class="c34 c35"
+                            class="c37 c38"
                             href="/settings/transfer-tokens/1"
                             tabindex="-1"
                             title="Edit My super token"
                           >
                             <span
-                              class="c5 c36"
+                              class="c11 c39"
                             >
                               <svg
                                 fill="none"
@@ -952,21 +1010,19 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                             </span>
                           </a>
                           <div
-                            aria-hidden="true"
+                            class="c1 c40"
-                            class="c1 c37"
-                            role="button"
                           >
                             <span>
                               <button
                                 aria-disabled="false"
                                 aria-labelledby="5"
-                                class="c7 c25"
+                                class="c27 c28"
                                 name="delete"
                                 tabindex="-1"
                                 type="button"
                               >
                                 <span
-                                  class="c26"
+                                  class="c29"
                                 >
                                   Delete My super token
                                 </span>