From 4186da876ff701a42e5a07da011d9c7630f78842 Mon Sep 17 00:00:00 2001 From: Robert Swoboda <53216935+Gengar-i@users.noreply.github.com> Date: Fri, 19 Jul 2024 08:47:14 +0200 Subject: [PATCH] IBX-7558: Added posibiity to close navbar menu (#1120) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Bogdan Mazur Co-authored-by: tomaszszopinski Co-authored-by: Michał Grabowski --- .github/workflows/browser-tests.yaml | 30 ++++++++++++-- features/personas/AddLocation.feature | 2 +- features/personas/SubtreeEditor.feature | 3 +- .../public/js/scripts/sidebar/main.menu.js | 40 +++++++++++++++++-- .../BrowserContext/NavigationContext.php | 21 +++++++--- src/lib/Behat/Component/LeftMenu.php | 29 +++++++++++--- 6 files changed, 106 insertions(+), 19 deletions(-) diff --git a/.github/workflows/browser-tests.yaml b/.github/workflows/browser-tests.yaml index c5ba256564..5444b8dc1a 100644 --- a/.github/workflows/browser-tests.yaml +++ b/.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 diff --git a/features/personas/AddLocation.feature b/features/personas/AddLocation.feature index 8c23458b56..6a8654ac38 100644 --- a/features/personas/AddLocation.feature +++ b/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" diff --git a/features/personas/SubtreeEditor.feature b/features/personas/SubtreeEditor.feature index 335b1f94a9..59f50e4dc4 100644 --- a/features/personas/SubtreeEditor.feature +++ b/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 diff --git a/src/bundle/Resources/public/js/scripts/sidebar/main.menu.js b/src/bundle/Resources/public/js/scripts/sidebar/main.menu.js index af569e5837..ed4d696c35 100644 --- a/src/bundle/Resources/public/js/scripts/sidebar/main.menu.js +++ b/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); diff --git a/src/lib/Behat/BrowserContext/NavigationContext.php b/src/lib/Behat/BrowserContext/NavigationContext.php index 7ab2708037..70a31fe16c 100644 --- a/src/lib/Behat/BrowserContext/NavigationContext.php +++ b/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); } /** diff --git a/src/lib/Behat/Component/LeftMenu.php b/src/lib/Behat/Component/LeftMenu.php index d1f359dfcb..d941fae826 100644 --- a/src/lib/Behat/Component/LeftMenu.php +++ b/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'), ]; } }