Merge remote-tracking branch 'origin/main'

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

@@ -3,11 +3,12 @@ import { Octokit } from 'octokit';
 import assert from 'assert';
 import { useDebounce } from 'usehooks-ts';
 
-import { Button, Typography, Option, Select } from '@material-tailwind/react';
+import { Button, Typography, Option } from '@material-tailwind/react';
 
 import SearchBar from '../../SearchBar';
 import ProjectRepoCard from './ProjectRepoCard';
 import { GitOrgDetails, GitRepositoryDetails } from '../../../types';
+import AsyncSelect from '../../shared/AsyncSelect';
 
 const DEFAULT_SEARCHED_REPO = '';
 const REPOS_PER_PAGE = 5;
@@ -109,8 +110,7 @@ const RepositoryList = ({ octokit }: RepositoryListProps) => {
     <div className="p-4">
       <div className="flex gap-2 mb-2">
         <div className="basis-1/3">
-          {/* TODO: Fix selection of Git user at start */}
-          <Select
+          <AsyncSelect
             value={selectedAccount}
             onChange={(value) => setSelectedAccount(value!)}
           >
@@ -119,7 +119,7 @@ const RepositoryList = ({ octokit }: RepositoryListProps) => {
                 ^ {account.login}
               </Option>
             ))}
-          </Select>
+          </AsyncSelect>
         </div>
         <div className="basis-2/3">
           <SearchBar

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

@@ -90,7 +90,9 @@ const DeploymentDetailsCard = ({
     <div className="grid grid-cols-4 gap-2 border-b border-gray-300 p-3 my-2">
       <div className="col-span-2">
         <div className="flex">
-          <Typography className=" basis-3/4">{deployment.url}</Typography>
+          {deployment.url && (
+            <Typography className=" basis-3/4">{deployment.url}</Typography>
+          )}
           <Chip
             value={deployment.status}
             color={STATUS_COLORS[deployment.status] ?? 'gray'}
@@ -120,12 +122,8 @@ const DeploymentDetailsCard = ({
             <button className="self-start">...</button>
           </MenuHandler>
           <MenuList>
-            <a
-              href={'https://' + deployment.url}
-              target="_blank"
-              rel="noreferrer"
-            >
-              <MenuItem>^ Visit</MenuItem>
+            <a href={deployment.url} target="_blank" rel="noreferrer">
+              <MenuItem disabled={!Boolean(deployment.url)}>^ Visit</MenuItem>
             </a>
             <MenuItem
               onClick={() => setAssignDomainDialog(!assignDomainDialog)}

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

@@ -28,9 +28,11 @@ const DeploymentDialogBodyCard = ({
           color={chip.color}
         />
       )}
-      <Typography variant="small" className="text-black">
-        {deployment.url}
-      </Typography>
+      {deployment.url && (
+        <Typography variant="small" className="text-black">
+          {deployment.url}
+        </Typography>
+      )}
       <Typography variant="small">
         ^ {deployment.branch} ^{' '}
         {deployment.commitHash.substring(0, SHORT_COMMIT_HASH_LENGTH)}{' '}

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

@@ -12,7 +12,6 @@ import {
   Card,
 } from '@material-tailwind/react';
 
-import { RepositoryDetails } from '../../../../types';
 import ConfirmDialog from '../../../shared/ConfirmDialog';
 import EditDomainDialog from './EditDomainDialog';
 import { useGQLClient } from '../../../../context/GQLClientContext';
@@ -27,7 +26,7 @@ enum RefreshStatus {
 interface DomainCardProps {
   domains: Domain[];
   domain: Domain;
-  repo: RepositoryDetails;
+  branches: string[];
   project: Project;
   onUpdate: () => Promise<void>;
 }
@@ -44,7 +43,7 @@ const DOMAIN_RECORD = {
 const DomainCard = ({
   domains,
   domain,
-  repo,
+  branches,
   project,
   onUpdate,
 }: DomainCardProps) => {
@@ -188,7 +187,7 @@ const DomainCard = ({
         domains={domains}
         open={editDialogOpen}
         domain={domain}
-        repo={repo}
+        branches={branches}
         onUpdate={onUpdate}
       />
     </>

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

@@ -15,7 +15,6 @@ import {
   Option,
 } from '@material-tailwind/react';
 
-import { RepositoryDetails } from '../../../../types';
 import { useGQLClient } from '../../../../context/GQLClientContext';
 
 const DEFAULT_REDIRECT_OPTIONS = ['none'];
@@ -25,7 +24,7 @@ interface EditDomainDialogProp {
   open: boolean;
   handleOpen: () => void;
   domain: Domain;
-  repo: RepositoryDetails;
+  branches: string[];
   onUpdate: () => Promise<void>;
 }
 
@@ -40,7 +39,7 @@ const EditDomainDialog = ({
   open,
   handleOpen,
   domain,
-  repo,
+  branches,
   onUpdate,
 }: EditDomainDialogProp) => {
   const client = useGQLClient();
@@ -120,7 +119,7 @@ const EditDomainDialog = ({
       branch: domain.branch,
       redirectedTo: getRedirectUrl(domain),
     });
-  }, [domain, repo]);
+  }, [domain]);
 
   return (
     <Dialog open={open} handler={handleOpen}>
@@ -166,9 +165,13 @@ const EditDomainDialog = ({
           <Input
             crossOrigin={undefined}
             {...register('branch', {
-              validate: (value) => repo.branch.includes(value),
+              validate: (value) =>
+                Boolean(branches.length) ? branches.includes(value) : true,
             })}
-            disabled={watch('redirectedTo') !== DEFAULT_REDIRECT_OPTIONS[0]}
+            disabled={
+              !Boolean(branches.length) ||
+              watch('redirectedTo') !== DEFAULT_REDIRECT_OPTIONS[0]
+            }
           />
           {!isValid && (
             <Typography variant="small" className="text-red-500">