Add pipeline information to Terraform State list

Added new pipeline column to terraform state table
Updated styles for terraform state table
Updated associated tests and translations

app/assets/javascripts/terraform/components/states_table.vue

 <script>
-import { GlBadge, GlIcon, GlSprintf, GlTable, GlTooltip } from '@gitlab/ui';
+import { GlBadge, GlIcon, GlLink, GlSprintf, GlTable, GlTooltip } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import CiBadge from '~/vue_shared/components/ci_badge_link.vue';
 import StateActions from './states_table_actions.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 
 export default {
   components: {
+    CiBadge,
     GlBadge,
     GlIcon,
+    GlLink,
     GlSprintf,
     GlTable,
     GlTooltip,
@@ -32,20 +36,24 @@ export default {
       const columns = [
         {
           key: 'name',
-          thClass: 'gl-display-none',
+          label: this.$options.i18n.name,
+        },
+        {
+          key: 'pipeline',
+          label: this.$options.i18n.pipeline,
         },
         {
           key: 'updated',
-          thClass: 'gl-display-none',
-          tdClass: 'gl-text-right',
+          label: this.$options.i18n.details,
         },
       ];
 
       if (this.terraformAdmin) {
         columns.push({
           key: 'actions',
-          thClass: 'gl-display-none',
-          tdClass: 'gl-w-10',
+          label: this.$options.i18n.actions,
+          thClass: 'gl-w-12',
+          tdClass: 'gl-text-right',
         });
       }
 
@@ -53,8 +61,13 @@ export default {
     },
   },
   i18n: {
+    actions: s__('Terraform|Actions'),
+    details: s__('Terraform|Details'),
+    jobStatus: s__('Terraform|Job status'),
     locked: s__('Terraform|Locked'),
     lockedByUser: s__('Terraform|Locked by %{user} %{timeAgo}'),
+    name: s__('Terraform|Name'),
+    pipeline: s__('Terraform|Pipeline'),
     unknownUser: s__('Terraform|Unknown User'),
     updatedUser: s__('Terraform|%{user} updated %{timeAgo}'),
   },
@@ -65,6 +78,21 @@ export default {
     lockedByUserName(item) {
       return item.lockedByUser?.name || this.$options.i18n.unknownUser;
     },
+    pipelineDetailedStatus(item) {
+      return item.latestVersion?.job?.detailedStatus;
+    },
+    pipelineID(item) {
+      let id = item.latestVersion?.job?.pipeline?.id;
+
+      if (id) {
+        id = getIdFromGraphQLId(id);
+      }
+
+      return id;
+    },
+    pipelinePath(item) {
+      return item.latestVersion?.job?.pipeline?.path;
+    },
     updatedTime(item) {
       return item.latestVersion?.updatedAt || item.updatedAt;
     },
@@ -73,9 +101,18 @@ export default {
 </script>
 
 <template>
-  <gl-table :items="states" :fields="fields" data-testid="terraform-states-table">
+  <gl-table
+    :items="states"
+    :fields="fields"
+    data-testid="terraform-states-table"
+    fixed
+    stacked="md"
+  >
     <template #cell(name)="{ item }">
-      <div class="gl-display-flex align-items-center" data-testid="terraform-states-table-name">
+      <div
+        class="gl-display-flex align-items-center gl-justify-content-end gl-justify-content-md-start"
+        data-testid="terraform-states-table-name"
+      >
         <p class="gl-font-weight-bold gl-m-0 gl-text-gray-900">
           {{ item.name }}
         </p>
@@ -105,6 +142,34 @@ export default {
       </div>
     </template>
 
+    <template #cell(pipeline)="{ item }">
+      <div data-testid="terraform-states-table-pipeline" class="gl-min-h-7">
+        <gl-link v-if="pipelineID(item)" :href="pipelinePath(item)">
+          #{{ pipelineID(item) }}
+        </gl-link>
+
+        <div
+          v-if="pipelineDetailedStatus(item)"
+          :id="`terraformJobStatusContainer${item.name}`"
+          class="gl-my-2"
+        >
+          <ci-badge
+            :id="`terraformJobStatus${item.name}`"
+            :status="pipelineDetailedStatus(item)"
+            class="gl-py-1"
+          />
+
+          <gl-tooltip
+            :container="`terraformJobStatusContainer${item.name}`"
+            :target="`terraformJobStatus${item.name}`"
+            placement="right"
+          >
+            {{ $options.i18n.jobStatus }}
+          </gl-tooltip>
+        </div>
+      </div>
+    </template>
+
     <template #cell(updated)="{ item }">
       <p class="gl-m-0" data-testid="terraform-states-table-updated">
         <gl-sprintf :message="$options.i18n.updatedUser">

app/assets/javascripts/terraform/graphql/fragments/state_version.fragment.graphql

@@ -8,4 +8,19 @@ fragment StateVersion on TerraformStateVersion {
   createdByUser {
     ...User
   }
+
+  job {
+    detailedStatus {
+      detailsPath
+      group
+      icon
+      label
+      text
+    }
+
+    pipeline {
+      id
+      path
+    }
+  }
 }

app/assets/javascripts/vue_shared/components/ci_badge_link.vue

@@ -20,6 +20,7 @@ import CiIcon from './ci_icon.vue';
  * - Pipeline show view - header
  * - Job show view - header
  * - MR widget
+ * - Terraform table
  */
 
 export default {

app/graphql/types/ci/job_type.rb

@@ -6,7 +6,7 @@ module Types
     class JobType < BaseObject
       graphql_name 'CiJob'
 
-      field :pipeline, Types::Ci::PipelineType, null: false,
+      field :pipeline, Types::Ci::PipelineType, null: true,
             description: 'Pipeline the job belongs to'
       field :name, GraphQL::STRING_TYPE, null: true,
             description: 'Name of the job'

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

+- add_page_specific_style 'page_bundles/ci_status'
+
 - breadcrumb_title _('Terraform')
 - page_title _('Terraform')
 

changelogs/unreleased/emilyring-terraform-pipeline.yml

+---
+title: Add pipeline information to Terraform state list
+merge_request: 49042
+author:
+type: added

doc/api/graphql/reference/gitlab_schema.graphql

@@ -2498,7 +2498,7 @@ type CiJob {
   """
   Pipeline the job belongs to
   """
-  pipeline: Pipeline!
+  pipeline: Pipeline
 
   """
   Schedule for the build

doc/api/graphql/reference/gitlab_schema.json

@@ -6737,13 +6737,9 @@
 
               ],
               "type": {
-                "kind": "NON_NULL",
-                "name": null,
-                "ofType": {
-                  "kind": "OBJECT",
-                  "name": "Pipeline",
-                  "ofType": null
-                }
+                "kind": "OBJECT",
+                "name": "Pipeline",
+                "ofType": null
               },
               "isDeprecated": false,
               "deprecationReason": null

doc/api/graphql/reference/index.md

@@ -430,7 +430,7 @@ Represents the total number of issues and their weights for a particular day.
 | `detailedStatus` | DetailedStatus | Detailed status of the job |
 | `name` | String | Name of the job |
 | `needs` | CiJobConnection | Builds that must complete before the jobs run |
-| `pipeline` | Pipeline! | Pipeline the job belongs to |
+| `pipeline` | Pipeline | Pipeline the job belongs to |
 | `scheduledAt` | Time | Schedule for the build |
 
 ### CiJobArtifact

locale/gitlab.pot

@@ -27072,9 +27072,15 @@ msgstr ""
 msgid "Terraform|A Terraform report was generated in your pipelines."
 msgstr ""
 
+msgid "Terraform|Actions"
+msgstr ""
+
 msgid "Terraform|An error occurred while loading your Terraform States"
 msgstr ""
 
+msgid "Terraform|Details"
+msgstr ""
+
 msgid "Terraform|Download JSON"
 msgstr ""
 
@@ -27087,6 +27093,9 @@ msgstr ""
 msgid "Terraform|Get started with Terraform"
 msgstr ""
 
+msgid "Terraform|Job status"
+msgstr ""
+
 msgid "Terraform|Lock"
 msgstr ""
 
@@ -27096,6 +27105,12 @@ msgstr ""
 msgid "Terraform|Locked by %{user} %{timeAgo}"
 msgstr ""
 
+msgid "Terraform|Name"
+msgstr ""
+
+msgid "Terraform|Pipeline"
+msgstr ""
+
 msgid "Terraform|Reported Resource Changes: %{addNum} to add, %{changeNum} to change, %{deleteNum} to delete"
 msgstr ""
 

spec/frontend/terraform/components/states_table_spec.js

@@ -38,6 +38,19 @@ describe('StatesTable', () => {
           createdByUser: {
             name: 'user-3',
           },
+          job: {
+            detailedStatus: {
+              detailsPath: '/job-path-3',
+              group: 'failed',
+              icon: 'status_failed',
+              label: 'failed',
+              text: 'failed',
+            },
+            pipeline: {
+              id: 'gid://gitlab/Ci::Pipeline/3',
+              path: '/pipeline-path-3',
+            },
+          },
         },
       },
       {
@@ -48,6 +61,19 @@ describe('StatesTable', () => {
         latestVersion: {
           updatedAt: '2020-10-09T00:00:00Z',
           createdByUser: null,
+          job: {
+            detailedStatus: {
+              detailsPath: '/job-path-4',
+              group: 'passed',
+              icon: 'status_success',
+              label: 'passed',
+              text: 'passed',
+            },
+            pipeline: {
+              id: 'gid://gitlab/Ci::Pipeline/4',
+              path: '/pipeline-path-4',
+            },
+          },
         },
       },
     ],
@@ -107,6 +133,23 @@ describe('StatesTable', () => {
     expect(state.text()).toMatchInterpolatedText(updateTime);
   });
 
+  it.each`
+    pipelineText              | toolTipAdded | lineNumber
+    ${''}                     | ${false}     | ${0}
+    ${''}                     | ${false}     | ${1}
+    ${'#3 failed Job status'} | ${true}      | ${2}
+    ${'#4 passed Job status'} | ${true}      | ${3}
+  `(
+    'displays the pipeline information for line "$lineNumber"',
+    ({ pipelineText, toolTipAdded, lineNumber }) => {
+      const states = wrapper.findAll('[data-testid="terraform-states-table-pipeline"]');
+      const state = states.at(lineNumber);
+
+      expect(state.find(GlTooltip).exists()).toBe(toolTipAdded);
+      expect(state.text()).toMatchInterpolatedText(pipelineText);
+    },
+  );
+
   it('displays no actions dropdown', () => {
     expect(findActions().length).toEqual(0);
   });