Add OCA.Files.Sidebar and migrate sharing

[skjnldsv]

If anyone have specific questions about part of a code, feel free to ask me on talk directly!

---

Todo

• Sidebar to vue
• Backbone integration in vue
• Sharing to vue
  • Shared with me message
  • Expiration time left message
  • Sharing input + create new share
  • Sharing links
    • Automatically copy on link creation
    • Default menu + toggles
    • Password generator (cc @rullzer)
    • Pending popover
    • Save/create on menu close
  • Shares list
• Error handling, invalid pass, invalid date...
• Internal link moved to sharing section
• Guests app Update app to fit 18 new Sharing sidebar guests#153
• Migrate the backbone tags
• Social sharing into share link popover Comply to 18 new sharing ui socialsharing#37
• Groupfolders Use new sidebar api to register groupfolders section groupfolders#507
• Needs minor design fix for tags [stable0-12] Fix small issues with actions layout in sidebar in compact mode nextcloud-libraries/nextcloud-vue#636

Bugs

• Tooltip arrow needs a fix (position is calculated but our css is not allowing that)
  
• Clipboard status tooltip not showing on the ActionLink (share link and internal link), this is because of the Actions component v-tooltip that conflicts. Asked the dev about it: https://twitter.com/skjnldsv/status/1149206297923002369. Removing the v-tooltip from Actions works. Other solution would be to force the tooltip to be shown and use the ActionLink default text slot to display the status. But clicking it focus on on another element than the action (fake element for the clipboard library) and therefore make the hover state change and the tooltip disappear.
• Firefox refuse the auto copy for security since the call is not direct (share link creation, then use the mounted function. We should find another way to call it.
• Datepicker can probably prevent picking a date before the current day
• Weird ui when password is on by default (not enforced) and date is enforced. We have the popover to ask for an expire date, and a default password is generated on the background. So when you submit the share creation, it's being generated with a password that the user does not know yet!

APIs

Register new tab

<template>
	<Tab :icon="icon" :name="name" :class="{ 'icon-loading': loading }">
		<!-- Whatever in the tab -->
	</Tab>
</template>
<script>
import Tab from 'nextcloud-vue/dist/Components/AppSidebarTab'
export default {
	name: 'SharingTab',
	components: {
		Tab
	},
	props: {
		// fileInfo will be given by the Sidebar
		fileInfo: {
			type: Object,
			default: () => {},
			required: true
		}
	},
	data() {
		return {
			icon: 'icon-share',
			loading: true,
			name: t('files_sharing', 'Sharing')
		}
	},
	computed: {
		/**
		 * Needed to differenciate the tabs
		 * pulled from the AppSidebarTab component
		 * 
		 * @returns {string}
		 */
		id() {
			return this.name.toLowerCase().replace(/ /g, '-')
		},

		/**
		 * Returns the current active tab
		 * needed because AppSidebarTab also uses $parent.activeTab
		 *
		 * @returns {string}
		 */
		activeTab() {
			return this.$parent.activeTab
		}
	}
}
</script>

import SharingTab from './views/SharingTab'
window.addEventListener('DOMContentLoaded', () => {
	if (OCA.Files && OCA.Files.Sidebar) {
		OCA.Files.Sidebar.registerTab(new OCA.Files.Sidebar.Tab('sharing', SharingTab))
	}
})

Register new external link action in shares link menu (social sharing)

window.addEventListener('DOMContentLoaded', () => {
	if (OCA.Sharing && OCA.Sharing.ExternalLinkActions) {
		OCA.Sharing.ExternalLinkActions.registerAction({
			url: link =>`https://share.diasporafoundation.org/?url=${link}`,
			name: t('socialsharing_facebook', 'Share to  Diaspora'),
			icon: 'icon-social-diaspora'
		});
	}
});

Registering a new section in the sharing tab

OCA.Sharing.ShareTabSections.registerSection((el, fileInfo) => {
	if (fileInfo.mountType !== 'group') {
			return
	}
	return MyVueComponent
})

[skjnldsv]

History was made! :D

[jancborchardt]

where were you when sidebar was merge