From 1c9597739b02d7608e1fed2a6d3c255b13ac9cba Mon Sep 17 00:00:00 2001
From: Nabarun Gogoi <nabarun@deepstacksoft.com>
Date: Mon, 5 Feb 2024 16:56:53 +0530
Subject: [PATCH] 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              |  5 +-
 .../projects/create/ConnectAccount.tsx        |  5 +-
 .../create/ConnectAccountTabPanel.tsx         | 26 +++++++
 .../project/settings/EditDomainDialog.tsx     | 12 +++-
 .../projects/project/settings/GitTabPanel.tsx | 70 +++++++++++--------
 .../src/components/shared/AsyncSelect.tsx     |  2 +
 .../src/pages/projects/create/index.tsx       | 10 ++-
 packages/gql-client/.eslintrc.json            |  1 -
 8 files changed, 86 insertions(+), 45 deletions(-)
 create mode 100644 packages/frontend/src/components/projects/create/ConnectAccountTabPanel.tsx

diff --git a/packages/frontend/.eslintrc.json b/packages/frontend/.eslintrc.json
index 96d5591b..e7f396b4 100644
--- a/packages/frontend/.eslintrc.json
+++ b/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"
-  }
+  ]
 }
diff --git a/packages/frontend/src/components/projects/create/ConnectAccount.tsx b/packages/frontend/src/components/projects/create/ConnectAccount.tsx
index 0864199c..305894c8 100644
--- a/packages/frontend/src/components/projects/create/ConnectAccount.tsx
+++ b/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>
   );
 };
diff --git a/packages/frontend/src/components/projects/create/ConnectAccountTabPanel.tsx b/packages/frontend/src/components/projects/create/ConnectAccountTabPanel.tsx
new file mode 100644
index 00000000..d73b8ceb
--- /dev/null
+++ b/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;
diff --git a/packages/frontend/src/components/projects/project/settings/EditDomainDialog.tsx b/packages/frontend/src/components/projects/project/settings/EditDomainDialog.tsx
index 9137148e..d2b3e6c1 100644
--- a/packages/frontend/src/components/projects/project/settings/EditDomainDialog.tsx
+++ b/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,
       );
diff --git a/packages/frontend/src/components/projects/project/settings/GitTabPanel.tsx b/packages/frontend/src/components/projects/project/settings/GitTabPanel.tsx
index d7310c8e..6d88cbb3 100644
--- a/packages/frontend/src/components/projects/project/settings/GitTabPanel.tsx
+++ b/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({
diff --git a/packages/frontend/src/components/shared/AsyncSelect.tsx b/packages/frontend/src/components/shared/AsyncSelect.tsx
index fb294455..8a5b3646 100644
--- a/packages/frontend/src/components/shared/AsyncSelect.tsx
+++ b/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);
 
diff --git a/packages/frontend/src/pages/projects/create/index.tsx b/packages/frontend/src/pages/projects/create/index.tsx
index 1f76fef6..ff0d93e1 100644
--- a/packages/frontend/src/pages/projects/create/index.tsx
+++ b/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} />
-      )}
+      <RepositoryList octokit={octokit!} />
     </>
+  ) : (
+    <ConnectAccount onAuth={updateAuth} />
   );
 };
 
diff --git a/packages/gql-client/.eslintrc.json b/packages/gql-client/.eslintrc.json
index 08ad3dfe..a0015fbc 100644
--- a/packages/gql-client/.eslintrc.json
+++ b/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",
           {