Display build logs only when available (#10)

Part of [Service provider auctions for web deployments](https://www.notion.so/Service-provider-auctions-for-web-deployments-104a6b22d47280dbad51d28aa3a91d75)

Co-authored-by: IshaVenikar <ishavenikar7@gmail.com>
Co-authored-by: Neeraj <neeraj.rtly@gmail.com>
Reviewed-on: #10

packages/backend/src/database.ts

@@ -144,6 +144,7 @@ export class Database {
       .leftJoinAndSelect('deployments.createdBy', 'user')
       .leftJoinAndSelect('deployments.domain', 'domain')
       .leftJoinAndSelect('project.owner', 'owner')
+      .leftJoinAndSelect('project.deployers', 'deployers')
       .leftJoinAndSelect('project.organization', 'organization')
       .where('project.id = :projectId', {
         projectId

packages/backend/src/schema.gql

@@ -72,7 +72,7 @@ type Project {
   repository: String!
   prodBranch: String!
   description: String
-  deployerLrns: [String]
+  deployers: [Deployer!]
   auctionId: String
   fundsReleased: Boolean
   template: String

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

@@ -68,7 +68,9 @@ const DeploymentDetailsCard = ({
   prodBranchDomains,
 }: DeployDetailsCardProps) => {
   const [openDialog, setOpenDialog] = useState<boolean>(false);
-  const [deploymentLogs, setDeploymentLogs] = useState<string>();
+  const [deploymentLogs, setDeploymentLogs] = useState<string>(
+    'No deployment logs available',
+  );
 
   const handleOpenDialog = () => setOpenDialog(true);
   const handleCloseDialog = () => setOpenDialog(false);
@@ -92,9 +94,11 @@ const DeploymentDetailsCard = ({
   const fetchDeploymentLogs = useCallback(async () => {
     let url = `${deployment.deployer.deployerApiUrl}/log/${deployment.applicationDeploymentRequestId}`;
     const res = await fetch(url, { cache: 'no-store' });
+    handleOpenDialog();
+    if (res.ok) {
       const logs = await res.text();
       setDeploymentLogs(logs);
-    handleOpenDialog();
+    }
   }, [
     deployment.deployer.deployerApiUrl,
     deployment.applicationDeploymentRequestId,

packages/frontend/src/components/projects/project/overview/Activity/AuctionCard.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
-import { Auction, Project } from 'gql-client';
+import { Auction, Deployer, Project } from 'gql-client';
 
 import {
   Dialog,
@@ -19,7 +19,7 @@ const WAIT_DURATION = 5000;
 
 export const AuctionCard = ({ project }: { project: Project }) => {
   const [auctionStatus, setAuctionStatus] = useState<string>('');
-  const [deployerLrns, setDeployerLrns] = useState<string[]>([]);
+  const [deployers, setDeployers] = useState<Deployer[]>([]);
   const [fundsStatus, setFundsStatus] = useState<boolean>(false);
   const [auctionDetails, setAuctionDetails] = useState<Auction | null>(null);
   const [openDialog, setOpenDialog] = useState<boolean>(false);
@@ -36,7 +36,7 @@ export const AuctionCard = ({ project }: { project: Project }) => {
     const result = await client.getAuctionData(project.auctionId);
     setAuctionStatus(result.status);
     setAuctionDetails(result);
-    setDeployerLrns(project.deployerLrns);
+    setDeployers(project.deployers);
     setFundsStatus(project.fundsReleased);
   }, []);
 
@@ -52,7 +52,7 @@ export const AuctionCard = ({ project }: { project: Project }) => {
         // Wait for 5 secs since the project is not immediately updated with deployer LRNs
         await new Promise((resolve) => setTimeout(resolve, WAIT_DURATION));
         const updatedProject = await client.getProject(project.id);
-        setDeployerLrns(updatedProject.project?.deployerLrns || []);
+        setDeployers(updatedProject.project?.deployers || []);
       };
       fetchUpdatedProject();
     }
@@ -102,14 +102,14 @@ export const AuctionCard = ({ project }: { project: Project }) => {
           </span>
         </div>
 
-        {deployerLrns?.length > 0 && (
+        {deployers?.length > 0 && (
           <div className="mt-3">
             <span className="text-elements-high-em text-sm font-medium tracking-tight">
               Deployer LRNs
             </span>
-            {deployerLrns.map((lrn, index) => (
+            {deployers.map((deployer, index) => (
               <p key={index} className="text-elements-mid-em text-sm">
-                {'\u2022'} {lrn}
+                {'\u2022'} {deployer.deployerLrn}
               </p>
             ))}
           </div>

packages/frontend/src/stories/MockStoriesData.ts

@@ -127,7 +127,13 @@ export const project: Project = {
   template: 'Template',
   members: [member],
   auctionId: '7553538436710373822151221341b43f577e07b0525d083cc9b2de98890138a1',
-  deployerLrns: ['lrn://deployer.apps.snowballtools.com '],
+  deployers: [
+    {
+      deployerApiUrl: 'https://webapp-deployer-api.example.com',
+      deployerId: 'bafyreicrtgmkir4evvvysxdqxddf2ftdq2wrzuodgvwnxr4rmubi4obdfu',
+      deployerLrn: 'lrn://deployer.apps.snowballtools.com ',
+    }
+  ],
   webhooks: ['beepboop'],
   icon: 'Icon',
   fundsReleased: true,

packages/gql-client/src/queries.ts

@@ -24,7 +24,11 @@ query ($projectId: String!) {
     updatedAt
     prodBranch
     auctionId
-    deployerLrns
+    deployers {
+      deployerApiUrl
+      deployerId
+      deployerLrn
+    }
     fundsReleased
     framework
     repository
@@ -76,7 +80,11 @@ query ($organizationSlug: String!) {
     description
     framework
     auctionId
-    deployerLrns
+    deployers {
+      deployerApiUrl
+      deployerId
+      deployerLrn
+    }
     fundsReleased
     prodBranch
     webhooks
@@ -199,7 +207,11 @@ query ($searchText: String!) {
     description
     framework
     auctionId
-    deployerLrns
+    deployers {
+      deployerApiUrl
+      deployerId
+      deployerLrn
+    }
     fundsReleased
     prodBranch
     webhooks

packages/gql-client/src/types.ts

@@ -176,7 +176,7 @@ export type Project = {
   description: string;
   template: string;
   framework: string;
-  deployerLrns: string[];
+  deployers: [Deployer]
   auctionId: string;
   fundsReleased: boolean;
   webhooks: string[];