From 3749953c2cc2f1af54a88e2db8537d26f8339253 Mon Sep 17 00:00:00 2001
From: SergeantPanda <chester.cullen@gmail.com>
Date: Sun, 19 Jul 2026 18:52:34 +0000
Subject: [PATCH] feat(confirmation-dialog): add stop stream option to
 confirmation dialog

This update enhances the ConfirmationDialog component by introducing an option to stop the active stream when confirming actions. The new checkbox allows users to choose whether to stop the stream if it is playing, with the preference being remembered for future confirmations. The implementation includes updates to the state management and effects to handle the new option, as well as corresponding tests to ensure functionality. Additionally, the ChannelsTable component has been updated to utilize this new feature, improving user experience during channel deletions.
---
 frontend/src/api.js                           | 20 ++--
 .../src/components/ConfirmationDialog.jsx     | 69 +++++++++++---
 .../__tests__/ConfirmationDialog.test.jsx     | 92 +++++++++++++++++++
 .../src/components/tables/ChannelsTable.jsx   | 38 +++++---
 .../tables/__tests__/ChannelsTable.test.jsx   | 43 +++++++--
 .../src/store/__tests__/warnings.test.jsx     | 34 +++++++
 frontend/src/store/warnings.jsx               | 33 ++++++-
 .../src/utils/tables/ChannelsTableUtils.js    |  8 +-
 .../__tests__/ChannelsTableUtils.test.js      | 16 +++-
 9 files changed, 303 insertions(+), 50 deletions(-)

diff --git a/frontend/src/api.js b/frontend/src/api.js
index 3a745896..31963452 100644
--- a/frontend/src/api.js
+++ b/frontend/src/api.js
@@ -610,11 +610,19 @@ export default class API {
     }
   }
 
-  static async deleteChannel(id) {
+  static async deleteChannel(id, { stopStream = false } = {}) {
     try {
-      await request(`${host}/api/channels/channels/${id}/`, {
-        method: 'DELETE',
-      });
+      const params = new URLSearchParams();
+      if (stopStream) {
+        params.set('stop_stream', 'true');
+      }
+      const query = params.toString();
+      await request(
+        `${host}/api/channels/channels/${id}/${query ? `?${query}` : ''}`,
+        {
+          method: 'DELETE',
+        }
+      );
 
       useChannelsStore.getState().removeChannels([id]);
       await API.requeryStreams();
@@ -624,11 +632,11 @@ export default class API {
   }
 
   // @TODO: the bulk delete endpoint is currently broken
-  static async deleteChannels(channel_ids) {
+  static async deleteChannels(channel_ids, { stopStream = false } = {}) {
     try {
       await request(`${host}/api/channels/channels/bulk-delete/`, {
         method: 'DELETE',
-        body: { channel_ids },
+        body: { channel_ids, stop_stream: Boolean(stopStream) },
       });
 
       useChannelsStore.getState().removeChannels(channel_ids);
diff --git a/frontend/src/components/ConfirmationDialog.jsx b/frontend/src/components/ConfirmationDialog.jsx
index 86e7d7af..e9a6f433 100644
--- a/frontend/src/components/ConfirmationDialog.jsx
+++ b/frontend/src/components/ConfirmationDialog.jsx
@@ -1,5 +1,5 @@
 import { Modal, Group, Button, Checkbox, Box } from '@mantine/core';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import useWarningsStore from '../store/warnings';
 
 /**
@@ -17,6 +17,10 @@ import useWarningsStore from '../store/warnings';
  * @param {Function} props.onSuppressChange - Called when "don't show again" option changes
  * @param {string} [props.size='md'] - Size of the modal
  * @param {boolean} [props.loading=false] - Whether the confirm button should show loading state
+ * @param {boolean} [props.showDeleteFileOption=false] - Show "also delete files" checkbox
+ * @param {string} [props.deleteFileLabel] - Label for delete-files checkbox
+ * @param {boolean} [props.showStopStreamOption=false] - Show "also stop stream" checkbox
+ * @param {string} [props.stopStreamLabel] - Label for stop-stream checkbox
  */
 const ConfirmationDialog = ({
   opened,
@@ -32,14 +36,38 @@ const ConfirmationDialog = ({
   zIndex = 1000,
   showDeleteFileOption = false,
   deleteFileLabel = 'Also delete files from disk',
+  showStopStreamOption = false,
+  stopStreamLabel = 'Also stop active stream if playing',
   loading = false,
 }) => {
   const suppressWarning = useWarningsStore((s) => s.suppressWarning);
   const isWarningSuppressed = useWarningsStore((s) => s.isWarningSuppressed);
+  const setActionPreference = useWarningsStore((s) => s.setActionPreference);
+  const getActionPreference = useWarningsStore((s) => s.getActionPreference);
   const [suppressChecked, setSuppressChecked] = useState(
     isWarningSuppressed(actionKey)
   );
   const [deleteFiles, setDeleteFiles] = useState(false);
+  const [stopStream, setStopStream] = useState(false);
+
+  useEffect(() => {
+    if (!opened) {
+      return;
+    }
+    setSuppressChecked(isWarningSuppressed(actionKey));
+    setDeleteFiles(false);
+    if (showStopStreamOption && actionKey) {
+      setStopStream(getActionPreference(actionKey, 'stopStream', false));
+    } else {
+      setStopStream(false);
+    }
+  }, [
+    opened,
+    actionKey,
+    showStopStreamOption,
+    isWarningSuppressed,
+    getActionPreference,
+  ]);
 
   const handleToggleSuppress = (e) => {
     setSuppressChecked(e.currentTarget.checked);
@@ -49,19 +77,25 @@ const ConfirmationDialog = ({
   };
 
   const handleConfirm = () => {
+    if (showStopStreamOption && actionKey) {
+      setActionPreference(actionKey, { stopStream });
+    }
     if (suppressChecked) {
       suppressWarning(actionKey);
     }
-    if (showDeleteFileOption) {
+    if (showStopStreamOption) {
+      onConfirm(stopStream);
+    } else if (showDeleteFileOption) {
       onConfirm(deleteFiles);
     } else {
       onConfirm();
     }
-    setDeleteFiles(false); // Reset for next time
+    setDeleteFiles(false);
   };
 
   const handleClose = () => {
-    setDeleteFiles(false); // Reset for next time
+    setDeleteFiles(false);
+    setStopStream(false);
     onClose();
   };
 
@@ -76,15 +110,6 @@ const ConfirmationDialog = ({
     >
       <Box mb={20}>{message}</Box>
 
-      {actionKey && (
-        <Checkbox
-          label="Don't ask me again"
-          checked={suppressChecked}
-          onChange={handleToggleSuppress}
-          mb={20}
-        />
-      )}
-
       {showDeleteFileOption && (
         <Checkbox
           checked={deleteFiles}
@@ -94,6 +119,24 @@ const ConfirmationDialog = ({
         />
       )}
 
+      {showStopStreamOption && (
+        <Checkbox
+          checked={stopStream}
+          onChange={(event) => setStopStream(event.currentTarget.checked)}
+          label={stopStreamLabel}
+          mb="md"
+        />
+      )}
+
+      {actionKey && (
+        <Checkbox
+          label="Don't ask me again"
+          checked={suppressChecked}
+          onChange={handleToggleSuppress}
+          mb={20}
+        />
+      )}
+
       <Group justify="flex-end">
         <Button variant="outline" onClick={handleClose} disabled={loading}>
           {cancelLabel}
diff --git a/frontend/src/components/__tests__/ConfirmationDialog.test.jsx b/frontend/src/components/__tests__/ConfirmationDialog.test.jsx
index 851bb2dd..09bc5853 100644
--- a/frontend/src/components/__tests__/ConfirmationDialog.test.jsx
+++ b/frontend/src/components/__tests__/ConfirmationDialog.test.jsx
@@ -38,13 +38,18 @@ describe('ConfirmationDialog', () => {
   const mockOnSuppressChange = vi.fn();
   const mockSuppressWarning = vi.fn();
   const mockIsWarningSuppressed = vi.fn();
+  const mockSetActionPreference = vi.fn();
+  const mockGetActionPreference = vi.fn(() => false);
 
   beforeEach(() => {
     vi.clearAllMocks();
+    mockGetActionPreference.mockReturnValue(false);
     useWarningsStore.mockImplementation((selector) => {
       const state = {
         suppressWarning: mockSuppressWarning,
         isWarningSuppressed: mockIsWarningSuppressed,
+        setActionPreference: mockSetActionPreference,
+        getActionPreference: mockGetActionPreference,
       };
       return selector ? selector(state) : state;
     });
@@ -211,6 +216,93 @@ describe('ConfirmationDialog', () => {
     expect(mockOnConfirm).toHaveBeenCalledWith(true);
   });
 
+  it('should show stop stream option when enabled', () => {
+    render(
+      <ConfirmationDialog
+        opened={true}
+        onClose={mockOnClose}
+        onConfirm={mockOnConfirm}
+        showStopStreamOption={true}
+      />
+    );
+
+    expect(
+      screen.getByLabelText('Also stop active stream if playing')
+    ).toBeInTheDocument();
+  });
+
+  it('should pass stopStream false by default when stop option enabled', () => {
+    render(
+      <ConfirmationDialog
+        opened={true}
+        onClose={mockOnClose}
+        onConfirm={mockOnConfirm}
+        showStopStreamOption={true}
+      />
+    );
+
+    fireEvent.click(screen.getByText('Confirm'));
+
+    expect(mockOnConfirm).toHaveBeenCalledWith(false);
+  });
+
+  it('should pass stopStream true when stop option is checked', () => {
+    render(
+      <ConfirmationDialog
+        opened={true}
+        onClose={mockOnClose}
+        onConfirm={mockOnConfirm}
+        showStopStreamOption={true}
+        actionKey="delete-channel"
+      />
+    );
+
+    fireEvent.click(screen.getByLabelText('Also stop active stream if playing'));
+    fireEvent.click(screen.getByText('Confirm'));
+
+    expect(mockOnConfirm).toHaveBeenCalledWith(true);
+    expect(mockSetActionPreference).toHaveBeenCalledWith('delete-channel', {
+      stopStream: true,
+    });
+  });
+
+  it('should render stop stream checkbox before do not ask again', () => {
+    render(
+      <ConfirmationDialog
+        opened={true}
+        onClose={mockOnClose}
+        onConfirm={mockOnConfirm}
+        showStopStreamOption={true}
+        actionKey="delete-channel"
+      />
+    );
+
+    const checkboxes = screen.getAllByRole('checkbox');
+    expect(checkboxes).toHaveLength(2);
+    expect(checkboxes[0]).toHaveAccessibleName(
+      'Also stop active stream if playing'
+    );
+    expect(checkboxes[1]).toHaveAccessibleName("Don't ask me again");
+  });
+
+  it('should restore saved stopStream preference when dialog opens', () => {
+    mockGetActionPreference.mockReturnValue(true);
+
+    render(
+      <ConfirmationDialog
+        opened={true}
+        onClose={mockOnClose}
+        onConfirm={mockOnConfirm}
+        showStopStreamOption={true}
+        actionKey="delete-channel"
+      />
+    );
+
+    expect(
+      screen.getByLabelText('Also stop active stream if playing')
+    ).toBeChecked();
+  });
+
   it('should reset deleteFiles state after confirmation', () => {
     const { rerender } = render(
       <ConfirmationDialog
diff --git a/frontend/src/components/tables/ChannelsTable.jsx b/frontend/src/components/tables/ChannelsTable.jsx
index db27ecbf..02f8798c 100644
--- a/frontend/src/components/tables/ChannelsTable.jsx
+++ b/frontend/src/components/tables/ChannelsTable.jsx
@@ -332,6 +332,7 @@ const ChannelsTable = ({ onReady }) => {
   // store/warnings
   const isWarningSuppressed = useWarningsStore((s) => s.isWarningSuppressed);
   const suppressWarning = useWarningsStore((s) => s.suppressWarning);
+  const getActionPreference = useWarningsStore((s) => s.getActionPreference);
 
   /**
    * useState
@@ -575,8 +576,9 @@ const ChannelsTable = ({ onReady }) => {
       setChannelToDelete(null);
 
       if (isWarningSuppressed('delete-channels')) {
-        // Skip warning if suppressed
-        return executeDeleteChannels();
+        return executeDeleteChannels(
+          getActionPreference('delete-channels', 'stopStream', false)
+        );
       }
 
       setConfirmDeleteOpen(true);
@@ -589,17 +591,19 @@ const ChannelsTable = ({ onReady }) => {
     setChannelToDelete(knownChannel); // Store the channel object for displaying details
 
     if (isWarningSuppressed('delete-channel')) {
-      // Skip warning if suppressed
-      return executeDeleteChannel(id);
+      return executeDeleteChannel(
+        id,
+        getActionPreference('delete-channel', 'stopStream', false)
+      );
     }
 
     setConfirmDeleteOpen(true);
   };
 
-  const executeDeleteChannel = async (id) => {
+  const executeDeleteChannel = async (id, stopStream = false) => {
     setDeleting(true);
     try {
-      await deleteChannel(id);
+      await deleteChannel(id, { stopStream });
       requeryChannels();
     } finally {
       setDeleting(false);
@@ -609,19 +613,20 @@ const ChannelsTable = ({ onReady }) => {
 
   const handleDeleteChannels = async () => {
     if (isWarningSuppressed('delete-channels')) {
-      // Skip warning if suppressed
-      return executeDeleteChannels();
+      return executeDeleteChannels(
+        getActionPreference('delete-channels', 'stopStream', false)
+      );
     }
 
     setIsBulkDelete(true);
     setConfirmDeleteOpen(true);
   };
 
-  const executeDeleteChannels = async () => {
+  const executeDeleteChannels = async (stopStream = false) => {
     setIsLoading(true);
     setDeleting(true);
     try {
-      await deleteChannels(table.selectedTableIds);
+      await deleteChannels(table.selectedTableIds, { stopStream });
       await requeryChannels();
       setSelectedChannelIds([]);
       table.setSelectedTableIds([]);
@@ -1668,11 +1673,12 @@ const ChannelsTable = ({ onReady }) => {
       <ConfirmationDialog
         opened={confirmDeleteOpen}
         onClose={() => setConfirmDeleteOpen(false)}
-        onConfirm={() =>
-          isBulkDelete
-            ? executeDeleteChannels()
-            : executeDeleteChannel(deleteTarget)
-        }
+        onConfirm={(stopStream) => {
+          const shouldStop = stopStream === true;
+          return isBulkDelete
+            ? executeDeleteChannels(shouldStop)
+            : executeDeleteChannel(deleteTarget, shouldStop);
+        }}
         loading={deleting}
         title={`Confirm ${isBulkDelete ? 'Bulk ' : ''}Channel Deletion`}
         message={
@@ -1695,6 +1701,8 @@ This action cannot be undone.`}
         cancelLabel="Cancel"
         actionKey={isBulkDelete ? 'delete-channels' : 'delete-channel'}
         onSuppressChange={suppressWarning}
+        showStopStreamOption
+        stopStreamLabel="Also stop active stream if playing"
         size="md"
       />
     </>
diff --git a/frontend/src/components/tables/__tests__/ChannelsTable.test.jsx b/frontend/src/components/tables/__tests__/ChannelsTable.test.jsx
index d874f874..993659e9 100644
--- a/frontend/src/components/tables/__tests__/ChannelsTable.test.jsx
+++ b/frontend/src/components/tables/__tests__/ChannelsTable.test.jsx
@@ -200,7 +200,11 @@ vi.mock('../../ConfirmationDialog', () => ({
     opened ? (
       <div data-testid="confirm-dialog">
         <span data-testid="confirm-title">{title}</span>
-        <button data-testid="confirm-ok" onClick={onConfirm} disabled={loading}>
+        <button
+          data-testid="confirm-ok"
+          onClick={() => onConfirm()}
+          disabled={loading}
+        >
           {confirmLabel}
         </button>
         <button data-testid="confirm-cancel" onClick={onClose}>
@@ -474,6 +478,7 @@ const setupMocks = ({
   authUser = makeAdminUser(),
   isWarningSuppressed = vi.fn(() => false),
   suppressWarning = vi.fn(),
+  getActionPreference = vi.fn(() => false),
   selectedProfileId = '0',
   profiles = { 0: { name: 'Default', channels: new Set() } },
   pageCount = 1,
@@ -532,7 +537,7 @@ const setupMocks = ({
   );
 
   vi.mocked(useWarningsStore).mockImplementation((sel) =>
-    sel({ isWarningSuppressed, suppressWarning })
+    sel({ isWarningSuppressed, suppressWarning, getActionPreference })
   );
 
   vi.mocked(useLocalStorage).mockReturnValue([{}, vi.fn()]);
@@ -820,10 +825,26 @@ describe('ChannelsTable', () => {
       render(<ChannelsTable />);
       const { getByTestId } = renderActionCell(channel, tableInstance);
       fireEvent.click(getByTestId('icon-square-minus').closest('button'));
-      await waitFor(() => expect(deleteChannel).toHaveBeenCalledWith(7));
+      await waitFor(() =>
+        expect(deleteChannel).toHaveBeenCalledWith(7, { stopStream: false })
+      );
       expect(screen.queryByTestId('confirm-dialog')).not.toBeInTheDocument();
     });
 
+    it('uses saved stopStream preference when warning is suppressed', async () => {
+      const channel = makeChannel({ id: 8 });
+      const { tableInstance } = setupMocks({
+        isWarningSuppressed: vi.fn(() => true),
+        getActionPreference: vi.fn(() => true),
+      });
+      render(<ChannelsTable />);
+      const { getByTestId } = renderActionCell(channel, tableInstance);
+      fireEvent.click(getByTestId('icon-square-minus').closest('button'));
+      await waitFor(() =>
+        expect(deleteChannel).toHaveBeenCalledWith(8, { stopStream: true })
+      );
+    });
+
     it('calls deleteChannel when confirm dialog is confirmed', async () => {
       const channel = makeChannel({ id: 5 });
       const { tableInstance } = setupMocks({
@@ -833,7 +854,9 @@ describe('ChannelsTable', () => {
       const { getByTestId } = renderActionCell(channel, tableInstance);
       fireEvent.click(getByTestId('icon-square-minus').closest('button'));
       fireEvent.click(screen.getByTestId('confirm-ok'));
-      await waitFor(() => expect(deleteChannel).toHaveBeenCalledWith(5));
+      await waitFor(() =>
+        expect(deleteChannel).toHaveBeenCalledWith(5, { stopStream: false })
+      );
     });
 
     it('calls requeryChannels after deleteChannel succeeds', async () => {
@@ -913,7 +936,9 @@ describe('ChannelsTable', () => {
       render(<ChannelsTable />);
       fireEvent.click(screen.getByTestId('header-delete-channels'));
       fireEvent.click(screen.getByTestId('confirm-ok'));
-      await waitFor(() => expect(deleteChannels).toHaveBeenCalledWith([1, 2]));
+      await waitFor(() =>
+        expect(deleteChannels).toHaveBeenCalledWith([1, 2], { stopStream: false })
+      );
     });
 
     it('awaits requeryChannels before clearing bulk selection', async () => {
@@ -939,7 +964,9 @@ describe('ChannelsTable', () => {
       fireEvent.click(screen.getByTestId('header-delete-channels'));
       fireEvent.click(screen.getByTestId('confirm-ok'));
 
-      await waitFor(() => expect(deleteChannels).toHaveBeenCalledWith([1, 2]));
+      await waitFor(() =>
+        expect(deleteChannels).toHaveBeenCalledWith([1, 2], { stopStream: false })
+      );
       expect(requeryChannels).toHaveBeenCalled();
       expect(setSelectedTableIds).not.toHaveBeenCalled();
 
@@ -961,7 +988,9 @@ describe('ChannelsTable', () => {
       });
       render(<ChannelsTable />);
       fireEvent.click(screen.getByTestId('header-delete-channels'));
-      await waitFor(() => expect(deleteChannels).toHaveBeenCalledWith([1, 2]));
+      await waitFor(() =>
+        expect(deleteChannels).toHaveBeenCalledWith([1, 2], { stopStream: false })
+      );
       expect(screen.queryByTestId('confirm-dialog')).not.toBeInTheDocument();
     });
   });
diff --git a/frontend/src/store/__tests__/warnings.test.jsx b/frontend/src/store/__tests__/warnings.test.jsx
index 500fbd8c..ec01cf0d 100644
--- a/frontend/src/store/__tests__/warnings.test.jsx
+++ b/frontend/src/store/__tests__/warnings.test.jsx
@@ -6,6 +6,7 @@ describe('useWarningsStore', () => {
   beforeEach(() => {
     useWarningsStore.setState({
       suppressedWarnings: {},
+      actionPreferences: {},
     });
   });
 
@@ -13,6 +14,7 @@ describe('useWarningsStore', () => {
     const { result } = renderHook(() => useWarningsStore());
 
     expect(result.current.suppressedWarnings).toEqual({});
+    expect(result.current.actionPreferences).toEqual({});
   });
 
   it('should suppress a warning', () => {
@@ -192,4 +194,36 @@ describe('useWarningsStore', () => {
     expect(result.current.isWarningSuppressed('action2')).toBe(false);
     expect(result.current.isWarningSuppressed('action3')).toBe(false);
   });
+
+  it('should store and read action preferences', () => {
+    const { result } = renderHook(() => useWarningsStore());
+
+    expect(result.current.getActionPreference('delete-channel', 'stopStream')).toBe(
+      false
+    );
+
+    act(() => {
+      result.current.setActionPreference('delete-channel', { stopStream: true });
+    });
+
+    expect(
+      result.current.getActionPreference('delete-channel', 'stopStream')
+    ).toBe(true);
+    expect(
+      result.current.getActionPreference('delete-channels', 'stopStream', false)
+    ).toBe(false);
+  });
+
+  it('should clear action preferences when resetSuppressions is called', () => {
+    const { result } = renderHook(() => useWarningsStore());
+
+    act(() => {
+      result.current.suppressWarning('delete-channel');
+      result.current.setActionPreference('delete-channel', { stopStream: true });
+      result.current.resetSuppressions();
+    });
+
+    expect(result.current.suppressedWarnings).toEqual({});
+    expect(result.current.actionPreferences).toEqual({});
+  });
 });
diff --git a/frontend/src/store/warnings.jsx b/frontend/src/store/warnings.jsx
index 59f5f157..02b2d3d6 100644
--- a/frontend/src/store/warnings.jsx
+++ b/frontend/src/store/warnings.jsx
@@ -1,12 +1,16 @@
 import { create } from 'zustand';
 
-const useWarningsStore = create((set) => ({
+const useWarningsStore = create((set, get) => ({
   // Map of action keys to whether they're suppressed
   suppressedWarnings: {},
 
+  // Optional per-action preferences remembered with confirmations
+  // e.g. { 'delete-channel': { stopStream: true } }
+  actionPreferences: {},
+
   // Function to check if a warning is suppressed
   isWarningSuppressed: (actionKey) => {
-    const state = useWarningsStore.getState();
+    const state = get();
     return state.suppressedWarnings[actionKey] === true;
   },
 
@@ -20,9 +24,32 @@ const useWarningsStore = create((set) => ({
     }));
   },
 
+  setActionPreference: (actionKey, preference) => {
+    if (!actionKey || !preference || typeof preference !== 'object') {
+      return;
+    }
+    set((state) => ({
+      actionPreferences: {
+        ...state.actionPreferences,
+        [actionKey]: {
+          ...(state.actionPreferences[actionKey] || {}),
+          ...preference,
+        },
+      },
+    }));
+  },
+
+  getActionPreference: (actionKey, key, defaultValue = false) => {
+    const prefs = get().actionPreferences[actionKey];
+    if (!prefs || !(key in prefs)) {
+      return defaultValue;
+    }
+    return prefs[key];
+  },
+
   // Function to reset all suppressions
   resetSuppressions: () => {
-    set({ suppressedWarnings: {} });
+    set({ suppressedWarnings: {}, actionPreferences: {} });
   },
 }));
 
diff --git a/frontend/src/utils/tables/ChannelsTableUtils.js b/frontend/src/utils/tables/ChannelsTableUtils.js
index 725e3818..22e05aed 100644
--- a/frontend/src/utils/tables/ChannelsTableUtils.js
+++ b/frontend/src/utils/tables/ChannelsTableUtils.js
@@ -107,11 +107,11 @@ export const hdhrUrlBase = `${window.location.protocol}//${window.location.host}
 export const reorderChannel = (channelId, insertAfterId) => {
   return API.reorderChannel(channelId, insertAfterId);
 };
-export const deleteChannel = (id) => {
-  return API.deleteChannel(id);
+export const deleteChannel = (id, options = {}) => {
+  return API.deleteChannel(id, options);
 };
-export const deleteChannels = (channelIds) => {
-  return API.deleteChannels(channelIds);
+export const deleteChannels = (channelIds, options = {}) => {
+  return API.deleteChannels(channelIds, options);
 };
 export const queryChannels = (params) => {
   return API.queryChannels(params);
diff --git a/frontend/src/utils/tables/__tests__/ChannelsTableUtils.test.js b/frontend/src/utils/tables/__tests__/ChannelsTableUtils.test.js
index e71637a4..04496c03 100644
--- a/frontend/src/utils/tables/__tests__/ChannelsTableUtils.test.js
+++ b/frontend/src/utils/tables/__tests__/ChannelsTableUtils.test.js
@@ -576,12 +576,24 @@ describe('ChannelsTableUtils', () => {
 
     it('deleteChannel calls API.deleteChannel', () => {
       ChannelsTableUtils.deleteChannel(5);
-      expect(API.deleteChannel).toHaveBeenCalledWith(5);
+      expect(API.deleteChannel).toHaveBeenCalledWith(5, {});
+    });
+
+    it('deleteChannel forwards stopStream option', () => {
+      ChannelsTableUtils.deleteChannel(5, { stopStream: true });
+      expect(API.deleteChannel).toHaveBeenCalledWith(5, { stopStream: true });
     });
 
     it('deleteChannels calls API.deleteChannels', () => {
       ChannelsTableUtils.deleteChannels([1, 2, 3]);
-      expect(API.deleteChannels).toHaveBeenCalledWith([1, 2, 3]);
+      expect(API.deleteChannels).toHaveBeenCalledWith([1, 2, 3], {});
+    });
+
+    it('deleteChannels forwards stopStream option', () => {
+      ChannelsTableUtils.deleteChannels([1, 2], { stopStream: true });
+      expect(API.deleteChannels).toHaveBeenCalledWith([1, 2], {
+        stopStream: true,
+      });
     });
 
     it('queryChannels calls API.queryChannels', () => {