Feature/176 root detection pt2 (#338)

* Adapted wording, do not show connection toast when checking for ADB
* Show Error message when ADB detection failed. Persist this error messages between screens.

src/features/device/AdbDetectionError.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import { useTranslation } from "react-i18next";
+
+import Alert from "@mui/material/Alert";
+
+import { selectAdbDetectionFailed } from "./deviceSlice";
+
+export default function AdbDetectionError() {
+  const { t } = useTranslation("common");
+  const adbDetectionFailed = useSelector(selectAdbDetectionFailed);
+
+  if(!adbDetectionFailed) {
+    return null;
+  }
+
+  return (
+    <Alert severity="error">
+      {t("adbDetectionFailed")}
+    </Alert>
+  );
+}

src/features/device/Device.jsx

@@ -12,9 +12,14 @@ import Spinner from "../loading/Spinner";
 import Webusb from "../disclaimer/Webusb";
 import Udev from "../disclaimer/Udev";
 
+import AdbDetectionError from "./AdbDetectionError";
+
 import { isLinux } from "../../utils/Os";
 
-import { selectRebooting } from "./deviceSlice";
+import {
+  selectAdbDetectionFailed,
+  selectRebooting,
+} from "./deviceSlice";
 
 export default function Device({
   adbDetection,
@@ -27,6 +32,7 @@ export default function Device({
   const tc = translation.t;
 
   const isRebooting = useSelector(selectRebooting);
+  const adbConnectionFailed = useSelector(selectAdbDetectionFailed);
 
   let content = (
     <Stack
@@ -38,14 +44,16 @@ export default function Device({
       {!window.navigator.usb &&
         <Webusb />}
 
+      <AdbDetectionError />
+
       {adbDetection &&
-        <Alert severity="info" >
+        <Alert severity="info">
           <Typography>
             {tc("adbCheck")}
           </Typography>
         </Alert>}
 
-      { !error && window.navigator.usb &&
+      {!error && window.navigator.usb && !adbDetection && !adbConnectionFailed &&
         <Alert severity="warning">
           <Typography>
             {t("warningConnection")}
@@ -62,7 +70,7 @@ export default function Device({
       { isLinux() &&
         <Udev />}
 
-      {!adbDetection &&
+      {!adbDetection && !adbConnectionFailed &&
         <ConnectButton onClick={handleDeviceConnect} />}
     </Stack>
   );

src/features/device/deviceSlice.js

@@ -21,6 +21,7 @@ const initialState = {
   productType:null,
   niceName: null,
   claimed: false,
+  adbDetectionFailed: false,
 };
 
 export const checkBinaries = createAsyncThunk(
@@ -82,6 +83,9 @@ export const deviceSlice = createSlice({
     setAdb: (state, action) => {
       state.hasAdb = action.payload;
     },
+    setAdbDetectionFailed: (state, action) => {
+      state.adbDetectionFailed = action.payload;
+    },
     setTemperature: (state, action) => {
       state.temperature = action.payload;
     },
@@ -149,13 +153,15 @@ export const {
   rebooting,
   reset,
   setAdb,
+  setAdbDetectionFailed,
   setClaimed,
   setLog,
   setProductInfo,
   setTemperature,
 } = deviceSlice.actions;
 
 export const selectHasAdb = (state) => state.device.hasAdb;
+export const selectAdbDetectionFailed = (state) => state.device.adbDetectionFailed;
 export const selectChecked = (state) => state.device.checked;
 export const selectClaimed = (state) => state.device.claimed;
 export const selectConnected = (state) => state.device.connected;

src/features/root/Root.jsx

@@ -25,6 +25,7 @@ import Donate from "../donate/Donate";
 import Header from "../navigation/Header";
 import Log from "../log/Log";
 import Webusb from "../disclaimer/Webusb";
+import AdbDetectionError from "../device/AdbDetectionError";
 
 import { selectCanClaim } from "../tabGovernor/tabGovernorSlice";
 
@@ -52,6 +53,7 @@ import {
   selectClaimed,
   selectHasAdb,
   setClaimed,
+  setAdbDetectionFailed,
 } from "../device/deviceSlice";
 
 import { selectDisclaimersStatus } from "../settings/settingsSlice";
@@ -269,6 +271,7 @@ export default function Root() {
                 try {
                   exploit.closePort();
                   dispatch(setClaimed(false));
+                  dispatch(setAdbDetectionFailed(false));
                 } catch(e) {
                   console.log("Failed closing port:", e);
                 }
@@ -494,6 +497,8 @@ export default function Root() {
           {!window.navigator.serial &&
             <Webusb />}
 
+          <AdbDetectionError />
+
           {!disclaimersStatus &&
             <>
               <Alert severity="error">

src/features/router/Adb.jsx

@@ -38,9 +38,11 @@ import {
   contextReset,
   reset as resetDevice,
   setAdb as deviceSetAdb,
+  setAdbDetectionFailed,
   setProductInfo,
   setTemperature,
   setClaimed,
+  selectAdbDetectionFailed,
 } from "../device/deviceSlice";
 
 import {
@@ -57,10 +59,12 @@ export default function AdbRouter() {
 
   const isMaster = useSelector(selectIsMaster);
   const checkedMasterState = useSelector(selectCheckedMaster);
+  const adbDetectionFailed = useSelector(selectAdbDetectionFailed);
 
   const [startupCheck, setStartupCheck] = useState(false);
   const [adb, setAdb] = useState(null);
   const [adbDetection, setAdbDetection] = useState(false);
+  const [showAdbDetection, setShowAdbDetection] = useState(false);
 
   const adbRef = useRef();
   const deviceRef = useRef();
@@ -140,7 +144,7 @@ export default function AdbRouter() {
     detectionDeviceRef.current = device;
     detectionCountRef.current = 0;
 
-    if (adbDetection) {
+    if (adbDetection || adbDetectionFailed) {
       return;
     }
 
@@ -156,10 +160,13 @@ export default function AdbRouter() {
         // Device connection promised resolved
         devicePromiseRef.current = null;
         setAdbDetection(false);
+        dispatch(setAdbDetectionFailed(false));
 
         return;
       }
 
+      // Show the ADB detection banner only if it did not recognize it immediately
+      setShowAdbDetection(true);
       await timeout(interval);
       detectionCountRef.current += 1;
     } while(detectionCountRef.current < maxIteration);
@@ -170,8 +177,9 @@ export default function AdbRouter() {
      * interface does not show up immediately.
      */
     setAdbDetection(false);
+    dispatch(setAdbDetectionFailed(true));
     navigate("/root");
-  }, [adbDetection, connectToDevice, navigate, setAdbDetection]);
+  }, [adbDetection, adbDetectionFailed, connectToDevice, dispatch, navigate, setAdbDetection]);
 
   /**
    * Auto connect to ADB device if all criteria are matched.
@@ -283,6 +291,13 @@ export default function AdbRouter() {
     adbRef.current = adb;
   }, [adb]);
 
+  // Disable ADB detection banner if ADB detection has finished
+  useEffect(() => {
+    if(!adbDetection) {
+      setShowAdbDetection(false);
+    }
+  }, [adbDetection, setShowAdbDetection]);
+
   return(
     <Routes>
       <Route
@@ -304,7 +319,7 @@ export default function AdbRouter() {
         element={
           <App
             adb={adb}
-            adbDetection={adbDetection}
+            adbDetection={showAdbDetection}
             handleAdbConnectClick={handleDeviceConnect}
           />
         }

src/translations/en/common.json

@@ -3,5 +3,6 @@
   "connect": "Connect",
   "connectDevice": "Connect to Device",
   "rebooting": "Rebooting...",
-  "adbCheck": "Device found - checking for ADB, this can take a moment..."
+  "adbCheck": "Device connected - checking for ADB, this can take up to 30 seconds...",
+  "adbDetectionFailed": "Failed detecting ADB, please (re-)root your device!"
 }