Applications tab on profile settings

Closes #13855

8 files changed, 133 insertions, 86 deletions

diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 50aa170d24c..b8bcbcc933f 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -143,6 +143,19 @@
   }
 }
 
+.btn-transparent {
+  color: #8F8F8F;
+  background-color: transparent;
+  border: 0;
+
+  &:hover,
+  &:active,
+  &:focus {
+    background-color: transparent;
+    box-shadow: none;
+  }
+}
+
 .btn-block {
   width: 100%;
   margin: 0;
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index fb493d6728a..6ecf7318819 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -14,6 +14,7 @@
 .prepend-left-10 { margin-left:10px }
 .prepend-left-default { margin-left: $gl-padding; }
 .prepend-left-20 { margin-left:20px }
+.append-right-5 { margin-right:5px }
 .append-right-10 { margin-right:10px }
 .append-right-default { margin-right: $gl-padding; }
 .append-right-20 { margin-right:20px }
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index da721b1d055..3e6e1ed0ef1 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -186,3 +186,17 @@
     color: #4688F1;
   }
 }
+
+.profile-settings-message {
+  line-height: 32px;
+  color: #9E8E60;
+  background-color: #FBF2D9;
+  border: 1px solid #F0E2BB;
+  border-radius: 3px;
+}
+
+.oauth-applications {
+  form {
+    display: inline-block;
+  }
+}
diff --git a/app/controllers/oauth/applications_controller.rb b/app/controllers/oauth/applications_controller.rb
index dc22101cd5e..d983ae0b8c6 100644
--- a/app/controllers/oauth/applications_controller.rb
+++ b/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
 
diff --git a/app/controllers/profiles_controller.rb b/app/controllers/profiles_controller.rb
index fa7a1148961..75eb9bdb96f 100644
--- a/app/controllers/profiles_controller.rb
+++ b/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
diff --git a/app/views/doorkeeper/applications/_delete_form.html.haml b/app/views/doorkeeper/applications/_delete_form.html.haml
index 6a5c917049d..001a711b1dd 100644
--- a/app/views/doorkeeper/applications/_delete_form.html.haml
+++ b/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
\ No newline at end of file
+  - 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
diff --git a/app/views/doorkeeper/applications/_form.html.haml b/app/views/doorkeeper/applications/_form.html.haml
index 98a61ab211b..0df8362d4ad 100644
--- a/app/views/doorkeeper/applications/_form.html.haml
+++ b/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,25 +6,20 @@
           %li= msg
 
   .form-group
-    = f.label :name, class: 'control-label'
-
-    .col-sm-10
-      = f.text_field :name, class: 'form-control', required: true
+    = f.label :name, class: 'label-light'
+    = f.text_field :name, class: 'form-control', required: true
 
   .form-group
-    = f.label :redirect_uri, class: 'control-label'
-
-    .col-sm-10
-      = f.text_area :redirect_uri, class: 'form-control', required: true
+    = f.label :redirect_uri, class: 'label-light'
+    = f.text_area :redirect_uri, class: 'form-control', required: true
 
+    %span.help-block
+      Use one line per URI
+    - if Doorkeeper.configuration.native_redirect_uri
       %span.help-block
-        Use one line per URI
-      - if Doorkeeper.configuration.native_redirect_uri
-        %span.help-block
-          Use
-          %code= Doorkeeper.configuration.native_redirect_uri
-          for local tests
+        Use
+        %code= Doorkeeper.configuration.native_redirect_uri
+        for local tests
 
-  .form-actions
-    = f.submit 'Submit', class: "btn btn-create"
-    = link_to "Cancel", applications_profile_path, class: "btn btn-cancel"
+  .prepend-top-default
+    = f.submit 'Add application', class: "btn btn-create"
diff --git a/app/views/profiles/applications.html.haml b/app/views/profiles/applications.html.haml
index 86f35823406..911ba9f87f0 100644
--- a/app/views/profiles/applications.html.haml
+++ b/app/views/profiles/applications.html.haml
@@ -1,70 +1,83 @@
 - page_title "Applications"
 - header_title page_title, applications_profile_path
 
-.alert.alert-help.prepend-top-default
-  - 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.
+.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
+        %h5
+          Your applications (#{@applications.size})
+        - if @applications.any?
+          .table-responsive
+            %table.table.table-striped
+              %thead
+                %tr
+                  %th Name
+                  %th Callback URL
+                  %th Clients
+                  %th{width: 105}
+              %tbody
+                - @applications.each do |application|
+                  %tr{:id => "application_#{application.id}"}
+                    %td= link_to application.name, oauth_application_path(application)
+                    %td
+                      - application.redirect_uri.split.each do |uri|
+                        %div= uri
+                    %td= application.access_tokens.count
+                    %td
+                      = 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?
+        %h5
+          Authorized applications (#{@authorized_tokens.size})
 
-- if user_oauth_applications?
-  .oauth-applications
-    %h3
-      Your applications
-      .pull-right
-        = link_to 'New Application', new_oauth_application_path, class: 'btn btn-success'
-    - if @applications.any?
-      .table-holder
-        %table.table.table-striped
-          %thead
-            %tr
-              %th Name
-              %th Callback URL
-              %th Clients
-              %th
-              %th
-          %tbody
-            - @applications.each do |application|
-              %tr{:id => "application_#{application.id}"}
-                %td= link_to application.name, oauth_application_path(application)
-                %td
-                  - 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= render 'doorkeeper/applications/delete_form', application: application
-
-.oauth-authorized-applications.prepend-top-20
-  - if user_oauth_applications?
-    %h3
-      Authorized applications
-
-  - if @authorized_tokens.any?
-    .table-holder
-      %table.table.table-striped
-        %thead
-          %tr
-            %th Name
-            %th Authorized At
-            %th Scope
-            %th
-        %tbody
-          - @authorized_apps.each do |app|
-            - token = app.authorized_tokens.order('created_at desc').first
-            %tr{:id => "application_#{app.id}"}
-              %td= app.name
-              %td= token.created_at
-              %td= token.scopes
-              %td= render 'doorkeeper/authorized_applications/delete_form', application: app
-          - @authorized_anonymous_tokens.each do |token|
-            %tr
-              %td
-                Anonymous
-                %div.help-block
-                  %em Authorization was granted by entering your username and password in the application.
-              %td= token.created_at
-              %td= token.scopes
-              %td= render 'doorkeeper/authorized_applications/delete_form', token: token
-  - else
-    %p.light You don't have any authorized applications
+      - if @authorized_tokens.any?
+        .table-responsive
+          %table.table.table-striped
+            %thead
+              %tr
+                %th Name
+                %th Authorized At
+                %th Scope
+                %th
+            %tbody
+              - @authorized_apps.each do |app|
+                - token = app.authorized_tokens.order('created_at desc').first
+                %tr{:id => "application_#{app.id}"}
+                  %td= app.name
+                  %td= token.created_at
+                  %td= token.scopes
+                  %td= render 'doorkeeper/authorized_applications/delete_form', application: app
+              - @authorized_anonymous_tokens.each do |token|
+                %tr
+                  %td
+                    Anonymous
+                    %div.help-block
+                      %em Authorization was granted by entering your username and password in the application.
+                  %td= token.created_at
+                  %td= token.scopes
+                  %td= render 'doorkeeper/authorized_applications/delete_form', token: token
+      - else
+        .profile-settings-message.text-center
+          You don't have any authorized applications