Fix resizing when drawer opens/closes (#3564)

* Fix resizing when drawer opens/closes * Fix containers resizing several times * Extend angular component for horizontal nav * Add first basic test * Add more tests * Add more tests * Remove .only from test file --------- Co-authored-by: Johannes Doberer <[email protected]>
SAP · Dec 8, 2023 · 34f83ed · 34f83ed
1 parent cac6127
commit 34f83ed
Show file tree

Hide file tree

Showing 3 changed files with 178 additions and 13 deletions.
diff --git a/core/src/App.svelte b/core/src/App.svelte
@@ -1070,20 +1070,44 @@
     );
   };
 
-  const resizeMicrofrontendIframe = () => {
+  const resizeMicrofrontendIframe = (resetSize = false) => {
     if (!isResizeMF()) return;
+
     const drawer = document.querySelector('.iframeModalCtn._drawer');
-    const currentMfIframe = IframeHelpers.getCurrentMicrofrontendIframe();
-    if (drawer && currentMfIframe) {
-      //reset computed width
-      currentMfIframe.removeAttribute('style');
-      document.querySelector('div.iframeContainer').removeAttribute('style');
-
-      const { width } = getComputedStyle(drawer);
-      const clientWidth = currentMfIframe.clientWidth;
-      currentMfIframe.setAttribute(
-        'style',
-        `width: calc(${clientWidth}px - ${width})`
+
+    if (!drawer) return;
+
+    const containers = [
+      document.querySelector('div.iframeContainer'),
+      document.getElementById('splitViewContainer'),
+      document.getElementById('splitViewDragger'),
+      document.getElementById('splitViewDraggerBackdrop'),
+      document.getElementById('tabsContainer'),
+    ];
+
+    if (resetSize) {
+      containers.forEach((container) => {
+        container?.style.removeProperty('width');
+      });
+    } else {
+      const { width: drawerWidth } = getComputedStyle(drawer);
+
+      containers.forEach((container) => {
+        setContainerWidth(container, drawerWidth);
+      });
+    }
+  };
+
+  const setContainerWidth = (containerElement, drawerWidth) => {
+    if (
+      containerElement &&
+      // Only change the width if it is not already resized due to a
+      // drawer being opened earlier.
+      !containerElement.style.getPropertyValue('width').includes('calc(')
+    ) {
+      containerElement.style.setProperty(
+        'width',
+        `calc(${containerElement.clientWidth}px - ${drawerWidth})`,
       );
     }
   };
@@ -1128,7 +1152,7 @@
             () => {}
           );
         }
-        IframeHelpers.getCurrentMicrofrontendIframe().removeAttribute('style');
+        resizeMicrofrontendIframe(true);
       } catch (e) {
         console.log(e);
       }

diff --git a/...e-test-application/cypress/e2e/tests/1-angular/luigi-client-link-manager-features-4.cy.js b/...e-test-application/cypress/e2e/tests/1-angular/luigi-client-link-manager-features-4.cy.js
@@ -462,4 +462,127 @@ describe('Luigi Client linkManager Webcomponent, Drawer', () => {
       });
     });
   });
+
+  describe('Drawer Resizing', () => {
+    let $iframeBody;
+    const openDrawerButtonText = 'Open Drawer';
+    const openSplitviewButtonText = 'Open Splitview';
+    const drawerSelector = '.drawer';
+    const mfIframeSelector = 'div.iframeContainerTabNav';
+    const tabNavSelector = '#tabsContainer';
+    const splitViewSelector = '#splitViewContainer';
+
+    function isResizedStatus($element, isResized) {
+      const resizedWidthRegex = /^calc\(/;
+      const elementWidth = $element[0].style.width;
+
+      if (isResized) {
+        expect(elementWidth).to.match(resizedWidthRegex);
+      } else {
+        expect(elementWidth).to.not.match(resizedWidthRegex);
+      }
+      return elementWidth;
+    }
+
+    function expectToBeResized($element) {
+      return isResizedStatus($element, true);
+    }
+
+    function expectToNotBeResized($element) {
+      return isResizedStatus($element, false);
+    }
+
+    beforeEach(() => {
+      cy.visitLoggedIn('/projects/tabNav');
+      cy.getIframeBody().then(result => {
+        $iframeBody = result;
+        cy.expectPathToBe('/projects/tabNav');
+        cy.get(drawerSelector).should('not.exist');
+      });
+    });
+
+    it('does not resize elements before opening the drawer', () => {
+      cy.wrap($iframeBody).contains(openDrawerButtonText);
+
+      cy.get(drawerSelector).should('not.exist');
+
+      cy.get(mfIframeSelector).then($element => {
+        expectToNotBeResized($element);
+      });
+
+      cy.get(tabNavSelector).then($element => {
+        expectToNotBeResized($element);
+      });
+    });
+
+    it('resizes the microfrontend and tab navigation when opening the drawer', () => {
+      cy.wrap($iframeBody)
+        .contains(openDrawerButtonText)
+        .click();
+
+      cy.get(drawerSelector).should('exist');
+
+      cy.get(mfIframeSelector).then($element => {
+        expectToBeResized($element);
+      });
+
+      cy.get(tabNavSelector).then($element => {
+        expectToBeResized($element);
+      });
+    });
+
+    it('resizes the split view when opening the drawer after the split view', () => {
+      cy.wrap($iframeBody)
+        .contains(openSplitviewButtonText)
+        .click();
+
+      cy.wrap($iframeBody)
+        .contains(openDrawerButtonText)
+        .click();
+
+      cy.get(drawerSelector).should('exist');
+
+      cy.get(splitViewSelector).then($element => {
+        expectToBeResized($element);
+      });
+    });
+
+    it('resizes the split view when opening the drawer before the split view', () => {
+      cy.wrap($iframeBody)
+        .contains(openDrawerButtonText)
+        .click();
+
+      cy.wrap($iframeBody)
+        .contains(openSplitviewButtonText)
+        .click();
+
+      cy.get(drawerSelector).should('exist');
+
+      cy.get(splitViewSelector).then($element => {
+        expectToBeResized($element);
+      });
+    });
+
+    it('does not resize several times if the drawer is opened several times', () => {
+      let mfIframeWidthAfterFirstResize;
+
+      cy.wrap($iframeBody)
+        .contains(openDrawerButtonText)
+        .click();
+
+      cy.get(drawerSelector).should('exist');
+
+      cy.get(mfIframeSelector).then($element => {
+        mfIframeWidthAfterFirstResize = expectToBeResized($element);
+      });
+
+      cy.wrap($iframeBody)
+        .contains(openDrawerButtonText)
+        .click();
+
+      cy.get(mfIframeSelector).then($element => {
+        expect(mfIframeWidthAfterFirstResize).to.equal(expectToBeResized($element));
+      });
+    });
+  });
 });
diff --git a/test/e2e-test-application/src/app/project/project.component.html b/test/e2e-test-application/src/app/project/project.component.html
@@ -958,6 +958,24 @@ <h3 class="fd-section__title">Horizontal navigation</h3>
         <p>Horizontal navigation content</p>
       </div>
     </div>
+    <div class="fd-layout-panel fd-margin-top--md">
+      <div class="fd-layout-panel__body">
+        <p>
+          <button
+            class="fd-button fd-margin-end--sm"
+            onclick="LuigiClient.linkManager().openAsSplitView('misc2-isolated', {title: 'Logs', size: 40});"
+          >
+            <span class="fd-button__text">Open Splitview</span>
+          </button>
+          <button
+            class="fd-button"
+            onclick="LuigiClient.linkManager().openAsDrawer('misc2-isolated', {overlap: false})"
+          >
+            <span class="fd-button__text">Open Drawer</span>
+          </button>
+        </p>
+      </div>
+    </div>
   </div>
 
   <!-- Starting Storage Part -->