feat: trial support release (#7075)

* feat(dashboard): team creation steps (#7038)

* create steps for new team flow

* fixup

* update Stack to use align and justify props + rename onTeamCreation to onComplete

* feat(trial): create team and subscribe to pro (#7040)

* add npm icon

* create getPrices action

* wip: TeamSubscription component

* extract useCreateCheckout

* add create checkout to team subscription step in new team flow

* fix

* feat(trial): Add onboarding questions (#7037)

* Update plugin to potentially fix input requires label error

* Start creating isolated styled components

* Use new components and update styles

* Replace styled with dashboard InputText element

* Move styles to styled component

* Create button abstraction for dashboard

* Update wrapper component

* Add more TOQ_DEBUG flags

* Add key to option

* Clean up handle sign in with providers

* Separate views into different files

* Split login between modal and page

* Comment modal header

* Remove comment

* Support placeholder for InputSelect

* Rename button to styled

* Replace styled function with Element and css prop

* Uppercase for consts

* Add target blank

* fix(trial): redirect to the dashboard home page for the created team (#7043)

* feat(trial): Create team (#7039)

* Update plugin to potentially fix input requires label error

* Start creating isolated styled components

* Use new components and update styles

* Replace styled with dashboard InputText element

* Move styles to styled component

* Create button abstraction for dashboard

* Update wrapper component

* Add more TOQ_DEBUG flags

* Add key to option

* Clean up handle sign in with providers

* Separate views into different files

* Split login between modal and page

* Comment modal header

* Remove comment

* Support placeholder for InputSelect

* Add external link and camera icons

* Style create team modal

* Add link

* Fix link with href instead of to

* feat(trial): Show create team modal after new signup (#7051)

* Add debug flag for duplicate account page

* Onboarding form field updates

* Add isInvalid prop to input

* Show create team modal after new user signed up

* Change var to uppercase to imply const

* Undo localstorage entry rename as it will trigger the modal again

* Fix property order

* Add aria attrs for validation and describing input with error

* feat(trial): Invite team members (#7049)

* Textarea component

* Teammember invite step styles

* Fix typo

* Email submission WIP

* Validate emails and send invitations

* Trigger onComplete after sending invites

* feat(dashboard): recent page empty state (#7053)

* adds loading option to page headers

* update recent page title if empty

* wip

* wip

* open/select templates

* adjust styling

* fix section title

* prevent columns from stretching

* feat(trial): save "role" and "usage" and add it to amplitude (#7059)

* feat: save users role and usage on signup

* add metadata when identifying user

* handle subscription status when trialing (#7061)

* signin: update usage options (#7062)

* feat(trial): tracking (#7068)

* track: open workspace select

* track: select workspace

* track: create workspace

* track: view create team modal

* track: new team - learn more

* track: new team - create team

* track: new team - invite members and skip team invite

* track: new team - start trial and skip trial

* track: empty recent actions

* track: remove active workspace change from action

* fix: null error and duplicate call (#7073)

* feat(trial): dont show create team modal after accepting invite (#7071)

* Update flags to view certain modals

* Clarify localStorage check with signup and invite flags

* fix(trial): Properly catch spaces in email addresses instead of removing them all (#7074)

* Properly catch spaces in email addresses instead of removing them all

* Substring is zero based so we need lenght minus one

* Update comment

* fix(dashboard): empty state (#7065)

* handle collections not existing

* remove duplicate call

Co-authored-by: Maria Clara <[email protected]>
Co-authored-by: Alex Moldovan <[email protected]>

Author: 3 people

package.json

@@ -95,7 +95,7 @@
     "eslint-import-resolver-webpack": "^0.8.1",
     "eslint-loader": "^1.7.1",
     "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react_editor": "npm:[email protected]",
     "eslint-plugin-react": "~7.21.2",
     "eslint-plugin-react-hooks": "^4.1.0",

packages/app/.eslintrc

@@ -11,7 +11,8 @@
     {
       "files": ["*.tsx"],
       "rules": {
-        "import/no-default-export": 1
+        "import/no-default-export": 1,
+        "consistent-return": "off"
       }
     }
   ]

packages/app/src/app/components/CreateSandbox/FromTemplate.tsx

@@ -10,8 +10,9 @@ import {
   Text,
 } from '@codesandbox/components';
 
-import { StyledInput, StyledSelect } from './elements';
+import { StyledSelect } from './elements';
 import { CreateSandboxParams } from './types';
+import { InputText } from '../dashboard/InputText';
 
 export interface FromTemplateProps {
   isV2: boolean;
@@ -76,15 +77,15 @@ export const FromTemplate: React.FC<FromTemplateProps> = ({
       >
         <Stack direction="vertical" gap={6}>
           <Stack direction="vertical" gap={2}>
-            <StyledInput
+            <InputText
               autoFocus
               id="sb-name"
+              name="sb-name"
               type="text"
-              aria-label="Sandbox name"
-              placeholder="Sandbox name"
+              label="Sandbox name"
               value={sandboxName}
               onChange={e => setSandboxName(e.target.value)}
-              aria-describedBy="name-desc"
+              aria-describedby="name-desc"
             />
             <Element
               as="span"

packages/app/src/app/components/CreateSandbox/elements.ts

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { Tab as BaseTab, TabList, TabPanel } from 'reakit/Tab';
 import { Select } from '@codesandbox/components';
 
@@ -139,7 +139,11 @@ export const TemplateGrid = styled.div`
   }
 `;
 
-export const inputStyles = css`
+// Select component places the content with a fixed padding if it has an icon
+// !important here will overule that setting since the new select is bigger
+export const StyledSelect = styled(Select)`
+  height: 48px;
+  padding-left: 44px !important;
   font-family: inherit;
   height: 32px;
   padding: 8px 16px;
@@ -157,15 +161,3 @@ export const inputStyles = css`
     color: #e5e5e5;
   }
 `;
-
-export const StyledInput = styled.input`
-  ${inputStyles}
-`;
-
-// Select component places the content with a fixed padding if it has an icon
-// !important here will overule that setting since the new select is bigger
-export const StyledSelect = styled(Select)`
-  ${inputStyles}
-  height: 48px;
-  padding-left: 44px !important;
-`;

packages/app/src/app/components/SignInModal.tsx

@@ -1,9 +1,11 @@
 import React, { useEffect, useCallback } from 'react';
-import { ESC } from '@codesandbox/common/lib/utils/keycodes';
-import { ThemeProvider, Stack } from '@codesandbox/components';
 import OutsideClickHandler from 'react-outside-click-handler';
-import { SignInModalElement } from 'app/pages/SignIn/Modal';
 import { motion, AnimatePresence } from 'framer-motion';
+import { css } from '@styled-system/css';
+
+import { ESC } from '@codesandbox/common/lib/utils/keycodes';
+import { ThemeProvider, Stack, Element } from '@codesandbox/components';
+import { SignIn } from 'app/pages/SignIn/SignIn';
 import { useAppState, useActions } from 'app/overmind';
 
 export const SignInModal = () => {
@@ -47,10 +49,35 @@ export const SignInModal = () => {
               bottom: 0,
               zIndex: 9999,
               background: 'rgba(0, 0, 0, 0.75)',
+
+              // OutsideClickHandler styles
+              // can't use styled(OutsideClickHandler)
+              '> div': {
+                flexGrow: 1,
+                maxWidth: '720px',
+              },
             }}
           >
             <OutsideClickHandler onOutsideClick={toggleSignInModal}>
-              <SignInModalElement redirectTo={redirectOnLogin} />
+              <Element
+                css={css({
+                  boxSizing: 'border-box',
+                  backgroundColor: '#1D1D1D',
+                  borderRadius: '4px',
+                  overflow: 'hidden',
+                  margin: 'auto',
+                  padding: '24px',
+                  width: '100%',
+
+                  // With tokens
+                  boxShadow: '2',
+                })}
+              >
+                <Stack direction="vertical" gap={64}>
+                  {/* <Element paddingBottom={6}>Welcome</Element> */}
+                  <SignIn redirectTo={redirectOnLogin} />
+                </Stack>
+              </Element>
             </OutsideClickHandler>
           </Stack>
         </motion.div>

packages/app/src/app/components/WorkspaceSelect/WorkspaceSelect.tsx

@@ -10,6 +10,7 @@ import {
 } from '@codesandbox/components';
 import { sortBy } from 'lodash-es';
 import { TeamAvatar } from 'app/components/TeamAvatar';
+import track from '@codesandbox/common/lib/utils/analytics';
 
 interface WorkspaceSelectProps {
   disabled?: boolean;
@@ -40,6 +41,22 @@ export const WorkspaceSelect: React.FC<WorkspaceSelectProps> = React.memo(
       ),
     ];
 
+    // The <Menu /> component doesn't have a callback like `onOpenChange`
+    // that we find in Radix. The "appropriate" solution would be to use
+    // a render callback to tell if the menu is expanded or not. Since
+    // our current implementation does not support render callbacks,
+    // the easiest solution is to check for the `aria-expanded` attr
+    // on the menu button.
+    const trackOpen = (e: React.MouseEvent<HTMLButtonElement>) => {
+      const isExpanded = e.currentTarget?.getAttribute('aria-expanded');
+      if (JSON.parse(isExpanded) === true) {
+        track('Workspace Selector - open menu', {
+          codesandbox: 'V1',
+          event_source: 'UI',
+        });
+      }
+    };
+
     return (
       <Tooltip
         label={
@@ -66,6 +83,7 @@ export const WorkspaceSelect: React.FC<WorkspaceSelectProps> = React.memo(
                   backgroundColor: '#242424',
                 },
               }}
+              onClick={trackOpen}
             >
               <Stack align="center" gap={1} css={{ paddingRight: 4 }}>
                 <Text
@@ -99,7 +117,13 @@ export const WorkspaceSelect: React.FC<WorkspaceSelectProps> = React.memo(
                   align="center"
                   gap={2}
                   css={{ borderBottom: '1px solid #343434' }}
-                  onSelect={() => onSelect(team.id)}
+                  onSelect={() => {
+                    track('Workspace Selector - Change Active Team', {
+                      codesandbox: 'V1',
+                      event_source: 'UI',
+                    });
+                    onSelect(team.id);
+                  }}
                 >
                   <TeamAvatar
                     avatar={
@@ -135,7 +159,14 @@ export const WorkspaceSelect: React.FC<WorkspaceSelectProps> = React.memo(
                 css={{
                   textAlign: 'left',
                 }}
-                onSelect={openCreateTeamModal}
+                onSelect={() => {
+                  track('Workspace Selector - Create Team', {
+                    codesandbox: 'V1',
+                    event_source: 'UI',
+                  });
+
+                  openCreateTeamModal();
+                }}
               >
                 <Stack
                   justify="center"

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

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+import { Button as ButtonComponent } from '@codesandbox/components';
+
+export const StyledButton = styled(ButtonComponent)`
+  height: auto;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 20px;
+  letter-spacing: -0.02em;
+  color: #151515;
+`;

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

@@ -0,0 +1,88 @@
+import React, { SelectHTMLAttributes } from 'react';
+import styled from 'styled-components';
+import { Element, Icon, Stack } from '@codesandbox/components';
+import { Label } from './Label';
+
+const StyledSelect = styled.select`
+  box-sizing: border-box;
+  appearance: none;
+
+  width: 100%;
+  padding: 12px 40px 12px 16px;
+  background-color: #2a2a2a;
+  font-family: 'Inter', sans-serif;
+  font-size: 16px;
+  color: #e5e5e5;
+  line-height: 24px;
+  border: none;
+  border-radius: 2px;
+
+  &:hover {
+    box-shadow: 0 0 0 2px #e5e5e51a;
+  }
+
+  &:focus {
+    outline: 1px solid #ac9cff;
+  }
+`;
+
+const DropdownIcon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  padding-right: 16px;
+`;
+
+interface InputSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  id: string;
+  label: string;
+  name: string;
+  options: Array<{ value: string; label: string }>;
+}
+
+export const InputSelect = ({
+  id,
+  label,
+  name,
+  options,
+  placeholder,
+  ...restProps
+}: InputSelectProps) => {
+  return (
+    <Stack gap={2} direction="vertical">
+      <Label htmlFor={id}>{label}</Label>
+      <Element css={{ position: 'relative' }}>
+        <StyledSelect
+          name={name}
+          id={id}
+          /**
+           * When a placeholder is set it should use it as a default value. Unless it has a value
+           * prop, but we need TODO implement that later.
+           */
+          defaultValue={placeholder ? '' : undefined}
+          {...restProps}
+        >
+          {placeholder ? (
+            <option value="" disabled>
+              {placeholder}
+            </option>
+          ) : null}
+
+          {options.map(option => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </StyledSelect>
+        <DropdownIcon>
+          <Icon name="caret" size={8} />
+        </DropdownIcon>
+      </Element>
+    </Stack>
+  );
+};

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

@@ -0,0 +1,51 @@
+import React, { InputHTMLAttributes } from 'react';
+import styled from 'styled-components';
+import { Stack } from '@codesandbox/components';
+import { Label } from './Label';
+
+const StyledInput = styled.input<{ isInvalid?: boolean }>`
+  padding: 12px 16px;
+  background-color: #2a2a2a;
+  font-family: 'Inter', sans-serif;
+  font-size: 16px;
+  color: #e5e5e5;
+  line-height: 24px;
+  border: none;
+  border-radius: 2px;
+
+  ${props => (props.isInvalid ? 'outline: 1px solid #EB5E5E;' : '')}
+
+  &:hover {
+    box-shadow: 0 0 0 2px #e5e5e51a;
+  }
+
+  &:focus {
+    outline: 1px solid #ac9cff;
+  }
+`;
+
+interface InputTextProps extends InputHTMLAttributes<HTMLInputElement> {
+  id: string;
+  label: string;
+  name: string;
+  isInvalid?: boolean;
+}
+
+export const InputText = ({
+  id,
+  label,
+  name,
+  isInvalid,
+  ...restProps
+}: InputTextProps) => (
+  <Stack gap={2} direction="vertical">
+    <Label htmlFor={id}>{label}</Label>
+    <StyledInput
+      id={id}
+      name={name}
+      type="text"
+      isInvalid={isInvalid}
+      {...restProps}
+    />
+  </Stack>
+);

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

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { Text } from '@codesandbox/components';
+
+interface LabelProps {
+  htmlFor: string;
+  children: string;
+}
+
+export const Label = ({ htmlFor, children }: LabelProps) => (
+  <Text
+    as="label"
+    htmlFor={htmlFor}
+    size={12}
+    css={{ color: '#999999', letterSpacing: '0.005em' }}
+  >
+    {children}
+  </Text>
+);