Right sidebar has no tab headers anymore on the files app when activity app is enabled

[nickvergessen]

Since this is merged, the right sidebar has no tab headers anymore on the files app:

$ git bisect good
9dc8e75bf2b1302d954aa7a77916372488b5fa32 is the first bad commit
commit 9dc8e75bf2b1302d954aa7a77916372488b5fa32
Author: Christopher Ng <[email protected]>
Date:   Mon Apr 24 16:14:15 2023 -0700

    Bump @nextcloud/vue from 7.8.0 to 7.10.0
    
    Signed-off-by: Christopher Ng <[email protected]>

 dist/core-common.js     | Bin 15071827 -> 15173921 bytes
 dist/core-common.js.map | Bin 30132375 -> 30462285 bytes
 package-lock.json       | 311 ++++++++++++++++++++++++++++++++++++++++++------
 package.json            |   2 +-
 4 files changed, 275 insertions(+), 38 deletions(-)

Console is glowing red:

TypeError: e is null
    VueJS 3
    renderIcon NcAppSidebarTab.js:2
    B NcAppSidebar.js:2
    Xe VueJS
    B NcAppSidebar.js:2
    VueJS 14
    i Sidebar.vue:435
    d runtime.js:24
    t runtime.js:267
    T runtime.js:85
    E LegacyView.vue:19
    s LegacyView.vue:19
    promise callback*E LegacyView.vue:19
    s LegacyView.vue:19
    P LegacyView.vue:19
    P LegacyView.vue:19
    open Sidebar.vue:425
    _updateDetailsView filelist.js:709
    actionHandler filelist.js:588
    action fileactions.js:136
    _onClickFile filelist.js:934
    Underscore 3
    jQuery 10
    initialize filelist.js:386
    FileList filelist.js:32
    initialize app.js:83
    <anonymous> app.js:400
    Underscore 5
    <anonymous> app.js:399
    EventListener.handleEvent* app.js:396
vue.runtime.esm.js:3018:57

Only happens when "legacy sidebar" apps are enable, e.g. the default shipped app activity

Originally posted by @nickvergessen in #37910 (comment)

[nickvergessen]

cc @Pytal @szaimen @skjnldsv

[szaimen]

Cc @nextcloud/server-frontend

[Pytal]

Fixed in nextcloud/activity#1167

[nickvergessen]

So there is a breaking API change in a patch release and it not raised in the docs or the issue for developers.
Can that also be fixed? 😅

[skjnldsv]

breaking API change in a patch release

link ?

[nickvergessen]

link ?

The activity app did work fine in 26.0.1 and breaks the files app due to a server change/update in 26.0.2

Looking through the Vue lib this here sounds as most-related: nextcloud-libraries/nextcloud-vue#3891

cc @ShGKme

[ShGKme]

So there is a breaking API change
or the issue for developers.

In nextcloud-libraries/nextcloud-vue#3891 API wasn't changed, NcAppSidebarTab still supports the icon prop with CSS icon as a fallback of the #icon slot. It works in styleguidist and any app, that renders the sidebar with tabs.

A bug is interesting.

The icon is rendered by NcAppSidebarTab.renderIcon() in NcAppSidebarTabs. It seems to me when it is used with OCA.Files.Sidebar (and maybe LegacyView), Tabs and Tab components are rendered by different Vue copies on the page (on my instance 24 different copies of Vue are bundled).

As a result, when NcAppSidebarTab.renderIcon() is called in NcAppSidebarTabs's rendering, it doesn't know about the rendering. NcAppSidebarTab.renderIcon() creates VNode in one Vue copy, but is used in rendering in another Vue copy. It fails, because for NcAppSidebarTab.renderIcon() there is no rendering in the first Vue copy

Currently, I cannot prove it with a detailed explanation, but I'm sure for 95% 😅

Fixed in nextcloud/activity#1167

These problems are different. Originally that PR fixes a problem caused by the regression of the new tabs design (with NcCheckboxRadioSwitch) in 8.0.0. Styles for CSS icons were lost.

Nevertheless, that PR also resolves this issue, because this issue is about CSS icons while the PR changes a CSS icon to a SVG in a slot.