Merge branch 'btig-issue-333180-replace-classes-menu-expanded' into 'master'

Replace css classes responsive menu

See merge request gitlab-org/gitlab!64470

app/assets/javascripts/main.js

@@ -35,7 +35,6 @@ import GlFieldErrors from './gl_field_errors';
 import initUserPopovers from './user_popovers';
 import initBroadcastNotifications from './broadcast_notification';
 import { initTopNav } from './nav';
-import navEventHub, { EVENT_RESPONSIVE_TOGGLE } from './nav/event_hub';
 
 import 'ee_else_ce/main_ee';
 
@@ -203,11 +202,7 @@ $body.on('ajax:complete, ajax:beforeSend, submit', 'form', function ajaxComplete
 });
 
 $('.navbar-toggler').on('click', () => {
-  // The order is important. The `menu-expanded` is used as a source of truth for now.
-  // This can be simplified when the :combined_menu feature flag is removed.
-  // https://gitlab.com/gitlab-org/gitlab/-/issues/333180
-  $('.header-content').toggleClass('menu-expanded');
-  navEventHub.$emit(EVENT_RESPONSIVE_TOGGLE);
+  document.body.classList.toggle('top-nav-responsive-open');
 });
 
 /**

app/assets/javascripts/nav/components/responsive_app.vue

@@ -2,8 +2,7 @@
 import { FREQUENT_ITEMS_PROJECTS, FREQUENT_ITEMS_GROUPS } from '~/frequent_items/constants';
 import { BV_DROPDOWN_SHOW, BV_DROPDOWN_HIDE } from '~/lib/utils/constants';
 import KeepAliveSlots from '~/vue_shared/components/keep_alive_slots.vue';
-import eventHub, { EVENT_RESPONSIVE_TOGGLE } from '../event_hub';
-import { resetMenuItemsActive, hasMenuExpanded } from '../utils';
+import { resetMenuItemsActive } from '../utils';
 import ResponsiveHeader from './responsive_header.vue';
 import ResponsiveHome from './responsive_home.vue';
 import TopNavContainerView from './top_nav_container_view.vue';
@@ -33,25 +32,14 @@ export default {
     },
   },
   created() {
-    eventHub.$on(EVENT_RESPONSIVE_TOGGLE, this.updateResponsiveOpen);
     this.$root.$on(BV_DROPDOWN_SHOW, this.showMobileOverlay);
     this.$root.$on(BV_DROPDOWN_HIDE, this.hideMobileOverlay);
-
-    this.updateResponsiveOpen();
   },
   beforeDestroy() {
-    eventHub.$off(EVENT_RESPONSIVE_TOGGLE, this.onToggle);
     this.$root.$off(BV_DROPDOWN_SHOW, this.showMobileOverlay);
     this.$root.$off(BV_DROPDOWN_HIDE, this.hideMobileOverlay);
   },
   methods: {
-    updateResponsiveOpen() {
-      if (hasMenuExpanded()) {
-        document.body.classList.add('top-nav-responsive-open');
-      } else {
-        document.body.classList.remove('top-nav-responsive-open');
-      }
-    },
     onMenuItemClick({ view }) {
       if (view) {
         this.activeView = view;

app/assets/javascripts/nav/event_hub.js

-import eventHubFactory from '~/helpers/event_hub_factory';
-
-export const EVENT_RESPONSIVE_TOGGLE = 'top-nav-responsive-toggle';
-
-export default eventHubFactory();

app/assets/javascripts/nav/utils/has_menu_expanded.js

-export const hasMenuExpanded = () =>
-  Boolean(document.querySelector('.header-content.menu-expanded'));

app/assets/javascripts/nav/utils/index.js

-export * from './has_menu_expanded';
 export * from './reset_menu_items_active';

app/assets/stylesheets/framework/header.scss

@@ -27,17 +27,6 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
     display: none;
   }
 
-  .menu-expanded {
-    .more-icon {
-      display: none;
-    }
-
-    .close-icon {
-      display: block;
-      margin: auto;
-    }
-  }
-
   .header-content {
     width: 100%;
     display: flex;
@@ -103,18 +92,6 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
     .navbar-collapse > ul.nav > li:not(.d-none) {
       margin: 0 2px;
     }
-
-    &.menu-expanded {
-      @include media-breakpoint-down(xs) {
-        .hide-when-menu-expanded {
-          display: none;
-        }
-
-        .navbar-collapse {
-          display: flex;
-        }
-      }
-    }
   }
 
   .navbar-collapse {
@@ -673,19 +650,30 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
 }
 
 .top-nav-responsive-open {
-  .hide-when-top-nav-responsive-open {
-    @include media-breakpoint-down(xs) {
+  .more-icon {
+    display: none;
+  }
+
+  .close-icon {
+    display: block;
+    margin: auto;
+  }
+
+  @include media-breakpoint-down(xs) {
+    .navbar-collapse {
+      display: flex;
+    }
+
+    .hide-when-top-nav-responsive-open {
       display: none !important;
     }
-  }
 
-  .top-nav-responsive {
-    @include media-breakpoint-down(xs) {
+    .top-nav-responsive {
       @include gl-display-block;
     }
-  }
 
-  .navbar-gitlab .header-content .title-container {
-    flex: 0;
+    .navbar-gitlab .header-content .title-container {
+      flex: 0;
+    }
   }
 }

app/views/layouts/header/_default.html.haml

@@ -5,7 +5,7 @@
   %a.gl-sr-only.gl-accessibility{ href: "#content-body" } Skip to content
   .container-fluid
     .header-content
-      .title-container.hide-when-menu-expanded
+      .title-container.hide-when-top-nav-responsive-open
         %h1.title
           %span.gl-sr-only GitLab
           = link_to root_path, title: _('Dashboard'), id: 'logo', **tracking_attrs('main_navigation', 'click_gitlab_logo_link', 'navigation') do

spec/frontend/nav/components/responsive_app_spec.js

@@ -3,16 +3,10 @@ import ResponsiveApp from '~/nav/components/responsive_app.vue';
 import ResponsiveHeader from '~/nav/components/responsive_header.vue';
 import ResponsiveHome from '~/nav/components/responsive_home.vue';
 import TopNavContainerView from '~/nav/components/top_nav_container_view.vue';
-import eventHub, { EVENT_RESPONSIVE_TOGGLE } from '~/nav/event_hub';
 import { resetMenuItemsActive } from '~/nav/utils/reset_menu_items_active';
 import KeepAliveSlots from '~/vue_shared/components/keep_alive_slots.vue';
 import { TEST_NAV_DATA } from '../mock_data';
 
-const HTML_HEADER_CONTENT = '<div class="header-content"></div>';
-const HTML_MENU_EXPANDED = '<div class="menu-expanded"></div>';
-const HTML_HEADER_WITH_MENU_EXPANDED =
-  '<div></div><div class="header-content menu-expanded"></div>';
-
 describe('~/nav/components/responsive_app.vue', () => {
   let wrapper;
 
@@ -26,13 +20,10 @@ describe('~/nav/components/responsive_app.vue', () => {
       },
     });
   };
-  const triggerResponsiveToggle = () => eventHub.$emit(EVENT_RESPONSIVE_TOGGLE);
-
   const findHome = () => wrapper.findComponent(ResponsiveHome);
   const findMobileOverlay = () => wrapper.find('[data-testid="mobile-overlay"]');
   const findSubviewHeader = () => wrapper.findComponent(ResponsiveHeader);
   const findSubviewContainer = () => wrapper.findComponent(TopNavContainerView);
-  const hasBodyResponsiveOpen = () => document.body.classList.contains('top-nav-responsive-open');
   const hasMobileOverlayVisible = () => findMobileOverlay().classes('mobile-nav-open');
 
   beforeEach(() => {
@@ -57,23 +48,6 @@ describe('~/nav/components/responsive_app.vue', () => {
       });
     });
 
-    it.each`
-      bodyHtml                          | expectation
-      ${''}                             | ${false}
-      ${HTML_HEADER_CONTENT}            | ${false}
-      ${HTML_MENU_EXPANDED}             | ${false}
-      ${HTML_HEADER_WITH_MENU_EXPANDED} | ${true}
-    `(
-      'with responsive toggle event and html set to $bodyHtml, responsive open = $expectation',
-      ({ bodyHtml, expectation }) => {
-        document.body.innerHTML = bodyHtml;
-
-        triggerResponsiveToggle();
-
-        expect(hasBodyResponsiveOpen()).toBe(expectation);
-      },
-    );
-
     it.each`
       events                                          | expectation
       ${[]}                                           | ${false}
@@ -96,17 +70,6 @@ describe('~/nav/components/responsive_app.vue', () => {
     );
   });
 
-  describe('with menu expanded in body', () => {
-    beforeEach(() => {
-      document.body.innerHTML = HTML_HEADER_WITH_MENU_EXPANDED;
-      createComponent();
-    });
-
-    it('sets the body responsive open', () => {
-      expect(hasBodyResponsiveOpen()).toBe(true);
-    });
-  });
-
   const projectsContainerProps = {
     containerClass: 'gl-px-3',
     frequentItemsDropdownType: ResponsiveApp.FREQUENT_ITEMS_PROJECTS.namespace,
@@ -159,17 +122,4 @@ describe('~/nav/components/responsive_app.vue', () => {
       });
     });
   });
-
-  describe('when destroyed', () => {
-    beforeEach(() => {
-      createComponent();
-      wrapper.destroy();
-    });
-
-    it('responsive toggle event does nothing', () => {
-      triggerResponsiveToggle();
-
-      expect(hasBodyResponsiveOpen()).toBe(false);
-    });
-  });
 });