Refactor global chrome to remove never-rendered config component

Author: pimterry

src/components/intercept/config/existing-browser-config.tsx

@@ -1,64 +1,42 @@
-import * as React from 'react';
-import { observer } from 'mobx-react';
-import { observable } from 'mobx';
 import dedent from 'dedent';
 
 import { Interceptor } from '../../../model/interception/interceptors';
 
-@observer
-class ExistingBrowserConfig extends React.Component<{
+export async function onActivateExistingBrowser(
     interceptor: Interceptor,
     activateInterceptor: (
         options: { closeConfirmed?: true },
         shouldTrackEvent?: false
     ) => Promise<void>,
     reportStarted: () => void,
     reportSuccess: (options?: { showRequests?: boolean }) => void,
-    closeSelf: () => void
-}> {
-
-    async componentDidMount() {
-        const { activateInterceptor, reportStarted, reportSuccess, closeSelf } = this.props;
-        closeSelf(); // We immediately unmount, but continue activating:
-
-        try {
-            // Try to activate, assuming the browser isn't currently open:
-            await activateInterceptor({}, false);
-
-            // Only it runs without confirmation does this count as an activation
-            reportStarted();
-        } catch (error: any) {
-            if (!error.metadata || error.metadata.closeConfirmRequired !== true) {
-                // This is a real error, not a confirmation requirement.
-
-                reportStarted(); // Track that this started, before it fails
-                throw error;
-            }
-
-            // If the browser is open, confirm that we can kill & restart it first:
-            const confirmed = confirm(dedent`
-                Your browser is currently open, and needs to be
-                restarted to enable interception. Restart it now?
-            `.replace('\n', ' '));
-
-            // If cancelled, we silently do nothing
-            if (!confirmed) return;
-
-            reportStarted();
-            await activateInterceptor({ closeConfirmed: true });
+) {
+    try {
+        // Try to activate, assuming the browser isn't currently open:
+        await activateInterceptor({}, false);
+
+        // Only it runs without confirmation does this count as an activation
+        reportStarted();
+    } catch (error: any) {
+        if (!error.metadata || error.metadata.closeConfirmRequired !== true) {
+            // This is a real error, not a confirmation requirement.
+
+            reportStarted(); // Track that this started, before it fails
+            throw error;
         }
 
-        reportSuccess();
-    }
+        // If the browser is open, confirm that we can kill & restart it first:
+        const confirmed = confirm(dedent`
+            Your browser is currently open, and needs to be
+            restarted to enable interception. Restart it now?
+        `.replace('\n', ' '));
 
-    render() {
-        return null; // This never actually displays - we just mount, confirm, and close
-    }
+        // If cancelled, we silently do nothing
+        if (!confirmed) return;
 
-}
+        reportStarted();
+        await activateInterceptor({ closeConfirmed: true });
+    }
 
-export const ExistingBrowserCustomUi = {
-    columnWidth: 1,
-    rowHeight: 1,
-    configComponent: ExistingBrowserConfig
-};
+    reportSuccess();
+}

src/components/intercept/intercept-option.tsx

@@ -51,6 +51,14 @@ export interface InterceptorCustomUiConfig {
     customPill?: React.ComponentType<{}>;
 }
 
+// A function with the same types as a custom config component, but none of the UI:
+export type CustomActivationFunction = (
+    interceptor: Interceptor,
+    activateInterceptor: (activationOptions?: any) => Promise<any>,
+    reportStarted: (options?: { idSuffix?: string }) => void,
+    reportSuccess: (options?: { showRequests?: boolean, idSuffix?: string }) => void
+) => Promise<void>;
+
 const BackgroundIcons = styled.div`
     z-index: 0;
 
@@ -341,6 +349,14 @@ export class InterceptOption extends React.Component<InterceptOptionProps> {
                     behavior: 'smooth'
                 });
             });
+        } else if (interceptor.customActivation) {
+            onActivationStarted();
+            interceptor.customActivation(
+                interceptor,
+                this.activateInterceptor,
+                onActivationStarted,
+                onActivationSuccessful
+            ).catch((e) => logError(e));
         } else {
             onActivationStarted();
             activateInterceptor(interceptor.activationOptions)

src/model/interception/interceptors.ts

@@ -9,14 +9,14 @@ import {
 import { IconProps, SourceIcons } from "../../icons";
 import { AccountStore } from "../account/account-store";
 
-import { InterceptorCustomUiConfig } from "../../components/intercept/intercept-option";
+import { CustomActivationFunction, InterceptorCustomUiConfig } from "../../components/intercept/intercept-option";
 import { ManualInterceptCustomUi } from "../../components/intercept/config/manual-intercept-config";
 import { ExistingTerminalCustomUi } from "../../components/intercept/config/existing-terminal-config";
 import { ElectronCustomUi } from '../../components/intercept/config/electron-config';
 import { AndroidDeviceCustomUi } from "../../components/intercept/config/android-device-config";
 import { AndroidAdbCustomUi } from "../../components/intercept/config/android-adb-config";
 import { FridaCustomUi } from "../../components/intercept/config/frida-config";
-import { ExistingBrowserCustomUi } from "../../components/intercept/config/existing-browser-config";
+import { onActivateExistingBrowser } from "../../components/intercept/config/existing-browser-config";
 import { JvmCustomUi } from "../../components/intercept/config/jvm-config";
 import { DockerAttachCustomUi } from "../../components/intercept/config/docker-attach-config";
 import { ManualIOSCustomUi } from "../../components/intercept/config/manual-ios-config";
@@ -34,6 +34,7 @@ interface InterceptorConfig {
         serverVersion?: string
     }) => boolean;
     uiConfig?: InterceptorCustomUiConfig;
+    customActivation?: CustomActivationFunction,
     getActivationOptions?: (options: {
         accountStore: AccountStore,
         serverVersion?: string
@@ -91,7 +92,7 @@ const INTERCEPT_OPTIONS: _.Dictionary<InterceptorConfig> = {
             "Intercept your main Chrome profile globally",
             "This captures all default Chrome traffic, so may interfere with normal usage"
         ],
-        uiConfig: ExistingBrowserCustomUi,
+        customActivation: onActivateExistingBrowser,
         iconProps: [
             SourceIcons.Chrome,
             { icon: ['fas', 'globe'], color: '#fafafa', size: '2x' }