Add latest changes from gitlab-org/gitlab@16-3-stable-eev16.3.0-rc42

1 files changed, 87 insertions, 66 deletions

diff --git a/app/views/shared/doorkeeper/applications/_index.html.haml b/app/views/shared/doorkeeper/applications/_index.html.haml
index bf78f275d65..f28cc64b969 100644
--- a/app/views/shared/doorkeeper/applications/_index.html.haml
+++ b/app/views/shared/doorkeeper/applications/_index.html.haml
@@ -1,4 +1,6 @@
 - @force_desktop_expanded_sidebar = true
+- add_form_class = 'gl-display-none' if !form_errors(@application)
+- hide_class = 'gl-display-none' if form_errors(@application)
 
 .settings-section.js-search-settings-section
   .settings-sticky-header
@@ -14,73 +16,92 @@
     - else
       = _("Manage applications that you've authorized to use your account.")
   - if oauth_applications_enabled
-    %h5.gl-mt-0
-      = _('Add new application')
-    .gl-border-b.gl-pb-6
-      = render 'shared/doorkeeper/applications/form', url: form_url
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card oauth-applications js-toggle-container' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
+      - c.with_header do
+        .gl-new-card-title-wrapper
+          %h3.gl-new-card-title
+            = _('Your applications')
+          .gl-new-card-count
+            = sprite_icon('applications', css_class: 'gl-mr-2')
+            = @applications.size
+        .gl-new-card-actions
+          = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: "js-toggle-button js-toggle-content #{hide_class}" }) do
+            = _('Add new application')
+      - c.with_body do
+        .gl-new-card-add-form.gl-m-3.js-toggle-content{ class: add_form_class }
+          %h4.gl-mt-0
+            = _('Add new application')
+          = render 'shared/doorkeeper/applications/form', url: form_url, cancel: true
+
+        - if @applications.any?
+          .table-holder
+            %table.table.b-table.gl-table.b-table-stacked-sm.gl-mt-n1.gl-mb-n2
+              %thead.d-none.d-md-table-header-group
+                %tr
+                  %th= _('Name')
+                  %th= _('Callback URL')
+                  %th= _('Clients')
+                  %th.last-heading
+              %tbody
+                - @applications.each do |application|
+                  %tr{ id: "application_#{application.id}" }
+                    %td{ data: { label: _('Name') } }
+                      = link_to application.name, application_url.call(application)
+                    %td{ data: { label: _('Callback URL') } }
+                      - application.redirect_uri.split.each do |uri|
+                        = uri
+                    %td{ data: { label: _('Clients') } }
+                      = application.access_tokens.count
+                    %td{ class: 'gl-py-3!', data: { label: _('Actions') } }
+                      %div{ class: 'gl-display-flex! gl-pl-0!' }
+                        = render Pajamas::ButtonComponent.new(category: :tertiary, href: edit_application_url.call(application), icon: 'pencil', button_options: { class: 'has-tooltip gl-mr-3', 'title': _('Edit'), 'aria-label': _('Edit') })
+                        = render 'shared/doorkeeper/applications/delete_form', path: application_url.call(application), small: true
+        - else
+          .gl-new-card-empty.gl-px-5.gl-py-4.js-toggle-content
+            = _("You don't have any applications.")
 
   - else
     .bs-callout.bs-callout-disabled
-      = _('Adding new applications is disabled in your GitLab instance. Please contact your GitLab administrator to get the permission')
-  - if oauth_applications_enabled
-    .oauth-applications.gl-pt-6
-      %h5.gl-mt-0
-        = _("Your applications (%{size})") % { size: @applications.size }
-      - if @applications.any?
-        .table-responsive
-          %table.table
-            %thead
-              %tr
-                %th= _('Name')
-                %th= _('Callback URL')
-                %th= _('Clients')
-                %th.last-heading
-            %tbody
-              - @applications.each do |application|
-                %tr{ id: "application_#{application.id}" }
-                  %td= link_to application.name, application_url.call(application)
-                  %td
-                    - application.redirect_uri.split.each do |uri|
-                      %div= uri
-                  %td= application.access_tokens.count
-                  %td.gl-display-flex
-                    = link_button_to nil, edit_application_url.call(application), class: 'gl-mr-3', icon: 'pencil', 'aria-label': _('Edit')
-                    = render 'shared/doorkeeper/applications/delete_form', path: application_url.call(application), small: true
-      - else
-        .settings-message
-          = _("You don't have any applications")
-  - if oauth_authorized_applications_enabled
-    .oauth-authorized-applications.gl-mt-4
-      - if oauth_applications_enabled
-        %h5.gl-mt-0
-          = _("Authorized applications (%{size})") % { size: @authorized_tokens.size }
+      = _('Adding new applications is disabled in your GitLab instance. Please contact your GitLab administrator to get the permission.')
 
-      - if @authorized_tokens.any?
-        .table-responsive
-          %table.table.table-striped
-            %thead
-              %tr
-                %th= _('Name')
-                %th= _('Authorized At')
-                %th= _('Scope')
-                %th
-            %tbody
-              - @authorized_tokens.each do |token|
-                %tr{ id: ("application_#{token.application.id}" if token.application) }
-                  %td
-                    - if token.application
-                      = token.application.name
-                    - else
-                      = _('Anonymous')
-                      .form-text.text-muted
-                        %em= _("Authorization was granted by entering your username and password in the application.")
-                  %td= token.created_at
-                  %td= token.scopes
-                  %td
-                    - if token.application
-                      = render 'doorkeeper/authorized_applications/delete_form', application: token.application
-                    - else
-                      = render 'doorkeeper/authorized_applications/delete_form', token: token
-      - else
-        .settings-message
-          = _("You don't have any authorized applications")
+  - if oauth_authorized_applications_enabled
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card oauth-authorized-applications' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
+      - c.with_header do
+        .gl-new-card-title-wrapper
+          %h3.gl-new-card-title
+            = _('Authorized applications')
+          .gl-new-card-count
+            = sprite_icon('applications', css_class: 'gl-mr-2')
+            = @authorized_tokens.size
+      - c.with_body do
+        - if @authorized_tokens.any?
+          .table-holder
+            %table.table.b-table.gl-table.b-table-stacked-sm.gl-mt-n1.gl-mb-n2
+              %thead.d-none.d-md-table-header-group
+                %tr
+                  %th= _('Name')
+                  %th= _('Authorized At')
+                  %th= _('Scope')
+                  %th
+              %tbody
+                - @authorized_tokens.each do |token|
+                  %tr{ id: ("application_#{token.application.id}" if token.application) }
+                    %td{ data: { label: _('Name') } }
+                      - if token.application
+                        = token.application.name
+                      - else
+                        = _('Anonymous')
+                        .form-text.text-muted
+                          %em= _("Authorization was granted by entering your username and password in the application.")
+                    %td{ data: { label: _('Authorized At') } }
+                      = token.created_at
+                    %td{ data: { label: _('Scope') } }
+                      = token.scopes
+                    %td{ class: 'gl-py-3!', data: { label: _('Actions') } }
+                      - if token.application
+                        = render 'doorkeeper/authorized_applications/delete_form', application: token.application
+                      - else
+                        = render 'doorkeeper/authorized_applications/delete_form', token: token
+        - else
+          .gl-new-card-empty.gl-px-5.gl-py-4{ class: hide_class }
+            = _("You don't have any authorized applications.")