Feature: Add multi-delete functionality to the Runs tab in FlowRunFilteredList

src/components/DeleteFlowRunsButton.vue

@@ -0,0 +1,70 @@
+<template>
+  <Transition name="delete-flow-runs-button-slide">
+    <p-button v-if="selected.length > 0" danger icon="TrashIcon" @click="open" />
+  </Transition>
+  <ConfirmDeleteModal
+    v-model:showModal="showModal"
+    name="selected flow runs"
+    label="Flow Runs"
+    @delete="deleteFlowRuns(selected)"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { showToast } from '@prefecthq/prefect-design'
+  import { computed } from 'vue'
+  import ConfirmDeleteModal from '@/components/ConfirmDeleteModal.vue'
+  import { useShowModal } from '@/compositions'
+  import { localization } from '@/localization'
+  import { flowRunsApiKey  } from '@/services'
+  import {  inject } from '@/utilities'
+
+  defineProps<{
+    selected: string[],
+  }>()
+
+  const emit = defineEmits<{
+    (event: 'delete'): void,
+  }>()
+
+  const { showModal, open, close } = useShowModal()
+
+  const flowRunsApi = inject(flowRunsApiKey)
+
+  const deleteFlowRuns = async (flowRuns: string[]): Promise<void> => {
+    const toastMessage = computed(() => {
+      if (flowRuns.length === 1) {
+        return 'Flow run deleted'
+      }
+      return `${flowRuns.length} flow runs deleted`
+    })
+
+    close()
+
+    try {
+      const deleteFlowRuns = flowRuns.map(flowRunsApi.deleteFlowRun)
+      await Promise.all(deleteFlowRuns)
+
+      showToast(toastMessage, 'success')
+      emit('delete')
+    } catch (error) {
+      showToast(localization.error.delete('Flow Run'), 'error')
+    }
+  }
+</script>
+
+<style>
+.delete-flow-runs-button-slide-enter-active {
+  transition: all 0.4s ease;
+}
+
+.delete-flow-runs-button-slide-leave-active {
+  transition: all 0.4s ease;
+}
+
+.delete-flow-runs-button-slide-enter-from,
+.delete-flow-runs-button-slide-leave-to {
+  transform: translateX(25px);
+  opacity: 0;
+}
+</style>

src/components/FlowRunFilteredList.vue

@@ -1,13 +1,12 @@
 <template>
-  <div class="flow-runs-controls_list">
-    <div class="flow-runs-controls_list__controls">
+  <div class="flow-run-filtered-list">
+    <div class="flow-run-filtered-list__controls">
       <ResultsCount :count="flowRunCount" class="mr-auto" label="Flow run" />
-      <StateSelect :selected="state" empty-message="All run states" class="flow-runs-controls_list__state-select" @update:selected="updateState" />
-      <FlowRunsSort v-model="sort" class="flow-runs-controls_list__flow-runs-sort" />
+      <StateSelect :selected="state" empty-message="All run states" class="flow-run-filtered-list__state-select" @update:selected="updateState" />
+      <FlowRunsSort v-model="sort" class="flow-run-filtered-list__flow-runs-sort" />
+      <DeleteFlowRunsButton v-if="can.delete.flow_run" :selected="selectedFlowRuns" @delete="deleteFlowRuns" />
     </div>
-
-    <FlowRunList :selected="[]" :flow-runs="flowRuns" disabled @bottom="flowRunsSubscription.loadMore" />
-
+    <FlowRunList v-model:selected="selectedFlowRuns" :flow-runs="flowRuns" :disabled="disabled || !can.delete.flow_run" @bottom="flowRunsSubscription.loadMore" />
     <PEmptyResults v-if="empty">
       <template #message>
         No runs from the last 7 days
@@ -25,6 +24,8 @@
   import { useSubscription } from '@prefecthq/vue-compositions'
   import { computed, onMounted, ref } from 'vue'
   import { ResultsCount, StateSelect, FlowRunsSort, FlowRunList } from '@/components'
+  import DeleteFlowRunsButton from '@/components/DeleteFlowRunsButton.vue'
+  import { useCan } from '@/compositions/useCan'
   import { usePaginatedSubscription } from '@/compositions/usePaginatedSubscription'
   import { StateType } from '@/models'
   import { flowRunsApiKey, mapper } from '@/services'
@@ -36,12 +37,15 @@
   const props = defineProps<{
     flowRunFilter: UnionFilters,
     states?: StateType[],
+    disabled?: boolean,
   }>()
 
   const emit = defineEmits<{
     (event: 'update:states', value: StateType[]): void,
   }>()
 
+  const can = useCan()
+  const selectedFlowRuns = ref<string[]>([])
   const state = ref<StateType[]>(props.states ?? [])
 
   const updateState = (newValue: string | string[] | null): void => {
@@ -85,6 +89,12 @@
     state.value = []
   }
 
+  const deleteFlowRuns = (): void => {
+    selectedFlowRuns.value = []
+    flowRunsSubscription.refresh()
+    flowRunCountSubscription.refresh()
+  }
+
   onMounted(() => {
     if (props.states) {
       state.value = props.states
@@ -93,25 +103,25 @@
 </script>
 
 <style>
-.flow-runs-controls_list { @apply
+.flow-run-filtered-list { @apply
   grid
   gap-2
 }
 
-.flow-runs-controls_list__controls { @apply
+.flow-run-filtered-list__controls { @apply
   flex
   gap-2
   items-center
   flex-col
   sm:flex-row
 }
 
-.flow-runs-controls_list__state-select { @apply
+.flow-run-filtered-list__state-select { @apply
   w-full
   sm:w-52
 }
 
-.flow-runs-controls_list__flow-runs-sort { @apply
+.flow-run-filtered-list__flow-runs-sort { @apply
   w-full
   sm:w-fit
 }

src/components/index.ts

@@ -22,6 +22,7 @@ export { default as ColorModeSelectOption } from './ColorModeSelectOption.vue'
 export { default as ConfirmDeleteModal } from './ConfirmDeleteModal.vue'
 export { default as ConfirmDeleteModalWithSlot } from './ConfirmDeleteModalWithSlot.vue'
 export { default as CopyOverflowMenuItem } from './CopyOverflowMenuItem.vue'
+export { default as DeleteFlowRunsButton } from './DeleteFlowRunsButton.vue'
 export { default as DeploymentCombobox } from './DeploymentCombobox.vue'
 export { default as DeploymentDeprecatedMessage } from './DeploymentDeprecatedMessage.vue'
 export { default as DeploymentDescription } from './DeploymentDescription.vue'