Add GQL mutation to update deployment to production (#39)

* Add mutation to update deployment to production

* Implement gql client mutation and frontend to update deployment to production

* Add toast message when deployment is changed to production

* Throw error from init db script if db aleardy exists

---------

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

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { Button, Typography } from '@material-tailwind/react';
 
@@ -8,18 +8,48 @@ import FilterForm, {
   StatusOptions,
 } from './deployments/FilterForm';
 import { DeploymentDetails } from '../../../types/project';
+import { useGQLClient } from '../../../context/GQLClientContext';
 
 const DEFAULT_FILTER_VALUE: FilterValue = {
   searchedBranch: '',
   status: StatusOptions.ALL_STATUS,
 };
 
-const DeploymentsTabPanel = ({
-  deployments,
-}: {
-  deployments: DeploymentDetails[];
-}) => {
+const DeploymentsTabPanel = ({ projectId }: { projectId: string }) => {
+  const client = useGQLClient();
+
   const [filterValue, setFilterValue] = useState(DEFAULT_FILTER_VALUE);
+  const [deployments, setDeployments] = useState<DeploymentDetails[]>([]);
+
+  const fetchDeployments = async () => {
+    const { deployments } = await client.getDeployments(projectId);
+    const updatedDeployments = deployments.map((deployment: any) => {
+      return {
+        ...deployment,
+        isProduction: deployment.environment === 'Production',
+        author: '',
+        commit: {
+          hash: '',
+          message: '',
+        },
+        domain: deployment.domain
+          ? {
+              ...deployment.domain,
+              record: {
+                type: '',
+                name: '',
+                value: '',
+              },
+            }
+          : null,
+      };
+    });
+    setDeployments(updatedDeployments);
+  };
+
+  useEffect(() => {
+    fetchDeployments();
+  }, []);
 
   const productionDeployment = useMemo(() => {
     return deployments.find((deployment) => {
@@ -49,12 +79,16 @@ const DeploymentsTabPanel = ({
 
       return branchMatch && statusMatch && dateMatch;
     }) as DeploymentDetails[];
-  }, [filterValue]);
+  }, [filterValue, deployments]);
 
   const handleResetFilters = useCallback(() => {
     setFilterValue(DEFAULT_FILTER_VALUE);
   }, []);
 
+  const onUpdateDeploymenToProd = async () => {
+    await fetchDeployments();
+  };
+
   return (
     <div className="p-4">
       <FilterForm
@@ -69,6 +103,7 @@ const DeploymentsTabPanel = ({
                 deployment={deployment}
                 key={key}
                 productionDeployment={productionDeployment}
+                onUpdate={onUpdateDeploymenToProd}
               />
             );
           })

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

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

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

@@ -9,15 +9,18 @@ import {
   Chip,
   ChipProps,
 } from '@material-tailwind/react';
+import toast from 'react-hot-toast';
 
 import { relativeTimeMs } from '../../../../utils/time';
 import ConfirmDialog from '../../../shared/ConfirmDialog';
 import DeploymentDialogBodyCard from './DeploymentDialogBodyCard';
 import { DeploymentDetails, Status } from '../../../../types/project';
+import { useGQLClient } from '../../../../context/GQLClientContext';
 
 interface DeployDetailsCardProps {
   deployment: DeploymentDetails;
   productionDeployment: DeploymentDetails;
+  onUpdate: () => Promise<void>;
 }
 
 const STATUS_COLORS: { [key in Status]: ChipProps['color'] } = {
@@ -29,11 +32,24 @@ const STATUS_COLORS: { [key in Status]: ChipProps['color'] } = {
 const DeploymentDetailsCard = ({
   deployment,
   productionDeployment,
+  onUpdate,
 }: DeployDetailsCardProps) => {
+  const client = useGQLClient();
+
   const [changeToProduction, setChangeToProduction] = useState(false);
   const [redeployToProduction, setRedeployToProduction] = useState(false);
   const [rollbackDeployment, setRollbackDeployment] = useState(false);
 
+  const updateDeployment = async () => {
+    const isUpdated = await client.updateDeploymentToProd(deployment.id);
+    if (isUpdated) {
+      await onUpdate();
+      toast.success('Deployment changed to production');
+    } else {
+      toast.error('Unable to change deployment to production');
+    }
+  };
+
   return (
     <div className="grid grid-cols-4 gap-2 border-b border-gray-300 p-3 my-2">
       <div className="col-span-2">
@@ -97,7 +113,10 @@ const DeploymentDetailsCard = ({
         open={changeToProduction}
         confirmButtonTitle="Change"
         color="blue"
-        handleConfirm={() => setChangeToProduction((preVal) => !preVal)}
+        handleConfirm={() => {
+          updateDeployment();
+          setChangeToProduction((preVal) => !preVal);
+        }}
       >
         <div className="flex flex-col gap-2">
           <Typography variant="small">

packages/frontend/src/types/project.ts

@@ -33,6 +33,7 @@ export interface ProjectMember {
 }
 
 export interface DeploymentDetails {
+  id: string;
   title: string;
   isProduction: boolean;
   domain: DomainDetails;