chore: dashboard release (#6987)

* Update styles (#6962)

* ui(create-modal): polish card sizes and overflow (#6959)

* ui(create-modal): polish card sizes and overflow

* chore: disable checkbox for creating repo from sandbox

* feat(responsive-modal): lazy implementation, but it works

* chore: remove skeleton loading for mobile

* fix: initial orientation based on mobile view

* feat(dashboard): import and redirect if user has write access (#6964)

* wip

* Update useImportAndRedirect.tsx and api.ts

* loading state when importing

* fix auth

* feat: move to recent on workspace change and reset state data (#6966)

* feat(dashboard): Implement empty state for repos and contributions (#6965)

* Create contributions empty state

* Open create sandbox modal on import tab

* Hide image when screen is small

* Repositories empty state

* Responsively stack buttons

* Comment start from template button for later

* feat(dashboard): fork repositories from github (#6967)

* fix: text-overflow for folders in sidebar (#6972)

* Fix(dashboard): Use react router links (#6975)

* Use react router link for sandboxes

* Use react router Link for Repository cards and listitems

* feat(dashboard): Implement notifications (#6973)

* Implement notifications first draft

* Add border radius to Notification

* Call items to show once and move dismissal logic to notification

* Fix indicator and highlight text

* feat(dashboard): Whats new modal (#6971)

* Create whats new modal

* Show whatsnew modal based on storage

* Responsive modal

* Remove whats new text

* Add grid icon

* Update text

* fix: sort recents by lastAccessedAt (#6969)

* fix: sort recents by lastAccessedAt

* fix: remove fields to avoid typecheck errors (not used yet)

* Change section names on sidebar (#6961)

* Change section names on sidebar

* Change breadcrumb section title

* Change CTA text on Header (#6976)

* QA: Review Branch and Synced Sandboxes Branch cards (#6978)

* Review synced sanboxes and branch cards

* Correct paddingX of Repository cards

* QA: Change 'Recent'page title and notification colors (#6979)

* Change recent page title

* Change colors of notifications

* feat: create branch / import repo cards (#6977)

* feat: create branch / import repo cards

* fix: replace + with Icon

* fix: size and color for cards

* fix: filter recent branches by teamId (#6970)

* fix: filter recent branches by teamId

* fix: build

* feat(create-new): Analytics (#6981)

* Track Click Create New

* Track clicks on tabs

* Track import button clicked

* Track import and fork

* Add template forking tracking

* Show empty state instead of import button when no repos (#6982)

* fix: one-click sandbox create and proper redirect to v2 editor (#6983)

* fix: sort repos by name (#6985)

* chore: update quick start selection

* chore: change order for quick start

* feat(dashboard): Learn more links point to blogpost (#6984)

* Add temporary hrefs to learn more links

* Add target blank

* Accept rel prop on Button component

* Style adjusments to New modal (#6988)

* Style adjusments to New modal

* Fixing type error

* chore: remove unimplemented action from dropdown (#6991)

Co-authored-by: Zeh Fernandes <[email protected]>
Co-authored-by: Maria Clara <[email protected]>
Co-authored-by: Tristan <[email protected]>
Co-authored-by: Lena Sotto Mayor <[email protected]>

Author: 5 people

packages/app/package.json

@@ -228,6 +228,7 @@
     "shelljs": "^0.7.8",
     "store": "^2.0.12",
     "string-replace-loader": "^2.1.1",
+    "string-similarity": "^4.0.4",
     "styled-components": "^5.2.0",
     "subworkers": "^1.0.1",
     "svg-react-loader": "^0.4.4",

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

@@ -12,6 +12,7 @@ import { TabStateReturn, useTabState } from 'reakit/Tab';
 import slugify from '@codesandbox/common/lib/utils/slugify';
 import { getTemplateIcon } from '@codesandbox/common/lib/utils/getTemplateIcon';
 import { TemplateFragment } from 'app/graphql/types';
+import track from '@codesandbox/common/lib/utils/analytics';
 
 import {
   Container,
@@ -42,13 +43,14 @@ export const COLUMN_MEDIA_THRESHOLD = 1600;
 const QUICK_START_IDS = [
   'new',
   'rjk9n4zj7m', // static v1
-  'k8dsq1', // blank v2
+  'vue',
   'fxis37', // next v2
   'prp60l', // remix v2
-  '6xxu1m', // nuxt (TODO: move it to v2 and make it official)
-  'vue',
-  'svelte',
+  'k8dsq1', // blank v2
+  // '6xxu1m', // nuxt v2
+  'vanilla',
   'angular',
+  'react-ts',
 ];
 
 interface PanelProps {
@@ -90,6 +92,8 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
   const defaultSelectedTab =
     initialTab || isUnderRepositoriesSection ? 'import' : 'quickstart';
   const isUser = user?.username === activeTeamInfo?.name;
+  const mediaQuery = window.matchMedia('screen and (max-width: 950px)');
+  const mobileScreenSize = mediaQuery.matches;
 
   /**
    * Checking for user because user is undefined when landing on /s/, even though
@@ -139,7 +143,7 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
     teamTemplatesData.state === 'ready' ? teamTemplatesData.teamTemplates : [];
 
   const tabState = useTabState({
-    orientation: 'vertical',
+    orientation: mobileScreenSize ? 'horizontal' : 'vertical',
     selectedId: defaultSelectedTab,
   });
 
@@ -148,7 +152,7 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
   >('initial');
   // ❗️ We could combine viewState with selectedTemplate
   // and selectedRepo to limit the amount of states.
-  const [selectedTemplate, setSelectedTemplate] = useState<TemplateFragment>();
+  const [selectedTemplate] = useState<TemplateFragment>();
   const [selectedRepo, setSelectedRepo] = useState<GithubRepoToImport>();
   const [searchQuery, setSearchQuery] = useState<string>('');
 
@@ -177,8 +181,11 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
   };
 
   const selectTemplate = (template: TemplateFragment) => {
-    setSelectedTemplate(template);
-    setViewState('fromTemplate');
+    createFromTemplate(template, {});
+
+    // Temporarily disable the second screen until we have more functionality on it
+    // setSelectedTemplate(template);
+    // setViewState('fromTemplate');
   };
 
   const selectGithubRepo = (repo: GithubRepoToImport) => {
@@ -189,7 +196,14 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
   return (
     <ThemeProvider>
       <Container>
-        <Stack gap={4} align="center" css={{ width: '100%', padding: '24px' }}>
+        <Stack
+          gap={4}
+          align="center"
+          css={{
+            width: '100%',
+            padding: mobileScreenSize ? '16px' : '24px',
+          }}
+        >
           <HeaderInformation>
             {viewState === 'initial' ? (
               <Text size={4} variant="muted">
@@ -246,30 +260,80 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
             {viewState === 'initial' ? (
               <Stack direction="vertical">
                 <Tabs {...tabState} aria-label="Create new">
-                  <Tab {...tabState} stopId="quickstart">
+                  <Tab
+                    {...tabState}
+                    onClick={() => {
+                      track('Create New - Click Quick Start', {
+                        codesandbox: 'V1',
+                        event_source: 'UI',
+                      });
+                    }}
+                    stopId="quickstart"
+                  >
                     Quick start
                   </Tab>
 
-                  <Tab {...tabState} stopId="import">
+                  <Tab
+                    {...tabState}
+                    onClick={() => {
+                      track('Create New - Click Import from Github', {
+                        codesandbox: 'V1',
+                        event_source: 'UI',
+                      });
+                    }}
+                    stopId="import"
+                  >
                     Import from GitHub
                   </Tab>
 
                   <Element css={{ height: '24px' }} />
 
                   {showTeamTemplates ? (
-                    <Tab {...tabState} stopId="team-templates">
+                    <Tab
+                      {...tabState}
+                      onClick={() => {
+                        track(
+                          `Create New - Click ${
+                            isUser ? 'My' : 'Team'
+                          } Templates`,
+                          {
+                            codesandbox: 'V1',
+                            event_source: 'UI',
+                          }
+                        );
+                      }}
+                      stopId="team-templates"
+                    >
                       {`${isUser ? 'My' : 'Team'} templates`}
                     </Tab>
                   ) : null}
 
-                  <Tab {...tabState} stopId="cloud-templates">
+                  <Tab
+                    {...tabState}
+                    onClick={() => {
+                      track('Create New - Click Cloud templates', {
+                        codesandbox: 'V1',
+                        event_source: 'UI',
+                      });
+                    }}
+                    stopId="cloud-templates"
+                  >
                     <Stack gap={2}>
                       <span>Cloud templates</span>
                       <CloudBetaBadge hideIcon />
                     </Stack>
                   </Tab>
 
-                  <Tab {...tabState} stopId="official-templates">
+                  <Tab
+                    {...tabState}
+                    onClick={() => {
+                      track('Create New - Click Official Templates', {
+                        codesandbox: 'V1',
+                        event_source: 'UI',
+                      });
+                    }}
+                    stopId="official-templates"
+                  >
                     Official templates
                   </Tab>
 
@@ -279,13 +343,19 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
                           key={essential.key}
                           {...tabState}
                           stopId={slugify(essential.title)}
+                          onClick={() => {
+                            track(`Create New - Click ${essential.title}`, {
+                              codesandbox: 'V1',
+                              event_source: 'UI',
+                            });
+                          }}
                         >
                           {essential.title}
                         </Tab>
                       ))
                     : null}
 
-                  {essentialState.state === 'loading' ? (
+                  {!mobileScreenSize && essentialState.state === 'loading' ? (
                     <Stack direction="vertical" css={{ marginTop: 6 }} gap={5}>
                       <SkeletonText css={{ width: 100 }} />
                       <SkeletonText css={{ width: 90 }} />
@@ -328,7 +398,14 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
                     <TemplateCategoryList
                       title="Start from a template"
                       templates={quickStartTemplates}
-                      onSelectTemplate={selectTemplate}
+                      onSelectTemplate={template => {
+                        track('Create New - Fork Quickstart template', {
+                          codesandbox: 'V1',
+                          event_source: 'UI',
+                        });
+
+                        selectTemplate(template);
+                      }}
                     />
                   </Panel>
 
@@ -343,27 +420,49 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
                           isUser ? 'My' : activeTeamInfo.name
                         } templates`}
                         templates={teamTemplates}
-                        onSelectTemplate={selectTemplate}
+                        onSelectTemplate={template => {
+                          track(
+                            `Create New - Fork ${
+                              isUser ? 'my' : 'team'
+                            } template`,
+                            { codesandbox: 'V1', event_source: 'UI' }
+                          );
+
+                          selectTemplate(template);
+                        }}
                       />
                     </Panel>
                   ) : null}
 
                   <Panel tab={tabState} id="cloud-templates">
                     <TemplateCategoryList
                       title="Cloud templates"
-                      showBetaTag
                       templates={officialTemplates.filter(
                         template => template.sandbox.isV2
                       )}
-                      onSelectTemplate={selectTemplate}
+                      onSelectTemplate={template => {
+                        track('Create New - Fork Cloud template', {
+                          codesandbox: 'V1',
+                          event_source: 'UI',
+                        });
+
+                        selectTemplate(template);
+                      }}
                     />
                   </Panel>
 
                   <Panel tab={tabState} id="official-templates">
                     <TemplateCategoryList
                       title="Official templates"
                       templates={officialTemplates}
-                      onSelectTemplate={selectTemplate}
+                      onSelectTemplate={template => {
+                        track('Create New - Fork Official template', {
+                          codesandbox: 'V1',
+                          event_source: 'UI',
+                        });
+
+                        selectTemplate(template);
+                      }}
                     />
                   </Panel>
 
@@ -377,7 +476,14 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
                           <TemplateCategoryList
                             title={essential.title}
                             templates={essential.templates}
-                            onSelectTemplate={selectTemplate}
+                            onSelectTemplate={template => {
+                              track('Create New - Fork Essential template', {
+                                codesandbox: 'V1',
+                                event_source: 'UI',
+                              });
+
+                              selectTemplate(template);
+                            }}
                           />
                         </Panel>
                       ))
@@ -398,7 +504,12 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
             ) : null}
 
             {viewState === 'fork' ? (
-              <FromRepo githubRepo={selectedRepo} />
+              <FromRepo
+                repository={selectedRepo}
+                onCancel={() => {
+                  setViewState('initial');
+                }}
+              />
             ) : null}
           </ModalContent>
         </ModalBody>
@@ -421,12 +532,14 @@ const TemplateInfo = ({ template }: TemplateInfoProps) => {
     <Stack direction="vertical" gap={6}>
       <UserIcon />
       <Stack direction="vertical">
-        <Text size={3}>{template.sandbox.title}</Text>
-        <Text size={2} css={{ color: '#808080' }}>
+        <Text size={3} weight="500">
+          {template.sandbox.title}
+        </Text>
+        <Text size={2} css={{ color: '#999', marginTop: '4px' }}>
           {template.sandbox.collection?.team?.name}
         </Text>
       </Stack>
-      <Text size={2} css={{ color: '#808080' }}>
+      <Text size={2} css={{ color: '#999', lineHeight: '1.4' }}>
         {template.sandbox.description}
       </Text>
     </Stack>

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

@@ -9,7 +9,7 @@ import {
   Text,
 } from '@codesandbox/components';
 
-import { StyledInput, StyledLabel, StyledSelect } from './elements';
+import { StyledInput, StyledSelect } from './elements';
 import { CloudBetaBadge } from '../../CloudBetaBadge';
 import { CreateSandboxParams } from './types';
 
@@ -29,7 +29,10 @@ export const FromTemplate: React.FC<FromTemplateProps> = ({
   // TODO: Set generated name as default value if we can / need
   // otherwise tell the user if empty we generate a name
   const [sandboxName, setSandboxName] = useState<string>();
-  const [createRepo, setCreateRepo] = useState<boolean>(false);
+
+  const createRepo = false;
+  // TODO: Enable when checkbox is active again
+  // const [createRepo, setCreateRepo] = useState<boolean>(false);
   const [selectedTeam, setSelectedTeam] = useState<string>(activeTeam);
 
   return (
@@ -88,30 +91,28 @@ export const FromTemplate: React.FC<FromTemplateProps> = ({
               id="name-desc"
               css={{ color: '#999999', fontSize: '12px' }}
             >
-              Leaving the field empty will generate a random name.
+              Leaving this field empty will generate a random name.
             </Element>
           </Stack>
 
           <Checkbox
             id="sb-repo"
-            onChange={e => {
-              setCreateRepo(e.target.checked);
-            }}
+            disabled
             checked={createRepo}
             label={
-              <StyledLabel
+              <Text
                 css={{
                   fontSize: 13,
                   display: 'block',
                   marginTop: 2,
                   marginLeft: 4,
+                  color: '#999999',
+                  lineHeight: '16px',
                 }}
-                htmlFor="sb-repo"
               >
-                Create git repository
-              </StyledLabel>
+                Create git repository (coming soon)
+              </Text>
             }
-            disabled={!hasLogIn || !user || !dashboard.teams}
           />
 
           {createRepo ? (
@@ -140,7 +141,11 @@ export const FromTemplate: React.FC<FromTemplateProps> = ({
             >
               Cancel
             </Button>
-            <Button type="submit" variant="primary" css={{ width: 'auto' }}>
+            <Button
+              type="submit"
+              variant="primary"
+              css={{ width: 'auto', paddingRight: 24, paddingLeft: 24 }}
+            >
               Create Sandbox
             </Button>
           </Stack>