create AuditLogDisableMode component

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

@@ -0,0 +1,7 @@
+import React, { FC } from 'react';
+
+export const AuditLogDisableMode: FC = () => {
+  return (
+    <>AuditLogDisableMode</>
+  );
+};

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)}>