chore(webhooks/EditView): code cleanup

This commit is contained in:
Jamie Howard 2023-05-24 16:35:06 +01:00
parent ffb3079435
commit 46c0a85318
5 changed files with 45 additions and 39 deletions

View File

@ -4,7 +4,14 @@ import PropTypes from 'prop-types';
import { useFormikContext } from 'formik';
import { useIntl } from 'react-intl';
import styled from 'styled-components';
import { FieldLabel, Flex, Typography, BaseCheckbox, Checkbox } from '@strapi/design-system';
import {
FieldLabel,
Flex,
Typography,
BaseCheckbox,
Checkbox,
Loader,
} from '@strapi/design-system';
import { useModels } from '../../../../../../../hooks';
@ -38,40 +45,34 @@ const StyledTable = styled.table`
`;
const getCEHeaders = (isDraftAndPublish) => {
if (isDraftAndPublish) {
return [
{ id: 'Settings.webhooks.events.create', defaultMessage: 'Create' },
{ id: 'Settings.webhooks.events.update', defaultMessage: 'Update' },
{ id: 'app.utils.delete', defaultMessage: 'Delete' },
{ id: 'app.utils.publish', defaultMessage: 'Publish' },
{ id: 'app.utils.unpublish', defaultMessage: 'Unpublish' },
];
}
return [
const headers = [
{ id: 'Settings.webhooks.events.create', defaultMessage: 'Create' },
{ id: 'Settings.webhooks.events.update', defaultMessage: 'Update' },
{ id: 'app.utils.delete', defaultMessage: 'Delete' },
];
if (isDraftAndPublish) {
headers.push({ id: 'app.utils.publish', defaultMessage: 'Publish' });
headers.push({ id: 'app.utils.unpublish', defaultMessage: 'Unpublish' });
}
return headers;
};
const getCEEvents = (isDraftAndPublish) => {
const entryEvents = ['entry.create', 'entry.update', 'entry.delete'];
if (isDraftAndPublish) {
return {
entry: ['entry.create', 'entry.update', 'entry.delete', 'entry.publish', 'entry.unpublish'],
media: ['media.create', 'media.update', 'media.delete'],
};
entryEvents.push('entry.publish', 'entry.unpublish');
}
return {
entry: ['entry.create', 'entry.update', 'entry.delete'],
entry: entryEvents,
media: ['media.create', 'media.update', 'media.delete'],
};
};
const Root = ({ children }) => {
const { formatMessage } = useIntl();
const { collectionTypes } = useModels();
const { collectionTypes, isLoading } = useModels();
const isDraftAndPublish = React.useMemo(
() => collectionTypes.some((ct) => ct.options.draftAndPublish === true),
@ -94,6 +95,14 @@ const Root = ({ children }) => {
defaultMessage: 'Events',
})}
</FieldLabel>
{isLoading && (
<Loader>
{formatMessage({
id: 'Settings.webhooks.events.isLoading',
defaultMessage: 'Events loading',
})}
</Loader>
)}
<StyledTable>{childrenWithProps}</StyledTable>
</Flex>
);
@ -230,6 +239,7 @@ const removeHyphensAndTitleCase = (str) =>
.join(' ');
const EventRow = ({ disabledEvents, name, events, inputValue, handleChange, handleChangeAll }) => {
const { formatMessage } = useIntl();
const enabledCheckboxes = events.filter((event) => !disabledEvents.includes(event));
const hasSomeCheckboxSelected = inputValue.length > 0;
@ -250,7 +260,10 @@ const EventRow = ({ disabledEvents, name, events, inputValue, handleChange, hand
<td>
<Checkbox
indeterminate={hasSomeCheckboxSelected && !areAllCheckboxesSelected}
aria-label="Select all entries"
aria-label={formatMessage({
id: 'global.select-all-entries',
defaultMessage: 'Select all entries',
})}
name={name}
onChange={onChangeAll}
value={areAllCheckboxesSelected}

View File

@ -32,7 +32,7 @@ const HeadersInput = () => {
name="headers"
render={({ push, remove }) => (
<Grid gap={4}>
{values.headers?.map((header, index) => (
{values.headers.map((header, index) => (
<React.Fragment key={`header-${header.key}`}>
<GridItem col={6}>
<Field
@ -46,8 +46,8 @@ const HeadersInput = () => {
error={
errors.headers?.[index]?.key &&
formatMessage({
id: errors.headers[index]?.key,
defaultMessage: errors.headers[index]?.key,
id: errors.headers[index].key,
defaultMessage: errors.headers[index].key,
})
}
/>
@ -66,8 +66,8 @@ const HeadersInput = () => {
error={
errors.headers?.[index]?.value &&
formatMessage({
id: errors.headers[index]?.value,
defaultMessage: errors.headers[index]?.value,
id: errors.headers[index].value,
defaultMessage: errors.headers[index].value,
})
}
/>

View File

@ -104,13 +104,11 @@ const WebhookForm = ({
<Layout.Root
triggerContainer={
showTriggerResponse && (
<div className="trigger-wrapper">
<TriggerContainer
isPending={isTriggering}
response={triggerResponse}
onCancel={() => setShowTriggerResponse(false)}
/>
</div>
<TriggerContainer
isPending={isTriggering}
response={triggerResponse}
onCancel={() => setShowTriggerResponse(false)}
/>
)
}
>

View File

@ -15,16 +15,10 @@ import WebhookForm from './components/WebhookForm';
const cleanData = (data) => ({
...data,
headers: data.headers.reduce((acc, current) => {
const { key, value } = current;
headers: data.headers.reduce((acc, { key, value }) => {
if (key !== '') {
return {
...acc,
[key]: value,
};
acc[key] = value;
}
return acc;
}, {}),
});

View File

@ -285,6 +285,7 @@
"Settings.webhooks.create.header": "Create new header",
"Settings.webhooks.created": "Webhook created",
"Settings.webhooks.event.publish-tooltip": "This event only exists for contents with Draft/Publish system enabled",
"Settings.webhooks.events.isLoading": "Events loading",
"Settings.webhooks.events.create": "Create",
"Settings.webhooks.events.update": "Update",
"Settings.webhooks.form.events": "Events",