Add system setting table with cache and also add cache supports for user setting (#18058)

web_src/js/features/admin/config.js

@@ -0,0 +1,37 @@
+import $ from 'jquery';
+import {showTemporaryTooltip} from '../../modules/tippy.js';
+
+const {appSubUrl, csrfToken, pageData} = window.config;
+
+export function initAdminConfigs() {
+  const isAdminConfigPage = pageData?.adminConfigPage;
+  if (!isAdminConfigPage) return;
+
+  $("input[type='checkbox']").on('change', (e) => {
+    const $this = $(e.currentTarget);
+    $.ajax({
+      url: `${appSubUrl}/admin/config`,
+      type: 'POST',
+      data: {
+        _csrf: csrfToken,
+        key: $this.attr('name'),
+        value: $this.is(':checked'),
+        version: $this.attr('version'),
+      }
+    }).done((resp) => {
+      if (resp) {
+        if (resp.redirect) {
+          window.location.href = resp.redirect;
+        } else if (resp.version) {
+          $this.attr('version', resp.version);
+        } else if (resp.err) {
+          showTemporaryTooltip(e.currentTarget, resp.err);
+          $this.prop('checked', !$this.is(':checked'));
+        }
+      }
+    });
+
+    e.preventDefault();
+    return false;
+  });
+}

web_src/js/index.js

@@ -16,7 +16,8 @@ import initRepoMigration from './features/repo-migration.js';
 import initRepoProject from './features/repo-projects.js';
 import initServiceWorker from './features/serviceworker.js';
 import initTableSort from './features/tablesort.js';
-import {initAdminUserListSearchForm} from './features/admin-users.js';
+import {initAdminUserListSearchForm} from './features/admin/users.js';
+import {initAdminConfigs} from './features/admin/config.js';
 import {initMarkupAnchors} from './markup/anchors.js';
 import {initNotificationCount, initNotificationsTable} from './features/notification.js';
 import {initRepoIssueContentHistory} from './features/repo-issue-content.js';
@@ -60,8 +61,8 @@ import {
   initGlobalTooltips,
 } from './features/common-global.js';
 import {initRepoTopicBar} from './features/repo-home.js';
-import {initAdminEmails} from './features/admin-emails.js';
-import {initAdminCommon} from './features/admin-common.js';
+import {initAdminEmails} from './features/admin/emails.js';
+import {initAdminCommon} from './features/admin/common.js';
 import {initRepoTemplateSearch} from './features/repo-template.js';
 import {initRepoCodeView} from './features/repo-code.js';
 import {initSshKeyFormParser} from './features/sshkey-helper.js';
@@ -139,6 +140,7 @@ $(document).ready(() => {
   initAdminCommon();
   initAdminEmails();
   initAdminUserListSearchForm();
+  initAdminConfigs();
 
   initDashboardRepoList();
 

web_src/less/_base.less

@@ -131,6 +131,7 @@
   --color-timeline: #ececec;
   --color-input-text: #212121;
   --color-input-background: #ffffff;
+  --color-input-toggle-background: #dedede;
   --color-input-border: #dedede;
   --color-input-border-hover: #cecece;
   --color-navbar: #f8f8f8;

web_src/less/_form.less

@@ -113,7 +113,7 @@ textarea:focus,
 }
 
 .ui.toggle.checkbox label::before {
-  background: var(--color-input-background);
+  background: var(--color-input-toggle-background);
 }
 
 .ui.toggle.checkbox label,

web_src/less/themes/theme-arc-green.less

@@ -106,6 +106,7 @@
   --color-timeline: #4c525e;
   --color-input-text: #d5dbe6;
   --color-input-background: #232933;
+  --color-input-toggle-background: #454a57;
   --color-input-border: #454a57;
   --color-input-border-hover: #505667;
   --color-navbar: #2a2e3a;