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/.eslintrc.json

@@ -16,8 +16,5 @@
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:prettier/recommended"
-  ],
-  "rules": {
-    "@typescript-eslint/no-explicit-any": "off"
-  }
+  ]
 }

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,8 +35,9 @@ const GitTabPanel = ({
     },
   });
 
-  const updateProdBranchHandler = useCallback(
-    async (data: any) => {
+  const updateProdBranchHandler: SubmitHandler<UpdateProdBranchValues> =
+    useCallback(
+      async (data) => {
         const { updateProject } = await client.updateProject(project.id, {
           prodBranch: data.prodBranch,
         });
@@ -53,8 +62,9 @@ const GitTabPanel = ({
     },
   });
 
-  const updateWebhooksHandler = useCallback(
-    async (data: any) => {
+  const updateWebhooksHandler: SubmitHandler<UpdateWebhooksValues> =
+    useCallback(
+      async (data) => {
         const { updateProject } = await client.updateProject(project.id, {
           webhooks: [...project.webhooks, data.webhookUrl],
         });

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);
 

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

@@ -9,7 +9,7 @@ import { useOctokit } from '../../../context/OctokitContext';
 const NewProject = () => {
   const { octokit, updateAuth } = useOctokit();
 
-  return (
+  return Boolean(octokit) ? (
     <>
       <h5 className="mt-4 ml-4">Start with template</h5>
       <div className="grid grid-cols-3 p-4 gap-4">
@@ -24,12 +24,10 @@ const NewProject = () => {
         })}
       </div>
       <h5 className="mt-4 ml-4">Import a repository</h5>
-      {Boolean(octokit) ? (
       <RepositoryList octokit={octokit!} />
+    </>
   ) : (
     <ConnectAccount onAuth={updateAuth} />
-      )}
-    </>
   );
 };
 

packages/gql-client/.eslintrc.json

@@ -17,7 +17,6 @@
   ],
   "rules": {
       "indent": ["error", 2, { "SwitchCase": 1 }],
-      "@typescript-eslint/no-explicit-any": "off",
       "@typescript-eslint/explicit-module-boundary-types": [
           "warn",
           {