Display fetched deployments data in deployments tab (#24)

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

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

@@ -2,7 +2,6 @@ import React, { useCallback, useMemo, useState } from 'react';
 
 import { Button, Typography } from '@material-tailwind/react';
 
-import deploymentData from '../../../assets/deployments.json';
 import DeploymentDetailsCard from './deployments/DeploymentDetailsCard';
 import FilterForm, {
   FilterValue,
@@ -15,17 +14,21 @@ const DEFAULT_FILTER_VALUE: FilterValue = {
   status: StatusOptions.ALL_STATUS,
 };
 
-const DeploymentsTabPanel = () => {
+const DeploymentsTabPanel = ({
+  deployments,
+}: {
+  deployments: DeploymentDetails[];
+}) => {
   const [filterValue, setFilterValue] = useState(DEFAULT_FILTER_VALUE);
 
   const productionDeployment = useMemo(() => {
-    return deploymentData.find((deployment) => {
+    return deployments.find((deployment) => {
       return deployment.isProduction === true;
     }) as DeploymentDetails;
   }, []);
 
   const filteredDeployments = useMemo<DeploymentDetails[]>(() => {
-    return deploymentData.filter((deployment) => {
+    return deployments.filter((deployment) => {
       // Searched branch filter
       const branchMatch =
         !filterValue.searchedBranch ||
@@ -36,7 +39,8 @@ const DeploymentsTabPanel = () => {
       // Status filter
       const statusMatch =
         filterValue.status === StatusOptions.ALL_STATUS ||
-        deployment.status === filterValue.status;
+        // TODO: match status field types
+        (deployment.status as unknown as StatusOptions) === filterValue.status;
 
       const dateMatch =
         !filterValue.updateAtRange ||

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

@@ -5,7 +5,7 @@ import { Typography, Button, Chip } from '@material-tailwind/react';
 import ActivityCard from './ActivityCard';
 import activityDetails from '../../../assets/activities.json';
 import { ProjectDetails } from '../../../types/project';
-import { relativeTime } from '../../../utils/time';
+import { relativeTimeMs } from '../../../utils/time';
 
 interface OverviewProps {
   project: ProjectDetails;
@@ -63,9 +63,7 @@ const OverviewTabPanel = ({ project }: OverviewProps) => {
         <div className="flex justify-between p-2 text-sm">
           <p>^ Created</p>
           <p>
-            {/* TODO: Use following time conversion wherever required */}
+            {relativeTimeMs(project.createdAt)} by ^ {project.createdBy}
-            {relativeTime(new Date(Number(project.createdAt)).toISOString())} by
-            ^ {project.createdBy}
           </p>
         </div>
       </div>

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

@@ -46,7 +46,7 @@ const ProjectTabs = ({ project }: ProjectTabsProps) => {
         <OverviewTabPanel project={project} />
       </TabPanel>
       <TabPanel>
-        <DeploymentsTabPanel />
+        <DeploymentsTabPanel deployments={project.deployments} />
       </TabPanel>
       <TabPanel>
         <Database />

packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx

@@ -10,7 +10,7 @@ import {
   ChipProps,
 } from '@material-tailwind/react';
 
-import { relativeTime } from '../../../../utils/time';
+import { relativeTimeMs } from '../../../../utils/time';
 import ConfirmDialog from '../../../shared/ConfirmDialog';
 import DeploymentDialogBodyCard from './DeploymentDialogBodyCard';
 import { DeploymentDetails, Status } from '../../../../types/project';
@@ -58,7 +58,7 @@ const DeploymentDetailsCard = ({
       </div>
       <div className="col-span-1 flex items-center">
         <Typography color="gray" className="grow">
-          {relativeTime(deployment.updatedAt)} ^ {deployment.author}
+          {relativeTimeMs(deployment.updatedAt)} ^ {deployment.author}
         </Typography>
         <Menu placement="bottom-start">
           <MenuHandler>

packages/frontend/src/layouts/ProjectSearch.tsx

@@ -5,7 +5,7 @@ import HorizontalLine from '../components/HorizontalLine';
 import { IconButton, Typography } from '@material-tailwind/react';
 import ProjectSearchBar from '../components/projects/ProjectSearchBar';
 import { useGQLClient } from '../context/GQLClientContext';
-import { ProjectDetails } from '../types/project';
+import { Environments, ProjectDetails } from '../types/project';
 
 const ProjectSearch = () => {
   const client = useGQLClient();
@@ -21,6 +21,17 @@ const ProjectSearch = () => {
 
       const updatedProjectsPromises = projects.map(async (project: any) => {
         const { deployments } = await client.getDeployments(String(project.id));
+        const updatedDeployments = deployments.map((deployment: any) => {
+          return {
+            ...deployment,
+            isProduction: deployment.environment === Environments.PRODUCTION,
+            author: '',
+            commit: {
+              hash: '',
+              message: '',
+            },
+          };
+        });
 
         return {
           ...project,
@@ -28,7 +39,7 @@ const ProjectSearch = () => {
           icon: '',
           title: project.name,
           organization: orgName,
-          deployments,
+          deployments: updatedDeployments,
           url: '',
           domain: null,
           createdBy: project.owner.name,

packages/frontend/src/types/project.ts

@@ -30,6 +30,7 @@ export interface DeploymentDetails {
   isProduction: boolean;
   status: Status;
   branch: string;
+  environment: Environments;
   isCurrent: boolean;
   commit: {
     hash: string;
@@ -46,9 +47,9 @@ export enum Status {
 }
 
 export enum Environments {
-  PRODUCTION = 'production',
+  PRODUCTION = 'Production',
-  PREVIEW = 'preview',
+  PREVIEW = 'Preview',
-  DEVELOPMENT = 'development',
+  DEVELOPMENT = 'Development',
 }
 
 export interface EnvironmentVariable {

packages/frontend/src/utils/time.ts

@@ -9,3 +9,13 @@ import { DateTime } from 'luxon';
 export const relativeTime = (time: string) => {
   return DateTime.fromISO(time).toRelative();
 };
+
+/**
+ * Converts time in millisecond format to a human-readable relative time with respect to the current time.
+ *
+ * @param {string} time - The input time in millisecond.
+ * @returns {string} - A human-readable relative time string.
+ */
+export const relativeTimeMs = (time: string) => {
+  return relativeTime(new Date(Number(time)).toISOString());
+};