fix(ui): use own-built resizable drawer for EditSheet

src/dispatch/static/dispatch/package.json

@@ -51,7 +51,6 @@
     "@vue-flow/minimap": "^1.2.0",
     "@vueuse/core": "^10.5.0",
     "@vueuse/integrations": "^10.6.1",
-    "@wdns/vuetify-resize-drawer": "^3.2.0",
     "apexcharts": "^3.44.0",
     "axios": "^0.21.4",
     "d3-force": "^3.0.0",

src/dispatch/static/dispatch/src/case/EditSheet.vue

@@ -1,6 +1,27 @@
 <template>
   <v-form @submit.prevent v-slot="{ isValid }">
-    <v-navigation-drawer location="right" width="900">
+    <v-navigation-drawer
+      location="right"
+      :width="navigation.width"
+      :style="{ transition: isResizing ? 'none' : 'width 0.2s ease' }"
+    >
+      <div
+        class="resize-handle"
+        @mousedown="startResize"
+        @mouseenter="handleHover = true"
+        @mouseleave="handleHover = false"
+        :style="{
+          position: 'absolute',
+          left: '0',
+          top: '0',
+          bottom: '0',
+          width: '4px',
+          cursor: 'ew-resize',
+          background: handleHover ? '#ff0000' : 'transparent',
+          zIndex: 1000,
+          transition: 'background 0.2s ease',
+        }"
+      />
       <template #prepend>
         <v-list-item lines="two">
           <v-list-item-title class="text-h6">
@@ -111,6 +132,13 @@ export default {
   data() {
     return {
       tab: null,
+      navigation: {
+        width: parseInt(localStorage.getItem("case-drawer-width")) || 900,
+        minWidth: 400,
+        maxWidth: 1200,
+      },
+      isResizing: false,
+      handleHover: false,
     }
   },
 
@@ -137,10 +165,23 @@ export default {
     this.fetchDetails()
   },
 
+  mounted() {
+    document.addEventListener("mousemove", this.onMouseMove)
+    document.addEventListener("mouseup", this.onMouseUp)
+  },
+
+  beforeUnmount() {
+    document.removeEventListener("mousemove", this.onMouseMove)
+    document.removeEventListener("mouseup", this.onMouseUp)
+  },
+
   watch: {
     "$route.params.name": function () {
       this.fetchDetails()
     },
+    "navigation.width": function (newWidth) {
+      localStorage.setItem("case-drawer-width", newWidth.toString())
+    },
   },
 
   methods: {
@@ -149,6 +190,21 @@ export default {
         this.getDetails({ name: this.$route.params.name })
       }
     },
+    startResize(e) {
+      this.isResizing = true
+      e.preventDefault()
+    },
+    onMouseMove(e) {
+      if (!this.isResizing) return
+
+      const newWidth = window.innerWidth - e.clientX
+      if (newWidth >= this.navigation.minWidth && newWidth <= this.navigation.maxWidth) {
+        this.navigation.width = newWidth
+      }
+    },
+    onMouseUp() {
+      this.isResizing = false
+    },
     ...mapActions("case_management", [
       "save",
       "getDetails",

src/dispatch/static/dispatch/src/incident/EditSheet.vue

@@ -1,13 +1,29 @@
 <template>
   <v-form @submit.prevent v-slot="{ isValid }">
-    <VResizeDrawer
+    <v-navigation-drawer
       location="right"
-      handle-position="border"
-      handle-border-width="2"
       :width="navigation.width"
       ref="drawer"
       :permanent="$vuetify.display.mdAndDown"
+      :style="{ transition: isResizing ? 'none' : 'width 0.2s ease' }"
     >
+      <div
+        class="resize-handle"
+        @mousedown="startResize"
+        @mouseenter="handleHover = true"
+        @mouseleave="handleHover = false"
+        :style="{
+          position: 'absolute',
+          left: '0',
+          top: '0',
+          bottom: '0',
+          width: '4px',
+          cursor: 'ew-resize',
+          background: handleHover ? '#ff0000' : 'transparent',
+          zIndex: 1000,
+          transition: 'background 0.2s ease',
+        }"
+      />
       <template #prepend>
         <v-list-item lines="two">
           <v-list-item-title class="text-h6">
@@ -74,7 +90,7 @@
           <workflow-instance-tab v-model="workflow_instances" />
         </v-window-item>
       </v-window>
-    </VResizeDrawer>
+    </v-navigation-drawer>
   </v-form>
 </template>
 
@@ -112,10 +128,12 @@ export default {
     return {
       tab: null,
       navigation: {
-        width: 800,
-        borderSize: 3,
+        width: parseInt(localStorage.getItem("incident-drawer-width")) || 800,
         minWidth: 400,
+        maxWidth: 1200,
       },
+      isResizing: false,
+      handleHover: false,
     }
   },
 
@@ -139,6 +157,16 @@ export default {
     this.fetchDetails()
   },
 
+  mounted() {
+    document.addEventListener("mousemove", this.onMouseMove)
+    document.addEventListener("mouseup", this.onMouseUp)
+  },
+
+  beforeUnmount() {
+    document.removeEventListener("mousemove", this.onMouseMove)
+    document.removeEventListener("mouseup", this.onMouseUp)
+  },
+
   watch: {
     "$route.params.name": function () {
       this.fetchDetails()
@@ -154,6 +182,9 @@ export default {
         }
       },
     },
+    "navigation.width": function (newWidth) {
+      localStorage.setItem("incident-drawer-width", newWidth.toString())
+    },
   },
 
   methods: {
@@ -162,6 +193,21 @@ export default {
         this.getDetails({ name: this.$route.params.name })
       }
     },
+    startResize(e) {
+      this.isResizing = true
+      e.preventDefault()
+    },
+    onMouseMove(e) {
+      if (!this.isResizing) return
+
+      const newWidth = window.innerWidth - e.clientX
+      if (newWidth >= this.navigation.minWidth && newWidth <= this.navigation.maxWidth) {
+        this.navigation.width = newWidth
+      }
+    },
+    onMouseUp() {
+      this.isResizing = false
+    },
     ...mapActions("incident", ["save", "getDetails", "closeEditSheet"]),
   },
 }

src/dispatch/static/dispatch/src/main.js

@@ -10,7 +10,6 @@ import "@formkit/themes/genesis"
 //   : null
 
 import { plugin, defaultConfig } from "@formkit/vue"
-import VResizeDrawer from "@wdns/vuetify-resize-drawer"
 
 import "roboto-fontface/css/roboto/roboto-fontface.css"
 import "font-awesome/css/font-awesome.css"
@@ -44,7 +43,6 @@ if (SENTRY_ENABLED) {
 app.use(vuetifyPlugin)
 app.use(router)
 app.use(store)
-app.component("VResizeDrawer", VResizeDrawer)
 // if (FORMKIT_PRO_PROJECT_KEY) {
 //   const proModule = import.meta.env.VITE_FORMKIT_PRO_PROJECT_KEY
 //     ? await import(/* @vite-ignore */ "@formkit/pro")

tests/static/e2e/drawer-functionality.spec.ts

@@ -0,0 +1,35 @@
+import register from "./utils/register"
+import { test, expect } from "./fixtures/dispatch-fixtures"
+
+test.describe("Drawer Functionality", () => {
+  test.beforeEach(async ({ authPage }) => {
+    await register(authPage)
+  })
+
+  test("Should open incident drawer", async ({ page, incidentsPage }) => {
+    // Navigate to incidents page
+    await incidentsPage.goto()
+
+    // Wait for the incidents table to load
+    await page.waitForSelector("table")
+
+    // Click on the kebab menu (three dots) for the first incident
+    const firstIncidentKebab = page.locator("tr").nth(1).getByRole("button").nth(2)
+    await firstIncidentKebab.click()
+
+    // Click on "View / Edit" option
+    const viewEditOption = page.getByText("View / Edit", { exact: true })
+    await viewEditOption.click()
+
+    await page.waitForTimeout(1000)
+
+    // Wait for the drawer to open and be visible
+    const drawer = page.locator(".v-navigation-drawer").first()
+    await expect(drawer).toBeVisible()
+
+    // Test making a change in the drawer
+    // Navigate to the Details tab
+    const detailsTab = page.getByRole("tab", { name: "Details" })
+    await detailsTab.click()
+  })
+})