Fix deeplink parsing issue and device plugin highlighting

Summary:
This diff fixes an issue where the selected device was not correctly updated when selecting a device plugin, causing the wrong plugin, or none at all, to be highlighted.

This diff fixes an issue where deeplinks were not correctly parsed if formatted as shown in the test plan of D20920587 (it was a different format in the recording, but after looking into it, using `plugin?params` instead of `plugin/?params` is the natural thing to do, so we now support both)

Reviewed By: jknoxville

Differential Revision: D21154190

fbshipit-source-id: c31132aaf7213ee1c3c188a6a1cf2b6bcc7b5b00

desktop/app/src/dispatcher/__tests__/deeplinkURLParsing.node.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import {uriComponents} from '../application.tsx';
+import {uriComponents} from '../application';
 
 test('test parsing of deeplink URL', () => {
   const url = 'flipper://app/plugin/meta/data';
@@ -22,6 +22,7 @@ test('test parsing of deeplink URL when arguments are less', () => {
 });
 
 test('test parsing of deeplink URL when url is null', () => {
+  // @ts-ignore
   const components = uriComponents(null);
   expect(components).toEqual([]);
 });
@@ -31,3 +32,15 @@ test('test parsing of deeplink URL when pattern does not match', () => {
   const components = uriComponents(url);
   expect(components).toEqual([]);
 });
+
+test('test parsing of deeplinkURL when there are query params', () => {
+  const url = 'flipper://null/React/?device=React%20Native';
+  const components = uriComponents(url);
+  expect(components).toEqual(['null', 'React', '?device=React Native']);
+});
+
+test('test parsing of deeplinkURL when there are query params without slash', () => {
+  const url = 'flipper://null/React?device=React%20Native';
+  const components = uriComponents(url);
+  expect(components).toEqual(['null', 'React', '?device=React Native']);
+});

desktop/app/src/dispatcher/application.tsx

@@ -32,7 +32,7 @@ export const uriComponents = (url: string): Array<string> => {
     return [];
   }
   const match: Array<string> | undefined | null = url.match(
-    /^flipper:\/\/([^\/]*)\/([^\/]*)\/?(.*)$/,
+    /^flipper:\/\/([^\/]*)\/([^\/\?]*)\/?(.*)$/,
   );
   if (match) {
     return match.map(decodeURIComponent).slice(1).filter(Boolean);

desktop/app/src/reducers/connections.tsx

@@ -241,10 +241,7 @@ const reducer = (state: State = INITAL_STATE, action: Actions): State => {
     case 'SELECT_PLUGIN': {
       const {payload} = action;
       const {selectedPlugin, selectedApp, deepLinkPayload} = payload;
-      let selectedDevice =
-        selectedApp === null
-          ? null
-          : payload.selectedDevice || state.selectedDevice;
+      let selectedDevice = payload.selectedDevice;
       if (deepLinkPayload) {
         const deepLinkParams = new URLSearchParams(deepLinkPayload || '');
         const deviceParam = deepLinkParams.get('device');