From 8cbb331fff9502cf326f987c1af4b5eba33de26c Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Tue, 16 Nov 2021 12:23:49 +0100 Subject: [PATCH 1/6] started typography integration + fixed combobox created value crashing the app --- .../EditView/components/HeadersInput/Combobox.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/HeadersInput/Combobox.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/HeadersInput/Combobox.js index ab23556e93..1f1df62dba 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/HeadersInput/Combobox.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/HeadersInput/Combobox.js @@ -3,8 +3,8 @@ import PropTypes from 'prop-types'; import { ComboboxOption, CreatableCombobox } from '@strapi/design-system/Combobox'; import keys from './keys'; -const Combobox = ({ name, onChange, ...props }) => { - const [options, setOptions] = useState(keys); +const Combobox = ({ name, onChange, value, ...props }) => { + const [options, setOptions] = useState(value ? [...keys, value] : keys); const handleChange = value => { onChange({ target: { name, value } }); @@ -22,6 +22,7 @@ const Combobox = ({ name, onChange, ...props }) => { onChange={handleChange} onCreateOption={handleCreateOption} placeholder="" + value={value} > {options.map(key => ( @@ -32,9 +33,14 @@ const Combobox = ({ name, onChange, ...props }) => { ); }; +Combobox.defaultProps = { + value: undefined, +}; + Combobox.propTypes = { name: PropTypes.string.isRequired, onChange: PropTypes.func.isRequired, + value: PropTypes.string, }; export default Combobox; From 4ba49202d7a2e9cf9ad2adddb2849ece26a08d9a Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Tue, 16 Nov 2021 14:51:34 +0100 Subject: [PATCH 2/6] typography edit component + trigger message fixed --- .../EditView/components/EventInput/index.js | 14 +++-- .../components/TriggerContainer/index.js | 52 +++++++++---------- 2 files changed, 33 insertions(+), 33 deletions(-) diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/EventInput/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/EventInput/index.js index e1ae33116b..1fad670b2c 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/EventInput/index.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/EventInput/index.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { FieldLabel } from '@strapi/design-system/Field'; import { Stack } from '@strapi/design-system/Stack'; -import { P, TableLabel } from '@strapi/design-system/Text'; +import { Typography } from '@strapi/design-system/Typography'; import { useFormikContext } from 'formik'; import { useIntl } from 'react-intl'; import styled from 'styled-components'; @@ -121,14 +121,18 @@ const EventInput = ({ isDraftAndPublish }) => { 'This event only exists for contents with Draft/Publish system enabled', })} > - {formatMessage({ id: header })} + + {formatMessage({ id: header })} + ); } return ( - {formatMessage({ id: header })} + + {formatMessage({ id: header })} + ); })} @@ -151,12 +155,12 @@ const EventInput = ({ isDraftAndPublish }) => { {errors.events && ( -

+ {formatMessage({ id: 'components.Input.error.validation.required', defaultMessage: 'This value is required', })} -

+ )} ); diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/TriggerContainer/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/TriggerContainer/index.js index add2a983cc..9ac97a60e3 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/TriggerContainer/index.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/TriggerContainer/index.js @@ -1,15 +1,16 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { useIntl } from 'react-intl'; +import styled from 'styled-components'; +import { pxToRem } from '@strapi/helper-plugin'; import Check from '@strapi/icons/Check'; import Cross from '@strapi/icons/Cross'; import Loader from '@strapi/icons/Loader'; import { Box } from '@strapi/design-system/Box'; import { Flex } from '@strapi/design-system/Flex'; -import { Text } from '@strapi/design-system/Text'; +import { Typography } from '@strapi/design-system/Typography'; import { Stack } from '@strapi/design-system/Stack'; import { Grid, GridItem } from '@strapi/design-system/Grid'; -import { useIntl } from 'react-intl'; -import styled from 'styled-components'; // Being discussed in Notion: create a component in Parts const Icon = styled.svg( @@ -30,9 +31,9 @@ const Status = ({ isPending, statusCode }) => { return ( - + {formatMessage({ id: 'Settings.webhooks.trigger.pending', defaultMessage: 'pending' })} - + ); } @@ -41,9 +42,9 @@ const Status = ({ isPending, statusCode }) => { return ( - + {formatMessage({ id: 'Settings.webhooks.trigger.success', defaultMessage: 'success' })} - + ); } @@ -52,9 +53,9 @@ const Status = ({ isPending, statusCode }) => { return ( - + {formatMessage({ id: 'Settings.error', defaultMessage: 'error' })} {statusCode} - + ); } @@ -75,29 +76,24 @@ const Message = ({ statusCode, message }) => { if (statusCode >= 200 && statusCode < 300) { return ( - + {formatMessage({ id: 'Settings.webhooks.trigger.success.label', - defaultMessage: 'success', + defaultMessage: 'Trigger succeeded', })} - + ); } if (statusCode >= 300) { return ( - - - {message} - + + + + {message}YOLOOOOOOdjkeb bdewib dehwb dilwb dilhwebd ilewb dlw + + ); } @@ -120,9 +116,9 @@ const CancelButton = ({ onCancel }) => { @@ -140,12 +136,12 @@ const TriggerContainer = ({ isPending, onCancel, response }) => { - + {formatMessage({ id: 'Settings.webhooks.trigger.test', - defaultMessage: 'test-trigger', + defaultMessage: 'Test-trigger', })} - + From 61556b70af09507e3ee109ce1dd0a8d5c085319f Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Tue, 16 Nov 2021 15:00:53 +0100 Subject: [PATCH 3/6] typography in LV --- .../pages/Webhooks/ListView/index.js | 443 +++++++++--------- 1 file changed, 218 insertions(+), 225 deletions(-) diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/index.js index 0df51c947c..98ec4ec96f 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/index.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/index.js @@ -25,7 +25,7 @@ import { Stack } from '@strapi/design-system/Stack'; import { IconButton } from '@strapi/design-system/IconButton'; import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox'; import { Table, Thead, Tr, Th, Tbody, Td, TFooter } from '@strapi/design-system/Table'; -import { Text, TableLabel, Subtitle } from '@strapi/design-system/Text'; +import { Typography } from '@strapi/design-system/Typography'; import { Button } from '@strapi/design-system/Button'; import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden'; import { Switch } from '@strapi/design-system/Switch'; @@ -243,236 +243,229 @@ const ListView = () => {
- <> - } - variant="default" - to={`${pathname}/create`} + } variant="default" to={`${pathname}/create`} size="L"> + {formatMessage({ + id: 'Settings.webhooks.list.button.add', + defaultMessage: 'Add new webhook', + })} + + ) + } + /> + {webhooksToDeleteLength > 0 && canDelete && ( + + + {formatMessage( + { + id: 'Settings.webhooks.to.delete', + defaultMessage: + '{webhooksToDeleteLength, plural, one {# asset} other {# assets}} selected', + }, + { webhooksToDeleteLength } + )} + + + } /> - {webhooksToDeleteLength > 0 && canDelete && ( - - - {formatMessage( - { - id: 'Settings.webhooks.to.delete', - defaultMessage: - '{webhooksToDeleteLength, plural, one {# asset} other {# assets}} selected', - }, - { webhooksToDeleteLength } - )} - - - - } - /> - )} - - {isLoading || loadingWebhooks ? ( - - - - ) : ( - <> - {rowsCount > 0 ? ( - (canCreate ? handleGoTo('create') : {})} - icon={} - > - {formatMessage({ - id: 'Settings.webhooks.list.button.add', - defaultMessage: 'Add new webhook', - })} - - } - > - - - - - - - - - - - {webhooks.map(webhook => ( - handleGoTo(webhook.id), - condition: canUpdate, + )} + + {isLoading || loadingWebhooks ? ( + + + + ) : ( + <> + {rowsCount > 0 ? ( +
- 0 && webhooksToDeleteLength < rowsCount - } - value={webhooksToDeleteLength === rowsCount} - onValueChange={handleSelectAllCheckbox} - /> - - - {formatMessage({ - id: 'Settings.webhooks.form.name', - defaultMessage: 'Name', - })} - - - - {formatMessage({ - id: 'Settings.webhooks.form.url', - defaultMessage: 'URL', - })} - - - - {formatMessage({ - id: 'Settings.webhooks.list.th.status', - defaultMessage: 'Status', - })} - - - - {formatMessage({ - id: 'Settings.webhooks.list.th.actions', - defaultMessage: 'Actions', - })} - -
(canCreate ? handleGoTo('create') : {})} + icon={} + > + {formatMessage({ + id: 'Settings.webhooks.list.button.add', + defaultMessage: 'Add new webhook', + })} + + } + > + + + - - - - - - ))} - -
+ - - handleSelectOneCheckbox(value, webhook.id)} - id="select" - name="select" - /> - - - {webhook.name} - - - {webhook.url} - - - handleEnabledChange(!webhook.isEnabled, webhook.id)} - visibleLabels - /> - - - - {canUpdate && ( - { - handleGoTo(webhook.id); - }} - label={formatMessage({ - id: 'Settings.webhooks.events.update', - defaultMessage: 'Update', - })} - icon={} - noBorder - /> - )} - {canDelete && ( - handleDeleteClick(webhook.id)} - label={formatMessage({ - id: 'Settings.webhooks.events.delete', - defaultMessage: 'Delete', - })} - icon={} - noBorder - id={`delete-${webhook.id}`} - /> - )} - -
- ) : ( - } - content={formatMessage({ - id: 'Settings.webhooks.list.empty.description', - defaultMessage: 'Add your first webhook', - })} - action={ - - } - /> - )} - - )} - - + > + + handleSelectOneCheckbox(value, webhook.id)} + id="select" + name="select" + /> + + + + {webhook.name} + + + + {webhook.url} + + + + handleEnabledChange(!webhook.isEnabled, webhook.id)} + visibleLabels + /> + + + + + {canUpdate && ( + { + handleGoTo(webhook.id); + }} + label={formatMessage({ + id: 'Settings.webhooks.events.update', + defaultMessage: 'Update', + })} + icon={} + noBorder + /> + )} + {canDelete && ( + handleDeleteClick(webhook.id)} + label={formatMessage({ + id: 'Settings.webhooks.events.delete', + defaultMessage: 'Delete', + })} + icon={} + noBorder + id={`delete-${webhook.id}`} + /> + )} + + + + ))} + + + ) : ( + } + content={formatMessage({ + id: 'Settings.webhooks.list.empty.description', + defaultMessage: 'Add your first webhook', + })} + action={ + + } + /> + )} + + )} +
Date: Tue, 16 Nov 2021 15:05:08 +0100 Subject: [PATCH 4/6] fixed tests LV not showing data --- .../pages/Webhooks/ListView/index.js | 1 + .../Webhooks/ListView/tests/index.test.js | 1111 ++++++++++++++++- 2 files changed, 1073 insertions(+), 39 deletions(-) diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/index.js index 98ec4ec96f..63f66ff108 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/index.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/index.js @@ -53,6 +53,7 @@ const ListView = () => { reducer, initialState ); + console.log(webhooks); const { notifyStatus } = useNotifyAT(); useFocusWhenNavigate(); diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/tests/index.test.js index 69e7ccef0f..ec5bb6157c 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/tests/index.test.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/tests/index.test.js @@ -38,9 +38,9 @@ describe('Admin | containers | ListView', () => { afterAll(() => server.close()); - it('renders and matches the snapshot', () => { + it.only('renders and matches the snapshot', async () => { useRBAC.mockImplementation(() => ({ - isLoading: true, + isLoading: false, allowedActions: { canUpdate: true, canCreate: true, canRead: true, canDelete: true }, })); @@ -48,15 +48,80 @@ describe('Admin | containers | ListView', () => { container: { firstChild }, } = render(App); + await waitFor(() => { + expect(screen.getByText('http:://strapi.io')).toBeInTheDocument(); + }); + expect(firstChild).toMatchInlineSnapshot(` - .c10 { - background: #ffffff; - padding: 24px; + .c26 { + margin: 0; + height: 18px; + min-width: 18px; border-radius: 4px; - box-shadow: 0px 1px 4px rgba(33,33,52,0.1); + border: 1px solid #c0c0cf; + -webkit-appearance: none; + background-color: #ffffff; + cursor: pointer; } - .c11 { + .c26:checked { + background-color: #4945ff; + border: 1px solid #4945ff; + } + + .c26:checked:after { + content: ''; + display: block; + position: relative; + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSJ3aGl0ZSIKICAvPgo8L3N2Zz4=) no-repeat no-repeat center center; + width: 10px; + height: 10px; + left: 50%; + top: 50%; + -webkit-transform: translateX(-50%) translateY(-50%); + -ms-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); + } + + .c26:checked:disabled:after { + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==) no-repeat no-repeat center center; + } + + .c26:disabled { + background-color: #dcdce4; + border: 1px solid #c0c0cf; + } + + .c26:indeterminate { + background-color: #4945ff; + border: 1px solid #4945ff; + } + + .c26:indeterminate:after { + content: ''; + display: block; + position: relative; + color: white; + height: 2px; + width: 10px; + background-color: #ffffff; + left: 50%; + top: 50%; + -webkit-transform: translateX(-50%) translateY(-50%); + -ms-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); + } + + .c26:indeterminate:disabled { + background-color: #dcdce4; + border: 1px solid #c0c0cf; + } + + .c26:indeterminate:disabled:after { + background-color: #8e8ea9; + } + + .c35 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -64,17 +129,334 @@ describe('Admin | containers | ListView', () => { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; - -webkit-box-pack: space-around; - -webkit-justify-content: space-around; - -ms-flex-pack: space-around; - justify-content: space-around; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } - .c13 { + .c43 { + 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; + } + + .c43 svg { + height: 12px; + width: 12px; + } + + .c43 svg > g, + .c43 svg path { + fill: #ffffff; + } + + .c43[aria-disabled='true'] { + pointer-events: none; + } + + .c43: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; + } + + .c43:focus-visible { + outline: none; + } + + .c43:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; + } + + .c44 { + 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; + } + + .c44 svg > g, + .c44 svg path { + fill: #8e8ea9; + } + + .c44:hover svg > g, + .c44:hover svg path { + fill: #666687; + } + + .c44:active svg > g, + .c44:active svg path { + fill: #a5a5ba; + } + + .c44[aria-disabled='true'] { + background-color: #eaeaef; + } + + .c44[aria-disabled='true'] svg path { + fill: #666687; + } + + .c41 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .c42 > * { + margin-left: 0; + margin-right: 0; + } + + .c42 > * + * { + margin-left: 4px; + } + + .c16 { + background: #ffffff; + border-radius: 4px; + box-shadow: 0px 1px 4px rgba(33,33,52,0.1); + } + + .c19 { + padding-right: 24px; + padding-left: 24px; + } + + .c28 { + width: 20%; + } + + .c30 { + width: 60%; + } + + .c46 { + background: #eaeaef; + } + + .c48 { + background: #f0f0ff; + padding: 20px; + } + + .c50 { + background: #d9d8ff; + } + + .c52 { + padding-left: 12px; + } + + .c17 { + overflow: hidden; + } + + .c21 { + width: 100%; + white-space: nowrap; + } + + .c18 { + position: relative; + } + + .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; + } + + .c32 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; + } + + .c25 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .c24 { + vertical-align: middle; + text-align: left; + color: #666687; + outline-offset: -4px; + } + + .c24 input { + vertical-align: sub; + } + + .c27 svg { + height: 0.25rem; + } + + .c47 { + height: 1px; + border: none; + margin: 0; + } + + .c53 { + font-weight: 600; + color: #4945ff; + font-size: 0.75rem; + line-height: 1.33; + } + + .c51 { + height: 1.5rem; + width: 1.5rem; + border-radius: 50%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .c51 svg { + height: 0.625rem; + width: 0.625rem; + } + + .c51 svg path { + fill: #4945ff; + } + + .c49 { + border-radius: 0 0 4px 4px; + display: block; + width: 100%; + border: none; + } + + .c29 { + color: #666687; + font-weight: 600; + font-size: 0.6875rem; + line-height: 1.45; + text-transform: uppercase; + } + + .c33 { + font-weight: 500; + color: #32324d; + font-size: 0.875rem; + line-height: 1.43; + } + + .c34 { + color: #32324d; + font-size: 0.875rem; + line-height: 1.43; + } + + .c31 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -86,15 +468,6 @@ describe('Admin | containers | ListView', () => { width: 1px; } - .c14 { - -webkit-animation: gzYjWD 1s infinite linear; - animation: gzYjWD 1s infinite linear; - } - - .c12 { - height: 100vh; - } - .c1 { padding-bottom: 56px; } @@ -107,7 +480,7 @@ describe('Admin | containers | ListView', () => { padding-left: 56px; } - .c9 { + .c15 { padding-right: 56px; padding-left: 56px; } @@ -160,16 +533,226 @@ describe('Admin | containers | ListView', () => { line-height: 1.25; } - .c8 { + .c14 { color: #666687; font-size: 1rem; line-height: 1.5; } + .c40 { + color: #328048; + padding-left: 8px; + } + + .c45 { + color: #d02b20; + padding-left: 8px; + } + + .c37 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .c39 { + background: #ee5e52; + border: none; + border-radius: 16px; + position: relative; + height: 1.5rem; + width: 2.5rem; + } + + .c39 span { + font-size: 0; + } + + .c39:before { + content: ''; + background: #ffffff; + width: 1rem; + height: 1rem; + border-radius: 50%; + position: absolute; + -webkit-transition: all 0.5s; + transition: all 0.5s; + left: 4px; + top: 4px; + } + + .c36 { + background: transparent; + padding: 0; + border: none; + } + + .c36[aria-checked='true'] .c38 { + background: #5cb176; + } + + .c36[aria-checked='true'] .c38:before { + -webkit-transform: translateX(1rem); + -ms-transform: translateX(1rem); + transform: translateX(1rem); + } + .c3 { outline: none; } + .c13 { + font-weight: 600; + color: #32324d; + font-size: 0.875rem; + line-height: 1.43; + } + + .c11 { + padding-right: 8px; + } + + .c8 { + 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; + } + + .c8 svg { + height: 12px; + width: 12px; + } + + .c8 svg > g, + .c8 svg path { + fill: #ffffff; + } + + .c8[aria-disabled='true'] { + pointer-events: none; + } + + .c8: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; + } + + .c8:focus-visible { + outline: none; + } + + .c8:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; + } + + .c9 { + padding: 10px 16px; + background: #4945ff; + border: none; + border-radius: 4px; + border: 1px solid #4945ff; + background: #4945ff; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-text-decoration: none; + text-decoration: none; + } + + .c9 .c10 { + 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; + } + + .c9 .c12 { + color: #ffffff; + } + + .c9[aria-disabled='true'] { + border: 1px solid #dcdce4; + background: #eaeaef; + } + + .c9[aria-disabled='true'] .c12 { + color: #666687; + } + + .c9[aria-disabled='true'] svg > g, + .c9[aria-disabled='true'] svg path { + fill: #666687; + } + + .c9[aria-disabled='true']:active { + border: 1px solid #dcdce4; + background: #eaeaef; + } + + .c9[aria-disabled='true']:active .c12 { + color: #666687; + } + + .c9[aria-disabled='true']:active svg > g, + .c9[aria-disabled='true']:active svg path { + fill: #666687; + } + + .c9:hover { + border: 1px solid #7b79ff; + background: #7b79ff; + } + + .c9:active { + border: 1px solid #4945ff; + background: #4945ff; + } + + @media (prefers-reduced-motion:reduce) { + .c39:before { + -webkit-transition: none; + transition: none; + } + } +
@@ -177,7 +760,7 @@ describe('Admin | containers | ListView', () => { class="c1 c2" >
{ Webhooks
+ + + + Add new webhook + +

Get POST changes notifications.

+
+
+
+
+
From a1551a4d0f41b443658f2afb254f291941558061 Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Tue, 16 Nov 2021 15:06:35 +0100 Subject: [PATCH 5/6] removed it.only --- .../SettingsPage/pages/Webhooks/ListView/tests/index.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/tests/index.test.js index ec5bb6157c..a9699d4853 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/tests/index.test.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/tests/index.test.js @@ -38,7 +38,7 @@ describe('Admin | containers | ListView', () => { afterAll(() => server.close()); - it.only('renders and matches the snapshot', async () => { + it('renders and matches the snapshot', async () => { useRBAC.mockImplementation(() => ({ isLoading: false, allowedActions: { canUpdate: true, canCreate: true, canRead: true, canDelete: true }, From a7ee05d49cf61ee8070a8d0a6437766e16ca22ba Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Tue, 16 Nov 2021 16:14:08 +0100 Subject: [PATCH 6/6] feedback fix --- .../pages/Webhooks/EditView/components/EventInput/index.js | 4 ++-- .../Webhooks/EditView/components/TriggerContainer/index.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/EventInput/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/EventInput/index.js index 1fad670b2c..fa0ba1e3e4 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/EventInput/index.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/EventInput/index.js @@ -122,7 +122,7 @@ const EventInput = ({ isDraftAndPublish }) => { })} > - {formatMessage({ id: header })} + {formatMessage({ id: header, defaultMessage: header })} ); @@ -131,7 +131,7 @@ const EventInput = ({ isDraftAndPublish }) => { return ( - {formatMessage({ id: header })} + {formatMessage({ id: header, defaultMessage: header })} ); diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/TriggerContainer/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/TriggerContainer/index.js index 9ac97a60e3..2ddc052a14 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/TriggerContainer/index.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/TriggerContainer/index.js @@ -91,7 +91,7 @@ const Message = ({ statusCode, message }) => { - {message}YOLOOOOOOdjkeb bdewib dehwb dilwb dilhwebd ilewb dlw + {message}