resolve #1912 | Open the new tab on holding cmd or ctrl key and click

allegro · Oct 30, 2024 · 414349a · 414349a
1 parent 5757719
commit 414349a
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 3 deletions.
diff --git a/hermes-console/src/components/environment-switch/EnvironmentSwitch.spec.ts b/hermes-console/src/components/environment-switch/EnvironmentSwitch.spec.ts
@@ -2,9 +2,11 @@ import { expect } from 'vitest';
 import { fireEvent } from '@testing-library/vue';
 import { render } from '@/utils/test-utils';
 import EnvironmentSwitch from '@/components/environment-switch/EnvironmentSwitch.vue';
+import userEvent from '@testing-library/user-event';
 
 const mockReplace = vi.fn();
 const mockHref = vi.fn();
+const mockOpen = vi.fn();
 
 Object.defineProperty(window, 'location', {
   value: {
@@ -15,6 +17,8 @@ Object.defineProperty(window, 'location', {
   },
 });
 
+window.open = mockOpen;
+
 const TEST_URL_ENV_1 =
   'http://localhost:3000/ui/groups/pl.example.hermes/topics/pl.example.hermes.TemperatureChanged';
 const TEST_URL_ENV_2 =
@@ -82,4 +86,62 @@ describe('EnvironmentSwitch', () => {
     // then
     expect(mockReplace).toHaveBeenCalledWith(TEST_URL_ENV_2);
   });
+
+  it('should open the new tab on holding ctrl and clicking', async () => {
+    // given
+    mockHref.mockReturnValue(TEST_URL_ENV_1);
+
+    // and
+    const { getByText } = render(EnvironmentSwitch, {
+      props: {
+        knownEnvironments: [
+          {
+            name: 'env1',
+            url: 'localhost:3000',
+          },
+          {
+            name: 'env2',
+            url: '127.0.0.1:3000',
+          },
+        ],
+      },
+    });
+
+    // when
+    const user = userEvent.setup();
+    await user.keyboard('[ControlLeft>]');
+    await user.click(getByText('env2').closest('button'));
+
+    // then
+    expect(mockOpen).toHaveBeenCalledWith(TEST_URL_ENV_2, '_blank');
+  });
+
+  it('should open the new tab on holding cmd and clicking', async () => {
+    // given
+    mockHref.mockReturnValue(TEST_URL_ENV_1);
+
+    // and
+    const { getByText } = render(EnvironmentSwitch, {
+      props: {
+        knownEnvironments: [
+          {
+            name: 'env1',
+            url: 'localhost:3000',
+          },
+          {
+            name: 'env2',
+            url: '127.0.0.1:3000',
+          },
+        ],
+      },
+    });
+
+    // when
+    const user = userEvent.setup();
+    await user.keyboard('[MetaLeft>]');
+    await user.click(getByText('env2').closest('button'));
+
+    // then
+    expect(mockOpen).toHaveBeenCalledWith(TEST_URL_ENV_2, '_blank');
+  });
 });
diff --git a/hermes-console/src/components/environment-switch/EnvironmentSwitch.vue b/hermes-console/src/components/environment-switch/EnvironmentSwitch.vue
@@ -21,11 +21,15 @@
     );
   }
 
-  function switchToEnv(env: ConsoleEnvironment): string {
+  function switchToEnv(env: ConsoleEnvironment, event): string {
     const currentUrl = location.href;
     const currentEnv: ConsoleEnvironment = getCurrentEnv();
     const switchedUrl = currentUrl.replace(currentEnv.url, env.url);
-    window.location.replace(switchedUrl);
+    if (event.ctrlKey || event.metaKey) {
+      window.open(switchedUrl, '_blank');
+    } else {
+      window.location.replace(switchedUrl);
+    }
   }
 </script>
 
@@ -35,7 +39,7 @@
       v-for="env in knownEnvironments"
       min-width="100"
       v-bind:key="env.name"
-      v-on:click="switchToEnv(env)"
+      @click="switchToEnv(env, $event)"
     >
       {{ env.name }}
     </v-btn>