diff --git a/graylog2-web-interface/src/views/components/contexts/WidgetEditApplyAllChangesProvider.tsx b/graylog2-web-interface/src/views/components/contexts/WidgetEditApplyAllChangesProvider.tsx
index bdade00ff8e1c..09548c0f58ae7 100644
--- a/graylog2-web-interface/src/views/components/contexts/WidgetEditApplyAllChangesProvider.tsx
+++ b/graylog2-web-interface/src/views/components/contexts/WidgetEditApplyAllChangesProvider.tsx
@@ -20,8 +20,6 @@ import { useContext, useRef, useCallback, useMemo } from 'react';
 import type Widget from 'views/logic/widgets/Widget';
 import UserNotification from 'util/UserNotification';
 import DisableSubmissionStateContext from 'views/components/contexts/DisableSubmissionStateContext';
-import useAppDispatch from 'stores/useAppDispatch';
-import { updateWidget } from 'views/logic/slices/widgetActions';
 import type WidgetConfig from 'views/logic/widgets/WidgetConfig';
 
 import WidgetEditApplyAllChangesContext from './WidgetEditApplyAllChangesContext';
@@ -36,18 +34,13 @@ const useBindApplyChanges = () => {
   return { applyChangesRef, bindApplyChanges };
 };
 
-type Props = {
-  widget: Widget,
-  children: React.ReactNode,
-}
-
 const useApplyAllWidgetChanges = (
   widget: Widget,
   applySearchControlsChanges: React.RefObject<(widget: Widget) => Widget>,
   applyElementConfigurationChanges: React.RefObject<(widgetConfig: WidgetConfig) => WidgetConfig>,
+  onChange: (newWidget: Widget) => Promise<void>,
 ) => {
   const { setDisabled } = useContext(DisableSubmissionStateContext);
-  const dispatch = useAppDispatch();
   const setDisableWidgetEditSubmit = useCallback(
     (disabled: boolean) => setDisabled('widget-edit-apply-all-changes', disabled),
     [setDisabled]);
@@ -77,7 +70,7 @@ const useApplyAllWidgetChanges = (
     if (hasChanges) {
       setDisableWidgetEditSubmit(true);
 
-      return dispatch(updateWidget(widget.id, newWidget))
+      return onChange(newWidget)
         .catch((error) => {
           UserNotification.error(`Applying widget changes failed with status: ${error}`);
 
@@ -86,13 +79,19 @@ const useApplyAllWidgetChanges = (
     }
 
     return Promise.resolve();
-  }, [widget, applySearchControlsChanges, applyElementConfigurationChanges, setDisableWidgetEditSubmit, dispatch]);
+  }, [widget, applySearchControlsChanges, applyElementConfigurationChanges, setDisableWidgetEditSubmit, onChange]);
 };
 
-const WidgetEditApplyAllChangesProvider = ({ children, widget }: Props) => {
+type Props = {
+  widget: Widget,
+  children: React.ReactNode,
+  onChange: (newWidget: Widget) => Promise<void>,
+}
+
+const WidgetEditApplyAllChangesProvider = ({ children, widget, onChange }: Props) => {
   const { applyChangesRef: applySearchControlsChanges, bindApplyChanges: bindApplySearchControlsChanges } = useBindApplyChanges();
   const { applyChangesRef: applyElementConfigurationChanges, bindApplyChanges: bindApplyElementConfigurationChanges } = useBindApplyChanges();
-  const applyAllWidgetChanges = useApplyAllWidgetChanges(widget, applySearchControlsChanges, applyElementConfigurationChanges);
+  const applyAllWidgetChanges = useApplyAllWidgetChanges(widget, applySearchControlsChanges, applyElementConfigurationChanges, onChange);
 
   const contextValue = useMemo(() => ({
     applyAllWidgetChanges,
diff --git a/graylog2-web-interface/src/views/components/widgets/EditWidgetFrame.test.tsx b/graylog2-web-interface/src/views/components/widgets/EditWidgetFrame.test.tsx
index 2b88aef4f6d82..f46a7777f6093 100644
--- a/graylog2-web-interface/src/views/components/widgets/EditWidgetFrame.test.tsx
+++ b/graylog2-web-interface/src/views/components/widgets/EditWidgetFrame.test.tsx
@@ -70,7 +70,7 @@ describe('EditWidgetFrame', () => {
     const renderSUT = (props?: Partial<React.ComponentProps<typeof EditWidgetFrame>>) => render((
       <TestStoreProvider>
         <WidgetContext.Provider value={widget}>
-          <EditWidgetFrame onSubmit={() => {}} onCancel={() => {}} {...props}>
+          <EditWidgetFrame onSubmit={() => {}} onCancel={() => {}} onChange={() => Promise.resolve()} {...props}>
             Hello World!
             These are some buttons!
           </EditWidgetFrame>
diff --git a/graylog2-web-interface/src/views/components/widgets/EditWidgetFrame.tsx b/graylog2-web-interface/src/views/components/widgets/EditWidgetFrame.tsx
index 635b42c50d5a2..9ce11878c2b04 100644
--- a/graylog2-web-interface/src/views/components/widgets/EditWidgetFrame.tsx
+++ b/graylog2-web-interface/src/views/components/widgets/EditWidgetFrame.tsx
@@ -53,10 +53,11 @@ type Props = {
   onCancel: () => void,
   onSubmit: () => void,
   showQueryControls?: boolean,
-  onChange: (widgetId: string, newWidget: Widget) => Promise<void>,
+  onChange: (newWidget: Widget) => Promise<void>,
+  containerComponent?: React.ComponentType<React.PropsWithChildren>
 };
 
-const EditWidgetFrame = ({ children, onCancel, onSubmit, displaySubmitActions = true, showQueryControls = true, onChange }: Props) => {
+const EditWidgetFrame = ({ children, onCancel, onSubmit, displaySubmitActions = true, showQueryControls = true, onChange, containerComponent: ContainerComponent = WidgetOverrideElements }: Props) => {
   const widget = useContext(WidgetContext);
 
   if (!widget) {
@@ -64,7 +65,7 @@ const EditWidgetFrame = ({ children, onCancel, onSubmit, displaySubmitActions =
   }
 
   return (
-    <WidgetEditApplyAllChangesProvider widget={widget}>
+    <WidgetEditApplyAllChangesProvider widget={widget} onChange={onChange}>
       <DisableSubmissionStateProvider>
         <Container>
           {(showQueryControls && !widget.returnsAllRecords) && (
@@ -75,9 +76,9 @@ const EditWidgetFrame = ({ children, onCancel, onSubmit, displaySubmitActions =
             </QueryControls>
           )}
           <Visualization role="presentation">
-            <WidgetOverrideElements>
+            <ContainerComponent>
               {children}
-            </WidgetOverrideElements>
+            </ContainerComponent>
           </Visualization>
           {displaySubmitActions && (
             <div>
diff --git a/graylog2-web-interface/src/views/components/widgets/Widget.tsx b/graylog2-web-interface/src/views/components/widgets/Widget.tsx
index 0fd2d2ae6927e..4789326f071b8 100644
--- a/graylog2-web-interface/src/views/components/widgets/Widget.tsx
+++ b/graylog2-web-interface/src/views/components/widgets/Widget.tsx
@@ -174,16 +174,15 @@ export const EditWrapper = ({
 }: EditWrapperProps) => {
   const EditComponent = useMemo(() => _editComponentForType(type), [type]);
   const hasOwnSubmitButton = _hasOwnEditSubmitButton(type);
-  const _onWidgetConfigChange = useCallback((_widgetId: string, widget: WidgetType) => {
-    onWidgetConfigChange(widget.config);
-
-    return Promise.resolve();
-  }, [onWidgetConfigChange]);
+  const dispatch = useAppDispatch();
+  const onChangeWidget = useCallback((newWidget: WidgetType) => (
+    dispatch(updateWidget(newWidget.id, newWidget)).then(() => {})
+  ), [dispatch]);
 
   return editing ? (
     <EditWidgetFrame onSubmit={onToggleEdit}
                      onCancel={onCancelEdit}
-                     onChange={_onWidgetConfigChange}
+                     onChange={onChangeWidget}
                      displaySubmitActions={!hasOwnSubmitButton}
                      showQueryControls={showQueryControls}>
       <EditComponent config={config}