From f870ab90f722ae3af5274a51047dc68d05a43952 Mon Sep 17 00:00:00 2001 From: Nabarun Gogoi Date: Thu, 28 Dec 2023 11:52:05 +0530 Subject: [PATCH] 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 --- .../frontend/src/assets/repositories.json | 5 + .../projects/create/ProjectRepoCard.tsx | 19 +-- .../projects/create/RepositoryList.tsx | 17 ++- .../projects/project/SettingsTabPanel.tsx | 7 ++ .../project/settings/GitSelectionSection.tsx | 34 ++++++ .../projects/project/settings/GitTabPanel.tsx | 112 ++++++++++++++++++ .../project/settings/RepoConnectedSection.tsx | 29 +++++ .../src/pages/projects/create/index.tsx | 6 +- packages/frontend/src/types/project.ts | 13 ++ 9 files changed, 230 insertions(+), 12 deletions(-) create mode 100644 packages/frontend/src/components/projects/project/settings/GitSelectionSection.tsx create mode 100644 packages/frontend/src/components/projects/project/settings/GitTabPanel.tsx create mode 100644 packages/frontend/src/components/projects/project/settings/RepoConnectedSection.tsx diff --git a/packages/frontend/src/assets/repositories.json b/packages/frontend/src/assets/repositories.json index 04a1cff1..ca487012 100644 --- a/packages/frontend/src/assets/repositories.json +++ b/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", diff --git a/packages/frontend/src/components/projects/create/ProjectRepoCard.tsx b/packages/frontend/src/components/projects/create/ProjectRepoCard.tsx index 158de6bc..a9855464 100644 --- a/packages/frontend/src/components/projects/create/ProjectRepoCard.tsx +++ b/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'; - -interface RepositoryDetails { - title: string; - updatedAt: string; - user: string; - private: boolean; -} +import { RepositoryDetails } from '../../../types/project'; interface ProjectRepoCardProps { repository: RepositoryDetails; + onClick: () => void; } -const ProjectRepoCard: React.FC = ({ repository }) => { +const ProjectRepoCard: React.FC = ({ + repository, + onClick, +}) => { return ( -
+
^
diff --git a/packages/frontend/src/components/projects/create/RepositoryList.tsx b/packages/frontend/src/components/projects/create/RepositoryList.tsx index a0579a9f..df7745b0 100644 --- a/packages/frontend/src/components/projects/create/RepositoryList.tsx +++ b/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 = () => {
{Boolean(filteredRepos.length) ? ( filteredRepos.map((repo, key) => { - return ; + return ( + { + repoSelectionHandler(repo); + }} + /> + ); }) ) : (
diff --git a/packages/frontend/src/components/projects/project/SettingsTabPanel.tsx b/packages/frontend/src/components/projects/project/SettingsTabPanel.tsx index 2969dfb8..52a57951 100644 --- a/packages/frontend/src/components/projects/project/SettingsTabPanel.tsx +++ b/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
Members
; @@ -28,6 +29,12 @@ const tabsData = [ value: 'domains', component: Domains, }, + { + label: 'Git', + icon: '^', + value: 'git', + component: GitTabPanel, + }, { label: 'Environment variables', icon: '^', diff --git a/packages/frontend/src/components/projects/project/settings/GitSelectionSection.tsx b/packages/frontend/src/components/projects/project/settings/GitSelectionSection.tsx new file mode 100644 index 00000000..b130a348 --- /dev/null +++ b/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 ( + <> +
{ + gitSelectionHandler(GitSelect.GITHUB); + }} + > +
^
+
Github
+
{'>'}
+
+
{}} + > +
^
+
Gitea
+
{'>'}
+
+ + ); +}; + +export default GitSelectionSection; diff --git a/packages/frontend/src/components/projects/project/settings/GitTabPanel.tsx b/packages/frontend/src/components/projects/project/settings/GitTabPanel.tsx new file mode 100644 index 00000000..80e2919b --- /dev/null +++ b/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(); + + const gitSelectionHandler = (git: GitSelect) => { + setGitSelect(git); + }; + + const repoSelectionHandler = (repoDetails: RepositoryDetails) => { + setLinkedRepo(repoDetails); + }; + + return ( + <> +
+ + Connect Git repository + + + Create deployments for any commits pushed to your Git repository. + + {linkedRepo && } + {!linkedRepo && + (GitSelect.NONE === gitSelect ? ( + + ) : ( + + ))} + +
+
+ Pull request comments +
+
+ +
+
+ +
+
+ Commit comments +
+
+ +
+
+
+ +
+ + Production branch + + + By default, each commit pushed to the{' '} + main branch initiates a production + deployment. You can opt for a different branch for deployment in the + settings. + + {!linkedRepo && ( +
+
^
+
+ + This project isn't currently linked to a Git repository. To + establish a production branch, please linked to an existing Git + repository in the 'Connected Git Repository' section + above. + +
+
+ )} + Branch name + + +
+ +
+ + Deploy webhooks + + + Webhooks configured to trigger when there is a change in a + project's build or deployment status. + +
+
+ Webhook URL + +
+
+ +
+
+
+ + ); +}; + +export default GitTabPanel; diff --git a/packages/frontend/src/components/projects/project/settings/RepoConnectedSection.tsx b/packages/frontend/src/components/projects/project/settings/RepoConnectedSection.tsx new file mode 100644 index 00000000..9f06f60c --- /dev/null +++ b/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 ( +
+
^
+
+ + {linkedRepo.user}/{linkedRepo.title} + + Connected just now +
+
+ +
+
+ ); +}; + +export default RepoConnectedSection; diff --git a/packages/frontend/src/pages/projects/create/index.tsx b/packages/frontend/src/pages/projects/create/index.tsx index 033ca973..9c2d9104 100644 --- a/packages/frontend/src/pages/projects/create/index.tsx +++ b/packages/frontend/src/pages/projects/create/index.tsx @@ -17,7 +17,11 @@ const NewProject = () => { })}
Import a repository
- {IS_GIT_AUTH ? : } + {IS_GIT_AUTH ? ( + {}} /> + ) : ( + + )} ); }; diff --git a/packages/frontend/src/types/project.ts b/packages/frontend/src/types/project.ts index 887a6200..7fe677f9 100644 --- a/packages/frontend/src/types/project.ts +++ b/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', +}