From 03e10f9569695e436343083a005d2bfdfbcc3351 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@kiteworks.com>
Date: Fri, 20 Sep 2024 08:04:33 +0200
Subject: [PATCH] feat: soothe right sidebar panel transitions

---
 .../enhancement-soothe-sidebar-transitions      |  5 +++++
 .../src/components/SideBar/FileSideBar.vue      | 12 ++++++++++--
 .../web-pkg/src/components/SideBar/SideBar.vue  | 17 ++++++++++++++++-
 .../unit/components/sidebar/FileSideBar.spec.ts |  2 +-
 .../support/objects/app-files/utils/sidebar.ts  | 12 ++++++++++--
 .../e2e/support/objects/runtime/application.ts  |  2 ++
 6 files changed, 44 insertions(+), 6 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-soothe-sidebar-transitions

diff --git a/changelog/unreleased/enhancement-soothe-sidebar-transitions b/changelog/unreleased/enhancement-soothe-sidebar-transitions
new file mode 100644
index 00000000000..abcfc087675
--- /dev/null
+++ b/changelog/unreleased/enhancement-soothe-sidebar-transitions
@@ -0,0 +1,5 @@
+Enhancement: Soothe right sidebar panel transitions
+
+The panel transitions of the right sidebar are a bit smoother now.
+
+https://github.com/owncloud/web/pull/11614
diff --git a/packages/web-pkg/src/components/SideBar/FileSideBar.vue b/packages/web-pkg/src/components/SideBar/FileSideBar.vue
index 560e81635c0..cfe9097a445 100644
--- a/packages/web-pkg/src/components/SideBar/FileSideBar.vue
+++ b/packages/web-pkg/src/components/SideBar/FileSideBar.vue
@@ -13,11 +13,19 @@
     @select-panel="setActiveSideBarPanel"
     @close="closeSideBar"
   >
-    <template #header>
+    <template #rootHeader>
       <file-info
         v-if="isFileHeaderVisible"
         class="sidebar-panel__file_info"
-        :is-sub-panel-active="!!activePanel"
+        :is-sub-panel-active="false"
+      />
+      <space-info v-else-if="isSpaceHeaderVisible" class="sidebar-panel__space_info" />
+    </template>
+    <template #subHeader>
+      <file-info
+        v-if="isFileHeaderVisible"
+        class="sidebar-panel__file_info"
+        :is-sub-panel-active="true"
       />
       <space-info v-else-if="isSpaceHeaderVisible" class="sidebar-panel__space_info" />
     </template>
diff --git a/packages/web-pkg/src/components/SideBar/SideBar.vue b/packages/web-pkg/src/components/SideBar/SideBar.vue
index c004292e2eb..00732bf697e 100644
--- a/packages/web-pkg/src/components/SideBar/SideBar.vue
+++ b/packages/web-pkg/src/components/SideBar/SideBar.vue
@@ -19,7 +19,9 @@
         :data-testid="`sidebar-panel-${panel.name}`"
         :tabindex="activePanelName === panel.name ? -1 : null"
         class="sidebar-panel"
+        :inert="activePanelName !== panel.name"
         :class="{
+          'is-root-panel': panel.isRoot?.(panelContext),
           'is-active-sub-panel': hasActiveSubPanel && activeSubPanelName === panel.name, // only one specific sub panel can be active
           'is-active-root-panel': hasActiveRootPanel && panel.isRoot?.(panelContext) // all root panels are active if no sub panel is active
         }"
@@ -54,7 +56,8 @@
         </div>
 
         <div>
-          <slot name="header" />
+          <slot v-if="panel.isRoot?.(panelContext)" name="rootHeader" />
+          <slot v-else name="subHeader" />
         </div>
         <div class="sidebar-panel__body" :class="[`sidebar-panel__body-${panel.name}`]">
           <div
@@ -329,6 +332,18 @@ export default defineComponent({
     transform: translateX(0);
   }
 
+  &.is-active-root-panel {
+    right: 0 !important;
+    transition: right 0.4s 0s;
+  }
+
+  &.is-root-panel {
+    transform: translateX(0);
+    visibility: visible;
+    transition: right 0.4s 0s;
+    right: 100px;
+  }
+
   .multi-root-panel-separator {
     border-top: 1px solid var(--oc-color-border);
   }
diff --git a/packages/web-pkg/tests/unit/components/sidebar/FileSideBar.spec.ts b/packages/web-pkg/tests/unit/components/sidebar/FileSideBar.spec.ts
index ebb152ab241..4c0f628ffb1 100644
--- a/packages/web-pkg/tests/unit/components/sidebar/FileSideBar.spec.ts
+++ b/packages/web-pkg/tests/unit/components/sidebar/FileSideBar.spec.ts
@@ -19,7 +19,7 @@ import { AncestorMetaDataValue } from '../../../../src'
 
 const InnerSideBarComponent = defineComponent({
   props: { availablePanels: { type: Array, required: true } },
-  template: '<div id="foo"><slot name="header"></slot></div>'
+  template: '<div id="foo"><slot name="rootHeader"></slot></div>'
 })
 
 vi.mock('../../../../src/composables/selection', () => ({ useSelectedResources: vi.fn() }))
diff --git a/tests/e2e/support/objects/app-files/utils/sidebar.ts b/tests/e2e/support/objects/app-files/utils/sidebar.ts
index 08e84ddb851..88b412c96f7 100644
--- a/tests/e2e/support/objects/app-files/utils/sidebar.ts
+++ b/tests/e2e/support/objects/app-files/utils/sidebar.ts
@@ -4,6 +4,8 @@ import { locatorUtils } from '../../../utils'
 
 const contextMenuSelector =
   '//span[@data-test-resource-name="%s"]/ancestor::tr[contains(@class, "oc-tbody-tr")]//button[contains(@class, "resource-table-btn-action-dropdown")]'
+const closeSidebarRootPanelBtn = `#app-sidebar .is-active-root-panel .header__close`
+const closeSidebarSubPanelBtn = `#app-sidebar .is-active-sub-panel .header__close`
 
 const openForResource = async ({
   page,
@@ -48,8 +50,14 @@ export const open = async ({
 }
 
 export const close = async ({ page }: { page: Page }): Promise<void> => {
-  const closeButtonSelector = `//div[contains(@class,"sidebar-panel is-active")]//button[contains(@class,"header__close")]`
-  await page.locator(closeButtonSelector).click()
+  // await sidebar transitions
+  await new Promise((resolve) => setTimeout(resolve, 250))
+  const isSubPanelActive = await page.locator(closeSidebarSubPanelBtn).isVisible()
+  if (isSubPanelActive) {
+    await page.locator(closeSidebarSubPanelBtn).click()
+  } else {
+    await page.locator(closeSidebarRootPanelBtn).click()
+  }
 }
 
 export const openPanel = async ({ page, name }: { page: Page; name: string }): Promise<void> => {
diff --git a/tests/e2e/support/objects/runtime/application.ts b/tests/e2e/support/objects/runtime/application.ts
index 16d94e2f5e8..58a1314b2e1 100644
--- a/tests/e2e/support/objects/runtime/application.ts
+++ b/tests/e2e/support/objects/runtime/application.ts
@@ -71,6 +71,8 @@ export class Application {
   }
 
   async closeSidebar(): Promise<void> {
+    // await sidebar transitions
+    await new Promise((resolve) => setTimeout(resolve, 250))
     const isSubPanelActive = await this.#page.locator(closeSidebarSubPanelBtn).isVisible()
     if (isSubPanelActive) {
       await this.#page.locator(closeSidebarSubPanelBtn).click()