add budge

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

@@ -17,9 +17,6 @@ export const AuditLogSettings: FC = () => {
   const { data: availableActionsData } = useAuditLogAvailableActions();
   const availableActions = availableActionsData != null ? availableActionsData : [];
 
-  // eslint-disable-next-line max-len
-  const actionCounter = `<b>${t('admin:audit_log_management.available_actions_length')}: ${availableActions.length} / ${t('admin:audit_log_management.all_supported_actions_length')}: ${AllSupportedActions.length}</b>`;
-
   return (
     <>
       <h4 className="mt-4">{t('admin:audit_log_management.activity_expiration_date')}</h4>
@@ -38,12 +35,23 @@ export const AuditLogSettings: FC = () => {
         />
       </p>
 
-      <h4 className="mt-4">{t('admin:audit_log_management.available_action_list')}</h4>
-      <p className="form-text text-muted">{t('admin:audit_log_management.available_action_list_explain')}</p>
-      <p
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{ __html: actionCounter }}
-      />
+      <h4 className="mt-4">
+        {t('admin:audit_log_management.available_action_list')}
+        <span className="badge badge-pill badge-secondary ml-2">
+          {`${availableActions.length} / ${AllSupportedActions.length}`}
+        </span>
+        <a
+          className="ml-2"
+          href="https://docs.growi.org/en/admin-guide/admin-cookbook/audit-log-setup.html#log-types"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <i className="icon-fw icon-question" aria-hidden="true"></i>
+        </a>
+      </h4>
+      <p className="form-text text-muted">
+        {t('admin:audit_log_management.available_action_list_explain')}
+      </p>
       <p className="mt-1">
         <button type="button" className="btn btn-link p-0" aria-expanded="false" onClick={() => setIsExpandActionList(!isExpandActionList)}>
           <i className={`fa fa-fw fa-arrow-right ${isExpandActionList ? 'fa-rotate-90' : ''}`}></i>