Merge branch '#50928-stale-list-of-issues-on-board-after-click-back' into 'master'

circumvent browser cache on browser back navigation

Closes #50928

See merge request gitlab-org/gitlab-ce!22006

app/assets/javascripts/boards/index.js

@@ -25,6 +25,7 @@ import './components/board_sidebar';
 import './components/new_list_dropdown';
 import BoardAddIssuesModal from './components/modal/index.vue';
 import '~/vue_shared/vue_resource_interceptor';
+import { NavigationType } from '~/lib/utils/common_utils';
 
 export default () => {
   const $boardApp = document.getElementById('board-app');
@@ -32,6 +33,16 @@ export default () => {
 
   window.gl = window.gl || {};
 
+  // check for browser back and trigger a hard reload to circumvent browser caching.
+  window.addEventListener('pageshow', (event) => {
+    const isNavTypeBackForward = window.performance &&
+        window.performance.navigation.type === NavigationType.TYPE_BACK_FORWARD;
+
+    if (event.persisted || isNavTypeBackForward) {
+      window.location.reload();
+    }
+  });
+
   if (gl.IssueBoardsApp) {
     gl.IssueBoardsApp.$destroy(true);
   }

app/assets/javascripts/lib/utils/common_utils.js

@@ -616,6 +616,17 @@ export const roundOffFloat = (number, precision = 0) => {
   return Math.round(number * multiplier) / multiplier;
 };
 
+/**
+ * Represents navigation type constants of the Performance Navigation API.
+ * Detailed explanation see https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation.
+ */
+export const NavigationType = {
+  TYPE_NAVIGATE: 0,
+  TYPE_RELOAD: 1,
+  TYPE_BACK_FORWARD: 2,
+  TYPE_RESERVED: 255,
+};
+
 window.gl = window.gl || {};
 window.gl.utils = {
   ...(window.gl.utils || {}),

changelogs/unreleased/-50928-stale-list-of-issues-on-board-after-click-back.yml

+---
+title: Fix stale issue boards after browser back
+merge_request: 22006
+author: Johann Hubert Sonntagbauer
+type: fixed

spec/features/boards/reload_boards_on_browser_back_spec.rb

+require 'rails_helper'
+
+describe 'Ensure Boards do not show stale data on browser back', :js do
+  let(:project) {create(:project, :public)}
+  let(:board)   {create(:board, project: project)}
+  let(:user)    {create(:user)}
+
+  context 'authorized user' do
+    before do
+      project.add_maintainer(user)
+
+      sign_in(user)
+
+      visit project_board_path(project, board)
+      wait_for_requests
+
+      page.within(first('.board .issue-count-badge-count')) do
+        expect(page).to have_content('0')
+      end
+    end
+
+    it 'created issue is listed on board' do
+      visit new_project_issue_path(project)
+      wait_for_requests
+
+      fill_in 'issue_title', with: 'issue should be shown'
+
+      click_button 'Submit issue'
+
+      page.go_back
+      wait_for_requests
+
+      page.go_back
+      wait_for_requests
+
+      page.within(first('.board .issue-count-badge-count')) do
+        expect(page).to have_content('1')
+      end
+
+      page.within(first('.board-card')) do
+        issue = project.issues.find_by_title('issue should be shown')
+
+        expect(page).to have_content(issue.to_reference)
+        expect(page).to have_link(issue.title, href: issue_path(issue))
+      end
+    end
+  end
+end