From ed5186a28077abd595021a3b3a75ac0b188ef151 Mon Sep 17 00:00:00 2001
From: Srilekha <65492285+Srilekha2805@users.noreply.github.com>
Date: Wed, 12 Feb 2025 05:10:11 +0530
Subject: [PATCH] Added changes for Issue 4044 (#4199)

* Added changes for fix 4044

* Fixed spacing issue

---------

Co-authored-by: Gabe Kangas <gabek@real-ity.com>
---
 web/i18n/en/translation.json   |  2 ++
 web/pages/admin/chat/users.tsx | 18 +++++++++++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/web/i18n/en/translation.json b/web/i18n/en/translation.json
index e0cc0ea5d..126eb79ab 100644
--- a/web/i18n/en/translation.json
+++ b/web/i18n/en/translation.json
@@ -71,6 +71,8 @@
   "Banned Users": "Banned Users",
   "IP Bans": "IP Bans",
   "Moderators": "Moderators",
+  "Bring in moderators to help keep your chat in order": "Bring in moderators to help keep your chat in order.",
+  "Learn more about chat moderation here": "Learn more about chat moderation here.",
   "Hardware Info": "Hardware Info",
   "Please wait": "Please wait",
   "No hardware details have been collected yet": "No hardware details have been collected yet.",
diff --git a/web/pages/admin/chat/users.tsx b/web/pages/admin/chat/users.tsx
index d8e942ec1..58175bdca 100644
--- a/web/pages/admin/chat/users.tsx
+++ b/web/pages/admin/chat/users.tsx
@@ -1,6 +1,8 @@
 import React, { useState, useEffect, useContext, ReactElement } from 'react';
 import { Tabs } from 'antd';
 import { useTranslation } from 'next-export-i18n';
+import Link from 'antd/lib/typography/Link';
+import Text from 'antd/lib/typography/Text';
 import { ServerStatusContext } from '../../../utils/server-status-context';
 import {
   CONNECTED_CLIENTS,
@@ -117,7 +119,21 @@ export default function ChatUsers() {
       {t('Moderators')} ({moderators.length})
     </span>
   );
-  const moderatorTable = <UserTable data={moderators} />;
+  const moderatorTable = (
+    <>
+      <p>
+        <Text type="secondary"> {t('Bring in moderators to help keep your chat in order.')} </Text>
+        <Link
+          href="https://owncast.online/docs/chat/moderation/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          {t('Learn more about chat moderation here.')}
+        </Link>
+      </p>
+      <UserTable data={moderators} />
+    </>
+  );
 
   const items = [
     { label: connectedUserTabTitle, key: '1', children: connectedUsers },