From 7e522aa45d66a018ca8a027dface9d133fa39658 Mon Sep 17 00:00:00 2001 From: Nabarun Gogoi Date: Mon, 5 Feb 2024 17:57:08 +0530 Subject: [PATCH] List latest commits from project repo in overview tab (#55) --- packages/backend/src/schema.gql | 2 +- .../projects/project/ActivityCard.tsx | 19 ++---- .../projects/project/OverviewTabPanel.tsx | 63 +++++++++++++++++-- packages/frontend/src/types/project.ts | 15 +++++ packages/gql-client/src/client.ts | 8 +-- packages/gql-client/src/mutations.ts | 4 +- 6 files changed, 87 insertions(+), 24 deletions(-) diff --git a/packages/backend/src/schema.gql b/packages/backend/src/schema.gql index 313834d..3bfef2f 100644 --- a/packages/backend/src/schema.gql +++ b/packages/backend/src/schema.gql @@ -188,7 +188,7 @@ type Mutation { updateEnvironmentVariable(environmentVariableId: String!, data: UpdateEnvironmentVariableInput!): Boolean! removeEnvironmentVariable(environmentVariableId: String!): Boolean! updateDeploymentToProd(deploymentId: String!): Boolean! - addProject(projectDetails: AddProjectInput): Boolean! + addProject(data: AddProjectInput): Boolean! updateProject(projectId: String!, projectDetails: UpdateProjectInput): Boolean! redeployToProd(deploymentId: String!): Boolean! deleteProject(projectId: String!): Boolean! diff --git a/packages/frontend/src/components/projects/project/ActivityCard.tsx b/packages/frontend/src/components/projects/project/ActivityCard.tsx index 9a8f473..b54d651 100644 --- a/packages/frontend/src/components/projects/project/ActivityCard.tsx +++ b/packages/frontend/src/components/projects/project/ActivityCard.tsx @@ -3,31 +3,24 @@ import React from 'react'; import { Typography, IconButton } from '@material-tailwind/react'; import { relativeTime } from '../../../utils/time'; - -interface ActivityDetails { - author: string; - authorAvatar: string; - createdAt: string; - branch: string; - message: string; -} +import { GitCommitDetails } from '../../../types/project'; interface ActivityCardProps { - activity: ActivityDetails; + activity: GitCommitDetails; } const ActivityCard = ({ activity }: ActivityCardProps) => { return (
-
{activity.authorAvatar}
+
^
- {activity.author} + {activity.commit.author?.name} - {relativeTime(activity.createdAt)} ^ {activity.branch} + {relativeTime(activity.commit.author!.date!)} ^ {activity.branch.name} - {activity.message} + {activity.commit.message}
diff --git a/packages/frontend/src/components/projects/project/OverviewTabPanel.tsx b/packages/frontend/src/components/projects/project/OverviewTabPanel.tsx index 7777b64..7d1999c 100644 --- a/packages/frontend/src/components/projects/project/OverviewTabPanel.tsx +++ b/packages/frontend/src/components/projects/project/OverviewTabPanel.tsx @@ -1,11 +1,14 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { Project } from 'gql-client'; import { Typography, Button, Chip } from '@material-tailwind/react'; import ActivityCard from './ActivityCard'; -import activityDetails from '../../../assets/activities.json'; import { relativeTimeMs } from '../../../utils/time'; +import { useOctokit } from '../../../context/OctokitContext'; +import { GitCommitDetails } from '../../../types/project'; + +const COMMITS_PER_PAGE = 4; interface OverviewProps { project: Project; @@ -15,6 +18,58 @@ interface OverviewProps { const IS_DOMAIN_SETUP = false; const OverviewTabPanel = ({ project }: OverviewProps) => { + const { octokit } = useOctokit(); + const [activities, setActivities] = useState([]); + + useEffect(() => { + if (!octokit) { + return; + } + + // TODO: Save repo commits in DB and avoid using GitHub API in frontend + // TODO: Figure out fetching latest commits for all branches + const fetchRepoActivity = async () => { + const [owner, repo] = project.repository.split('/'); + + // Get all branches in project repo + const result = await octokit.rest.repos.listBranches({ + owner, + repo, + }); + + // Get first 4 commits from repo branches + const commitsByBranchPromises = result.data.map(async (branch) => { + const result = await octokit.rest.repos.listCommits({ + owner, + repo, + sha: branch.commit.sha, + per_page: COMMITS_PER_PAGE, + }); + + return result.data.map((data) => ({ + ...data, + branch, + })); + }); + + const commitsByBranch = await Promise.all(commitsByBranchPromises); + const commitsWithBranch = commitsByBranch.flat(); + + // Order commits by date and set latest 4 commits in activity section + const orderedCommits = commitsWithBranch + .sort( + (a, b) => + new Date(b.commit.author!.date!).getTime() - + new Date(a.commit.author!.date!).getTime(), + ) + .slice(0, COMMITS_PER_PAGE); + + setActivities(orderedCommits); + }; + + fetchRepoActivity(); + }, [octokit, project]); + return (
@@ -86,8 +141,8 @@ const OverviewTabPanel = ({ project }: OverviewProps) => {
- {activityDetails.map((activity, key) => { - return ; + {activities.map((activity, index) => { + return ; })}
diff --git a/packages/frontend/src/types/project.ts b/packages/frontend/src/types/project.ts index 8a6fca7..3be0059 100644 --- a/packages/frontend/src/types/project.ts +++ b/packages/frontend/src/types/project.ts @@ -44,6 +44,21 @@ export interface GitRepositoryDetails { default_branch?: string; } +export interface GitBranchDetails { + name: string; +} + +export interface GitCommitDetails { + branch: GitBranchDetails; + commit: { + author: { + name?: string; + date?: string; + } | null; + message: string; + }; +} + export enum GitSelect { GITHUB = 'github', GITEA = 'gitea', diff --git a/packages/gql-client/src/client.ts b/packages/gql-client/src/client.ts index d4a2426..17e1d9d 100644 --- a/packages/gql-client/src/client.ts +++ b/packages/gql-client/src/client.ts @@ -194,15 +194,15 @@ export class GQLClient { return data; } - async addProject (projectDetails: AddProjectInput): Promise { - const { data } = await this.client.mutate({ + async addProject (data: AddProjectInput): Promise { + const result = await this.client.mutate({ mutation: addProject, variables: { - projectDetails + data } }); - return data; + return result.data; } async updateProject (projectId: string, projectDetails: UpdateProjectInput): Promise { diff --git a/packages/gql-client/src/mutations.ts b/packages/gql-client/src/mutations.ts index 3506c31..c853250 100644 --- a/packages/gql-client/src/mutations.ts +++ b/packages/gql-client/src/mutations.ts @@ -43,8 +43,8 @@ mutation ($deploymentId: String!) { `; export const addProject = gql` -mutation ($projectDetails: AddProjectInput) { - addProject(projectDetails: $projectDetails) +mutation ($data: AddProjectInput) { + addProject(data: $data) }`; export const updateProjectMutation = gql`