Add layout for Git tab in project settings (#31)

* Implement layout and functionality for git tab panel

* Refactor project repository card prop

* Add repo selection handler prop

---------

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

packages/frontend/src/assets/repositories.json

@@ -1,29 +1,34 @@
 [
   {
+    "id": 1,
     "title": "project-101",
     "updatedAt": "2023-12-21T08:30:00",
     "user": "bob",
     "private": false
   },
   {
+    "id": 2,
     "title": "project-102",
     "updatedAt": "2023-12-21T08:30:00",
     "user": "alice",
     "private": true
   },
   {
+    "id": 3,
     "title": "project-103",
     "updatedAt": "2023-12-21T04:20:00",
     "user": "charlie",
     "private": false
   },
   {
+    "id": 4,
     "title": "project-104",
     "updatedAt": "2023-12-21T04:27:00",
     "user": "alice",
     "private": false
   },
   {
+    "id": 5,
     "title": "project-105",
     "updatedAt": "2023-12-21T04:41:00",
     "user": "ivan",

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

@@ -3,21 +3,22 @@ import React from 'react';
 import { Chip, IconButton } from '@material-tailwind/react';
 
 import { relativeTime } from '../../../utils/time';
-
+import { RepositoryDetails } from '../../../types/project';
-interface RepositoryDetails {
-  title: string;
-  updatedAt: string;
-  user: string;
-  private: boolean;
-}
 
 interface ProjectRepoCardProps {
   repository: RepositoryDetails;
+  onClick: () => void;
 }
 
-const ProjectRepoCard: React.FC<ProjectRepoCardProps> = ({ repository }) => {
+const ProjectRepoCard: React.FC<ProjectRepoCardProps> = ({
+  repository,
+  onClick,
+}) => {
   return (
-    <div className="group flex items-center gap-4 text-gray-500 text-xs hover:bg-gray-100 p-2 cursor-pointer">
+    <div
+      className="group flex items-center gap-4 text-gray-500 text-xs hover:bg-gray-100 p-2 cursor-pointer"
+      onClick={onClick}
+    >
       <div>^</div>
       <div className="grow">
         <div>

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

@@ -5,11 +5,16 @@ import { Button, Typography, Option, Select } from '@material-tailwind/react';
 import SearchBar from '../../SearchBar';
 import ProjectRepoCard from './ProjectRepoCard';
 import repositoryDetails from '../../../assets/repositories.json';
+import { RepositoryDetails } from '../../../types/project';
 
 const DEFAULT_SEARCHED_REPO = '';
 const DEFAULT_SELECTED_USER = 'All accounts';
 
-const RepositoryList = () => {
+interface RepositoryListProps {
+  repoSelectionHandler: (repo: RepositoryDetails) => void;
+}
+
+const RepositoryList = ({ repoSelectionHandler }: RepositoryListProps) => {
   const [searchedRepo, setSearchedRepo] = useState(DEFAULT_SEARCHED_REPO);
   const [selectedUser, setSelectedUser] = useState(DEFAULT_SELECTED_USER);
 
@@ -65,7 +70,15 @@ const RepositoryList = () => {
       </div>
       {Boolean(filteredRepos.length) ? (
         filteredRepos.map((repo, key) => {
-          return <ProjectRepoCard repository={repo} key={key} />;
+          return (
+            <ProjectRepoCard
+              repository={repo}
+              key={key}
+              onClick={() => {
+                repoSelectionHandler(repo);
+              }}
+            />
+          );
         })
       ) : (
         <div className="mt-4 p-6 flex items-center justify-center">

packages/frontend/src/components/projects/project/SettingsTabPanel.tsx

@@ -10,6 +10,7 @@ import {
 import Domains from './settings/Domains';
 import GeneralTabPanel from './settings/GeneralTabPanel';
 import { EnvironmentVariablesTabPanel } from './settings/EnvironmentVariablesTabPanel';
+import GitTabPanel from './settings/GitTabPanel';
 
 const Members = () => {
   return <div>Members</div>;
@@ -28,6 +29,12 @@ const tabsData = [
     value: 'domains',
     component: Domains,
   },
+  {
+    label: 'Git',
+    icon: '^',
+    value: 'git',
+    component: GitTabPanel,
+  },
   {
     label: 'Environment variables',
     icon: '^',

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

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { GitSelect } from '../../../../types/project';
+
+const GitSelectionSection = ({
+  gitSelectionHandler,
+}: {
+  gitSelectionHandler: (git: GitSelect) => void;
+}) => {
+  return (
+    <>
+      <div
+        className="flex gap-4 border-b-2 border-gray-200 cursor-pointer p-1"
+        onClick={() => {
+          gitSelectionHandler(GitSelect.GITHUB);
+        }}
+      >
+        <div>^</div>
+        <div className="grow">Github</div>
+        <div>{'>'}</div>
+      </div>
+      <div
+        className="flex gap-4 border-b-2 border-gray-200 cursor-pointer p-1"
+        onClick={() => {}}
+      >
+        <div>^</div>
+        <div className="grow">Gitea</div>
+        <div>{'>'}</div>
+      </div>
+    </>
+  );
+};
+
+export default GitSelectionSection;

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

@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+
+import { Button, Input, Switch, Typography } from '@material-tailwind/react';
+
+import RepositoryList from '../../create/RepositoryList';
+import RepoConnectedSection from './RepoConnectedSection';
+import GitSelectionSection from './GitSelectionSection';
+import { GitSelect, RepositoryDetails } from '../../../../types/project';
+
+const GitTabPanel = () => {
+  const [gitSelect, setGitSelect] = useState('none');
+  const [linkedRepo, setLinkedRepo] = useState<RepositoryDetails>();
+
+  const gitSelectionHandler = (git: GitSelect) => {
+    setGitSelect(git);
+  };
+
+  const repoSelectionHandler = (repoDetails: RepositoryDetails) => {
+    setLinkedRepo(repoDetails);
+  };
+
+  return (
+    <>
+      <div className="mb-2 p-2">
+        <Typography variant="h6" className="text-black">
+          Connect Git repository
+        </Typography>
+        <Typography variant="small">
+          Create deployments for any commits pushed to your Git repository.
+        </Typography>
+        {linkedRepo && <RepoConnectedSection linkedRepo={linkedRepo} />}
+        {!linkedRepo &&
+          (GitSelect.NONE === gitSelect ? (
+            <GitSelectionSection gitSelectionHandler={gitSelectionHandler} />
+          ) : (
+            <RepositoryList repoSelectionHandler={repoSelectionHandler} />
+          ))}
+
+        <div className="flex justify-between mt-4">
+          <div>
+            <Typography variant="small">Pull request comments</Typography>
+          </div>
+          <div>
+            <Switch crossOrigin={undefined} defaultChecked />
+          </div>
+        </div>
+
+        <div className="flex justify-between">
+          <div>
+            <Typography variant="small">Commit comments</Typography>
+          </div>
+          <div>
+            <Switch crossOrigin={undefined} />
+          </div>
+        </div>
+      </div>
+
+      <div className="mb-2 p-2">
+        <Typography variant="h6" className="text-black">
+          Production branch
+        </Typography>
+        <Typography variant="small">
+          By default, each commit pushed to the{' '}
+          <span className="font-bold">main</span> branch initiates a production
+          deployment. You can opt for a different branch for deployment in the
+          settings.
+        </Typography>
+        {!linkedRepo && (
+          <div className="flex bg-blue-100 gap-4 rounded-lg p-2">
+            <div>^</div>
+            <div>
+              <Typography variant="small">
+                This project isn&apos;t currently linked to a Git repository. To
+                establish a production branch, please linked to an existing Git
+                repository in the &apos;Connected Git Repository&apos; section
+                above.
+              </Typography>
+            </div>
+          </div>
+        )}
+        <Typography variant="small">Branch name</Typography>
+        <Input crossOrigin={undefined} disabled value="main" />
+        <Button size="sm" disabled className="mt-1">
+          Save
+        </Button>
+      </div>
+
+      <div className="mb-2 p-2">
+        <Typography variant="h6" className="text-black">
+          Deploy webhooks
+        </Typography>
+        <Typography variant="small">
+          Webhooks configured to trigger when there is a change in a
+          project&apos;s build or deployment status.
+        </Typography>
+        <div className="flex gap-1">
+          <div className="grow">
+            <Typography variant="small">Webhook URL</Typography>
+            <Input crossOrigin={undefined} />
+          </div>
+          <div className="self-end">
+            <Button size="sm" disabled>
+              Save
+            </Button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default GitTabPanel;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { Button, Typography } from '@material-tailwind/react';
+import { RepositoryDetails } from '../../../../types/project';
+
+const RepoConnectedSection = ({
+  linkedRepo,
+}: {
+  linkedRepo: RepositoryDetails;
+}) => {
+  return (
+    <div className="flex gap-4">
+      <div>^</div>
+      <div className="grow">
+        <Typography variant="small">
+          {linkedRepo.user}/{linkedRepo.title}
+        </Typography>
+        <Typography variant="small">Connected just now</Typography>
+      </div>
+      <div>
+        <Button variant="outlined" size="sm">
+          ^ Disconnect
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default RepoConnectedSection;

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

@@ -17,7 +17,11 @@ const NewProject = () => {
         })}
       </div>
       <h5 className="mt-4 ml-4">Import a repository</h5>
-      {IS_GIT_AUTH ? <RepositoryList /> : <ConnectAccount />}
+      {IS_GIT_AUTH ? (
+        <RepositoryList repoSelectionHandler={() => {}} />
+      ) : (
+        <ConnectAccount />
+      )}
     </>
   );
 };

packages/frontend/src/types/project.ts

@@ -48,3 +48,16 @@ export interface EnvironmentVariable {
   id: number;
   environments: Environments[];
 }
+
+export interface RepositoryDetails {
+  title: string;
+  updatedAt: string;
+  user: string;
+  private: boolean;
+}
+
+export enum GitSelect {
+  GITHUB = 'github',
+  GITEA = 'gitea',
+  NONE = 'none',
+}