Merge pull request #1334 from CodeForAfrica/ft/upgrade-payload

build(payload): fix images not loading

Author: kelvinkipruto

apps/trustlab/.env.template

@@ -11,6 +11,9 @@ S3_BUCKET=
 S3_ACCESS_KEY_ID=
 S3_SECRET_ACCESS_KEY=
 S3_REGION=
+S3_MAX_ATTEMPTS=3
+S3_MAX_SOCKETS=1000
+S3_CONNECTION_TIMEOUT=5000
 
 # Sentry
 NEXT_PUBLIC_SENTRY_DSN=

apps/trustlab/src/components/Incubator/Incubator.js

@@ -1,7 +1,7 @@
 import { Section } from "@commons-ui/core";
 import { Figure, Link } from "@commons-ui/next";
 import { LexicalRichText } from "@commons-ui/payload";
-import { Grid, Box, Button, SvgIcon } from "@mui/material";
+import { Grid, Box, Button, SvgIcon, Typography } from "@mui/material";
 import React, { forwardRef } from "react";
 
 import VisitIcon from "@/trustlab/assets/icons/Type=visit, Size=20, Color=CurrentColor.svg";
@@ -13,6 +13,7 @@ const Incubator = forwardRef((props, ref) => {
     buttonLink,
     image,
     content,
+    title,
   } = props;
 
   if (!content && !image) {
@@ -28,6 +29,9 @@ const Incubator = forwardRef((props, ref) => {
       ref={ref}
     >
       <Section sx={{ py: 8, px: { xs: 2.5, md: 0 } }}>
+        <Typography sx={{ whiteSpace: "nowrap", mb: 2 }} variant="display4">
+          {title}
+        </Typography>
         <Grid container spacing={2} alignItems="center">
           <Grid item xs={12} sm={7}>
             <LexicalRichText

apps/trustlab/src/components/Incubator/Incubator.snap.js

@@ -8,6 +8,11 @@ exports[`<Incubator /> renders unchanged 1`] = `
     <div
       class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1be4fpk-MuiContainer-root"
     >
+      <h2
+        class="MuiTypography-root MuiTypography-display4 css-283xsv-MuiTypography-root"
+      >
+        Incubator
+      </h2>
       <div
         class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-1cth5tq-MuiGrid-root"
       >

apps/trustlab/src/components/Incubator/Incubator.test.js

@@ -9,6 +9,7 @@ const render = createRender({ theme });
 
 const defaultProps = {
   content: null,
+  title: "Incubator",
   image: {
     url: "https://example.com/image.jpg",
     alt: "Incubator Image",

apps/trustlab/src/payload/plugins/index.js

@@ -14,6 +14,9 @@ const bucket = process.env.S3_BUCKET ?? "";
 const region = process.env.S3_REGION ?? "";
 const secretAccessKey = process.env.S3_SECRET_ACCESS_KEY ?? "";
 const s3Enabled = !!accessKeyId && !!region && !!secretAccessKey;
+const s3MaxAttempts = Number(process.env.S3_MAX_ATTEMPTS) || 3;
+const s3MaxSockets = Number(process.env.S3_MAX_SOCKETS) || 1000;
+const s3ConnectionTimeout = Number(process.env.S3_CONNECTION_TIMEOUT) || 5000;
 
 const plugins = [
   nestedDocsPlugin({
@@ -32,6 +35,19 @@ const plugins = [
         secretAccessKey,
       },
       region,
+      maxAttempts: s3MaxAttempts,
+      requestHandler: {
+        httpAgent: {
+          maxSockets: s3MaxSockets,
+          keepAlive: true,
+        },
+        httpsAgent: {
+          maxSockets: s3MaxSockets,
+          keepAlive: true,
+        },
+        connectionTimeout: s3ConnectionTimeout,
+        requestTimeout: s3ConnectionTimeout,
+      },
     },
     enabled: s3Enabled,
   }),

apps/trustlab/turbo.json

@@ -8,6 +8,9 @@
         "REVALIDATE_SECRET",
         "S3_ACCESS_KEY_ID",
         "S3_BUCKET",
+        "S3_CONNECTION_TIMEOUT",
+        "S3_MAX_ATTEMPTS",
+        "S3_MAX_SOCKETS",
         "S3_REGION",
         "S3_SECRET_ACCESS_KEY",
         "SENTRY_ENVIRONMENT"

pnpm-lock.yaml

@@ -227,24 +227,24 @@ catalogs:
     "@mui/private-theming": ^5.16.6
   payload-v3:
     "@nouance/payload-better-fields-plugin": ^2.0.2
-    "@payloadcms/admin-bar": ^3.39.0
-    "@payloadcms/db-mongodb": ^3.39.0
-    "@payloadcms/email-nodemailer": ^3.39.0
-    "@payloadcms/live-preview-react": ^3.39.0
-    "@payloadcms/next": ^3.39.0
-    "@payloadcms/payload-cloud": ^3.39.0
-    "@payloadcms/plugin-cloud-storage": ^3.39.0
-    "@payloadcms/plugin-form-builder": ^3.39.0
-    "@payloadcms/plugin-nested-docs": ^3.39.0
-    "@payloadcms/plugin-redirects": ^3.39.0
-    "@payloadcms/plugin-search": ^3.39.0
-    "@payloadcms/plugin-sentry": ^3.39.0
-    "@payloadcms/plugin-seo": ^3.39.0
-    "@payloadcms/richtext-lexical": ^3.39.0
-    "@payloadcms/storage-s3": ^3.39.0
-    "@payloadcms/ui": ^3.39.0
+    "@payloadcms/admin-bar": ^3.60.0
+    "@payloadcms/db-mongodb": ^3.60.0
+    "@payloadcms/email-nodemailer": ^3.60.0
+    "@payloadcms/live-preview-react": ^3.60.0
+    "@payloadcms/next": ^3.60.0
+    "@payloadcms/payload-cloud": ^3.60.0
+    "@payloadcms/plugin-cloud-storage": ^3.60.0
+    "@payloadcms/plugin-form-builder": ^3.60.0
+    "@payloadcms/plugin-nested-docs": ^3.60.0
+    "@payloadcms/plugin-redirects": ^3.60.0
+    "@payloadcms/plugin-search": ^3.60.0
+    "@payloadcms/plugin-sentry": ^3.60.0
+    "@payloadcms/plugin-seo": ^3.60.0
+    "@payloadcms/richtext-lexical": ^3.60.0
+    "@payloadcms/storage-s3": ^3.60.0
+    "@payloadcms/ui": ^3.60.0
     graphql: ^16.11.0
-    payload: ^3.39.0
+    payload: ^3.60.0
     require-in-the-middle: ^7.5.2
   react-19:
     "react": ^19.1.0