feat: open edit file popup from file widget

[fabien-michel]

Description

Add an edit button to file widget which open the edit file popup.

There is a UI change the pencil button now open the edit file popup. The existing lookup button now has a file icon.

Related resources

• https://discourse.django-cms.org/t/allow-to-enter-edit-form-of-django-filers-file-from-widget/238

Checklist

• I have opened this pull request against master
• I have added or modified the tests when changing logic
• I have followed the conventional commits guidelines to add meaningful information into the changelog
• I have read the contribution guidelines and I have joined #workgroup-pr-review on
  Slack to find a “pr review buddy” who is going to review my pull request.

[codecov]

Codecov Report

Merging #1301 (f585c1c) into master (76c69f1) will increase coverage by 0.70%.
The diff coverage is 90.00%.

@@            Coverage Diff             @@
##           master    #1301      +/-   ##
==========================================
+ Coverage   72.54%   73.25%   +0.70%     
==========================================
  Files          73       73              
  Lines        3311     3320       +9     
  Branches      538      540       +2     
==========================================
+ Hits         2402     2432      +30     
+ Misses        742      717      -25     
- Partials      167      171       +4     

Impacted Files	Coverage Δ
filer/admin/fileadmin.py	80.72% <75.00%> (+1.97%)	⬆️
filer/admin/tools.py	80.48% <100.00%> (+1.00%)	⬆️
filer/fields/file.py	64.44% <100.00%> (+21.26%)	⬆️

... and 1 file with indirect coverage changes

[marksweb]

This sounds really useful. I'll install this & give it a go 👍

[Will-Hoey]

@marksweb @fabien-michel Is there any update on this? Found this PR recently and I have a use case for this so would love to get it into a release!

[marksweb]

@Will-Hoey I don't think I ever had time to install this.

It's the kind of thing I may be able to squeeze in later, but my Internet is down today. So 🤞

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[fabien-michel]

Ping !

[benzkji]

a pity that such useful things just get lost

[fabien-michel]

The PR is now in sync with master and with small fix for latest djangocms

[fsbraun]

I put it on our sprint list for tomorrow and Friday.

[fsbraun]

@fabien-michel Can you also quickly look at the small flake8 issues? Thanks!

[fabien-michel]

Is anything else need to be done ? (sorry I'm not use to contribute)

[fsbraun]

Will look later today!

[fsbraun]

Hm. Does not seem to work for me:

1. I get CSS problems with an empty field (see image below)
2. I lose the option to choose a new file (see 2nd image)

Am I doing something wrong?

(the missing thumbnail problem is not due to the pull request but due to my setup.)

[fabien-michel]

OK, my PR was missing compiled CSS. Sorry for the inconvenience, should be ok now.

[fabien-michel]

I need help to make the static/filer/js/addons/filer_popup_response file pass linting. I've tried many things without success.
This file mimic what is done in the file https://github.com/django/django/blob/main/django/contrib/admin/static/admin/js/popup_response.js from django code.
The linter doesn't pass using the const keyword, but using var force it to be at top. Doing that make tests:unit task to fail probably because detected as "null"

[fsbraun]

Hi @fabien-michel ! What a very nice PR! Thank you so much!

I've added two comments:

• When no file is selected the button "Chose file" shows an icon with an image. For consistency, would that be the icon to show on the button to replace the file?
• I still have the styling problem. Maybe the space for the icons is too smal?
• As an additional thought: I never got the idea of opening the image or file by clicking on the icon. Maybe it is worth considering that clicking the icon should also trigger the "replace-file" popup? What's your opinion on that.

Finally, do not worry about the js linting. I've got a PR coming up that updates the gulp build process to node 16. I will resolve this issue then.

[fsbraun]

Since the test coverage is rather mediocre in this repo, adding a test that checks if the file widget provides the right URL would also be a great.

[benzkji]

I would propose a magnifier icon for searching/replacing a file, and the pencil to open the file's change view in the popup.

[fsbraun]

One last thing: The margins between the buttons on the right differ: (15px and 10px). Maybe both 10px?

[fabien-michel]

One last thing: The margins between the buttons on the right differ: (15px and 10px). Maybe both 10px?

🤔 I thought I had fixed this

[fabien-michel]

One last thing: The margins between the buttons on the right differ: (15px and 10px). Maybe both 10px?

I can't reproduce. Can you double-check ? May be its a cache issue ?

[fabien-michel]

My guess is that the problem is related to an update of django, djangocms or djangocms_admin_style. (so we have a different version)

But I can't find where the 15px margin-left you see on .related-lookup is coming from.
Native django is to 5px (https://github.com/django/django/blame/549d6ffeb6d626b023acc40c3bb2093b4b25b3d6/django/contrib/admin/static/admin/css/forms.css#LL509C22-L509C22)
djangocms_admin_style is to 10px https://github.com/django-cms/djangocms-admin-style/blob/b38d2b0b3a9db80112c7fc63f313fa671fdd0ad0/djangocms_admin_style/sass/components/_forms.scss#L88

Any idea ?

[fsbraun]

Here's Safari's trace:

Clearly, it comes from Django. Maybe your form is set up differently. It's dependent on the fieldset's aligned class. I'd suggest fixing both margins to 10px for filer (and overwriting Django's style). This way it'll be consistent.

[fabien-michel]

👌 Thanks for your time on this PR