Fix: TypeScript and Lint Errors in Chat list item and Plugins engine. (#18667)

* Fix: TS issuesfixed on plugins engine and chat list item

* Fix

bigbluebutton-html5/imports/ui/components/plugins-engine/container.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useRef, useState, useMemo } from 'react';
 import logger from '/imports/startup/client/logger';
-
+import * as uuid from 'uuid';
 import PluginHooksHandlerContainer from './plugin-hooks-handler/container';
 import PluginsEngineComponent from './component';
 import { PluginConfig, EffectivePluginConfig } from './types';
 import PluginLoaderContainer from './plugin-loader/container';
 import PluginProvidedStateContainer from './plugin-provided-state/container';
-import * as uuid from 'uuid';
 
+// @ts-ignore - temporary, while meteor exists in the project
 const PLUGINS_CONFIG = Meteor.settings.public.plugins;
 
 const PluginsEngineContainer = () => {
@@ -19,14 +19,13 @@ const PluginsEngineContainer = () => {
   const loadedPlugins = useRef<number>(0);
 
   const effectivePluginsConfig: EffectivePluginConfig[] = useMemo<EffectivePluginConfig[]>(
-    () => PLUGINS_CONFIG.map((p: PluginConfig) => {
-    return {
+    () => PLUGINS_CONFIG.map((p: PluginConfig) => ({
       ...p,
       uuid: uuid.v4(),
-    } as EffectivePluginConfig
-  }), [
-    PLUGINS_CONFIG,
-  ]);
+    } as EffectivePluginConfig)), [
+      PLUGINS_CONFIG,
+    ],
+  );
 
   const totalNumberOfPlugins = PLUGINS_CONFIG?.length;
   window.React = React;
@@ -40,7 +39,7 @@ const PluginsEngineContainer = () => {
     <>
       <PluginsEngineComponent 
         {...{
-          containerRef
+          containerRef,
         }}
       />
       {
@@ -48,13 +47,13 @@ const PluginsEngineContainer = () => {
           const uuid = effectivePluginConfig.uuid;
           return (
             <div key={uuid}>
-              <PluginLoaderContainer 
+              <PluginLoaderContainer
                 {...{
                   uuid,
-                  containerRef, 
-                  loadedPlugins, 
+                  containerRef,
+                  loadedPlugins,
                   setLastLoadedPlugin,
-                  pluginConfig: effectivePluginConfig
+                  pluginConfig: effectivePluginConfig,
                 }}
               />
               <PluginProvidedStateContainer 

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-messages/chat-list/chat-list-item/component.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-access-key */
 import React, { useEffect } from 'react';
 import { layoutSelect, layoutSelectInput, layoutDispatch } from '/imports/ui/components/layout/context';
 import { ACTIONS, PANELS } from '/imports/ui/components/layout/enums';
@@ -24,7 +25,7 @@ const intlMessages = defineMessages({
 });
 
 interface ChatListItemProps {
-  chat: Partial<Chat>,
+  chat: Chat,
 }
 // @ts-ignore - temporary, while meteor exists in the project
 const CHAT_CONFIG = Meteor.settings.public.chat;
@@ -43,7 +44,7 @@ const ChatListItem = (props: ChatListItemProps) => {
   const { sidebarContentPanel } = sidebarContent;
   const sidebarContentIsOpen = sidebarContent.isOpen;
 
-  const TOGGLE_CHAT_PUB_AK: string = useShortcut("togglePublicChat");
+  const TOGGLE_CHAT_PUB_AK: string = useShortcut('togglePublicChat');
   const {
     chat,
   } = props;
@@ -114,43 +115,44 @@ const ChatListItem = (props: ChatListItemProps) => {
 
   return (
     <Styled.ChatListItem
-      data-test="chatButton"
-      role="button"
-      aria-expanded={isCurrentChat}
-      active={isCurrentChat}
-      tabIndex={0}
-      accessKey={isPublicGroupChat(chat) ? TOGGLE_CHAT_PUB_AK : null}
-      onClick={handleClickToggleChat}
-      id="chat-toggle-button"
-      aria-label={isPublicGroupChat(chat) ? intl.formatMessage(intlMessages.titlePublic) : chat.participant.name}
-      onKeyDown={(e: KeyboardEvent) => {
-        if (e.key === 'Enter') {
-          e.preventDefault();
-          e.stopPropagation();
-        }
-      }}
-    >
+  data-test="chatButton"
+  role="button"
+  aria-expanded={isCurrentChat}
+  active={isCurrentChat}
+  tabIndex={0}
+  accessKey={isPublicGroupChat(chat) ? TOGGLE_CHAT_PUB_AK : undefined}
+  onClick={handleClickToggleChat}
+  id="chat-toggle-button"
+  aria-label={isPublicGroupChat(chat) ? intl.formatMessage(intlMessages.titlePublic)
+    : chat.participant?.name}
+  onKeyDown={(e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }}
+>
       <Styled.ChatListItemLink>
         <Styled.ChatIcon>
           {isPublicGroupChat(chat)
             ? (
               <Styled.ChatThumbnail>
-                <Icon iconName={"group_chat"} />
+                <Icon iconName="group_chat" className={undefined} prependIconName={undefined} rotate={undefined} />
               </Styled.ChatThumbnail>
             ) : (
               <Styled.UserAvatar
-                moderator={chat.participant.role === ROLE_MODERATOR}
-                avatar={chat.participant.avatar}
-                color={chat.participant.color}
+                moderator={chat.participant?.role === ROLE_MODERATOR}
+                avatar={chat.participant!.avatar}
+                color={chat.participant!.color}
               >
-                {chat.participant.name.toLowerCase().slice(0, 2)}
+                {chat.participant?.name.toLowerCase().slice(0, 2)}
               </Styled.UserAvatar>
             )}
         </Styled.ChatIcon>
         <Styled.ChatName>
-          <Styled.ChatNameMain>
+          <Styled.ChatNameMain active>
             {isPublicGroupChat(chat)
-              ? intl.formatMessage(intlMessages.titlePublic) : chat.participant.name}
+              ? intl.formatMessage(intlMessages.titlePublic) : chat.participant?.name}
           </Styled.ChatNameMain>
         </Styled.ChatName>
         {(countUnreadMessages > 0)

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-messages/chat-list/chat-list-item/styles.ts

@@ -19,14 +19,14 @@ import {
 } from '/imports/ui/stylesheets/styled-components/palette';
 
 interface UserAvatarProps {
-  color: string
-  moderator: boolean
-  avatar: string
-  emoji: string
+  color: string;
+  moderator: boolean;
+  avatar: string;
+  emoji?: string;
 }
 
 interface ChatNameMainProps {
-  active: boolean
+  active: boolean;
 }
 
 const ChatListItemLink = styled.div`
@@ -41,7 +41,7 @@ const ChatIcon = styled.div`
   flex: 0 0 2.2rem;
 `;
 
-const UserAvatar = styled.div`
+const UserAvatar = styled.div<UserAvatarProps>`
   flex: 0 0 2.25rem;
   margin: 0px calc(0.5rem) 0px 0px;
   box-flex: 0;