From 39ac1b79b68b5714904745510bc5d1cca22420f6 Mon Sep 17 00:00:00 2001 From: Simone Taeggi Date: Tue, 14 Feb 2023 15:31:32 +0100 Subject: [PATCH 01/12] add confirmation dialog when deleting an API token or Transfer token --- .../Tokens/DeleteTokenDialog/index.js | 14 +++++++++++++ .../Tokens/Table/DeleteButton/index.js | 20 ++++++++++++++----- 2 files changed, 29 insertions(+), 5 deletions(-) create mode 100644 packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/DeleteTokenDialog/index.js diff --git a/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/DeleteTokenDialog/index.js b/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/DeleteTokenDialog/index.js new file mode 100644 index 0000000000..9f5b878c01 --- /dev/null +++ b/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/DeleteTokenDialog/index.js @@ -0,0 +1,14 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { ConfirmDialog } from '@strapi/helper-plugin'; + +export const DeleteTokenDialog = ({ onClose, onConfirm }) => { + return ; +}; + +DeleteTokenDialog.propTypes = { + onClose: PropTypes.func.isRequired, + onConfirm: PropTypes.func.isRequired, +}; + +export default DeleteTokenDialog; diff --git a/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/Table/DeleteButton/index.js b/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/Table/DeleteButton/index.js index c04e6a1266..8761ee0566 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/Table/DeleteButton/index.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/Table/DeleteButton/index.js @@ -1,22 +1,26 @@ -import React from 'react'; +import React, { useState } from 'react'; import Trash from '@strapi/icons/Trash'; import { IconButton } from '@strapi/design-system/IconButton'; import { Box } from '@strapi/design-system/Box'; import { stopPropagation, useTracking } from '@strapi/helper-plugin'; import { useIntl } from 'react-intl'; import PropTypes from 'prop-types'; +import DeleteTokenDialog from '../../DeleteTokenDialog'; const DeleteButton = ({ tokenName, onClickDelete }) => { const { formatMessage } = useIntl(); const { trackUsage } = useTracking(); // TODO: Track different types of tokens + const [showConfirmDialog, setShowConfirmDialog] = useState(false); + const handleClickDelete = () => { + setShowConfirmDialog(false); + trackUsage('willDeleteToken'); + onClickDelete(); + }; return ( { - trackUsage('willDeleteToken'); - onClickDelete(); - }} + onClick={() => setShowConfirmDialog(true)} label={formatMessage( { id: 'global.delete-target', @@ -28,6 +32,12 @@ const DeleteButton = ({ tokenName, onClickDelete }) => { noBorder icon={} /> + {showConfirmDialog && ( + setShowConfirmDialog(false)} + onConfirm={handleClickDelete} + /> + )} ); }; From 93aca2d4a9e331e25cba34005008bd52edac39f9 Mon Sep 17 00:00:00 2001 From: Simone Taeggi Date: Mon, 20 Feb 2023 12:43:24 +0100 Subject: [PATCH 02/12] update snapshot, create unit test DeleteDialog and fix the DeleteTokenDialog props --- .../Tokens/DeleteTokenDialog/index.js | 9 +- .../tests/DeleteTokenDialog.test.js | 61 ++ .../DeleteTokenDialog.test.js.snap | 539 ++++++++++++++++++ .../Tokens/Table/DeleteButton/index.js | 11 +- 4 files changed, 612 insertions(+), 8 deletions(-) create mode 100644 packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/DeleteTokenDialog/tests/DeleteTokenDialog.test.js create mode 100644 packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/DeleteTokenDialog/tests/__snapshots__/DeleteTokenDialog.test.js.snap diff --git a/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/DeleteTokenDialog/index.js b/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/DeleteTokenDialog/index.js index 9f5b878c01..18f3a166e1 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/DeleteTokenDialog/index.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/DeleteTokenDialog/index.js @@ -2,13 +2,18 @@ import React from 'react'; import PropTypes from 'prop-types'; import { ConfirmDialog } from '@strapi/helper-plugin'; -export const DeleteTokenDialog = ({ onClose, onConfirm }) => { - return ; +export const DeleteTokenDialog = ({ onClose, onConfirm, isOpen }) => { + return ; }; DeleteTokenDialog.propTypes = { onClose: PropTypes.func.isRequired, onConfirm: PropTypes.func.isRequired, + isOpen: PropTypes.bool, +}; + +DeleteTokenDialog.defaultProps = { + isOpen: false, }; export default DeleteTokenDialog; diff --git a/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/DeleteTokenDialog/tests/DeleteTokenDialog.test.js b/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/DeleteTokenDialog/tests/DeleteTokenDialog.test.js new file mode 100644 index 0000000000..e9557ec2bd --- /dev/null +++ b/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/DeleteTokenDialog/tests/DeleteTokenDialog.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 DeleteTokenDialog from '../index'; + +function ComponentToTest(props) { + return ( + + + {}}> + {}} onConfirm={() => {}} isOpen {...props} /> + + + + ); +} + +const setup = (props = { onClose: jest.fn(), onConfirm: jest.fn() }) => { + return render(); +}; + +describe('DeleteTokenDialog', () => { + afterEach(() => { + jest.clearAllMocks(); + }); + it('renders and matches the snapshot', () => { + const { baseElement } = setup(); + expect(baseElement).toMatchSnapshot(); + }); + + it('show confirmation delete dialog', () => { + const { queryByText } = setup(); + + expect(queryByText('Are you sure you want to delete this?')).toBeInTheDocument(); + }); + + it('closes the modal', () => { + const spy = jest.fn(); + const { getByText } = setup({ onClose: spy }); + + act(() => { + fireEvent.click(getByText('Cancel')); + }); + + expect(spy).toBeCalledTimes(1); + }); + + it('confirm the choice in the modal', () => { + const spy = jest.fn(); + const { getByText } = setup({ onConfirm: spy }); + + act(() => { + fireEvent.click(getByText('Confirm')); + }); + + expect(spy).toBeCalledTimes(1); + }); +}); diff --git a/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/DeleteTokenDialog/tests/__snapshots__/DeleteTokenDialog.test.js.snap b/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/DeleteTokenDialog/tests/__snapshots__/DeleteTokenDialog.test.js.snap new file mode 100644 index 0000000000..bb0c0c0a07 --- /dev/null +++ b/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/DeleteTokenDialog/tests/__snapshots__/DeleteTokenDialog.test.js.snap @@ -0,0 +1,539 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DeleteTokenDialog renders and matches the snapshot 1`] = ` +.c0 { + 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; +} + +.c2 { + padding: 40px; + position: fixed; + z-index: 4; +} + +.c4 { + background: #ffffff; + border-radius: 4px; + box-shadow: 0px 2px 15px rgba(33,33,52,0.1); +} + +.c6 { + padding: 24px; +} + +.c11 { + padding-top: 40px; + padding-right: 24px; + padding-bottom: 40px; + padding-left: 24px; +} + +.c12 { + padding-bottom: 8px; +} + +.c17 { + padding: 16px; +} + +.c25 { + padding-right: 8px; +} + +.c7 { + -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: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + +.c14 { + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c19 { + -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; +} + +.c10 { + font-weight: 600; + font-size: 1.125rem; + line-height: 1.22; + color: #32324d; +} + +.c16 { + font-size: 0.875rem; + line-height: 1.43; + color: #32324d; +} + +.c23 { + font-size: 0.75rem; + line-height: 1.33; + font-weight: 600; + color: #32324d; +} + +.c3 { + inset: 0; + background: #32324d33; +} + +.c5 { + max-width: 25.75rem; + margin: 0 auto; + overflow: hidden; + margin-top: 10%; +} + +.c8 { + border-bottom: 1px solid #eaeaef; +} + +.c13 svg { + width: 24px; + height: 24px; +} + +.c13 svg path { + fill: #d02b20; +} + +.c15 > * { + margin-top: 0; + margin-bottom: 0; +} + +.c15 > * + * { + margin-top: 8px; +} + +.c20 > * { + margin-left: 0; + margin-right: 0; +} + +.c20 > * + * { + margin-left: 8px; +} + +.c18 { + border-top: 1px solid #eaeaef; +} + +.c18 button { + width: 100%; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + +.c21 { + 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; +} + +.c21 svg { + height: 12px; + width: 12px; +} + +.c21 svg > g, +.c21 svg path { + fill: #ffffff; +} + +.c21[aria-disabled='true'] { + pointer-events: none; +} + +.c21: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; +} + +.c21:focus-visible { + outline: none; +} + +.c21:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; +} + +.c26 { + height: 100%; +} + +.c22 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #4945ff; + border: 1px solid #4945ff; + height: 2rem; + padding-left: 16px; + padding-right: 16px; + border: 1px solid #dcdce4; + background: #ffffff; +} + +.c22 .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; +} + +.c22 .c9 { + color: #ffffff; +} + +.c22[aria-disabled='true'] { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c22[aria-disabled='true'] .c9 { + color: #666687; +} + +.c22[aria-disabled='true'] svg > g,.c22[aria-disabled='true'] svg path { + fill: #666687; +} + +.c22[aria-disabled='true']:active { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c22[aria-disabled='true']:active .c9 { + color: #666687; +} + +.c22[aria-disabled='true']:active svg > g,.c22[aria-disabled='true']:active svg path { + fill: #666687; +} + +.c22:hover { + background-color: #f6f6f9; +} + +.c22:active { + background-color: #eaeaef; +} + +.c22 .c9 { + color: #32324d; +} + +.c22 svg > g, +.c22 svg path { + fill: #32324d; +} + +.c24 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #4945ff; + border: 1px solid #4945ff; + height: 2rem; + padding-left: 16px; + padding-right: 16px; + border: 1px solid #f5c0b8; + background: #fcecea; +} + +.c24 .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; +} + +.c24 .c9 { + color: #ffffff; +} + +.c24[aria-disabled='true'] { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c24[aria-disabled='true'] .c9 { + color: #666687; +} + +.c24[aria-disabled='true'] svg > g,.c24[aria-disabled='true'] svg path { + fill: #666687; +} + +.c24[aria-disabled='true']:active { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c24[aria-disabled='true']:active .c9 { + color: #666687; +} + +.c24[aria-disabled='true']:active svg > g,.c24[aria-disabled='true']:active svg path { + fill: #666687; +} + +.c24:hover { + background-color: #ffffff; +} + +.c24:active { + background-color: #ffffff; + border: 1px solid #d02b20; +} + +.c24:active .c9 { + color: #d02b20; +} + +.c24:active svg > g, +.c24:active svg path { + fill: #d02b20; +} + +.c24 .c9 { + color: #b72b1a; +} + +.c24 svg > g, +.c24 svg path { + fill: #b72b1a; +} + + +
+
+

+

+

+
+
+
+
+
+ +
+
+
+
+ +`; diff --git a/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/Table/DeleteButton/index.js b/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/Table/DeleteButton/index.js index 8761ee0566..87d4a833f7 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/Table/DeleteButton/index.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/Table/DeleteButton/index.js @@ -32,12 +32,11 @@ const DeleteButton = ({ tokenName, onClickDelete }) => { noBorder icon={} /> - {showConfirmDialog && ( - setShowConfirmDialog(false)} - onConfirm={handleClickDelete} - /> - )} + setShowConfirmDialog(false)} + onConfirm={handleClickDelete} + isOpen={showConfirmDialog} + /> ); }; From dba158774e4d689402fe606cc5ea805d3546132c Mon Sep 17 00:00:00 2001 From: Simone Taeggi Date: Tue, 21 Feb 2023 15:10:32 +0100 Subject: [PATCH 03/12] remove automatically eslint fix --- packages/core/data-transfer/src/errors/constants.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/data-transfer/src/errors/constants.ts b/packages/core/data-transfer/src/errors/constants.ts index cae73c6e9a..c7a6fafaa2 100644 --- a/packages/core/data-transfer/src/errors/constants.ts +++ b/packages/core/data-transfer/src/errors/constants.ts @@ -5,4 +5,4 @@ export const SeverityKind: Record = { ERROR: 'error', SILLY: 'silly', } as const; -export type Severity = typeof SeverityKind[keyof typeof SeverityKind]; +export type Severity = (typeof SeverityKind)[keyof typeof SeverityKind]; From 3a4a8c995ef81d89ef1a72c627d429051e07b10f Mon Sep 17 00:00:00 2001 From: Simone Taeggi Date: Tue, 21 Feb 2023 16:22:37 +0100 Subject: [PATCH 04/12] update snapshots --- .../DeleteTokenDialog.test.js.snap | 142 +- .../tests/__snapshots__/index.test.js.snap | 184 +- .../tests/__snapshots__/index.test.js.snap | 1689 +++++++++-------- .../ListView/tests/index.test.js | 621 +++--- 4 files changed, 1455 insertions(+), 1181 deletions(-) diff --git a/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/DeleteTokenDialog/tests/__snapshots__/DeleteTokenDialog.test.js.snap b/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/DeleteTokenDialog/tests/__snapshots__/DeleteTokenDialog.test.js.snap index bb0c0c0a07..a141d4419e 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/DeleteTokenDialog/tests/__snapshots__/DeleteTokenDialog.test.js.snap +++ b/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/DeleteTokenDialog/tests/__snapshots__/DeleteTokenDialog.test.js.snap @@ -1,16 +1,24 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`DeleteTokenDialog renders and matches the snapshot 1`] = ` -.c0 { - 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; +.c10 { + font-weight: 600; + font-size: 1.125rem; + line-height: 1.22; + color: #32324d; +} + +.c16 { + font-size: 0.875rem; + line-height: 1.43; + color: #32324d; +} + +.c23 { + font-size: 0.75rem; + line-height: 1.33; + font-weight: 600; + color: #32324d; } .c2 { @@ -94,51 +102,6 @@ exports[`DeleteTokenDialog renders and matches the snapshot 1`] = ` flex-direction: row; } -.c10 { - font-weight: 600; - font-size: 1.125rem; - line-height: 1.22; - color: #32324d; -} - -.c16 { - font-size: 0.875rem; - line-height: 1.43; - color: #32324d; -} - -.c23 { - font-size: 0.75rem; - line-height: 1.33; - font-weight: 600; - color: #32324d; -} - -.c3 { - inset: 0; - background: #32324d33; -} - -.c5 { - max-width: 25.75rem; - margin: 0 auto; - overflow: hidden; - margin-top: 10%; -} - -.c8 { - border-bottom: 1px solid #eaeaef; -} - -.c13 svg { - width: 24px; - height: 24px; -} - -.c13 svg path { - fill: #d02b20; -} - .c15 > * { margin-top: 0; margin-bottom: 0; @@ -157,22 +120,6 @@ exports[`DeleteTokenDialog renders and matches the snapshot 1`] = ` margin-left: 8px; } -.c18 { - border-top: 1px solid #eaeaef; -} - -.c18 button { - width: 100%; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - .c21 { display: -webkit-box; display: -webkit-flex; @@ -231,6 +178,18 @@ exports[`DeleteTokenDialog renders and matches the snapshot 1`] = ` border: 2px solid #4945ff; } +.c0 { + 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; +} + .c26 { height: 100%; } @@ -389,6 +348,47 @@ exports[`DeleteTokenDialog renders and matches the snapshot 1`] = ` fill: #b72b1a; } +.c3 { + inset: 0; + background: #32324d33; +} + +.c5 { + max-width: 25.75rem; + margin: 0 auto; + overflow: hidden; + margin-top: 10%; +} + +.c8 { + border-bottom: 1px solid #eaeaef; +} + +.c13 svg { + width: 24px; + height: 24px; +} + +.c13 svg path { + fill: #d02b20; +} + +.c18 { + border-top: 1px solid #eaeaef; +} + +.c18 button { + width: 100%; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/tests/__snapshots__/index.test.js.snap index 71244fe533..2e3934ca66 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/tests/__snapshots__/index.test.js.snap +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/tests/__snapshots__/index.test.js.snap @@ -15,7 +15,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot color: #32324d; } -.c25 { +.c24 { font-weight: 500; font-size: 1rem; line-height: 1.25; @@ -61,6 +61,11 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot padding-right: 8px; } +.c19 { + padding-right: 56px; + padding-left: 56px; +} + .c22 { background: #ffffff; padding-top: 24px; @@ -179,7 +184,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot flex-direction: row; } -.c23 { +.c20 { -webkit-align-items: stretch; -webkit-box-align: stretch; -ms-flex-align: stretch; @@ -311,12 +316,21 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot border: 2px solid #4945ff; } -.c24 > * { +.c21 > * { margin-top: 0; margin-bottom: 0; } -.c24 > * + * { +.c21 > * + * { + margin-top: 24px; +} + +.c23 > * { + margin-top: 0; + margin-bottom: 0; +} + +.c23 > * + * { margin-top: 16px; } @@ -519,7 +533,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot fill: #ffffff; } -.c26 { +.c25 { display: grid; grid-template-columns: repeat(12,1fr); gap: 20px; @@ -530,7 +544,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot grid-template-columns: repeat(12,1fr); } -.c27 { +.c26 { grid-column: span 6; max-width: 100%; } @@ -553,11 +567,6 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot padding-right: 8px; } -.c19 { - padding-right: 56px; - padding-left: 56px; -} - .c42 { padding-right: 16px; padding-left: 16px; @@ -602,7 +611,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot color: #666687; } -.c20 { +.c27 { -webkit-align-items: stretch; -webkit-box-align: stretch; -ms-flex-align: stretch; @@ -708,15 +717,6 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot display: flex; } -.c21 > * { - margin-top: 0; - margin-bottom: 0; -} - -.c21 > * + * { - margin-top: 24px; -} - .c28 > * { margin-top: 0; margin-bottom: 0; @@ -958,13 +958,13 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot } @media (max-width:68.75rem) { - .c27 { + .c26 { grid-column: span; } } @media (max-width:34.375rem) { - .c27 { + .c26 { grid-column: span 12; } } @@ -1091,27 +1091,27 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot

Details