Merge branch '229831-allow-refresh-rate-feature-to-be-disabled' into 'master'

Use VisibilityJS instead of document.hidden

Closes #229831

See merge request gitlab-org/gitlab!37189

app/assets/javascripts/monitoring/components/refresh_button.vue

 <script>
-import { n__, __ } from '~/locale';
+import Visibility from 'visibilityjs';
 import { mapActions } from 'vuex';
+import { n__, __ } from '~/locale';
 
 import {
   GlButtonGroup,
@@ -98,7 +99,8 @@ export default {
       };
 
       this.stopAutoRefresh();
-      if (document.hidden) {
+
+      if (Visibility.hidden()) {
         // Inactive tab? Skip fetch and schedule again
         schedule();
       } else {

spec/frontend/monitoring/components/refresh_button_spec.js

 import { shallowMount } from '@vue/test-utils';
+import Visibility from 'visibilityjs';
 import { createStore } from '~/monitoring/stores';
 import { GlNewDropdown, GlNewDropdownItem, GlButton } from '@gitlab/ui';
-
 import RefreshButton from '~/monitoring/components/refresh_button.vue';
 
 describe('RefreshButton', () => {
@@ -31,14 +31,8 @@ describe('RefreshButton', () => {
     jest.spyOn(store, 'dispatch').mockResolvedValue();
     dispatch = store.dispatch;
 
-    // Document can be mock hidden by overriding the `hidden` property
     documentHidden = false;
-    Object.defineProperty(document, 'hidden', {
-      configurable: true,
-      get() {
-        return documentHidden;
-      },
-    });
+    jest.spyOn(Visibility, 'hidden').mockImplementation(() => documentHidden);
 
     createWrapper();
   });