Having to "Edit Original File" is unintuitive compared to SS3 inline editing

[feejin]

When viewing image info the details (Title, Filename etc) appear to be form fields but are not editable, they can only be edited by clicking Edit Original File which opens in a new tab.

It's more noticeable with the FocusPoint module when you want to just make a quick change as soon as you upload the image. Makes for quite a jarring user experience and I have to explain this to non-technical clients.

tl;dr make asset details editable without having to go via Edit Original File.

User story

As a CMS user, I want to be able to stay in the current modal when editing a file, so that I can make quick updates to the file without loosing context of the area related to the file.

Acceptance Criteria

• 'Editing' a file keeps the user in the same modal

• There is a button that initiates the file in a new editable state.

• When editing the file, you can save/publish.

• When editing the file, the other actions are also available (archiving, unpublishing, replacing the file).

• A prompt will warn the user that edits will be applied globally.

• There is a clear flow of inserting the image after editing.

• Editing a file in the modal might change its draft/live state. When you're done editing these changes should be reflected in the rest of the modal.

• This improvement is for the WYSIWYG modal only, and the uploadfield modal should be handled in a separate issue.

Stretch Goal

• Implement this feature in the Upload Field Modal or raise a separate issue for it.

Suggested designs

• https://invis.io/WCMZMHHXRJV#/381953634_Files_Tiny_Insert_Files_new_File_start
• https://invis.io/WCMZMHHXRJV#/381953633_Files_Tiny_Insert_Files_existing_File_start

Pull Requests

• Add some wrappers around the generic ReactStrap button silverstripe-admin#968
• API Register Button and BackButton react component webpack-config#39
• Allow user to edit file information directly in the modal #1038
• Adjust ImageForm logic to support new behaviour to be introduce in silverstripe/assets 1.6 jonom/silverstripe-focuspoint#78 (tweaks focus point module to work with the new image placement form)
• DOC Document new in-modal file editing in changelogs silverstripe-framework#9425
• Reorder recipe-cms test suite to bypass a silly problem with SearchFormTest cwp-recipe-kitchen-sink#63

[maxime-rainville]

That's kind of related to #756 and #785.

@chillu @clarkepaul Might be worthwhile having an epic for the insert media modal of the WYSIWY/UploadField.

[clarkepaul]

The original concept was to have the details editable, but with a confirmation to ensure people know they are edit globally (eg information possibly used in other placements).

[feejin]

@clarkepaul That would make sense, the global edit warning would be good as it's caught people (me) out in the past in SS3.

[undefinedplayer]

Hi, this issue is significantly affecting our product. Wondering if there is any plan to solve this issue. Or is there any way to extend SilverStripe CMS to achieve this?

[lekoala]

Hey just to add a few ideas from my original issue, here is a few things i'd like to be considered:

• there should be a way to edit easily a file details right from the upload field. I don't know for others, but for me, it's very rare to have files used in multiple places, most of the time, a file is linked to one page or one dataobject, which allow me to store/clean files more easily (otherwise, the asset folder tend to become one giant mess). Also, based on ownership, you would know if a global warning is required or not.
• when adding new fields (like, a "credits" field for image), it's more of a global field, it should not require warning and should be easily editable right from the upload field.
• if the extra fields or changes are to be specific to a relation, wouldn't a many_many relation with extraFields make more sense? (and again, easily editable from the upload field, since the file manager wouldn't know about each specific relations)
• previewing files should also be a lot easier (how many times I had to tell a customer how convoluted it is to see the content of their word or pdf document that is linked to a page? yes, click on the "little eye", then click on the download icon ... ah yes, and it doesn't work for draft files! it's like 2 clicks for something that should be a simple click on an icon)

:-) well anyway I think there is room for improvement there!

[clarkepaul]

Thanks @lekoala for the detailed description, this will require some UI changes and it is on our radar to make the improvements. This one is best going through the UX team to review to look at the different options. Totally agree that editing should be possible when uploading a file directly. When it comes to files used in multiple locations we will advise on a solution.

[newleeland]

Potential designs for review

Click the link Editing files:
https://projects.invisionapp.com/dsm/silver-stripe/silver-stripe/folder/components/5c68f96ffb26bb0018525d29

[bscarola]

The feedback link above isn't working for me. Is there any timeline for folding this into a release, or perhaps a temporary work-around? I've finally begun upgrading projects to SS4 and I agree that this is a major workflow issue for a lot of clients.

[clarkepaul]

I've updated the link @bscarola. Looks like its basically turning the readonly fields into standard editable fields. When editing an existing file, I've flagged that there should probably be some sort of messaging to let a user know they might be editing a file which is used in several locations—for uploading that message wouldn't be required.

[lekoala]

hey @clarkepaul is it me or this only covers tinymce/filemanager usage? What about regular upload fields directly visible through getCMSFields?

[clarkepaul]

This should cover both ideally, I'd leave separating it into two issues to whoever picks it up. Thanks for mentioning it @lekoala

[neilcreagh]

Just a quick note to say that I think this should be very high priority. Editing an image title (or focus point) at the moment is a very awkward experience - especially for clients coming from SilverStripe 3 who could do this with one click from the uploadField before (and understood this to be an upgrade to their previous version).

[maxime-rainville]

Just had a chat with @newleeland to talk over his design. The design introduces a somewhat different state in the insert modal to edit the detail of the image. This will probably require a bit more work than if we had just made the current read-only form editable, but it should provide a much nicer experience for the user.

This change will reuse functionality and UI elements uses elsewhere. Changes to the back end logic should be trivial ... juts minor tweaks to FileFormFactory. Most of the work will probably be in React.

Some things to keep in mind when implementing/testing this:

• When editing the file in the insert modal, you can save/publish. The other actions (archiving, unpublishing, replacing the file) will not be available.
• Users who might not have access to edit file, might still insert them. We should not show the button to trigger advanced editing.
• Editing a file in the modal, might change its draft/live state. When you're done editing and these change should be reflected in the rest of the insert modal.

[clarkepaul]

I'd like to see how much more effort this would be as I think it would be really useful functionality.

The other actions (archiving, unpublishing, replacing the file) will not be available.

[maxime-rainville]

I don't think it would be technically difficult. It might add more edge case for us to consider.

The thing I'm not sure is if the user will be in a good head space to make those decision. e.g.: You decide to edit the "about us" page, you decide to replace a file without realising it's use on a bunch of other pages.

[clarkepaul]

That's the same issue when in the files area, at least they have the "used on" tab. The way I see it is that as soon as you go away from the "Placement" view you've changed the mindset of what you are doing.

[clarkepaul]

Thanks @maxime-rainville I'll have a look and get back to you this week.

[maxime-rainville]

@sachajudd Already gave me some feedback and I made a fair bit of progress since I wrote that message. Maybe hold off looking into it until tomorrow. I'll try to get my updates into a presentable state and you can review the greatest and latest.

[lekoala]

@maxime-rainville any update on dealing with UploadFields and allowing editing files from there easily in a customisable fashion?

[martinviolet88]

@maxime-rainville any updates?

[brynwhyman]

Hey @lekoala , @martinviolet88 you could check the related pull requests (in the original description) for some more detail on the progress of the issue. Currently the focus is still being spent on the WYSIWYG modal, before the UploadField modal is looked at.

There's a few related PRs, but if you would like to check these out and provide any feedback/ test notes, that would be much appreciated!

[emteknetnz]

Ran it all of the combined PR's through travis cwp-recipe-kitchen-sink - there was a single regression

https://travis-ci.org/github/creative-commoners/cwp-recipe-kitchen-sink/builds/676011738

Note: ignore the failure in 'recipe_content_blocks' that's an existing failure

Note: this is a kinda special travis build, you can't restart the build to get the latest changes, you need to run composer update on your local and recommit the composer.lock file

[maxime-rainville]

Everything is done. There's a related PR against the focuspoint module. I've let the module maintainer that it's coming.

[maxime-rainville]

FYI The related focus point PR has been merged. jonom/silverstripe-focuspoint#78