feat(app): add forceUpdate URL param (#729)

Author: danadajian

app/frontend/components/main-page.tsx

@@ -53,7 +53,7 @@ export const MainPage = ({
   const params: Record<string, string | undefined> = Object.fromEntries(
     searchParams.entries()
   );
-  const { page: pageParam } = params;
+  const { page: pageParam, forceUpdate } = params;
 
   const page = Number(pageParam ?? 1);
   const { isLoading, data, isFetching, error } = trpc.fetchCurrentPage.useQuery(
@@ -154,7 +154,9 @@ export const MainPage = ({
         )}
         <div className="mt-8">
           <UpdateImagesButton
-            disabled={isFetching || !hasViewedAllPages}
+            disabled={
+              isFetching || (!hasViewedAllPages && forceUpdate !== 'true')
+            }
             hasViewedAllPages={hasViewedAllPages}
           />
         </div>

app/frontend/components/update-images-button.tsx

@@ -124,7 +124,9 @@ export const UpdateImagesButton: React.FC<{
     }
   };
 
+  const forceUpdate = params.forceUpdate === 'true';
   const shouldDisableAcceptVisualChangesButton =
+    !forceUpdate &&
     acceptVisualChangesState !== AcceptVisualChangesTexts.NOT_ACCEPTED;
 
   const showReviewPopover =

app/frontend/cypress/component/App.cy.tsx

@@ -276,6 +276,42 @@ describe('App', () => {
     });
   });
 
+  describe('forceUpdate param case', () => {
+    beforeEach(() => {
+      cy.intercept('/trpc/fetchCurrentPage*', req => {
+        const page = getPageFromRequest(req);
+        const body = page === 2 ? secondPage : firstPage;
+        req.reply(body);
+      });
+      cy.intercept('/trpc/acceptVisualChanges*', { body: mutationResponse }).as(
+        'accept-visual-changes'
+      );
+      cy.mount(
+        <MemoryRouter
+          initialEntries={[
+            '/?commitHash=123&bucket=bucket&repo=repo&owner=owner&forceUpdate=true'
+          ]}
+        >
+          <App />
+        </MemoryRouter>
+      );
+    });
+
+    it('should enable accept visual changes button without viewing all pages', () => {
+      cy.findByRole('button', { name: 'Accept visual changes' }).should(
+        'be.enabled'
+      );
+    });
+
+    it('should allow accepting visual changes without viewing all pages', () => {
+      cy.findByRole('button', { name: 'Accept visual changes' }).click();
+      cy.findByText(/Are you sure/i);
+      cy.findByRole('button', { name: 'Accept' }).click();
+      cy.wait('@accept-visual-changes');
+      cy.findByRole('button', { name: /Visual changes accepted/i });
+    });
+  });
+
   describe('diffId param case', () => {
     beforeEach(() => {
       cy.intercept('/trpc/fetchCurrentPage*', req => {