Add saving state to all Page saves

src/dispatch/case/models.py

@@ -279,6 +279,7 @@ class CaseRead(CaseBase):
     tags: Optional[List[TagRead]] = []
     ticket: Optional[TicketRead] = None
     triage_at: Optional[datetime] = None
+    updated_at: Optional[datetime] = None
     workflow_instances: Optional[List[WorkflowInstanceRead]] = []
 
 

src/dispatch/static/dispatch/components.d.ts

@@ -21,21 +21,28 @@ declare module '@vue/runtime-core' {
     DateTimePickerMenu: typeof import('./src/components/DateTimePickerMenu.vue')['default']
     DateWindowInput: typeof import('./src/components/DateWindowInput.vue')['default']
     DefaultLayout: typeof import('./src/components/layouts/DefaultLayout.vue')['default']
+    DMenu: typeof import('./src/components/DMenu.vue')['default']
+    DTooltip: typeof import('./src/components/DTooltip.vue')['default']
     InfoWidget: typeof import('./src/components/InfoWidget.vue')['default']
     Loading: typeof import('./src/components/Loading.vue')['default']
+    LockButton: typeof import('./src/components/LockButton.vue')['default']
     MonacoEditor: typeof import('./src/components/MonacoEditor.vue')['default']
     NotificationSnackbarsWrapper: typeof import('./src/components/NotificationSnackbarsWrapper.vue')['default']
     PageHeader: typeof import('./src/components/PageHeader.vue')['default']
     ParticipantAutoComplete: typeof import('./src/components/ParticipantAutoComplete.vue')['default']
     ParticipantSelect: typeof import('./src/components/ParticipantSelect.vue')['default']
     ProjectAutoComplete: typeof import('./src/components/ProjectAutoComplete.vue')['default']
     Refresh: typeof import('./src/components/Refresh.vue')['default']
+    RichEditor: typeof import('./src/components/RichEditor.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SavingState: typeof import('./src/components/SavingState.vue')['default']
+    SearchPopover: typeof import('./src/components/SearchPopover.vue')['default']
     SettingsBreadcrumbs: typeof import('./src/components/SettingsBreadcrumbs.vue')['default']
     ShepherdStep: typeof import('./src/components/ShepherdStep.vue')['default']
     ShpherdStep: typeof import('./src/components/ShpherdStep.vue')['default']
     StatWidget: typeof import('./src/components/StatWidget.vue')['default']
+    SubjectLastUpdated: typeof import('./src/components/SubjectLastUpdated.vue')['default']
     VAlert: typeof import('vuetify/lib')['VAlert']
     VApp: typeof import('vuetify/lib')['VApp']
     VAppBar: typeof import('vuetify/lib')['VAppBar']

src/dispatch/static/dispatch/src/case/CaseAttributesDrawer.vue

@@ -8,6 +8,7 @@ import CaseSeveritySearchPopover from "@/case/severity/CaseSeveritySearchPopover
 import CaseTypeSearchPopover from "@/case/type/CaseTypeSearchPopover.vue"
 import ParticipantSearchPopover from "@/participant/ParticipantSearchPopover.vue"
 import ProjectSearchPopover from "@/project/ProjectSearchPopover.vue"
+import { useSavingState } from "@/composables/useSavingState"
 
 // Define the props
 const props = defineProps({
@@ -25,7 +26,7 @@ const props = defineProps({
 // Define the emits
 const emit = defineEmits(["update:modelValue", "update:open"])
 const drawerVisible = ref(props.open)
-// Create a local state for modelValue
+const { setSaving } = useSavingState()
 const modelValue = ref({ ...props.modelValue })
 
 watch(
@@ -52,7 +53,9 @@ const handleResolutionUpdate = (newResolution) => {
 
 const saveCaseDetails = async () => {
   try {
+    setSaving(true)
     await CaseApi.update(modelValue.value.id, modelValue.value)
+    setSaving(false)
   } catch (e) {
     console.error("Failed to save case details", e)
   }

src/dispatch/static/dispatch/src/case/CaseResolutionSearchPopover.vue

@@ -4,12 +4,13 @@ import type { Ref } from "vue"
 
 import CaseApi from "@/case/api"
 import SearchPopover from "@/components/SearchPopover.vue"
+import { useSavingState } from "@/composables/useSavingState"
 import { useStore } from "vuex"
 
 defineProps<{ caseResolution: string }>()
 
 const store = useStore()
-
+const { setSaving } = useSavingState()
 const caseResolutions: Ref<string[]> = ref([
   "False Positive",
   "User Acknowledged",
@@ -22,7 +23,9 @@ const selectCaseResolution = async (caseResolutionName: string) => {
   const caseDetails = store.state.case_management.selected
   caseDetails.resolution_reason = caseResolutionName
 
+  setSaving(true)
   await CaseApi.update(caseDetails.id, caseDetails)
+  setSaving(false)
 }
 </script>
 

src/dispatch/static/dispatch/src/case/Page.vue

@@ -4,6 +4,7 @@
       :case-name="caseDetails.name"
       :case-visibility="caseDetails.visibility"
       :case-status="caseDetails.status"
+      :case-updated-at="caseDetails.updated_at"
       :is-drawer-open="isDrawerOpen"
       @toggle-drawer="toggleDrawer"
     />
@@ -39,6 +40,7 @@ import PageHeader from "@/case//PageHeader.vue"
 import CaseTabs from "@/case/CaseTabs.vue"
 import RichEditor from "@/components/RichEditor.vue"
 import CaseStatusSelectGroup from "@/case/CaseStatusSelectGroup.vue"
+import { useSavingState } from "@/composables/useSavingState"
 
 const route = useRoute()
 const store = useStore()
@@ -72,6 +74,7 @@ const caseDefaults = {
   tags: [],
   ticket: null,
   triage_at: null,
+  updated_at: null,
   visibility: "",
   conversation: null,
   workflow_instances: null,
@@ -80,6 +83,7 @@ const caseDefaults = {
 const caseDetails = ref(caseDefaults)
 const loading = ref(false)
 const isDrawerOpen = ref(true)
+const { setSaving } = useSavingState()
 
 const toggleDrawer = () => {
   isDrawerOpen.value = !isDrawerOpen.value
@@ -115,7 +119,9 @@ const handleDescriptionUpdate = (newDescription) => {
 
 const saveCaseDetails = async () => {
   try {
+    setSaving(true)
     await CaseApi.update(caseDetails.value.id, caseDetails.value)
+    setSaving(false)
   } catch (e) {
     console.error("Failed to save case details", e)
   }

src/dispatch/static/dispatch/src/case/PageHeader.vue

@@ -5,6 +5,8 @@
         <v-icon size="x-small" icon="mdi-chevron-right" />
       </template>
     </v-breadcrumbs>
+    <SavingState :updatedAt="caseUpdatedAt" />
+
     <template #append>
       <DTooltip text="View case participants" :hotkeys="['⌘', '⇧', 'P']">
         <template #activator="{ tooltip }">
@@ -36,6 +38,7 @@ import LockButton from "@/components/LockButton.vue"
 import EscalateButton from "@/case/EscalateButton.vue"
 import DTooltip from "@/components/DTooltip.vue"
 import ParticipantAvatarGroup from "@/participant/ParticipantAvatarGroup.vue"
+import SavingState from "@/components/SavingState.vue"
 import CaseApi from "@/case/api"
 
 const route = useRoute()
@@ -53,6 +56,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  caseUpdatedAt: {
+    type: String,
+    required: true,
+  },
   isDrawerOpen: {
     type: Boolean,
     default: true,

src/dispatch/static/dispatch/src/case/priority/CasePrioritySearchPopover.vue

@@ -3,6 +3,7 @@ import { onMounted, ref } from "vue"
 import CasePriorityApi from "@/case/priority/api"
 import CaseApi from "@/case/api"
 import SearchPopover from "@/components/SearchPopover.vue"
+import { useSavingState } from "@/composables/useSavingState"
 import type { Ref } from "vue"
 import { useStore } from "vuex"
 
@@ -13,7 +14,7 @@ type CasePriority = {
 defineProps<{ casePriority: string }>()
 
 const store = useStore()
-
+const { setSaving } = useSavingState()
 const casePriorities: Ref<CasePriority[]> = ref([])
 
 onMounted(async () => {
@@ -39,7 +40,9 @@ const selectCasePriority = async (casePriorityName: string) => {
   const caseDetails = store.state.case_management.selected
   caseDetails.case_priority = caseType
 
+  setSaving(true)
   await CaseApi.update(caseDetails.id, caseDetails)
+  setSaving(false)
 }
 </script>
 

src/dispatch/static/dispatch/src/case/severity/CaseSeveritySearchPopover.vue

@@ -3,6 +3,7 @@ import { onMounted, ref } from "vue"
 import CaseSeverityApi from "@/case/severity/api"
 import CaseApi from "@/case/api"
 import SearchPopover from "@/components/SearchPopover.vue"
+import { useSavingState } from "@/composables/useSavingState"
 import type { Ref } from "vue"
 import { useStore } from "vuex"
 
@@ -13,7 +14,7 @@ type CaseSeverity = {
 defineProps<{ caseSeverity: string }>()
 
 const store = useStore()
-
+const { setSaving } = useSavingState()
 const caseSeveritys: Ref<CaseSeverity[]> = ref([])
 
 onMounted(async () => {
@@ -39,7 +40,9 @@ const selectCaseSeverity = async (caseSeverityName: string) => {
   const caseDetails = store.state.case_management.selected
   caseDetails.case_severity = caseSeverity
 
+  setSaving(true)
   await CaseApi.update(caseDetails.id, caseDetails)
+  setSaving(false)
 }
 </script>
 

src/dispatch/static/dispatch/src/case/store.js

@@ -29,13 +29,15 @@ const getDefaultSelectedState = () => {
     reported_at: null,
     resolution_reason: null,
     resolution: null,
+    saving: false,
     signals: [],
     status: null,
     storage: null,
     tags: [],
     ticket: null,
     title: null,
     triage_at: null,
+    updated_at: null,
     visibility: null,
     conversation: null,
     workflow_instances: null,
@@ -93,6 +95,7 @@ const state = {
       sortBy: ["reported_at"],
       descending: [true],
     },
+    saving: false,
     loading: false,
     bulkEditLoading: false,
   },
@@ -447,6 +450,9 @@ const mutations = {
   SET_SELECTED_LOADING(state, value) {
     state.selected.loading = value
   },
+  SET_SELECTED_SAVING(state, value) {
+    state.selected.saving = value
+  },
 }
 
 export default {

src/dispatch/static/dispatch/src/case/type/CaseTypeSearchPopover.vue

@@ -3,6 +3,7 @@ import { onMounted, ref } from "vue"
 import CaseTypeApi from "@/case/type/api"
 import CaseApi from "@/case/api"
 import SearchPopover from "@/components/SearchPopover.vue"
+import { useSavingState } from "@/composables/useSavingState"
 import type { Ref } from "vue"
 import { useStore } from "vuex"
 
@@ -13,7 +14,7 @@ type CaseType = {
 defineProps<{ caseType: string }>()
 
 const store = useStore()
-
+const { setSaving } = useSavingState()
 const caseTypes: Ref<CaseType[]> = ref([])
 
 onMounted(async () => {
@@ -39,7 +40,9 @@ const selectCaseType = async (caseTypeName: string) => {
   const caseDetails = store.state.case_management.selected
   caseDetails.case_type = caseType
 
+  setSaving(true)
   await CaseApi.update(caseDetails.id, caseDetails)
+  setSaving(false)
 }
 </script>
 

src/dispatch/static/dispatch/src/participant/ParticipantSearchPopover.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, watch, computed } from "vue"
+import { useSavingState } from "@/composables/useSavingState"
 import IndividualApi from "@/individual/api"
 import Hotkey from "@/atomics/Hotkey.vue"
 import { useHotKey } from "@/composables/useHotkey"
@@ -24,6 +25,7 @@ const props = withDefaults(
 )
 
 const store = useStore()
+const { setSaving } = useSavingState()
 const menu: Ref<boolean> = ref(false)
 const participants: Ref<string[]> = ref([])
 const selectedParticipant: Ref<string> = ref("")
@@ -83,8 +85,13 @@ watch(selectedParticipant, async (newValue: string) => {
       caseDetails.reporter.individual = individual
     }
 
-    // Call the CaseApi.update method to update the case details
-    await CaseApi.update(caseDetails.id, caseDetails)
+    setSaving(true)
+    try {
+      await CaseApi.update(caseDetails.id, caseDetails)
+    } catch (error) {
+      console.error("Error updating case:", error)
+    }
+    setSaving(false)
   }
 })
 

src/dispatch/static/dispatch/src/project/ProjectSearchPopover.vue

@@ -2,6 +2,8 @@
 import { ref, onMounted } from "vue"
 import ProjectApi from "@/project/api"
 import SearchPopover from "@/components/SearchPopover.vue"
+import { useSavingState } from "@/composables/useSavingState"
+
 import type { Ref } from "vue"
 import { useStore } from "vuex"
 import CaseApi from "@/case/api"
@@ -13,7 +15,7 @@ type Project = {
 const store = useStore()
 
 defineProps<{ project: string }>()
-
+const { setSaving } = useSavingState()
 const projects: Ref<Project[]> = ref([])
 
 onMounted(async () => {
@@ -39,9 +41,11 @@ const selectProject = async (projectName: string) => {
 
   caseDetails.project = project
 
+  setSaving(true)
   CaseApi.update(caseDetails.id, caseDetails)
     .then(() => console.log("Case details updated successfully"))
     .catch((e) => console.error("Failed to update case details", e))
+  setSaving(false)
 }
 </script>