[pull] master from codesandbox:master

packages/app/package.json

@@ -115,7 +115,7 @@
     "comlink-loader": "^2.0.0",
     "compare-versions": "^3.1.0",
     "console": "^0.7.2",
-    "csb-console-feed": "^3.7.0",
+    "console-feed": "^3.1.9",
     "cropperjs": "^1.5.11",
     "css-modules-loader-core": "^1.1.0",
     "date-fns": "^2.4.1",

packages/app/src/app/components/Preview/DevTools/Console/index.tsx

@@ -1,7 +1,7 @@
 import Select from '@codesandbox/common/lib/components/Select';
 import theme from '@codesandbox/common/lib/theme';
 import { listen, dispatch } from 'codesandbox-api';
-import { Decode, Console as ConsoleFeed } from 'csb-console-feed';
+import { Decode, Console as ConsoleFeed } from 'console-feed';
 import { debounce } from 'lodash-es';
 import React from 'react';
 import ClearIcon from 'react-icons/lib/md/block';

packages/app/src/app/components/dashboard/InputText.tsx

@@ -1,4 +1,4 @@
-import React, { InputHTMLAttributes } from 'react';
+import React, { InputHTMLAttributes, forwardRef } from 'react';
 import styled from 'styled-components';
 import { Stack } from '@codesandbox/components';
 import { Label } from './Label';
@@ -32,23 +32,19 @@ interface InputTextProps extends InputHTMLAttributes<HTMLInputElement> {
   hideLabel?: boolean;
 }
 
-export const InputText = ({
-  id,
-  label,
-  name,
-  isInvalid,
-  hideLabel,
-  ...restProps
-}: InputTextProps) => (
-  <Stack gap={2} direction="vertical">
-    {!hideLabel && <Label htmlFor={id}>{label}</Label>}
-    <StyledInput
-      id={id}
-      name={name}
-      type="text"
-      aria-label={label}
-      isInvalid={isInvalid}
-      {...restProps}
-    />
-  </Stack>
+export const InputText = forwardRef<HTMLInputElement, InputTextProps>(
+  ({ id, label, name, isInvalid, hideLabel, ...restProps }, ref) => (
+    <Stack gap={2} direction="vertical">
+      {!hideLabel && <Label htmlFor={id}>{label}</Label>}
+      <StyledInput
+        id={id}
+        name={name}
+        type="text"
+        aria-label={label}
+        isInvalid={isInvalid}
+        ref={ref}
+        {...restProps}
+      />
+    </Stack>
+  )
 );

packages/app/src/app/components/dashboard/Textarea.tsx

@@ -25,7 +25,7 @@ const StyledTextarea = styled.textarea<{ resize: boolean }>`
 
 interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
   id: string;
-  label: string;
+  label?: string;
   name: string;
   resize?: boolean;
 }
@@ -39,7 +39,7 @@ export const Textarea = ({
 }: TextareaProps) => {
   return (
     <Stack gap={2} direction="vertical">
-      <Label htmlFor={id}>{label}</Label>
+      {label && <Label htmlFor={id}>{label}</Label>}
       <StyledTextarea id={id} name={name} resize={resize} {...restProps} />
     </Stack>
   );

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

@@ -619,7 +619,7 @@ export const openCreateTeamModal = (
   props?: OpenCreateTeamModalParams
 ) => {
   actions.modals.newTeamModal.open({
-    step: props?.step ?? 'create',
+    step: props?.step ?? 'name',
     hasNextStep: props?.hasNextStep ?? true,
   });
 };

packages/app/src/app/overmind/effects/vscode/extensionHostWorker/common/fs.ts

@@ -92,7 +92,7 @@ export async function initializeBrowserFS({
           fs: 'JSDelivrRequest',
           options: {
             dependency: 'typescript',
-            version: '4.9.3',
+            version: '5.2.2',
           },
         };
       }

packages/app/src/app/pages/Dashboard/Components/NewTeamModal/TeamImport.tsx

@@ -10,7 +10,7 @@ export const TeamImport = ({ onComplete }: { onComplete: () => void }) => {
   const { restrictsPublicRepos } = useGitHubPermissions();
 
   return (
-    <Element css={{ width: '100%', height: '546px' }} padding={8}>
+    <Element css={{ width: '100%' }} padding={12}>
       <Stack
         align="center"
         direction="vertical"
@@ -47,20 +47,22 @@ export const TeamImport = ({ onComplete }: { onComplete: () => void }) => {
             </Element>
           )}
         </Stack>
-        <Button
-          css={{ width: 'auto' }}
-          onClick={() => {
-            track('New Team - Done import', {
-              codesandbox: 'V1',
-              event_source: 'UI',
-            });
+        <Stack css={{ width: '100%', justifyContent: 'flex-end' }}>
+          <Button
+            css={{ width: 'auto' }}
+            onClick={() => {
+              track('New Team - Done import', {
+                codesandbox: 'V1',
+                event_source: 'UI',
+              });
 
-            onComplete();
-          }}
-          variant="link"
-        >
-          Done
-        </Button>
+              onComplete();
+            }}
+            variant="link"
+          >
+            Done
+          </Button>
+        </Stack>
       </Stack>
     </Element>
   );

packages/app/src/app/pages/Dashboard/Components/NewTeamModal/TeamMembers.tsx

@@ -154,21 +154,24 @@ export const TeamMembers: React.FC<{
           width: '100%',
         }}
       >
-        <Text
-          as="h2"
-          size={32}
-          weight="500"
-          align="center"
-          css={{
-            margin: 0,
-            color: '#ffffff',
-            fontFamily: 'Everett, sans-serif',
-            lineHeight: '42px',
-            letterSpacing: '-0.01em',
-          }}
-        >
-          {activeTeamInfo.name}
-        </Text>
+        <Stack gap={2} direction="vertical">
+          <Text
+            as="h2"
+            size={32}
+            weight="500"
+            align="center"
+            css={{
+              margin: 0,
+              color: '#ffffff',
+              fontFamily: 'Everett, sans-serif',
+              lineHeight: '42px',
+              letterSpacing: '-0.01em',
+            }}
+          >
+            Invite team members
+          </Text>
+          <Text color="#999">Insert email addresses separated by a comma</Text>
+        </Stack>
         <Stack
           as="form"
           onSubmit={handleSubmit}
@@ -178,9 +181,7 @@ export const TeamMembers: React.FC<{
         >
           <Stack gap={4} direction="vertical">
             <Textarea
-              aria-describedby="invitees-role"
               id="member"
-              label="Invite additional team members (Insert email addresses separated by a comma)"
               name="members"
               value={addressesString}
               onChange={e => {
@@ -208,7 +209,7 @@ export const TeamMembers: React.FC<{
             ) : null}
 
             <StyledButton loading={inviteLoading} type="submit">
-              Invite members
+              Send invites
             </StyledButton>
           </Stack>
           <Text
@@ -238,7 +239,7 @@ export const TeamMembers: React.FC<{
       <Stack
         css={{
           width: '100%',
-          padding: '48px 56px',
+          padding: '48px',
         }}
         justify={hideSkip ? 'center' : 'space-between'}
       >
@@ -266,7 +267,7 @@ export const TeamMembers: React.FC<{
             }}
             variant="link"
           >
-            Skip
+            Next
           </Button>
         )}
       </Stack>

packages/app/src/app/pages/Dashboard/Components/NewTeamModal/TeamCreate.tsx → packages/app/src/app/pages/Dashboard/Components/NewTeamModal/TeamName.tsx

@@ -1,56 +1,55 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useActions, useAppState } from 'app/overmind';
 import { Stack, Text, Link, Element, Icon } from '@codesandbox/components';
 import { InputText } from 'app/components/dashboard/InputText';
 import { StyledButton } from 'app/components/dashboard/Button';
 import track from '@codesandbox/common/lib/utils/analytics';
-import { dashboard as dashboardURLs } from '@codesandbox/common/lib/utils/url-generator';
-import { useCreateCheckout } from 'app/hooks';
 
-export const TeamCreate: React.FC<{ onComplete: () => void }> = () => {
-  const { dashboard } = useAppState();
+export const TeamName: React.FC<{ onComplete: () => void }> = ({
+  onComplete,
+}) => {
+  const { dashboard, activeTeamInfo } = useAppState();
   const actions = useActions();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [existingTeamError, setExistingTeamError] = useState(false);
-  const [checkout, createCheckout] = useCreateCheckout();
+  const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-    if (checkout.status === 'error') {
-      setError(`Could not create stripe checkout link. ${checkout.error}`);
+    if (!activeTeamInfo || !inputRef.current) {
+      return;
     }
-  }, [checkout]);
+
+    inputRef.current.focus();
+    inputRef.current.select();
+  }, [activeTeamInfo]);
 
   const onSubmit = async event => {
     event.preventDefault();
     const teamName = event.target.name.value?.trim();
 
-    if (teamName) {
-      track('New Team - Create Team', {
+    if (teamName && teamName !== activeTeamInfo?.name) {
+      track('New Team - Set Name', {
         codesandbox: 'V1',
         event_source: 'UI',
       });
 
       setError(null);
       setLoading(true);
       try {
-        const newTeam = await actions.dashboard.createTeam({
-          teamName,
-        });
-
-        await createCheckout({
-          team_id: newTeam.id,
-          success_path: dashboardURLs.recent(newTeam.id, {
-            new_workspace: 'true',
-          }),
-          utm_source: 'pro_page',
+        await actions.dashboard.setTeamInfo({
+          name: teamName,
+          description: null,
+          file: null,
         });
       } catch {
-        setError('There was a problem creating your team');
+        setError('There was a problem updating your workspace');
       } finally {
         setLoading(false);
       }
     }
+
+    onComplete();
   };
 
   const handleInput = e => {
@@ -68,7 +67,11 @@ export const TeamCreate: React.FC<{ onComplete: () => void }> = () => {
 
     // Check if there's any team with the same name.
     setExistingTeamError(
-      Boolean(dashboard.teams.find(team => team.name === trimmedName))
+      Boolean(
+        dashboard.teams.find(
+          team => team.name === trimmedName && team.id !== activeTeamInfo?.id
+        )
+      )
     );
   };
 
@@ -97,8 +100,9 @@ export const TeamCreate: React.FC<{ onComplete: () => void }> = () => {
             letterSpacing: '-0.01em',
           }}
         >
-          Name your workspace
+          Welcome to Pro
         </Text>
+        <Text color="#999">Let&apos;s give your workspace a name</Text>
       </Stack>
       <Stack
         as="form"
@@ -115,7 +119,9 @@ export const TeamCreate: React.FC<{ onComplete: () => void }> = () => {
           required
           autoFocus
           hideLabel
+          defaultValue={activeTeamInfo?.name}
           onChange={handleInput}
+          ref={inputRef}
         />
 
         {existingTeamError && (