Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Editor: Implement MVP for Post Locking (Story Locking) #6497

Merged
merged 87 commits into from
Mar 24, 2021

Conversation

spacedmonkey
Copy link
Contributor

@spacedmonkey spacedmonkey commented Feb 23, 2021

Context

Summary

A very basic implementation of post locking in the editor.

Please note, the code is very messy and needs a lot of tidying up. The idea was just to get this thing working.

Relevant Technical Choices

Some of the fields adding to the settings object, maybe loaded from other places. But as the post locking is loaded very early.

No new endpoint was created, I used extended existing endpoints.

User data is loaded via an embedded REST API request.

Post lock data can not be preloaded as it caches.

To-do

Should we implement delete lock on navigation away from story editor?
Should this feature be behind a feature flag?
Should the links be tracked?

User-facing changes

Screen.Recording.2021-02-24.at.16.10.30.mov

Screenshot 2021-02-23 at 18 38 56

Screenshot 2021-02-24 at 11 53 41

Screenshot 2021-02-23 at 18 39 09

Testing Instructions

QA

  • This is a non-user-facing change and requires no QA

This PR can be tested by following these steps:

  1. Login as author,
  2. Create a story.
  3. Publish story
  4. In another browser, login as admin.
  5. Edit the same story.
  6. See dialog.

UAT

  • UAT should use the same steps as above.

This PR can be tested by following these steps:

Reviews

Does this PR have a security-related impact?

Does this PR change what data or activity we track or use?

Does this PR have a legal-related impact?

Checklist

  • This PR addresses an existing issue and I have linked this PR to it in ZenHub
  • I have tested this code to the best of my abilities
  • I have verified accessibility to the best of my abilities (docs)
  • I have verified i18n and l10n (translation, right-to-left layout) to the best of my abilities
  • This PR contains automated tests (unit, integration, and/or e2e) to verify the code works as intended (docs)
  • I have added documentation where necessary
  • I have added a matching Type: XYZ label to the PR

Fixes #3126

@spacedmonkey spacedmonkey added Type: Enhancement New feature or improvement of an existing feature Group: WordPress Changes related to WordPress or Gutenberg integration Pod: WP & Infra Group: Story Locking aka post locking labels Feb 23, 2021
@spacedmonkey spacedmonkey self-assigned this Feb 23, 2021
@google-cla google-cla bot added the cla: yes label Feb 23, 2021
@github-actions
Copy link
Contributor

github-actions bot commented Feb 23, 2021

Size Change: +2.93 kB (0%)

Total Size: 1.66 MB

Filename Size Change
assets/js/edit-story.js 342 kB +1.25 kB (0%)
assets/js/stories-dashboard.js 267 kB +1.04 kB (0%)
assets/js/web-stories-block.js 425 kB +633 B (0%)
ℹ️ View Unchanged
Filename Size Change
assets/css/carousel-view-rtl.css 715 B 0 B
assets/css/carousel-view.css 716 B 0 B
assets/css/edit-story-rtl.css 267 B 0 B
assets/css/edit-story.css 267 B 0 B
assets/css/stories-dashboard-rtl.css 276 B 0 B
assets/css/stories-dashboard.css 276 B 0 B
assets/css/vendors~edit-story-rtl.css 702 B 0 B
assets/css/vendors~edit-story.css 702 B 0 B
assets/css/web-stories-block-rtl.css 3.23 kB 0 B
assets/css/web-stories-block.css 3.26 kB 0 B
assets/css/web-stories-embed-rtl.css 284 B 0 B
assets/css/web-stories-embed.css 284 B 0 B
assets/css/web-stories-list-styles-rtl.css 2.26 kB 0 B
assets/css/web-stories-list-styles.css 2.27 kB 0 B
assets/css/web-stories-theme-style-twentyeleven-rtl.css 102 B 0 B
assets/css/web-stories-theme-style-twentyeleven.css 102 B 0 B
assets/css/web-stories-theme-style-twentyfifteen-rtl.css 252 B 0 B
assets/css/web-stories-theme-style-twentyfifteen.css 252 B 0 B
assets/css/web-stories-theme-style-twentyfourteen-rtl.css 286 B 0 B
assets/css/web-stories-theme-style-twentyfourteen.css 286 B 0 B
assets/css/web-stories-theme-style-twentyseventeen-rtl.css 311 B 0 B
assets/css/web-stories-theme-style-twentyseventeen.css 311 B 0 B
assets/css/web-stories-theme-style-twentysixteen-rtl.css 239 B 0 B
assets/css/web-stories-theme-style-twentysixteen.css 239 B 0 B
assets/css/web-stories-theme-style-twentyten-rtl.css 144 B 0 B
assets/css/web-stories-theme-style-twentyten.css 145 B 0 B
assets/css/web-stories-theme-style-twentytwelve-rtl.css 263 B 0 B
assets/css/web-stories-theme-style-twentytwelve.css 263 B 0 B
assets/css/web-stories-theme-style-twentytwenty-rtl.css 86 B 0 B
assets/css/web-stories-theme-style-twentytwenty.css 86 B 0 B
assets/css/web-stories-theme-style-twentytwentyone-rtl.css 263 B 0 B
assets/css/web-stories-theme-style-twentytwentyone.css 265 B 0 B
assets/css/web-stories-widget.css 489 B 0 B
assets/js/carousel-view.js 3.72 kB 0 B
assets/js/chunk-fonts-********************.js 45 kB 0 B
assets/js/chunk-web-stories-template-0-********************.js 11 kB 0 B
assets/js/chunk-web-stories-template-1-********************.js 11.3 kB 0 B
assets/js/chunk-web-stories-template-2-********************.js 10.9 kB 0 B
assets/js/chunk-web-stories-template-3-********************.js 10.6 kB 0 B
assets/js/chunk-web-stories-template-4-********************.js 12.7 kB 0 B
assets/js/chunk-web-stories-template-5-********************.js 7.14 kB 0 B
assets/js/chunk-web-stories-template-6-********************.js 10.3 kB 0 B
assets/js/chunk-web-stories-template-7-********************.js 10.1 kB 0 B
assets/js/chunk-web-stories-textset-0-********************.js 5.23 kB 0 B
assets/js/chunk-web-stories-textset-1-********************.js 6.79 kB 0 B
assets/js/chunk-web-stories-textset-2-********************.js 7.81 kB 0 B
assets/js/chunk-web-stories-textset-3-********************.js 15.3 kB 0 B
assets/js/chunk-web-stories-textset-4-********************.js 4.38 kB 0 B
assets/js/chunk-web-stories-textset-5-********************.js 5.64 kB 0 B
assets/js/chunk-web-stories-textset-6-********************.js 5.43 kB 0 B
assets/js/chunk-web-stories-textset-7-********************.js 10.3 kB 0 B
assets/js/lightbox.js 986 B 0 B
assets/js/tinymce-button.js 3.48 kB 0 B
assets/js/vendors~chunk-ffmpeg-********************.js 5.61 kB -1 B (0%)
assets/js/vendors~edit-story-********************.js 61.4 kB +1 B (0%)
assets/js/vendors~edit-story~stories-dashboard-********************.js 267 kB +3 B (0%)
assets/js/web-stories-activation-notice.js 68.2 kB 0 B
assets/js/web-stories-embed.js 492 B 0 B
assets/js/web-stories-widget.js 984 B 0 B

compressed-size-action

@swissspidy
Copy link
Collaborator

Should we implement delete lock on navigation away from story editor?

Yes, it's an acceptance criteria, see #3126.

Should this feature be behind a feature flag?

Yes, it's an acceptance criteria, see #3126.

Should the links be tracked?

Let's look into tracking towards the end of the work on this feature. Perhaps in a separate PR.

Comment on lines 3 to 5
<!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
<title>Artboard</title>
<desc>Created with Sketch.</desc>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where is this icon coming from? 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's use lock_closed.svg from the design system instead of duplicating files.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I used this icon, but had to do some series hacking around to make it look good, as the icon has one space around it

@swissspidy swissspidy reopened this Mar 18, 2021
@swissspidy swissspidy changed the base branch from _main to main March 18, 2021 18:56
Comment on lines 619 to 621
if ( ! function_exists( 'wp_check_post_lock' ) || ! function_exists( 'wp_set_post_lock' ) ) {
require_once ABSPATH . 'wp-admin/includes/post.php';
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why shouldn't this function already exist? 🤔

We're already in the admin and in the post editor, it should exist at this point, no?

If it's for tests, we could load the file in the test suite instead.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do this elsewhere in the core, just being overly careful. I can remove if it really bothers you. Just worried this function might be called out of context for some reason...

);

// When async call only if dialog is true, current user is loaded and post locking is enabled.
const doGetStoryLock = useCallback(() => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This function is really hard to grasp as it is not very readable and does a lot of things at once.

It might be beneficial to extract parts of it into an effect or something, or splitting this up into two functions.

Can be done in a follow-up PR of course, just wanted to mention it.

A downside of the current approach here is that we first have to do GET request to get the current lock and then a POST request, which seems a bit wasteful (compared to just 1 request to refresh an existing lock)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this whole file is a little bit too big. I was thinking about breaking this into a hook / provider. We can do this later, as you say.

* @param Array $lock Lock array.
* @param WP_REST_Request $request Request object.
*/
return apply_filters( "rest_prepare_{$this->post_type}_lock", $response, $lock, $request );
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we prefix this with web_stories_?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This just follows core's pattern. I can change if you want.

spacedmonkey and others added 2 commits March 22, 2021 20:33
Co-authored-by: Pascal Birchler <[email protected]>
Co-authored-by: Pascal Birchler <[email protected]>
@swissspidy swissspidy changed the title Implement Post Locking MVP Editor: Implement MVP for Post Locking (Story Locking) Mar 23, 2021
@codecov
Copy link

codecov bot commented Mar 24, 2021

Codecov Report

Merging #6497 (935bb08) into main (6e1eb44) will increase coverage by 15.47%.
The diff coverage is 82.68%.

Impacted file tree graph

@@             Coverage Diff             @@
##             main    #6497       +/-   ##
===========================================
+ Coverage   64.58%   80.05%   +15.47%     
===========================================
  Files        1041     1196      +155     
  Lines       16985    22014     +5029     
===========================================
+ Hits        10970    17624     +6654     
+ Misses       6015     4390     -1625     
Flag Coverage Δ
karmatests 72.55% <51.76%> (?)
unittests 64.66% <81.17%> (+0.08%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
assets/src/dashboard/app/api/useStoryApi.js 61.53% <ø> (ø)
assets/src/dashboard/app/serializers/stories.js 100.00% <ø> (ø)
...ts/src/dashboard/app/views/shared/storyGridView.js 100.00% <ø> (+19.23%) ⬆️
assets/src/dashboard/constants/index.js 100.00% <ø> (ø)
assets/src/edit-story/editorApp.js 100.00% <ø> (+100.00%) ⬆️
includes/Dashboard.php 33.08% <0.00%> (ø)
...ackages/e2e-tests/src/plugins/locked-post-mock.php 0.00% <0.00%> (ø)
assets/src/edit-story/app/api/apiProvider.js 48.52% <27.27%> (-4.11%) ⬇️
...s/src/edit-story/app/story/effects/useLoadStory.js 90.32% <66.66%> (+1.03%) ⬆️
...src/dashboard/components/cardGridItem/cardTitle.js 95.83% <87.50%> (-4.17%) ⬇️
... and 499 more

@swissspidy swissspidy merged commit 2769bd6 into main Mar 24, 2021
@swissspidy swissspidy deleted the try/post-locking branch March 24, 2021 11:10
@swissspidy swissspidy mentioned this pull request Mar 24, 2021
10 tasks
@swissspidy swissspidy mentioned this pull request Mar 31, 2021
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Group: Story Locking aka post locking Group: WordPress Changes related to WordPress or Gutenberg integration Type: Enhancement New feature or improvement of an existing feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Implement Post Locking MVP
2 participants