Feat/files sidebar cleanup standards

[skjnldsv]

Long time needed! Before it gets too messy, let's do this!

• This move the Vue requirement and allow any javascript to register a Tab. With this PR we can now have React Tabs for example! 🚀
• The migration of existing tabs isn't too complicated (see Sharing Tab)
• This also remove any dependency between the Sidebar and the Tab, before any library used my the Tab needed to be registered at the Sidebar level. Making it absolutely counter-intuitive and badly implemented.

---

	/**
	 * Create a new tab instance
	 *
	 * @param {Object} options destructuring object
	 * @param {string} options.id the unique id of this tab
	 * @param {string} options.name the translated tab name
	 * @param {string} options.icon the vue component
	 * @param {Function} options.mount function to mount the tab
	 * @param {Function} options.update function to update the tab
	 * @param {Function} options.destroy function to destroy the tab
	 * @param {Function} [options.enabled] define conditions whether this tab is active. Must returns a boolean
	 */
	constructor({ id, name, icon, mount, update, destroy, enabled } = {}) {

[skjnldsv]

With that we should move the comments and version tabs tomorrow @rullzer what do you think? :)

[skjnldsv]

/compile amend /

[rullzer]

sure

[skjnldsv]

Fixed jsunit

[skjnldsv]

Missing reviewer, I thought I saw 2 🤷

[skjnldsv]

Failures unrelated, waiting for last two acceptances tests!
Thanks @danxuliu for the talk pr already! 🚀

[danxuliu]

Thanks @danxuliu for the talk pr already! 🚀

My pleasure :-)

I found an issue, though, but I have not verified yet why it happens, so it may be a bug here or in the changes I made for Talk:

• Disable comments and versions, as they have not been ported yet
• Enable Talk in Adjust Files sidebar tab to changes in server spreed#4291
• Create a file
• Open the File menu actions of the file and click Details, so the sidebar opens on the first tab

The header for the Chat tab will be the active one, but the contents of the tab will show the Sharing contents.

As I said it could very well be a bug in the Talk implementation, so it could be good to disable Talk and instead register a dummy tab which is shown before the Sharing tab to test this.

[danxuliu]

The issue seems to be in this pull request:

• Disable comments and versions, as they have not been ported yet; also disable Talk if it was enabled from a previous test
• Add the following code in apps/files_sharing/src/files_sharing_tab.js before registering the Sharing tab so two dummy tabs are created:

		OCA.Files.Sidebar.registerTab(new OCA.Files.Sidebar.Tab({
			id: 'aaa',
			name: 'Aaa',
			icon: 'icon-file',

			async mount(el, fileInfo, context) {
				const paragraph = document.createElement('p')
				const text = document.createTextNode('Hello world')
				paragraph.append(text)
				el.append(paragraph)
			},
			update(fileInfo) {
			},
			destroy() {
			},
		}))
		OCA.Files.Sidebar.registerTab(new OCA.Files.Sidebar.Tab({
			id: 'aaa2',
			name: 'Aaa2',
			icon: 'icon-file',

			async mount(el, fileInfo, context) {
				const paragraph = document.createElement('p')
				const text = document.createTextNode('Greetings world')
				paragraph.append(text)
				el.append(paragraph)
			},
			update(fileInfo) {
			},
			destroy() {
			},
		}))

• Rebuild JavaScript files
• In the Files app, create a file
• Open the File menu actions of the file and click Details, so the sidebar opens on the first tab

The header for the Aaa tab will be the active one, but the contents of the tab will show the Aaa, Aaa2 and Sharing contents (they might be vertically out of screen due to the min-height: 100% of the contents, check the scrollbar). When another tab is clicked the previous tab contents are hidden, although all those not clicked yet are still shown. Inspecting the DOM it can be seen that after the sidebar was originally opened all the sections were visible, but after selecting a specific tab the previous section style was changed to display: none.

[skjnldsv]

The header for the Aaa tab will be the active one, but the contents of the tab will show the Aaa, Aaa2 and Sharing contents (they might be vertically out of screen due to the min-height: 100% of the contents, check the scrollbar). When another tab is clicked the previous tab contents are hidden, although all those not clicked yet are still shown. Inspecting the DOM it can be seen that after the sidebar was originally opened all the sections were visible, but after selecting a specific tab the previous section style was changed to display: none.

Yes, this is fixed in upstream vue components.
Sorry, forgot about that nextcloud-libraries/nextcloud-vue#1429

[skjnldsv]

• Disable comments and versions, as they have not been ported yet; also disable Talk if it was enabled from a previous test

Also, you can keep them, they are fully compatible with this new API btw :)

[danxuliu]

Yes, this is fixed in upstream vue components.

Cool :-) Should we wait for a new nextcloud-vue release and bump it in this pull request before merging?

Also, you can keep them, they are fully compatible with this new API btw :)

Ah, sorry, I got confused by a previous comment. Great :-)

[danxuliu]

Tested (with nextcloud-libraries/nextcloud-vue#1429) and works 👍

But please do not merge before @skjnldsv had time to answer about the nextcloud-vue bump ;-)

[skjnldsv]

/compile amend /

[skjnldsv]

/compile amend /

[PVince81]

Regression with file renames in share sidebar (and possibly others): #24101