Add typings to browser from port opened

Author: CompuIves

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

@@ -2,6 +2,7 @@ import { Action } from 'app/overmind';
 import {
   ServerStatus,
   ServerContainerStatus,
+  ServerPort,
 } from '@codesandbox/common/lib/types';
 import { NotificationStatus } from '@codesandbox/notifications/lib/state';
 
@@ -171,20 +172,26 @@ export const onCodeSandboxAPIMessage: Action<{
   }
 };
 
+type BrowserOptions = { title?: string; url?: string } & (
+  | {
+      port: number;
+    }
+  | { url: string });
+
 export const onBrowserTabOpened: Action<{
-  port: any;
-}> = ({ actions }, { port }) => {
+  options: BrowserOptions;
+}> = ({ actions }, { options }) => {
   actions.editor.onDevToolsTabAdded({
     tab: {
       id: 'codesandbox.browser',
       closeable: true,
-      options: port,
+      options,
     },
   });
 };
 
 export const onBrowserFromPortOpened: Action<{
-  port: any;
+  port: ServerPort;
 }> = ({ actions }, { port }) => {
   actions.editor.onDevToolsTabAdded({
     tab: port.main
@@ -195,7 +202,6 @@ export const onBrowserFromPortOpened: Action<{
           options: {
             port: port.port,
             url: `https://${port.hostname}`,
-            title: port.title,
           },
         },
   });

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

@@ -1,14 +1,15 @@
 import {
   ServerStatus,
   ServerContainerStatus,
+  ServerPort,
 } from '@codesandbox/common/lib/types';
 
 type State = {
   status: ServerStatus;
   containerStatus: ServerContainerStatus;
   error: string;
   hasUnrecoverableError: false;
-  ports: any[];
+  ports: ServerPort[];
 };
 
 export const state: State = {

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/index.tsx

@@ -1,4 +1,5 @@
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
+import { ServerPort } from '@codesandbox/common/lib/types';
 import React, { FunctionComponent } from 'react';
 import BrowserIcon from 'react-icons/lib/go/browser';
 
@@ -22,19 +23,12 @@ import { EnvironmentVariables } from './EnvVars';
 import { Status } from './Status';
 import { Tasks } from './Tasks';
 
-type Port = {
-  main: boolean;
-  port: number;
-  hostname: string;
-  name?: string;
-};
-
 export const Server: FunctionComponent = () => {
   const {
     actions: {
       server: {
-        onBrowserFromPortOpened,
         onBrowserTabOpened,
+        onBrowserFromPortOpened,
         restartContainer,
         restartSandbox,
       },
@@ -47,7 +41,7 @@ export const Server: FunctionComponent = () => {
 
   const disconnected = server.status !== 'connected';
 
-  const openPort = (port: Port) => {
+  const openPort = (port: ServerPort) => {
     onBrowserFromPortOpened({ port });
   };
 
@@ -88,7 +82,7 @@ export const Server: FunctionComponent = () => {
 
         <Margin top={0.5}>
           {server.ports.length ? (
-            server.ports.map((port: Port) => (
+            server.ports.map((port: ServerPort) => (
               <EntryContainer
                 style={{ position: 'relative' }}
                 onClick={() => openPort(port)}
@@ -115,7 +109,7 @@ export const Server: FunctionComponent = () => {
               style={{ position: 'relative' }}
               onClick={() =>
                 onBrowserTabOpened({
-                  port: {
+                  options: {
                     url:
                       sandbox.template === 'gridsome'
                         ? '/___explore'

packages/common/src/types/index.ts

@@ -468,6 +468,13 @@ export enum ServerContainerStatus {
   ERROR = 'error',
 }
 
+export type ServerPort = {
+  main: boolean;
+  port: number;
+  hostname: string;
+  name?: string;
+};
+
 export type ZeitUser = {
   uid: string;
   email: string;