Merge branch 'main' into prod

ITPNYU · Sep 21, 2024 · 7f68654 · 7f68654
2 parents 48df33c + dc2289b
commit 7f68654
Show file tree

Hide file tree

Showing 19 changed files with 139 additions and 24 deletions.
diff --git a/.github/workflows/deploy_development_app_engine.yml b/.github/workflows/deploy_development_app_engine.yml
@@ -54,6 +54,7 @@ jobs:
           echo "NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=${{ secrets.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID }}" >> .env.production
           echo "NEXT_PUBLIC_DATABASE_NAME=${{ secrets.NEXT_PUBLIC_DATABASE_NAME }}" >> .env.production
           echo "NEXT_PUBLIC_BRANCH_NAME=${{ secrets.NEXT_PUBLIC_BRANCH_NAME }}" >> .env.production
+          echo "NEXT_PUBLIC_GCP_LOG_NAME=${{ secrets.NEXT_PUBLIC_GCP_LOG_NAME }}" >> .env.production
 
       - name: Install dependencies
         run: |

diff --git a/.github/workflows/deploy_production_app_engine.yml b/.github/workflows/deploy_production_app_engine.yml
@@ -54,6 +54,7 @@ jobs:
           echo "NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=${{ secrets.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID }}" >> .env.production
           echo "NEXT_PUBLIC_DATABASE_NAME=${{ secrets.NEXT_PUBLIC_DATABASE_NAME }}" >> .env.production
           echo "NEXT_PUBLIC_BRANCH_NAME=${{ secrets.NEXT_PUBLIC_BRANCH_NAME }}" >> .env.production
+          echo "NEXT_PUBLIC_GCP_LOG_NAME=${{ secrets.NEXT_PUBLIC_GCP_LOG_NAME }}" >> .env.production
 
       - name: Install dependencies
         run: |

diff --git a/.github/workflows/deploy_staging_app_engine.yml b/.github/workflows/deploy_staging_app_engine.yml
@@ -54,6 +54,7 @@ jobs:
           echo "NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=${{ secrets.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID }}" >> .env.production
           echo "NEXT_PUBLIC_DATABASE_NAME=${{ secrets.NEXT_PUBLIC_DATABASE_NAME }}" >> .env.production
           echo "NEXT_PUBLIC_BRANCH_NAME=${{ secrets.NEXT_PUBLIC_BRANCH_NAME }}" >> .env.production
+          echo "NEXT_PUBLIC_GCP_LOG_NAME=${{ secrets.NEXT_PUBLIC_GCP_LOG_NAME }}" >> .env.production
 
       - name: Install dependencies
         run: |

diff --git a/booking-app/app/api/calendarEvents/route.ts b/booking-app/app/api/calendarEvents/route.ts
@@ -5,8 +5,8 @@ import {
   updateEventPrefix,
 } from "@/components/src/server/calendars";
 
-import { serverBookingContents } from "@/components/src/server/admin";
 import { getCalendarClient } from "@/lib/googleClient";
+import { serverBookingContents } from "@/components/src/server/admin";
 
 const getCalendarEvents = async (calendarId: string) => {
   const calendar = await getCalendarClient();
@@ -84,7 +84,13 @@ export async function GET(req: NextRequest) {
 
   try {
     const events = await getCalendarEvents(calendarId);
-    return NextResponse.json(events);
+    const res = NextResponse.json(events);
+    res.headers.set(
+      "Cache-Control",
+      "no-store, no-cache, must-revalidate, proxy-revalidate",
+    );
+    res.headers.set("Expires", "0");
+    return res;
   } catch (error) {
     console.error("Error fetching calendar events:", error);
     return NextResponse.json(

diff --git a/booking-app/app/api/safety_training_users/route.ts b/booking-app/app/api/safety_training_users/route.ts
@@ -1,14 +1,16 @@
-import { getGoogleSheet } from "@/lib/googleClient";
 import { NextRequest, NextResponse } from "next/server";
+import { getGoogleSheet, getLoggingClient } from "@/lib/googleClient";
 
 const SPREADSHEET_ID = process.env.GOOGLE_SPREADSHEET_ID;
 const SHEET_GID = process.env.GOOGLE_SHEET_ID;
 const COLUMN = "B";
 const MAX_ROWS = 1000;
 
+export const dynamic = "force-dynamic";
 export async function GET(request: NextRequest) {
   try {
     const sheetsService = await getGoogleSheet(SPREADSHEET_ID);
+    const logger = await getLoggingClient();
 
     const spreadsheet = await sheetsService.spreadsheets.get({
       spreadsheetId: SPREADSHEET_ID,
@@ -33,16 +35,49 @@ export async function GET(request: NextRequest) {
     });
     console.log("emails", response.data.values);
 
+    const logEntry = {
+      logName: process.env.NEXT_PUBLIC_GCP_LOG_NAME + "/safety-training",
+      resource: { type: "global" },
+      entries: [
+        {
+          jsonPayload: {
+            message: "Fetched emails",
+            emails: response.data.values,
+            number: response.data.values.length,
+            branchName: process.env.NEXT_PUBLIC_BRANCH_NAME,
+            timestamp,
+          },
+          severity: "INFO",
+        },
+      ],
+    };
+
+    logger.entries.write({
+      requestBody: logEntry,
+    });
+
     const rows = response.data.values;
     if (!rows || rows.length === 0) {
-      return NextResponse.json({ emails: [] });
+      const res = NextResponse.json({ emails: [] });
+      res.headers.set(
+        "Cache-Control",
+        "no-store, no-cache, must-revalidate, proxy-revalidate",
+      );
+      res.headers.set("Expires", "0");
+      return res;
     }
 
     const emails = rows
       .flat()
       .filter(email => email && typeof email === "string");
 
-    return NextResponse.json({ emails });
+    const res = NextResponse.json({ emails });
+    res.headers.set(
+      "Cache-Control",
+      "no-store, no-cache, must-revalidate, proxy-revalidate",
+    );
+    res.headers.set("Expires", "0");
+    return res;
   } catch (error) {
     console.error("Failed to fetch emails:", error);
     if (

diff --git a/booking-app/components/src/client/routes/booking/components/CalendarVerticalResource.tsx b/booking-app/components/src/client/routes/booking/components/CalendarVerticalResource.tsx
@@ -1,4 +1,4 @@
-import { Box, Typography } from "@mui/material";
+import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { CalendarApi, DateSelectArg, EventClickArg } from "@fullcalendar/core";
 import { CalendarEvent, RoomSetting } from "../../../../types";
 import CalendarEventBlock, { NEW_TITLE_TAG } from "./CalendarEventBlock";
@@ -83,6 +83,9 @@ export default function CalendarVerticalResource({
   } = useContext(BookingContext);
   const ref = useRef(null);
 
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
   const resources = useMemo(
     () =>
       rooms.map((room) => ({
@@ -215,7 +218,7 @@ export default function CalendarVerticalResource({
         slotMinTime="09:00:00"
         slotMaxTime="21:00:00"
         allDaySlot={false}
-        aspectRatio={1.5}
+        aspectRatio={isMobile ? 0.5 : 1.5}
         expandRows={true}
         stickyHeaderDates={true}
         ref={ref}

diff --git a/booking-app/components/src/client/routes/booking/formPages/BookingFormDetailsPage.tsx b/booking-app/components/src/client/routes/booking/formPages/BookingFormDetailsPage.tsx
@@ -20,7 +20,7 @@ export default function BookingFormDetailsPage({
   return (
     <Grid container>
       <Grid width={330} />
-      <Grid xs={7} paddingRight={2}>
+      <Grid xs={12} md={7} margin={2} paddingRight={{ xs: 0, md: 2 }}>
         <FormInput {...{ isEdit, isWalkIn, calendarEventId }} />
       </Grid>
     </Grid>

diff --git a/booking-app/components/src/client/routes/booking/formPages/LandingPage.tsx b/booking-app/components/src/client/routes/booking/formPages/LandingPage.tsx
@@ -31,7 +31,12 @@ export default function LandingPage() {
   const router = useRouter();
 
   return (
-    <Center sx={{ width: "100vw", height: "90vh" }}>
+    <Center
+      sx={{ width: "100vw" }}
+      height={{ xs: "unset", md: "90vh" }}
+      padding={{ xs: 3 }}
+      // marginTop={{ xs: "10vh", md: 0 }}
+    >
       <Title as="h1">370🅙 Media Commons Reservation Form</Title>
       <p>Thank you for your interest in booking with the Media Commons</p>
       <Modal padding={4}>

diff --git a/booking-app/components/src/client/routes/booking/formPages/SelectRoomPage.tsx b/booking-app/components/src/client/routes/booking/formPages/SelectRoomPage.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Box, Stack, Typography } from "@mui/material";
+import { Box, Stack, Typography, useMediaQuery, useTheme } from "@mui/material";
 import React, { useContext, useMemo, useState } from "react";
 
 import { BookingContext } from "../bookingProvider";
@@ -27,6 +27,8 @@ export default function SelectRoomPage({
   const { selectedRooms, setSelectedRooms } = useContext(BookingContext);
   const [date, setDate] = useState<Date>(new Date());
   useCheckFormMissingData();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   const roomsToShow = useMemo(() => {
     return !isWalkIn
@@ -36,9 +38,12 @@ export default function SelectRoomPage({
 
   return (
     <Box sx={{ flexGrow: 1 }}>
-      <Grid container>
-        <Grid width={330}>
-          <Stack spacing={2}>
+      <Grid container={!isMobile}>
+        <Grid width={{ xs: "100%", md: 330 }}>
+          <Stack
+            spacing={{ xs: 0, md: 2 }}
+            alignItems={{ xs: "center", md: "unset" }}
+          >
             {!isWalkIn && <CalendarDatePicker handleChange={setDate} />}
             <Box paddingLeft="24px">
               <Typography fontWeight={500}>Spaces</Typography>

diff --git a/booking-app/components/src/client/routes/booking/formPages/UserRolePage.tsx b/booking-app/components/src/client/routes/booking/formPages/UserRolePage.tsx
@@ -19,7 +19,6 @@ const Center = styled(Box)`
 `;
 
 const Container = styled(Box)(({ theme }) => ({
-  width: "50%",
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
@@ -60,7 +59,12 @@ export default function UserRolePage({
 
   return (
     <Center>
-      <Container padding={4} marginTop={6}>
+      <Container
+        padding={4}
+        margin={3}
+        marginTop={6}
+        width={{ xs: "100%", md: "50%" }}
+      >
         <Typography fontWeight={500}>Affiliation</Typography>
         <Dropdown
           value={department}

diff --git a/booking-app/components/src/client/routes/components/Table.tsx b/booking-app/components/src/client/routes/components/Table.tsx
@@ -12,10 +12,15 @@ import {
 import React from "react";
 import { styled } from "@mui/system";
 
+const Clip = styled(Box)`
+  overflow-x: auto;
+`;
+
 const TableCustom = styled(MuiTable)(({ theme }) => ({
   border: `1px solid ${theme.palette.custom.border}`,
   borderCollapse: "separate",
   borderRadius: "0px 0px 4px 4px",
+  // overflowX: "scroll",
 
   "& tr:last-child td": {
     borderBottom: "none",
@@ -31,6 +36,7 @@ const ShadedHeader = styled(TableHead)(({ theme }) => ({
 }));
 
 export const TableTopRow = styled(MuiTable)`
+  width: 100%;
   height: 48px;
   border-bottom: none;
   border-collapse: separate;
@@ -69,12 +75,14 @@ export default function Table({ columns, children, topRow, sx }: Props) {
           </TableRow>
         </TableBody>
       </TableTopRow>
-      <TableCustom size="small" sx={sx ?? {}}>
-        <ShadedHeader>
-          <TableRow>{columns}</TableRow>
-        </ShadedHeader>
-        <TableBody>{children}</TableBody>
-      </TableCustom>
+      <Clip>
+        <TableCustom size="small" sx={sx ?? {}}>
+          <ShadedHeader>
+            <TableRow>{columns}</TableRow>
+          </ShadedHeader>
+          <TableBody>{children}</TableBody>
+        </TableCustom>
+      </Clip>
     </>
   );
 }
diff --git a/booking-app/components/src/client/routes/components/navBar.tsx b/booking-app/components/src/client/routes/components/navBar.tsx
@@ -7,6 +7,8 @@ import {
   Select,
   Toolbar,
   Typography,
+  useMediaQuery,
+  useTheme,
 } from "@mui/material";
 import React, { useContext, useEffect, useMemo, useState } from "react";
 import { usePathname, useRouter } from "next/navigation";
@@ -58,6 +60,8 @@ export default function NavBar() {
     PagePermission.BOOKING
   );
   const pathname = usePathname();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   const netId = userEmail?.split("@")[0];
 
@@ -169,7 +173,7 @@ export default function NavBar() {
     <Nav>
       <LogoBox onClick={handleClickHome}>
         <Image src={SVGLOGO} alt="Media Commons logo" height={40} />
-        <Title as="h1">Media Commons {envTitle}</Title>
+        {!isMobile && <Title as="h1">Media Commons {envTitle}</Title>}
       </LogoBox>
       <Box display="flex" alignItems="center">
         {button}

diff --git a/booking-app/components/src/client/routes/myBookings/myBookingsPage.tsx b/booking-app/components/src/client/routes/myBookings/myBookingsPage.tsx
@@ -11,10 +11,15 @@ const Center = styled(Box)`
   align-items: center;
 `;
 
+const Container = styled(Box)`
+  width: 65%;
+  margin: 48px;
+`;
+
 export default function MyBookingsPage() {
   return (
     <Center>
-      <Box width="65%" margin={6}>
+      <Box width={{ xs: "90%", md: "65%" }} margin={6}>
         <Typography variant="h6">Welcome</Typography>
         <Bookings pageContext={PageContextLevel.USER} />
       </Box>

diff --git a/booking-app/lib/googleClient.ts b/booking-app/lib/googleClient.ts
@@ -62,6 +62,16 @@ const getGoogleSheet = async (spreadsheetId: string) => {
   const authClient = await getAuthenticatedClient();
   return google.sheets({ version: "v4", auth: authClient });
 };
+const getLoggingClient = async () => {
+  const authClient = await getAuthenticatedClient();
+  return google.logging({ version: "v2", auth: authClient });
+};
 
 const oauth2Client = createOAuth2Client();
-export { getCalendarClient, getGmailClient, getGoogleSheet, oauth2Client };
+export {
+  getCalendarClient,
+  getGmailClient,
+  getGoogleSheet,
+  getLoggingClient,
+  oauth2Client,
+};
diff --git a/booking-app/next.config.mjs b/booking-app/next.config.mjs
@@ -14,6 +14,7 @@ const nextConfig = {
     FIREBASE_CLIENT_X509_CERT_URL: process.env.FIREBASE_CLIENT_X509_CERT_URL,
     NEXT_PUBLIC_BASE_URL: process.env.NEXT_PUBLIC_BASE_URL,
     NEXT_PUBLIC_BRANCH_NAME: process.env.NEXT_PUBLIC_BRANCH_NAME,
+    NEXT_PUBLIC_GCP_LOG_NAME: process.env.NEXT_PUBLIC_GCP_LOG_NAME,
     GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
     GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,
     GOOGLE_REDIRECT_URI: process.env.GOOGLE_REDIRECT_URI,
@@ -31,6 +32,28 @@ const nextConfig = {
     }
     return config;
   },
+  async headers() {
+    return [
+      {
+        source: "/api/safety_training_users",
+        headers: [
+          {
+            key: "Cache-Control",
+            value: "no-store, max-age=0",
+          },
+        ],
+      },
+      {
+        source: "/api/calendarEvents",
+        headers: [
+          {
+            key: "Cache-Control",
+            value: "no-store, max-age=0",
+          },
+        ],
+      },
+    ];
+  },
 };
 
 export default nextConfig;
diff --git a/booking-app/scripts/getDevelopmentRefreshToken.js b/booking-app/scripts/getDevelopmentRefreshToken.js
@@ -12,6 +12,7 @@ const SCOPES = [
   "https://www.googleapis.com/auth/calendar.events",
   "https://www.googleapis.com/auth/userinfo.email",
   "https://www.googleapis.com/auth/spreadsheets",
+  "https://www.googleapis.com/auth/logging.write",
 ];
 
 const oauth2Client = new google.auth.OAuth2(

diff --git a/booking-app/scripts/getLocalRefreshToken.js b/booking-app/scripts/getLocalRefreshToken.js
@@ -11,6 +11,7 @@ const SCOPES = [
   "https://www.googleapis.com/auth/calendar.events",
   "https://www.googleapis.com/auth/userinfo.email",
   "https://www.googleapis.com/auth/spreadsheets",
+  "https://www.googleapis.com/auth/logging.write",
 ];
 
 const oauth2Client = new google.auth.OAuth2(

diff --git a/booking-app/scripts/getProductionRefreshToken.js b/booking-app/scripts/getProductionRefreshToken.js
@@ -12,6 +12,7 @@ const SCOPES = [
   "https://www.googleapis.com/auth/calendar.events",
   "https://www.googleapis.com/auth/userinfo.email",
   "https://www.googleapis.com/auth/spreadsheets",
+  "https://www.googleapis.com/auth/logging.write",
 ];
 
 const oauth2Client = new google.auth.OAuth2(

diff --git a/booking-app/scripts/getStagingRefreshToken.js b/booking-app/scripts/getStagingRefreshToken.js
@@ -15,6 +15,7 @@ const SCOPES = [
   "https://www.googleapis.com/auth/calendar.events",
   "https://www.googleapis.com/auth/userinfo.email",
   "https://www.googleapis.com/auth/spreadsheets",
+  "https://www.googleapis.com/auth/logging.write",
 ];
 
 const oauth2Client = new google.auth.OAuth2(