Use branches from GitHub API in edit domain dialog (#74)

* Use branches from GitHub API

* Disable git branch input if repo not found

* Disable git branch if branches is empty

* Use async select for accounts dropdown

* Log actual HTTP error in console

---------

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

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/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">