From 8b0fd5153b988533e5ef900705ea2c90333eb526 Mon Sep 17 00:00:00 2001
From: Will Sheldon <114631109+wssheldon@users.noreply.github.com>
Date: Wed, 6 Dec 2023 08:52:09 -0800
Subject: [PATCH 1/3] Add CaseStatusSelect group tests, refactor to script
 setup, and fix a couple bugs (#4088)

* Add CaseStatusSelect group tests, refactor to script setup, and fix a couple bugs

* Remove mocked case api for now
---
 .../src/case/CaseStatusSelectGroup.vue        | 164 ++++++++++--------
 .../src/tests/CaseStatusSelectGroup.spec.js   |  71 ++++++++
 2 files changed, 165 insertions(+), 70 deletions(-)
 create mode 100644 src/dispatch/static/dispatch/src/tests/CaseStatusSelectGroup.spec.js

diff --git a/src/dispatch/static/dispatch/src/case/CaseStatusSelectGroup.vue b/src/dispatch/static/dispatch/src/case/CaseStatusSelectGroup.vue
index 9fc8b751c144..a1069e310914 100644
--- a/src/dispatch/static/dispatch/src/case/CaseStatusSelectGroup.vue
+++ b/src/dispatch/static/dispatch/src/case/CaseStatusSelectGroup.vue
@@ -70,83 +70,107 @@
   </v-item-group>
 </template>
 
-<script>
-import { mapActions } from "vuex"
+<script setup>
+import { computed, watch, ref } from "vue"
+import { useStore } from "vuex"
+import { useSavingState } from "@/composables/useSavingState"
 import DTooltip from "@/components/DTooltip.vue"
+import CaseApi from "@/case/api"
 
-export default {
-  name: "CaseStatusSelectGroup",
-  props: {
-    modelValue: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: false,
+    default: () => ({}),
   },
-  components: {
-    DTooltip,
+})
+
+const store = useStore()
+const { setSaving } = useSavingState()
+let selectedStatus = ref(null)
+let dialogVisible = ref(false)
+let activeStatus = ref(props.modelValue.status)
+
+const statuses = computed(() => [
+  {
+    name: "New",
+    label: "Created",
+    color: "red",
+    hoverClass: "hover-card-three",
+    sheetClass: "rounded-s-xl arrow",
+    tooltip: props.modelValue.created_at,
   },
-  data() {
-    return {
-      selectedStatus: null,
-      dialogVisible: false,
-    }
+  {
+    name: "Triage",
+    label: "Triaged",
+    color: "red",
+    hoverClass: "hover-card-two",
+    sheetClass: "arrow",
+    tooltip: props.modelValue.triage_at,
   },
-  computed: {
-    statuses() {
-      return [
-        {
-          name: "New",
-          label: "New",
-          color: "red",
-          hoverClass: "hover-card-three",
-          sheetClass: "rounded-s-xl arrow",
-          tooltip: this.modelValue.created_at,
-        },
-        {
-          name: "Triage",
-          label: "Triaged",
-          color: "red",
-          hoverClass: "hover-card-two",
-          sheetClass: "arrow",
-          tooltip: this.modelValue.triage_at,
-        },
-        {
-          name: "Closed",
-          label: "Resolved",
-          color: "green",
-          hoverClass: "hover-card",
-          sheetClass: "arrow",
-          tooltip: this.modelValue.closed_at,
-        },
-        {
-          name: "Escalated",
-          label: "Escalated",
-          color: "red",
-          hoverClass: "",
-          sheetClass: "rounded-e-xl end-sheet",
-          tooltip: this.modelValue.escalated_at,
-        },
-      ]
-    },
+  {
+    name: "Closed",
+    label: "Resolved",
+    color: "green",
+    hoverClass: "hover-card",
+    sheetClass: "arrow",
+    tooltip: props.modelValue.closed_at,
   },
-  methods: {
-    ...mapActions("case_management", ["save_page"]),
-    changeStatus(newStatus) {
-      // eslint-disable-next-line vue/no-mutating-props
-      this.modelValue.status = newStatus
-      this.save_page()
-      this.dialogVisible = false
-      this.selectedStatus = null
-    },
-    openDialog(newStatus) {
-      this.selectedStatus = newStatus
-      this.dialogVisible = true
-    },
-    isActiveStatus(status) {
-      return this.modelValue.status === status
-    },
+  {
+    name: "Escalated",
+    label: "Escalated",
+    color: "red",
+    hoverClass: "",
+    sheetClass: "rounded-e-xl end-sheet",
+    tooltip: props.modelValue.escalated_at,
   },
+])
+
+const changeStatus = async (newStatus) => {
+  const caseDetails = store.state.case_management.selected
+  const previousStatus = activeStatus.value
+
+  // Optimistically update the UI
+  activeStatus.value = newStatus
+  selectedStatus.value = null
+  dialogVisible.value = false
+  caseDetails.status = newStatus
+
+  try {
+    setSaving(true)
+    await CaseApi.update(caseDetails.id, caseDetails)
+    setSaving(false)
+  } catch (e) {
+    console.error(`Failed to update case status`, e)
+
+    // If the API call fails, revert the active status change
+    activeStatus.value = previousStatus
+
+    store.commit(
+      "notification_backend/addBeNotification",
+      {
+        text: `Failed to update case status`,
+        type: "exception",
+      },
+      { root: true }
+    )
+  }
+}
+
+const openDialog = (newStatus) => {
+  selectedStatus.value = newStatus
+  dialogVisible.value = true
+}
+
+watch(
+  () => props.modelValue.status,
+  (newStatus) => {
+    activeStatus.value = newStatus
+  }
+)
+
+const isActiveStatus = (status) => {
+  return activeStatus.value === status
 }
 </script>
 
diff --git a/src/dispatch/static/dispatch/src/tests/CaseStatusSelectGroup.spec.js b/src/dispatch/static/dispatch/src/tests/CaseStatusSelectGroup.spec.js
new file mode 100644
index 000000000000..47ee1f2e0068
--- /dev/null
+++ b/src/dispatch/static/dispatch/src/tests/CaseStatusSelectGroup.spec.js
@@ -0,0 +1,71 @@
+import { mount } from "@vue/test-utils"
+import { createStore } from "vuex"
+import { createVuetify } from "vuetify"
+import * as components from "vuetify/components"
+import * as directives from "vuetify/directives"
+import { describe, expect, it, vi, afterEach, beforeEach } from "vitest"
+import CaseStatusSelectGroup from "@/case/CaseStatusSelectGroup.vue"
+
+const vuetify = createVuetify({
+  components,
+  directives,
+})
+
+global.ResizeObserver = require("resize-observer-polyfill")
+
+describe("CaseStatusSelectGroup", () => {
+  let actions
+  let mockStore
+  let wrapper
+
+  beforeEach(() => {
+    // Mock the store and actions
+    actions = {
+      addBeNotification: vi.fn(),
+    }
+
+    mockStore = createStore({
+      modules: {
+        notification_backend: {
+          namespaced: true,
+          actions,
+        },
+        case_management: {
+          namespaced: true,
+          state: {
+            selected: {
+              id: 1,
+              status: "New",
+            },
+          },
+        },
+      },
+    })
+
+    // Mount the component
+    wrapper = mount(CaseStatusSelectGroup, {
+      props: {
+        modelValue: {
+          status: "New",
+          created_at: "2022-01-01",
+        },
+      },
+      global: {
+        plugins: [mockStore, vuetify], // 👈
+      },
+    })
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it("mounts correctly", () => {
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it("opens dialog on status click", async () => {
+    await wrapper.find(".overlap-card").trigger("click")
+    expect(wrapper.vm.dialogVisible).toBe(true)
+  })
+})

From 9f9c4d74badeddbb4914b416ebe43b52610e0a2c Mon Sep 17 00:00:00 2001
From: Will Sheldon <114631109+wssheldon@users.noreply.github.com>
Date: Wed, 6 Dec 2023 08:58:53 -0800
Subject: [PATCH 2/3] Use ellipsis in the signal name list on case page to
 avoid format issues (#4089)

---
 .../static/dispatch/src/case/CaseSignalInstanceTab.vue   | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/dispatch/static/dispatch/src/case/CaseSignalInstanceTab.vue b/src/dispatch/static/dispatch/src/case/CaseSignalInstanceTab.vue
index 1a2b9f1c000d..69dbf9aba704 100644
--- a/src/dispatch/static/dispatch/src/case/CaseSignalInstanceTab.vue
+++ b/src/dispatch/static/dispatch/src/case/CaseSignalInstanceTab.vue
@@ -7,7 +7,7 @@
           <v-virtual-scroll :items="signalInstances" height="828" class="pt-2">
             <template #default="{ item }">
               <div class="d-flex align-center">
-                <span style="font-size: 0.8rem" class="pl-8">
+                <span class="pl-8 signal-name">
                   {{ item.signal.name }}
                 </span>
                 <span class="pl-1 dispatch-text-paragraph">
@@ -110,4 +110,11 @@ watch(
   border: 0.5px solid rgb(216, 216, 216) !important;
   border-radius: 8px !important;
 }
+
+.signal-name {
+  font-size: 0.8rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 </style>

From da1bd62619aec6c051828d3a9e8ff345b480872f Mon Sep 17 00:00:00 2001
From: Will Sheldon <114631109+wssheldon@users.noreply.github.com>
Date: Wed, 6 Dec 2023 09:05:02 -0800
Subject: [PATCH 3/3] use flex-shrink and mid-width 0 for signal instance tab
 to prevent button overlap on small viewports (#4090)

---
 .../dispatch/src/case/CaseSignalInstanceTab.vue    | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/dispatch/static/dispatch/src/case/CaseSignalInstanceTab.vue b/src/dispatch/static/dispatch/src/case/CaseSignalInstanceTab.vue
index 69dbf9aba704..c0e549d8ce2f 100644
--- a/src/dispatch/static/dispatch/src/case/CaseSignalInstanceTab.vue
+++ b/src/dispatch/static/dispatch/src/case/CaseSignalInstanceTab.vue
@@ -2,8 +2,8 @@
   <v-container>
     <v-row>
       <!-- Column for Data Table -->
-      <v-col cols="3">
-        <v-card min-width="350" class="signal-card" elevation="0">
+      <v-col cols="3" class="d-flex">
+        <v-card class="signal-card flex-card" elevation="0">
           <v-virtual-scroll :items="signalInstances" height="828" class="pt-2">
             <template #default="{ item }">
               <div class="d-flex align-center">
@@ -23,8 +23,8 @@
         </v-card>
       </v-col>
       <!-- Column for Raw Signal Viewer -->
-      <v-col cols="9">
-        <v-card elevation="0" class="signal-card pt-2">
+      <v-col cols="9" class="d-flex">
+        <v-card class="signal-card flex-card" elevation="0">
           <span class="dispatch-text-paragraph">
             <!-- {{ selectedItem.signal.name }} -->
           </span>
@@ -111,6 +111,12 @@ watch(
   border-radius: 8px !important;
 }
 
+.flex-card {
+  flex: 1;
+  min-width: 0; // Allow the card to shrink below its content size
+  overflow: hidden; // Clip the content and add ... if the content is too big
+}
+
 .signal-name {
   font-size: 0.8rem;
   white-space: nowrap;