update screenshots

Author: chippison

plugins/AIAgents/tests/UI/expected-ui-screenshots/AIAgents_menu.png

@@ -1,3 +1,4 @@
+@_layout-pageWrap-margin: 18px;
 
 .card-content > .row:last-child {
   margin-bottom: 0;
@@ -125,7 +126,7 @@ nav {
 
 #root {
   .pageWrap {
-    width: calc(~'100% - 18px');  // 100% - pageWrap margin
+    width: calc(~'100% - @{_layout-pageWrap-margin}');
     height: fit-content;
     padding-left: 9px;
     padding-right: 9px;
@@ -183,14 +184,6 @@ nav {
       }
     }
 
-    .quickAccessPlaceholder {
-      width: 0;
-      visibility: hidden;
-      display: inline-block;
-      position: relative;
-      margin-right: -1px;
-    }
-
     .piwikTopControl {
       display: inline-block;
       float: none;
@@ -267,7 +260,7 @@ nav {
     }
 
     .pageWrap {
-      width: calc(~'100% - 18px') !important; // 100% - pageWrap margin
+      width: calc(~'100% - @{_layout-pageWrap-margin}') !important;
     }
   }
 
@@ -599,7 +592,7 @@ nav {
 
   #root{
     .layoutWithSidebar--hasSidebar .page > .pageWrap {
-      width: calc(~'100% - 18px') !important; // 100% - pageWrap margin
+      width: calc(~'100% - @{_layout-pageWrap-margin}') !important;
     }
   }
   #content.home,

plugins/CoreHome/stylesheets/layout.less

@@ -1,7 +1,7 @@
 {% macro menu(menu, anchorlink, cssClass, currentModule, currentAction, collapsible, isSuperUser, renderQuickAccess) %}
     <div id="secondNavBar" class="{{ cssClass }} z-depth-1">
         {% if renderQuickAccess|default(false) %}
-            <div vue-entry="CoreHome.QuickAccess" class="piwikTopControl borderedControl"></div>
+            <div vue-entry="CoreHome.QuickAccess" class="piwikTopControl"></div>
         {% endif %}
         <ul class="navbar {% if collapsible %}collapsible collapsible-accordion{% endif %} hide-on-med-and-down" aria-label="{{ 'CoreHome_MainNavigation'|translate|e('html_attr') }}" role="menu">
             {% for level1,level2 in menu %}

plugins/CoreHome/templates/_menu.twig

@@ -1,8 +1,8 @@
 .quick-access {
   position: relative;
-  box-shadow: none !important;
-  border: 1px solid @theme-color-background-lowContrast !important;
-  border-radius: 8px !important;
+  box-shadow: none;
+  border: 1px solid @theme-color-background-lowContrast;
+  border-radius: 8px;
   width: 200px;
 
   &:hover,

plugins/CoreHome/tests/UI/expected-screenshots/VersionInfoHeaderMessage_update_available.png

@@ -107,6 +107,7 @@ import Site from '../SiteSelector/Site';
 import Matomo from '../Matomo/Matomo';
 import debounce from '../debounce';
 import Tooltips from '../Tooltips/Tooltips';
+import { closeMobileLeftMenu } from '../SideNav/SideNav';
 
 const { ListingFormatter } = window;
 
@@ -157,6 +158,7 @@ function scrollFirstElementIntoView(element: HTMLElement) {
 }
 
 export default defineComponent({
+  name: 'QuickAccess',
   directives: {
     FocusAnywhereButHere,
     FocusIf,
@@ -381,12 +383,15 @@ export default defineComponent({
       this.makeSureSelectedItemIsInViewport();
     },
     selectSite(idSite: string|number) {
+      this.deactivateSearch();
+      closeMobileLeftMenu();
       SitesStore.loadSite(idSite);
     },
     selectMenuItem(index: number) {
       const target: HTMLElement|null = document.querySelector(`[quick_access='${index}']`);
       if (target) {
         this.deactivateSearch();
+        closeMobileLeftMenu();
 
         const href = target.getAttribute('href');
         if (href && href.length > 10 && target && target.click) {

plugins/CoreHome/vue/dist/CoreHome.umd.js

@@ -17,6 +17,24 @@ interface SideNavArgs {
   initialized?: boolean;
 }
 
+export function closeMobileLeftMenu(): void {
+  const secondNavBar = document.getElementById('secondNavBar');
+  if (!secondNavBar?.classList.contains('mobileLeftMenuOpen')) {
+    return;
+  }
+
+  const mobileLeftMenu = document.getElementById('mobile-left-menu');
+  if (!mobileLeftMenu) {
+    return;
+  }
+
+  try {
+    window.$(mobileLeftMenu).sidenav('close');
+  } catch (e) {
+    // The mobile sidenav is not initialized outside mobile layouts.
+  }
+}
+
 /**
  * Will activate the materialize side nav feature once rendered. We use this directive as
  * it makes sure the actual left menu is rendered at the time we init the side nav.

plugins/CoreHome/vue/dist/CoreHome.umd.min.js

@@ -36,26 +36,30 @@ describe("PluginsAdmin", function () {
 
     await page.waitForNetworkIdle();
     await page.waitForTimeout(200);
+    const text = await page.$eval(
+      '#secondNavBar .navbar .menuTab.active .item.manage-plugins',
+      (el) => el.textContent.trim(),
+    );
 
-    expect(await page.screenshotSelector('#secondNavBar')).to.matchImage('plugins_update_menu');
+    expect(text).to.contain('2')
   });
 
   it('should load the plugins admin page correctly when internet disabled', async function () {
-    testEnvironment.overrideConfig('General', {
+    await testEnvironment.overrideConfig('General', {
       enable_internet_features: 0
     });
-    testEnvironment.save();
+    await testEnvironment.save();
 
     await page.goto("?" + generalParams + "&module=CorePluginsAdmin&action=plugins");
 
     expect(await screenshotPageWrap()).to.matchImage('plugins_no_internet');
   });
 
   it('should load the plugins admin page correctly when admin disabled', async function () {
-    testEnvironment.overrideConfig('General', {
+    await testEnvironment.overrideConfig('General', {
       enable_plugins_admin: 0
     });
-    testEnvironment.save();
+    await testEnvironment.save();
 
     await page.goto("?" + generalParams + "&module=CorePluginsAdmin&action=plugins");