Webiny-js: Headless CMS - Add Publish / Save & Publish buttons

[doitadrian]

Instead of a single "Save" button in the form footer, let's remove the footer completely, and move the button to the right side in the form header. We'll call it "Save", the label doesn't change. But we'll also add another button, called "Save and Publish", which will do just that.

This will significantly improve the UI.

P.S. The rest of the actions in the header will be moved to the left side.

[doitadrian]

With this, we should also adjust the form view in general.

1. Make its max height the height of screen.
2. Once the form reaches the screen height, the scrolling will kick in.
3. The header must always be still / visible on the top of the form, so that the user can always access the actions in it.

[Ashu96]

Hey team, @SvenAlHamad @webiny/developers
I need your feedback about the new content form structure

Changes:

1. Now, we will no longer have the footer. The save button is now moved to the form header.
2. There is also a Save & Publish button right beside Save
3. The actions like Revision menu and delete content has been moved to the left side.
4. The Publish action has been removed because now we have Save & Publish

5. Form header is fixed and only the form's body is scrollable (if the content extend beyond the fixed height)

https://www.loom.com/share/c468e08c7f824d98a5b85b89c5b58c0d

---

Question:

The trash/delete icon looks a bit off on the left side. I'm thinking of moving it on the very right side in a 3 dot menu, what are your thoughts on this?

[Pavel910]

@Ashu96 how about adding a dropdown menu like in Page Builder Editor, so we have Save as a button and to the left of it we'd have those 3 dots dropdown button, you can put Delete in there and maybe even Save & Publish. Let's see how that would look like.

EDIT: Oh man I didn't read the last sentence, where you suggest exactly that 😆

[SvenAlHamad]

From my side:

1. I think moving the delete option under the "3 dots" menu is a good approach
2. The scrollable area on the right side, I would expand it to the bottom, like in the page builder. It won't matter if the "plus" button goes over it in this case.
3. For the "save" button I would use "secondary button" style, and for the "save & publish" I would use the primary button style (https://storybook.webiny.com/?path=/story/components-button--standard-buttons)