diff --git a/apps/dashboard/app/assets/stylesheets/batch_connect/sessions.scss b/apps/dashboard/app/assets/stylesheets/batch_connect/sessions.scss index 922448f7ce..a4dd5ffb2b 100644 --- a/apps/dashboard/app/assets/stylesheets/batch_connect/sessions.scss +++ b/apps/dashboard/app/assets/stylesheets/batch_connect/sessions.scss @@ -31,6 +31,28 @@ background-color: #f5f5f5; } +.collapsible-app-card { + .collapsible-app-card-toggle { + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + + &::after { + content: ""; + width: 0; + height: 0; + border-style: solid; + border-width: 0.3rem 0 0.3rem 0.45rem; + border-color: transparent transparent transparent currentColor; + } + + &[aria-expanded="true"]::after { + transform: rotate(90deg); + } + } +} + .custom-range { height: 4px; box-shadow: inset 0 1px 10px gray; diff --git a/apps/dashboard/app/views/batch_connect/shared/_app_list.html.erb b/apps/dashboard/app/views/batch_connect/shared/_app_list.html.erb index fb3c5273ac..d978e757ff 100644 --- a/apps/dashboard/app/views/batch_connect/shared/_app_list.html.erb +++ b/apps/dashboard/app/views/batch_connect/shared/_app_list.html.erb @@ -1,6 +1,21 @@ -
"> -
<%= title %>
-
+<% + # HTML ids use underscores per project convention (see CONTRIBUTING.md). + # Parameterize the card title so ids stay valid and pair with aria-controls. + slug = title.to_s.parameterize(separator: "_").presence || "group" + list_dom_id = "bc_app_list_#{slug}_items" +%> +
"> + +
<%- OodAppGroup.groups_for( apps: apps, diff --git a/apps/dashboard/test/system/batch_connect_sessions_test.rb b/apps/dashboard/test/system/batch_connect_sessions_test.rb index 81067c7047..70cd9f2ce9 100644 --- a/apps/dashboard/test/system/batch_connect_sessions_test.rb +++ b/apps/dashboard/test/system/batch_connect_sessions_test.rb @@ -51,6 +51,30 @@ def stub_scheduler(state, cores: 1, nodes: 1) assert_equal(I18n.t('dashboard.batch_connect_no_sessions'), no_session_text) end + test 'collapsible batch connect app menu toggles' do + visit(batch_connect_sessions_path) + + within('nav[aria-label="Interactive Apps Menu"]') do + card = find('.collapsible-app-card', match: :first) + button = card.find('button.collapsible-app-card-toggle') + target_id = button['aria-controls'] + list_group = card.find("##{target_id}", visible: :all) + + assert_equal('false', button['aria-expanded']) + assert_not_includes(list_group[:class], 'show') + + button.click + + assert_selector("##{target_id}.show") + assert_equal('true', button['aria-expanded']) + + button.click + + assert_no_selector("##{target_id}.show") + assert_equal('false', button['aria-expanded']) + end + end + test 'queued session' do Dir.mktmpdir do |dir| create_test_file(dir)