Save commit message in DB and show in deployments list (#67)

* Display commit message in projects and deployments

* Handle if current deployment not present

* Rename types file

---------

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

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { Project } from 'gql-client';
 
 import {
   Menu,
@@ -10,11 +11,10 @@ import {
   Avatar,
 } from '@material-tailwind/react';
 
-import { relativeTimeISO } from '../../utils/time';
-import { ProjectDetails } from '../../types/project';
+import { relativeTimeMs } from '../../utils/time';
 
 interface ProjectCardProps {
-  project: ProjectDetails;
+  project: Project;
 }
 
 const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
@@ -42,13 +42,21 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
         </Menu>
       </div>
       <div className="border-t-2 border-solid p-4 bg-gray-50">
-        <Typography variant="small" color="gray">
-          ^ {project.latestCommit.message}
-        </Typography>
-        <Typography variant="small" color="gray">
-          {relativeTimeISO(project.latestCommit.createdAt)} on ^&nbsp;
-          {project.latestCommit.branch}
-        </Typography>
+        {project.deployments.length > 0 ? (
+          <>
+            <Typography variant="small" color="gray">
+              ^ {project.deployments[0].commitMessage}
+            </Typography>
+            <Typography variant="small" color="gray">
+              {relativeTimeMs(project.deployments[0].createdAt)} on ^&nbsp;
+              {project.deployments[0].branch}
+            </Typography>
+          </>
+        ) : (
+          <Typography variant="small" color="gray">
+            No Production deployment
+          </Typography>
+        )}
       </div>
     </div>
   );

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

@@ -4,7 +4,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { Chip, IconButton } from '@material-tailwind/react';
 
 import { relativeTimeISO } from '../../../utils/time';
-import { GitRepositoryDetails } from '../../../types/project';
+import { GitRepositoryDetails } from '../../../types';
 import { useGQLClient } from '../../../context/GQLClientContext';
 
 interface ProjectRepoCardProps {

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

@@ -7,7 +7,7 @@ import { Button, Typography, Option, Select } from '@material-tailwind/react';
 
 import SearchBar from '../../SearchBar';
 import ProjectRepoCard from './ProjectRepoCard';
-import { GitOrgDetails, GitRepositoryDetails } from '../../../types/project';
+import { GitOrgDetails, GitRepositoryDetails } from '../../../types';
 
 const DEFAULT_SEARCHED_REPO = '';
 const REPOS_PER_PAGE = 5;

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { Typography, IconButton } from '@material-tailwind/react';
 
 import { relativeTimeISO } from '../../../utils/time';
-import { GitCommitDetails } from '../../../types/project';
+import { GitCommitDetails } from '../../../types';
 
 interface ActivityCardProps {
   activity: GitCommitDetails;

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

@@ -1,6 +1,12 @@
 import React, { useState } from 'react';
 import toast from 'react-hot-toast';
-import { Environment, Project, Domain, DeploymentStatus } from 'gql-client';
+import {
+  Environment,
+  Project,
+  Domain,
+  DeploymentStatus,
+  Deployment,
+} from 'gql-client';
 
 import {
   Menu,
@@ -16,13 +22,12 @@ import { relativeTimeMs } from '../../../../utils/time';
 import ConfirmDialog from '../../../shared/ConfirmDialog';
 import DeploymentDialogBodyCard from './DeploymentDialogBodyCard';
 import AssignDomainDialog from './AssignDomainDialog';
-import { DeploymentDetails } from '../../../../types/project';
 import { useGQLClient } from '../../../../context/GQLClientContext';
 import { SHORT_COMMIT_HASH_LENGTH } from '../../../../constants';
 
 interface DeployDetailsCardProps {
-  deployment: DeploymentDetails;
-  currentDeployment: DeploymentDetails;
+  deployment: Deployment;
+  currentDeployment: Deployment;
   onUpdate: () => Promise<void>;
   project: Project;
   prodBranchDomains: Domain[];
@@ -103,7 +108,7 @@ const DeploymentDetailsCard = ({
         <Typography color="gray">^ {deployment.branch}</Typography>
         <Typography color="gray">
           ^ {deployment.commitHash.substring(0, SHORT_COMMIT_HASH_LENGTH)}{' '}
-          {deployment.commit.message}
+          {deployment.commitMessage}
         </Typography>
       </div>
       <div className="col-span-1 flex items-center">
@@ -149,7 +154,8 @@ const DeploymentDetailsCard = ({
               onClick={() => setRollbackDeployment(!rollbackDeployment)}
               disabled={
                 deployment.isCurrent ||
-                deployment.environment !== Environment.Production
+                deployment.environment !== Environment.Production ||
+                !Boolean(currentDeployment)
               }
             >
               ^ Rollback to this version
@@ -213,44 +219,46 @@ const DeploymentDetailsCard = ({
           )}
         </div>
       </ConfirmDialog>
-      <ConfirmDialog
-        dialogTitle="Rollback to this deployment?"
-        handleOpen={() => setRollbackDeployment((preVal) => !preVal)}
-        open={rollbackDeployment}
-        confirmButtonTitle="Rollback"
-        color="blue"
-        handleConfirm={async () => {
-          await rollbackDeploymentHandler();
-          setRollbackDeployment((preVal) => !preVal);
-        }}
-      >
-        <div className="flex flex-col gap-2">
-          <Typography variant="small">
-            Upon confirmation, this deployment will replace your current
-            deployment
-          </Typography>
-          <DeploymentDialogBodyCard
-            deployment={currentDeployment}
-            chip={{
-              value: 'Live Deployment',
-              color: 'green',
-            }}
-          />
-          <DeploymentDialogBodyCard
-            deployment={deployment}
-            chip={{
-              value: 'New Deployment',
-              color: 'orange',
-            }}
-          />
-          <Typography variant="small">
-            These domains will point to your new deployment:
-          </Typography>
-          <Typography variant="small" color="blue">
-            ^ {currentDeployment.domain?.name}
-          </Typography>
-        </div>
-      </ConfirmDialog>
+      {Boolean(currentDeployment) && (
+        <ConfirmDialog
+          dialogTitle="Rollback to this deployment?"
+          handleOpen={() => setRollbackDeployment((preVal) => !preVal)}
+          open={rollbackDeployment}
+          confirmButtonTitle="Rollback"
+          color="blue"
+          handleConfirm={async () => {
+            await rollbackDeploymentHandler();
+            setRollbackDeployment((preVal) => !preVal);
+          }}
+        >
+          <div className="flex flex-col gap-2">
+            <Typography variant="small">
+              Upon confirmation, this deployment will replace your current
+              deployment
+            </Typography>
+            <DeploymentDialogBodyCard
+              deployment={currentDeployment}
+              chip={{
+                value: 'Live Deployment',
+                color: 'green',
+              }}
+            />
+            <DeploymentDialogBodyCard
+              deployment={deployment}
+              chip={{
+                value: 'New Deployment',
+                color: 'orange',
+              }}
+            />
+            <Typography variant="small">
+              These domains will point to your new deployment:
+            </Typography>
+            <Typography variant="small" color="blue">
+              ^ {currentDeployment.domain?.name}
+            </Typography>
+          </div>
+        </ConfirmDialog>
+      )}
       <AssignDomainDialog
         open={assignDomainDialog}
         handleOpen={() => setAssignDomainDialog(!assignDomainDialog)}

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

@@ -1,13 +1,13 @@
 import React from 'react';
+import { Deployment } from 'gql-client';
 
 import { Typography, Chip, Card } from '@material-tailwind/react';
 import { color } from '@material-tailwind/react/types/components/chip';
-import { DeploymentDetails } from '../../../../types/project';
 import { relativeTimeMs } from '../../../../utils/time';
 import { SHORT_COMMIT_HASH_LENGTH } from '../../../../constants';
 
 interface DeploymentDialogBodyCardProps {
-  deployment: DeploymentDetails;
+  deployment: Deployment;
   chip?: {
     value: string;
     color?: color;
@@ -34,7 +34,7 @@ const DeploymentDialogBodyCard = ({
       <Typography variant="small">
         ^ {deployment.branch} ^{' '}
         {deployment.commitHash.substring(0, SHORT_COMMIT_HASH_LENGTH)}{' '}
-        {deployment.commit.message}
+        {deployment.commitMessage}
       </Typography>
       <Typography variant="small">
         ^ {relativeTimeMs(deployment.createdAt)} ^ {deployment.createdBy.name}

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

@@ -3,7 +3,7 @@ import { UseFormRegister } from 'react-hook-form';
 
 import { Typography, Input, IconButton } from '@material-tailwind/react';
 
-import { EnvironmentVariablesFormValues } from '../../../../types/project';
+import { EnvironmentVariablesFormValues } from '../../../../types';
 
 interface AddEnvironmentVariableRowProps {
   onDelete: () => void;

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

@@ -12,7 +12,7 @@ import {
   Card,
 } from '@material-tailwind/react';
 
-import { RepositoryDetails } from '../../../../types/project';
+import { RepositoryDetails } from '../../../../types';
 import ConfirmDialog from '../../../shared/ConfirmDialog';
 import EditDomainDialog from './EditDomainDialog';
 import { useGQLClient } from '../../../../context/GQLClientContext';

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

@@ -15,7 +15,7 @@ import {
   Option,
 } from '@material-tailwind/react';
 
-import { RepositoryDetails } from '../../../../types/project';
+import { RepositoryDetails } from '../../../../types';
 import { useGQLClient } from '../../../../context/GQLClientContext';
 
 const DEFAULT_REDIRECT_OPTIONS = ['none'];

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { GitSelect } from '../../../../types/project';
+import { GitSelect } from '../../../../types';
 
 const GitSelectionSection = ({
   gitSelectionHandler,

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

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import { Button, Typography } from '@material-tailwind/react';
 
-import { GitRepositoryDetails } from '../../../../types/project';
+import { GitRepositoryDetails } from '../../../../types';
 import ConfirmDialog from '../../../shared/ConfirmDialog';
 
 const RepoConnectedSection = ({