From 11a2fece8232c5f9d0c453f4d9ca56e9bedc76bf Mon Sep 17 00:00:00 2001
From: Will Sheldon <114631109+wssheldon@users.noreply.github.com>
Date: Wed, 6 Dec 2023 08:46:49 -0800
Subject: [PATCH] Change Case Page route to name and revert all previous
 changes (#4085)

* Change Case Page route to name and revert all previous changes

* Remove unused store variable
---
 src/dispatch/case/messaging.py                |  4 +-
 .../plugins/dispatch_slack/case/messages.py   |  2 +-
 .../static/dispatch/src/case/Page.vue         | 42 +++++++++++------
 .../static/dispatch/src/case/PageHeader.vue   | 46 +++++++++++--------
 .../static/dispatch/src/case/Table.vue        |  2 +-
 .../static/dispatch/src/router/config.js      |  2 +-
 6 files changed, 61 insertions(+), 37 deletions(-)

diff --git a/src/dispatch/case/messaging.py b/src/dispatch/case/messaging.py
index 48f377b28191..ae9d54a02a15 100644
--- a/src/dispatch/case/messaging.py
+++ b/src/dispatch/case/messaging.py
@@ -37,7 +37,7 @@ def send_case_close_reminder(case: Case, db_session: SessionLocal):
     items = [
         {
             "name": case.name,
-            "dispatch_ui_case_url": f"{DISPATCH_UI_URL}/{case.project.organization.name}/cases/{case.id}",  # noqa
+            "dispatch_ui_case_url": f"{DISPATCH_UI_URL}/{case.project.organization.name}/cases/{case.name}",  # noqa
             "title": case.title,
             "status": case.status,
         }
@@ -77,7 +77,7 @@ def send_case_triage_reminder(case: Case, db_session: SessionLocal):
             "name": case.name,
             "title": case.title,
             "status": case.status,
-            "dispatch_ui_case_url": f"{DISPATCH_UI_URL}/{case.project.organization.name}/cases/{case.id}",  # noqa
+            "dispatch_ui_case_url": f"{DISPATCH_UI_URL}/{case.project.organization.name}/cases/{case.name}",  # noqa
         }
     ]
 
diff --git a/src/dispatch/plugins/dispatch_slack/case/messages.py b/src/dispatch/plugins/dispatch_slack/case/messages.py
index 76a52b52e83a..9163f6d57644 100644
--- a/src/dispatch/plugins/dispatch_slack/case/messages.py
+++ b/src/dispatch/plugins/dispatch_slack/case/messages.py
@@ -78,7 +78,7 @@ def create_case_message(case: Case, channel_id: str) -> list[Block]:
             accessory=Button(
                 text="View",
                 action_id="button-link",
-                url=f"{DISPATCH_UI_URL}/{case.project.organization.slug}/cases/{case.id}",
+                url=f"{DISPATCH_UI_URL}/{case.project.organization.slug}/cases/{case.name}",
             ),
         ),
         Section(text=f"*Description* \n {case.description}"),
diff --git a/src/dispatch/static/dispatch/src/case/Page.vue b/src/dispatch/static/dispatch/src/case/Page.vue
index d0fc5e364105..e679c53718ec 100644
--- a/src/dispatch/static/dispatch/src/case/Page.vue
+++ b/src/dispatch/static/dispatch/src/case/Page.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <PageHeader
+      :case-id="caseDetails.id"
       :case-name="caseDetails.name"
       :case-visibility="caseDetails.visibility"
       :case-status="caseDetails.status"
@@ -92,21 +93,36 @@ const toggleDrawer = () => {
 }
 
 const fetchDetails = async () => {
-  const caseId = parseInt(route.params.id, 10)
+  const caseName = route.params.name
   loading.value = true
-  try {
-    // get the full data set
-    CaseApi.get(caseId).then((response) => {
-      caseDetails.value = response.data
 
-      // Save the fetched case details to the Vuex store
-      store.commit("case_management/SET_SELECTED", response.data)
-    })
-  } catch (e) {
-    console.error("Failed to fetch case details", e)
-    caseDetails.value = caseDefaults
+  CaseApi.getAll({
+    filter: JSON.stringify([
+      { and: [{ model: "Case", field: "name", op: "==", value: caseName }] },
+    ]),
+  }).then((response) => {
+    if (response.data.items.length) {
+      // get the full data set
+      return CaseApi.get(response.data.items[0].id).then((response) => {
+        caseDetails.value = response.data
+
+        // Save the fetched case details to the Vuex store
+        store.commit("case_management/SET_SELECTED", response.data)
+        loading.value = false
+      })
+    } else {
+      caseDetails.value = caseDefaults
+      store.commit(
+        "notification_backend/addBeNotification",
+        {
+          text: `Case '${caseName}' could not be found.`,
+          type: "exception",
+        },
+        { root: true }
+      )
+    }
     loading.value = false
-  }
+  })
 }
 
 const saveCaseDetails = async () => {
@@ -132,7 +148,7 @@ const handleDescriptionUpdate = (newDescription) => {
 }
 
 watch(
-  () => route.params.id,
+  () => route.params.name,
   (newName, oldName) => {
     if (newName !== oldName) {
       fetchDetails()
diff --git a/src/dispatch/static/dispatch/src/case/PageHeader.vue b/src/dispatch/static/dispatch/src/case/PageHeader.vue
index 965102f2ec42..760039726425 100644
--- a/src/dispatch/static/dispatch/src/case/PageHeader.vue
+++ b/src/dispatch/static/dispatch/src/case/PageHeader.vue
@@ -33,17 +33,22 @@
 
 <script setup lang="ts">
 import { useRoute } from "vue-router"
-import { computed, ref } from "vue"
+import { computed, ref, watch } from "vue"
 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"
+import type { Ref } from "vue"
 
 const route = useRoute()
 
 const props = defineProps({
+  caseId: {
+    type: Number,
+    required: true,
+  },
   caseName: {
     type: String,
     required: true,
@@ -68,22 +73,28 @@ const props = defineProps({
 
 const caseParticipants = ref([])
 const loading = ref(false)
+const caseIdRef: Ref<any> = ref(props.caseId)
 
-const fetchParticipants = async () => {
-  const caseId = route.params.id
-  loading.value = true
-  try {
-    // get case participants
-    CaseApi.getParticipants(caseId, true).then((response) => {
-      // Pass true to fetch minimal data
-      caseParticipants.value = response.data
-    })
-    loading.value = false
-  } catch (e) {
-    console.error("Failed to fetch case participants", e)
-    loading.value = false
-  }
-}
+watch(
+  () => props.caseId,
+  async (caseId) => {
+    caseIdRef.value = caseId
+    if (caseId) {
+      try {
+        // get case participants
+        CaseApi.getParticipants(caseIdRef.value, true).then((response) => {
+          // Pass true to fetch minimal data
+          caseParticipants.value = response.data
+        })
+        loading.value = false
+      } catch (e) {
+        console.error("Failed to fetch case participants", e)
+        loading.value = false
+      }
+    }
+  },
+  { immediate: true }
+)
 
 const emit = defineEmits(["toggle-drawer"])
 
@@ -105,9 +116,6 @@ const breadcrumbItems = computed(() => {
   ]
   return items
 })
-
-// Fetch participants immediately when the component is created
-fetchParticipants()
 </script>
 
 <style scoped>
diff --git a/src/dispatch/static/dispatch/src/case/Table.vue b/src/dispatch/static/dispatch/src/case/Table.vue
index 056dbcc0d776..cf189a059bea 100644
--- a/src/dispatch/static/dispatch/src/case/Table.vue
+++ b/src/dispatch/static/dispatch/src/case/Table.vue
@@ -92,7 +92,7 @@
                   <v-list-item
                     :to="{
                       name: 'CasePage',
-                      params: { id: item.id },
+                      params: { name: item.name },
                     }"
                   >
                     <v-list-item-title>View</v-list-item-title>
diff --git a/src/dispatch/static/dispatch/src/router/config.js b/src/dispatch/static/dispatch/src/router/config.js
index ebce1af4e6cd..f14781b94a6e 100644
--- a/src/dispatch/static/dispatch/src/router/config.js
+++ b/src/dispatch/static/dispatch/src/router/config.js
@@ -205,7 +205,7 @@ export const protectedRoute = [
           ],
         },
         {
-          path: "/:organization/cases/:id",
+          path: "/:organization/cases/:name",
           name: "CasePage",
           meta: { title: "Page" },
           component: () => import("@/case/Page.vue"),