Inline chat moderation UI (#1331)

* - mock detect when user turns into moderator
- add moderator indicator to display on messages and username changer

* also mock moderator flag in message payload about user to display indicator

* add some menu looking icons and a menu of actions

* WIP chat moderators

* Add support for admin promoting a user to moderator

* WIP-
open a more info panel of user+message info; add some a11y to buttons

* style the details panel

* adjust positioning of menus

* Merge fixes. ChatClient->Client ChatServer->Server

* Remove moderator bool placeholders to use real state

* Support inline hiding of messages by moderators

* Support inline banning of chat users

* Cleanup linter warnings

* Puppeteer tests fail after typing take place

* Manually resolve conflicts in chat between moderator feature and develop

Co-authored-by: Gabe Kangas <gabek@real-ity.com>

test/automated/api/chatusers.test.js

@@ -80,6 +80,26 @@ test('verify user is enabled', async (done) => {
   done();
 });
 
+test('can set the user as moderator', async (done) => {
+  await request
+    .post('/api/admin/chat/users/setmoderator')
+    .send({ userId: userId, isModerator: true })
+    .auth('admin', 'abc123')
+    .expect(200);
+  done();
+});
+
+test('verify user is a moderator', async (done) => {
+  const response = await request
+    .get('/api/admin/chat/users/moderators')
+    .auth('admin', 'abc123')
+    .expect(200);
+  const tokenCheck = response.body.filter((user) => user.id === userId);
+  expect(tokenCheck).toHaveLength(1);
+
+  done();
+});
+
 test('verify user list is populated', async (done) => {
     const ws = new WebSocket(
     `ws://localhost:8080/ws?accessToken=${accessToken}`,

test/automated/api/run.sh

@@ -37,7 +37,7 @@ function finish {
 trap finish EXIT
 
 echo "Waiting..."
-sleep 13
+sleep 15
 
 # Run the tests against the instance.
 npm test

test/automated/browser/tests/chat.js

@@ -1,4 +1,10 @@
-async function interactiveChatTest(browser, page, newName, chatMessage, device) {
+async function interactiveChatTest(
+  browser,
+  page,
+  newName,
+  chatMessage,
+  device
+) {
   it('should have the chat input', async () => {
     await page.waitForSelector('#message-input');
   });
@@ -16,25 +22,29 @@ async function interactiveChatTest(browser, page, newName, chatMessage, device)
 
   it('should allow changing the username on ' + device, async () => {
     await page.waitForSelector('#username-display');
-    await page.evaluate(()=>document.querySelector('#username-display').click())
-
+    await page.evaluate(() =>
+      document.querySelector('#username-display').click()
+    );
     await page.waitForSelector('#username-change-input');
-    await page.evaluate(()=>document.querySelector('#username-change-input').click())
-    await page.type('#username-change-input', 'a new name');
-
-    await page.evaluate(()=>document.querySelector('#username-change-input').click())
-    await page.type('#username-change-input', newName);
-
+    await page.evaluate(() =>
+      document.querySelector('#username-change-input').click()
+    );
+    await page.evaluate(() =>
+      document.querySelector('#username-change-input').click()
+    );
     await page.waitForSelector('#button-update-username');
-    await page.evaluate(()=>document.querySelector('#button-update-username').click())
+
+    await page.evaluate(() =>
+      document.querySelector('#button-update-username').click()
+    );
   });
 
   it('should allow typing a chat message', async () => {
     await page.waitForSelector('#message-input');
-    await page.evaluate(()=>document.querySelector('#message-input').click())
+    await page.evaluate(() => document.querySelector('#message-input').click());
     await page.waitForTimeout(1000);
-    await page.focus('#message-input')
-    await page.keyboard.type(chatMessage)
+    await page.focus('#message-input');
+    await page.keyboard.type(chatMessage);
     page.keyboard.press('Enter');
   });
 }