Merge branch 'abh80/patch-2' into 'master'

Make scopes in application OAuth screen collapsible

See merge request !164608



Merged-by: Drew Blessing <drew@gitlab.com>
Approved-by: Nataliia Radina <nradina@gitlab.com>
Approved-by: Tarun Vellishetty <tvellishetty@gitlab.com>
Approved-by: Austin Regnery <aregnery@gitlab.com>
Approved-by: Drew Blessing <drew@gitlab.com>
Reviewed-by: Marcel van Remmerden <mvanremmerden@gitlab.com>
Reviewed-by: Austin Regnery <aregnery@gitlab.com>
Reviewed-by: Abh80 <7569992-abh80@users.noreply.gitlab.com>
Reviewed-by: Eduardo Sanz García <esanz-garcia@gitlab.com>
Reviewed-by: Nataliia Radina <nradina@gitlab.com>
Co-authored-by: Eduardo Sanz García <esanz-garcia@gitlab.com>
Co-authored-by: Abh80 <7569992-abh80@users.noreply.gitlab.com>
Co-authored-by: Stars Tracker <techixspotify@gmail.com>
Co-authored-by: abh80 <abhb787@outlook.com>

app/assets/javascripts/pages/oauth/index.js

 import initSearchSettings from '~/search_settings';
+import initAccordion from '~/accordion';
 
 initSearchSettings();
+document.querySelectorAll('.js-experimental-setting-accordion').forEach(initAccordion);

app/components/pajamas/accordion_item_component.html.haml

 .gl-accordion-item
   %h3.gl-accordion-item-header
-    = render Pajamas::ButtonComponent.new(variant: :link, icon: icon, icon_classes: "js-chevron-icon", button_options: { "aria-controls": "accordion-item", "aria-expanded": expanded }) do
+    = render Pajamas::ButtonComponent.new(variant: :link, icon: icon, icon_classes: "js-chevron-icon", button_options: { "aria-controls": "accordion-item", "aria-expanded": expanded?, **@button_options}) do
       = @title
 
   .accordion-item.gl-mt-3.gl-text-base.collapse{ **body_class }

app/components/pajamas/accordion_item_component.rb

@@ -9,9 +9,11 @@ class AccordionItemComponent < Pajamas::Component
 
     # @param [String] title
     # @param [Symbol] state
-    def initialize(title: nil, state: :closed)
+    # @param [Hash] button_options
+    def initialize(title: nil, state: :closed, button_options: {})
       @title = title
       @state = filter_attribute(state.to_sym, STATE_OPTIONS)
+      @button_options = button_options
     end
 
     def icon
@@ -22,7 +24,7 @@ def body_class
       @state == :opened ? { class: 'show' } : {}
     end
 
-    def expanded
+    def expanded?
       @state == :opened
     end
   end

app/views/doorkeeper/authorizations/new.html.haml

@@ -19,8 +19,12 @@
           tag_pair(tag.strong, :strong_start, :strong_end))
   - if @pre_auth.scopes
     - @pre_auth.scopes.each do |scope|
-      %strong= t scope, scope: [:doorkeeper, :scopes]
-      .gl-text-gray-500.gl-pb-5.gl-text-sm= t scope, scope: [:doorkeeper, :scope_desc]
+      .js-experimental-setting-accordion.gl-mb-5
+        - title = t(scope, scope: [:doorkeeper, :scopes])
+        - description = t(scope, scope: [:doorkeeper, :scope_desc])
+        = render Pajamas::AccordionItemComponent.new(title: title, state: :closed, button_options: { class: '!gl-text-default gl-font-bold' }) do
+          .gl-text-gray-500.gl-text-sm
+            = description
   .info-well
     .well-segment
       - if Gitlab.com? && !@pre_auth.client.application.owner

spec/components/pajamas/accordion_item_component_spec.rb

@@ -5,10 +5,11 @@
 RSpec.describe Pajamas::AccordionItemComponent, type: :component, feature_category: :shared do
   let(:title) { "This is a title" }
   let(:content) { "This is the content" }
+  let(:button_options) { { class: 'my-class' } }
   let(:state) { :opened }
 
   before do
-    render_inline(described_class.new(title: title, state: state)) do |_c|
+    render_inline(described_class.new(title: title, state: state, button_options: button_options)) do |_c|
       content
     end
   end
@@ -56,4 +57,10 @@
       expect(page).to have_selector('button[aria-expanded="false"]')
     end
   end
+
+  describe "button_options" do
+    it "correctly passes options to the button" do
+      expect(page).to have_selector('button.my-class')
+    end
+  end
 end