Implement creating project by importing repository (#49)

* Implement create project with import repository

* Add button for creating project in deploy step

packages/frontend/src/components/projects/create/ConnectAccount.tsx

@@ -10,10 +10,10 @@ const GITHUB_OAUTH_URL = `https://github.com/login/oauth/authorize?client_id=${
 }&scope=${encodeURIComponent(SCOPES)}`;
 
 interface ConnectAccountInterface {
-  onToken: (token: string) => void;
+  onAuth: (token: string) => void;
 }
 
-const ConnectAccount = ({ onToken }: ConnectAccountInterface) => {
+const ConnectAccount = ({ onAuth: onToken }: ConnectAccountInterface) => {
   const client = useGQLClient();
 
   const handleCode = async (code: string) => {

packages/frontend/src/components/projects/create/Deploy.tsx

@@ -0,0 +1,76 @@
+import React, { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { Button, Typography } from '@material-tailwind/react';
+
+import { DeployStep, DeployStatus } from './DeployStep';
+import { Stopwatch, setStopWatchOffset } from '../../StopWatch';
+import ConfirmDialog from '../../shared/ConfirmDialog';
+
+const Deploy = () => {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(!open);
+  const navigate = useNavigate();
+
+  const handleCancel = useCallback(() => {
+    navigate('/projects/create');
+  }, []);
+
+  return (
+    <div>
+      <div className="flex justify-between mb-6">
+        <div>
+          <h4>Deployment started ...</h4>
+          <div className="flex">
+            ^&nbsp;
+            <Stopwatch
+              offsetTimestamp={setStopWatchOffset(Date.now().toString())}
+            />
+          </div>
+        </div>
+        <div>
+          <Button onClick={handleOpen} variant="outlined" size="sm">
+            ^ Cancel
+          </Button>
+        </div>
+        <ConfirmDialog
+          dialogTitle="Cancel deployment?"
+          handleOpen={handleOpen}
+          open={open}
+          confirmButtonTitle="Yes, Cancel deployment"
+          handleConfirm={handleCancel}
+          color="red"
+        >
+          <Typography variant="small">
+            This will halt the deployment and you will have to start the process
+            from scratch.
+          </Typography>
+        </ConfirmDialog>
+      </div>
+      <DeployStep
+        title="Building"
+        status={DeployStatus.COMPLETE}
+        step="1"
+        processTime="72000"
+      />
+      <DeployStep
+        title="Deployment summary"
+        status={DeployStatus.PROCESSING}
+        step="2"
+        startTime={Date.now().toString()}
+      />
+      <DeployStep
+        title="Running checks"
+        status={DeployStatus.NOT_STARTED}
+        step="3"
+      />
+      <DeployStep
+        title="Assigning domains"
+        status={DeployStatus.NOT_STARTED}
+        step="4"
+      />
+    </div>
+  );
+};
+
+export default Deploy;

packages/frontend/src/components/projects/create/DeployStep.tsx

@@ -3,9 +3,9 @@ import toast from 'react-hot-toast';
 
 import { Collapse, Button, Typography } from '@material-tailwind/react';
 
-import { Stopwatch, setStopWatchOffset } from '../../../../StopWatch';
-import FormatMillisecond from '../../../../FormatMilliSecond';
-import processLogs from '../../../../../assets/process-logs.json';
+import { Stopwatch, setStopWatchOffset } from '../../StopWatch';
+import FormatMillisecond from '../../FormatMilliSecond';
+import processLogs from '../../../assets/process-logs.json';
 
 enum DeployStatus {
   PROCESSING = 'progress',

packages/frontend/src/components/projects/create/ProjectRepoCard.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 import { Chip, IconButton } from '@material-tailwind/react';
 
@@ -7,39 +8,36 @@ import { GitRepositoryDetails } from '../../../types/project';
 
 interface ProjectRepoCardProps {
   repository: GitRepositoryDetails;
-  onClick: () => void;
 }
 
-const ProjectRepoCard: React.FC<ProjectRepoCardProps> = ({
-  repository,
-  onClick,
-}) => {
+const ProjectRepoCard: React.FC<ProjectRepoCardProps> = ({ repository }) => {
   return (
-    <div
-      className="group flex items-center gap-4 text-gray-500 text-xs hover:bg-gray-100 p-2 cursor-pointer"
-      onClick={onClick}
+    <Link
+      to={`import?owner=${repository.owner?.login}&repo=${repository.name}`}
     >
-      <div>^</div>
-      <div className="grow">
-        <div>
-          <span className="text-black">{repository.full_name}</span>
-          {repository.visibility === 'private' ? (
-            <Chip
-              className="normal-case inline ml-6 bg-[#FED7AA] text-[#EA580C] font-normal"
-              size="sm"
-              value="Private"
-              icon={'^'}
-            />
-          ) : (
-            ''
-          )}
+      <div className="group flex items-center gap-4 text-gray-500 text-xs hover:bg-gray-100 p-2 cursor-pointer">
+        <div>^</div>
+        <div className="grow">
+          <div>
+            <span className="text-black">{repository.full_name}</span>
+            {repository.visibility === 'private' ? (
+              <Chip
+                className="normal-case inline ml-6 bg-[#FED7AA] text-[#EA580C] font-normal"
+                size="sm"
+                value="Private"
+                icon={'^'}
+              />
+            ) : (
+              ''
+            )}
+          </div>
+          <p>{repository.updated_at && relativeTime(repository.updated_at)}</p>
+        </div>
+        <div className="hidden group-hover:block">
+          <IconButton size="sm">{'>'}</IconButton>
         </div>
-        <p>{repository.updated_at && relativeTime(repository.updated_at)}</p>
       </div>
-      <div className="hidden group-hover:block">
-        <IconButton size="sm">{'>'}</IconButton>
-      </div>
-    </div>
+    </Link>
   );
 };
 

packages/frontend/src/components/projects/create/RepositoryList.tsx

@@ -13,14 +13,10 @@ const DEFAULT_SEARCHED_REPO = '';
 const REPOS_PER_PAGE = 5;
 
 interface RepositoryListProps {
-  repoSelectionHandler: (repo: GitRepositoryDetails) => void;
   octokit: Octokit;
 }
 
-const RepositoryList = ({
-  repoSelectionHandler,
-  octokit,
-}: RepositoryListProps) => {
+const RepositoryList = ({ octokit }: RepositoryListProps) => {
   const [searchedRepo, setSearchedRepo] = useState(DEFAULT_SEARCHED_REPO);
   const [selectedAccount, setSelectedAccount] = useState('');
   const [orgs, setOrgs] = useState<GitOrgDetails[]>([]);
@@ -135,15 +131,7 @@ const RepositoryList = ({
       </div>
       {Boolean(repositoryDetails.length) ? (
         repositoryDetails.map((repo, key) => {
-          return (
-            <ProjectRepoCard
-              repository={repo}
-              key={key}
-              onClick={() => {
-                repoSelectionHandler(repo);
-              }}
-            />
-          );
+          return <ProjectRepoCard repository={repo} key={key} />;
         })
       ) : (
         <div className="mt-4 p-6 flex items-center justify-center">