Support deleting icons for a workflow version

#61

src/components/workflows/modals/UpdateWorkflowVersionIconModal.vue

@@ -4,6 +4,7 @@ import type { WorkflowVersion } from "@/client/workflow";
 import { WorkflowVersionService } from "@/client/workflow";
 import { onMounted, ref, reactive, computed } from "vue";
 import { Modal, Toast } from "bootstrap";
+import FontAwesomeIcon from "@/components/FontAwesomeIcon.vue";
 
 // Constants
 // =============================================================================
@@ -39,9 +40,11 @@ const iconUpdate = reactive<{
 const formState = reactive<{
   loading: boolean;
   validated: boolean;
+  uploadIcon: boolean;
 }>({
   loading: false,
   validated: false,
+  uploadIcon: true,
 });
 
 // Computed Properties
@@ -60,7 +63,6 @@ const emit = defineEmits<{
 // Functions
 // =============================================================================
 function resetForm() {
-  modalClosed();
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   iconElement.value!.src = props.version.icon_url ?? "";
   if (iconInputElement.value != undefined) {
@@ -70,6 +72,7 @@ function resetForm() {
 
 function modalClosed() {
   formState.validated = false;
+  resetForm();
 }
 
 function iconChanged() {
@@ -95,10 +98,10 @@ function updateIcon() {
       },
     )
       .then((icon_url) => {
+        formState.uploadIcon = true;
         emit("icon-updated", props.version, icon_url);
         successToast?.show();
         updateIconModal?.hide();
-        resetForm();
       })
       .catch((error) => {
         console.error(error);
@@ -109,6 +112,26 @@ function updateIcon() {
   }
 }
 
+function deleteIcon() {
+  formState.loading = true;
+  WorkflowVersionService.workflowVersionDeleteWorkflowVersionIcon(
+    props.version.workflow_id,
+    props.version.git_commit_hash,
+  )
+    .then(() => {
+      formState.uploadIcon = false;
+      emit("icon-deleted", props.version);
+      successToast?.show();
+      updateIconModal?.hide();
+    })
+    .catch((error) => {
+      console.error(error);
+    })
+    .finally(() => {
+      formState.loading = false;
+    });
+}
+
 // Lifecycle Events
 // =============================================================================
 onMounted(() => {
@@ -128,7 +151,10 @@ onMounted(() => {
       :id="'successToast-' + randomIDSuffix"
     >
       <div class="d-flex">
-        <div class="toast-body">Successfully updated Workflow</div>
+        <div v-if="formState.uploadIcon" class="toast-body">
+          Successfully uploaded icon
+        </div>
+        <div v-else class="toast-body">Successfully deleted icon</div>
         <button
           type="button"
           class="btn-close btn-close-white me-2 m-auto"
@@ -150,6 +176,13 @@ onMounted(() => {
         >{{ props.workflowName }}@{{ props.version.version }}</span
       >
     </template>
+    <template v-slot:extra-button v-if="props.version.icon_url">
+      <font-awesome-icon
+        icon="fa-solid fa-trash"
+        class="cursor-pointer delete-icon"
+        @click="deleteIcon()"
+      />
+    </template>
     <template v-slot:body>
       <form
         ref="iconUpdateForm"
@@ -208,4 +241,12 @@ img {
   max-height: 64px;
   max-width: 64px;
 }
+
+.delete-icon {
+  color: var(--bs-secondary) !important;
+}
+
+.delete-icon:hover {
+  color: var(--bs-danger) !important;
+}
 </style>