Management Backend Menu and Function Adjustments (#1474)

…ent, regardless of functional split or reorganization

Author: dashuai

i18n/en_US.yaml

@@ -1816,6 +1816,13 @@ ui:
     plugins: Plugins
     installed_plugins: Installed Plugins
     apperance: Appearance
+    community: Community
+    advanced: Advanced
+    tags: Tags
+    rules: Rules
+    policies: Policies
+    security: Security
+    files: Files
   website_welcome: Welcome to {{site_name}}
   user_center:
     login: Login
@@ -2128,7 +2135,7 @@ ui:
         always_display: Always display external content
         ask_before_display: Ask before displaying external content
     write:
-      page_title: Write
+      page_title: Files
       min_content:
         label: Minimum question body length
         text: Minimum allowed question body length in characters.

i18n/zh_CN.yaml

@@ -1778,6 +1778,13 @@ ui:
     plugins: 插件
     installed_plugins: 已安装插件
     apperance: 外观
+    community: 社区
+    advanced: 高级
+    tags: 标签
+    rules: 规则
+    policies: 政策
+    security: 安全
+    files: 文件
   website_welcome: 欢迎来到 {{site_name}}
   user_center:
     login: 登录
@@ -2089,7 +2096,7 @@ ui:
         always_display: 总是显示外部内容
         ask_before_display: 在显示外部内容之前询问
     write:
-      page_title: 编辑
+      page_title: 文件
       min_content:
         label: 最小问题长度
         text: 最小允许的问题内容长度（字符）。

ui/src/common/constants.ts

@@ -83,6 +83,11 @@ export const ADMIN_LIST_STATUS = {
   },
 };
 
+/**
+ * ADMIN_NAV_MENUS is the navigation menu for the admin panel.
+ * pathPrefix is used to activate the menu item when the activeKey starts with the pathPrefix.
+ */
+
 export const ADMIN_NAV_MENUS = [
   {
     name: 'dashboard',
@@ -92,15 +97,19 @@ export const ADMIN_NAV_MENUS = [
   {
     name: 'contents',
     icon: 'file-earmark-text-fill',
-    children: [{ name: 'questions' }, { name: 'answers' }],
+    children: [
+      { name: 'questions', path: 'qa/questions', pathPrefix: 'qa/' },
+      { name: 'tags', path: 'tags/settings', pathPrefix: 'tags/' },
+    ],
   },
   {
-    name: 'users',
+    name: 'community',
     icon: 'people-fill',
-  },
-  {
-    name: 'badges',
-    icon: 'award-fill',
+    children: [
+      { name: 'users', pathPrefix: 'users/' },
+      { name: 'badges' },
+      { name: 'rules', path: 'rules/privileges', pathPrefix: 'rules/' },
+    ],
   },
   {
     name: 'apperance',
@@ -113,20 +122,19 @@ export const ADMIN_NAV_MENUS = [
         name: 'customize',
       },
       { name: 'branding' },
+      { name: 'interface' },
     ],
   },
   {
-    name: 'settings',
+    name: 'advanced',
     icon: 'gear-fill',
     children: [
       { name: 'general' },
-      { name: 'interface' },
-      { name: 'smtp' },
-      { name: 'legal' },
-      { name: 'write' },
-      { name: 'seo' },
+      { name: 'security' },
+      { name: 'files' },
       { name: 'login' },
-      { name: 'privileges' },
+      { name: 'seo' },
+      { name: 'smtp' },
     ],
   },
   {
@@ -141,6 +149,30 @@ export const ADMIN_NAV_MENUS = [
   },
 ];
 
+export const ADMIN_QA_NAV_MENUS = [
+  { name: 'questions', path: '/admin/qa/questions' },
+  { name: 'answers', path: '/admin/qa/answers' },
+  { name: 'settings', path: '/admin/qa/settings' },
+];
+
+export const ADMIN_TAGS_NAV_MENUS = [
+  // { name: 'tags', path: '/admin/tags' },
+  {
+    name: 'settings',
+    path: '/admin/tags/settings',
+  },
+];
+
+export const ADMIN_USERS_NAV_MENUS = [
+  { name: 'users', path: '/admin/users' },
+  { name: 'settings', path: '/admin/users/settings' },
+];
+
+export const ADMIN_RULES_NAV_MENUS = [
+  { name: 'privileges', path: '/admin/rules/privileges' },
+  { name: 'policies', path: '/admin/rules/policies' },
+];
+
 export const TIMEZONES = [
   {
     label: 'Africa',

ui/src/common/interface.ts

@@ -364,7 +364,6 @@ export interface AdminSettingsGeneral {
   description: string;
   site_url: string;
   contact_email: string;
-  check_update: boolean;
   permalink?: number;
 }
 
@@ -382,8 +381,6 @@ export interface HelmetUpdate extends Omit<HelmetBase, 'pageTitle'> {
 export interface AdminSettingsInterface {
   language: string;
   time_zone?: string;
-  default_avatar: string;
-  gravatar_base_url: string;
 }
 
 export interface AdminSettingsSmtp {
@@ -405,6 +402,14 @@ export interface AdminSettingsUsers {
   allow_update_location: boolean;
   allow_update_username: boolean;
   allow_update_website: boolean;
+  default_avatar: string;
+  gravatar_base_url: string;
+}
+
+export interface AdminSettingsSecurity {
+  external_content_display: string;
+  check_update: boolean;
+  login_required: boolean;
 }
 
 export interface SiteSettings {
@@ -416,10 +421,12 @@ export interface SiteSettings {
   theme: AdminSettingsTheme;
   site_seo: AdminSettingsSeo;
   site_users: AdminSettingsUsers;
-  site_write: AdminSettingsWrite;
+  site_advanced: AdminSettingsWrite;
+  site_questions: AdminQuestionSetting;
+  site_tags: AdminTagsSetting;
   version: string;
   revision: string;
-  site_legal: AdminSettingsLegal;
+  site_security: AdminSettingsSecurity;
 }
 
 export interface AdminSettingBranding {
@@ -430,20 +437,13 @@ export interface AdminSettingBranding {
 }
 
 export interface AdminSettingsLegal {
-  external_content_display: string;
   privacy_policy_original_text?: string;
   privacy_policy_parsed_text?: string;
   terms_of_service_original_text?: string;
   terms_of_service_parsed_text?: string;
 }
 
 export interface AdminSettingsWrite {
-  restrict_answer?: boolean;
-  min_tags?: number;
-  min_content?: number;
-  recommend_tags?: Tag[];
-  required_tag?: boolean;
-  reserved_tags?: Tag[];
   max_image_size?: number;
   max_attachment_size?: number;
   max_image_megapixel?: number;
@@ -484,7 +484,6 @@ export interface AdminSettingsCustom {
 
 export interface AdminSettingsLogin {
   allow_new_registrations: boolean;
-  login_required: boolean;
   allow_email_registrations: boolean;
   allow_email_domains: string[];
   allow_password_login: boolean;
@@ -809,3 +808,15 @@ export interface BadgeDetailListRes {
   count: number;
   list: BadgeDetailListItem[];
 }
+
+export interface AdminQuestionSetting {
+  min_tags: number;
+  min_content: number;
+  restrict_answer: boolean;
+}
+
+export interface AdminTagsSetting {
+  recommend_tags: Tag[];
+  required_tag: boolean;
+  reserved_tags: Tag[];
+}

ui/src/components/AccordionNav/index.tsx

@@ -28,16 +28,32 @@ import { floppyNavigation } from '@/utils';
 import { Icon } from '@/components';
 import './index.css';
 
+export interface MenuItem {
+  name: string;
+  path?: string;
+  pathPrefix?: string;
+  icon?: string;
+  displayName?: string;
+  badgeContent?: string | number;
+  children?: MenuItem[];
+}
+
 function MenuNode({
   menu,
   callback,
   activeKey,
   expanding = false,
   path = '/',
+}: {
+  menu: MenuItem;
+  callback: (evt: any, menu: MenuItem, href: string, isLeaf: boolean) => void;
+  activeKey: string;
+  expanding?: boolean;
+  path?: string;
 }) {
   const { t } = useTranslation('translation', { keyPrefix: 'nav_menus' });
-  const isLeaf = !menu.children.length;
-  const href = isLeaf ? `${path}${menu.path}` : '#';
+  const isLeaf = !menu.children || menu.children.length === 0;
+  const href = isLeaf ? `${path}${menu.path || ''}` : '#';
 
   return (
     <Nav.Item key={menu.path} className="w-100">
@@ -51,7 +67,14 @@ function MenuNode({
           }}
           className={classNames(
             'text-nowrap d-flex flex-nowrap align-items-center w-100',
-            { expanding, active: activeKey === menu.path },
+            {
+              expanding,
+              active:
+                activeKey === menu.path ||
+                (menu.path && activeKey.startsWith(`${menu.path}/`)) ||
+                // if pathPrefix is set, activate when activeKey starts with the pathPrefix
+                (menu.pathPrefix && activeKey.startsWith(menu.pathPrefix)),
+            },
           )}>
           {menu?.icon && <Icon name={menu.icon} className="me-2" />}
 
@@ -75,7 +98,13 @@ function MenuNode({
           }}
           className={classNames(
             'text-nowrap d-flex flex-nowrap align-items-center w-100',
-            { expanding, active: activeKey === menu.path },
+            {
+              expanding,
+              active:
+                activeKey === menu.path ||
+                (menu.path && activeKey.startsWith(`${menu.path}/`)) ||
+                (menu.pathPrefix && activeKey.startsWith(menu.pathPrefix)),
+            },
           )}>
           {menu?.icon && <Icon name={menu.icon} className="me-2" />}
           <span className="me-auto text-truncate">
@@ -90,8 +119,8 @@ function MenuNode({
         </Nav.Link>
       )}
 
-      {menu.children.length ? (
-        <Accordion.Collapse eventKey={menu.path} className="ms-4">
+      {menu.children && menu.children.length > 0 ? (
+        <Accordion.Collapse eventKey={menu.path || menu.name} className="ms-4">
           <>
             {menu.children.map((leaf) => {
               return (
@@ -100,7 +129,7 @@ function MenuNode({
                   callback={callback}
                   activeKey={activeKey}
                   path={path}
-                  key={leaf.path}
+                  key={leaf.path || leaf.name}
                 />
               );
             })}
@@ -112,7 +141,7 @@ function MenuNode({
 }
 
 interface AccordionProps {
-  menus: any[];
+  menus: MenuItem[];
   path?: string;
 }
 const AccordionNav: FC<AccordionProps> = ({ menus = [], path = '/' }) => {
@@ -137,19 +166,27 @@ const AccordionNav: FC<AccordionProps> = ({ menus = [], path = '/' }) => {
   });
 
   const splat = pathMatch && pathMatch.params['*'];
-  let activeKey = menus[0].path;
+  let activeKey: string = menus[0]?.path || menus[0]?.name || '';
+
   if (splat) {
     activeKey = splat;
   }
+
   const getOpenKey = () => {
     let openKey = '';
     menus.forEach((li) => {
-      if (li.children.length) {
+      if (li.children && li.children.length > 0) {
         const matchedChild = li.children.find((el) => {
-          return el.path === activeKey;
+          // exact match or path prefix match
+          return (
+            el.path === activeKey ||
+            (el.path && activeKey.startsWith(`${el.path}/`)) ||
+            // if pathPrefix is set, activate when activeKey starts with the pathPrefix
+            (el.pathPrefix && activeKey.startsWith(el.pathPrefix))
+          );
         });
         if (matchedChild) {
-          openKey = li.path;
+          openKey = li.path || li.name || '';
         }
       }
     });
@@ -181,8 +218,8 @@ const AccordionNav: FC<AccordionProps> = ({ menus = [], path = '/' }) => {
               path={path}
               callback={menuClick}
               activeKey={activeKey}
-              expanding={openKey === li.path}
-              key={li.path}
+              expanding={openKey === (li.path || li.name)}
+              key={li.path || li.name}
             />
           );
         })}