Trigger e2e

package.json

@@ -48,7 +48,7 @@
     "@tiptap/pm": "^2.1.12",
     "@tiptap/react": "^2.1.12",
     "@tiptap/starter-kit": "^2.1.12",
-    "axios": "^0.21.3",
+    "axios": "^1.6.5",
     "bluebird": "^3.7.1",
     "bootstrap": "^4.6.0",
     "cheerio": "^1.0.0-rc.10",

src/components/Header.jsx

@@ -97,8 +97,9 @@ const Header = ({
         bg="white"
         h="4rem"
         w="100%"
+        spacing="0.5rem"
       >
-        <HStack spacing="1.25rem" flex={1}>
+        <HStack spacing="1.25rem" flex="0 1 content">
           {!showButton ? (
             <Box w="180px">
               <img
@@ -120,19 +121,26 @@ const Header = ({
                 }
                 onClick={handleBackNav}
               />
-              <Text color="text.label" textStyle="body-1">
+              <Text color="text.label" textStyle="body-1" noOfLines={1}>
                 {backButtonTextFromParams || backButtonText}
               </Text>
             </>
           )}
         </HStack>
         {/* <Spacer /> */}
         {title ? (
-          <Flex minWidth="-webkit-min-content" alignItems="center">
-            <Text textStyle="h5">{title}</Text>
+          <Flex
+            minWidth="-webkit-min-content"
+            alignItems="center"
+            flex={1}
+            justifyContent="center"
+          >
+            <Text textStyle="h5" noOfLines={1}>
+              {title}
+            </Text>
           </Flex>
         ) : null}
-        <HStack flex={1} justifyContent="flex-end">
+        <HStack flex="0 0 content" justifyContent="flex-end" w="fit-content">
           (
           {isShowStagingBuildStatusEnabled && (
             <Box mr="-0.25rem">

src/hooks/directoryHooks/contactUsHooks/useGetContactUsHook.ts

@@ -3,6 +3,8 @@ import { UseQueryResult, useQuery } from "react-query"
 
 import { GET_CONTACT_US_KEY } from "constants/queryKeys"
 
+import { getAxiosErrorMessage } from "utils/axios"
+
 import { ContactUsService } from "services"
 import { ContactUsDto } from "types/contactUs"
 import { useErrorToast, DEFAULT_RETRY_MSG } from "utils"
@@ -18,7 +20,9 @@ export const useGetContactUsHook = (
       onError: (err: AxiosError) => {
         errorToast({
           id: "get-contact-us-error",
-          description: `Your Contact Us page details could not be retrieved. ${DEFAULT_RETRY_MSG}. Error: ${err.response?.data.error.message}`,
+          description: `Your Contact Us page details could not be retrieved. ${DEFAULT_RETRY_MSG}. Error: ${getAxiosErrorMessage(
+            err
+          )}`,
         })
       },
     }

src/hooks/directoryHooks/contactUsHooks/useUpdateContactUsHook.ts

@@ -3,9 +3,10 @@ import { UseMutationResult, useQueryClient, useMutation } from "react-query"
 
 import { GET_CONTACT_US_KEY } from "constants/queryKeys"
 
+import { getAxiosErrorMessage } from "utils/axios"
+
 import { ContactUsService } from "services"
 import { ContactUsFrontMatter } from "types/contactUs"
-import { MiddlewareError } from "types/error"
 import { useSuccessToast, useErrorToast, DEFAULT_RETRY_MSG } from "utils"
 
 interface UpdateContactUsParams {
@@ -15,11 +16,7 @@ interface UpdateContactUsParams {
 
 export const useUpdateContactUsHook = (
   siteName: string
-): UseMutationResult<
-  void,
-  AxiosError<MiddlewareError>,
-  UpdateContactUsParams
-> => {
+): UseMutationResult<void, AxiosError, UpdateContactUsParams> => {
   const queryClient = useQueryClient()
   const successToast = useSuccessToast()
   const errorToast = useErrorToast()
@@ -42,10 +39,12 @@ export const useUpdateContactUsHook = (
           description: "Contact Us page updated successfully",
         })
       },
-      onError: (err: AxiosError) => {
+      onError: (err) => {
         errorToast({
           id: "update-homepage-error",
-          description: `Could not update Contact Us page. ${DEFAULT_RETRY_MSG}. Error: ${err.response?.data.error.message}`,
+          description: `Could not update Contact Us page. ${DEFAULT_RETRY_MSG}. Error: ${getAxiosErrorMessage(
+            err
+          )}`,
         })
       },
     }

src/hooks/homepageHooks/useGetHomepageHook.ts

@@ -3,6 +3,8 @@ import { UseQueryResult, useQuery } from "react-query"
 
 import { GET_HOMEPAGE_KEY } from "constants/queryKeys"
 
+import { getAxiosErrorMessage } from "utils/axios"
+
 import { HomepageService } from "services"
 import { HomepageDto } from "types/homepage"
 import { useErrorToast, DEFAULT_RETRY_MSG } from "utils"
@@ -18,7 +20,9 @@ export const useGetHomepageHook = (
       onError: (err: AxiosError) => {
         errorToast({
           id: "get-homepage-error",
-          description: `Your homepage could not be retrieved. ${DEFAULT_RETRY_MSG}. Error: ${err.response?.data.error.message}`,
+          description: `Your homepage could not be retrieved. ${DEFAULT_RETRY_MSG}. Error: ${getAxiosErrorMessage(
+            err
+          )}`,
         })
       },
     }

src/hooks/homepageHooks/useUpdateHomepageHook.ts

@@ -8,18 +8,20 @@ import {
 
 import { GET_HOMEPAGE_KEY } from "constants/queryKeys"
 
+import { getAxiosErrorMessage } from "utils/axios"
+
 import { HomepageService } from "services"
-import { MiddlewareError } from "types/error"
+import { MiddlewareErrorDto } from "types/error"
 import { HomepageDto } from "types/homepage"
 import { useSuccessToast, useErrorToast, DEFAULT_RETRY_MSG } from "utils"
 
 export const useUpdateHomepageHook = (
   siteName: string,
   mutationOptions?: Omit<
-    UseMutationOptions<void, AxiosError<MiddlewareError>, HomepageDto>,
+    UseMutationOptions<void, AxiosError<MiddlewareErrorDto>, HomepageDto>,
     "mutationFn" | "mutationKey"
   >
-): UseMutationResult<void, AxiosError<MiddlewareError>, HomepageDto> => {
+): UseMutationResult<void, AxiosError<MiddlewareErrorDto>, HomepageDto> => {
   const queryClient = useQueryClient()
   const successToast = useSuccessToast()
   const errorToast = useErrorToast()
@@ -44,7 +46,9 @@ export const useUpdateHomepageHook = (
         if (err.response?.status !== 409) {
           errorToast({
             id: "update-homepage-error",
-            description: `Could not update homepage. ${DEFAULT_RETRY_MSG}. Error: ${err.response?.data?.message}`,
+            description: `Could not update homepage. ${DEFAULT_RETRY_MSG}. Error: ${getAxiosErrorMessage(
+              err
+            )}`,
           })
         }
         if (mutationOptions?.onError)

src/hooks/mediaHooks/useDeleteMultipleMediaHook.tsx

@@ -24,35 +24,22 @@ const deleteMultipleMedia = async (
 ) => {
   const mediaService = new MediaService({ apiClient: apiService })
 
-  await selectedMediaDto
-    .map((deleteMedia) => {
-      const pathTokens = deleteMedia.filePath.split("/")
-
-      const reqParams = {
-        siteName,
-        mediaDirectoryName: pathTokens.slice(0, -1).join("%2F"),
-        fileName: pathTokens.pop(),
-        sha: deleteMedia.sha,
+  await mediaService
+    .deleteMultiple(
+      { siteName },
+      {
+        items: selectedMediaDto.map(({ filePath, sha }) => {
+          return {
+            filePath,
+            sha,
+          }
+        }),
       }
-
-      return reqParams
-    })
-    .reduce(
-      (acc, curr) =>
-        acc
-          .then(() => {
-            const { sha, ...rest } = curr
-            mediaService.delete(rest, { sha }).catch((error) => {
-              // We want to continue even if some of the media files fail to delete
-              // because there is no turning back now if we fail (the earlier files
-              // would have been deleted)
-              return error
-            }) as Promise<void>
-          })
-          // This wait is necessary to avoid the repo lock
-          .then(() => new Promise((resolve) => setTimeout(resolve, 500))),
-      Promise.resolve()
     )
+    // Note: Unfortunately, we have to wait for GitHub to finish deleting the files
+    // before we can refetch the list of files in the directory. Otherwise, the
+    // refetch will return the files that were just deleted.
+    .then(() => new Promise((resolve) => setTimeout(resolve, 1000)))
 }
 
 export const useDeleteMultipleMediaHook = (
@@ -71,7 +58,19 @@ export const useDeleteMultipleMediaHook = (
       ...mutationOptions,
       onSettled: (data, error, variables, context) => {
         queryClient.invalidateQueries([LIST_MEDIA_DIRECTORY_FILES_KEY])
-        queryClient.invalidateQueries([GET_ALL_MEDIA_FILES_KEY])
+        // Note: We choose to remove here because once the files are deleted,
+        // refetching will definitely cause a 404 Not Found error, which is what
+        // we want to avoid
+        variables.forEach(({ filePath }) => {
+          const directoryName = encodeURIComponent(
+            filePath.split("/").slice(0, -1).join("/")
+          )
+          const fileName = encodeURIComponent(filePath.split("/").pop() || "")
+          queryClient.removeQueries([
+            GET_ALL_MEDIA_FILES_KEY,
+            { siteName: params.siteName, directoryName, name: fileName },
+          ])
+        })
         if (mutationOptions?.onSettled)
           mutationOptions.onSettled(data, error, variables, context)
       },

src/hooks/navHooks/useUpdateNavHook.ts

@@ -8,8 +8,10 @@ import {
   RESOURCE_ROOM_NAME_KEY,
 } from "constants/queryKeys"
 
+import { getAxiosErrorMessage } from "utils/axios"
+
 import { NavService } from "services"
-import { MiddlewareError } from "types/error"
+import { MiddlewareErrorDto } from "types/error"
 import {
   CollectionNav,
   NavDto,
@@ -27,7 +29,7 @@ export interface UpdateNavParams {
 
 export const useUpdateNavHook = (
   siteName: string
-): UseMutationResult<void, AxiosError<MiddlewareError>, UpdateNavParams> => {
+): UseMutationResult<void, AxiosError<MiddlewareErrorDto>, UpdateNavParams> => {
   const queryClient = useQueryClient()
   const successToast = useSuccessToast()
   const errorToast = useErrorToast()
@@ -56,10 +58,12 @@ export const useUpdateNavHook = (
           description: "Navigation bar updated successfully",
         })
       },
-      onError: (err: AxiosError) => {
+      onError: (err: AxiosError<MiddlewareErrorDto>) => {
         errorToast({
           id: "update-nav-error",
-          description: `Could not update navigation bar. ${DEFAULT_RETRY_MSG}. Error: ${err.response?.data.error.message}`,
+          description: `Could not update navigation bar. ${DEFAULT_RETRY_MSG}. Error: ${getAxiosErrorMessage(
+            err
+          )}`,
         })
       },
     }

src/hooks/settingsHooks/useUpdateSettings.ts

@@ -2,7 +2,7 @@ import { AxiosError } from "axios"
 import _ from "lodash"
 import { useMutation, UseMutationResult, useQueryClient } from "react-query"
 
-import { SETTINGS_CONTENT_KEY } from "constants/queryKeys"
+import { SETTINGS_CONTENT_KEY, STAGING_URL_KEY } from "constants/queryKeys"
 
 import * as SettingsService from "services/SettingsService"
 
@@ -58,6 +58,7 @@ export const useUpdateSettings = (
     {
       onSettled: () => {
         queryClient.invalidateQueries([SETTINGS_CONTENT_KEY, siteName])
+        queryClient.invalidateQueries([STAGING_URL_KEY, siteName])
       },
       onSuccess,
       onError,