2 files changed, 29 insertions, 0 deletions
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index eafe022cee..73096a6434 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -1990,6 +1990,11 @@
   padding-left: 26px;
 }
 
+.repository.settings.branches .branch-protection .status-check-matched-mark {
+  font-weight: var(--font-weight-bold);
+  font-style: italic;
+}
+
 .repository.settings.webhook .events .column {
   padding-bottom: 0;
 }
diff --git a/web_src/js/features/repo-settings.js b/web_src/js/features/repo-settings.js
index 7105a14b30..8cc016fdc2 100644
--- a/web_src/js/features/repo-settings.js
+++ b/web_src/js/features/repo-settings.js
@@ -1,5 +1,7 @@
 import $ from 'jquery';
+import {minimatch} from 'minimatch';
 import {createMonaco} from './codeeditor.js';
+import {onInputDebounce, toggleElem} from '../utils/dom.js';
 
 const {appSubUrl, csrfToken} = window.config;
 
@@ -81,4 +83,26 @@ export function initRepoSettingBranches() {
     const $target = $($(this).attr('data-target'));
     if (this.checked) $target.addClass('disabled'); // only disable, do not auto enable
   });
+
+  // show the `Matched` mark for the status checks that match the pattern
+  const markMatchedStatusChecks = () => {
+    const patterns = (document.getElementById('status_check_contexts').value || '').split(/[\r\n]+/);
+    const validPatterns = patterns.map((item) => item.trim()).filter(Boolean);
+    const marks = document.getElementsByClassName('status-check-matched-mark');
+
+    for (const el of marks) {
+      let matched = false;
+      const statusCheck = el.getAttribute('data-status-check');
+      for (const pattern of validPatterns) {
+        if (minimatch(statusCheck, pattern)) {
+          matched = true;
+          break;
+        }
+      }
+
+      toggleElem(el, matched);
+    }
+  };
+  markMatchedStatusChecks();
+  document.getElementById('status_check_contexts').addEventListener('input', onInputDebounce(markMatchedStatusChecks));
 }