Backend request before registering tab in OCA.Files.Sidebar ?

Hello there,

I’m looking to add a new tab for custom application in OCA.Files.Sidebar, no problem with this.

But my problem is, that I want to conditionnally registering this tab (aka, this tab appear only on specific file details, depending on a response from backend request)

Using the mount() hook seems working, but the only difference here, is that the tab is filled / empty depending on the request response.

There is a way to “hide” / “show” the tab, instead of showing an empty content is requirements not meet on this file ?

Because I need the fileId to send the request, I can’t do this before registerTab (fileInfo not available here)

I tried many things:

  • listen events such as open, opening, but seems not fired ;
  • update a variable when selected file changes, but too many requests ;
  • using enable hook, but not working because of async/await requests ;

Here is my final code, that works but always show the tab empty / filled:

import Vue from 'vue'
import axios from '@nextcloud/axios'

import { generateOcsUrl } from '@nextcloud/router'
import { translate, translatePlural } from 'nextcloud-l10n'

import MyTab from './views/MyTab.vue'

Vue.prototype.t = translate
Vue.prototype.n = translatePlural

const View = Vue.extend(MyTab)
let tabInstance = null

window.addEventListener('DOMContentLoaded', function() {
	if (OCA.Files && OCA.Files.Sidebar) {
		const myTab = new OCA.Files.Sidebar.Tab({
			id: 'myapptab',
			name: t('myapp', 'MyTab'),
			icon: 'icon-rename',

			mount(el, fileInfo, context) {
				if (tabInstance) {
					tabInstance.$destroy()
				}

				if (fileInfo && fileInfo.mountType === "external") {
					const url = generateOcsUrl('apps/myapp/check-storage-type?fileId=' + fileInfo.id, 2)

					axios.get(url).then((response) => {
						if (response.data.success) {
							if (response.data.configuration.is_type_one) {
								tabInstance = new View({
									parent: context,
								})
								
								tabInstance.setExternalStorageConfiguration(response.data.configuration)
								tabInstance.setFileInfo(fileInfo)			
								tabInstance.$mount(el)
							} else {
								console.log('not specific storage type')
							}
						}

					}).catch((error) => {
						console.error(error)
					})
				} else {
					console.log('not external storage')
					tabInstance.$destroy()
				}
			},

			update(fileInfo) {
				tabInstance.setFileInfo(fileInfo)
			},

			destroy() {
				tabInstance.$destroy()
				tabInstance = null
			},
		})

		OCA.Files.Sidebar.registerTab(myTab)
	}
})

Do you have another approact to achieve this ?
Thanks for your help!

Honestly, I am unable to help as this is too far in the Files app for me. I would ping @susnux and ask who might be able to help here. Can you forward/ping someone if you are a bad fit for this question?