feat(import): step 1 + step 2 (#6957)

* wip: Import step 1

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* import: handle unauthenticated (#6958)

* fix CloudBetaBadge import

* fix default selected tab

* fix: focus on slash key press

* remove privacy settings

* wip

* address pr comments

Author: olarclara

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

@@ -33,6 +33,9 @@ import { CloudBetaBadge } from '../../CloudBetaBadge';
 import { CreateSandboxParams } from './types';
 import { SearchBox } from './SearchBox';
 import { SearchResults } from './SearchResults';
+import { GithubRepoToImport } from './Import/types';
+import { ImportInfo } from './Import/ImportInfo';
+import { FromRepo } from './Import/FromRepo';
 
 export const COLUMN_MEDIA_THRESHOLD = 1600;
 
@@ -81,9 +84,11 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
 }) => {
   const { hasLogIn, activeTeamInfo, user } = useAppState();
   const actions = useActions();
-  const isSyncedSandboxesPage = location.pathname.includes('/synced-sandboxes');
+  const isUnderRepositoriesSection =
+    location.pathname.includes('/my-contributions') ||
+    location.pathname.includes('/repositories');
   const defaultSelectedTab =
-    initialTab || isSyncedSandboxesPage ? 'import' : 'quickstart';
+    initialTab || isUnderRepositoriesSection ? 'import' : 'quickstart';
   const isUser = user?.username === activeTeamInfo?.name;
 
   /**
@@ -141,8 +146,10 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
   const [viewState, setViewState] = useState<
     'initial' | 'fromTemplate' | 'fork'
   >('initial');
-  // ❗️ We could combine viewState with selectedtemplate to limit the amout of states.
+  // ❗️ We could combine viewState with selectedTemplate
+  // and selectedRepo to limit the amount of states.
   const [selectedTemplate, setSelectedTemplate] = useState<TemplateFragment>();
+  const [selectedRepo, setSelectedRepo] = useState<GithubRepoToImport>();
   const [searchQuery, setSearchQuery] = useState<string>('');
 
   useEffect(() => {
@@ -174,6 +181,11 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
     setViewState('fromTemplate');
   };
 
+  const selectGithubRepo = (repo: GithubRepoToImport) => {
+    setSelectedRepo(repo);
+    setViewState('fork');
+  };
+
   return (
     <ThemeProvider>
       <Container>
@@ -298,7 +310,9 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
             {viewState === 'fromTemplate' ? (
               <TemplateInfo template={selectedTemplate} />
             ) : null}
-            {viewState === 'fork' ? <div>Repo info</div> : null}
+            {viewState === 'fork' ? (
+              <ImportInfo githubRepo={selectedRepo} />
+            ) : null}
           </ModalSidebar>
 
           <ModalContent>
@@ -319,7 +333,7 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
                   </Panel>
 
                   <Panel tab={tabState} id="import">
-                    <Import />
+                    <Import onRepoSelect={selectGithubRepo} />
                   </Panel>
 
                   {showTeamTemplates ? (
@@ -383,7 +397,9 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
               />
             ) : null}
 
-            {viewState === 'fork' ? <div>Repo fork form fields</div> : null}
+            {viewState === 'fork' ? (
+              <FromRepo githubRepo={selectedRepo} />
+            ) : null}
           </ModalContent>
         </ModalBody>
       </Container>

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

@@ -0,0 +1,124 @@
+import { useAppState } from 'app/overmind';
+import React, { useState } from 'react';
+import {
+  Button,
+  Element,
+  Icon,
+  Input,
+  Label,
+  Stack,
+  Text,
+} from '@codesandbox/components';
+import { CloudBetaBadge } from 'app/components/CloudBetaBadge';
+import { GithubRepoToImport } from './types';
+import { StyledSelect } from '../elements';
+
+export const FromRepo: React.FC<{ githubRepo: GithubRepoToImport }> = ({
+  githubRepo,
+}) => {
+  const { user, dashboard, activeTeam } = useAppState();
+
+  const [repoName, setRepoName] = useState<string>(githubRepo.name);
+  const [selectedTeam, setSelectedTeam] = useState<string>(activeTeam);
+
+  return (
+    <Stack
+      direction="vertical"
+      gap={7}
+      css={{ width: '100%', height: '100%', paddingBottom: '24px' }}
+    >
+      <Stack css={{ justifyContent: 'space-between' }}>
+        <Text
+          as="h2"
+          css={{
+            fontSize: '16px',
+            fontWeight: 500,
+            margin: 0,
+            lineHeight: 1.5,
+          }}
+        >
+          Create new fork
+        </Text>
+        <CloudBetaBadge />
+      </Stack>
+
+      <Element
+        as="form"
+        css={{
+          display: 'flex',
+          flexDirection: 'column',
+          width: '100%',
+          height: '100%',
+          justifyContent: 'space-between',
+        }}
+        onSubmit={e => {
+          e.preventDefault();
+        }}
+      >
+        <Stack direction="vertical" gap={6}>
+          <Stack direction="vertical" gap={2}>
+            <Input
+              css={{
+                fontFamily: 'inherit',
+                height: '48px',
+                padding: '8px 16px',
+                backgroundColor: '#2a2a2a',
+                color: '#e5e5e5',
+                border: 'none',
+                borderRadius: '2px',
+                fontSize: '13px',
+                lineHeight: '16px',
+                fontWeight: 500,
+              }}
+              autoFocus
+              id="repo-name"
+              type="text"
+              aria-label="Repository name"
+              placeholder="Repository name"
+              value={repoName}
+              onChange={e => setRepoName(e.target.value)}
+              required
+            />
+          </Stack>
+
+          <Label css={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+            <Text as="span" size={2} css={{ color: '#808080' }}>
+              Git organization
+            </Text>
+            <StyledSelect
+              css={{
+                color: '#e5e5e5',
+              }}
+              icon={() => <Icon css={{ marginLeft: 8 }} name="github" />}
+              onChange={e => {
+                setSelectedTeam(e.target.value);
+              }}
+              value={selectedTeam}
+              disabled={!user || !dashboard.teams}
+            >
+              {dashboard.teams.map(team => (
+                <option key={team.id}>{team.name}</option>
+              ))}
+            </StyledSelect>
+          </Label>
+        </Stack>
+
+        <Stack css={{ justifyContent: 'flex-end' }}>
+          <Stack gap={2}>
+            <Button
+              type="button"
+              variant="secondary"
+              //   onClick={onCancel}
+              css={{ width: 'auto' }}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" variant="primary" css={{ width: 'auto' }}>
+              Create repository
+            </Button>
+          </Stack>
+        </Stack>
+      </Element>
+    </Stack>
+  );
+};