Pr christianalfoni 2803

packages/app/src/app/pages/Dashboard/Content/routes/PathedSandboxes/index.js

@@ -33,7 +33,7 @@ const PathedSandboxes = props => {
               }
 
               const sandboxes =
-                loading || !data.me.collection
+                loading || !data.me || !data.me.collection
                   ? []
                   : data.me.collection.sandboxes;
 

packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { useMutation } from '@apollo/react-hooks';
+
+import Input from '@codesandbox/common/lib/components/Input';
+import { Button } from '@codesandbox/common/lib/components/Button';
+import track from '@codesandbox/common/lib/utils/analytics';
+
+import { useOvermind } from 'app/overmind';
+import { INVITE_TO_TEAM } from '../../../../queries';
+import { IAddTeamMemberProps, IMutationVariables } from './types';
+
+const ErrorMessage = styled.div`
+  color: ${props => props.theme.red};
+  font-weight: 600;
+  font-size: 0.875rem;
+  margin-bottom: 0.5rem;
+`;
+
+export const AddTeamMember: React.FC<IAddTeamMemberProps> = ({ teamId }) => {
+  const { actions } = useOvermind();
+  const [inviteToTeam, { loading, error }] = useMutation(INVITE_TO_TEAM);
+  let input: HTMLInputElement = null;
+
+  const submit: React.FormEventHandler = e => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    let isEmail = input.value.includes('@');
+
+    track('Team - Add Member', { email: isEmail });
+
+    isEmail = false;
+
+    // We don't enable email for now for privacy reasons
+
+    const variables: IMutationVariables = { teamId };
+
+    const { value } = input;
+    if (isEmail) {
+      variables.email = value;
+    } else {
+      variables.username = value;
+    }
+
+    inviteToTeam({
+      variables,
+    }).then(() => {
+      actions.notificationAdded({
+        title: `${value} has been invited!`,
+        notificationType: 'success',
+      });
+    });
+
+    input.value = '';
+  };
+
+  const errorMessage =
+    error && error.graphQLErrors && error.graphQLErrors[0].message;
+
+  return (
+    <>
+      {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
+      <form style={{ display: 'flex' }} onSubmit={loading ? undefined : submit}>
+        <Input
+          ref={node => {
+            input = node;
+          }}
+          placeholder="Add member by username"
+          block
+        />
+        <Button disabled={loading} style={{ width: 200 }} small>
+          {loading ? 'Adding Member...' : 'Add Member'}
+        </Button>
+      </form>
+    </>
+  );
+};

packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/types.ts

@@ -0,0 +1,11 @@
+type TeamId = string;
+
+export interface IAddTeamMemberProps {
+  teamId: TeamId;
+}
+
+export interface IMutationVariables {
+  teamId: TeamId;
+  email?: string;
+  username?: string;
+}

packages/app/src/app/pages/Dashboard/Content/routes/TeamView/RemoveTeamMember/index.js

@@ -11,7 +11,7 @@ import { REMOVE_FROM_TEAM, LEAVE_TEAM } from '../../../../queries';
 
 import { StyledCrossIcon } from '../elements';
 
-export default ({
+export const RemoveTeamMember = ({
   creatorId,
   currentUserId,
   userId,

packages/app/src/app/pages/Dashboard/Content/routes/TeamView/index.js

@@ -24,8 +24,8 @@ import {
   SET_TEAM_DESCRIPTION,
 } from '../../../queries';
 
-import AddTeamMember from './AddTeamMember';
-import RemoveTeamMember from './RemoveTeamMember';
+import { AddTeamMember } from './AddTeamMember';
+import { RemoveTeamMember } from './RemoveTeamMember';
 
 const User = ({ user, rightElement }) => (
   <div

packages/app/src/app/pages/common/Modals/LiveSessionEnded/index.tsx

@@ -4,7 +4,8 @@ import { useOvermind } from 'app/overmind';
 import React, { FunctionComponent } from 'react';
 import { Explanation, Heading } from '../elements';
 import { Container } from './elements';
-export const LiveModeEnded: FunctionComponent = () => {
+
+export const LiveSessionEnded: FunctionComponent = () => {
   const {
     state: {
       editor: {

packages/app/src/app/pages/common/Modals/SelectSandboxModal/index.tsx

@@ -1,20 +1,25 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import { useOvermind } from 'app/overmind';
-import Sandbox from './Sandbox';
-
 import { Padding } from './elements';
 
-function SelectSandboxModal() {
+import Sandbox from './Sandbox';
+
+export const SelectSandboxModal: FunctionComponent = () => {
   const {
     state: {
-      profile: { isLoadingSandboxes, showcasedSandbox, userSandboxes },
+      profile: {
+        isLoadingSandboxes,
+        showcasedSandbox,
+        userSandboxes
+      }
     },
     actions: {
-      profile: { newSandboxShowcaseSelected },
-    },
+      profile: { newSandboxShowcaseSelected }
+    }
   } = useOvermind();
 
-  if (isLoadingSandboxes) return <Padding>Loading sandboxes...</Padding>;
+  if (isLoadingSandboxes)
+    return <Padding>Loading sandboxes...</Padding>;
 
   const currentShowcasedSandboxId = showcasedSandbox && showcasedSandbox.id;
 
@@ -32,5 +37,4 @@ function SelectSandboxModal() {
         ))}
     </div>
   );
-}
-export default SelectSandboxModal;
+};

packages/app/src/app/pages/common/Modals/index.js

@@ -17,7 +17,7 @@ import { EmptyTrash } from './EmptyTrash';
 import ExportGitHubModal from './ExportGitHubModal';
 import { FeedbackModal } from './FeedbackModal';
 import { ForkServerModal } from './ForkServerModal';
-import LiveSessionEnded from './LiveSessionEnded';
+import { LiveSessionEnded } from './LiveSessionEnded';
 import LiveSessionVersionMismatch from './LiveSessionVersionMismatch';
 import NetlifyLogs from './NetlifyLogs';
 import NewSandbox from './NewSandbox';
@@ -26,7 +26,7 @@ import PreferencesModal from './PreferencesModal';
 import PrivacyServerWarning from './PrivacyServerWarning';
 import PRModal from './PRModal';
 import SearchDependenciesModal from './SearchDependenciesModal';
-import SelectSandboxModal from './SelectSandboxModal';
+import { SelectSandboxModal } from './SelectSandboxModal';
 import ShareModal from './ShareModal';
 import SignInForTemplates from './SignInForTemplates';
 import { StorageManagementModal } from './StorageManagementModal';

packages/app/src/sandbox/eval/transpilers/babel/worker/evaluate.js

@@ -1,6 +1,8 @@
 import resolve from 'browser-resolve';
 import hashsum from 'hash-sum';
-import { dirname } from 'path';
+import * as events from 'events';
+import * as util from 'util';
+import { dirname, basename } from 'path';
 import type FSType from 'fs';
 import detectOldBrowser from '@codesandbox/common/lib/detect-old-browser';
 import evaluateCode from '../../../loaders/eval';
@@ -24,6 +26,14 @@ export default function evaluate(
   availablePresets
 ) {
   const require = (requirePath: string) => {
+    if (requirePath === 'events') {
+      return events;
+    }
+
+    if (requirePath === 'util') {
+      return util;
+    }
+
     if (requirePath === 'assert') {
       return () => {};
     }
@@ -42,12 +52,12 @@ export default function evaluate(
     }
 
     if (requirePath === 'require-from-string') {
-      return (newCode: string) =>
+      return (newCode: string, sourcePath: string) =>
         evaluate(
           fs,
           BFSRequire,
           newCode,
-          '/',
+          sourcePath,
           availablePlugins,
           availablePresets
         );
@@ -154,9 +164,15 @@ export default function evaluate(
     finalCode = transpiledCode;
   }
 
-  const exports = evaluateCode(finalCode, require, cache[id], {
-    VUE_CLI_BABEL_TRANSPILE_MODULES: true,
-  });
+  const exports = evaluateCode(
+    finalCode,
+    require,
+    cache[id],
+    {
+      VUE_CLI_BABEL_TRANSPILE_MODULES: true,
+    },
+    { __dirname: dirname(path), __filename: basename(path) }
+  );
 
   return exports;
 }