Add updates in previously implemented pages (#40)

* Add cancel button in deployments status filter

* Add namecheap hyperlink in domain config page

* Add disconnect repo confirm dialog

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

@@ -12,7 +12,7 @@ import { DeploymentDetails } from '../../../types/project';
 
 const DEFAULT_FILTER_VALUE: FilterValue = {
   searchedBranch: '',
-  status: 'All status',
+  status: StatusOptions.ALL_STATUS,
 };
 
 const DeploymentsTabPanel = () => {

packages/frontend/src/components/projects/project/deployments/FilterForm.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { DateRange } from 'react-day-picker';
 
-import { Option, Select } from '@material-tailwind/react';
+import { IconButton, Option, Select } from '@material-tailwind/react';
 
 import SearchBar from '../../../SearchBar';
 import DatePicker from '../../../DatePicker';
@@ -15,7 +15,7 @@ export enum StatusOptions {
 
 export interface FilterValue {
   searchedBranch: string;
-  status: string;
+  status: StatusOptions;
   updateAtRange?: DateRange;
 }
 
@@ -55,14 +55,15 @@ const FilterForm = ({ value, onChange }: FilterFormProps) => {
       <div className="col-span-1">
         <DatePicker mode="range" selected={dateRange} onSelect={setDateRange} />
       </div>
-      <div className="col-span-1">
+      <div className="col-span-1 relative">
         <Select
           value={selectedStatus}
-          onChange={(value) => setSelectedStatus(value!)}
+          onChange={(value) => setSelectedStatus(value as StatusOptions)}
+          placeholder="All status"
         >
           {Object.values(StatusOptions).map((status) => (
             <Option
-              className={status === selectedStatus ? 'hidden' : ''}
+              className={status === StatusOptions.ALL_STATUS ? 'hidden' : ''}
               key={status}
               value={status}
             >
@@ -70,6 +71,17 @@ const FilterForm = ({ value, onChange }: FilterFormProps) => {
             </Option>
           ))}
         </Select>
+        {selectedStatus !== StatusOptions.ALL_STATUS && (
+          <div className="absolute end-1 inset-y-0 my-auto h-8">
+            <IconButton
+              onClick={() => setSelectedStatus(StatusOptions.ALL_STATUS)}
+              className="rounded-full"
+              size="sm"
+            >
+              X
+            </IconButton>
+          </div>
+        )}
       </div>
     </div>
   );

packages/frontend/src/components/projects/project/settings/RepoConnectedSection.tsx

@@ -1,14 +1,18 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import { Button, Typography } from '@material-tailwind/react';
 
 import { RepositoryDetails } from '../../../../types/project';
+import ConfirmDialog from '../../../shared/ConfirmDialog';
 
 const RepoConnectedSection = ({
   linkedRepo,
 }: {
   linkedRepo: RepositoryDetails;
 }) => {
+  const [disconnectRepoDialogOpen, setDisconnectRepoDialogOpen] =
+    useState(false);
+
   return (
     <div className="flex gap-4">
       <div>^</div>
@@ -19,10 +23,29 @@ const RepoConnectedSection = ({
         <Typography variant="small">Connected just now</Typography>
       </div>
       <div>
-        <Button variant="outlined" size="sm">
+        <Button
+          onClick={() => setDisconnectRepoDialogOpen(true)}
+          variant="outlined"
+          size="sm"
+        >
           ^ Disconnect
         </Button>
       </div>
+      <ConfirmDialog
+        dialogTitle="Disconnect repository?"
+        handleOpen={() => setDisconnectRepoDialogOpen((preVal) => !preVal)}
+        open={disconnectRepoDialogOpen}
+        confirmButtonTitle="Yes, confirm disconnect"
+        handleConfirm={() => {
+          setDisconnectRepoDialogOpen((preVal) => !preVal);
+        }}
+        color="red"
+      >
+        <Typography variant="small">
+          Any data tied to your Git project may become misconfigured. Are you
+          sure you want to continue?
+        </Typography>
+      </ConfirmDialog>
     </div>
   );
 };

packages/frontend/src/pages/projects/id/domain/add/Config.tsx

@@ -10,7 +10,10 @@ const Config = () => {
       <div>
         <Typography variant="h5">Configure DNS</Typography>
         <Typography variant="small">
-          Add the following records to your domain
+          Add the following records to your domain.&nbsp;
+          <a href="https://www.namecheap.com/" target="_blank" rel="noreferrer">
+            <span className="underline">Go to NameCheap</span> ^
+          </a>
         </Typography>
       </div>