From 0688c295b9392c82d969ac955fe53e49626419c1 Mon Sep 17 00:00:00 2001
From: Fabio Ghirardello <fabio@cockroachlabs.com>
Date: Tue, 30 Jan 2024 16:48:02 -0500
Subject: [PATCH] ..

---
 apiserver/routers/attachments.py           |  4 +-
 webapp/src/components/FabEditableField.vue | 29 +++++++++
 webapp/src/layout/AppHeader.vue            | 19 ++++--
 webapp/src/views/InstanceView.vue          | 74 ++++++++++++----------
 4 files changed, 85 insertions(+), 41 deletions(-)

diff --git a/apiserver/routers/attachments.py b/apiserver/routers/attachments.py
index 43a0626..26b0466 100644
--- a/apiserver/routers/attachments.py
+++ b/apiserver/routers/attachments.py
@@ -80,7 +80,7 @@ async def get_presigned_put_url(
         # this should append to the new list...
         bg_task.add_task(
             svc.update_documents,
-            [{"comp_id": model_name + "_" + str(id), "attachments": ", ".join(attachments)}],
+            [{"comp_id": model_name + "_" + str(id), "attachments": attachments}],
         )
     return HTMLResponse(content=data)
 
@@ -114,5 +114,5 @@ async def delete_attachement(
     # this should add the new list
     bg_task.add_task(
         svc.update_documents,
-        [{"comp_id": model_name + "_" + str(id), "attachments": ', '.join(attachments)}],
+        [{"comp_id": model_name + "_" + str(id), "attachments": attachments}],
     )
diff --git a/webapp/src/components/FabEditableField.vue b/webapp/src/components/FabEditableField.vue
index 1d5624c..d70727b 100644
--- a/webapp/src/components/FabEditableField.vue
+++ b/webapp/src/components/FabEditableField.vue
@@ -99,6 +99,35 @@
       />
     </div>
   </div>
+  <div v-else-if="item_type === 'tags'">
+    <div v-if="edit_field !== item_name" class="m-1 flex h-8 items-center">
+      <div
+            v-for="tag in instance?.[item_name]"
+            v-bind:key="tag"
+            class="p-1"
+          >
+            <div
+              class="flex h-8 w-fit min-w-16 items-center justify-center rounded-2xl p-2 text-sm font-semibold"
+              v-bind:class="getLabel(tag)"
+            >
+              {{ tag }}
+            </div>
+          </div>
+      
+
+    </div>
+    <div
+      v-else
+      class="m-1 h-8 rounded border bg-slate-300 dark:bg-slate-500 dark:text-white"
+    >
+      <input
+        v-model.lazy.trim="new_value"
+        class="h-full w-full p-2 text-black"
+        type="text"
+        autocomplete="off"
+      />
+    </div>
+  </div>
   <div v-else-if="item_type === 'markdown'">
     <div
       v-if="edit_field !== item_name"
diff --git a/webapp/src/layout/AppHeader.vue b/webapp/src/layout/AppHeader.vue
index 2552d95..b308fd7 100644
--- a/webapp/src/layout/AppHeader.vue
+++ b/webapp/src/layout/AppHeader.vue
@@ -27,8 +27,7 @@
         placeholder="Search..."
         reset-title="Remove the query"
         v-on:focus="open_ais_hits = true"
-        ></ais-search-box
-      >
+      ></ais-search-box>
       <div
         v-if="open_ais_hits"
         class="fixed left-0 top-0 z-10 flex h-full w-full items-center justify-center"
@@ -63,8 +62,20 @@
               );
             })"
           >
-            <div v-if="item[k] && (!Array.isArray(item[k] || item[k].length > 0))">
-              
+            <div v-if="item[k] && Array.isArray(item[k]) && item[k].length > 0">
+              <label
+                class="font-semibold hover:cursor-pointer hover:underline"
+                v-on:click="routerSearchLinker(item.comp_id)"
+                >{{ k }}:
+              </label>
+              <div class="flex" v-for="i in item[k]" v-bind:key="i">
+                <div
+                  class="hover:cursor-pointer hover:underline"
+                  v-on:click="routerSearchLinker(item.comp_id)"
+                  >-  {{ i }}</div>
+              </div>
+            </div>
+            <div v-if="item[k] && !Array.isArray(item[k])">
               <label
                 class="font-semibold hover:cursor-pointer hover:underline"
                 v-on:click="routerSearchLinker(item.comp_id)"
diff --git a/webapp/src/views/InstanceView.vue b/webapp/src/views/InstanceView.vue
index 5ab6d9b..93313c2 100644
--- a/webapp/src/views/InstanceView.vue
+++ b/webapp/src/views/InstanceView.vue
@@ -133,33 +133,31 @@
           </div>
         </div>
 
-        <div class="mb-1 mx-1 text-sm">
-          owned_by: {{ modelStore.instance?.owned_by }}
-        </div>
-        <div class="mb-1 mx-1 text-sm">
-          permissions: {{ modelStore.instance?.permissions }}
-        </div>
+        <FabEditableField
+          v-bind:instance="modelStore.instance"
+          item_name="owned_by"
+          item_type="string"
+          v-on:save_new_value="save_new_value($event[0], $event[1], $event[2])"
+        ></FabEditableField>
+
+        <FabEditableField
+          v-bind:instance="modelStore.instance"
+          item_name="permissions"
+          item_type="string"
+          v-on:save_new_value="save_new_value($event[0], $event[1], $event[2])"
+        ></FabEditableField>
 
         <hr
           id="linebreaker"
           class="m-1 rounded-full border border-gray-200 bg-gray-200 dark:border-gray-800 dark:bg-gray-800"
         />
 
-        <div class="mb-1 mx-1 text-sm">
-          tags:
-          <div
-            v-for="tag in modelStore.instance?.tags"
-            v-bind:key="tag"
-            class="p-1"
-          >
-            <div
-              class="flex h-8 w-fit min-w-16 items-center justify-center rounded-2xl p-2 text-sm font-semibold"
-              v-bind:class="getLabel(tag)"
-            >
-              {{ tag }}
-            </div>
-          </div>
-        </div>
+        <FabEditableField
+          v-bind:instance="modelStore.instance"
+          item_name="tags"
+          item_type="tags"
+          v-on:save_new_value="save_new_value($event[0], $event[1], $event[2])"
+        ></FabEditableField>
 
         <hr
           id="linebreaker"
@@ -312,19 +310,6 @@ const attachment = ref("");
 const edit_field = ref("");
 const new_value = ref("");
 
-const delete_attachment = async () => {
-  showDeleteAttachmentModal.value = false;
-
-  await modelStore.delete_attachment(
-    instance_type.value,
-    instance_id.value,
-    attachment.value,
-  );
-
-  // refresh to get updated list of attachments
-  modelStore.get_instance(instance_type.value, instance_id.value);
-};
-
 const delete_instance = async () => {
   showDeleteInstanceModal.value = false;
 
@@ -421,7 +406,10 @@ const upload_file = async (e: any) => {
     body: e.target.files[0],
   });
 
-  modelStore.get_instance(instance_type.value, instance_id.value);
+  modelStore.instance = await modelStore.get_instance(
+    instance_type.value,
+    instance_id.value,
+  );
 };
 
 const download_file = async (filename: string) => {
@@ -439,6 +427,22 @@ const confirm_delete_attachment = async (s: any) => {
   attachment.value = s;
 };
 
+const delete_attachment = async () => {
+  showDeleteAttachmentModal.value = false;
+
+  await modelStore.delete_attachment(
+    instance_type.value,
+    instance_id.value,
+    attachment.value,
+  );
+
+  // refresh to get updated list of attachments
+  modelStore.instance = await modelStore.get_instance(
+    instance_type.value,
+    instance_id.value,
+  );
+};
+
 // const ff = computed(() => {
 //   if (modelStore.instance !== undefined) {
 //     return Object.keys(modelStore.instance)