Enhanced attachments support

[mejo-]

📝 Summary

This PR enhances the attachment sidebar tab.

• Upload/rename/delete attachments
• Upload attachments via drag & drop into sidebar
• Insert attachments into page content via drag & drop
• List files that live in the folder directory as "Files next to page"
• Contributes to Enhanced file management in collectives #1773

Requires nextcloud/text#8238 and nextcloud-libraries/nextcloud-vue#8169 (released).

🖼️ Screenshots

Attachments sidebar	With drop area (on dragover)	Attachment actions	Rename modal

Extra files actions	Extra files info box

🚧 TODO

• Highlight attachments that are embedded in content.
• Allow to undo deleting an attachment.
• Behat tests
• Cypress tests

🏁 Checklist

• Code is properly formatted (npm run lint / npm run stylelint / composer run cs:check)
• Sign-off message is added to all commits
• Tests (unit, integration and/or end-to-end) passing and the changes are covered with tests
• Documentation (README or documentation) has been updated or is not required

[max-nextcloud]

Thanks a lot for tackling this! Looks great already.

Just based on the screenshots I have a few remarks.

Drop zone

I'd say always indicate the possibility to drag files in, even though less prominent. Maybe just [+ Upload] or drag files here.

Files next to page

If I have a Protocols page and a Today subpage that is a plain Today.md file... would the files in the Protocols folder also show in the Today subpage? I assume not - but the wording sounds like they do.

How about we rename the tab to Files and list all files there without separation. Files that have been attached to the page get an extra button next to the three dot menu that shows them in the page. This button could be a pin or an attachment symbol.
We could still sort the attached files to the top. But maybe it's even nicer to have a newly uploaded file on the top so it's easy to find.

[mejo-]

Thanks for the comments @max-nextcloud

If I have a Protocols page and a Today subpage that is a plain Today.md file... would the files in the Protocols folder also show in the Today subpage? I assume not - but the wording sounds like they do.

Good point. It's renamed to "Found in folder now", I think that makes it clearer. Also listing these attachments is rather meant as transition support as in the long run I hope that people find less and less reasons to put files directly into the collectives folder and will use our UI to manage files within collectives.

How about we rename the tab to Files and list all files there without separation. Files that have been attached to the page get an extra button next to the three dot menu that shows them in the page. This button could be a pin or an attachment symbol.

After discussing this a bit with @marcoambrosini we went the other way for now and even have four different lists, each with a caption:

• "In page": attachments from the .attachments folder that are embeeded in the page. Can be renamed/deleted/opened/dragged into page.
• "Not in page": attachments from the .attachments folder that are not embedded in the page (e.g. because uploaded via the attachments sidebar tab). Can be renamed/deleted/opened/dragged into page.
• "Recently deleted": attachments that were embedded and are now removed from the page. This category already existed before and is more or less untouched for now. Can be opened, restored (embedded again in the page) and dragged into page.
• "Found in folder": folder attachments. Can only be opened.

I'd say always indicate the possibility to drag files in, even though less prominent. Maybe just [+ Upload] or drag files here.

@marcoambrosini made the valid point that the upload button is a bit too prominent and could be misinterpreted as the main action to upload stuff to a collective if novice users open the sidebar. Thus we were thinking about moving the upload option to a three-dots menu next to the captions. I'm unsure though which caption menu this would belong to. Next to "in page" would suggest they're embedded in the page after upload. Next to "not in page" might be pushed down by a long "in page" list. Not sure what to do best here.

[Aveyron-RetD]

Hello just a user here who has been using Collectives.
I have few comments regarding files attachment, and I think they could be beneficial for new users.
Thanks, @mejo- for the shoutout and the explanations.

Love the work so far.

I have few user improvements which could be useful for people who lack the Nextcloud file management know how (see #2089 for my remarks) and the differences specific to Collectives

On upload by drag and drop in the file.

• Show the sidebar or show a hint (while the file is uploaded)
• Check if a file with the same name already exist (we do not want duplicate !!) and open the sidebar if there is one. We want to highlight to the user that this files has been uploaded already !

Sidebar
Why not make it clear with a text box in the sidebar that files in this attachment section are read and write to the collectives' member.
(Read/write and delete)

On the sharing section.
Make it clear that files which are present when sharing with no read and write permission the files within this section will be shared without read and write permission.

I would recommend the add to page is added to the attachment actions if it is a first menu.
I would prefer the delete button to be given to admins of the team, so i would recommend putting the delete button in the Extra files action if it is a secondary menu.

And for the future
It would be good if the stuff linked via the smart picker or URLs could be also managed in the sidebar with a link section.
There is a backlink section why not having a link ?
Link on top and backlink after.
The same, a hint is shown when you create a link
Sherry on top would be the links in the sidebar open those links directly in the permission section.

I would add as above a text box in the sidebar that links in this link section are not defined in the collectives and permissions needs to be given directly in the adequate app (Files, Deck, Calendar, tables). With a warning, users might not see the same thing or might not be able to access this data.

My 2 cents as usual.

Keep up the good work

💌

[mejo-]

@max-nextcloud I also addressed your other comment, see commit 251952a

[mejo-]

There's a download button for files that were deleted. But it does not work...

The option was not meant to be there for deleted items, good catch. It was a typo, fixed now.

Opening an attachment in files will show the folder warning "This is best viewed in collectives" - but when opening in collectives one gets an error as it tries to open the .attachments.1233 folder.

That's another good one, but I'd say out of scope for this PR. We actually should make the "Open in Collectives" button strip .attachments.<fileId> from the path that is opened in Collectives. People can navigate to the .attachments.<fileId> folder manually as well in the Files app.

When only one file is attached it's hard to notice a deletion was actually successful. [...] Maybe use grey color and strike out the name for deleted elements? Or add icons / emojis to the Headings.

Agreed. I added an overlay icon to the preview image now to make it more clear visually:

[max-nextcloud]

I think the contrast is too low here for dark images on a light mode and vice versa:

I'm afraid you'll have to use:

Suggested change

	color: var(--color-text-maxcontrast);
	background: rgba(var(--color-main-background-rgb), 0.5);
	color: var(--color-text-maxcontrast-background-blur);
	background: var(--color-main-background-blur);

[mejo-]

Agreed, good idea. Changed, tested and pushed ☺️

[max-nextcloud]

Which looks like this:

[mejo-]

I think that's good enough for now 😉

[max-nextcloud]

Not quite... Sorry.. 😜

it's

		color: var(--color-text-maxcontrast-background-blur);

With the background- in there. Messed that up at first, then corrected my proposal - but you were faster.

[max-nextcloud]

Approving as there's just one small thing remaining from my point of view.