From b929694203f5a4f24da7880c47db029089336eb2 Mon Sep 17 00:00:00 2001 From: Lovelyfin00 Date: Wed, 4 Jan 2023 07:21:35 +0100 Subject: [PATCH] Migrate lock/unlock actions to w-action controller - Revise 'redirect' from a string to a 'continue' boolean that defaults to false - Use 'continue=true' for cases where we do not want to create a next param on submit that takes the user back to the current page - Fixes #9815 --- CHANGELOG.txt | 2 +- .../controllers/ActionController.stories.js | 39 +++++++++++++++++++ .../src/controllers/ActionController.test.js | 4 +- client/src/controllers/ActionController.ts | 25 ++++++++---- client/src/controllers/index.ts | 2 +- .../entrypoints/admin/lock-unlock-action.js | 37 ------------------ client/webpack.config.js | 1 - docs/releases/4.2.md | 2 +- .../wagtailadmin/home/locked_pages.html | 16 +++++--- .../wagtailadmin/pages/_editor_js.html | 1 - .../templates/wagtailadmin/pages/edit.html | 1 - .../templates/wagtailadmin/pages/index.html | 4 -- .../includes/side_panel_button.html | 2 +- .../side_panels/includes/status/locked.html | 4 +- .../wagtailadmin/workflows/edit.html | 12 ++++-- .../wagtailadmin/workflows/edit_task.html | 12 ++++-- .../admin/tests/pages/test_page_locking.py | 7 +--- wagtail/admin/views/generic/mixins.py | 4 +- wagtail/admin/views/pages/edit.py | 4 +- .../wagtailsnippets/snippets/edit.html | 1 - wagtail/snippets/tests/test_locking.py | 10 ++--- wagtail/snippets/tests/test_snippets.py | 6 +-- 22 files changed, 105 insertions(+), 91 deletions(-) create mode 100644 client/src/controllers/ActionController.stories.js delete mode 100644 client/src/entrypoints/admin/lock-unlock-action.js diff --git a/CHANGELOG.txt b/CHANGELOG.txt index 1d0278bcb4..91db7757ca 100644 --- a/CHANGELOG.txt +++ b/CHANGELOG.txt @@ -119,7 +119,7 @@ Changelog * Maintenance: Refactor userbar styles to use the same stylesheet as other components (Thibaud Colas) * Maintenance: Add deprecation warnings for `wagtail.core` and other imports deprecated in Wagtail 3.0 (Matt Westcott) * Maintenance: Migrate admin upgrade notification message implementation to a Stimulus controller (Loveth Omokaro) - * Maintenance: Migrate workflow and workflow tasks enable action to a Stimulus controller (Loveth Omokaro) + * Maintenance: Migrate workflow and workflow tasks enable action and lock/unlock actions to a Stimulus controller (Loveth Omokaro) * Maintenance: Pull out icon sprite setup function from inline script to its own TypeScript file & add unit tests (Loveth Omokaro) diff --git a/client/src/controllers/ActionController.stories.js b/client/src/controllers/ActionController.stories.js new file mode 100644 index 0000000000..1da2625d20 --- /dev/null +++ b/client/src/controllers/ActionController.stories.js @@ -0,0 +1,39 @@ +import React from 'react'; + +import { StimulusWrapper } from '../../storybook/StimulusWrapper'; +import { ActionController } from './ActionController'; + +export default { + title: 'Shared / ActionController', + argTypes: { + debug: { + control: 'boolean', + defaultValue: false, + }, + }, +}; + +const definitions = [ + { + identifier: 'w-action', + controllerConstructor: ActionController, + }, +]; + +const Template = ({ debug = false }) => ( + + + +

Click to lock post and redirect

+ +); + +export const Base = Template.bind({}); diff --git a/client/src/controllers/ActionController.test.js b/client/src/controllers/ActionController.test.js index cab4b84916..8120b31818 100644 --- a/client/src/controllers/ActionController.test.js +++ b/client/src/controllers/ActionController.test.js @@ -16,17 +16,17 @@ describe('ActionController', () => { Application.start().register('w-action', ActionController); }); - it('it should enable the workflow on click', () => { + it('it should enable the workflow, lock and Unlock button', () => { const btn = document.querySelector('[data-controller="w-action"]'); const submitMock = jest.fn(); window.HTMLFormElement.prototype.submit = submitMock; btn.click(); - const form = document.querySelector('form'); expect(submitMock).toHaveBeenCalled(); expect(form.action).toBe('https://www.github.com/'); expect(new FormData(form).get('csrfmiddlewaretoken')).toBe('potato'); + expect(new FormData(form).get('next')).toBe('http://localhost/'); }); }); diff --git a/client/src/controllers/ActionController.ts b/client/src/controllers/ActionController.ts index e6dc22dd5a..5a1d20dc67 100644 --- a/client/src/controllers/ActionController.ts +++ b/client/src/controllers/ActionController.ts @@ -2,20 +2,26 @@ import { Controller } from '@hotwired/stimulus'; import { WAGTAIL_CONFIG } from '../config/wagtailConfig'; /** - * + * + * @example + * */ export class ActionController extends Controller { static values = { - redirect: String, + continue: { type: Boolean, default: false }, url: String, }; + continueValue: boolean; urlValue: string; - redirectValue: any; post(event: Event) { event.preventDefault(); @@ -32,7 +38,10 @@ export class ActionController extends Controller { csrftokenElement.value = WAGTAIL_CONFIG.CSRF_TOKEN; formElement.appendChild(csrftokenElement); - if (this.redirectValue) { + /** If continue is false, pass the current URL as the next param + * so that the user is redirected back to the current page instead + * of continuing to the submitted page */ + if (!this.continueValue) { const nextElement = document.createElement('input'); nextElement.type = 'hidden'; nextElement.name = 'next'; diff --git a/client/src/controllers/index.ts b/client/src/controllers/index.ts index a2ab525806..51fca0b0bc 100644 --- a/client/src/controllers/index.ts +++ b/client/src/controllers/index.ts @@ -10,7 +10,7 @@ import { UpgradeController } from './UpgradeController'; * Important: Only add default core controllers that should load with the base admin JS bundle. */ export const coreControllerDefinitions: Definition[] = [ - // Keep this list alphabetized. + // Keep this list in alphabetical order { controllerConstructor: ActionController, identifier: 'w-action' }, { controllerConstructor: AutoFieldController, identifier: 'w-auto-field' }, { controllerConstructor: SkipLinkController, identifier: 'w-skip-link' }, diff --git a/client/src/entrypoints/admin/lock-unlock-action.js b/client/src/entrypoints/admin/lock-unlock-action.js deleted file mode 100644 index face0de25e..0000000000 --- a/client/src/entrypoints/admin/lock-unlock-action.js +++ /dev/null @@ -1,37 +0,0 @@ -/* When a lock/unlock action button is clicked, make a POST request to the relevant view */ - -function LockUnlockAction(csrfToken, next) { - const actionElements = document.querySelectorAll('[data-action-lock-unlock]'); - actionElements.forEach((buttonElement) => { - buttonElement.addEventListener( - 'click', - (e) => { - e.stopPropagation(); - - const formElement = document.createElement('form'); - - formElement.action = buttonElement.dataset.url; - formElement.method = 'POST'; - - const csrftokenElement = document.createElement('input'); - csrftokenElement.type = 'hidden'; - csrftokenElement.name = 'csrfmiddlewaretoken'; - csrftokenElement.value = csrfToken; - formElement.appendChild(csrftokenElement); - - if (typeof next !== 'undefined') { - const nextElement = document.createElement('input'); - nextElement.type = 'hidden'; - nextElement.name = 'next'; - nextElement.value = next; - formElement.appendChild(nextElement); - } - - document.body.appendChild(formElement); - formElement.submit(); - }, - { capture: true }, - ); - }); -} -window.LockUnlockAction = LockUnlockAction; diff --git a/client/webpack.config.js b/client/webpack.config.js index fc1f900e06..6fade472ff 100644 --- a/client/webpack.config.js +++ b/client/webpack.config.js @@ -41,7 +41,6 @@ module.exports = function exports(env, argv) { 'expanding-formset', 'filtered-select', 'icons', - 'lock-unlock-action', 'modal-workflow', 'page-chooser-modal', 'page-chooser', diff --git a/docs/releases/4.2.md b/docs/releases/4.2.md index cd3f2a8dbf..006841160c 100644 --- a/docs/releases/4.2.md +++ b/docs/releases/4.2.md @@ -158,7 +158,7 @@ Thank you to all who provided feedback, participants to our usability testing se * Refactor userbar styles to use the same stylesheet as other components (Thibaud Colas) * Add deprecation warnings for `wagtail.core` and other imports deprecated in Wagtail 3.0 (Matt Westcott) * Migrate admin upgrade notification message implementation to a Stimulus controller (Loveth Omokaro) - * Migrate workflow and workflow tasks enable action to a Stimulus controller (Loveth Omokaro) + * Migrate workflow and workflow tasks enable action and lock/unlock actions to a Stimulus controller (Loveth Omokaro) * Pull out icon sprite setup function from inline script to its own TypeScript file & add unit tests (Loveth Omokaro) ## Upgrade considerations diff --git a/wagtail/admin/templates/wagtailadmin/home/locked_pages.html b/wagtail/admin/templates/wagtailadmin/home/locked_pages.html index ef48a773c4..c85b317acf 100644 --- a/wagtail/admin/templates/wagtailadmin/home/locked_pages.html +++ b/wagtail/admin/templates/wagtailadmin/home/locked_pages.html @@ -31,7 +31,17 @@