Release/0.26.0

CHANGELOG.md

@@ -4,8 +4,18 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v0.26.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.25.0...v0.26.0)
+
+- chore: update refetch behaviour [`#1260`](https://github.com/isomerpages/isomercms-frontend/pull/1260)
+- Fix: refetch diff info when modal is opened [`#1264`](https://github.com/isomerpages/isomercms-frontend/pull/1264)
+- feat: make updated at field optional on sites page [`#1265`](https://github.com/isomerpages/isomercms-frontend/pull/1265)
+- Fix: publish button delay [`#1263`](https://github.com/isomerpages/isomercms-frontend/pull/1263)
+- release(v0.25.0): merge to develop [`#1255`](https://github.com/isomerpages/isomercms-frontend/pull/1255)
+
 #### [v0.25.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.24.1...v0.25.0)
 
+> 4 May 2023
+
 - feat(dashboard): Dont reload on window focus [`#1254`](https://github.com/isomerpages/isomercms-frontend/pull/1254)
 - feat(getAllSites): optimise get all sites, dont reload on window... [`#1253`](https://github.com/isomerpages/isomercms-frontend/pull/1253)
 - Is 150 fix feature tour zindex [`#1252`](https://github.com/isomerpages/isomercms-frontend/pull/1252)
@@ -65,14 +75,14 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 > 31 March 2023
 
+- fix(app): hotfixes for header + routes [`#1216`](https://github.com/isomerpages/isomercms-frontend/pull/1216)
+- fix(sites): change to using userId [`#1215`](https://github.com/isomerpages/isomercms-frontend/pull/1215)
 - fix: bug in loading flag for login context [`bbae2eb`](https://github.com/isomerpages/isomercms-frontend/commit/bbae2eb3b864a2c2246524d334d051292078a9b1)
 
 #### [v0.21.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.20.0...v0.21.0)
 
 > 30 March 2023
 
-- fix(app): hotfixes for header + routes [`#1216`](https://github.com/isomerpages/isomercms-frontend/pull/1216)
-- fix(sites): change to using userId [`#1215`](https://github.com/isomerpages/isomercms-frontend/pull/1215)
 - feat(identity): phase 2 [`#1090`](https://github.com/isomerpages/isomercms-frontend/pull/1090)
 - fix(mergify): update condition [`#1207`](https://github.com/isomerpages/isomercms-frontend/pull/1207)
 - chore(mergify): add rule for stale PRs [`#765`](https://github.com/isomerpages/isomercms-frontend/pull/765)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "isomercms-frontend",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "private": true,
   "dependencies": {
     "@atlaskit/tree": "^7.0.2",

src/App.jsx

@@ -23,7 +23,13 @@ axios.defaults.withCredentials = true
 const LOCAL_STORAGE_SITE_COLORS = "isomercms_colors"
 
 // react-query client
-const queryClient = new QueryClient()
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false, // default: true
+    },
+  },
+})
 
 // api client
 const API_BASE_URL_V2 = `${process.env.REACT_APP_BACKEND_URL_V2}`

src/hooks/collaboratorHooks/useAddCollaboratorHook.ts

@@ -1,7 +1,10 @@
 import { AxiosError } from "axios"
 import { UseMutationResult, useQueryClient, useMutation } from "react-query"
 
-import { LIST_COLLABORATORS_KEY } from "constants/queryKeys"
+import {
+  LIST_COLLABORATORS_KEY,
+  SITE_DASHBOARD_COLLABORATORS_KEY,
+} from "constants/queryKeys"
 
 import { CollaboratorService } from "services"
 import { MiddlewareError } from "types/error"
@@ -24,6 +27,10 @@ export const useAddCollaboratorHook = (
     {
       onSuccess: () => {
         queryClient.invalidateQueries([LIST_COLLABORATORS_KEY, siteName])
+        queryClient.invalidateQueries([
+          SITE_DASHBOARD_COLLABORATORS_KEY,
+          siteName,
+        ])
       },
     }
   )

src/hooks/collaboratorHooks/useDeleteCollaboratorHook.ts

@@ -1,7 +1,10 @@
 import { AxiosError } from "axios"
 import { UseMutationResult, useQueryClient, useMutation } from "react-query"
 
-import { LIST_COLLABORATORS_KEY } from "constants/queryKeys"
+import {
+  LIST_COLLABORATORS_KEY,
+  SITE_DASHBOARD_COLLABORATORS_KEY,
+} from "constants/queryKeys"
 
 import { CollaboratorService } from "services"
 import { MiddlewareError } from "types/error"
@@ -19,6 +22,10 @@ export const useDeleteCollaboratorHook = (
     {
       onSuccess: () => {
         queryClient.invalidateQueries([LIST_COLLABORATORS_KEY, siteName])
+        queryClient.invalidateQueries([
+          SITE_DASHBOARD_COLLABORATORS_KEY,
+          siteName,
+        ])
         successToast({ description: "Collaborator removed successfully" })
       },
       onError: (err) => {

src/layouts/ReviewRequest/Dashboard.tsx

@@ -76,19 +76,22 @@ export const ReviewRequestDashboard = (): JSX.Element => {
     // TODO!
     isError: isMergeError,
   } = useMergeReviewRequest(siteName, prNumber, false)
+  const [isApproved, setIsApproved] = useState<boolean | null>(null)
 
   const { onCopy, hasCopied } = useClipboard(data?.reviewUrl || "")
-
   const reviewStatus = data?.status
-  const isApproved = reviewStatus === ReviewRequestStatus.APPROVED
+
   useEffect(() => {
     if (
       reviewStatus === ReviewRequestStatus.CLOSED ||
       reviewStatus === ReviewRequestStatus.MERGED
     ) {
       setRedirectToPage(`/sites/${siteName}/dashboard`)
     }
-  }, [reviewStatus, setRedirectToPage, siteName])
+    if (reviewStatus && isApproved === null) {
+      setIsApproved(reviewStatus === ReviewRequestStatus.APPROVED)
+    }
+  }, [isApproved, reviewStatus, setRedirectToPage, siteName])
 
   useEffect(() => {
     updateReviewRequestViewed({ siteName, prNumber })
@@ -151,9 +154,15 @@ export const ReviewRequestDashboard = (): JSX.Element => {
               </HStack>
               <Spacer />
               {role === "requestor" ? (
-                <CancelRequestButton isApproved={isApproved} />
+                <CancelRequestButton
+                  isApproved={isApproved}
+                  setIsApproved={setIsApproved}
+                />
               ) : (
-                <ApprovalButton isApproved={isApproved} />
+                <ApprovalButton
+                  isApproved={isApproved}
+                  setIsApproved={setIsApproved}
+                />
               )}
             </Flex>
             <Skeleton
@@ -213,11 +222,13 @@ export const ReviewRequestDashboard = (): JSX.Element => {
 }
 
 interface RequestButtonProps {
-  isApproved: boolean
+  isApproved: null | boolean
+  setIsApproved: (state: boolean) => void
 }
 
 const CancelRequestButton = ({
   isApproved,
+  setIsApproved,
 }: RequestButtonProps): JSX.Element => {
   const { onOpen, isOpen, onClose } = useDisclosure()
   const { role, isLoading } = useReviewRequestRoleContext()
@@ -238,20 +249,21 @@ const CancelRequestButton = ({
           </Text>
         </MenuDropdownItem>
       </MenuDropdownButton>
-      <CancelRequestModal isOpen={isOpen} onClose={onClose} />
+      <CancelRequestModal
+        isOpen={isOpen}
+        onClose={() => {
+          setIsApproved(false)
+          onClose()
+        }}
+      />
     </>
   )
 }
 
-// NOTE: Utility component exists to soothe over state management
 const ApprovalButton = ({
-  isApproved: defaultIsApproved,
+  isApproved,
+  setIsApproved,
 }: RequestButtonProps): JSX.Element => {
-  const [isApproved, setIsApproved] = useState<boolean | null>(null)
-  // NOTE: We use a computed approval one because
-  // the `useState` above captures a stale value.
-  // This leads to the button not updating when the status is finally fetched.
-  const computedApproval = isApproved === null ? defaultIsApproved : isApproved
   const { role, isLoading } = useReviewRequestRoleContext()
   const { onOpen, isOpen, onClose } = useDisclosure()
   const errorToast = useErrorToast()
@@ -298,16 +310,16 @@ const ApprovalButton = ({
   return (
     <>
       <MenuDropdownButton
-        colorScheme={computedApproval ? "success" : "primary"}
-        mainButtonText={computedApproval ? "Approved" : "In review"}
+        colorScheme={isApproved ? "success" : "primary"}
+        mainButtonText={isApproved ? "Approved" : "In review"}
         variant="solid"
         isDisabled={role !== "reviewer"}
         isLoading={isLoading}
       >
         <MenuDropdownItem
           onClick={async () => {
-            await unapproveReviewRequest()
             setIsApproved(false)
+            await unapproveReviewRequest()
           }}
         >
           <Text textStyle="body-1" textColor="text.body" w="100%">
@@ -316,8 +328,8 @@ const ApprovalButton = ({
         </MenuDropdownItem>
         <MenuDropdownItem
           onClick={async () => {
-            await approveReviewRequest()
             setIsApproved(true)
+            await approveReviewRequest()
             onOpen()
           }}
         >

src/layouts/ReviewRequest/components/ReviewRequestModal/ReviewRequestModal.tsx

@@ -40,9 +40,9 @@ export const ReviewRequestModal = (
   const errorToast = useErrorToast()
   const successToast = useSuccessToast()
 
-  const { onClose } = props
+  const { onClose, isOpen } = props
   const { siteName } = useParams<{ siteName: string }>()
-  const { data: items } = useDiff(siteName)
+  const { data: items, refetch } = useDiff(siteName)
   const { data: collaborators } = useListCollaborators(siteName)
   const {
     mutateAsync: createReviewRequest,
@@ -60,6 +60,9 @@ export const ReviewRequestModal = (
     onClose()
   })
 
+  useEffect(() => {
+    if (isOpen) refetch()
+  }, [refetch, isOpen])
   // Trigger an error toast informing the user
   // if review request not created
   useEffect(() => {

src/layouts/Sites.tsx

@@ -88,9 +88,11 @@ const SitesContent = ({ siteNames }: { siteNames?: SiteData[] }) => {
                 borderRadius="0px 0px 4px 4px"
               >
                 <Text fontSize="0.9em">{siteName.repoName}</Text>
-                <Text fontSize="0.6em" color="base.content.light">
-                  {convertUtcToTimeDiff(siteName.lastUpdated)}
-                </Text>
+                {siteName.lastUpdated && (
+                  <Text fontSize="0.6em" color="base.content.light">
+                    {convertUtcToTimeDiff(siteName.lastUpdated)}
+                  </Text>
+                )}
               </VStack>
             </Link>
           </div>