diff --git a/packages/core/admin/admin/src/pages/Webhooks/ListView/index.js b/packages/core/admin/admin/src/pages/Webhooks/ListView/index.js index ff94814955..7d1e4730c1 100644 --- a/packages/core/admin/admin/src/pages/Webhooks/ListView/index.js +++ b/packages/core/admin/admin/src/pages/Webhooks/ListView/index.js @@ -15,14 +15,14 @@ import { useFocusWhenNavigate, SettingsPageTitle, } from '@strapi/helper-plugin'; -import { HeaderLayout, Layout, ContentLayout } from '@strapi/parts/Layout'; +import { HeaderLayout, Layout, ContentLayout, ActionLayout } from '@strapi/parts/Layout'; import { EmptyStateLayout } from '@strapi/parts/EmptyStateLayout'; import { Row } from '@strapi/parts/Row'; import { Stack } from '@strapi/parts/Stack'; import { IconButton } from '@strapi/parts/IconButton'; import { BaseCheckbox } from '@strapi/parts/BaseCheckbox'; import { Table, Thead, Tr, Th, Tbody, Td, TFooter } from '@strapi/parts/Table'; -import { Text, TableLabel } from '@strapi/parts/Text'; +import { Text, TableLabel, Subtitle } from '@strapi/parts/Text'; import { Button } from '@strapi/parts/Button'; import { VisuallyHidden } from '@strapi/parts/VisuallyHidden'; import { Switch } from '@strapi/parts/Switch'; @@ -56,6 +56,7 @@ const ListView = () => { const { push } = useHistory(); const { pathname } = useLocation(); const rowsCount = webhooks.length; + const webhooksToDeleteLength = webhooksToDelete.length; const getWebhookIndex = id => webhooks.findIndex(webhook => webhook.id === id); useEffect(() => { @@ -166,10 +167,12 @@ const ListView = () => { const handleDeleteClick = id => { setShowModal(true); - dispatch({ - type: 'SET_WEBHOOK_TO_DELETE', - id, - }); + if (id !== 'all') { + dispatch({ + type: 'SET_WEBHOOK_TO_DELETE', + id, + }); + } }; const handleEnabledChange = async (value, id) => { @@ -256,6 +259,32 @@ const ListView = () => { ) } /> + {webhooksToDeleteLength > 0 && canDelete && ( + + + {formatMessage( + { + id: 'Settings.webhooks.to.delete', + defaultMessage: + '{webhooksToDeleteLength, plural, one {# asset} other {# assets}} selected', + }, + { webhooksToDeleteLength } + )} + + + + } + /> + )} {isLoading || loadingWebhooks ? ( ) : ( @@ -286,9 +315,9 @@ const ListView = () => { defaultMessage: 'Select all entries', })} indeterminate={ - webhooksToDelete.length > 0 && webhooksToDelete.length < rowsCount + webhooksToDeleteLength > 0 && webhooksToDeleteLength < rowsCount } - value={webhooksToDelete.length === rowsCount} + value={webhooksToDeleteLength === rowsCount} onValueChange={handleSelectAllCheckbox} /> @@ -394,6 +423,7 @@ const ListView = () => { })} icon={} noBorder + id={`delete-${webhook.id}`} /> )} @@ -461,6 +491,7 @@ const ListView = () => { onClick={handleConfirmDelete} variant="danger-light" startIcon={} + id="confirm-delete" > {formatMessage({ id: 'app.components.Button.confirm', defaultMessage: 'Confirm' })} diff --git a/packages/core/admin/admin/src/pages/Webhooks/ListView/tests/index.test.js b/packages/core/admin/admin/src/pages/Webhooks/ListView/tests/index.test.js index 7cefc41039..dda08e51b2 100644 --- a/packages/core/admin/admin/src/pages/Webhooks/ListView/tests/index.test.js +++ b/packages/core/admin/admin/src/pages/Webhooks/ListView/tests/index.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen, waitFor } from '@testing-library/react'; +import { fireEvent, render, screen, waitFor } from '@testing-library/react'; import { IntlProvider } from 'react-intl'; import { ThemeProvider, lightTheme } from '@strapi/parts'; import { Router } from 'react-router-dom'; @@ -263,4 +263,21 @@ describe('Admin | containers | ListView', () => { expect(screen.getByText('http:://strapi.io')).toBeInTheDocument(); }); }); + + it('should show confirmation delete modal', async () => { + useRBAC.mockImplementation(() => ({ + isLoading: false, + allowedActions: { canUpdate: true, canCreate: true, canRead: true, canDelete: true }, + })); + + const { container } = render(App); + await waitFor(() => { + screen.getByText('http:://strapi.io'); + }); + + fireEvent.click(container.querySelector('#delete-1')); + await waitFor(() => { + expect(screen.getByText('Are you sure you want to delete this?')).toBeInTheDocument(); + }); + }); }); diff --git a/packages/core/admin/admin/src/translations/en.json b/packages/core/admin/admin/src/translations/en.json index 75f7003044..d1c2bfaf60 100644 --- a/packages/core/admin/admin/src/translations/en.json +++ b/packages/core/admin/admin/src/translations/en.json @@ -185,6 +185,7 @@ "Settings.webhooks.list.th.status": "status", "Settings.webhooks.singular": "webhook", "Settings.webhooks.title": "Webhooks", + "Settings.webhooks.to.delete": "{webhooksToDeleteLength, plural, one {# asset} other {# assets}} selected", "Settings.webhooks.trigger": "Trigger", "Settings.webhooks.trigger.cancel": "Cancel trigger", "Settings.webhooks.trigger.pending": "Pending…",