Exposing 'localModeUnavailable' to the frontend (#7390)

* expose localModeUnavailable

* adapt frontend

* update gen file

* [autofix.ci] apply automated fixes

* add default description

* style

* use 'localModeUnavailable' to check

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

mitmproxy/tools/web/app.py

@@ -655,6 +655,7 @@ class State(RequestHandler):
                 s.mode.full_spec: s.to_json() for s in master.proxyserver.servers
             },
             "platform": sys.platform,
+            "localModeUnavailable": mitmproxy_rs.local.LocalRedirector.unavailable_reason(),
         }
 
     def get(self):

web/gen/state_js.py

@@ -50,6 +50,7 @@ async def make() -> str:
     data["contentViews"] = ["Auto", "Raw"]
     data["version"] = "1.2.3"
     data["platform"] = "darwin"
+    data["localModeUnavailable"] = None
 
     # language=TypeScript
     content = (

web/src/js/__tests__/ducks/_tbackendstate.ts

@@ -7,6 +7,7 @@ export function TBackendState(): Required<BackendState> {
             "Auto",
             "Raw"
         ],
+        "localModeUnavailable": null,
         "platform": "darwin",
         "servers": {
             "regular": {

web/src/js/components/Modes.tsx

@@ -11,7 +11,10 @@ import Dns from "./Modes/Dns";
 import MissingMode from "./Modes/MissingMode";
 
 export default function Modes() {
-    const platform = useAppSelector((state) => state.backendState.platform);
+    const { platform, localModeUnavailable } = useAppSelector(
+        (state) => state.backendState,
+    );
+
     return (
         <div className="modes">
             <h2>Intercept Traffic</h2>
@@ -21,14 +24,13 @@ export default function Modes() {
                 <h3>Recommended</h3>
                 <div className="modes-container">
                     <Regular />
-                    {platform.startsWith("win32") ||
-                    platform.startsWith("darwin") ? (
-                        <Local />
-                    ) : (
+                    {localModeUnavailable !== null ? (
                         <MissingMode
                             title="Local Redirect Mode"
-                            description="This mode is only supported on Windows and MacOS."
+                            description={localModeUnavailable}
                         />
+                    ) : (
+                        <Local />
                     )}
                     <Wireguard />
                     <Reverse />

web/src/js/ducks/backendState.ts

@@ -25,6 +25,7 @@ export interface BackendState {
     contentViews: string[];
     servers: { [key: string]: ServerInfo };
     platform: string;
+    localModeUnavailable: string | null;
 }
 
 export const defaultState: BackendState = {
@@ -33,6 +34,7 @@ export const defaultState: BackendState = {
     contentViews: [],
     servers: {},
     platform: "",
+    localModeUnavailable: null,
 };
 
 export function mockUpdate(newState: Partial<BackendState>) {