From 79f71f8e8a5571e6fd3602c5975f71ca9836a0a6 Mon Sep 17 00:00:00 2001
From: Denis Gukov <denguk@gmail.com>
Date: Mon, 9 Dec 2024 17:21:26 +0500
Subject: [PATCH] feat(tf): ui for state

---
 api/projects/terraform_inventory.go           |  2 +-
 web/src/components/TerraformStateView.vue     | 12 ++++
 web/src/views/project/Inventory.vue           |  1 +
 .../template/TemplateTerraformState.vue       | 58 +++++++++++++++++--
 4 files changed, 67 insertions(+), 6 deletions(-)
 create mode 100644 web/src/components/TerraformStateView.vue

diff --git a/api/projects/terraform_inventory.go b/api/projects/terraform_inventory.go
index d4c3aaa0..29b576e0 100644
--- a/api/projects/terraform_inventory.go
+++ b/api/projects/terraform_inventory.go
@@ -28,7 +28,7 @@ func SetTerraformInventoryAliasAccessKey(w http.ResponseWriter, r *http.Request)
 }
 
 func GetTerraformInventoryStates(w http.ResponseWriter, r *http.Request) {
-	w.WriteHeader(http.StatusNotFound)
+	helpers.WriteJSON(w, http.StatusOK, []string{})
 }
 
 func AddTerraformInventoryState(w http.ResponseWriter, r *http.Request) {
diff --git a/web/src/components/TerraformStateView.vue b/web/src/components/TerraformStateView.vue
new file mode 100644
index 00000000..ed759079
--- /dev/null
+++ b/web/src/components/TerraformStateView.vue
@@ -0,0 +1,12 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    };
+  },
+};
+</script>
diff --git a/web/src/views/project/Inventory.vue b/web/src/views/project/Inventory.vue
index a9e7b427..7aef7b71 100644
--- a/web/src/views/project/Inventory.vue
+++ b/web/src/views/project/Inventory.vue
@@ -189,6 +189,7 @@ export default {
         sortable: false,
       }];
     },
+
     getItemsUrl() {
       return `/api/project/${this.projectId}/inventory`;
     },
diff --git a/web/src/views/project/template/TemplateTerraformState.vue b/web/src/views/project/template/TemplateTerraformState.vue
index 7b4a92f9..b7d8991c 100644
--- a/web/src/views/project/template/TemplateTerraformState.vue
+++ b/web/src/views/project/template/TemplateTerraformState.vue
@@ -12,17 +12,23 @@
         class="ml-2"
         color="hsl(348deg, 86%, 61%)"
         href="https://semaphoreui.com/pro"
-      >Upgrade</v-btn>
+      >Upgrade
+      </v-btn>
     </v-alert>
 
     <div class="px-4 py-3">
       <div v-for="alias of (aliases || [])" :key="alias.id">
         <code class="mr-2">{{ alias.url }}</code>
-        <v-btn icon
-               @click="copyToClipboard(alias.url, $t('aliasUrlCopied'))">
+        <v-btn
+          icon
+          @click="copyToClipboard(alias.url, $t('aliasUrlCopied'))"
+        >
           <v-icon>mdi-content-copy</v-icon>
         </v-btn>
-        <v-btn icon @click="deleteAlias(alias.id)" :disabled="!premiumFeatures.terraform_backend">
+        <v-btn icon @click="editAlias(alias.id)">
+          <v-icon>mdi-pencil</v-icon>
+        </v-btn>
+        <v-btn icon @click="deleteAlias(alias.id)">
           <v-icon>mdi-delete</v-icon>
         </v-btn>
       </div>
@@ -32,6 +38,26 @@
       </v-btn>
     </div>
 
+    <v-data-table
+      :headers="headers"
+      :items="states"
+      :footer-props="{ itemsPerPageOptions: [20] }"
+      class="mt-0"
+    >
+      <template v-slot:item.id="{ item }">
+        <router-link
+          to="`/project/${item.project_id}/templates/${item.id}/terraform/state/${item.id}`"
+        >
+          {{ item.id }}
+        </router-link>
+      </template>
+
+      <template v-slot:item.actions="{ item }">
+        <v-btn icon class="pl-1 pr-2" @click="deleteState(item)">
+          <v-icon class="pr-1">mdi-trash</v-icon>
+        </v-btn>
+      </template>
+    </v-data-table>
   </div>
 </template>
 <script>
@@ -46,11 +72,25 @@ export default {
     inventory: Array,
     environment: Array,
     premiumFeatures: Object,
+    states: Array,
   },
 
   data() {
     return {
-      aliases: null,
+      headers: [{
+        text: 'ID',
+        value: 'id',
+        sortable: false,
+      }, {
+        text: 'Task',
+        value: 'task_id',
+        sortable: false,
+      }, {
+        text: 'Actions',
+        value: '',
+        sortable: false,
+      }],
+      aliases: [],
     };
   },
 
@@ -59,6 +99,10 @@ export default {
   },
 
   methods: {
+    deleteState(id) {
+      console.log(id);
+    },
+
     async loadAliases() {
       this.aliases = (await axios({
         method: 'get',
@@ -67,6 +111,10 @@ export default {
       })).data;
     },
 
+    editAlias(alias) {
+      console.log(alias);
+    },
+
     async deleteAlias(alias) {
       await axios({
         method: 'delete',