feat: add on_hold filter option to Incidents page

web/template/incidents.templ

@@ -107,6 +107,9 @@ templ Incidents(deployment, versionName, versionRef, eventName string) {
           <li id="show_state_active" title="New, dispatched, or on-scene">
             <button type="button" class="name dropdown-item" onclick="showState('active', true);">Active</button>
           </li>
+          <li id="show_state_on_hold" title="On hold only">
+            <button type="button" class="name dropdown-item" onclick="showState('on_hold', true);">On Hold</button>
+          </li>
           <li class="border-top">
             <a href="/ims/app/settings" class="name dropdown-item">Change default</a>
           </li>

web/template/settings.templ

@@ -48,6 +48,7 @@ templ Settings(deployment, versionName, versionRef string) {
       <option value="all">All</option>
       <option value="open">Open</option>
       <option value="active">Active</option>
+      <option value="on_hold">On Hold</option>
     </select>
     </div>
     <div class="input-group mb-1 flex-nowrap">

web/typescript/ims.ts

@@ -1966,7 +1966,7 @@ export function refreshTokenAfter(): number|null {
     return parseInt10(localStorage.getItem(accessTokenRefreshAfterKey));
 }
 
-export const incidentTableStates = ["all", "open", "active"] as const;
+export const incidentTableStates = ["all", "open", "active", "on_hold"] as const;
 export type IncidentsTableState = typeof incidentTableStates[number];
 export function isValidIncidentsTableState(value: string|null): value is IncidentsTableState {
     if (value) {

web/typescript/incidents.ts

@@ -706,6 +706,12 @@ function initSearch(): void {
                         return false;
                     }
                     break;
+                case "on_hold":
+                    state = ims.stateForIncident(incident);
+                    if (state !== "on_hold") {
+                        return false;
+                    }
+                    break;
             }
         }
         return true;

web/typescripttest/ims.test.ts

@@ -137,6 +137,7 @@ test("isValidIncidentsTableState accepts only known states", (): void => {
     expect(ims.isValidIncidentsTableState("all")).toBe(true);
     expect(ims.isValidIncidentsTableState("open")).toBe(true);
     expect(ims.isValidIncidentsTableState("active")).toBe(true);
+    expect(ims.isValidIncidentsTableState("on_hold")).toBe(true);
     expect(ims.isValidIncidentsTableState("closed")).toBe(false);
     expect(ims.isValidIncidentsTableState(null)).toBe(false);
 });

web/typescripttest/incidents.test.ts

@@ -198,7 +198,7 @@ test("the types column renders type names and handles missing ids", async (): Pr
     expect(render(incident.incident_type_ids, "bogus", incident)).toBeUndefined();
 });
 
-test("the state filter shows open, active, and all states correctly", async (): Promise<void> => {
+test("the state filter shows open, active, on hold, and all states correctly", async (): Promise<void> => {
     // data[0] on_scene (open+active), data[1] closed, data[2] on_hold (open but not active)
     serverIncidents.push({
         number: 3, event: eventName, state: "on_hold", priority: 3, summary: "On hold", incident_type_ids: [1], report_entries: [],
@@ -223,6 +223,11 @@ test("the state filter shows open, active, and all states correctly", async ():
     expect(table.fixedSearch("state", 0)).toBe(true);
     expect(table.fixedSearch("state", 1)).toBe(true);
     expect(table.fixedSearch("state", 2)).toBe(true);
+
+    window.showState("on_hold", false);
+    expect(table.fixedSearch("state", 0)).toBe(false); // on_scene hidden
+    expect(table.fixedSearch("state", 1)).toBe(false); // closed hidden
+    expect(table.fixedSearch("state", 2)).toBe(true); // on_hold only
 });
 
 test("toggling all types off then on drives the type filter", async (): Promise<void> => {