improved

packages/app/src/components/Admin/AuditLog/SelectActionDropdown.tsx

@@ -2,11 +2,11 @@ import React, { FC, useCallback } from 'react';
 
 import { useTranslation } from 'react-i18next';
 
-import { SupportedActionType } from '~/interfaces/activity';
+import { SupportedActionType, SupportedActionCategoryType, SupportedActionCategory, PageActions, CommentActions, UserActions, AdminActions } from '~/interfaces/activity';
 
 type Props = {
-  dropdownItems: Array<{actionCategory: string, actionNames: SupportedActionType[]}>
   actionMap: Map<SupportedActionType, boolean>
+  availableActions: SupportedActionType[]
   onChangeAction: (action: SupportedActionType) => void
   onChangeMultipleAction: (actions: SupportedActionType[], isChecked: boolean) => void
 }
@@ -14,9 +14,28 @@ type Props = {
 export const SelectActionDropdown: FC<Props> = (props: Props) => {
   const { t } = useTranslation();
   const {
-    dropdownItems, actionMap, onChangeAction, onChangeMultipleAction,
+    actionMap, availableActions, onChangeAction, onChangeMultipleAction,
   } = props;
 
+  const dropdownItems: Array<{actionCategory: SupportedActionCategoryType, actions: SupportedActionType[]}> = [
+    {
+      actionCategory: SupportedActionCategory.PAGE,
+      actions: PageActions.filter(action => availableActions.includes(action)),
+    },
+    {
+      actionCategory: SupportedActionCategory.COMMENT,
+      actions: CommentActions.filter(action => availableActions.includes(action)),
+    },
+    {
+      actionCategory: SupportedActionCategory.USER,
+      actions: UserActions.filter(action => availableActions.includes(action)),
+    },
+    {
+      actionCategory: SupportedActionCategory.ADMIN,
+      actions: AdminActions.filter(action => availableActions.includes(action)),
+    }
+  ];
+
   const actionCheckboxChangedHandler = useCallback((action) => {
     if (onChangeAction != null) {
       onChangeAction(action);
@@ -43,13 +62,13 @@ export const SelectActionDropdown: FC<Props> = (props: Props) => {
                   type="checkbox"
                   className="form-check-input"
                   defaultChecked
-                  onChange={(e) => { multipleActionCheckboxChangedHandler(item.actionNames, e.target.checked) }}
+                  onChange={(e) => { multipleActionCheckboxChangedHandler(item.actions, e.target.checked) }}
                 />
                 <label className="form-check-label">{item.actionCategory}</label>
               </div>
             </div>
             {
-              item.actionNames.map(action => (
+              item.actions.map(action => (
                 <div className="dropdown-item" key={action}>
                   <div className="form-group px-4 m-0">
                     <input

packages/app/src/components/Admin/AuditLogManagement.tsx

@@ -3,11 +3,9 @@ import React, { FC, useState, useCallback } from 'react';
 import { format } from 'date-fns';
 import { useTranslation } from 'react-i18next';
 
-import {
-  SupportedActionType, AllSupportedActions, PageActions, CommentActions,
-} from '~/interfaces/activity';
+import { SupportedActionType, AllSupportedActions } from '~/interfaces/activity';
 import { useSWRxActivity } from '~/stores/activity';
-import { useAuditLogEnabled } from '~/stores/context';
+import { useAuditLogEnabled, useAuditLogAvailableActions } from '~/stores/context';
 
 import PaginationWrapper from '../PaginationWrapper';
 
@@ -56,6 +54,9 @@ export const AuditLogManagement: FC = () => {
   const totalActivityNum = activityData?.totalDocs != null ? activityData.totalDocs : 0;
   const isLoading = activityData === undefined && error == null;
 
+  const { data: auditLogAvailableActionsData } = useAuditLogAvailableActions();
+  const  auditLogAvailableActions = auditLogAvailableActionsData != null ? auditLogAvailableActionsData : [];
+
   const { data: auditLogEnabled } = useAuditLogEnabled();
 
   /*
@@ -132,11 +133,8 @@ export const AuditLogManagement: FC = () => {
             />
 
             <SelectActionDropdown
-              dropdownItems={[
-                { actionCategory: 'Page', actionNames: PageActions },
-                { actionCategory: 'Comment', actionNames: CommentActions },
-              ]}
               actionMap={actionMap}
+              availableActions={auditLogAvailableActions}
               onChangeAction={actionCheckboxChangedHandler}
               onChangeMultipleAction={multipleActionCheckboxChangedHandler}
             />

packages/app/src/interfaces/activity.ts

@@ -69,6 +69,13 @@ export const SupportedEventModel = {
   MODEL_COMMENT,
 } as const;
 
+export const SupportedActionCategory = {
+  PAGE: 'Page',
+  COMMENT: 'Comment',
+  USER: 'User',
+  ADMIN: 'Admin'
+} as const;
+
 export const SupportedAction = {
   ACTION_UNSETTLED,
   ACTION_REGISTRATION_SUCCESS,
@@ -207,25 +214,6 @@ export const LargeActionGroup = {
   ACTION_ADMIN_SEARCH_INDICES_REBUILD,
 } as const;
 
-/*
- * For AuditLogManagement.tsx
- */
-export const PageActions = Object.values({
-  ACTION_PAGE_LIKE,
-  ACTION_PAGE_BOOKMARK,
-  ACTION_PAGE_CREATE,
-  ACTION_PAGE_UPDATE,
-  ACTION_PAGE_RENAME,
-  ACTION_PAGE_DUPLICATE,
-  ACTION_PAGE_DELETE,
-  ACTION_PAGE_DELETE_COMPLETELY,
-  ACTION_PAGE_REVERT,
-} as const);
-
-export const CommentActions = Object.values({
-  ACTION_COMMENT_CREATE,
-  ACTION_COMMENT_UPDATE,
-} as const);
 
 /*
  * Array
@@ -238,12 +226,24 @@ export const AllSmallGroupActions = Object.values(SmallActionGroup);
 export const AllMediumGroupActions = Object.values(MediumActionGroup);
 export const AllLargeGroupActions = Object.values(LargeActionGroup);
 
+// Action categories（for SelectActionDropdown.tsx）
+const pageRegExp = new RegExp(`^${SupportedActionCategory.PAGE.toUpperCase()}_`);
+const commentRegExp = new RegExp(`^${SupportedActionCategory.COMMENT.toUpperCase()}_`);
+const userRegExp = new RegExp(`^${SupportedActionCategory.USER.toUpperCase()}_`);
+const adminRegExp = new RegExp(`^${SupportedActionCategory.ADMIN.toUpperCase()}_`);
+
+export const PageActions = AllSupportedActions.filter(action => action.match(pageRegExp));
+export const CommentActions =  AllSupportedActions.filter(action => action.match(commentRegExp));
+export const UserActions = AllSupportedActions.filter(action => action.match(userRegExp));
+export const AdminActions = AllSupportedActions.filter(action => action.match(adminRegExp));
+
 /*
  * Type
  */
 export type SupportedTargetModelType = typeof SupportedTargetModel[keyof typeof SupportedTargetModel];
 export type SupportedEventModelType = typeof SupportedEventModel[keyof typeof SupportedEventModel];
 export type SupportedActionType = typeof SupportedAction[keyof typeof SupportedAction];
+export type SupportedActionCategoryType = typeof SupportedActionCategory[keyof typeof SupportedActionCategory]
 
 export type ISnapshot = Partial<Pick<IUser, 'username'>>