Change UI for create new project page (#54)

* Change create new project ui for git authentication

* Use submit handler method from react hook form

* Handle review changes

* Have a pre-selected value for connect account tab panel

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

@@ -3,6 +3,7 @@ import React from 'react';
 import OauthPopup from 'react-oauth-popup';
 
 import { useGQLClient } from '../../../context/GQLClientContext';
+import ConnectAccountTabPanel from './ConnectAccountTabPanel';
 
 const SCOPES = 'repo user';
 const GITHUB_OAUTH_URL = `https://github.com/login/oauth/authorize?client_id=${
@@ -24,8 +25,9 @@ const ConnectAccount = ({ onAuth: onToken }: ConnectAccountInterface) => {
     onToken(token);
   };
 
+  // TODO: Use correct height
   return (
-    <div className="bg-gray-100 flex flex-col p-4 justify-end items-center text-center text-sm h-60 rounded-2xl">
+    <div className="bg-gray-100 flex flex-col p-4 justify-center items-center text-center text-sm h-full rounded-2xl">
       <div>^</div>
       <div>
         <p>Connect to your git account</p>
@@ -47,6 +49,7 @@ const ConnectAccount = ({ onAuth: onToken }: ConnectAccountInterface) => {
         </OauthPopup>
         <Button className="rounded-full mx-2">Connect to Gitea</Button>
       </div>
+      <ConnectAccountTabPanel />
     </div>
   );
 };

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

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { Tabs, TabsHeader, Tab } from '@material-tailwind/react';
+
+const ConnectAccountTabPanel = () => {
+  return (
+    <Tabs
+      className="grid bg-white h-32 p-2 m-4 rounded-md"
+      value="git repository"
+    >
+      <TabsHeader className="grid grid-cols-2">
+        <Tab className="row-span-1" value="git repository">
+          Import a repository
+        </Tab>
+        <Tab className="row-span-2" value="template">
+          Start with a template
+        </Tab>
+      </TabsHeader>
+      {/* <TabsBody> */}
+      {/* TODO: Add content */}
+      {/* </TabsBody> */}
+    </Tabs>
+  );
+};
+
+export default ConnectAccountTabPanel;

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
-import { Controller, useForm } from 'react-hook-form';
+import { Controller, useForm, SubmitHandler } from 'react-hook-form';
 import toast from 'react-hot-toast';
 import { Domain } from 'gql-client';
 
@@ -29,6 +29,12 @@ interface EditDomainDialogProp {
   onUpdate: () => Promise<void>;
 }
 
+type EditDomainValues = {
+  name: string;
+  branch: string;
+  redirectedTo: string;
+};
+
 const EditDomainDialog = ({
   domains,
   open,
@@ -81,8 +87,8 @@ const EditDomainDialog = ({
     },
   });
 
-  const updateDomainHandler = useCallback(
-    async (data: any) => {
+  const updateDomainHandler: SubmitHandler<EditDomainValues> = useCallback(
+    async (data) => {
       const domainRedirectTo = domains.find(
         (domainData) => data.redirectedTo === domainData.name,
       );

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
-import { useForm } from 'react-hook-form';
+import { SubmitHandler, useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
 import { Project } from 'gql-client';
 
@@ -8,6 +8,14 @@ import { Button, Input, Switch, Typography } from '@material-tailwind/react';
 import WebhookCard from './WebhookCard';
 import { useGQLClient } from '../../../../context/GQLClientContext';
 
+type UpdateProdBranchValues = {
+  prodBranch: string;
+};
+
+type UpdateWebhooksValues = {
+  webhookUrl: string;
+};
+
 const GitTabPanel = ({
   project,
   onUpdate,
@@ -27,21 +35,22 @@ const GitTabPanel = ({
     },
   });
 
-  const updateProdBranchHandler = useCallback(
-    async (data: any) => {
-      const { updateProject } = await client.updateProject(project.id, {
-        prodBranch: data.prodBranch,
-      });
+  const updateProdBranchHandler: SubmitHandler<UpdateProdBranchValues> =
+    useCallback(
+      async (data) => {
+        const { updateProject } = await client.updateProject(project.id, {
+          prodBranch: data.prodBranch,
+        });
 
-      if (updateProject) {
-        await onUpdate();
-        toast.success('Production branch upadated successfully');
-      } else {
-        toast.error('Error updating production branch');
-      }
-    },
-    [project],
-  );
+        if (updateProject) {
+          await onUpdate();
+          toast.success('Production branch upadated successfully');
+        } else {
+          toast.error('Error updating production branch');
+        }
+      },
+      [project],
+    );
 
   const {
     register: registerWebhooks,
@@ -53,23 +62,24 @@ const GitTabPanel = ({
     },
   });
 
-  const updateWebhooksHandler = useCallback(
-    async (data: any) => {
-      const { updateProject } = await client.updateProject(project.id, {
-        webhooks: [...project.webhooks, data.webhookUrl],
-      });
+  const updateWebhooksHandler: SubmitHandler<UpdateWebhooksValues> =
+    useCallback(
+      async (data) => {
+        const { updateProject } = await client.updateProject(project.id, {
+          webhooks: [...project.webhooks, data.webhookUrl],
+        });
 
-      if (updateProject) {
-        await onUpdate();
-        toast.success('Webhook added successfully');
-      } else {
-        toast.error('Error adding webhook');
-      }
+        if (updateProject) {
+          await onUpdate();
+          toast.success('Webhook added successfully');
+        } else {
+          toast.error('Error adding webhook');
+        }
 
-      resetWebhooks();
-    },
-    [project],
-  );
+        resetWebhooks();
+      },
+      [project],
+    );
 
   useEffect(() => {
     resetProdBranch({

packages/frontend/src/components/shared/AsyncSelect.tsx

@@ -2,6 +2,8 @@
 import React, { useEffect, useState } from 'react';
 import { Select, SelectProps } from '@material-tailwind/react';
 
+// TODO: Use correct type for ref
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const AsyncSelect = React.forwardRef((props: SelectProps, ref: any) => {
   const [key, setKey] = useState(0);