Add submithooks to the providers section of the settings page

frontend/src/pages/Settings/Providers/components.tsx

@@ -28,6 +28,10 @@ import {
   useStagedValues,
 } from "../utilities/FormValues";
 import { useSettingValue } from "../utilities/hooks";
+import {
+  SubmitHooksProvider,
+  useSubmitHooksSource,
+} from "../utilities/HooksProvider";
 import { SettingsProvider, useSettings } from "../utilities/SettingsProvider";
 import { ProviderInfo, ProviderList } from "./list";
 
@@ -129,6 +133,8 @@ const ProviderTool: FunctionComponent<ProviderToolProps> = ({
     },
   });
 
+  const submitHooks = useSubmitHooksSource();
+
   const deletePayload = useCallback(() => {
     if (payload && enabledProviders) {
       const idx = enabledProviders.findIndex((v) => v === payload.key);
@@ -152,11 +158,14 @@ const ProviderTool: FunctionComponent<ProviderToolProps> = ({
           changes[ProviderKey] = newProviders;
         }
 
+        // Apply submit hooks
+        submitHooks.invoke(changes);
+
         onChangeRef.current(changes);
         modals.closeAll();
       }
     },
-    [info, enabledProviders, modals]
+    [info, enabledProviders, submitHooks, modals]
   );
 
   const canSave = info !== null;
@@ -249,6 +258,7 @@ const ProviderTool: FunctionComponent<ProviderToolProps> = ({
   return (
     <SettingsProvider value={settings}>
       <FormContext.Provider value={form}>
+        <SubmitHooksProvider value={submitHooks}>
           <Stack>
             <Stack spacing="xs">
               <Selector
@@ -281,6 +291,7 @@ const ProviderTool: FunctionComponent<ProviderToolProps> = ({
               </Button>
             </Group>
           </Stack>
+        </SubmitHooksProvider>
       </FormContext.Provider>
     </SettingsProvider>
   );