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

This commit is contained in:
Christian 2023-02-24 14:11:38 +01:00 committed by GitHub
commit 977d9f0003
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 2817 additions and 2906 deletions

View File

@ -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 { Typography } from '@strapi/design-system/Typography';
import { Select, Option, Typography } from '@strapi/design-system';
import { getDateOfExpiration } from '../../../pages/ApiTokens/EditView/utils';
const LifeSpanInput = ({ token, errors, values, onChange, disabled }) => {

View File

@ -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 { Typography } from '@strapi/design-system/Typography';
import { Select, Option, Typography } from '@strapi/design-system';
import { getDateOfExpiration } from '../../../pages/ApiTokens/EditView/utils';
const LifeSpanInput = ({ token, errors, values, onChange, isCreating }) => {

View File

@ -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 Refresh from '@strapi/icons/Refresh';
import { Button } from '@strapi/design-system';
import { Refresh } from '@strapi/icons';
import { ConfirmDialog } from '@strapi/helper-plugin';
import { useRegenerate } from '../../../../../hooks';

View File

@ -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
return (
<Box paddingLeft={1} {...stopPropagation}>
<IconButton
onClick={() => {
const [showConfirmDialog, setShowConfirmDialog] = useState(false);
const handleClickDelete = () => {
setShowConfirmDialog(false);
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>
);
};

View File

@ -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);
});
});

View File

@ -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 { Tbody, Tr, Td } from '@strapi/design-system/Table';
import { Flex } from '@strapi/design-system/Flex';
import { Typography, Flex, Tbody, Tr, Td } from '@strapi/design-system';
import {
RelativeTime,
onRowClick,

View File

@ -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();

View File

@ -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();

View File

@ -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();

View File

@ -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 {
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 {
.c39 {
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 {
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 {
.c38 svg path {
fill: #8e8ea9;
}
.c40:hover svg path,
.c40:focus svg path {
.c38:hover 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 c42"
role="button"
class="c1 c40"
>
<span>
<button

View File

@ -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 { Grid, GridItem } from '@strapi/design-system/Grid';
import { Stack } from '@strapi/design-system/Stack';
import { Typography } from '@strapi/design-system/Typography';
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';

View File

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

View File

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

View File

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

View File

@ -116,16 +116,48 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
});
expect(container.firstChild).toMatchInlineSnapshot(`
.c26 {
border: 0;
-webkit-clip: rect(0 0 0 0);
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
.c6 {
font-weight: 600;
font-size: 2rem;
line-height: 1.25;
color: #32324d;
}
.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;
position: absolute;
width: 1px;
text-overflow: ellipsis;
color: #32324d;
}
.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 {
padding-right: 8px;
}
.c12 {
.c14 {
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 {
font-weight: 600;
font-size: 2rem;
line-height: 1.25;
color: #32324d;
.c27 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
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 {
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 {
.c39 {
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 {
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 {
.c37 {
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 {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.c0:focus-visible {
outline: none;
}
.c35 svg path {
.c38 svg path {
fill: #8e8ea9;
}
.c35:hover svg path,
.c35:focus svg path {
.c38:hover 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"
>
<div
class="c1 c13 c14"
class="c1 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 c37"
role="button"
class="c1 c40"
>
<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>