fix: admin mode UI buttons missing on bigger screen sizes

Additionally, corrected capitalization of admin mode buttons message

app/views/admin/sessions/_new_base.html.haml

@@ -4,4 +4,4 @@
     = password_field_tag :password, nil, class: 'form-control', required: true, title: _('This field is required.'), data: { qa_selector: 'password_field' }
 
   .submit-container.move-submit-down
-    = submit_tag _('Enter admin mode'), class: 'btn btn-success', data: { qa_selector: 'sign_in_button' }
+    = submit_tag _('Enter Admin Mode'), class: 'btn btn-success', data: { qa_selector: 'sign_in_button' }

app/views/admin/sessions/_tabs_normal.html.haml

 %ul.nav-links.new-session-tabs.nav-tabs.nav{ role: 'tablist' }
   %li.nav-item{ role: 'presentation' }
-    %a.nav-link.active{ href: '#login-pane', data: { toggle: 'tab', qa_selector: 'sign_in_tab' }, role: 'tab' }= _('Enter admin mode')
+    %a.nav-link.active{ href: '#login-pane', data: { toggle: 'tab', qa_selector: 'sign_in_tab' }, role: 'tab' }= _('Enter Admin Mode')

app/views/admin/sessions/new.html.haml

 - @hide_breadcrumbs = true
-- page_title _('Enter admin mode')
+- page_title _('Enter Admin Mode')
 
 .row.justify-content-center
   .col-6.new-session-forms-container

app/views/layouts/nav/_dashboard.html.haml

@@ -55,15 +55,15 @@
             = nav_link(controller: 'admin/dashboard') do
               = link_to admin_root_path, class: 'admin-icon qa-admin-area-link d-xl-none' do
                 = _('Admin Area')
-            - if Feature.enabled?(:user_mode_in_session)
-              - if header_link?(:admin_mode)
-                = nav_link(controller: 'admin/sessions') do
-                  = link_to destroy_admin_session_path, class: 'd-lg-none lock-open-icon' do
-                    = _('Leave admin mode')
-              - elsif current_user.admin?
-                = nav_link(controller: 'admin/sessions') do
-                  = link_to new_admin_session_path, class: 'd-lg-none lock-icon' do
-                    = _('Enter admin mode')
+          - if Feature.enabled?(:user_mode_in_session)
+            - if header_link?(:admin_mode)
+              = nav_link(controller: 'admin/sessions') do
+                = link_to destroy_admin_session_path, class: 'd-lg-none lock-open-icon' do
+                  = _('Leave Admin Mode')
+            - elsif current_user.admin?
+              = nav_link(controller: 'admin/sessions') do
+                = link_to new_admin_session_path, class: 'd-lg-none lock-icon' do
+                  = _('Enter Admin Mode')
           - if Gitlab::Sherlock.enabled?
             %li
               = link_to sherlock_transactions_path, class: 'admin-icon' do
@@ -74,6 +74,15 @@
       = link_to admin_root_path, class: 'admin-icon qa-admin-area-link', title: _('Admin Area'), aria: { label: _('Admin Area') }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
         = sprite_icon('admin', size: 18)
 
+  - if Feature.enabled?(:user_mode_in_session)
+    - if header_link?(:admin_mode)
+      = nav_link(controller: 'admin/sessions', html_options: { class: "d-none d-lg-block d-xl-block"}) do
+        = link_to destroy_admin_session_path, title: _('Leave Admin Mode'), aria: { label: _('Leave Admin Mode') }, data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } do
+          = sprite_icon('lock-open', size: 18)
+    - elsif current_user.admin?
+      = nav_link(controller: 'admin/sessions', html_options: { class: "d-none d-lg-block d-xl-block"}) do
+        = link_to new_admin_session_path, title: _('Enter Admin Mode'), aria: { label: _('Enter Admin Mode') }, data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } do
+          = sprite_icon('lock', size: 18)
 
   -# Shortcut to Dashboard > Projects
   - if dashboard_nav_link?(:projects)

changelogs/unreleased/fix-admin-mode-ui-buttons-missing-on-small-screens.yml

+---
+title: Fix missing admin mode UI buttons on bigger screen sizes
+merge_request: 18585
+author: Diego Louzán
+type: fixed

locale/gitlab.pot

@@ -6099,13 +6099,13 @@ msgstr ""
 msgid "Ensure your %{linkStart}environment is part of the deploy stage%{linkEnd} of your CI pipeline to track deployments to your cluster."
 msgstr ""
 
-msgid "Enter IP address range"
+msgid "Enter Admin Mode"
 msgstr ""
 
-msgid "Enter a number"
+msgid "Enter IP address range"
 msgstr ""
 
-msgid "Enter admin mode"
+msgid "Enter a number"
 msgstr ""
 
 msgid "Enter at least three characters to search"
@@ -9680,7 +9680,7 @@ msgstr ""
 msgid "Leave"
 msgstr ""
 
-msgid "Leave admin mode"
+msgid "Leave Admin Mode"
 msgstr ""
 
 msgid "Leave edit mode? All unsaved changes will be lost."

spec/features/admin/admin_settings_spec.rb

@@ -5,6 +5,7 @@ require 'spec_helper'
 describe 'Admin updates settings', :clean_gitlab_redis_shared_state, :do_not_mock_admin_mode do
   include StubENV
   include TermsHelper
+  include MobileHelpers
 
   let(:admin) { create(:admin) }
 
@@ -450,6 +451,32 @@ describe 'Admin updates settings', :clean_gitlab_redis_shared_state, :do_not_moc
           expect(page).to have_link(text: 'Support', href: new_support_url)
         end
       end
+
+      it 'Shows admin dashboard links on bigger screen' do
+        visit root_dashboard_path
+
+        page.within '.navbar' do
+          expect(page).to have_link(text: 'Admin Area', href: admin_root_path, visible: true)
+          expect(page).to have_link(text: 'Leave Admin Mode', href: destroy_admin_session_path, visible: true)
+        end
+      end
+
+      it 'Relocates admin dashboard links to dropdown list on smaller screen', :js do
+        resize_screen_xs
+        visit root_dashboard_path
+
+        page.within '.navbar' do
+          expect(page).not_to have_link(text: 'Admin Area', href: admin_root_path, visible: true)
+          expect(page).not_to have_link(text: 'Leave Admin Mode', href: destroy_admin_session_path, visible: true)
+        end
+
+        find('.header-more').click
+
+        page.within '.navbar' do
+          expect(page).to have_link(text: 'Admin Area', href: admin_root_path, visible: true)
+          expect(page).to have_link(text: 'Leave Admin Mode', href: destroy_admin_session_path, visible: true)
+        end
+      end
     end
 
     context 'when in admin_mode' do
@@ -462,7 +489,7 @@ describe 'Admin updates settings', :clean_gitlab_redis_shared_state, :do_not_moc
       it 'can leave admin mode' do
         page.within('.navbar-sub-nav') do
           # Select first, link is also included in mobile view list
-          click_on 'Leave admin mode', match: :first
+          click_on 'Leave Admin Mode', match: :first
 
           expect(page).to have_link(href: new_admin_session_path)
         end
@@ -481,7 +508,7 @@ describe 'Admin updates settings', :clean_gitlab_redis_shared_state, :do_not_moc
       before do
         page.within('.navbar-sub-nav') do
           # Select first, link is also included in mobile view list
-          click_on 'Leave admin mode', match: :first
+          click_on 'Leave Admin Mode', match: :first
         end
       end
 

spec/support/helpers/login_helpers.rb

@@ -53,7 +53,7 @@ module LoginHelpers
 
     fill_in 'password', with: user.password
 
-    click_button 'Enter admin mode'
+    click_button 'Enter Admin Mode'
   end
 
   def gitlab_sign_in_via(provider, user, uid, saml_response = nil)