Implement confirmation dialog and menu popup (#12)

* Implement confirmation dialog for cancel deployment

* Add menu to project and deployment card

* Use dropdown for account selection

* Organize create project components

* Refactor cancel deployment dialog

* Fix cancel button flex align

* Fix typo

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>

packages/frontend/src/components/projects/ProjectCard.tsx

@@ -1,6 +1,13 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
+import {
+  Menu,
+  MenuHandler,
+  MenuList,
+  MenuItem,
+} from '@material-tailwind/react';
+
 import { relativeTime } from '../../utils/time';
 import { ProjectDetails } from '../../types/project';
 
@@ -19,7 +26,15 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
           </Link>
           <p className="text-sm text-gray-400">{project.domain}</p>
         </div>
-        <div>...</div>
+        <Menu placement="bottom-end">
+          <MenuHandler>
+            <button>...</button>
+          </MenuHandler>
+          <MenuList>
+            <MenuItem>^ Project settings</MenuItem>
+            <MenuItem className="text-red-500">^ Delete project</MenuItem>
+          </MenuList>
+        </Menu>
       </div>
       <div className="border-slate-200 border-t-2 border-solid p-4 text-gray-500 text-xs">
         <p>{project.latestCommit.message}</p>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { relativeTime } from '../utils/time';
+import { relativeTime } from '../../../utils/time';
 
 interface RepositoryDetails {
   title: string;

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

@@ -1,18 +1,25 @@
 import React from 'react';
 
-import SearchBar from './SearchBar';
+import SearchBar from '../../SearchBar';
 import ProjectRepoCard from './ProjectRepoCard';
-import repositoryDetails from '../assets/repositories.json';
+import repositoryDetails from '../../../assets/repositories.json';
+import Dropdown from '../../Dropdown';
+
+const ACCOUNT_OPTIONS = [
+  { value: 'alice', label: 'Alice' },
+  { value: 'bob', label: 'Bob' },
+  { value: 'charlie', label: 'Charlie' },
+];
 
 const RepositoryList = () => {
   return (
     <div className="p-4">
       <div className="flex">
         <div className="basis-1/3">
-          <input
+          <Dropdown
-            type="text"
             placeholder="All accounts"
-            className="text-gray-700 text-xs w-full border-none focus:outline-none"
+            options={ACCOUNT_OPTIONS}
+            onChange={() => {}}
           />
         </div>
         <div className="basis-2/3">

packages/frontend/src/components/projects/create/template/deploy/CancelDeploymentDialog.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import {
+  Button,
+  Dialog,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+} from '@material-tailwind/react';
+
+interface CancelDeploymentDialogProp {
+  open: boolean;
+  handleOpen: () => void;
+}
+
+const CancelDeploymentDialog = ({
+  open,
+  handleOpen,
+}: CancelDeploymentDialogProp) => {
+  return (
+    <Dialog open={open} handler={handleOpen}>
+      <DialogHeader className="flex justify-between">
+        <div>Cancel deployment?</div>
+        <Button
+          variant="outlined"
+          onClick={handleOpen}
+          className="mr-1 rounded-3xl"
+        >
+          <span>X</span>
+        </Button>
+      </DialogHeader>
+      <DialogBody>
+        This will halt the deployment and you will have to start the process
+        from scratch.
+      </DialogBody>
+      <DialogFooter className="flex justify-center">
+        <Button variant="outlined" onClick={handleOpen} className="mr-1">
+          <span>Cancel</span>
+        </Button>
+        <Link to="/projects/create/template/">
+          <Button variant="gradient" color="red" onClick={handleOpen}>
+            <span>Yes, Cancel deployment</span>
+          </Button>
+        </Link>
+      </DialogFooter>
+    </Dialog>
+  );
+};
+
+export default CancelDeploymentDialog;

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

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
-import { Stopwatch, setStopWatchOffset } from './StopWatch';
+import { Stopwatch, setStopWatchOffset } from '../../../../StopWatch';
-import FormatMillisecond from './FormatMilliSecond';
+import FormatMillisecond from '../../../../FormatMilliSecond';
 
 const PROCESS_LOGS = [
   'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',

packages/frontend/src/components/projects/project/DeploymentDetailsCard.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
 
+import {
+  Menu,
+  MenuHandler,
+  MenuList,
+  MenuItem,
+} from '@material-tailwind/react';
+
 import { relativeTime } from '../../../utils/time';
 
 interface DeploymentDetails {
@@ -39,7 +46,19 @@ const DeployDetailsCard = ({ deployment }: DeployDetailsCardProps) => {
         <p className="grow">
           {relativeTime(deployment.updatedAt)} ^ {deployment.author}
         </p>
+        <Menu placement="bottom-start">
+          <MenuHandler>
             <button className="self-start">...</button>
+          </MenuHandler>
+          <MenuList>
+            <MenuItem>^ Visit</MenuItem>
+            <MenuItem>^ Assign domain</MenuItem>
+            <MenuItem>^ Change to production</MenuItem>
+            <hr className="my-3" />
+            <MenuItem>^ Redeploy</MenuItem>
+            <MenuItem>^ Rollback to this version</MenuItem>
+          </MenuList>
+        </Menu>
       </div>
     </div>
   );

packages/frontend/src/components/projects/project/DeploymentsTabPanel.tsx

@@ -5,8 +5,9 @@ import DeployDetailsCard from './DeploymentDetailsCard';
 import Dropdown from '../../Dropdown';
 
 const STATUS_OPTIONS = [
-  { value: 'production', label: 'Production' },
+  { value: 'building', label: 'Building' },
-  { value: 'preview', label: 'Preview' },
+  { value: 'ready', label: 'Ready' },
+  { value: 'error', label: 'Error' },
 ];
 
 const DeploymentsTabPanel = () => {

packages/frontend/src/pages/projects/create/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
 import templateDetails from '../../../assets/templates.json';
-import TemplateCard from '../../../components/TemplateCard';
+import TemplateCard from '../../../components/projects/create/TemplateCard';
-import RepositoryList from '../../../components/RepositoryList';
+import RepositoryList from '../../../components/projects/create/RepositoryList';
-import ConnectAccount from '../../../components/ConnectAccount';
+import ConnectAccount from '../../../components/projects/create/ConnectAccount';
 
 const IS_GIT_AUTH = true;
 

packages/frontend/src/pages/projects/create/template/Deploy.tsx

@@ -1,12 +1,21 @@
 import React from 'react';
 
-import { DeployStep, DeployStatus } from '../../../../components/DeployStep';
+import { Button } from '@material-tailwind/react';
+
+import {
+  DeployStep,
+  DeployStatus,
+} from '../../../../components/projects/create/template/deploy/DeployStep';
 import {
   Stopwatch,
   setStopWatchOffset,
 } from '../../../../components/StopWatch';
+import CancelDeploymentDialog from '../../../../components/projects/create/template/deploy/CancelDeploymentDialog';
 
 const Deploy = () => {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(!open);
+
   return (
     <div>
       <div className="flex justify-between mb-6">
@@ -20,8 +29,11 @@ const Deploy = () => {
           </div>
         </div>
         <div>
-          <button className="border rounded-xl p-1 text-sm">^Cancel</button>
+          <Button onClick={handleOpen} variant="outlined" size="sm">
+            ^Cancel
+          </Button>
         </div>
+        <CancelDeploymentDialog handleOpen={handleOpen} open={open} />
       </div>
       <DeployStep
         title="Building"