Merge branch '22774-retouch-environments-deployments' into 'master'

Resolve "Retouch environments list and deployments list"

## What does this MR do?
#### Environments List
- Fixes deployment ID
- Removes bold styling from deployment ID
- Changes Las Deployment Column to have '#ID by user'
- Adds build column with link to the build
- Adds external url to where the environment is hosted

#### Environment Details
- Add link to the build column and changes content to show "build (#id) by user"
- Adds external link to the review app

Adds tests

## Screenshots (if relevant)
#### Environments List
![env_list](/uploads/6cfd737bb0d2f2853a610479877de5a3/env_list.png)
#### Environments Details
![env_details](/uploads/70ec59d7d7de5c1ef57132c2ec9c1b8f/env_details.png)

## Does this MR meet the acceptance criteria?

- [x] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [x] Added for this feature/bug
  - [ ] All builds are passing
- [ ] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [ ] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?
Closes #22774

See merge request !6691

CHANGELOG

@@ -72,6 +72,7 @@ v 8.13.0 (unreleased)
   - Fix Pipeline list commit column width should be adjusted
   - Close todos when accepting merge requests via the API !6486 (tonygambone)
   - Changed Slack service user referencing from full name to username (Sebastian Poxhofer)
+  - Retouch environments list and deployments list
   - Add Container Registry on/off status to Admin Area !6638 (the-undefined)
   - Grouped pipeline dropdown is a scrollable container
 

app/assets/stylesheets/pages/environments.scss

+.environments-container,
+.deployments-container {
+  width: 100%;
+  overflow: auto;
+}
+
 .environments {
+  .deployment-column {
+    .avatar {
+      float: none;
+    }
+  }
 
   .commit-title {
     margin: 0;
@@ -9,6 +20,7 @@
     width: 12px;
   }
 
+  .external-url,
   .dropdown-new {
     color: $table-text-gray;
   }
@@ -21,16 +33,35 @@
     }
   }
 
+  .build-link,
   .branch-name {
     color: $gl-dark-link-color;
   }
+  
+  .deployment {
+    .build-column {
+    
+      .build-link {
+        color: $gl-dark-link-color;
+      }
+      
+      .avatar {
+        float: none;
+      }
+    }
+  }
 }
 
 .table.builds.environments {
-  min-width: 500px;
 
   .icon-container {
     width: 20px;
     text-align: center;
   }
+  
+  .branch-commit {
+    .commit-id {
+      margin-right: 0;
+    }
+  }
 }

app/helpers/avatars_helper.rb

@@ -4,15 +4,18 @@ module AvatarsHelper
       user: commit_or_event.author,
       user_name: commit_or_event.author_name,
       user_email: commit_or_event.author_email,
+      css_class: 'hidden-xs'
     }))
   end
 
   def user_avatar(options = {})
     avatar_size = options[:size] || 16
     user_name = options[:user].try(:name) || options[:user_name]
+    css_class = options[:css_class] || ''
+    
     avatar = image_tag(
       avatar_icon(options[:user] || options[:user_email], avatar_size),
-      class: "avatar has-tooltip hidden-xs s#{avatar_size}",
+      class: "avatar has-tooltip s#{avatar_size} #{css_class}",
       alt: "#{user_name}'s avatar",
       title: user_name,
       data: { container: 'body' }

app/views/projects/deployments/_actions.haml

 - if can?(current_user, :create_deployment, deployment) && deployment.deployable
   .pull-right
+  
+    - external_url = deployment.environment.external_url
+    - if external_url
+      = link_to external_url, target: '_blank', class: 'btn external-url' do
+        = icon('external-link')
+    
     - actions = deployment.manual_actions
     - if actions.present?
       .inline

app/views/projects/deployments/_deployment.html.haml

@@ -5,14 +5,16 @@
   %td
     = render 'projects/deployments/commit', deployment: deployment
 
-  %td
+  %td.build-column
     - if deployment.deployable
-      = link_to [@project.namespace.becomes(Namespace), @project, deployment.deployable] do
-        = user_avatar(user: deployment.user, size: 20)
+      = link_to [@project.namespace.becomes(Namespace), @project, deployment.deployable], class: 'build-link' do
         = "#{deployment.deployable.name} (##{deployment.deployable.id})"
+      - if deployment.user
+        by
+        = user_avatar(user: deployment.user, size: 20)
 
   %td
     #{time_ago_with_tooltip(deployment.created_at)}
 
-  %td
+  %td.hidden-xs
     = render 'projects/deployments/actions', deployment: deployment, allow_rollback: true

app/views/projects/environments/_environment.html.haml

@@ -4,10 +4,17 @@
   %td
     = link_to environment.name, namespace_project_environment_path(@project.namespace, @project, environment)
 
-  %td
+  %td.deployment-column
     - if last_deployment
-      = user_avatar(user: last_deployment.user, size: 20)
-      %strong ##{last_deployment.id}
+      %span ##{last_deployment.iid} 
+      - if last_deployment.user
+        by
+        = user_avatar(user: last_deployment.user, size: 20)
+
+  %td
+    - if last_deployment && last_deployment.deployable
+      = link_to [@project.namespace.becomes(Namespace), @project, last_deployment.deployable], class: 'build-link' do
+        = "#{last_deployment.deployable.name} (##{last_deployment.deployable.id})"
 
   %td
     - if last_deployment
@@ -20,5 +27,5 @@
     - if last_deployment
       #{time_ago_with_tooltip(last_deployment.created_at)}
 
-  %td
+  %td.hidden-xs
     = render 'projects/deployments/actions', deployment: last_deployment

app/views/projects/environments/index.html.haml

@@ -9,25 +9,27 @@
         = link_to new_namespace_project_environment_path(@project.namespace, @project), class: 'btn btn-create' do
           New environment
 
-  - if @environments.blank?
-    .blank-state.blank-state-no-icon
-      %h2.blank-state-title
-        You don't have any environments right now.
-      %p.blank-state-text
-        Environments are places where code gets deployed, such as staging or production.
-        %br
-        = succeed "." do
-          = link_to "Read more about environments", help_page_path("ci/environments")
-      - if can?(current_user, :create_environment, @project)
-        = link_to new_namespace_project_environment_path(@project.namespace, @project), class: 'btn btn-create' do
-          New environment
-  - else
-    .table-holder
-      %table.table.builds.environments
-        %tbody
-          %th Environment
-          %th Last Deployment
-          %th Commit
-          %th
-          %th
-        = render @environments
+  .environments-container
+    - if @environments.blank?
+      .blank-state.blank-state-no-icon
+        %h2.blank-state-title
+          You don't have any environments right now.
+        %p.blank-state-text
+          Environments are places where code gets deployed, such as staging or production.
+          %br
+          = succeed "." do
+            = link_to "Read more about environments", help_page_path("ci/environments")
+        - if can?(current_user, :create_environment, @project)
+          = link_to new_namespace_project_environment_path(@project.namespace, @project), class: 'btn btn-create' do
+            New environment
+    - else
+      .table-holder
+        %table.table.builds.environments
+          %tbody
+            %th Environment
+            %th Last Deployment
+            %th Build
+            %th Commit
+            %th
+            %th.hidden-xs
+          = render @environments

app/views/projects/environments/show.html.haml

@@ -12,26 +12,27 @@
           = link_to 'Edit', edit_namespace_project_environment_path(@project.namespace, @project, @environment), class: 'btn'
           = link_to 'Destroy', namespace_project_environment_path(@project.namespace, @project, @environment), data: { confirm: 'Are you sure you want to delete this environment?' }, class: 'btn btn-danger', method: :delete
 
-  - if @deployments.blank?
-    .blank-state.blank-state-no-icon
-      %h2.blank-state-title
-        You don't have any deployments right now.
-      %p.blank-state-text
-        Define environments in the deploy stage(s) in
-        %code .gitlab-ci.yml
-        to track deployments here.
-      = link_to "Read more", help_page_path("ci/environments"), class: "btn btn-success"
-  - else
-    .table-holder
-      %table.table.builds.environments
-        %thead
-          %tr
-            %th ID
-            %th Commit
-            %th Build
-            %th
-            %th
+  .deployments-container
+    - if @deployments.blank?
+      .blank-state.blank-state-no-icon
+        %h2.blank-state-title
+          You don't have any deployments right now.
+        %p.blank-state-text
+          Define environments in the deploy stage(s) in
+          %code .gitlab-ci.yml
+          to track deployments here.
+        = link_to "Read more", help_page_path("ci/environments"), class: "btn btn-success"
+    - else
+      .table-holder
+        %table.table.builds.environments
+          %thead
+            %tr
+              %th ID
+              %th Commit
+              %th Build
+              %th
+              %th.hidden-xs
 
-        = render @deployments
+          = render @deployments
 
-    = paginate @deployments, theme: 'gitlab'
+      = paginate @deployments, theme: 'gitlab'

spec/features/environments_spec.rb

@@ -44,6 +44,10 @@ feature 'Environments', feature: true do
         scenario 'does show deployment SHA' do
           expect(page).to have_link(deployment.short_sha)
         end
+        
+        scenario 'does show deployment internal id' do
+          expect(page).to have_content(deployment.iid)
+        end
 
         context 'with build and manual actions' do
           given(:pipeline) { create(:ci_pipeline, project: project) }
@@ -61,6 +65,20 @@ feature 'Environments', feature: true do
             expect(page).to have_content(manual.name)
             expect(manual.reload).to be_pending
           end
+          
+          scenario 'does show build name and id' do
+            expect(page).to have_link("#{build.name} (##{build.id})")
+          end
+          
+          context 'with external_url' do
+            given(:environment) { create(:environment, project: project, external_url: 'https://git.gitlab.com') }
+            given(:build) { create(:ci_build, pipeline: pipeline) }
+            given(:deployment) { create(:deployment, environment: environment, deployable: build) }
+            
+            scenario 'does show an external link button' do
+              expect(page).to have_link(nil, href: environment.external_url)
+            end
+          end
         end
       end
     end
@@ -122,6 +140,16 @@ feature 'Environments', feature: true do
             expect(page).to have_content(manual.name)
             expect(manual.reload).to be_pending
           end
+          
+          context 'with external_url' do
+            given(:environment) { create(:environment, project: project, external_url: 'https://git.gitlab.com') }
+            given(:build) { create(:ci_build, pipeline: pipeline) }
+            given(:deployment) { create(:deployment, environment: environment, deployable: build) }
+            
+            scenario 'does show an external link button' do
+              expect(page).to have_link(nil, href: environment.external_url)
+            end
+          end
         end
       end
     end