Fix Spacing in Env Dashboard for Long Branch Names

Before, the commit ref would be pushed down, and things wouldn't line
up.

Now there is sufficient space for branch names that truncate.

Also show if a deployment is due to a tag or not.

Also show avatars for commits not made by GitLab users.

changelogs/unreleased/environments-dashboard-ux-tweaks.yml

+---
+title: Minor UX improvements to Environments Dashboard page
+merge_request: 18280
+author:
+type: changed

ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment.vue

@@ -56,6 +56,7 @@ export default {
         'dashboard-card-body-warning': !this.hasPipelineFailed && this.hasPipelineErrors,
         'dashboard-card-body-failed': this.hasPipelineFailed,
         'bg-secondary': !this.hasPipelineFailed && !this.hasPipelineErrors,
+        'd-flex flex-column justify-content-center align-items-center': !this.deployable,
       };
     },
     user() {
@@ -87,6 +88,15 @@ export default {
           }
         : {};
     },
+    commitAuthor() {
+      return (
+        this.commit.author || {
+          avatar_url: this.commit.author_gravatar_url,
+          path: `mailto:${_.escape(this.commit.author_email)}`,
+          username: this.commit.author_name,
+        }
+      );
+    },
     finishedTime() {
       return this.deployable.updated_at;
     },
@@ -127,7 +137,7 @@ export default {
           />
         </div>
 
-        <div class="col-10 col-sm-6 pr-0 pl-5 align-self-center align-middle ci-table">
+        <div class="col-10 col-sm-7 pr-0 pl-5 align-self-center align-middle ci-table">
           <div class="branch-commit">
             <icon name="work" />
             <gl-link v-gl-tooltip="jobTooltip" :href="deployable.build_path" class="str-truncated">
@@ -135,23 +145,29 @@ export default {
             </gl-link>
           </div>
           <commit
-            :tag="commitRef.tag"
+            :tag="lastDeployment.tag"
             :commit-ref="commitRef"
             :short-sha="commit.short_id"
             :commit-url="commit.commit_url"
             :title="commit.title"
-            :author="commit.author"
+            :author="commitAuthor"
             :show-branch="true"
           />
         </div>
 
-        <div class="col-sm-5 pl-0 text-right align-self-center d-none d-sm-block">
+        <div
+          class="col-sm-4 mt-0 pl-5 pl-sm-0 offset-1 offset-sm-0 text-sm-right align-self-center col-12 d-sm-block"
+        >
           <time-ago
             v-if="shouldShowTimeAgo"
             :time="finishedTime"
             :tooltip-text="$options.tooltips.timeAgo"
           />
-          <alerts :count="environment.alert_count" :last-alert="environment.last_alert" />
+          <alerts
+            v-if="environment.alert_count > 0"
+            :count="environment.alert_count"
+            :last-alert="environment.last_alert"
+          />
         </div>
 
         <div v-if="lastPipeline" class="col-12">
@@ -164,7 +180,7 @@ export default {
       </div>
 
       <div v-else class="h-100 d-flex justify-content-center align-items-center">
-        <div class="text-plain text-metric text-center bold w-75">
+        <div class="text-plain text-metric text-center bold">
           {{ $options.noDeploymentMessage }}
         </div>
       </div>

ee/spec/frontend/environments_dashboard/components/__snapshots__/environment_spec.js.snap

@@ -31,7 +31,7 @@ exports[`Environment matchs the snapshot 1`] = `
       </div>
        
       <div
-        class="col-10 col-sm-6 pr-0 pl-5 align-self-center align-middle ci-table"
+        class="col-10 col-sm-7 pr-0 pl-5 align-self-center align-middle ci-table"
       >
         <div
           class="branch-commit"
@@ -54,6 +54,7 @@ exports[`Environment matchs the snapshot 1`] = `
         </div>
          
         <commit-stub
+          author="[object Object]"
           commitref="[object Object]"
           commiturl="https://22878.qa-tunnel.gitlab.info/root/minimal-ruby-app/commit/63492726c2264a0277141d6a6573c3d22ecd7de3"
           shortsha="63492726"
@@ -64,7 +65,7 @@ exports[`Environment matchs the snapshot 1`] = `
       </div>
        
       <div
-        class="col-sm-5 pl-0 text-right align-self-center d-none d-sm-block"
+        class="col-sm-4 mt-0 pl-5 pl-sm-0 offset-1 offset-sm-0 text-sm-right align-self-center col-12 d-sm-block"
       >
         <timeago-stub
           time="2019-02-20T16:15:40.122Z"

ee/spec/frontend/environments_dashboard/components/environment_spec.js

@@ -73,7 +73,11 @@ describe('Environment', () => {
       });
 
       it('binds author', () => {
-        expect(commit.props('author')).toBe(environment.last_deployment.commit.author);
+        expect(commit.props('author')).toEqual({
+          avatar_url: environment.last_deployment.commit.author_gravatar_url,
+          path: `mailto:${environment.last_deployment.commit.author_email}`,
+          username: environment.last_deployment.commit.author_name,
+        });
       });
 
       it('binds tag', () => {