Applications tab on profile settings

Closes #13855

app/assets/stylesheets/pages/profile.scss

@@ -175,3 +175,17 @@
     color: $profile-settings-link-color;
   }
 }
+
+.profile-settings-message {
+  line-height: 32px;
+  color: #9E8E60;
+  background-color: #FBF2D9;
+  border: 1px solid #F0E2BB;
+  border-radius: 3px;
+}
+
+.oauth-applications {
+  form {
+    display: inline-block;
+  }
+}

app/controllers/oauth/applications_controller.rb

@@ -11,6 +11,10 @@ class Oauth::ApplicationsController < Doorkeeper::ApplicationsController
     head :forbidden and return
   end
 
+  def new
+    redirect_to applications_profile_url
+  end
+
   def create
     @application = Doorkeeper::Application.new(application_params)
 
@@ -20,7 +24,7 @@ class Oauth::ApplicationsController < Doorkeeper::ApplicationsController
       flash[:notice] = I18n.t(:notice, scope: [:doorkeeper, :flash, :applications, :create])
       redirect_to oauth_application_url(@application)
     else
-      render :new
+      redirect_to applications_profile_url, flash: {application: @application}
     end
   end
 

app/controllers/profiles_controller.rb

@@ -13,6 +13,7 @@ class ProfilesController < Profiles::ApplicationController
     @authorized_tokens = current_user.oauth_authorized_tokens
     @authorized_anonymous_tokens = @authorized_tokens.reject(&:application)
     @authorized_apps = @authorized_tokens.map(&:application).uniq - [nil]
+    @application = flash[:application] || Doorkeeper::Application.new
   end
 
   def update

app/views/doorkeeper/applications/_delete_form.html.haml

@@ -1,4 +1,10 @@
 - submit_btn_css ||= 'btn btn-link btn-remove btn-sm'
 = form_tag oauth_application_path(application) do
   %input{:name => "_method", :type => "hidden", :value => "delete"}/
-  = submit_tag 'Destroy', onclick: "return confirm('Are you sure?')", class: submit_btn_css
+  - if defined? small
+    = button_tag type: "submit", class: "btn btn-transparent", data: { confirm: "Are you sure?" } do
+      %span.sr-only
+        Destroy
+      = icon('trash')
+  - else
+    = submit_tag 'Destroy', data: { confirm: "Are you sure?" }, class: submit_btn_css

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

@@ -1,4 +1,4 @@
-= form_for application, url: doorkeeper_submit_path(application), html: {class: 'form-horizontal', role: 'form'} do |f|
+= form_for application, url: doorkeeper_submit_path(application), html: {role: 'form'} do |f|
   - if application.errors.any?
     .alert.alert-danger
       %ul
@@ -6,15 +6,11 @@
           %li= msg
 
   .form-group
-    = f.label :name, class: 'control-label'
+    = f.label :name, class: 'label-light'
-
-    .col-sm-10
     = f.text_field :name, class: 'form-control', required: true
 
   .form-group
-    = f.label :redirect_uri, class: 'control-label'
+    = f.label :redirect_uri, class: 'label-light'
-
-    .col-sm-10
     = f.text_area :redirect_uri, class: 'form-control', required: true
 
     %span.help-block
@@ -25,6 +21,5 @@
         %code= Doorkeeper.configuration.native_redirect_uri
         for local tests
 
-  .form-actions
+  .prepend-top-default
-    = f.submit 'Submit', class: "btn btn-create"
+    = f.submit 'Add application', class: "btn btn-create"
-    = link_to "Cancel", applications_profile_path, class: "btn btn-cancel"

app/views/profiles/applications.html.haml

@@ -1,29 +1,35 @@
 - page_title "Applications"
 - header_title page_title, applications_profile_path
 
-.alert.alert-help.prepend-top-default
+.row.prepend-top-default
+  .col-lg-3.profile-settings-sidebar
+    %h4.prepend-top-0
+      = page_title
+    %p
       - if user_oauth_applications?
         Manage applications that can use GitLab as an OAuth provider,
         and applications that you've authorized to use your account.
       - else
         Manage applications that you've authorized to use your account.
-
+  .col-lg-9
+    - if user_oauth_applications?
+      %h5
+        Add new application
+      = render 'doorkeeper/applications/form', application: @application
+      %hr
     - if user_oauth_applications?
       .oauth-applications
-    %h3
+        %h5
-      Your applications
+          Your applications (#{@applications.size})
-      .pull-right
-        = link_to 'New Application', new_oauth_application_path, class: 'btn btn-success'
         - if @applications.any?
-      .table-holder
+          .table-responsive
             %table.table.table-striped
               %thead
                 %tr
                   %th Name
                   %th Callback URL
                   %th Clients
-              %th
+                  %th{width: 105}
-              %th
               %tbody
                 - @applications.each do |application|
                   %tr{:id => "application_#{application.id}"}
@@ -32,16 +38,22 @@
                       - application.redirect_uri.split.each do |uri|
                         %div= uri
                     %td= application.access_tokens.count
-                %td= link_to 'Edit', edit_oauth_application_path(application), class: 'btn btn-link btn-sm'
+                    %td
-                %td= render 'doorkeeper/applications/delete_form', application: application
+                      = link_to edit_oauth_application_path(application), class: "btn btn-transparent append-right-5" do
-
+                        %span.sr-only
+                          Edit
+                        = icon('pencil')
+                      = render 'doorkeeper/applications/delete_form', application: application, small: true
+        - else
+          .profile-settings-message.text-center
+            You don't have any applications
     .oauth-authorized-applications.prepend-top-20
       - if user_oauth_applications?
-    %h3
+        %h5
-      Authorized applications
+          Authorized applications (#{@authorized_tokens.size})
 
       - if @authorized_tokens.any?
-    .table-holder
+        .table-responsive
           %table.table.table-striped
             %thead
               %tr
@@ -67,4 +79,5 @@
                   %td= token.scopes
                   %td= render 'doorkeeper/authorized_applications/delete_form', token: token
       - else
-    %p.light You don't have any authorized applications
+        .profile-settings-message.text-center
+          You don't have any authorized applications