Bug 1505128 - Add feature to disconnect from a device, r=ladybenko,daisuke

Added disconnect from device funtion + button to be displayed in runtime page when device is connected

Differential Revision: https://phabricator.services.mozilla.com/D18588

--HG--
extra : moz-landing-system : lando

devtools/client/aboutdebugging-new/src/actions/runtimes.js

@@ -148,7 +148,7 @@ function createThisFirefoxRuntime() {
   };
 }
 
-function disconnectRuntime(id) {
+function disconnectRuntime(id, shouldRedirect = false) {
   return async (dispatch, getState) => {
     dispatch({ type: DISCONNECT_RUNTIME_START });
     try {
@@ -163,8 +163,10 @@ function disconnectRuntime(id) {
       if (runtime.type !== RUNTIMES.THIS_FIREFOX) {
         clientWrapper.removeListener("closed", onRemoteDebuggerClientClosed);
       }
-
       await clientWrapper.close();
+      if (shouldRedirect) {
+        await dispatch(Actions.selectPage(PAGE_TYPES.RUNTIME, RUNTIMES.THIS_FIREFOX));
+      }
 
       dispatch({
         type: DISCONNECT_RUNTIME_SUCCESS,

devtools/client/aboutdebugging-new/src/components/RuntimeInfo.js

@@ -8,24 +8,28 @@ const { createFactory, PureComponent } = require("devtools/client/shared/vendor/
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
+const Actions = require("../actions/index");
 const FluentReact = require("devtools/client/shared/vendor/fluent-react");
 const Localized = createFactory(FluentReact.Localized);
 
+const { RUNTIMES } = require("../constants");
+
 /**
  * This component displays runtime information.
  */
 class RuntimeInfo extends PureComponent {
   static get propTypes() {
     return {
+      dispatch: PropTypes.func.isRequired,
       icon: PropTypes.string.isRequired,
       deviceName: PropTypes.string,
       name: PropTypes.string.isRequired,
       version: PropTypes.string.isRequired,
+      runtimeId: PropTypes.string.isRequired,
     };
   }
-
   render() {
-    const { icon, deviceName, name, version } = this.props;
+    const { icon, deviceName, name, version, runtimeId, dispatch } = this.props;
 
     return dom.h1(
       {
@@ -57,14 +61,16 @@ class RuntimeInfo extends PureComponent {
           },
           deviceName
         ) : null,
-      dom.button(
-        {
-          className: "default-button runtime-info__action",
-          // Implementation ongoing in Bug 1505128.
-          disabled: true,
-        },
-        "Disconnect"
-      )
+      runtimeId !== RUNTIMES.THIS_FIREFOX ?
+        dom.button(
+          {
+            className: "default-button runtime-info__action qa-runtime-info__action",
+            onClick() {
+              dispatch(Actions.disconnectRuntime(runtimeId, true));
+            },
+          },
+          "Disconnect"
+        ) : null,
     );
   }
 }

devtools/client/aboutdebugging-new/src/components/RuntimePage.js

@@ -174,7 +174,7 @@ class RuntimePage extends PureComponent {
       {
         className: "page js-runtime-page",
       },
-      RuntimeInfo(runtimeDetails.info),
+      RuntimeInfo({ ...runtimeDetails.info, runtimeId, dispatch }),
       RuntimeActions({ dispatch, runtimeId, runtimeDetails }),
       runtimeDetails.serviceWorkersAvailable ? null : ServiceWorkersWarning(),
       CompatibilityWarning({ compatibilityReport }),

devtools/client/aboutdebugging-new/test/browser/browser.ini

@@ -67,6 +67,7 @@ skip-if = (os == "win" && ccov) # Bug 1521349
 [browser_aboutdebugging_real_usb_sidebar.js]
 [browser_aboutdebugging_routes.js]
 [browser_aboutdebugging_runtime_compatibility_warning.js]
+[browser_aboutdebugging_runtime_disconnect_remote_runtime.js]
 [browser_aboutdebugging_runtime_remote_runtime_buttons.js]
 [browser_aboutdebugging_runtime_usbclient_closed.js]
 [browser_aboutdebugging_select_network_runtime.js]

devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_connection_prompt_setting.js

@@ -3,15 +3,19 @@
 
 "use strict";
 
+const USB_RUNTIME_ID = "1337id";
+const USB_DEVICE_NAME = "Fancy Phone";
+const USB_APP_NAME = "Lorem ipsum";
+
 /**
  * Check whether can toggle enable/disable connection prompt setting.
  */
 add_task(async function() {
   // enable USB devices mocks
   const mocks = new Mocks();
-  const runtime = mocks.createUSBRuntime("1337id", {
-    deviceName: "Fancy Phone",
-    name: "Lorem ipsum",
+  const runtime = mocks.createUSBRuntime(USB_RUNTIME_ID, {
+    deviceName: USB_DEVICE_NAME,
+    name: USB_APP_NAME,
   });
 
   info("Set initial state for test");
@@ -22,8 +26,8 @@ add_task(async function() {
   await selectThisFirefoxPage(document, window.AboutDebugging.store);
 
   mocks.emitUSBUpdate();
-  await connectToRuntime("Fancy Phone", document);
-  await selectRuntime("Fancy Phone", "Lorem ipsum", document);
+  await connectToRuntime(USB_DEVICE_NAME, document);
+  await selectRuntime(USB_DEVICE_NAME, USB_APP_NAME, document);
 
   info("Check whether connection prompt toggle button exists");
   let connectionPromptToggleButton =

devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_runtime_disconnect_remote_runtime.js

@@ -0,0 +1,48 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const USB_RUNTIME_ID = "1337id";
+const USB_DEVICE_NAME = "Fancy Phone";
+const USB_APP_NAME = "Lorem ipsum";
+
+const DEFAULT_PAGE = "#/runtime/this-firefox";
+
+/**
+ * Check if the disconnect button disconnects the remote runtime
+ * and redirects to the default page.
+ */
+add_task(async function() {
+  // enable USB devices mocks
+  const mocks = new Mocks();
+  mocks.createUSBRuntime(USB_RUNTIME_ID, {
+    deviceName: USB_DEVICE_NAME,
+    name: USB_APP_NAME,
+  });
+
+  const { document, tab, window } = await openAboutDebugging();
+  await selectThisFirefoxPage(document, window.AboutDebugging.store);
+
+  mocks.emitUSBUpdate();
+  await connectToRuntime(USB_DEVICE_NAME, document);
+  await selectRuntime(USB_DEVICE_NAME, USB_APP_NAME, document);
+
+  const disconnectRemoteRuntimeButton =
+  document.querySelector(".qa-runtime-info__action");
+
+  info("Check whether disconnect remote runtime button exists");
+  ok(!!disconnectRemoteRuntimeButton,
+    "Runtime contains the disconnect button");
+
+  info("Click on the disconnect button");
+  disconnectRemoteRuntimeButton.click();
+
+  info("Wait until the runtime is disconnected");
+  await waitUntil(() => document.querySelector(".js-connect-button"));
+
+  is(document.location.hash, DEFAULT_PAGE,
+    "Redirection to the default page (this-firefox)");
+
+  await removeTab(tab);
+});

devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_runtime_remote_runtime_buttons.js

@@ -3,15 +3,19 @@
 
 "use strict";
 
+const USB_RUNTIME_ID = "1337id";
+const USB_DEVICE_NAME = "Fancy Phone";
+const USB_APP_NAME = "Lorem ipsum";
+
 /**
  * Test that remote runtimes show action buttons that are hidden for 'This Firefox'.
  */
 add_task(async function() {
   // enable USB devices mocks
   const mocks = new Mocks();
-  mocks.createUSBRuntime("1337id", {
-    deviceName: "Fancy Phone",
-    name: "Lorem ipsum",
+  mocks.createUSBRuntime(USB_RUNTIME_ID, {
+    deviceName: USB_DEVICE_NAME,
+    name: USB_APP_NAME,
   });
 
   const { document, tab, window } = await openAboutDebugging();
@@ -22,15 +26,19 @@ add_task(async function() {
     "This Firefox does not contain the connection prompt button");
   ok(!document.querySelector(".js-profile-runtime-button"),
     "This Firefox does not contain the profile runtime button");
+  ok(!document.querySelector(".qa-runtime-info__action"),
+    "This Firefox does not contain the disconnect button");
 
   info("Checking a USB runtime");
   mocks.emitUSBUpdate();
-  await connectToRuntime("Fancy Phone", document);
-  await selectRuntime("Fancy Phone", "Lorem ipsum", document);
+  await connectToRuntime(USB_DEVICE_NAME, document);
+  await selectRuntime(USB_DEVICE_NAME, USB_APP_NAME, document);
   ok(!!document.querySelector(".js-connection-prompt-toggle-button"),
     "Runtime contains the connection prompt button");
   ok(!!document.querySelector(".js-profile-runtime-button"),
     "Remote runtime contains the profile runtime button");
+  ok(!!document.querySelector(".qa-runtime-info__action"),
+    "Runtime contains the disconnect button");
 
   await removeTab(tab);
 });