Merge pull request #6137 from weseek/feat/98235-audit-log-disable-mode

feat: Audit Log disable mode

packages/app/public/static/locales/en_US/admin/admin.json

@@ -535,6 +535,7 @@
     "fixed_by_env_var": "This is fixed by the env var <code>{{key}}={{value}}</code>.",
     "available_action_list": "Search / View All Available Actions",
     "available_action_list_explain": "List of actions that can be search / view in the Audit Log",
-    "action_list": "Action List"
+    "action_list": "Action List",
+    "disable_mode_explain": "Audit log is currently disabled. To enable it, set the environment variable <code>AUDIT_LOG_ENABLED</code> to true."
   }
 }

packages/app/public/static/locales/ja_JP/admin/admin.json

@@ -534,6 +534,7 @@
     "fixed_by_env_var": "環境変数により固定されています <code>{{key}}={{value}}</code>.",
     "available_action_list": "検索 / 表示 可能なアクション一覧",
     "available_action_list_explain": "監査ログで 検索 / 表示 可能なアクション一覧です",
-    "action_list": "アクション一覧"
+    "action_list": "アクション一覧",
+    "disable_mode_explain": "現在、監査ログは無効になっています。有効にする場合は環境変数 <code>AUDIT_LOG_ENABLED</code> を true に設定してください。"
   }
 }

packages/app/public/static/locales/zh_CN/admin/admin.json

@@ -544,6 +544,7 @@
     "fixed_by_env_var": "这是由env var 修复的 <code>{{key}}={{value}}</code>.",
     "available_action_list": "搜索/查看 所有可用的行动",
     "available_action_list_explain": "可以在审计日志中 搜索/查看 的行动列表",
-    "action_list": "行动清单"
+    "action_list": "行动清单",
+    "disable_mode_explain": "审计日志当前已禁用。 要启用它，请将环境变量 <code>AUDIT_LOG_ENABLED</code> 设置为 true。"
   }
 }

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

@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+export const AuditLogDisableMode: FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div id="content-main" className="content-main container-lg">
+      <div className="container">
+        <div className="row justify-content-md-center">
+          <div className="col-md-6 mt-5">
+            <div className="text-center">
+              <h1><i className="icon-exclamation large"></i></h1>
+              <h1 className="text-center">{t('AuditLog')}</h1>
+              <h3
+                // eslint-disable-next-line react/no-danger
+                dangerouslySetInnerHTML={{ __html: t('admin:audit_log_management.disable_mode_explain') }}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -7,10 +7,12 @@ import {
   SupportedActionType, AllSupportedActions, PageActions, CommentActions,
 } from '~/interfaces/activity';
 import { useSWRxActivity } from '~/stores/activity';
+import { useAuditLogEnabled } from '~/stores/context';
 
 import PaginationWrapper from '../PaginationWrapper';
 
 import { ActivityTable } from './AuditLog/ActivityTable';
+import { AuditLogDisableMode } from './AuditLog/AuditLogDisableMode';
 import { AuditLogSettings } from './AuditLog/AuditLogSettings';
 import { DateRangePicker } from './AuditLog/DateRangePicker';
 import { SearchUsernameTypeahead } from './AuditLog/SearchUsernameTypeahead';
@@ -54,6 +56,8 @@ export const AuditLogManagement: FC = () => {
   const totalActivityNum = activityData?.totalDocs != null ? activityData.totalDocs : 0;
   const isLoading = activityData === undefined && error == null;
 
+  const { data: auditLogEnabled } = useAuditLogEnabled();
+
   /*
    * Functions
    */
@@ -92,6 +96,10 @@ export const AuditLogManagement: FC = () => {
   // eslint-disable-next-line max-len
   const activityCounter = `<b>${activityList.length === 0 ? 0 : offset + 1}</b> - <b>${(PAGING_LIMIT * activePage) - (PAGING_LIMIT - activityList.length)}</b> of <b>${totalActivityNum}<b/>`;
 
+  if (!auditLogEnabled) {
+    return <AuditLogDisableMode />;
+  }
+
   return (
     <div data-testid="admin-auditlog">
       <button type="button" className="btn btn-outline-secondary mb-4" onClick={() => setIsSettingPage(!isSettingPage)}>

packages/app/src/stores/context.tsx

@@ -178,7 +178,7 @@ export const useDefaultIndentSize = (initialData?: number) : SWRResponse<number,
 };
 
 export const useAuditLogEnabled = (initialData?: boolean): SWRResponse<boolean, Error> => {
-  return useStaticSWR<boolean, Error>('auditLogEnabled', initialData);
+  return useStaticSWR<boolean, Error>('auditLogEnabled', initialData, { fallbackData: false });
 };
 
 export const useActivityExpirationSeconds = (initialData?: number) : SWRResponse<number, Error> => {