Show domains for change to production and redeploy in deployments page (#56)

* Display URL for change to production dialog box

* Refactor database method for domains to service class

* Handle error in resolver instead of service class

* Return entity from service class for add operation

* Do not fetch branches if repo not available

---------

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

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Project } from 'gql-client';
+import { Project, Domain } from 'gql-client';
 
 import { Button, Typography } from '@material-tailwind/react';
 
@@ -22,6 +22,7 @@ const DeploymentsTabPanel = ({ project }: { project: Project }) => {
 
   const [filterValue, setFilterValue] = useState(DEFAULT_FILTER_VALUE);
   const [deployments, setDeployments] = useState<DeploymentDetails[]>([]);
+  const [prodBranchDomains, setProdBranchDomains] = useState<Domain[]>([]);
 
   const fetchDeployments = async () => {
     const { deployments } = await client.getDeployments(project.id);
@@ -35,8 +36,16 @@ const DeploymentsTabPanel = ({ project }: { project: Project }) => {
     setDeployments(updatedDeployments);
   };
 
+  const fetchProductionBranchDomains = useCallback(async () => {
+    const { domains } = await client.getDomains(project.id, {
+      branch: project.prodBranch,
+    });
+    setProdBranchDomains(domains);
+  }, []);
+
   useEffect(() => {
     fetchDeployments();
+    fetchProductionBranchDomains();
   }, []);
 
   const currentDeployment = useMemo(() => {
@@ -93,6 +102,7 @@ const DeploymentsTabPanel = ({ project }: { project: Project }) => {
                 currentDeployment={currentDeployment!}
                 onUpdate={onUpdateDeploymenToProd}
                 project={project}
+                prodBranchDomains={prodBranchDomains}
               />
             );
           })

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

@@ -31,6 +31,11 @@ const OverviewTabPanel = ({ project }: OverviewProps) => {
     const fetchRepoActivity = async () => {
       const [owner, repo] = project.repository.split('/');
 
+      if (!repo) {
+        // Do not fetch branches if repo not available
+        return;
+      }
+
       // Get all branches in project repo
       const result = await octokit.rest.repos.listBranches({
         owner,

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

@@ -10,7 +10,7 @@ import {
   ChipProps,
 } from '@material-tailwind/react';
 import toast from 'react-hot-toast';
-import { Environment, Project } from 'gql-client';
+import { Environment, Project, Domain } from 'gql-client';
 
 import { relativeTimeMs } from '../../../../utils/time';
 import ConfirmDialog from '../../../shared/ConfirmDialog';
@@ -24,6 +24,7 @@ interface DeployDetailsCardProps {
   currentDeployment: DeploymentDetails;
   onUpdate: () => Promise<void>;
   project: Project;
+  prodBranchDomains: Domain[];
 }
 
 const STATUS_COLORS: { [key in Status]: ChipProps['color'] } = {
@@ -37,6 +38,7 @@ const DeploymentDetailsCard = ({
   currentDeployment,
   onUpdate,
   project,
+  prodBranchDomains,
 }: DeployDetailsCardProps) => {
   const client = useGQLClient();
 
@@ -167,12 +169,14 @@ const DeploymentDetailsCard = ({
           <Typography variant="small">
             The new deployment will be associated with these domains:
           </Typography>
-          <Typography variant="small" color="blue">
-            ^ saugatt.com
-          </Typography>
-          <Typography variant="small" color="blue">
-            ^ www.saugatt.com
-          </Typography>
+          {prodBranchDomains.length > 0 &&
+            prodBranchDomains.map((value) => {
+              return (
+                <Typography variant="small" color="blue" key={value.id}>
+                  ^ {value.name}
+                </Typography>
+              );
+            })}
         </div>
       </ConfirmDialog>
       <ConfirmDialog
@@ -195,12 +199,11 @@ const DeploymentDetailsCard = ({
           <Typography variant="small">
             These domains will point to your new deployment:
           </Typography>
-          <Typography variant="small" color="blue">
-            ^ saugatt.com
-          </Typography>
-          <Typography variant="small" color="blue">
-            ^ www.saugatt.com
-          </Typography>
+          {deployment.domain?.name && (
+            <Typography variant="small" color="blue">
+              {deployment.domain?.name}
+            </Typography>
+          )}
         </div>
       </ConfirmDialog>
       <ConfirmDialog