Show the job that created the deployment

Also link to it in case the trace logs need to be examined.

If a deployment is made with the API, there is no job. Instead, display
a badge with the text 'API'.

app/assets/javascripts/environments/components/deployment.vue

@@ -80,6 +80,15 @@ export default {
     userPath() {
       return this.user?.path;
     },
+    deployable() {
+      return this.deployment?.deployable;
+    },
+    jobName() {
+      return truncate(this.deployable?.name ?? '', 25);
+    },
+    jobPath() {
+      return this.deployable?.buildPath;
+    },
   },
   methods: {
     toggleCollapse() {
@@ -94,6 +103,8 @@ export default {
     showDetails: __('Show details'),
     hideDetails: __('Hide details'),
     triggerer: s__('Deployment|Triggerer'),
+    job: __('Job'),
+    api: __('API'),
   },
   headerClasses: [
     'gl-display-flex',
@@ -174,6 +185,20 @@ export default {
           <span class="gl-text-gray-500 gl-font-weight-bold">{{ $options.i18n.triggerer }}</span>
           <gl-link :href="userPath" class="gl-font-monospace gl-mt-3"> @{{ username }} </gl-link>
         </div>
+        <div class="gl-display-flex gl-flex-direction-column gl-ml-5">
+          <span class="gl-text-gray-500 gl-font-weight-bold" :class="{ 'gl-ml-3': !deployable }">
+            {{ $options.i18n.job }}
+          </span>
+          <gl-link v-if="jobPath" :href="jobPath" class="gl-font-monospace gl-mt-3">
+            {{ jobName }}
+          </gl-link>
+          <span v-else-if="jobName" class="gl-font-monospace gl-mt-3">
+            {{ jobName }}
+          </span>
+          <gl-badge v-else class="gl-font-monospace gl-mt-3" variant="info">
+            {{ $options.i18n.api }}
+          </gl-badge>
+        </div>
       </div>
     </gl-collapse>
   </div>

spec/frontend/environments/deployment_spec.js

@@ -209,6 +209,36 @@ describe('~/environments/components/deployment.vue', () => {
       const username = wrapper.findByRole('link', { name: `@${deployment.user.username}` });
 
       expect(username.attributes('href')).toBe(deployment.user.path);
+      const job = wrapper.findByRole('link', { name: deployment.deployable.name });
+      expect(job.attributes('href')).toBe(deployment.deployable.buildPath);
+      const apiBadge = wrapper.findByText(__('API'));
+      expect(apiBadge.exists()).toBe(false);
+    });
+  });
+  describe('with API deployment', () => {
+    beforeEach(async () => {
+      wrapper = createWrapper({ propsData: { deployment: { ...deployment, deployable: null } } });
+      await wrapper.findComponent({ ref: 'details-toggle' }).trigger('click');
+    });
+
+    it('shows API instead of a job name', () => {
+      const apiBadge = wrapper.findByText(__('API'));
+      expect(apiBadge.exists()).toBe(true);
+    });
+  });
+  describe('without a job path', () => {
+    beforeEach(async () => {
+      wrapper = createWrapper({
+        propsData: {
+          deployment: { ...deployment, deployable: { name: deployment.deployable.name } },
+        },
+      });
+      await wrapper.findComponent({ ref: 'details-toggle' }).trigger('click');
+    });
+
+    it('shows a span instead of a link', () => {
+      const job = wrapper.findByText(deployment.deployable.name);
+      expect(job.attributes('href')).toBeUndefined();
     });
   });
 });