1 files changed, 58 insertions, 4 deletions

diff --git a/app/assets/javascripts/terraform/components/states_table.vue b/app/assets/javascripts/terraform/components/states_table.vue
index d0d49233334..2577664a5e8 100644
--- a/app/assets/javascripts/terraform/components/states_table.vue
+++ b/app/assets/javascripts/terraform/components/states_table.vue
@@ -1,18 +1,29 @@
 <script>
-import { GlBadge, GlIcon, GlLink, GlSprintf, GlTable, GlTooltip } from '@gitlab/ui';
-import { s__ } from '~/locale';
+import {
+  GlAlert,
+  GlBadge,
+  GlIcon,
+  GlLink,
+  GlLoadingIcon,
+  GlSprintf,
+  GlTable,
+  GlTooltip,
+} from '@gitlab/ui';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { s__ } from '~/locale';
 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';
+import StateActions from './states_table_actions.vue';
 
 export default {
   components: {
     CiBadge,
+    GlAlert,
     GlBadge,
     GlIcon,
     GlLink,
+    GlLoadingIcon,
     GlSprintf,
     GlTable,
     GlTooltip,
@@ -66,15 +77,21 @@ export default {
     jobStatus: s__('Terraform|Job status'),
     locked: s__('Terraform|Locked'),
     lockedByUser: s__('Terraform|Locked by %{user} %{timeAgo}'),
+    lockingState: s__('Terraform|Locking state'),
     name: s__('Terraform|Name'),
     pipeline: s__('Terraform|Pipeline'),
+    removing: s__('Terraform|Removing'),
     unknownUser: s__('Terraform|Unknown User'),
+    unlockingState: s__('Terraform|Unlocking state'),
     updatedUser: s__('Terraform|%{user} updated %{timeAgo}'),
   },
   methods: {
     createdByUserName(item) {
       return item.latestVersion?.createdByUser?.name;
     },
+    loadingLockText(item) {
+      return item.lockedAt ? this.$options.i18n.unlockingState : this.$options.i18n.lockingState;
+    },
     lockedByUserName(item) {
       return item.lockedByUser?.name || this.$options.i18n.unknownUser;
     },
@@ -105,6 +122,7 @@ export default {
     :items="states"
     :fields="fields"
     data-testid="terraform-states-table"
+    details-td-class="gl-p-0!"
     fixed
     stacked="md"
   >
@@ -117,7 +135,27 @@ export default {
           {{ item.name }}
         </p>
 
-        <div v-if="item.lockedAt" :id="`terraformLockedBadgeContainer${item.name}`" class="gl-mx-2">
+        <div v-if="item.loadingLock" class="gl-mx-3">
+          <p class="gl-display-flex gl-justify-content-start gl-align-items-baseline gl-m-0">
+            <gl-loading-icon class="gl-pr-1" />
+            {{ loadingLockText(item) }}
+          </p>
+        </div>
+
+        <div v-else-if="item.loadingRemove" class="gl-mx-3">
+          <p
+            class="gl-display-flex gl-justify-content-start gl-align-items-baseline gl-m-0 gl-text-red-500"
+          >
+            <gl-loading-icon class="gl-pr-1" />
+            {{ $options.i18n.removing }}
+          </p>
+        </div>
+
+        <div
+          v-else-if="item.lockedAt"
+          :id="`terraformLockedBadgeContainer${item.name}`"
+          class="gl-mx-3"
+        >
           <gl-badge :id="`terraformLockedBadge${item.name}`">
             <gl-icon name="lock" />
             {{ $options.i18n.locked }}
@@ -189,5 +227,21 @@ export default {
     <template v-if="terraformAdmin" #cell(actions)="{ item }">
       <state-actions :state="item" />
     </template>
+
+    <template #row-details="row">
+      <gl-alert
+        data-testid="terraform-states-table-error"
+        variant="danger"
+        @dismiss="row.toggleDetails"
+      >
+        <span
+          v-for="errorMessage in row.item.errorMessages"
+          :key="errorMessage"
+          class="gl-display-flex gl-justify-content-start"
+        >
+          {{ errorMessage }}
+        </span>
+      </gl-alert>
+    </template>
   </gl-table>
 </template>