Update permission checks when working with work queues

src/components/WorkPoolQueueMenu.vue

@@ -2,11 +2,15 @@
   <p-icon-button-menu v-bind="$attrs" class="work-pool-queue-menu">
     <CopyOverflowMenuItem label="Copy ID" :item="workPoolQueue.id" />
 
-    <router-link :to="routes.workPoolQueueEdit(workPoolName, workPoolQueue.name)">
-      <p-overflow-menu-item v-if="can.update.work_queue" label="Edit" />
-    </router-link>
+    <template v-if="workPoolQueue.can.update">
+      <router-link :to="routes.workPoolQueueEdit(workPoolName, workPoolQueue.name)">
+        <p-overflow-menu-item label="Edit" />
+      </router-link>
+    </template>
 
-    <p-overflow-menu-item v-if="showDelete" label="Delete" @click="open" />
+    <template v-if="showDelete">
+      <p-overflow-menu-item label="Delete" @click="open" />
+    </template>
 
     <slot v-bind="{ workPoolQueue }">
       <router-link v-if="can.create.automation" :to="routes.automateWorkPoolQueue(workPoolQueue.id)">
@@ -32,10 +36,9 @@
 </script>
 
 <script lang="ts" setup>
-  import { useSubscription } from '@prefecthq/vue-compositions'
   import { computed } from 'vue'
   import { CopyOverflowMenuItem, ConfirmDeleteModal } from '@/components'
-  import { useCan, useShowModal, useWorkspaceApi, useWorkspaceRoutes } from '@/compositions'
+  import { useCan, useShowModal, useWorkPool, useWorkspaceApi, useWorkspaceRoutes } from '@/compositions'
   import { WorkPoolQueue } from '@/models'
   import { deleteItem } from '@/utilities'
 
@@ -52,11 +55,16 @@
   const api = useWorkspaceApi()
   const routes = useWorkspaceRoutes()
   const { showModal, open, close } = useShowModal()
-  const workPoolSubscription = useSubscription(api.workPools.getWorkPoolByName, [props.workPoolName])
-  const workPool = computed(() => workPoolSubscription.response)
+  const { workPool } = useWorkPool(() => props.workPoolName)
 
   const showDelete = computed(() => {
-    return !workPool.value || workPool.value.defaultQueueId !== props.workPoolQueue.id && can.delete.work_queue
+    if (!workPool.value) {
+      return false
+    }
+
+    const isDefaultWorkQueue = workPool.value.defaultQueueId === props.workPoolQueue.id
+
+    return !isDefaultWorkQueue && props.workPoolQueue.can.delete
   })
 
   async function deleteWorkPoolQueue(name: string): Promise<void> {

src/components/WorkPoolQueueToggle.vue

@@ -1,7 +1,9 @@
 <template>
-  <p-tooltip text="Pause or resume this work queue">
-    <p-toggle v-if="can.update.work_queue" v-model="internalValue" />
-  </p-tooltip>
+  <template v-if="workPoolQueue.can.update">
+    <p-tooltip text="Pause or resume this work queue">
+      <p-toggle v-model="internalValue" />
+    </p-tooltip>
+  </template>
 </template>
 
 <script lang="ts" setup>

src/components/WorkPoolQueuesTable.vue

@@ -3,9 +3,14 @@
     <p-list-header sticky>
       <ResultsCount v-if="selected.length == 0" label="Work Queue" :count="filteredWorkPoolQueues.length" />
       <SelectedCount v-else :count="selected.length" />
-      <p-button v-if="can.create.work_queue && !selected.length" size="sm" icon="PlusIcon" :to="routes.workPoolQueueCreate(workPoolName)" />
 
-      <WorkPoolQueuesDeleteButton v-if="can.delete.work_queue" :work-pool-name="workPoolName" :work-pool-queues="selected" @delete="handleDelete" />
+      <template v-if="workPool?.can.update && !selected.length">
+        <p-button size="sm" icon="PlusIcon" :to="routes.workPoolQueueCreate(workPoolName)" />
+      </template>
+
+      <template v-if="workPool?.can.update">
+        <WorkPoolQueuesDeleteButton :work-pool-name="workPoolName" :work-pool-queues="selected" @delete="handleDelete" />
+      </template>
 
       <template #controls>
         <SearchInput v-model="search" label="Search" placeholder="Search" />
@@ -47,7 +52,7 @@
   import { useSubscription } from '@prefecthq/vue-compositions'
   import { ref, computed } from 'vue'
   import { SearchInput, ResultsCount, SelectedCount, WorkPoolQueuesDeleteButton, WorkPoolQueuePriorityLabel, WorkersLateIndicator, WorkPoolQueueToggle, WorkPoolQueueStatusBadge } from '@/components'
-  import { useCan, useWorkspaceRoutes, useWorkspaceApi, useComponent } from '@/compositions'
+  import { useCan, useWorkspaceRoutes, useWorkspaceApi, useComponent, useWorkPool } from '@/compositions'
   import { WorkPoolQueue, WorkPoolQueueTableData } from '@/models'
   import { hasString, isRecord } from '@/utilities'
 
@@ -62,14 +67,10 @@
 
   const search = ref('')
 
-  const workPoolSubscription = useSubscription(api.workPools.getWorkPoolByName, [props.workPoolName])
-  const workPool = computed(() => {
-    return workPoolSubscription.response
-  })
+  const { workPool, subscription: workPoolSubscription } = useWorkPool(() => props.workPoolName)
   const workPoolQueuesSubscription = useSubscription(api.workPoolQueues.getWorkPoolQueues, [props.workPoolName])
   const workPoolQueues = computed(() => workPoolQueuesSubscription.response ?? [])
 
-
   const workPoolQueuesData = computed(() => workPoolQueues.value.map(queue => new WorkPoolQueueTableData({
     ...queue,
     disabled: !workPool.value || workPool.value.defaultQueueId == queue.id,

src/components/WorkPoolToggle.vue

@@ -1,13 +1,15 @@
 <template>
-  <p-tooltip text="Pause or resume this work pool">
-    <p-toggle v-if="workPool.can.update" v-model="internalValue" />
-  </p-tooltip>
+  <template v-if="workPool.can.update">
+    <p-tooltip text="Pause or resume this work pool">
+      <p-toggle v-model="internalValue" />
+    </p-tooltip>
+  </template>
 </template>
 
 <script lang="ts" setup>
   import { PToggle, showToast } from '@prefecthq/prefect-design'
   import { computed } from 'vue'
-  import { useCan, useWorkspaceApi } from '@/compositions'
+  import { useWorkspaceApi } from '@/compositions'
   import { localization } from '@/localization'
   import { WorkPool } from '@/models'
   import { getApiErrorMessage } from '@/utilities/errors'
@@ -20,7 +22,6 @@
     (event: 'update'): void,
   }>()
 
-  const can = useCan()
   const api = useWorkspaceApi()
 
   const internalValue = computed({