From 496724fbdbc85e534572f1e12f89c4af9b88e8e6 Mon Sep 17 00:00:00 2001
From: Edmond Chui <edmondc@meta.com>
Date: Wed, 14 Feb 2024 05:20:46 -0800
Subject: [PATCH] Remove URI encoding

Summary:
Changelog: [Internal]

Fixed double-encoding for the websocket url.
`URLSearchParams` already encode the values, passing a pre-encoded `encodeUriComponent` string will cause it to double-encode, making the value unreadable when decoding once.

Missed these lines while splitting the initial diff stack.
Added tests now.

Reviewed By: motiz88

Differential Revision: D53721568

fbshipit-source-id: cfaaa7eb50c40364c904e9ffc5698201df8ab22b
---
 .../__tests__/getDevToolsFrontendUrl-test.js  | 101 ++++++++++++++++++
 .../src/utils/getDevToolsFrontendUrl.js       |   5 +-
 2 files changed, 104 insertions(+), 2 deletions(-)
 create mode 100644 packages/dev-middleware/src/__tests__/getDevToolsFrontendUrl-test.js

diff --git a/packages/dev-middleware/src/__tests__/getDevToolsFrontendUrl-test.js b/packages/dev-middleware/src/__tests__/getDevToolsFrontendUrl-test.js
new file mode 100644
index 00000000000000..103f85df0517a3
--- /dev/null
+++ b/packages/dev-middleware/src/__tests__/getDevToolsFrontendUrl-test.js
@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ * @oncall react_native
+ */
+
+import getDevToolsFrontendUrl from '../utils/getDevToolsFrontendUrl';
+
+describe('getDevToolsFrontendUrl', () => {
+  const webSocketDebuggerUrl =
+    'ws://localhost:8081/inspector/debug?device=1a9372c&page=-1';
+
+  describe('given an absolute devServerUrl', () => {
+    const devServerUrl = 'http://localhost:8081';
+
+    it('should return a valid url for all experiments off', async () => {
+      const experiments = {
+        enableNetworkInspector: false,
+        enableNewDebugger: false,
+        enableOpenDebuggerRedirect: false,
+      };
+      const actual = getDevToolsFrontendUrl(
+        experiments,
+        webSocketDebuggerUrl,
+        devServerUrl,
+      );
+      const decoded = decodeURIComponent(actual);
+      const doubleDecoded = decodeURIComponent(decoded);
+      expect(decoded).toBe(doubleDecoded);
+      expect(actual).toMatchInlineSnapshot(
+        `"http://localhost:8081/debugger-frontend/rn_inspector.html?ws=localhost%3A8081%2Finspector%2Fdebug%3Fdevice%3D1a9372c%26page%3D-1&sources.hide_add_folder=true"`,
+      );
+    });
+
+    it('should return a valid url for enableNetworkInspector experiment on', async () => {
+      const experiments = {
+        enableNetworkInspector: true,
+        enableNewDebugger: true,
+        enableOpenDebuggerRedirect: false,
+      };
+      const actual = getDevToolsFrontendUrl(
+        experiments,
+        webSocketDebuggerUrl,
+        devServerUrl,
+      );
+      const decoded = decodeURIComponent(actual);
+      const doubleDecoded = decodeURIComponent(decoded);
+      expect(decoded).toBe(doubleDecoded);
+      expect(actual).toMatchInlineSnapshot(
+        `"http://localhost:8081/debugger-frontend/rn_inspector.html?ws=localhost%3A8081%2Finspector%2Fdebug%3Fdevice%3D1a9372c%26page%3D-1&sources.hide_add_folder=true&unstable_enableNetworkPanel=true"`,
+      );
+    });
+  });
+
+  describe('given a relative devServerUrl', () => {
+    const devServerUrl = '';
+
+    it('should return a valid url for all experiments off', async () => {
+      const experiments = {
+        enableNetworkInspector: false,
+        enableNewDebugger: false,
+        enableOpenDebuggerRedirect: false,
+      };
+      const actual = getDevToolsFrontendUrl(
+        experiments,
+        webSocketDebuggerUrl,
+        devServerUrl,
+      );
+      const decoded = decodeURIComponent(actual);
+      const doubleDecoded = decodeURIComponent(decoded);
+      expect(decoded).toBe(doubleDecoded);
+      expect(actual).toMatchInlineSnapshot(
+        `"/debugger-frontend/rn_inspector.html?ws=localhost%3A8081%2Finspector%2Fdebug%3Fdevice%3D1a9372c%26page%3D-1&sources.hide_add_folder=true"`,
+      );
+    });
+
+    it('should return a valid url for enableNetworkInspector experiment on', async () => {
+      const experiments = {
+        enableNetworkInspector: true,
+        enableNewDebugger: true,
+        enableOpenDebuggerRedirect: false,
+      };
+      const actual = getDevToolsFrontendUrl(
+        experiments,
+        webSocketDebuggerUrl,
+        devServerUrl,
+      );
+      const decoded = decodeURIComponent(actual);
+      const doubleDecoded = decodeURIComponent(decoded);
+      expect(decoded).toBe(doubleDecoded);
+      expect(actual).toMatchInlineSnapshot(
+        `"/debugger-frontend/rn_inspector.html?ws=localhost%3A8081%2Finspector%2Fdebug%3Fdevice%3D1a9372c%26page%3D-1&sources.hide_add_folder=true&unstable_enableNetworkPanel=true"`,
+      );
+    });
+  });
+});
diff --git a/packages/dev-middleware/src/utils/getDevToolsFrontendUrl.js b/packages/dev-middleware/src/utils/getDevToolsFrontendUrl.js
index c665bbe2b2d89f..4623616292fea5 100644
--- a/packages/dev-middleware/src/utils/getDevToolsFrontendUrl.js
+++ b/packages/dev-middleware/src/utils/getDevToolsFrontendUrl.js
@@ -20,8 +20,9 @@ export default function getDevToolsFrontendUrl(
   devServerUrl: string,
 ): string {
   const scheme = new URL(webSocketDebuggerUrl).protocol.slice(0, -1);
-  const webSocketUrlWithoutProtocol = encodeURIComponent(
-    webSocketDebuggerUrl.replace(/^wss?:\/\//, ''),
+  const webSocketUrlWithoutProtocol = webSocketDebuggerUrl.replace(
+    /^wss?:\/\//,
+    '',
   );
   const appUrl = `${devServerUrl}/debugger-frontend/rn_inspector.html`;