From e8ce2d847dc484b45ddd82cb0ade51283e6e4ade Mon Sep 17 00:00:00 2001
From: henrychoy <hchoy@mitre.org>
Date: Wed, 24 Jul 2024 15:14:30 -0400
Subject: [PATCH 1/3] feat: implement drafts for entrypoints

---
 .../src/components/TableComponent.vue         |  1 -
 src/frontend/src/dialogs/AssignTagsDialog.vue |  2 +-
 src/frontend/src/router/index.ts              |  2 +-
 src/frontend/src/services/dataApi.ts          | 42 ++++++++++++---
 src/frontend/src/views/CreateEntryPoint.vue   | 50 +++++++++++++-----
 src/frontend/src/views/EntryPointsView.vue    | 52 +++++++++++++++++--
 6 files changed, 122 insertions(+), 27 deletions(-)

diff --git a/src/frontend/src/components/TableComponent.vue b/src/frontend/src/components/TableComponent.vue
index bb78d28d3..4124bfa78 100644
--- a/src/frontend/src/components/TableComponent.vue
+++ b/src/frontend/src/components/TableComponent.vue
@@ -121,7 +121,6 @@
   const filter = ref('')
   const selected = defineModel('selected')
   const radioSelected = ref('')
-  //const showDrafts = ref(false)
   const showDrafts = defineModel('showDrafts')
 
   function handleClick(tableProps) {
diff --git a/src/frontend/src/dialogs/AssignTagsDialog.vue b/src/frontend/src/dialogs/AssignTagsDialog.vue
index 389a06831..6b4dccb8e 100644
--- a/src/frontend/src/dialogs/AssignTagsDialog.vue
+++ b/src/frontend/src/dialogs/AssignTagsDialog.vue
@@ -61,7 +61,7 @@
     try {
       const res = await api.getData('tags', {index: 0, rowsPerPage: 50, search: ''})
       tags.value = res.data.data
-      if(props.editObj.tags.length > 0) {
+      if(props.editObj.tags?.length > 0) {
         props.editObj.tags.forEach((tag) => {
           selectedTagIDs.value.push(tag.id)
         })
diff --git a/src/frontend/src/router/index.ts b/src/frontend/src/router/index.ts
index 38e3f4aa9..e040f3019 100644
--- a/src/frontend/src/router/index.ts
+++ b/src/frontend/src/router/index.ts
@@ -13,7 +13,7 @@ const router = createRouter({
       component: () => import('../views/EntryPointsView.vue')
     },
     {
-      path: '/entrypoints/:id',
+      path: '/entrypoints/:id/:draftType?/:resourceDraftParentId?',
       component: () => import('../views/CreateEntryPoint.vue')
     },
     {
diff --git a/src/frontend/src/services/dataApi.ts b/src/frontend/src/services/dataApi.ts
index deada9374..fd491527e 100644
--- a/src/frontend/src/services/dataApi.ts
+++ b/src/frontend/src/services/dataApi.ts
@@ -172,17 +172,33 @@ export async function getItem<T extends ItemType>(type: T, id: number, isDraft:
   return res
 }
 
-export async function getDraft<T extends ItemType>(type: T, id: number) {
-  const res = await axios.get(`/api/${type}/${id}/draft`)
+export async function getNewDraft<T extends ItemType>(type: T, draftId: number) {
+  const res = await axios.get(`/api/${type}/drafts/${draftId}`)
+  if(res.data) {
+    console.log('res = ', res)
+    Object.assign(res.data, res.data.payload)
+  }
   return res
 }
 
-export async function updateItem<T extends ItemType>(type: T, id: number, params: UpdateParams[T]) {
-  return await axios.put(`/api/${type}/${id}`, params)
+export async function getResourceDraft<T extends ItemType>(type: T, parentResourceId: number) {
+  console.log('parentResourceId = ', parentResourceId)
+  const res = await axios.get(`/api/${type}/${parentResourceId}/draft`)
+  if(res.data) {
+    console.log('res = ', res)
+    Object.assign(res.data, res.data.payload)
+  }
+  return res
 }
 
-export async function addItem<T extends keyof CreateParams>(type: T, params: CreateParams[T]) {
-  return await axios.post(`/api/${type}/`, params)
+// update item or NEW draft
+export async function updateItem<T extends ItemType>(type: T, id: number, params: UpdateParams[T], isDraft?: boolean) {
+  return await axios.put(`/api/${type}/${isDraft ? 'drafts/' : ''}${id}`, params)
+}
+
+// add item or NEW draft
+export async function addItem<T extends keyof CreateParams>(type: T, params: CreateParams[T], isDraft?: boolean) {
+  return await axios.post(`/api/${type}/${isDraft ? 'drafts/' : ''}`, params)
 }
 
 interface JobParams {
@@ -203,12 +219,26 @@ export async function deleteJob(id: number, jobId: number) {
 
 export async function addDraft<T extends keyof CreateParams>(type: T, params: CreateParams[T], id: number) {
   if(id) {
+    // add RESOURCE draft
     return await axios.post(`/api/${type}/${id}/draft`, params)
   } else {
+    // add NEW draft
     return await axios.post(`/api/${type}/drafts/`, params)
   }
 }
 
+export async function addNewDraft<T extends keyof CreateParams>(type: T, params: CreateParams[T]) {
+  return await axios.post(`/api/${type}/drafts/`, params)
+}
+
+export async function addResourceDraft<T extends keyof CreateParams>(type: T, params: CreateParams[T], id: number) {
+  return await axios.post(`/api/${type}/${id}/draft`, params)
+}
+
+export async function updateResourceDraft<T extends keyof CreateParams>(type: T, params: CreateParams[T], id: number) {
+  return await axios.put(`/api/${type}/${id}/draft`, params)
+}
+
 export async function updateDraft<T extends ItemType>(type: T, draftId: string, params: UpdateParams[T]) {
   return await axios.put(`/api/${type}/drafts/${draftId}`, params)
 }
diff --git a/src/frontend/src/views/CreateEntryPoint.vue b/src/frontend/src/views/CreateEntryPoint.vue
index 83170d873..72edaa7e8 100644
--- a/src/frontend/src/views/CreateEntryPoint.vue
+++ b/src/frontend/src/views/CreateEntryPoint.vue
@@ -172,8 +172,14 @@
       </div>
     </fieldset>
   </div>
-
-  <div :class="`${isMobile ? '' : 'q-mx-xl'} float-right q-mb-lg`">
+  <div :class="`${isMobile ? '' : 'q-mx-xl'} q-mb-lg row`">
+      <q-btn
+        v-if="route.params.id === 'new' && !route.params.draftType"
+        color="secondary" 
+        label="Save Draft"
+        @click="submit(true)"
+      />
+      <q-space />
       <q-btn  
         to="/entrypoints"
         color="negative" 
@@ -269,7 +275,14 @@
       return
     }
     try {
-      const res = await api.getItem('entrypoints', route.params.id)
+      let res
+      if (route.params.draftType === 'newDraft') {
+        res = await api.getNewDraft('entrypoints', route.params.id)
+      } else if(route.params.draftType === 'resourceDraft') {
+        res = await api.getResourceDraft('entrypoints', route.params.resourceDraftParentId)
+      } else {
+        res = await api.getItem('entrypoints', route.params.id)
+      }
       entryPoint.value = res.data
       title.value = `Edit ${res.data.name}`
       console.log('entryPoint = ', entryPoint.value)
@@ -294,36 +307,47 @@
 
   const taskGraphError = ref('')
 
-  function submit() {
+  function submit(isNewDraft = false) {
     basicInfoForm.value.validate().then(success => {
       taskGraphError.value = entryPoint.value.taskGraph.length > 0 ? '' : 'This field is required'
       if (success && taskGraphError.value === '') {
-        addOrModifyEntrypoint()
-      }
-      else {
-        // error
+        addOrModifyEntrypoint(isNewDraft)
       }
     })
   }
 
-  async function addOrModifyEntrypoint() {
+  async function addOrModifyEntrypoint(isNewDraft) {
     entryPoint.value.queues.forEach((queue, index, array) => {
       if(typeof queue === 'object') {
         array[index] = queue.id
       }
     })
     try {
-      if (route.params.id === 'new') {
-        await api.addItem('entrypoints', entryPoint.value)
+      // CREATE
+      if (route.params.id === 'new' || (route.params.id === 'new' && route.params.draftType === 'resourceDraft')) {
+        if(isNewDraft) {
+          await api.addNewDraft('entrypoints', entryPoint.value)
+        } else if(route.params.draftType === 'resourceDraft') {
+          const { group, ...entryPointWithoutGroup } = entryPoint.value
+          await api.addResourceDraft('entrypoints', entryPointWithoutGroup, route.params.resourceDraftParentId)
+        } else {
+          await api.addItem('entrypoints', entryPoint.value)
+        }
         notify.success(`Sucessfully created '${entryPoint.value.name}'`)
       } else {
-        await api.updateItem('entrypoints', route.params.id, {
+        // EDIT
+        const params = {
           name: entryPoint.value.name,
           description: entryPoint.value.description,
           taskGraph: entryPoint.value.taskGraph,
           parameters: entryPoint.value.parameters,
           queues: entryPoint.value.queues,
-        })
+        }
+        if (route.params.draftType === 'resourceDraft') {
+          await api.updateResourceDraft('entrypoints', params, route.params.resourceDraftParentId)
+        } else {
+          await api.updateItem('entrypoints', route.params.id, params, route.params.draftType === 'newDraft')
+        }
         notify.success(`Sucessfully updated '${entryPoint.value.name}'`)
       }
     } catch(err) {
diff --git a/src/frontend/src/views/EntryPointsView.vue b/src/frontend/src/views/EntryPointsView.vue
index cf4fb1231..88e19f23f 100644
--- a/src/frontend/src/views/EntryPointsView.vue
+++ b/src/frontend/src/views/EntryPointsView.vue
@@ -4,15 +4,17 @@
   />
   <TableComponent 
     :rows="entrypoints"
-    :columns="columns"
+    :columns="showDrafts ? columns.filter((col) => col.name !== 'tags' && col.name !== 'hasDraft') : columns"
     :showExpand="true"
     title="Entrypoints"
     v-model:selected="selected"
     :pagination="{sortBy: 'draft', descending: true}"
-    @edit="router.push(`/entrypoints/${selected[0].id}`)"
+    @edit="router.push(`/entrypoints/${selected[0].id}${draftType ? '/newDraft' : ''}`)"
     @delete="showDeleteDialog = true"
     @request="getEntrypoints"
     ref="tableRef"
+    :showToggleDraft="true"
+    v-model:showDrafts="showDrafts"
   >
     <template #body-cell-group="props">
       <div>{{ props.row.group.name }}</div>
@@ -78,6 +80,15 @@
         @click.stop="editEntrypoint = props.row; showAssignPluginsDialog = true"
       />
     </template>
+    <template #body-cell-hasDraft="props">
+      <q-btn
+        round
+        size="sm"
+        :icon="props.row.hasDraft ? 'edit' : 'add'"
+        :color="props.row.hasDraft ? 'primary' : 'grey-5'"
+        @click="loadResouceDraft(props.row)"
+      />
+    </template>
   </TableComponent>
 
   <q-btn 
@@ -125,7 +136,7 @@
 
 <script setup>
   import TableComponent from '@/components/TableComponent.vue'
-  import { ref } from 'vue'
+  import { ref, computed } from 'vue'
   import { useRouter } from 'vue-router'
   import CodeEditor from '@/components/CodeEditor.vue'
   import InfoPopupDialog from '@/dialogs/InfoPopupDialog.vue'
@@ -141,6 +152,7 @@
   const columns = [
     { name: 'name', label: 'Name', align: 'left', field: 'name', sortable: true, },
     { name: 'group', label: 'Group', align: 'left', field: 'group', sortable: true, },
+    { name: 'hasDraft', label: 'hasDraft', align: 'left', field: 'hasDraft', sortable: true },
     { name: 'taskGraph', label: 'Task Graph', align: 'left', field: 'taskGraph',sortable: true, },
     { name: 'parameterNames', label: 'Parameter Name(s)', align: 'left', sortable: true },
     { name: 'parameterTypes', label: 'Parameter Type(s)', align: 'left', field: 'parameterTypes', sortable: true },
@@ -151,6 +163,13 @@
 
   const selected = ref([])
 
+  const draftType = computed(() => {
+    if(selected.value.length === 0) return null
+    if(Object.hasOwn(selected.value[0], 'payload') && !selected.value[0].resource) {
+      return 'newDraft'
+    }
+  })
+
   const showTaskGraphDialog = ref(false)
   const displayYaml = ref('')
 
@@ -175,17 +194,40 @@
 
   async function deleteEntryPoint() {
     try {
-      await api.deleteItem('entrypoints', selected.value[0].id)
+      if(Object.hasOwn(selected.value[0], 'payload') && !selected.value[0].resource) {
+        await api.deleteDraft('entrypoints', selected.value[0].id)
+      } else {
+        await api.deleteItem('entrypoints', selected.value[0].id)
+      }
       notify.success(`Sucessfully deleted '${selected.value[0].name}'`)
       showDeleteDialog.value = false
       selected.value = []
       tableRef.value.refreshTable()
     } catch(err) {
-      notify.error(err.response.data.message);
+      notify.error(err.response.data.message)
     }
   }
 
   const editObjTags = ref({})
   const showTagsDialog = ref(false)
 
+  const showDrafts = ref(false)
+
+  async function loadResouceDraft(entryPoint) {
+    let res
+    console.log('entrypoint = ', entryPoint)
+    if(entryPoint.hasDraft) {
+      try {
+        res = await api.getResourceDraft('entrypoints', entryPoint.id)
+        console.log('ressssss = ', res)
+        router.push(`/entrypoints/${res.data.id}/resourceDraft/${entryPoint.id}`)
+      } catch(err) {
+        notify.error(err.response.data.message)
+      }
+    } else {
+      router.push(`/entrypoints/new/resourceDraft/${entryPoint.id}`)
+    }
+  }
+  
+
 </script>
\ No newline at end of file

From b9515de1952c51c6f3e07437ea248dbf05303b0b Mon Sep 17 00:00:00 2001
From: henrychoy <hchoy@mitre.org>
Date: Sat, 27 Jul 2024 20:56:02 -0400
Subject: [PATCH 2/3] feat: drafts now working for endpoints

---
 src/frontend/src/components/CodeEditor.vue    |  1 +
 .../src/components/TableComponent.vue         | 51 +++++++++++++++++--
 src/frontend/src/dialogs/DeleteDialog.vue     | 16 ++++--
 src/frontend/src/services/dataApi.ts          |  4 ++
 src/frontend/src/views/CreateEntryPoint.vue   | 24 +++++++--
 src/frontend/src/views/EntryPointsView.vue    | 42 +++++++++++----
 src/frontend/src/views/QueuesView.vue         | 30 +++++++++--
 7 files changed, 140 insertions(+), 28 deletions(-)

diff --git a/src/frontend/src/components/CodeEditor.vue b/src/frontend/src/components/CodeEditor.vue
index b49bad032..8600bd26f 100644
--- a/src/frontend/src/components/CodeEditor.vue
+++ b/src/frontend/src/components/CodeEditor.vue
@@ -7,6 +7,7 @@
       :indent-with-tab="true"
       :tab-size="2"
       :extensions="extensions"
+      :disabled="readOnly"
       @ready="handleReady"
       @change="console.log('change', $event)"
       @focus="console.log('focus', $event)"
diff --git a/src/frontend/src/components/TableComponent.vue b/src/frontend/src/components/TableComponent.vue
index 3b52d9834..80db21d60 100644
--- a/src/frontend/src/components/TableComponent.vue
+++ b/src/frontend/src/components/TableComponent.vue
@@ -96,8 +96,51 @@
     </template>
 
     <template #top-right>
-      <q-btn v-if="!hideEditBtn" color="secondary" icon="edit" label="Edit" class="q-mr-lg" @click="$emit('edit')"  :disabled="!selected?.length" />
-      <q-btn v-if="!hideDeleteBtn" color="negative" icon="sym_o_delete" label="Delete" class="q-mr-lg"  @click="$emit('delete')" :disabled="!selected?.length" />
+      <q-btn 
+        v-if="!hideEditBtn" color="secondary"
+        icon="edit" 
+        label="Edit"
+        class="q-mr-lg" 
+        @click="() => { if(!selected[0]?.hasDraft) $emit('edit') }"
+        :disabled="!selected?.length" 
+      >
+        <q-menu v-if="selected[0]?.hasDraft">
+          <q-list style="min-width: 100px">
+            <q-item clickable v-close-popup @click="$emit('edit')">
+              <q-item-section>
+                Edit {{ title.substring(0, title.length - 1) }}
+              </q-item-section>
+            </q-item>
+            <q-separator />
+            <q-item clickable v-close-popup @click="$emit('editResourceDraft')">
+              <q-item-section>Edit Draft</q-item-section>
+            </q-item>
+          </q-list>
+        </q-menu>
+      </q-btn>
+      <q-btn
+        v-if="!hideDeleteBtn"
+        color="negative"
+        icon="sym_o_delete"
+        label="Delete"
+        class="q-mr-lg"
+        @click="() => { if(!selected[0]?.hasDraft) $emit('delete') }" 
+        :disabled="!selected?.length"
+      >
+        <q-menu v-if="selected[0]?.hasDraft">
+          <q-list style="min-width: 100px">
+            <q-item clickable v-close-popup @click="$emit('delete')">
+              <q-item-section>
+                Delete {{ title.substring(0, title.length - 1) }}
+              </q-item-section>
+            </q-item>
+            <q-separator />
+            <q-item clickable v-close-popup @click="$emit('deleteResourceDraft')">
+              <q-item-section>Delete Draft</q-item-section>
+            </q-item>
+          </q-list>
+        </q-menu>
+      </q-btn>
       <q-input v-if="!hideSearch" v-model="filter" debounce="300" dense placeholder="Search" outlined>
           <template #append>
             <q-icon name="search" />
@@ -114,7 +157,7 @@
         push
         :options="[
           {label: title, value: false},
-          {label: 'Drafts', value: true},
+          {label: 'New Drafts', value: true},
         ]"
         @click="refreshTable"
       />
@@ -129,7 +172,7 @@
   const isMobile = inject('isMobile')
 
   const props = defineProps(['columns', 'rows', 'title', 'showExpand', 'hideEditBtn', 'hideDeleteBtn', 'showToggleDraft', 'hideSearch', 'disableSelect', 'rightCaption'])
-  const emit = defineEmits(['edit', 'delete', 'request', 'expand', 'editTags'])
+  const emit = defineEmits(['edit', 'delete', 'request', 'expand', 'editTags', 'deleteResourceDraft', 'editResourceDraft'])
 
   const finalColumns = computed(() => {
     let defaultColumns = [ ...props.columns ]
diff --git a/src/frontend/src/dialogs/DeleteDialog.vue b/src/frontend/src/dialogs/DeleteDialog.vue
index 1b78d9eef..94b5a8971 100644
--- a/src/frontend/src/dialogs/DeleteDialog.vue
+++ b/src/frontend/src/dialogs/DeleteDialog.vue
@@ -1,27 +1,35 @@
 <template>
   <DialogComponent 
     v-model="showDialog"
-    @emitSubmit="$emit('submit')"
+    @emitSubmit="$emit('submit', resourceDraftMode ? true : false)"
     :hideDraftBtn="true"
   >
     <template #title>
       <label id="modalTitle">
-        Delete {{ type }}
+        Delete {{ type }} {{ resourceDraftMode ? 'Draft' : '' }}
       </label>
     </template>
     <q-card-section class="q-pt-none">
-      Are you sure you want to delete this {{ type }}? <br>
+      Are you sure you want to delete 
+      <span v-if="resourceDraftMode"> the <span class="text-bold">draft</span> for </span> 
+      this {{ type }}? <br>
       Name: <span class="text-bold">{{ name }}</span>
     </q-card-section>
   </DialogComponent>
 </template>
 
 <script setup>
+  import { watch } from 'vue'
   import DialogComponent from './DialogComponent.vue'
 
   defineEmits(['submit'])
   defineProps(['type', 'name'])
 
-  const showDialog = defineModel()
+  const showDialog = defineModel('showDialog')
+  const resourceDraftMode = defineModel('resourceDraftMode')
+
+  watch(showDialog, (newVal) => {
+    if(!newVal) resourceDraftMode.value = false
+  })
 
 </script>
\ No newline at end of file
diff --git a/src/frontend/src/services/dataApi.ts b/src/frontend/src/services/dataApi.ts
index fd491527e..d2d4c6fe2 100644
--- a/src/frontend/src/services/dataApi.ts
+++ b/src/frontend/src/services/dataApi.ts
@@ -239,6 +239,10 @@ export async function updateResourceDraft<T extends keyof CreateParams>(type: T,
   return await axios.put(`/api/${type}/${id}/draft`, params)
 }
 
+export async function deleteResourceDraft<T extends keyof CreateParams>(type: T, id: number) {
+  return await axios.delete(`/api/${type}/${id}/draft`)
+}
+
 export async function updateDraft<T extends ItemType>(type: T, draftId: string, params: UpdateParams[T]) {
   return await axios.put(`/api/${type}/drafts/${draftId}`, params)
 }
diff --git a/src/frontend/src/views/CreateEntryPoint.vue b/src/frontend/src/views/CreateEntryPoint.vue
index 72edaa7e8..601ea2a2d 100644
--- a/src/frontend/src/views/CreateEntryPoint.vue
+++ b/src/frontend/src/views/CreateEntryPoint.vue
@@ -271,7 +271,11 @@
   getEntrypoint()
   async function getEntrypoint() {
     if(route.params.id === 'new') {
-      title.value = 'Create Entrypoint'
+      if(route.params.draftType === 'resourceDraft') {
+        const res = await api.getItem('entrypoints', route.params.resourceDraftParentId)
+        entryPoint.value = res.data
+      }
+      title.value = `Create ${route.params.draftType === 'resourceDraft' ? `Draft for ${entryPoint.value.name}` : 'Entrypoint'}`
       return
     }
     try {
@@ -322,14 +326,26 @@
         array[index] = queue.id
       }
     })
+    entryPoint.value?.plugins?.forEach((plugins, index, array) => {
+      if(typeof plugins === 'object') {
+        array[index] = plugins.id
+      }
+    })
     try {
       // CREATE
-      if (route.params.id === 'new' || (route.params.id === 'new' && route.params.draftType === 'resourceDraft')) {
+      const createParams = {
+        name: entryPoint.value.name,
+        description: entryPoint.value.description,
+        taskGraph: entryPoint.value.taskGraph,
+        parameters: entryPoint.value.parameters,
+        queues: entryPoint.value.queues,
+        plugins: entryPoint.value.plugins
+      }
+      if (route.params.id === 'new') {
         if(isNewDraft) {
           await api.addNewDraft('entrypoints', entryPoint.value)
         } else if(route.params.draftType === 'resourceDraft') {
-          const { group, ...entryPointWithoutGroup } = entryPoint.value
-          await api.addResourceDraft('entrypoints', entryPointWithoutGroup, route.params.resourceDraftParentId)
+          await api.addResourceDraft('entrypoints', createParams, route.params.resourceDraftParentId)
         } else {
           await api.addItem('entrypoints', entryPoint.value)
         }
diff --git a/src/frontend/src/views/EntryPointsView.vue b/src/frontend/src/views/EntryPointsView.vue
index e85f5ac7b..544ff7a64 100644
--- a/src/frontend/src/views/EntryPointsView.vue
+++ b/src/frontend/src/views/EntryPointsView.vue
@@ -10,12 +10,14 @@
     v-model:selected="selected"
     :pagination="{sortBy: 'draft', descending: true}"
     @edit="router.push(`/entrypoints/${selected[0].id}${draftType ? '/newDraft' : ''}`)"
+    @editResourceDraft="loadResouceDraft(selected[0])"
     @delete="showDeleteDialog = true"
     @request="getEntrypoints"
     ref="tableRef"
     :showToggleDraft="true"
     v-model:showDrafts="showDrafts"
     @editTags="(row) => { editObjTags = row; showTagsDialog = true }"
+    @deleteResourceDraft="resourceDraftMode = true; showDeleteDialog = true;"
   >
     <template #body-cell-group="props">
       <div>{{ props.row.group.name }}</div>
@@ -47,7 +49,7 @@
       </label>
     </template>
     <template #expandedSlot="{ row }">
-      <CodeEditor v-model="row.taskGraph" language="yaml" />
+      <CodeEditor v-model="row.taskGraph" language="yaml" :readOnly="true" />
     </template>
     <template #body-cell-plugins="props">
       <q-chip
@@ -69,10 +71,22 @@
       <q-btn
         round
         size="sm"
-        :icon="props.row.hasDraft ? 'edit' : 'add'"
-        :color="props.row.hasDraft ? 'primary' : 'grey-5'"
-        @click="loadResouceDraft(props.row)"
-      />
+        :icon="props.row.hasDraft ? 'sym_o_draft' : 'add'"
+        :color="props.row.hasDraft ? 'primary' : ''"
+        :text-color="props.row.hasDraft ? '' : 'black'"
+        :disable="props.row.hasDraft"
+        @click="() => { if(!props.row.hasDraft) loadResouceDraft(props.row) }"
+      >
+        <q-tooltip>
+          <p v-if="props.row.hasDraft" class="q-mb-none">
+            This resource has an associated draft.<br>Use table buttons to edit/delete.
+          </p>
+          <p v-else class="q-mb-none">
+            Click here to add a draft for this resource.
+          </p>
+          
+        </q-tooltip>
+      </q-btn>
     </template>
   </TableComponent>
 
@@ -98,13 +112,14 @@
         Task Graph YAML
       </label>
     </template>
-    <CodeEditor v-model="displayYaml" style="height: auto;" :readOnly="true" />
+    <CodeEditor v-model="displayYaml" language="yaml" style="height: auto;" :readOnly="true" />
   </InfoPopupDialog>
   <DeleteDialog 
-    v-model="showDeleteDialog"
+    v-model:showDialog="showDeleteDialog"
     @submit="deleteEntryPoint"
     type="Entry Point"
     :name="selected.length ? selected[0].name : ''"
+    v-model:resourceDraftMode="resourceDraftMode"
   />
   <AssignTagsDialog 
     v-model="showTagsDialog"
@@ -177,14 +192,18 @@
     } 
   }
 
-  async function deleteEntryPoint() {
+  async function deleteEntryPoint(resourceDraft) {
     try {
-      if(Object.hasOwn(selected.value[0], 'payload') && !selected.value[0].resource) {
+      if(resourceDraft) {
+        await api.deleteResourceDraft('entrypoints', selected.value[0].id)
+        notify.success(`Sucessfully deleted draft for '${selected.value[0].name}'`)
+      } else if(Object.hasOwn(selected.value[0], 'payload') && !selected.value[0].resource) {
         await api.deleteDraft('entrypoints', selected.value[0].id)
+        notify.success(`Sucessfully deleted '${selected.value[0].name}'`)
       } else {
         await api.deleteItem('entrypoints', selected.value[0].id)
+        notify.success(`Sucessfully deleted '${selected.value[0].name}'`)
       }
-      notify.success(`Sucessfully deleted '${selected.value[0].name}'`)
       showDeleteDialog.value = false
       selected.value = []
       tableRef.value.refreshTable()
@@ -204,7 +223,6 @@
     if(entryPoint.hasDraft) {
       try {
         res = await api.getResourceDraft('entrypoints', entryPoint.id)
-        console.log('ressssss = ', res)
         router.push(`/entrypoints/${res.data.id}/resourceDraft/${entryPoint.id}`)
       } catch(err) {
         notify.error(err.response.data.message)
@@ -213,6 +231,8 @@
       router.push(`/entrypoints/new/resourceDraft/${entryPoint.id}`)
     }
   }
+
+  const resourceDraftMode = ref(false)
   
 
 </script>
\ No newline at end of file
diff --git a/src/frontend/src/views/QueuesView.vue b/src/frontend/src/views/QueuesView.vue
index 8274d2eff..7741c5abb 100644
--- a/src/frontend/src/views/QueuesView.vue
+++ b/src/frontend/src/views/QueuesView.vue
@@ -5,7 +5,9 @@
     :columns="showDrafts ? columns.slice(0, -2) : columns"
     title="Queues"
     @delete="showDeleteDialog = true"
+    @deleteResourceDraft="resourceDraftMode = true; showDeleteDialog = true;"
     @edit="editing = true; showQueueDialog = true"
+    @editResourceDraft="queueToDraft = selected[0]; showDraftDialog = true"
     v-model:selected="selected"
     v-model:showDrafts="showDrafts"
     @request="getQueues"
@@ -18,9 +20,21 @@
         round
         size="sm"
         :icon="props.row.hasDraft ? 'edit' : 'add'"
-        :color="props.row.hasDraft ? 'primary' : 'grey-5'"
-        @click.stop="queueToDraft = props.row; showDraftDialog = true"
-      />
+        :color="props.row.hasDraft ? 'primary' : ''"
+        :text-color="props.row.hasDraft ? '' : 'black'"
+        :disable="props.row.hasDraft"
+        @click="() => { if(!props.row.hasDraft) {queueToDraft = props.row; showDraftDialog = true} }"
+      >
+        <q-tooltip>
+          <p v-if="props.row.hasDraft" class="q-mb-none">
+            This resource has an associated draft.<br>Use table buttons to edit/delete.
+          </p>
+          <p v-else class="q-mb-none">
+            Click here to add a draft for this resource.
+          </p>
+          
+        </q-tooltip>
+      </q-btn>
     </template>
   </TableComponent>
   <q-btn 
@@ -54,6 +68,7 @@
     @submit="deleteQueue"
     type="Queue"
     :name="selected.length ? selected[0].name : ''"
+    v-model:resourceDraftMode="resourceDraftMode"
   />
   <AssignTagsDialog 
     v-model="showTagsDialog"
@@ -190,9 +205,12 @@
     if(!newVal) editing.value = false
   })
 
-  async function deleteQueue() {
+  async function deleteQueue(resourceDraft) {
     try {
-      if(Object.hasOwn(selected.value[0], 'hasDraft')) {
+      if(resourceDraft) {
+        await api.deleteResourceDraft('queues', selected.value[0].id)
+        notify.success(`Sucessfully deleted draft for '${selected.value[0].name}'`)
+      } else if(Object.hasOwn(selected.value[0], 'hasDraft')) {
         await api.deleteItem('queues', selected.value[0].id)
       } else {
         await api.deleteDraft('queues', selected.value[0].id)
@@ -208,4 +226,6 @@
 
   const editObjTags = ref({})
 
+  const resourceDraftMode = ref(false)
+
 </script>

From 1f1395bc5a40f852c7f629abd684882f2ecb36d6 Mon Sep 17 00:00:00 2001
From: henrychoy <hchoy@mitre.org>
Date: Thu, 1 Aug 2024 14:04:35 -0400
Subject: [PATCH 3/3] fix: resolved related bug with deleting queues

---
 src/frontend/src/views/QueuesView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/views/QueuesView.vue b/src/frontend/src/views/QueuesView.vue
index 7741c5abb..c66d62578 100644
--- a/src/frontend/src/views/QueuesView.vue
+++ b/src/frontend/src/views/QueuesView.vue
@@ -64,7 +64,7 @@
     :queueToDraft="queueToDraft"
   />
   <DeleteDialog 
-    v-model="showDeleteDialog"
+    v-model:showDialog="showDeleteDialog"
     @submit="deleteQueue"
     type="Queue"
     :name="selected.length ? selected[0].name : ''"