Make it possible to deduplicate any devtools tab

CompuIves · CompuIves · commit 166db56b7547 · 2019-10-12T11:08:31.000+01:00
diff --git a/packages/app/src/app/components/Preview/DevTools/Tabs/Tab/index.tsx b/packages/app/src/app/components/Preview/DevTools/Tabs/Tab/index.tsx
@@ -9,18 +9,21 @@ import {
 } from 'react-dnd';
 import CrossIcon from 'react-icons/lib/md/clear';
 
+import { DevToolsTabPosition } from '@codesandbox/common/lib/types';
 import { Tab, CloseTab } from './elements';
 import { IViewType, Status } from '../..';
-import { ITabPosition } from '..';
 import { UnreadDevToolsCount } from './UnreadDevToolsCount';
 
 export interface TabProps {
   active: boolean;
   pane: IViewType;
   onClick: (e: React.MouseEvent<HTMLDivElement>) => void;
   onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void;
-  moveTab?: (currentPosition: ITabPosition, nextPosition: ITabPosition) => void;
-  closeTab?: (pos: ITabPosition) => void;
+  moveTab?: (
+    currentPosition: DevToolsTabPosition,
+    nextPosition: DevToolsTabPosition
+  ) => void;
+  closeTab?: (pos: DevToolsTabPosition) => void;
   index: number;
   devToolIndex: number;
   canDrag: boolean;
@@ -146,11 +149,11 @@ const entryTarget = {
       return;
     }
 
-    const previousPosition: ITabPosition = {
+    const previousPosition: DevToolsTabPosition = {
       tabPosition: sourceItem.index,
       devToolIndex: sourceItem.devToolIndex,
     };
-    const nextPosition: ITabPosition = {
+    const nextPosition: DevToolsTabPosition = {
       tabPosition: props.index,
       devToolIndex: props.devToolIndex,
     };
diff --git a/packages/app/src/app/components/Preview/DevTools/Tabs/TabDropZone/index.tsx b/packages/app/src/app/components/Preview/DevTools/Tabs/TabDropZone/index.tsx
@@ -6,8 +6,8 @@ import {
   DropTargetMonitor,
   DropTargetConnector,
 } from 'react-dnd';
+import { DevToolsTabPosition } from '@codesandbox/common/lib/types';
 
-import { ITabPosition } from '..';
 import { PREVIEW_TAB_ID } from '../Tab';
 
 const DropZone = styled.div<{ isOver: boolean }>`
@@ -26,7 +26,10 @@ const DropZone = styled.div<{ isOver: boolean }>`
 `;
 
 export interface TabDropZoneProps {
-  moveTab: (currentPosition: ITabPosition, nextPosition: ITabPosition) => void;
+  moveTab: (
+    currentPosition: DevToolsTabPosition,
+    nextPosition: DevToolsTabPosition
+  ) => void;
   index: number;
   devToolIndex: number;
 }
@@ -61,7 +64,7 @@ const entryTarget = {
       return;
     }
 
-    const previousPosition: ITabPosition = {
+    const previousPosition: DevToolsTabPosition = {
       tabPosition: sourceItem.index,
       devToolIndex: sourceItem.devToolIndex,
     };
diff --git a/packages/app/src/app/components/Preview/DevTools/Tabs/index.tsx b/packages/app/src/app/components/Preview/DevTools/Tabs/index.tsx
@@ -1,26 +1,22 @@
 import React from 'react';
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
 import { ViewTab } from '@codesandbox/common/lib/templates/template';
+import { DevToolsTabPosition } from '@codesandbox/common/lib/types';
 
 import { Status, IViews } from '..';
 import { Actions, Container, Tabs } from './elements';
 import { DraggableTab, PaneTab, TabProps } from './Tab';
 import { TabDropZone, TabDropZoneProps } from './TabDropZone';
 // import { AddTab } from './AddTab';
 
-export interface ITabPosition {
-  devToolIndex: number;
-  tabPosition: number;
-}
-
 export interface Props {
   hidden: boolean;
   currentPaneIndex: number;
   owned: boolean;
   setPane: (i: number) => void;
   devToolIndex: number;
-  moveTab?: (prevPos: ITabPosition, newPos: ITabPosition) => void;
-  closeTab?: (pos: ITabPosition) => void;
+  moveTab?: (prevPos: DevToolsTabPosition, newPos: DevToolsTabPosition) => void;
+  closeTab?: (pos: DevToolsTabPosition) => void;
   status?: { [title: string]: Status | undefined };
 
   panes: ViewTab[];
diff --git a/packages/app/src/app/components/Preview/DevTools/index.tsx b/packages/app/src/app/components/Preview/DevTools/index.tsx
@@ -7,8 +7,9 @@ import { TemplateType } from '@codesandbox/common/lib/templates';
 import { ViewConfig } from '@codesandbox/common/lib/templates/template';
 import track from '@codesandbox/common/lib/utils/analytics';
 
+import { DevToolsTabPosition } from '@codesandbox/common/lib/types';
 import { console } from './Console';
-import { DevToolTabs, ITabPosition } from './Tabs';
+import { DevToolTabs } from './Tabs';
 import { problems } from './Problems';
 import { reactDevTools } from './React-Devtools';
 import { terminal } from './Terminal';
@@ -95,9 +96,12 @@ type Props = {
   primary: boolean;
   viewConfig: ViewConfig;
   devToolIndex: number;
-  moveTab?: (prevPos: ITabPosition, nextPos: ITabPosition) => void;
-  closeTab?: (pos: ITabPosition) => void;
-  setPane: (pos: ITabPosition) => void;
+  moveTab?: (
+    prevPos: DevToolsTabPosition,
+    nextPos: DevToolsTabPosition
+  ) => void;
+  closeTab?: (pos: DevToolsTabPosition) => void;
+  setPane: (pos: DevToolsTabPosition) => void;
   addedViews?: IViews;
   hideTabs?: boolean;
   currentDevToolIndex: number;
diff --git a/packages/app/src/app/overmind/namespaces/editor/state.ts b/packages/app/src/app/overmind/namespaces/editor/state.ts
@@ -17,6 +17,7 @@ import {
   Sandbox,
   Tabs,
   WindowOrientation,
+  DevToolsTabPosition,
 } from '@codesandbox/common/lib/types';
 import { getSandboxOptions } from '@codesandbox/common/lib/url';
 import { Derive } from 'app/overmind';
@@ -86,10 +87,7 @@ type State = {
   >;
   isAdvancedEditor: Derive<State, boolean>;
   shouldDirectoryBeOpen: Derive<State, (directoryShortid: string) => boolean>;
-  currentDevToolsPosition: {
-    devToolIndex: number;
-    tabPosition: number;
-  };
+  currentDevToolsPosition: DevToolsTabPosition;
   sessionFrozen: boolean;
 };
 
diff --git a/packages/app/src/app/overmind/namespaces/server/actions.ts b/packages/app/src/app/overmind/namespaces/server/actions.ts
@@ -6,6 +6,7 @@ import {
 } from '@codesandbox/common/lib/types';
 import { NotificationStatus } from '@codesandbox/notifications/lib/state';
 import { getDevToolsTabPosition } from 'app/overmind/utils/server';
+import { ViewTab } from '@codesandbox/common/lib/templates/template';
 
 export const restartSandbox: Action = ({ effects }) => {
   effects.executor.emit('sandbox:restart');
@@ -180,30 +181,20 @@ type BrowserOptions = { title?: string; url?: string } & (
   | { url: string });
 
 export const onBrowserTabOpened: Action<{
-  options: BrowserOptions;
-}> = ({ actions }, { options }) => {
-  actions.editor.onDevToolsTabAdded({
-    tab: {
-      id: 'codesandbox.browser',
-      closeable: true,
-      options,
-    },
-  });
-};
+  closeable?: boolean;
+  options?: BrowserOptions;
+}> = ({ actions, state }, { options, closeable }) => {
+  const tab: ViewTab = {
+    id: 'codesandbox.browser',
+  };
+
+  if (typeof options !== 'undefined') {
+    tab.options = options;
+  }
 
-export const onBrowserFromPortOpened: Action<{
-  port: ServerPort;
-}> = ({ actions, state }, { port }) => {
-  const tab = port.main
-    ? { id: 'codesandbox.browser' }
-    : {
-        id: 'codesandbox.browser',
-        closeable: true,
-        options: {
-          port: port.port,
-          url: `https://${port.hostname}`,
-        },
-      };
+  if (typeof closeable !== 'undefined') {
+    tab.closeable = closeable;
+  }
 
   const position = getDevToolsTabPosition({
     tabs: state.editor.devToolTabs,
@@ -216,3 +207,19 @@ export const onBrowserFromPortOpened: Action<{
     actions.editor.onDevToolsTabAdded({ tab });
   }
 };
+
+export const onBrowserFromPortOpened: Action<{
+  port: ServerPort;
+}> = ({ actions }, { port }) => {
+  if (port.main) {
+    actions.server.onBrowserTabOpened({});
+  } else {
+    actions.server.onBrowserTabOpened({
+      closeable: true,
+      options: {
+        port: port.port,
+        url: `https://${port.hostname}`,
+      },
+    });
+  }
+};
diff --git a/packages/app/src/app/overmind/utils/server.ts b/packages/app/src/app/overmind/utils/server.ts
@@ -2,6 +2,7 @@ import {
   ViewConfig,
   ViewTab,
 } from '@codesandbox/common/lib/templates/template';
+import { DevToolsTabPosition } from '@codesandbox/common/lib/types';
 
 // eslint-disable-next-line consistent-return
 export function getDevToolsTabPosition({
@@ -10,12 +11,7 @@ export function getDevToolsTabPosition({
 }: {
   tabs: ViewConfig[];
   tab: ViewTab;
-}):
-  | {
-      devToolIndex: number;
-      tabPosition: number;
-    }
-  | undefined {
+}): DevToolsTabPosition | undefined {
   const serializedTab = JSON.stringify(tab);
 
   for (let i = 0; i < tabs.length; i++) {
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/utils.ts b/packages/app/src/app/pages/Sandbox/Editor/Content/utils.ts
@@ -3,18 +3,18 @@ import {
   ViewConfig,
   ViewTab,
 } from '@codesandbox/common/lib/templates/template';
-import { ITabPosition } from 'app/components/Preview/DevTools/Tabs';
+import { DevToolsTabPosition } from '@codesandbox/common/lib/types';
 
-const isEqual = (prevPos: ITabPosition, nextPos: ITabPosition) =>
+const isEqual = (prevPos: DevToolsTabPosition, nextPos: DevToolsTabPosition) =>
   prevPos.devToolIndex === nextPos.devToolIndex &&
   prevPos.tabPosition === nextPos.tabPosition;
 
 export function addDevToolsTab(
   tabs: ViewConfig[],
   newTab: ViewTab,
-  position?: ITabPosition
+  position?: DevToolsTabPosition
 ) {
-  const positionToAdd: ITabPosition = position || {
+  const positionToAdd: DevToolsTabPosition = position || {
     devToolIndex: 0,
     tabPosition: tabs[0].views.length,
   };
@@ -31,8 +31,8 @@ export function addDevToolsTab(
 
 export function moveDevToolsTab(
   tabs: ViewConfig[],
-  prevPos: ITabPosition,
-  nextPos: ITabPosition
+  prevPos: DevToolsTabPosition,
+  nextPos: DevToolsTabPosition
 ) {
   if (isEqual(prevPos, nextPos)) {
     return tabs;
@@ -64,7 +64,10 @@ export function moveDevToolsTab(
   });
 }
 
-export function closeDevToolsTab(tabs: ViewConfig[], closePos: ITabPosition) {
+export function closeDevToolsTab(
+  tabs: ViewConfig[],
+  closePos: DevToolsTabPosition
+) {
   // We want to do this immutable, to prevent conflicts while the file is changing
   return immer(tabs, draft => {
     const devTools = draft[closePos.devToolIndex];
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/index.tsx
@@ -109,6 +109,7 @@ export const Server: FunctionComponent = () => {
               style={{ position: 'relative' }}
               onClick={() =>
                 onBrowserTabOpened({
+                  closeable: true,
                   options: {
                     url:
                       sandbox.template === 'gridsome'
diff --git a/packages/app/src/embed/components/Content/index.tsx b/packages/app/src/embed/components/Content/index.tsx
@@ -6,6 +6,7 @@ import {
   ModuleError,
   ModuleCorrection,
   Settings,
+  DevToolsTabPosition,
 } from '@codesandbox/common/lib/types';
 import BasePreview from '@codesandbox/common/lib/components/Preview';
 import { CorrectionClearAction } from 'codesandbox-api/dist/types/actions/correction';
@@ -31,7 +32,6 @@ import {
   IViewType,
   DevToolProps,
 } from 'app/components/Preview/DevTools';
-import { ITabPosition } from 'app/components/Preview/DevTools/Tabs';
 import { clearCorrectionsFromAction } from 'app/utils/corrections';
 
 import {
@@ -78,7 +78,7 @@ type State = {
   isInProjectView: boolean;
   dragging: boolean;
   running: boolean;
-  currentDevToolPosition: ITabPosition;
+  currentDevToolPosition: DevToolsTabPosition;
 };
 
 export default class Content extends React.PureComponent<Props, State> {
@@ -104,7 +104,7 @@ export default class Content extends React.PureComponent<Props, State> {
     this.corrections = [];
   }
 
-  setPane = (pos: ITabPosition) => {
+  setPane = (pos: DevToolsTabPosition) => {
     this.setState({ currentDevToolPosition: pos });
   };
 
diff --git a/packages/common/src/types/index.ts b/packages/common/src/types/index.ts
@@ -615,6 +615,11 @@ export type SandboxUrlSourceData = {
   git?: GitInfo;
 };
 
+export type DevToolsTabPosition = {
+  devToolIndex: number;
+  tabPosition: number;
+};
+
 export type LiveMessage<data = unknown> = {
   event: LiveMessageEvent;
   data: data;
