Merge branch...

Merge branch '358347-replace-generic-checkbox-with-gitlab-ui-styled-checkbox-in-app-views-shared-doorkeeper' into 'master'

Replace generic checkbox with GitLab UI styled checkbox in app/views/shared/doorkeeper/applications/_form.html.haml

See merge request gitlab-org/gitlab!84903

app/views/admin/applications/_form.html.haml

-= form_for [:admin, @application], url: @url, html: {role: 'form'} do |f|
+= gitlab_ui_form_for [:admin, @application], url: @url, html: {role: 'form'} do |f|
   = form_errors(application)
 
   = content_tag :div, class: 'form-group row' do
@@ -45,7 +45,7 @@
     .col-sm-2.col-form-label.pt-0
       = f.label :scopes
     .col-sm-10
-      = render 'shared/tokens/scopes_form', prefix: 'doorkeeper_application', token: application, scopes: @scopes
+      = render 'shared/tokens/scopes_form', prefix: 'doorkeeper_application', token: application, scopes: @scopes, f: f
 
   .form-actions
     = f.submit _('Save application'), class: "gl-button btn btn-confirm wide"

app/views/shared/access_tokens/_form.html.haml

@@ -10,7 +10,7 @@
 %p.profile-settings-content
   = _("Enter the name of your application, and we'll return a unique %{type}.") % { type: type }
 
-= form_for token, as: prefix, url: path, method: :post, html: { class: 'js-requires-input' } do |f|
+= gitlab_ui_form_for token, as: prefix, url: path, method: :post, html: { class: 'js-requires-input' } do |f|
 
   = form_errors(token)
 
@@ -42,7 +42,7 @@
     %p.text-secondary#select_scope_help_text
       = s_('Tokens|Scopes set the permission levels granted to the token.')
       = link_to _("Learn more."), help_path, target: '_blank', rel: 'noopener noreferrer'
-    = render 'shared/tokens/scopes_form', prefix: prefix, token: token, scopes: scopes
+    = render 'shared/tokens/scopes_form', prefix: prefix, token: token, scopes: scopes, f: f
 
   - if prefix == :personal_access_token && Feature.enabled?(:personal_access_tokens_scoped_to_projects, current_user)
     .js-access-tokens-projects

app/views/shared/doorkeeper/applications/_form.html.haml

-= form_for @application, url: url, html: { role: 'form', class: 'doorkeeper-app-form' } do |f|
+= gitlab_ui_form_for @application, url: url, html: { role: 'form', class: 'doorkeeper-app-form' } do |f|
   = form_errors(@application)
 
   .form-group
@@ -12,22 +12,19 @@
     %span.form-text.text-muted
       = _('Use one line per URI')
 
-  .form-group.form-check
-    = f.check_box :confidential, class: 'form-check-input'
-    = f.label :confidential, class: 'label-bold form-check-label'
-    %span.form-text.text-muted
-      = _('Enable only for confidential applications exclusively used by a trusted backend server that can securely store the client secret. Do not enable for native-mobile, single-page, or other JavaScript applications because they cannot keep the client secret confidential.')
+  .form-group
+    = f.gitlab_ui_checkbox_component :confidential, _('Confidential'),
+      help_text: _('Enable only for confidential applications exclusively used by a trusted backend server that can securely store the client secret. Do not enable for native-mobile, single-page, or other JavaScript applications because they cannot keep the client secret confidential.')
 
-  .form-group.form-check
-    = f.check_box :expire_access_tokens, class: 'form-check-input'
-    = f.label :expire_access_tokens, class: 'label-bold form-check-label'
-    %span.form-text.text-muted
-      = _('Enable access tokens to expire after 2 hours. If disabled, tokens do not expire.')
-      = link_to _('Learn more.'), help_page_path('integration/oauth_provider.md', anchor: 'expiring-access-tokens'), target: '_blank', rel: 'noopener noreferrer'
+  .form-group
+    - help_text = _('Enable access tokens to expire after 2 hours. If disabled, tokens do not expire.')
+    - help_link = link_to _('Learn more.'), help_page_path('integration/oauth_provider.md', anchor: 'expiring-access-tokens'), target: '_blank', rel: 'noopener noreferrer'
+    = f.gitlab_ui_checkbox_component :expire_access_tokens, _('Expire access tokens'),
+      help_text: '%{help_text} %{help_link}'.html_safe % { help_text: help_text, help_link: help_link }
 
   .form-group
     = f.label :scopes, class: 'label-bold'
-    = render 'shared/tokens/scopes_form', prefix: 'doorkeeper_application', token: @application, scopes: @scopes
+    = render 'shared/tokens/scopes_form', prefix: 'doorkeeper_application', token: @application, scopes: @scopes, f: f
 
   .gl-mt-3
     = f.submit _('Save application'), class: "gl-button btn btn-confirm"

app/views/shared/tokens/_scopes_form.html.haml

 - scopes = local_assigns.fetch(:scopes)
 - prefix = local_assigns.fetch(:prefix)
 - token = local_assigns.fetch(:token)
+- f = local_assigns.fetch(:f)
 
-- scopes.each do |scope|
-  %fieldset.form-group.form-check
-    = check_box_tag "#{prefix}[scopes][]", scope, token.scopes.include?(scope), id: "#{prefix}_scopes_#{scope}", class: "form-check-input", data: { qa_selector: "#{scope}_checkbox" }
-    = label_tag "#{prefix}_scopes_#{scope}", scope, class: 'label-bold form-check-label'
-    .text-secondary= t scope, scope: scope_description(prefix)
+%fieldset
+  - scopes.each do |scope|
+    - help_text = t scope, scope: scope_description(prefix)
+    = f.gitlab_ui_checkbox_component :scopes, scope,
+      help_text: help_text,
+      checkbox_options: { checked: token.scopes.include?(scope), id: "#{prefix}_scopes_#{scope}", multiple: true, data: { qa_selector: "#{scope}_checkbox" } },
+      checked_value: scope,
+      unchecked_value: nil,
+      label_options: { data: { qa_selector: "#{scope}_label" } }

locale/gitlab.pot

@@ -15143,6 +15143,9 @@ msgstr ""
 msgid "Expiration date:"
 msgstr ""
 
+msgid "Expire access tokens"
+msgstr ""
+
 msgid "Expired"
 msgstr ""
 

qa/qa/page/component/access_tokens.rb

@@ -19,7 +19,7 @@ module QA
           end
 
           base.view 'app/views/shared/tokens/_scopes_form.html.haml' do
-            element :api_checkbox, '#{scope}_checkbox' # rubocop:disable QA/ElementWithPattern, Lint/InterpolationCheck
+            element :api_label, '#{scope}_label' # rubocop:disable QA/ElementWithPattern, Lint/InterpolationCheck
           end
 
           base.view 'app/views/shared/access_tokens/_created_container.html.haml' do
@@ -36,7 +36,7 @@ module QA
         end
 
         def check_api
-          check_element(:api_checkbox)
+          click_element(:api_label)
         end
 
         def click_create_token_button

spec/features/admin/admin_users_impersonation_tokens_spec.rb

@@ -36,14 +36,14 @@ RSpec.describe 'Admin > Users > Impersonation Tokens', :js do
       click_on "1"
 
       # Scopes
-      check "api"
+      check "read_api"
       check "read_user"
 
       click_on "Create impersonation token"
 
       expect(active_impersonation_tokens).to have_text(name)
       expect(active_impersonation_tokens).to have_text('in')
-      expect(active_impersonation_tokens).to have_text('api')
+      expect(active_impersonation_tokens).to have_text('read_api')
       expect(active_impersonation_tokens).to have_text('read_user')
       expect(PersonalAccessTokensFinder.new(impersonation: true).execute.count).to equal(1)
       expect(created_impersonation_token).not_to be_empty

spec/features/profiles/personal_access_tokens_spec.rb

@@ -47,14 +47,14 @@ RSpec.describe 'Profile > Personal Access Tokens', :js do
       click_on "1"
 
       # Scopes
-      check "api"
+      check "read_api"
       check "read_user"
 
       click_on "Create personal access token"
 
       expect(active_personal_access_tokens).to have_text(name)
       expect(active_personal_access_tokens).to have_text('in')
-      expect(active_personal_access_tokens).to have_text('api')
+      expect(active_personal_access_tokens).to have_text('read_api')
       expect(active_personal_access_tokens).to have_text('read_user')
       expect(created_personal_access_token).not_to be_empty
     end

spec/support/shared_examples/features/access_tokens_shared_examples.rb

@@ -29,15 +29,15 @@ RSpec.shared_examples 'resource access tokens creation' do |resource_type|
     click_on '1'
 
     # Scopes
-    check 'api'
     check 'read_api'
+    check 'read_repository'
 
     click_on "Create #{resource_type} access token"
 
     expect(active_resource_access_tokens).to have_text(name)
     expect(active_resource_access_tokens).to have_text('in')
-    expect(active_resource_access_tokens).to have_text('api')
     expect(active_resource_access_tokens).to have_text('read_api')
+    expect(active_resource_access_tokens).to have_text('read_repository')
     expect(active_resource_access_tokens).to have_text('Maintainer')
     expect(created_resource_access_token).not_to be_empty
   end