Rendering AuditLogSettings in AuditLogManagement

packages/app/resource/locales/en_US/admin/admin.json

@@ -520,11 +520,11 @@
     "date": "Date",
     "action": "Action",
     "ip": "IP Address",
-    "url": "URL"
-  },
-  "audit_log_settings": {
-    "activity_expiration_date": "Activity Expiration Date",
-    "activity_expiration_date_explain": "Created activities are automatically deleted after the number of seconds set in the environment variable from the creation time",
+    "url": "URL",
+    "settings": "Settings",
+    "return": "Return",
+    "activity_expiration_date": "Audit Log expiration date",
+    "activity_expiration_date_explain": "Created Audit Log are automatically deleted after the number of seconds set in the environment variable from the creation time",
     "fixed_by_env_var": "This is fixed by the env var <code>{{key}}={{value}}</code>."
   }
 }

packages/app/resource/locales/ja_JP/admin/admin.json

@@ -519,11 +519,11 @@
     "date": "日付",
     "action": "アクション",
     "ip": "IPアドレス",
-    "url": "URL"
-  },
-  "audit_log_settings": {
-    "activity_expiration_date": "アクティビティの有効期限",
-    "activity_expiration_date_explain": "作成されたアクティビティは、作成時間から環境変数に設定した秒数後に自動的に削除されます",
+    "url": "URL",
+    "settings": "設定",
+    "return": "戻る",
+    "activity_expiration_date": "監査ログの有効期限",
+    "activity_expiration_date_explain": "作成された監査ログは、作成時間から環境変数に設定した秒数後に自動的に削除されます",
     "fixed_by_env_var": "環境変数により固定されています <code>{{key}}={{value}}</code>."
   }
 }

packages/app/resource/locales/zh_CN/admin/admin.json

@@ -529,11 +529,11 @@
     "date": "日期",
     "action": "行动",
     "ip": "IP地址",
-    "url": "URL"
-  },
-  "audit_log_settings": {
-    "Activity Expiration Date": "活动到期日",
-    "activity_expiration_date_explain": "创建的活动会在环境变量中设置的从创建时间开始的秒数后自动删除",
+    "url": "URL",
+    "settings": "设置",
+    "return": "返回",
+    "activity_expiration_date": "审计日志的到期日",
+    "activity_expiration_date_explain": "创建的审计日志会在环境变量中设置的从创建时间算起的秒数后自动删除",
     "fixed_by_env_var": "这是由env var 修复的 <code>{{key}}={{value}}</code>."
   }
 }

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

@@ -14,6 +14,7 @@ import { ActivityTable } from './AuditLog/ActivityTable';
 import { DateRangePicker } from './AuditLog/DateRangePicker';
 import { SearchUsernameTypeahead } from './AuditLog/SearchUsernameTypeahead';
 import { SelectActionDropdown } from './AuditLog/SelectActionDropdown';
+import { AuditLogSettings } from './AuditLogSettings';
 
 
 const formatDate = (date: Date | null) => {
@@ -31,6 +32,7 @@ export const AuditLogManagement: FC = () => {
   /*
    * State
    */
+  const [isSettingPage, setIsSettingPage] = useState<boolean>(false);
   const [activePage, setActivePage] = useState<number>(1);
   const offset = (activePage - 1) * PAGING_LIMIT;
   const [startDate, setStartDate] = useState<Date | null>(null);
@@ -92,66 +94,77 @@ export const AuditLogManagement: FC = () => {
 
   return (
     <div data-testid="admin-auditlog">
+      <button type="button" className="btn btn-outline-secondary mb-4" onClick={() => setIsSettingPage(!isSettingPage)}>
+        {
+          isSettingPage
+            ? <><i className="fa fa-hand-o-left mr-1" />{t('admin:audit_log_management.return')}</>
+            : <><i className="fa icon-settings mr-1" />{t('admin:audit_log_management.settings')}</>
+        }
+      </button>
+
       <h2 className="admin-setting-header mb-3">
         <span>
-          {t('AuditLog')}
+          {isSettingPage ? t('AuditLog Settings') : t('AuditLog')}
         </span>
-        <a href="/admin/audit-log/settings" className="btn btn-lg">
-          <i className="icon-settings" />
-        </a>
       </h2>
 
-      <div className="form-inline mb-3">
-        <SearchUsernameTypeahead
-          onChange={setUsernamesHandler}
-        />
-
-        <DateRangePicker
-          startDate={startDate}
-          endDate={endDate}
-          onChange={datePickerChangedHandler}
-        />
-
-        <SelectActionDropdown
-          dropdownItems={[
-            { actionCategory: 'Page', actionNames: PageActions },
-            { actionCategory: 'Comment', actionNames: CommentActions },
-          ]}
-          actionMap={actionMap}
-          onChangeAction={actionCheckboxChangedHandler}
-          onChangeMultipleAction={multipleActionCheckboxChangedHandler}
-        />
-
-        <button type="button" className="btn ml-auto grw-btn-reload" onClick={reloadButtonPushedHandler}>
-          <i className="icon icon-reload" />
-        </button>
-      </div>
-
-      <p
-        className="ml-2"
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{ __html: activityCounter }}
-      />
-
-      { isLoading
-        ? (
-          <div className="text-muted text-center mb-5">
-            <i className="fa fa-2x fa-spinner fa-pulse mr-1" />
+      {isSettingPage ? (
+        <AuditLogSettings />
+      ) : (
+        <>
+          <div className="form-inline mb-3">
+            <SearchUsernameTypeahead
+              onChange={setUsernamesHandler}
+            />
+
+            <DateRangePicker
+              startDate={startDate}
+              endDate={endDate}
+              onChange={datePickerChangedHandler}
+            />
+
+            <SelectActionDropdown
+              dropdownItems={[
+                { actionCategory: 'Page', actionNames: PageActions },
+                { actionCategory: 'Comment', actionNames: CommentActions },
+              ]}
+              actionMap={actionMap}
+              onChangeAction={actionCheckboxChangedHandler}
+              onChangeMultipleAction={multipleActionCheckboxChangedHandler}
+            />
+
+            <button type="button" className="btn ml-auto grw-btn-reload" onClick={reloadButtonPushedHandler}>
+              <i className="icon icon-reload" />
+            </button>
           </div>
-        )
-        : (
-          <ActivityTable activityList={activityList} />
-        )
-      }
-
-      <PaginationWrapper
-        activePage={activePage}
-        changePage={setActivePageHandler}
-        totalItemsCount={totalActivityNum}
-        pagingLimit={PAGING_LIMIT}
-        align="center"
-        size="sm"
-      />
+
+          <p
+            className="ml-2"
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: activityCounter }}
+          />
+
+          { isLoading
+            ? (
+              <div className="text-muted text-center mb-5">
+                <i className="fa fa-2x fa-spinner fa-pulse mr-1" />
+              </div>
+            )
+            : (
+              <ActivityTable activityList={activityList} />
+            )
+          }
+
+          <PaginationWrapper
+            activePage={activePage}
+            changePage={setActivePageHandler}
+            totalItemsCount={totalActivityNum}
+            pagingLimit={PAGING_LIMIT}
+            align="center"
+            size="sm"
+          />
+        </>
+      )}
     </div>
   );
 };

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

@@ -11,21 +11,10 @@ export const AuditLogSettings: FC = () => {
   const activityExpirationSeconds = activityExpirationSecondsData != null ? activityExpirationSecondsData : 2592000;
 
   return (
-    <div data-testid="admin-auditlog-settings">
-      <h3 className="mb-4">
-        <a href="/admin/audit-log">
-          <i className="icon-arrow-left" />
-          {t('AuditLog')}
-        </a>
-      </h3>
-
-      <h2 className="admin-setting-header mb-4">
-        {t('AuditLog Settings')}
-      </h2>
-
-      <h4>{t('admin:audit_log_settings.activity_expiration_date')}</h4>
+    <>
+      <h4>{t('admin:audit_log_management.activity_expiration_date')}</h4>
       <p className="form-text text-muted">
-        {t('admin:audit_log_settings.activity_expiration_date_explain')}
+        {t('admin:audit_log_management.activity_expiration_date_explain')}
       </p>
       <p className="alert alert-warning col-6">
         <i className="icon-exclamation icon-fw">
@@ -33,11 +22,11 @@ export const AuditLogSettings: FC = () => {
         <b
           // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML={{
-            __html: t('admin:audit_log_settings.fixed_by_env_var',
+            __html: t('admin:audit_log_management.fixed_by_env_var',
               { key: 'ACTIVITY_EXPIRATION_SECONDS', value: activityExpirationSeconds }),
           }}
         />
       </p>
-    </div>
+    </>
   );
 };