Create new deployment on changing preview deployment to production (#61)

* Create new deployment when changing to production

* Remove unnecessary todos

* Move deployment id and url creation in database method

* Display correct details in deployment dialog box

* Rename relativeTime function to relativeTimeISO

* Refactor resolver methods to service class

* Refactor to move github app to service class

---------

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

packages/frontend/src/components/projects/ProjectCard.tsx

@@ -9,7 +9,7 @@ import {
   Typography,
 } from '@material-tailwind/react';
 
-import { relativeTime } from '../../utils/time';
+import { relativeTimeISO } from '../../utils/time';
 import { ProjectDetails } from '../../types/project';
 
 interface ProjectCardProps {
@@ -45,7 +45,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
           {project.latestCommit.message}
         </Typography>
         <Typography variant="small" color="gray">
-          {relativeTime(project.latestCommit.createdAt)} on{' '}
+          {relativeTimeISO(project.latestCommit.createdAt)} on{' '}
           {project.latestCommit.branch}
         </Typography>
       </div>

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

@@ -3,7 +3,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 
 import { Chip, IconButton } from '@material-tailwind/react';
 
-import { relativeTime } from '../../../utils/time';
+import { relativeTimeISO } from '../../../utils/time';
 import { GitRepositoryDetails } from '../../../types/project';
 import { useGQLClient } from '../../../context/GQLClientContext';
 
@@ -24,7 +24,6 @@ const ProjectRepoCard: React.FC<ProjectRepoCardProps> = ({ repository }) => {
 
     const { addProject } = await client.addProject(orgSlug!, {
       name: `${repository.owner!.login}-${repository.name}`,
-      // TODO: Get organization id from context or URL
       prodBranch: repository.default_branch!,
       repository: repository.full_name,
     });
@@ -50,7 +49,7 @@ const ProjectRepoCard: React.FC<ProjectRepoCardProps> = ({ repository }) => {
             />
           )}
         </div>
-        <p>{repository.updated_at && relativeTime(repository.updated_at)}</p>
+        <p>{repository.updated_at && relativeTimeISO(repository.updated_at)}</p>
       </div>
       <div className="hidden group-hover:block">
         <IconButton size="sm">{'>'}</IconButton>

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Typography, IconButton } from '@material-tailwind/react';
 
-import { relativeTime } from '../../../utils/time';
+import { relativeTimeISO } from '../../../utils/time';
 import { GitCommitDetails } from '../../../types/project';
 
 interface ActivityCardProps {
@@ -17,7 +17,8 @@ const ActivityCard = ({ activity }: ActivityCardProps) => {
       <div className="grow">
         <Typography>{activity.commit.author?.name}</Typography>
         <Typography variant="small" color="gray">
-          {relativeTime(activity.commit.author!.date!)} ^ {activity.branch.name}
+          {relativeTimeISO(activity.commit.author!.date!)} ^{' '}
+          {activity.branch.name}
         </Typography>
         <Typography variant="small" color="gray">
           {activity.commit.message}

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { Typography, Chip, Card } from '@material-tailwind/react';
 import { color } from '@material-tailwind/react/types/components/chip';
 import { DeploymentDetails } from '../../../../types/project';
-import { relativeTime } from '../../../../utils/time';
+import { relativeTimeMs } from '../../../../utils/time';
 
 interface DeploymentDialogBodyCardProps {
   deployment: DeploymentDetails;
@@ -28,14 +28,14 @@ const DeploymentDialogBodyCard = ({
         />
       )}
       <Typography variant="small" className="text-black">
-        {deployment.title}
+        {deployment.url}
       </Typography>
       <Typography variant="small">
         ^ {deployment.branch} ^ {deployment.commitHash}{' '}
         {deployment.commit.message}
       </Typography>
       <Typography variant="small">
-        ^ {relativeTime(deployment.updatedAt)} ^ {deployment.author}
+        ^ {relativeTimeMs(deployment.createdAt)} ^ {deployment.createdBy.name}
       </Typography>
     </Card>
   );

packages/frontend/src/constants.ts

@@ -5,3 +5,6 @@ export const COMMIT_DETAILS = {
 };
 
 export const ORGANIZATION_ID = '2379cf1f-a232-4ad2-ae14-4d881131cc26';
+
+export const GIT_TEMPLATE_LINK =
+  'https://git.vdb.to/cerc-io/test-progressive-web-app';

packages/frontend/src/pages/org-slug/projects/create/Template.tsx

@@ -3,6 +3,7 @@ import { Outlet, useLocation, useSearchParams } from 'react-router-dom';
 
 import Stepper from '../../../../components/Stepper';
 import templateDetails from '../../../../assets/templates.json';
+import { GIT_TEMPLATE_LINK } from '../../../../constants';
 
 const STEPPER_VALUES = [
   { step: 1, route: '/projects/create/template', label: 'Create repository' },
@@ -31,8 +32,11 @@ const CreateWithTemplate = () => {
       <div className="flex justify-between w-5/6 my-4 bg-gray-200 rounded-xl p-6">
         <div>^</div>
         <div className="grow">{template?.name}</div>
-        {/* TODO: Get template Git link from DB */}
-        <div>^snowball-tools/react-native-starter</div>
+        <div>
+          <a href={GIT_TEMPLATE_LINK} target="_blank" rel="noreferrer">
+            cerc-io/test-progressive-web-app
+          </a>
+        </div>
       </div>
       <div className="grid grid-cols-3 w-5/6 p-6">
         <div>

packages/frontend/src/pages/org-slug/projects/create/template/index.tsx

@@ -50,7 +50,6 @@ const CreateRepo = () => {
 
         const { addProject } = await client.addProject(orgSlug!, {
           name: `${gitRepo.data.owner!.login}-${gitRepo.data.name}`,
-          // TODO: Get organization id from context or URL
           prodBranch: gitRepo.data.default_branch ?? 'main',
           repository: gitRepo.data.full_name,
         });
@@ -95,8 +94,6 @@ const CreateRepo = () => {
     }
   }, [gitAccounts]);
 
-  // TODO: Get users and orgs from GitHub
-
   return (
     <form onSubmit={handleSubmit(submitRepoHandler)}>
       <div className="mb-2">
@@ -135,10 +132,7 @@ const CreateRepo = () => {
             name="account"
             control={control}
             render={({ field }) => (
-              <AsyncSelect
-                {...field}
-                label={!field.value ? 'Select an account / Organization' : ''}
-              >
+              <AsyncSelect {...field}>
                 {gitAccounts.map((account, key) => (
                   <Option key={key} value={account}>
                     ^ {account}

packages/frontend/src/utils/time.ts

@@ -6,7 +6,7 @@ import { DateTime } from 'luxon';
  * @param {string} time - The input time in ISO 8601 format.
  * @returns {string} - A human-readable relative time string.
  */
-export const relativeTime = (time: string) => {
+export const relativeTimeISO = (time: string) => {
   return DateTime.fromISO(time).toRelative();
 };
 
@@ -17,5 +17,5 @@ export const relativeTime = (time: string) => {
  * @returns {string} - A human-readable relative time string.
  */
 export const relativeTimeMs = (time: string) => {
-  return relativeTime(new Date(Number(time)).toISOString());
+  return relativeTimeISO(new Date(Number(time)).toISOString());
 };