fix prevent open new main ports (codesandbox#2723)

* add type

* add utils to find tab position

* check port position

Author: yeion7

packages/app/src/app/overmind/namespaces/editor/state.ts

@@ -22,6 +22,7 @@ import { getSandboxOptions } from '@codesandbox/common/lib/url';
 import { Derive } from 'app/overmind';
 import immer from 'immer';
 
+import { ViewConfig } from '@codesandbox/common/lib/templates/template';
 import { mainModule as getMainModule } from '../../utils/main-module';
 import { parseConfigurations } from '../../utils/parse-configurations';
 
@@ -35,7 +36,7 @@ type State = {
   };
   // TODO: What is this really? Could not find it in Cerebral, but
   // EditorPreview is using it... weird stuff
-  devToolTabs: Derive<State, any[]>;
+  devToolTabs: Derive<State, ViewConfig[]>;
   isLoading: boolean;
   notFound: boolean;
   error: string | null;

packages/app/src/app/overmind/namespaces/server/actions.ts

@@ -5,6 +5,7 @@ import {
   ServerPort,
 } from '@codesandbox/common/lib/types';
 import { NotificationStatus } from '@codesandbox/notifications/lib/state';
+import { getDevToolsTabPosition } from 'app/overmind/utils/server';
 
 export const restartSandbox: Action = ({ effects }) => {
   effects.executor.emit('sandbox:restart');
@@ -192,17 +193,26 @@ export const onBrowserTabOpened: Action<{
 
 export const onBrowserFromPortOpened: Action<{
   port: ServerPort;
-}> = ({ actions }, { port }) => {
-  actions.editor.onDevToolsTabAdded({
-    tab: port.main
-      ? { id: 'codesandbox.browser' }
-      : {
-          id: 'codesandbox.browser',
-          closeable: true,
-          options: {
-            port: port.port,
-            url: `https://${port.hostname}`,
-          },
+}> = ({ actions, state }, { port }) => {
+  const tab = port.main
+    ? { id: 'codesandbox.browser' }
+    : {
+        id: 'codesandbox.browser',
+        closeable: true,
+        options: {
+          port: port.port,
+          url: `https://${port.hostname}`,
         },
+      };
+
+  const position = getDevToolsTabPosition({
+    tabs: state.editor.devToolTabs,
+    tab,
   });
+
+  if (position) {
+    actions.editor.onDevToolsPositionChanged({ position });
+  } else {
+    actions.editor.onDevToolsTabAdded({ tab });
+  }
 };

packages/app/src/app/overmind/utils/server.ts

@@ -0,0 +1,34 @@
+import {
+  ViewConfig,
+  ViewTab,
+} from '@codesandbox/common/lib/templates/template';
+
+// eslint-disable-next-line consistent-return
+export function getDevToolsTabPosition({
+  tabs,
+  tab,
+}: {
+  tabs: ViewConfig[];
+  tab: ViewTab;
+}):
+  | {
+      devToolIndex: number;
+      tabPosition: number;
+    }
+  | undefined {
+  const serializedTab = JSON.stringify(tab);
+
+  for (let i = 0; i < tabs.length; i++) {
+    const view = tabs[i];
+
+    for (let j = 0; j < view.views.length; j++) {
+      const tabFounded = view.views[j];
+      if (JSON.stringify(tabFounded) === serializedTab) {
+        return {
+          devToolIndex: i,
+          tabPosition: j,
+        };
+      }
+    }
+  }
+}