1 files changed, 35 insertions, 43 deletions
diff --git a/web_src/js/features/repo-settings.ts b/web_src/js/features/repo-settings.ts
index 7b3ab504cb..be1821664f 100644
--- a/web_src/js/features/repo-settings.ts
+++ b/web_src/js/features/repo-settings.ts
@@ -1,9 +1,9 @@
-import $ from 'jquery';
 import {minimatch} from 'minimatch';
 import {createMonaco} from './codeeditor.ts';
-import {onInputDebounce, queryElems, toggleElem} from '../utils/dom.ts';
+import {onInputDebounce, queryElems, toggleClass, toggleElem} from '../utils/dom.ts';
 import {POST} from '../modules/fetch.ts';
 import {initRepoSettingsBranchesDrag} from './repo-settings-branches.ts';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
 
 const {appSubUrl, csrfToken} = window.config;
 
@@ -11,11 +11,12 @@ function initRepoSettingsCollaboration() {
   // Change collaborator access mode
   for (const dropdownEl of queryElems(document, '.page-content.repository .ui.dropdown.access-mode')) {
     const textEl = dropdownEl.querySelector(':scope > .text');
-    $(dropdownEl).dropdown({
-      async action(text, value) {
+    const $dropdown = fomanticQuery(dropdownEl);
+    $dropdown.dropdown({
+      async action(text: string, value: string) {
         dropdownEl.classList.add('is-loading', 'loading-icon-2px');
         const lastValue = dropdownEl.getAttribute('data-last-value');
-        $(dropdownEl).dropdown('hide');
+        $dropdown.dropdown('hide');
         try {
           const uid = dropdownEl.getAttribute('data-uid');
           await POST(dropdownEl.getAttribute('data-url'), {data: new URLSearchParams({uid, 'mode': value})});
@@ -32,9 +33,9 @@ function initRepoSettingsCollaboration() {
         // set to the really selected value, defer to next tick to make sure `action` has finished
         // its work because the calling order might be onHide -> action
         setTimeout(() => {
-          const $item = $(dropdownEl).dropdown('get item', dropdownEl.getAttribute('data-last-value'));
+          const $item = $dropdown.dropdown('get item', dropdownEl.getAttribute('data-last-value'));
           if ($item) {
-            $(dropdownEl).dropdown('set selected', dropdownEl.getAttribute('data-last-value'));
+            $dropdown.dropdown('set selected', dropdownEl.getAttribute('data-last-value'));
           } else {
             textEl.textContent = '(none)'; // prevent from misleading users when the access mode is undefined
           }
@@ -48,32 +49,32 @@ function initRepoSettingsSearchTeamBox() {
   const searchTeamBox = document.querySelector('#search-team-box');
   if (!searchTeamBox) return;
 
-  $(searchTeamBox).search({
+  fomanticQuery(searchTeamBox).search({
     minCharacters: 2,
+    searchFields: ['name', 'description'],
+    showNoResults: false,
+    rawResponse: true,
     apiSettings: {
       url: `${appSubUrl}/org/${searchTeamBox.getAttribute('data-org-name')}/teams/-/search?q={query}`,
       headers: {'X-Csrf-Token': csrfToken},
-      onResponse(response) {
-        const items = [];
-        $.each(response.data, (_i, item) => {
+      onResponse(response: any) {
+        const items: Array<Record<string, any>> = [];
+        for (const item of response.data) {
           items.push({
             title: item.name,
             description: `${item.permission} access`, // TODO: translate this string
           });
-        });
-
+        }
         return {results: items};
       },
     },
-    searchFields: ['name', 'description'],
-    showNoResults: false,
   });
 }
 
 function initRepoSettingsGitHook() {
-  if (!$('.edit.githook').length) return;
+  if (!document.querySelector('.page-content.repository.settings.edit.githook')) return;
   const filename = document.querySelector('.hook-filename').textContent;
-  createMonaco($('#content')[0] as HTMLTextAreaElement, filename, {language: 'shell'});
+  createMonaco(document.querySelector<HTMLTextAreaElement>('#content'), filename, {language: 'shell'});
 }
 
 function initRepoSettingsBranches() {
@@ -120,32 +121,23 @@ function initRepoSettingsBranches() {
 }
 
 function initRepoSettingsOptions() {
-  if ($('.repository.settings.options').length > 0) {
-    // Enable or select internal/external wiki system and issue tracker.
-    $('.enable-system').on('change', function (this: HTMLInputElement) { // eslint-disable-line @typescript-eslint/no-deprecated
-      if (this.checked) {
-        $($(this).data('target')).removeClass('disabled');
-        if (!$(this).data('context')) $($(this).data('context')).addClass('disabled');
-      } else {
-        $($(this).data('target')).addClass('disabled');
-        if (!$(this).data('context')) $($(this).data('context')).removeClass('disabled');
-      }
-    });
-    $('.enable-system-radio').on('change', function (this: HTMLInputElement) { // eslint-disable-line @typescript-eslint/no-deprecated
-      if (this.value === 'false') {
-        $($(this).data('target')).addClass('disabled');
-        if ($(this).data('context') !== undefined) $($(this).data('context')).removeClass('disabled');
-      } else if (this.value === 'true') {
-        $($(this).data('target')).removeClass('disabled');
-        if ($(this).data('context') !== undefined) $($(this).data('context')).addClass('disabled');
-      }
-    });
-    const $trackerIssueStyleRadios = $('.js-tracker-issue-style');
-    $trackerIssueStyleRadios.on('change input', () => {
-      const checkedVal = $trackerIssueStyleRadios.filter(':checked').val();
-      $('#tracker-issue-style-regex-box').toggleClass('disabled', checkedVal !== 'regexp');
-    });
-  }
+  const pageContent = document.querySelector('.page-content.repository.settings.options');
+  if (!pageContent) return;
+
+  // Enable or select internal/external wiki system and issue tracker.
+  queryElems<HTMLInputElement>(pageContent, '.enable-system', (el) => el.addEventListener('change', () => {
+    toggleClass(el.getAttribute('data-target'), 'disabled', !el.checked);
+    toggleClass(el.getAttribute('data-context'), 'disabled', el.checked);
+  }));
+  queryElems<HTMLInputElement>(pageContent, '.enable-system-radio', (el) => el.addEventListener('change', () => {
+    toggleClass(el.getAttribute('data-target'), 'disabled', el.value === 'false');
+    toggleClass(el.getAttribute('data-context'), 'disabled', el.value === 'true');
+  }));
+
+  queryElems<HTMLInputElement>(pageContent, '.js-tracker-issue-style', (el) => el.addEventListener('change', () => {
+    const checkedVal = el.value;
+    pageContent.querySelector('#tracker-issue-style-regex-box').classList.toggle('disabled', checkedVal !== 'regexp');
+  }));
 }
 
 export function initRepoSettings() {