Admin support for managing users (#245)

* First pass at displaying user data in admin

* Hide chat blurb on home page if chat is disabled

* Hide sidebar chat section if chat is disabled

* Block/unblock user interface for https://github.com/owncast/owncast/issues/1096

* Simplify past display name handling

* Updates to reflect the api access token change

* Update paths

* Clean up the new access token page

* Fix linter

* Update linter workflow action

* Cleanup

* Fix exception rendering table row

* Commit next-env file that seems to be required with next 11

* chat refactor - admin adjustments (#250)

* add useragent parser; clean up some html;

* some ui changes
- use modal instead of popover to confirm block/unblock user
- update styles, table styles for consistency
- rename some user/chat labels in nav and content

* format user info modal a bit

* add some sort of mild treatment and delay while processing ban of users

* rename button to 'ban'

* add some notes

* Prettified Code!

* fix disableChat toggle for nav bar

* Support sorting the disabled user list

* Fix linter error around table sorting

* No longer restoring messages on unban so change message prompt

* Standardize on forbiddenUsername terminology

* The linter broke the webhooks page. Fixed it. Linter is probably pissed.

* Move chat welcome message to chat config

* Other submenus don't have icons so remove these ones

Co-authored-by: gingervitis <omqmail@gmail.com>
Co-authored-by: gabek <gabek@users.noreply.github.com>

web/pages/chat/messages.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Table, Typography, Tooltip, Button } from 'antd';
+import { Table, Typography, Button } from 'antd';
 import { CheckCircleFilled, ExclamationCircleFilled } from '@ant-design/icons';
 import classNames from 'classnames';
 import { ColumnsType } from 'antd/es/table';
@@ -9,12 +9,13 @@ import { CHAT_HISTORY, fetchData, FETCH_INTERVAL, UPDATE_CHAT_MESSGAE_VIZ } from
 import { MessageType } from '../../types/chat';
 import { isEmptyObject } from '../../utils/format';
 import MessageVisiblityToggle from '../../components/message-visiblity-toggle';
+import UserPopover from '../../components/user-popover';
 
 const { Title } = Typography;
 
 function createUserNameFilters(messages: MessageType[]) {
   const filtered = messages.reduce((acc, curItem) => {
-    const curAuthor = curItem.author;
+    const curAuthor = curItem.user.id;
     if (!acc.some(item => item.text === curAuthor)) {
       acc.push({ text: curAuthor, value: curAuthor });
     }
@@ -149,19 +150,18 @@ export default function Chat() {
     },
     {
       title: 'User',
-      dataIndex: 'author',
-      key: 'author',
+      dataIndex: 'user',
+      key: 'user',
       className: 'name-col',
       filters: nameFilters,
-      onFilter: (value, record) => record.author === value,
-      sorter: (a, b) => a.author.localeCompare(b.author),
+      onFilter: (value, record) => record.user.id === value,
+      sorter: (a, b) => a.user.displayName.localeCompare(b.user.displayName),
       sortDirections: ['ascend', 'descend'],
       ellipsis: true,
-      render: author => (
-        <Tooltip placement="topLeft" title={author}>
-          {author}
-        </Tooltip>
-      ),
+      render: user => {
+        const { displayName } = user;
+        return <UserPopover user={user}>{displayName}</UserPopover>;
+      },
       width: 110,
     },
     {
@@ -180,16 +180,16 @@ export default function Chat() {
     },
     {
       title: '',
-      dataIndex: 'visible',
-      key: 'visible',
+      dataIndex: 'hiddenAt',
+      key: 'hiddenAt',
       className: 'toggle-col',
       filters: [
         { text: 'Visible messages', value: true },
         { text: 'Hidden messages', value: false },
       ],
       onFilter: (value, record) => record.visible === value,
-      render: (visible, record) => (
-        <MessageVisiblityToggle isVisible={visible} message={record} setMessage={updateMessage} />
+      render: (hiddenAt, record) => (
+        <MessageVisiblityToggle isVisible={!hiddenAt} message={record} setMessage={updateMessage} />
       ),
       width: 30,
     },
@@ -234,10 +234,10 @@ export default function Chat() {
       </div>
       <Table
         size="small"
-        className="messages-table"
+        className="table-container"
         pagination={{ pageSize: 100 }}
         scroll={{ y: 540 }}
-        rowClassName={record => (!record.visible ? 'hidden' : '')}
+        rowClassName={record => (record.hiddenAt ? 'hidden' : '')}
         dataSource={messages}
         columns={chatColumns}
         rowKey={row => row.id}

web/pages/chat/users.tsx

@@ -1,25 +1,25 @@
 import React, { useState, useEffect, useContext } from 'react';
-import { Table, Typography } from 'antd';
-import { formatDistanceToNow } from 'date-fns';
-import { SortOrder } from 'antd/lib/table/interface';
-
+import { Typography } from 'antd';
 import { ServerStatusContext } from '../../utils/server-status-context';
+import { CONNECTED_CLIENTS, fetchData, DISABLED_USERS } from '../../utils/apis';
+import UserTable from '../../components/user-table';
+import ClientTable from '../../components/client-table';
 
-import { CONNECTED_CLIENTS, VIEWERS_OVER_TIME, fetchData } from '../../utils/apis';
+const { Title } = Typography;
 
-const FETCH_INTERVAL = 60 * 1000; // 1 min
+export const FETCH_INTERVAL = 10 * 1000; // 10 sec
 
 export default function ChatUsers() {
   const context = useContext(ServerStatusContext);
   const { online } = context || {};
 
-  const [viewerInfo, setViewerInfo] = useState([]);
+  const [disabledUsers, setDisabledUsers] = useState([]);
   const [clients, setClients] = useState([]);
 
   const getInfo = async () => {
     try {
-      const result = await fetchData(VIEWERS_OVER_TIME);
-      setViewerInfo(result);
+      const result = await fetchData(DISABLED_USERS);
+      setDisabledUsers(result);
     } catch (error) {
       console.log('==== error', error);
     }
@@ -36,79 +36,42 @@ export default function ChatUsers() {
     let getStatusIntervalId = null;
 
     getInfo();
-    if (online) {
-      getStatusIntervalId = setInterval(getInfo, FETCH_INTERVAL);
-      // returned function will be called on component unmount
-      return () => {
-        clearInterval(getStatusIntervalId);
-      };
-    }
 
-    return () => [];
+    getStatusIntervalId = setInterval(getInfo, FETCH_INTERVAL);
+    // returned function will be called on component unmount
+    return () => {
+      clearInterval(getStatusIntervalId);
+    };
   }, [online]);
 
-  // todo - check to see if broadcast active has changed. if so, start polling.
-
-  if (!viewerInfo.length) {
-    return 'no info';
-  }
-
-  const columns = [
-    {
-      title: 'User name',
-      dataIndex: 'username',
-      key: 'username',
-      render: username => username || '-',
-      sorter: (a, b) => a.username - b.username,
-      sortDirections: ['descend', 'ascend'] as SortOrder[],
-    },
-    {
-      title: 'Messages sent',
-      dataIndex: 'messageCount',
-      key: 'messageCount',
-      sorter: (a, b) => a.messageCount - b.messageCount,
-      sortDirections: ['descend', 'ascend'] as SortOrder[],
-    },
-    {
-      title: 'Connected Time',
-      dataIndex: 'connectedAt',
-      key: 'connectedAt',
-      render: time => formatDistanceToNow(new Date(time)),
-      sorter: (a, b) => new Date(a.connectedAt).getTime() - new Date(b.connectedAt).getTime(),
-      sortDirections: ['descend', 'ascend'] as SortOrder[],
-    },
-    {
-      title: 'User Agent',
-      dataIndex: 'userAgent',
-      key: 'userAgent',
-    },
-    {
-      title: 'Location',
-      dataIndex: 'geo',
-      key: 'geo',
-      render: geo => (geo ? `${geo.regionName}, ${geo.countryCode}` : '-'),
-    },
-  ];
-
+  const connectedUsers = online ? (
+    <>
+      <ClientTable data={clients} />
+      <p className="description">
+        Visit the{' '}
+        <a
+          href="https://owncast.online/docs/viewers/?source=admin"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          documentation
+        </a>{' '}
+        to configure additional details about your viewers.
+      </p>
+    </>
+  ) : (
+    <p className="description">
+      When a stream is active and chat is enabled, connected chat clients will be displayed here.
+    </p>
+  );
   return (
     <>
-      <div>
-        <Typography.Title>Connected</Typography.Title>
-        <Table dataSource={clients} columns={columns} rowKey={row => row.clientID} />
-        <p>
-          <Typography.Text type="secondary">
-            Visit the{' '}
-            <a
-              href="https://owncast.online/docs/viewers/?source=admin"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              documentation
-            </a>{' '}
-            to configure additional details about your viewers.
-          </Typography.Text>{' '}
-        </p>
-      </div>
+      <Title>Connected Chat Participants</Title>
+      {connectedUsers}
+      <br />
+      <br />
+      <Title>Banned Users</Title>
+      <UserTable data={disabledUsers} />
     </>
   );
 }