2 files changed, 19 insertions, 19 deletions

diff --git a/app/assets/javascripts/projects/permissions/components/settings_panel.vue b/app/assets/javascripts/projects/permissions/components/settings_panel.vue
index 601705f671d..326d9105666 100644
--- a/app/assets/javascripts/projects/permissions/components/settings_panel.vue
+++ b/app/assets/javascripts/projects/permissions/components/settings_panel.vue
@@ -3,7 +3,7 @@ import projectFeatureSetting from './project_feature_setting.vue';
 import projectFeatureToggle from './project_feature_toggle.vue';
 import projectSettingRow from './project_setting_row.vue';
 import { visibilityOptions, visibilityLevelDescriptions } from '../constants';
-import { handleMergeRequestsToggle, handlePipelinesToggle } from '../external';
+import { toggleHiddenClassBySelector } from '../external';
 
 export default {
   props: {
@@ -150,14 +150,19 @@ export default {
       }
     },
 
+    issuesAccessLevel(value, oldValue) {
+      if (value === 0) toggleHiddenClassBySelector('.issues-feature', true);
+      else if (oldValue === 0) toggleHiddenClassBySelector('.issues-feature', false);
+    },
+
     mergeRequestsAccessLevel(value, oldValue) {
-      if (value === 0) handleMergeRequestsToggle(false);
-      else if (oldValue === 0) handleMergeRequestsToggle(true);
+      if (value === 0) toggleHiddenClassBySelector('.merge-requests-feature', true);
+      else if (oldValue === 0) toggleHiddenClassBySelector('.merge-requests-feature', false);
     },
 
     buildsAccessLevel(value, oldValue) {
-      if (value === 0) handlePipelinesToggle(false);
-      else if (oldValue === 0) handlePipelinesToggle(true);
+      if (value === 0) toggleHiddenClassBySelector('.builds-feature', true);
+      else if (oldValue === 0) toggleHiddenClassBySelector('.builds-feature', false);
     },
   },
 };
diff --git a/app/assets/javascripts/projects/permissions/external.js b/app/assets/javascripts/projects/permissions/external.js
index 5e28cd3bf59..460af4a2111 100644
--- a/app/assets/javascripts/projects/permissions/external.js
+++ b/app/assets/javascripts/projects/permissions/external.js
@@ -1,23 +1,18 @@
-let mergeRequestSettings;
-let pipelinesSettings;
+const selectorCache = [];
 
 // workaround since we don't have a polyfill for classList.toggle 2nd parameter
-function toggleHiddenClass(element, hide) {
-  if (hide) {
+export function toggleHiddenClass(element, hidden) {
+  if (hidden) {
     element.classList.add('hidden');
   } else {
     element.classList.remove('hidden');
   }
 }
 
-// hide external merge request-specific settings when merge request feature is disabled
-export function handleMergeRequestsToggle(enabled) {
-  if (!mergeRequestSettings) mergeRequestSettings = document.querySelectorAll('.merge-requests-feature');
-  mergeRequestSettings.forEach(elm => toggleHiddenClass(elm, !enabled));
-}
-
-// hide external pipelines-specific settings when pipelines feature is disabled
-export function handlePipelinesToggle(enabled) {
-  if (!pipelinesSettings) pipelinesSettings = document.querySelectorAll('.builds-feature');
-  pipelinesSettings.forEach(elm => toggleHiddenClass(elm, !enabled));
+// hide external feature-specific settings when a given feature is disabled
+export function toggleHiddenClassBySelector(selector, hidden) {
+  if (!selectorCache[selector]) {
+    selectorCache[selector] = document.querySelectorAll(selector);
+  }
+  selectorCache[selector].forEach(elm => toggleHiddenClass(elm, hidden));
 }