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}