Improve Functionality of Remote Execution Device Dialog

[RichDom2185]

Description

Added a new dependency: "react-qr-reader": "^3.0.0-beta-1"

This MR includes various enhancements to the remote execution UI. Mainly, it is done to improve quality-of-life and the out-of-the box experience when pairing with a new device.

Summary of changes:

• Add ability to scan a QR code from the dialog in lieu of manually pasting/typing out the device secret
• Add support for "deep links", where a dialog box (pre-filled) with the device secret will pop up when the accessing SA via the deep link
• Enable the "remote execution" tab in the mobile workspace
• Minor refactoring, code quality improvements and UI fixes

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update
• Code quality improvements

How to test

• http://localhost:8000/playground should retain existing behaviour, the only difference being on mobile, where the button to show the remote execution tab would also be visible
• http://localhost:8000/playground?add_device=some_string_here_a7Gxa should open the playground directly into the remote execution tab (instead of the home tab), as well as automatically pop-up the add device dialog, pre-filled with the token (some_string_here_a7Gxa). At the same time, the address bar will not show the query parameter in the URL.
  • Closing/cancelling/confirming the dialog (or refreshing the page) should not cause it the dialog to pop up again. There was a bug whereby this would happen after resizing a window, when the playground switches between and mobile and desktop workspaces. This was fixed in commit e9d81fb.
• The add device dialog should now have a button to scan a QR code:
  
  This button should not be visible when editing a device, as the secret token is not editable in the case of editing. After clicking the button and accepting camera permissions, a camera window is shown, and the user can then start to scan the QR code. Clicking the button again will stop the camera. The camera will also auto-close once it detects and scans a QR code.
  
  Once the camera has scanned a QR code, it will pre-fill the value into the 'secret' field, overriding any previous value that may be there. This field should remain editable by the user.

Checklist

• I have tested this code
• I have updated the documentation (not applicable)

[coveralls]

Pull Request Test Coverage Report for Build 3056210332

Warning: This coverage report may be inaccurate.

This pull request's base commit is no longer the HEAD commit of its target branch. This means it includes changes from outside the original pull request, including, potentially, unrelated coverage changes.

• For more information on this, see Tracking coverage changes with pull request builds.
• To avoid this issue with future PRs, see these Recommended CI Configurations.
• For a quick fix, rebase this PR at GitHub. Your next report should be accurate.

Details

• 2 of 31 (6.45%) changed or added relevant lines in 3 files are covered.
• 3 unchanged lines in 2 files lost coverage.
• Overall coverage decreased (-0.08%) to 33.578%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/commons/sideContent/SideContentRemoteExecution.tsx	0	6	0.0%
src/features/remoteExecution/RemoteExecutionDeviceDialog.tsx	0	8	0.0%
src/pages/playground/Playground.tsx	2	17	11.76%

Files with Coverage Reduction	New Missed Lines	%
src/features/remoteExecution/RemoteExecutionDeviceDialog.tsx	1	0.0%
src/pages/playground/Playground.tsx	2	3.59%

Totals
Change from base Build 3053765714:	-0.08%
Covered Lines:	4282
Relevant Lines:	11907

---

💛 - Coveralls

[chownces]

LGTM. Btw @ianyong I just realised the mobile refactor was done on your feature branch, and this PR will most likely result in a merge conflict. I will be merging this first, as the Robot missions will be starting soon. Thanks!

[ianyong]

LGTM. Btw @ianyong I just realised the mobile refactor was done on your feature branch, and this PR will most likely result in a merge conflict. I will be merging this first, as the Robot missions will be starting soon. Thanks!

Ok,, thanks for the heads up!