Add user info to Terraform State List

Adds lockedBy info for the state list
Adds updatedBy info for the state list

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

 <script>
-import { GlBadge, GlIcon, GlSprintf, GlTable } from '@gitlab/ui';
+import { GlBadge, GlIcon, GlSprintf, GlTable, GlTooltip } from '@gitlab/ui';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import timeagoMixin from '~/vue_shared/mixins/timeago';
 
 export default {
   components: {
@@ -8,8 +9,10 @@ export default {
     GlIcon,
     GlSprintf,
     GlTable,
+    GlTooltip,
     TimeAgoTooltip,
   },
+  mixins: [timeagoMixin],
   props: {
     states: {
       required: true,
@@ -37,24 +40,53 @@ export default {
 <template>
   <gl-table :items="states" :fields="fields" data-testid="terraform-states-table">
     <template #cell(name)="{ item }">
-      <p
-        class="gl-font-weight-bold gl-m-0 gl-text-gray-900"
-        data-testid="terraform-states-table-name"
-      >
-        {{ item.name }}
-
-        <gl-badge v-if="item.lockedAt">
-          <gl-icon name="lock" />
-          {{ s__('Terraform|Locked') }}
-        </gl-badge>
-      </p>
+      <div class="gl-display-flex align-items-center" data-testid="terraform-states-table-name">
+        <p class="gl-font-weight-bold gl-m-0 gl-text-gray-900">
+          {{ item.name }}
+        </p>
+
+        <div v-if="item.lockedAt" id="terraformLockedBadgeContainer" class="gl-mx-2">
+          <gl-badge id="terraformLockedBadge">
+            <gl-icon name="lock" />
+            {{ s__('Terraform|Locked') }}
+          </gl-badge>
+
+          <gl-tooltip
+            container="terraformLockedBadgeContainer"
+            placement="right"
+            target="terraformLockedBadge"
+          >
+            <gl-sprintf :message="s__('Terraform|Locked by %{user} %{timeAgo}')">
+              <template #user>
+                {{ item.lockedByUser.name }}
+              </template>
+
+              <template #timeAgo>
+                {{ timeFormatted(item.lockedAt) }}
+              </template>
+            </gl-sprintf>
+          </gl-tooltip>
+        </div>
+      </div>
     </template>
 
     <template #cell(updated)="{ item }">
       <p class="gl-m-0" data-testid="terraform-states-table-updated">
-        <gl-sprintf :message="s__('Terraform|updated %{timeStart}time%{timeEnd}')">
-          <template #time>
-            <time-ago-tooltip :time="item.updatedAt" />
+        <gl-sprintf :message="s__('Terraform|%{user} updated %{timeAgo}')">
+          <template #user>
+            <span v-if="item.latestVersion">
+              {{ item.latestVersion.createdByUser.name }}
+            </span>
+          </template>
+
+          <template #timeAgo>
+            <span v-if="item.latestVersion">
+              <time-ago-tooltip :time="item.latestVersion.updatedAt" />
+            </span>
+
+            <span v-else>
+              <time-ago-tooltip :time="item.updatedAt" />
+            </span>
           </template>
         </gl-sprintf>
       </p>

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

+#import "~/graphql_shared/fragments/user.fragment.graphql"
+#import "./state_version.fragment.graphql"
+
 fragment State on TerraformState {
   id
   name
   lockedAt
   updatedAt
+
+  lockedByUser {
+    ...User
+  }
+
+  latestVersion {
+    ...StateVersion
+  }
 }

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

+#import "~/graphql_shared/fragments/user.fragment.graphql"
+
+fragment StateVersion on TerraformStateVersion {
+  updatedAt
+
+  createdByUser {
+    ...User
+  }
+}

changelogs/unreleased/273001-terraform-list-update.yml

+---
+title: Add user info to Terraform State List
+merge_request: 46984
+author:
+type: changed

locale/gitlab.pot

@@ -26445,6 +26445,9 @@ msgid_plural "Terraform|%{number} Terraform reports were generated in your pipel
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "Terraform|%{user} updated %{timeAgo}"
+msgstr ""
+
 msgid "Terraform|A Terraform report failed to generate."
 msgstr ""
 
@@ -26466,6 +26469,9 @@ msgstr ""
 msgid "Terraform|Locked"
 msgstr ""
 
+msgid "Terraform|Locked by %{user} %{timeAgo}"
+msgstr ""
+
 msgid "Terraform|Reported Resource Changes: %{addNum} to add, %{changeNum} to change, %{deleteNum} to delete"
 msgstr ""
 
@@ -26478,9 +26484,6 @@ msgstr ""
 msgid "Terraform|The Terraform report %{name} was generated in your pipelines."
 msgstr ""
 
-msgid "Terraform|updated %{timeStart}time%{timeEnd}"
-msgstr ""
-
 msgid "Test"
 msgstr ""
 

spec/frontend/terraform/components/states_table_spec.js

-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlTooltip } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { useFakeDate } from 'helpers/fake_date';
 import StatesTable from '~/terraform/components/states_table.vue';
@@ -12,12 +12,32 @@ describe('StatesTable', () => {
       {
         name: 'state-1',
         lockedAt: '2020-10-13T00:00:00Z',
+        lockedByUser: {
+          name: 'user-1',
+        },
         updatedAt: '2020-10-13T00:00:00Z',
+        latestVersion: null,
       },
       {
         name: 'state-2',
         lockedAt: null,
+        lockedByUser: null,
         updatedAt: '2020-10-10T00:00:00Z',
+        latestVersion: null,
+      },
+      {
+        name: 'state-3',
+        lockedAt: '2020-10-10T00:00:00Z',
+        lockedByUser: {
+          name: 'user-2',
+        },
+        updatedAt: '2020-10-10T00:00:00Z',
+        latestVersion: {
+          updatedAt: '2020-10-11T00:00:00Z',
+          createdByUser: {
+            name: 'user-3',
+          },
+        },
       },
     ],
   };
@@ -33,30 +53,38 @@ describe('StatesTable', () => {
   });
 
   it.each`
-    stateName    | locked   | lineNumber
-    ${'state-1'} | ${true}  | ${0}
-    ${'state-2'} | ${false} | ${1}
+    name         | toolTipText                      | locked   | lineNumber
+    ${'state-1'} | ${'Locked by user-1 2 days ago'} | ${true}  | ${0}
+    ${'state-2'} | ${null}                          | ${false} | ${1}
+    ${'state-3'} | ${'Locked by user-2 5 days ago'} | ${true}  | ${2}
   `(
-    'displays the name "$stateName" for line "$lineNumber"',
-    ({ stateName, locked, lineNumber }) => {
+    'displays the name and locked information "$name" for line "$lineNumber"',
+    ({ name, toolTipText, locked, lineNumber }) => {
       const states = wrapper.findAll('[data-testid="terraform-states-table-name"]');
 
       const state = states.at(lineNumber);
+      const toolTip = state.find(GlTooltip);
 
-      expect(state.text()).toContain(stateName);
+      expect(state.text()).toContain(name);
       expect(state.find(GlIcon).exists()).toBe(locked);
+      expect(toolTip.exists()).toBe(locked);
+
+      if (locked) {
+        expect(toolTip.text()).toMatchInterpolatedText(toolTipText);
+      }
     },
   );
 
   it.each`
-    updateTime              | lineNumber
-    ${'updated 2 days ago'} | ${0}
-    ${'updated 5 days ago'} | ${1}
+    updateTime                     | lineNumber
+    ${'updated 2 days ago'}        | ${0}
+    ${'updated 5 days ago'}        | ${1}
+    ${'user-3 updated 4 days ago'} | ${2}
   `('displays the time "$updateTime" for line "$lineNumber"', ({ updateTime, lineNumber }) => {
     const states = wrapper.findAll('[data-testid="terraform-states-table-updated"]');
 
     const state = states.at(lineNumber);
 
-    expect(state.text()).toBe(updateTime);
+    expect(state.text()).toMatchInterpolatedText(updateTime);
   });
 });

spec/frontend/terraform/components/terraform_list_spec.js

@@ -55,12 +55,16 @@ describe('TerraformList', () => {
           name: 'state-1',
           lockedAt: null,
           updatedAt: null,
+          lockedByUser: null,
+          latestVersion: null,
         },
         {
           id: 'gid://gitlab/Terraform::State/2',
           name: 'state-2',
           lockedAt: null,
           updatedAt: null,
+          lockedByUser: null,
+          latestVersion: null,
         },
       ];