Sidebar panel extension (#10111)

* feat: introduce sidebar panels as extension point

---------

Co-authored-by: Dominik Schmidt <dev@dominik-schmidt.de>
Co-authored-by: Jannik Stehle <jannik.stehle@gmail.com>

changelog/unreleased/enhancement-extensions-sidebar-panels

@@ -0,0 +1,7 @@
+Enhancement: Registering right sidebar panels as extension
+
+Right sidebar panels can now be registered as extensions via our extension registry. They need to be of type `sidebarPanel`.
+The benefit of this is that any app can register additional panels to be shown in the right sidebar while previously the
+available panels were hardcoded.
+
+https://github.com/owncloud/web/pull/10111

changelog/unreleased/enhancement-file-sidebar

@@ -0,0 +1,6 @@
+Enhancement: File sidebar in viewer and editor apps
+
+Viewer and editor apps now have the same right sidebar available like the `files` app.
+This makes in place viewing file details, tagging, sharing, and much more possible.
+
+https://github.com/owncloud/web/pull/10111

packages/web-app-admin-settings/src/components/AppTemplate.vue

@@ -22,17 +22,6 @@
  :per-page-default="perPageDefault"
  per-page-storage-prefix="admin-settings"
  />
- <oc-button
- v-if="sideBarAvailablePanels.length"
- id="files-toggle-sidebar"
- v-oc-tooltip="toggleSidebarButtonLabel"
- :aria-label="toggleSidebarButtonLabel"
- appearance="raw"
- class="oc-my-s oc-p-xs"
- @click.stop="toggleSideBar"
- >
- <oc-icon name="side-bar-right" :fill-type="toggleSidebarButtonIconFillType" />
- </oc-button>
  </div>
  </div>
  <div
@@ -51,12 +40,12 @@
  <slot name="mainContent" />
  </div>
  <side-bar
- v-if="sideBarOpen"
+ v-if="isSideBarOpen"
  :active-panel="sideBarActivePanel"
  :available-panels="sideBarAvailablePanels"
+ :panel-context="sideBarPanelContext"
  :loading="sideBarLoading"
- :open="sideBarOpen"
- :is-header-compact="isSideBarHeaderCompact"
+ :is-open="isSideBarOpen"
  @select-panel="selectPanel"
  @close="closeSideBar"
  >
@@ -70,7 +59,7 @@
 
 <script lang="ts">
 import { perPageDefault, paginationOptions } from 'web-app-admin-settings/src/defaults'
-import { AppLoadingSpinner, SideBar, BatchActions } from '@ownclouders/web-pkg'
+import { AppLoadingSpinner, SideBar, BatchActions, SideBarPanelContext } from '@ownclouders/web-pkg'
 import {
  defineComponent,
  inject,
@@ -84,7 +73,7 @@ import {
 } from 'vue'
 import { eventBus, useAppDefaults } from '@ownclouders/web-pkg'
 import { SideBarEventTopics } from '@ownclouders/web-pkg'
-import { Panel } from '@ownclouders/web-pkg'
+import { SideBarPanel } from '@ownclouders/web-pkg'
 import { BreadcrumbItem } from 'design-system/src/components/OcBreadcrumb/types'
 import { ViewOptions } from '@ownclouders/web-pkg'
 
@@ -100,16 +89,21 @@ export default defineComponent({
  required: true,
  type: Array as PropType<BreadcrumbItem[]>
  },
- sideBarOpen: {
+ isSideBarOpen: {
  required: false,
  type: Boolean,
  default: false
  },
  sideBarAvailablePanels: {
  required: false,
- type: Array as PropType<Panel[]>,
+ type: Array as PropType<SideBarPanel<unknown, unknown, unknown>[]>,
  default: () => []
  },
+ sideBarPanelContext: {
+ required: false,
+ type: Object as PropType<SideBarPanelContext<unknown, unknown, unknown>>,
+ default: () => ({})
+ },
  sideBarActivePanel: {
  required: false,
  type: [String, null],
@@ -125,11 +119,6 @@ export default defineComponent({
  type: Boolean,
  default: false
  },
- isSideBarHeaderCompact: {
- required: false,
- type: Boolean,
- default: false
- },
  showViewOptions: {
  type: Boolean,
  required: false,
@@ -160,7 +149,7 @@ export default defineComponent({
  const appBarRef = ref<VNodeRef>()
  const limitedScreenSpace = ref(false)
  const onResize = () => {
- limitedScreenSpace.value = props.sideBarOpen
+ limitedScreenSpace.value = props.isSideBarOpen
  ? window.innerWidth <= 1600
  : window.innerWidth <= 1200
  }
@@ -169,9 +158,6 @@ export default defineComponent({
  const closeSideBar = () => {
  eventBus.publish(SideBarEventTopics.close)
  }
- const toggleSideBar = () => {
- eventBus.publish(SideBarEventTopics.toggle)
- }
  const selectPanel = (panel) => {
  eventBus.publish(SideBarEventTopics.setActivePanel, panel)
  }
@@ -197,24 +183,13 @@ export default defineComponent({
  appBarRef,
  limitedScreenSpace,
  closeSideBar,
- toggleSideBar,
  selectPanel,
  ...useAppDefaults({
  applicationId: 'admin-settings'
  }),
  perPageDefault,
  paginationOptions
  }
- },
- computed: {
- toggleSidebarButtonLabel() {
- return this.sideBarOpen
- ? this.$gettext('Close sidebar to hide details')
- : this.$gettext('Open sidebar to view details')
- },
- toggleSidebarButtonIconFillType() {
- return this.sideBarOpen ? 'fill' : 'line'
- }
  }
 })
 </script>
@@ -234,15 +209,6 @@ export default defineComponent({
  top: 0;
 }
 
-#files-toggle-sidebar {
- vertical-align: middle;
- border: 3px solid transparent;
- &:hover {
- background-color: var(--oc-color-background-hover);
- border-radius: 3px;
- }
-}
-
 .admin-settings-app-bar-controls {
  height: 52px;