IBX-7558: Added posibiity to close navbar menu (#1120)

Co-authored-by: Bogdan Mazur <bogdanmazur@ez.no>
Co-authored-by: tomaszszopinski <tomasz.szopinski@ez.no>
Co-authored-by: Michał Grabowski <michal.grabowski@ibexa.co>

.github/workflows/browser-tests.yaml

@@ -8,18 +8,42 @@ on:
     pull_request: ~
 
 jobs:
-    admin-ui:
-        name: "AdminUI"
+    admin-ui-oss-headless:
+        name: "AdminUI-OSS/Headless"
         uses: ibexa/gh-workflows/.github/workflows/browser-tests.yml@main
         with:
             project-edition: 'oss'
-            test-suite:  '--profile=browser --suite=admin-ui-full'
+            test-suite: '--profile=browser --suite=admin-ui-full --tags=@IbexaOSS,@IbexaHeadless'
             test-setup-phase-1: '--profile=setup --suite=personas --mode=standard'
             test-setup-phase-2: '--profile=setup --suite=content-translation --mode=standard'
             job-count: 2
             timeout: 40
         secrets:
+            SATIS_NETWORK_KEY: ${{ secrets.SATIS_NETWORK_KEY }}
+            SATIS_NETWORK_TOKEN: ${{ secrets.SATIS_NETWORK_TOKEN }}
+            TRAVIS_GITHUB_TOKEN: ${{ secrets.TRAVIS_GITHUB_TOKEN }}
+            SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+            AUTOMATION_CLIENT_ID: ${{ secrets.AUTOMATION_CLIENT_ID }}
+            AUTOMATION_CLIENT_INSTALLATION: ${{ secrets.AUTOMATION_CLIENT_INSTALLATION }}
+            AUTOMATION_CLIENT_SECRET: ${{ secrets.AUTOMATION_CLIENT_SECRET }}
+    admin-ui-experience-commerce:
+        name: "AdminUI-Experience/Commerce"
+        uses: ibexa/gh-workflows/.github/workflows/browser-tests.yml@main
+        with:
+            project-edition: 'experience'
+            test-suite: '--profile=browser --suite=admin-ui-full --tags=@IbexaExperience,@IbexaCommerce'
+            test-setup-phase-1: '--profile=setup --suite=personas --mode=standard'
+            test-setup-phase-2: '--profile=setup --suite=content-translation --mode=standard'
+            job-count: 2
+            timeout: 40
+        secrets:
+            SATIS_NETWORK_KEY: ${{ secrets.SATIS_NETWORK_KEY }}
+            SATIS_NETWORK_TOKEN: ${{ secrets.SATIS_NETWORK_TOKEN }}
+            TRAVIS_GITHUB_TOKEN: ${{ secrets.TRAVIS_GITHUB_TOKEN }}
             SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+            AUTOMATION_CLIENT_ID: ${{ secrets.AUTOMATION_CLIENT_ID }}
+            AUTOMATION_CLIENT_INSTALLATION: ${{ secrets.AUTOMATION_CLIENT_INSTALLATION }}
+            AUTOMATION_CLIENT_SECRET: ${{ secrets.AUTOMATION_CLIENT_SECRET }}
     page-builder:
         name: "Basic Page Builder tests"
         uses: ibexa/gh-workflows/.github/workflows/browser-tests.yml@main

features/personas/AddLocation.feature

@@ -1,7 +1,7 @@
 @javascript @addLocation
 Feature: Verify that an Editor with content type limitation on content/create policy can add location
 
-  @IbexaOSS @IbexaHeadless @IbexaExperience @IbexaCommerce
+  @IbexaExperience @IbexaCommerce
   Scenario: I can add location
     Given I open Login page in admin siteaccess
     And I log in as "Add" with password "Passw0rd-42"

features/personas/SubtreeEditor.feature

@@ -1,9 +1,10 @@
-@javascript @subtreeEditor @IbexaOSS @IbexaHeadless @IbexaExperience @IbexaCommerce
+@javascript @subtreeEditor @IbexaExperience @IbexaCommerce
 Feature: Verify that an Editor with Subtree limitations can perform all his tasks
 
   Background:
     Given I open Login page in admin SiteAccess
     And I log in as "SubtreeEditor" with password "Passw0rd-42"
+    And I am using the DXP with Focus mode disabled
     And I should be on "Dashboard" page
     And I go to "Content structure" in "Content" tab
 

src/bundle/Resources/public/js/scripts/sidebar/main.menu.js

@@ -3,6 +3,7 @@
     const SECOND_LEVEL_EXPANDED_WIDTH = 220;
     const SECOND_LEVEL_MANUAL_RESIZE_MIN_WIDTH = 80;
     const mainMenuNode = doc.querySelector('.ibexa-main-menu');
+    let activeItemName = null;
 
     if (!mainMenuNode) {
         return;
@@ -15,6 +16,8 @@
     const adaptiveMenuItemsContainer = firstLevelMenuNode.querySelector('.ibexa-adaptive-items');
     const selectorItem = firstLevelMenuNode.querySelector('.ibexa-adaptive-items__item--selector');
     const adaptiveItemsToPopup = firstLevelMenuNode.querySelectorAll('.ibexa-adaptive-items__item');
+    const navAnchorItems = firstLevelMenuNode.querySelectorAll('.ibexa-main-menu__item-action');
+    const activeItem = [...navAnchorItems].find((el) => el.classList.contains('active'));
     const popupItemsToGenerate = [...adaptiveItemsToPopup].map((item) => {
         const actionItem = item.querySelector('.ibexa-main-menu__item-action');
         const name = item.dataset.itemName;
@@ -39,11 +42,35 @@
 
         doc.removeEventListener('mousemove', collapseSecondLevelMenu);
     };
-    const showSecondLevelMenu = ({ currentTarget }) => {
+    const switchSubMenuDisplay = ({ currentTarget }) => {
         if (!currentTarget.dataset.bsToggle) {
             return;
         }
 
+        const { itemName } = currentTarget.parentNode.dataset;
+
+        if (activeItemName === itemName) {
+            const animationController = new AbortController();
+            const { signal } = animationController;
+
+            secondLevelMenuNode.addEventListener(
+                'transitionend',
+                () => {
+                    secondLevelMenuNode.classList.add('ibexa-main-menu__navbar--hidden');
+                    animationController.abort();
+                },
+                { signal },
+            );
+
+            currentTarget.classList.remove('active');
+            secondLevelMenuNode.style.width = 0;
+            activeItemName = null;
+
+            return;
+        }
+
+        activeItemName = itemName;
+
         firstLevelMenuNode.classList.add('ibexa-main-menu__navbar--collapsed');
         secondLevelMenuNode.classList.remove('ibexa-main-menu__navbar--hidden');
 
@@ -54,6 +81,12 @@
 
             doc.addEventListener('mousemove', collapseSecondLevelMenu, false);
         } else {
+            const secondLevelMenuWidth = ibexa.helpers.cookies.getCookie('ibexa-aui_menu-secondary-width');
+
+            if (!secondLevelMenuWidth) {
+                ibexa.helpers.cookies.setBackOfficeCookie('ibexa-aui_menu-secondary-width', SECOND_LEVEL_EXPANDED_WIDTH);
+            }
+
             setWidthOfSecondLevelMenu();
         }
     };
@@ -138,9 +171,8 @@
 
     parseMenuTitles();
 
-    firstLevelMenuNode.querySelectorAll('.ibexa-main-menu__item-action').forEach((button) => {
-        button.addEventListener('click', showSecondLevelMenu, false);
-    });
+    activeItemName = activeItem?.parentNode.dataset.itemName ?? null;
+    navAnchorItems.forEach((button) => button.addEventListener('click', switchSubMenuDisplay, false));
 
     secondLevelMenuNode.querySelector('.ibexa-main-menu__toggler').addEventListener('click', toggleSecondLevelMenu, false);
     secondLevelMenuNode.querySelector('.ibexa-main-menu__resizer').addEventListener('mousedown', addResizeListeners, false);

src/lib/Behat/BrowserContext/NavigationContext.php

@@ -95,15 +95,26 @@ public function iAmOnPage(string $pageName): void
 
     /**
      * @Then I go to :tab tab
-     * @Then I go to :subTab in :tab tab
      */
-    public function iGoToTab(string $tabName, string $subTab = null): void
+    public function iGoToTab(string $tabName): void
     {
         $this->leftMenu->goToTab($tabName);
+    }
 
-        if (null !== $subTab) {
-            $this->leftMenu->goToSubTab($subTab);
-        }
+    /**
+     * @Then I go to :subTab in :tab tab
+     */
+    public function iGoToSubTab(string $tab, string $subTab): void
+    {
+        $this->leftMenu->goToSubTab($tab, $subTab);
+    }
+
+    /**
+     * @Then I change subtab to :subTab
+     */
+    public function iChangeSubTab(string $subTab): void
+    {
+        $this->leftMenu->changeSubTab($subTab);
     }
 
     /**

src/lib/Behat/Component/LeftMenu.php

@@ -11,26 +11,43 @@
 use Ibexa\Behat\Browser\Component\Component;
 use Ibexa\Behat\Browser\Element\Criterion\ElementAttributeCriterion;
 use Ibexa\Behat\Browser\Element\Criterion\ElementTextCriterion;
+use Ibexa\Behat\Browser\Locator\CSSLocator;
 use Ibexa\Behat\Browser\Locator\VisibleCSSLocator;
 
 class LeftMenu extends Component
 {
     public function goToTab(string $tabName): void
     {
-        $menuButton = $this->getHTMLPage()
+        $menuButton = $this->getHTMLPage()->setTimeout(5)
             ->findAll($this->getLocator('menuItem'))
             ->getByCriterion(new ElementAttributeCriterion('data-original-title', $tabName));
         $menuButton->click();
         $menuButton->find(new VisibleCSSLocator('activeMarker', '.ibexa-main-menu__item-action.active'))->assert()->isVisible();
     }
 
-    public function goToSubTab(string $tabName): void
+    public function goToSubTab(string $tabName, string $subTabName): void
     {
-        $this->getHTMLPage()->find($this->getLocator('menuSecondLevel'))->mouseOver();
+        $menuButton = $this->getHTMLPage()->setTimeout(5)
+            ->findAll($this->getLocator('menuItem'))
+            ->getByCriterion(new ElementAttributeCriterion('data-original-title', $tabName));
 
+        $menuButton->mouseOver();
+        $menuButton->click();
+        $this->getHTMLPage()
+            ->setTimeout(5)->find($this->getLocator('menuSecondLevel'))->mouseOver();
+        $this->getHTMLPage()->setTimeout(5)
+            ->findAll($this->getLocator('expandedMenuItem'))
+            ->getByCriterion(new ElementTextCriterion($subTabName))
+            ->click();
+    }
+
+    public function changeSubTab(string $subTabName): void
+    {
         $this->getHTMLPage()
+            ->setTimeout(5)->find($this->getLocator('menuSecondLevel'))->mouseOver();
+        $this->getHTMLPage()->setTimeout(5)
             ->findAll($this->getLocator('expandedMenuItem'))
-            ->getByCriterion(new ElementTextCriterion($tabName))
+            ->getByCriterion(new ElementTextCriterion($subTabName))
             ->click();
     }
 
@@ -51,8 +68,10 @@ protected function specifyLocators(): array
             new VisibleCSSLocator('expandedMenuItem', '.ibexa-main-menu__navbar--second-level .ibexa-main-menu__tab-pane.active.show .ibexa-main-menu__item-text-column'),
             new VisibleCSSLocator('menuSelector', '.ibexa-main-menu'),
             new VisibleCSSLocator('menuFirstLevel', '.ibexa-main-menu__navbar--first-level'),
-            new VisibleCSSLocator('menuSecondLevel', '.ibexa-main-menu__navbar--second-level'),
+            new VisibleCSSLocator('menuSecondLevel', '.ibexa-main-menu__navbar--second-level:not(.ibexa-main-menu__navbar--hidden)'),
+            new CSSLocator('retractedMenu', '.ibexa-main-menu__navbar--second-level.ibexa-main-menu__navbar--hidden'),
             new VisibleCSSLocator('menuToggler', '.ibexa-main-menu__toggler'),
+            new VisibleCSSLocator('dashboardIcon', '.ibexa-main-header__brand'),
         ];
     }
 }