fix: restore broken files (bigbluebutton#18723)

* restore package lock * fix whiteboard service error * fix userlist * fix whiteboard * fix chat list item state * restore user-list participants list item * Add merge-branches step * Add merge-branches step to code-validation * fix message list --------- Co-authored-by: Tiago Jacobs <[email protected]>
antonbsa · Sep 7, 2023 · 809ba9d · 809ba9d
1 parent 047eccd
commit 809ba9d
Show file tree

Hide file tree

Showing 9 changed files with 6,524 additions and 9,531 deletions.
diff --git a/.github/workflows/ts-code-compilation.yml b/.github/workflows/ts-code-compilation.yml
@@ -31,4 +31,4 @@ jobs:
         run: meteor npm install
       - name: typescript code compilation
         working-directory: bigbluebutton-html5
-        run: npx tsc
+        run: npx tsc
diff --git a/.github/workflows/ts-code-validation.yml b/.github/workflows/ts-code-validation.yml
@@ -31,4 +31,4 @@ jobs:
         run: meteor npm install
       - name: typescript code validation with eslint
         working-directory: bigbluebutton-html5
-        run: npx eslint . --ext .ts,.tsx
+        run: npx eslint . --ext .ts,.tsx
diff --git a/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/component.tsx b/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/component.tsx
@@ -237,7 +237,6 @@ const ChatMessageList: React.FC<ChatListProps> = ({
     ? userLoadedBackUntilPage : Math.max(totalPages - 2, 0);
   const pagesToLoad = (totalPages - firstPageToLoad) || 1;
   return (
-    [
       <MessageListWrapper key="message-list-wrapper">
         <MessageList
           ref={messageListRef}

diff --git a/...mponents/user-list/user-list-content/user-messages/chat-list/chat-list-item/component.tsx b/...mponents/user-list/user-list-content/user-messages/chat-list/chat-list-item/component.tsx
@@ -150,7 +150,7 @@ const ChatListItem = (props: ChatListItemProps) => {
             )}
         </Styled.ChatIcon>
         <Styled.ChatName>
-          <Styled.ChatNameMain active>
+          <Styled.ChatNameMain active={false}>
             {isPublicGroupChat(chat)
               ? intl.formatMessage(intlMessages.titlePublic) : chat.participant?.name}
           </Styled.ChatNameMain>

diff --git a/...onents/user-list/user-list-content/user-participants/user-list-participants/component.tsx b/...onents/user-list/user-list-content/user-participants/user-list-participants/component.tsx
@@ -31,22 +31,24 @@ interface UserListParticipantsProps {
 }
 interface RowRendererProps extends ListProps {
   users: Array<User>;
-  currentUser: User;
+  validCurrentUser: User;
   meeting: Meeting;
   offset: number;
   index: number;
 }
 const rowRenderer: React.FC<RowRendererProps> = ({
-  index, key, style, users, currentUser, offset, meeting,
+  index, key, style, users, validCurrentUser, offset, meeting, isRTL,
 }) => {
   const userIndex = index - offset;
   const user = users && users[userIndex];
+  const direction = isRTL ? 'rtl' : 'ltr';
+
   return (
-    <div key={key} style={style}>
-      {user && currentUser && meeting ? (
+    <div key={key} style={{...style, direction}}>
+      {user && validCurrentUser && meeting ? (
         <UserActions
           user={user}
-          currentUser={currentUser}
+          currentUser={validCurrentUser}
           lockSettings={meeting.lockSettings}
           usersPolicies={meeting.usersPolicies}
           isBreakout={meeting.isBreakout}
@@ -86,7 +88,7 @@ const UserListParticipants: React.FC<UserListParticipantsProps> = ({
           <Styled.VirtualizedList
             rowRenderer={
               (props: RowRendererProps) => rowRenderer(
-                { ...props, users: users || previousUsersData, validCurrentUser, offset, meeting }
+                { ...props, users: users || previousUsersData, validCurrentUser, offset, meeting, isRTL }
               )
             }
             noRowRenderer={() => <div>no users</div>}

diff --git a/...r-list/user-list-content/user-participants/user-list-participants/list-item/component.tsx b/...r-list/user-list-content/user-participants/user-list-participants/list-item/component.tsx
@@ -1,16 +1,14 @@
 import React from 'react';
+import Styled from './styles';
 import browserInfo from '/imports/utils/browserInfo';
 import { defineMessages, useIntl } from 'react-intl';
 import Icon from '/imports/ui/components/common/icon/component';
 import { User } from '/imports/ui/Types/user';
+import { EMOJI_STATUSES } from '/imports/utils/statuses';
 import TooltipContainer from '/imports/ui/components/common/tooltip/container';
 import Auth from '/imports/ui/services/auth';
 import { LockSettings } from '/imports/ui/Types/meeting';
-// Lodash is loaded
-// eslint-disable-next-line import/no-extraneous-dependencies
 import _ from 'lodash';
-import Styled from './styles';
-
 const messages = defineMessages({
   moderator: {
     id: 'app.userList.moderator',
@@ -55,103 +53,79 @@ interface UserListItemProps {
 }
 
 const UserListItem: React.FC<UserListItemProps> = ({ user, lockSettings }) => {
-  const intl = useIntl();
+  const intl = useIntl()
   const voiceUser = user.voice;
-  const subs = [
+  const subs = [   
     (user.role === ROLE_MODERATOR && LABEL.moderator) && intl.formatMessage(messages.moderator),
     (user.guest && LABEL.guest) && intl.formatMessage(messages.guest),
     (user.mobile && LABEL.mobile) && intl.formatMessage(messages.mobile),
-    (user.locked && lockSettings.hasActiveLockSetting && !user.isModerator)
+    (user.locked && lockSettings.hasActiveLockSetting && !user.isModerator) 
     && (
       <span key={_.uniqueId('lock-')}>
-        <Icon iconName="lock" className={undefined} prependIconName={undefined} rotate={undefined} />
-        &nbsp;
-        {intl.formatMessage(messages.locked)}
-      </span>
+          <Icon iconName="lock" />
+          &nbsp;
+          {intl.formatMessage(messages.locked)}
+        </span>
     ),
     user.lastBreakoutRoom?.currentlyInRoom && (
       <span key={_.uniqueId('breakout-')}>
-        <Icon iconName="rooms" className={undefined} prependIconName={undefined} rotate={undefined} />
-        &nbsp;
-        {user.lastBreakoutRoom?.shortName
-          ? intl.formatMessage(messages.breakoutRoom, { 0: user.lastBreakoutRoom?.sequence })
-          : user.lastBreakoutRoom?.shortName}
-      </span>
+          <Icon iconName="rooms" />
+          &nbsp;
+          {user.lastBreakoutRoom?.shortName
+            ? intl.formatMessage(messages.breakoutRoom, { 0: user.lastBreakoutRoom?.sequence })
+            : user.lastBreakoutRoom?.shortName}
+        </span>
     ),
     (user.cameras.length > 0 && LABEL.sharingWebcam) && (
       <span key={_.uniqueId('breakout-')}>
-        {user.pinned === true
-          ? <Icon iconName="pin-video_on" className={undefined} prependIconName={undefined} rotate={undefined} />
-          : <Icon iconName="video" className={undefined} prependIconName={undefined} rotate={undefined} />}
-        &nbsp;
-        {intl.formatMessage(messages.sharingWebcam)}
-      </span>
+          { user.pinned === true
+            ? <Icon iconName="pin-video_on" />
+            : <Icon iconName="video" /> }
+          &nbsp;
+          {intl.formatMessage(messages.sharingWebcam)}
+        </span>
     ),
   ].filter(Boolean);
 
-  type EmojiStatus = 'away' | 'raiseHand' | 'neutral' | 'confused' | 'sad' | 'happy' | 'applause' | 'thumbsUp' | 'thumbsDown' | 'none';
-
-  const EMOJI_STATUSES: Record<EmojiStatus, string> = {
-    away: 'time',
-    raiseHand: 'hand',
-    neutral: 'undecided',
-    confused: 'confused',
-    sad: 'sad',
-    happy: 'happy',
-    applause: 'applause',
-    thumbsUp: 'thumbs_up',
-    thumbsDown: 'thumbs_down',
-    none: 'none',
-  } as const;
-  const emojiKey = user.emoji;
-  const emojiIcon = emojiKey !== 'none' ? EMOJI_STATUSES[emojiKey as EmojiStatus] : user.name.toLowerCase().slice(0, 2);
+  const iconUser = user.emoji !== 'none'
+    ? (<Icon iconName={user.emoji in EMOJI_STATUSES ? EMOJI_STATUSES[user.emoji] : user.emoji}  />)
+    : user.name.toLowerCase().slice(0, 2);
 
-  const iconUser = (
-    <Icon
-      iconName={emojiIcon}
-      className={undefined}
-      prependIconName={undefined}
-      rotate={undefined}
-    />
-  );
+   const avatarContent = user.lastBreakoutRoom?.currentlyInRoom ? user.lastBreakoutRoom?.sequence : iconUser
 
-  const avatarContent = user.lastBreakoutRoom?.currentlyInRoom ? user.lastBreakoutRoom?.sequence : iconUser
-
-  return (
-    <Styled.UserItemContents data-test='user'>
-      <Styled.Avatar
-        moderator={user.role === ROLE_MODERATOR}
-        presenter={user.presenter || false}
-        talking={voiceUser?.talking || false}
-        muted={voiceUser?.muted || false}
-        listenOnly={voiceUser?.listenOnly || false}
-        voice={voiceUser?.joined || false}
-        noVoice={!(voiceUser?.joined) || false}
-        color={user.color}
-        whiteboardAccess={user?.presPagesWritable?.length > 0}
-        animations
-        emoji={user.emoji !== 'none'}
-        avatar={user.avatar || ''}
-        isChrome={isChrome}
-        isFirefox={isFirefox}
-        isEdge={isEdge}
-      >
-        {avatarContent}
-      </Styled.Avatar>
-      <Styled.UserNameContainer>
-        <Styled.UserName>
-          <TooltipContainer title={user.name}>
-            <span>{user.name}</span>
-          </TooltipContainer>
-          &nbsp;
-          {(user.userId === Auth.userID) ? `(${intl.formatMessage(messages.you)})` : ''}
-        </Styled.UserName>
-        <Styled.UserNameSub>
-          {subs.length ? subs.reduce((prev, curr) => [prev, ' | ', curr]) : null}
-        </Styled.UserNameSub>
-      </Styled.UserNameContainer>
-    </Styled.UserItemContents>
-  );
+  return <Styled.UserItemContents data-test='user'>
+  <Styled.Avatar
+    moderator={user.role === ROLE_MODERATOR}
+    presenter={user.presenter}
+    talking={voiceUser?.talking}
+    muted={voiceUser?.muted}
+    listenOnly={voiceUser?.listenOnly}
+    voice={voiceUser?.joined}
+    noVoice={!voiceUser?.joined}
+    color={user.color}
+    whiteboardAccess={user?.presPagesWritable?.length > 0}
+    animations={true} 
+    emoji={user.emoji !== 'none'}
+    avatar={user.avatar || ''}
+    isChrome={isChrome}
+    isFirefox={isFirefox}
+    isEdge={isEdge}
+  >
+    {avatarContent}
+  </Styled.Avatar>
+  <Styled.UserNameContainer>
+    <Styled.UserName>
+      <TooltipContainer title={user.name}>
+        <span>{user.name}</span>
+      </TooltipContainer>
+      &nbsp;
+      {(user.userId === Auth.userID) ? `(${intl.formatMessage(messages.you)})` : ''}
+    </Styled.UserName>
+    <Styled.UserNameSub>
+      {subs.length ? subs.reduce((prev, curr) => [prev, ' | ', curr]) : null}
+    </Styled.UserNameSub>
+  </Styled.UserNameContainer>
+  </Styled.UserItemContents>;
 };
 
-export default UserListItem;
+export default UserListItem;
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/container.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/container.jsx
@@ -3,7 +3,19 @@ import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import { ColorStyle, DashStyle, SizeStyle, TDShapeType } from '@tldraw/tldraw';
 import SettingsService from '/imports/ui/services/settings';
-import service, { getShapes, getCurrentPres } from './service';
+import {
+  getShapes,
+  getCurrentPres,
+  initDefaultPages,
+  persistShape,
+  removeShapes,
+  isMultiUserActive,
+  hasMultiUserAccess,
+  changeCurrentSlide,
+  notifyNotAllowedChange,
+  notifyShapeNumberExceeded,
+  toggleToolsAnimations,
+} from './service';
 import Whiteboard from './component';
 import { UsersContext } from '../components-data/users-context/context';
 import Auth from '/imports/ui/services/auth';
@@ -32,8 +44,10 @@ const WhiteboardContainer = (props) => {
   const isModerator = currentUser.role === ROLE_MODERATOR;
   const { maxStickyNoteLength, maxNumberOfAnnotations } = WHITEBOARD_CONFIG;
   const fontFamily = WHITEBOARD_CONFIG.styles.text.family;
-  const handleToggleFullScreen = (ref) => FullscreenService.toggleFullScreen(ref);
+  const handleToggleFullScreen = (ref) =>
+    FullscreenService.toggleFullScreen(ref);
   const layoutContextDispatch = layoutDispatch();
+
   const { shapes } = props;
   const hasShapeAccess = (id) => {
     const owner = shapes[id]?.userId;
@@ -122,15 +136,15 @@ export default withTracker(
     };
 
     return {
-      initDefaultPages: service.initDefaultPages,
-      persistShape: service.persistShape,
-      isMultiUserActive: service.isMultiUserActive,
-      hasMultiUserAccess: service.hasMultiUserAccess,
-      changeCurrentSlide: service.changeCurrentSlide,
+      initDefaultPages,
+      persistShape,
+      isMultiUserActive,
+      hasMultiUserAccess,
+      changeCurrentSlide,
       shapes,
       assets,
       curPres,
-      removeShapes: service.removeShapes,
+      removeShapes,
       zoomSlide: PresentationToolbarService.zoomSlide,
       skipToSlide: PresentationToolbarService.skipToSlide,
       nextSlide: PresentationToolbarService.nextSlide,
@@ -139,18 +153,18 @@ export default withTracker(
         podId,
         presentationId
       ),
-      notifyNotAllowedChange: service.notifyNotAllowedChange,
-      notifyShapeNumberExceeded: service.notifyShapeNumberExceeded,
+      notifyNotAllowedChange,
+      notifyShapeNumberExceeded,
       darkTheme,
       whiteboardToolbarAutoHide:
         SettingsService?.application?.whiteboardToolbarAutoHide,
       animations: SettingsService?.application?.animations,
-      toggleToolsAnimations: service.toggleToolsAnimations,
+      toggleToolsAnimations,
       isIphone,
     };
   }
 )(WhiteboardContainer);
 
 WhiteboardContainer.propTypes = {
   shapes: PropTypes.objectOf(PropTypes.shape).isRequired,
-};
+};
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/service.js b/bigbluebutton-html5/imports/ui/components/whiteboard/service.js
@@ -212,7 +212,7 @@ const getCurrentWhiteboardId = () => {
   return currentSlide && currentSlide.id;
 };
 
-export const hasAnnotations = (presentationId) => {
+const hasAnnotations = (presentationId) => {
   const ann = Annotations.findOne(
     { whiteboardId: { $regex: `^${presentationId}` } },
   );
@@ -276,7 +276,7 @@ const changeCurrentSlide = (s) => {
   makeCall('changeCurrentSlide', s);
 };
 
-export const getShapes = (whiteboardId, curPageId, intl, isLocked) => {
+const getShapes = (whiteboardId, curPageId, intl, isLocked) => {
   const unlockedSelector = { whiteboardId };
   const lockedSelector = {
     whiteboardId,
@@ -347,7 +347,7 @@ export const getShapes = (whiteboardId, curPageId, intl, isLocked) => {
   return result;
 };
 
-export const getCurrentPres = () => {
+const getCurrentPres = () => {
   const podId = 'DEFAULT_PRESENTATION_POD';
   return PresentationService.getCurrentPresentation(podId);
 };
@@ -396,16 +396,14 @@ const toggleToolsAnimations = (activeAnim, anim, time) => {
     tdTools?.classList?.add(anim);
     topToolbar?.classList?.add(anim);
   }
-
-};
   if (optionsDropdown) {
     optionsDropdown.classList.remove(activeAnim);
     optionsDropdown.style.transition = `opacity ${time} ease-in-out`;
     optionsDropdown?.classList?.add(anim);
   }
 }
 
-const service = {
+export {
   initDefaultPages,
   Annotations,
   sendAnnotation,
@@ -428,5 +426,4 @@ const service = {
   notifyShapeNumberExceeded,
   hasAnnotations,
   toggleToolsAnimations,
-};
-export default service;
+};