From d145a482cbb6f3d5f0e067936c5108984d9f8921 Mon Sep 17 00:00:00 2001
From: Scroody <andrezero@live.com>
Date: Fri, 30 Jun 2023 10:53:58 -0300
Subject: [PATCH 1/4] Enhancement: Breakout modal UI improved

---
 .../create-breakout-room/component.jsx        | 286 +++++++++---------
 .../create-breakout-room/styles.js            |  62 +++-
 bigbluebutton-html5/public/locales/en.json    |  11 +-
 3 files changed, 189 insertions(+), 170 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
index 6d60dd8f73..98d1305d9f 100644
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
@@ -172,7 +172,11 @@ const intlMessages = defineMessages({
   movedUserLabel: {
     id: 'app.createBreakoutRoom.movedUserLabel',
     description: 'screen reader alert when users are moved to rooms',
-  }
+  },
+  manageRooms: {
+    id: 'app.createBreakoutRoom.manageRoomsLabel',
+    description: 'Label for manage rooms',
+  },
 });
 
 const BREAKOUT_LIM = Meteor.settings.public.app.breakouts.breakoutRoomLimit;
@@ -219,7 +223,7 @@ class BreakoutRoom extends PureComponent {
     this.renderUserItemByRoom = this.renderUserItemByRoom.bind(this);
     this.renderRoomsGrid = this.renderRoomsGrid.bind(this);
     this.renderBreakoutForm = this.renderBreakoutForm.bind(this);
-    this.renderCheckboxes = this.renderCheckboxes.bind(this);
+    this.renderCheckboxes = this.renderUnassingUsers.bind(this);
     this.renderRoomSortList = this.renderRoomSortList.bind(this);
     this.renderDesktop = this.renderDesktop.bind(this);
     this.renderMobile = this.renderMobile.bind(this);
@@ -661,10 +665,10 @@ class BreakoutRoom extends PureComponent {
       ? intl.formatMessage(intlMessages.captureSlidesType)
       : intl.formatMessage(intlMessages.captureNotesType);
 
-    const fileName = `${this.getRoomName(position,true)}_${captureType}`.replace(/ /g, '_');
+    const fileName = `${this.getRoomName(position, true)}_${captureType}`.replace(/ /g, '_');
 
     const fileNameDuplicatedCount = presentations.filter((pres) => pres.filename?.startsWith(fileName)
-            || pres.name?.startsWith(fileName)).length;
+      || pres.name?.startsWith(fileName)).length;
 
     return fileNameDuplicatedCount === 0 ? fileName : `${fileName}(${fileNameDuplicatedCount + 1})`;
   }
@@ -829,6 +833,43 @@ class BreakoutRoom extends PureComponent {
     });
   }
 
+  renderContent() {
+    const { intl } = this.props;
+    const {
+      leastOneUserIsValid,
+      allowDrop,
+    } = this.state;
+    const drop = (room) => (ev) => {
+      ev.preventDefault();
+      const data = ev.dataTransfer.getData('text');
+      this.changeUserRoom(data, room);
+      this.setState({ selectedId: '' });
+    };
+
+    return (
+      <Styled.ContentContainer>
+        <Styled.Alert valid={leastOneUserIsValid} role="alert">
+          <Styled.FreeJoinLabel>
+            <Styled.BreakoutNameInput
+              type="text"
+              readOnly
+              value={
+                intl.formatMessage(intlMessages.notAssigned, { 0: this.getUserByRoom(0).length })
+              }
+            />
+          </Styled.FreeJoinLabel>
+          <Styled.BreakoutBox hundred id="breakoutBox-0" onDrop={drop(0)} onDragOver={allowDrop} tabIndex={0}>
+            {this.renderUserItemByRoom(0)}
+          </Styled.BreakoutBox>
+          <Styled.SpanWarn data-test="warningNoUserAssigned" valid={leastOneUserIsValid}>
+            {intl.formatMessage(intlMessages.leastOneWarnBreakout)}
+          </Styled.SpanWarn>
+        </Styled.Alert>
+        {this.renderRoomsGrid()}
+      </Styled.ContentContainer>
+    );
+  }
+
   renderRoomsGrid() {
     const { intl, isUpdate } = this.props;
     const {
@@ -864,23 +905,6 @@ class BreakoutRoom extends PureComponent {
 
     return (
       <Styled.BoxContainer key="rooms-grid-" ref={(r) => { this.listOfUsers = r; }} data-test="roomGrid">
-        <Styled.Alert valid={leastOneUserIsValid} role="alert">
-          <Styled.FreeJoinLabel>
-            <Styled.BreakoutNameInput
-              type="text"
-              readOnly
-              value={
-                intl.formatMessage(intlMessages.notAssigned, { 0: this.getUserByRoom(0).length })
-              }
-            />
-          </Styled.FreeJoinLabel>
-          <Styled.BreakoutBox id="breakoutBox-0" onDrop={drop(0)} onDragOver={allowDrop} tabIndex={0}>
-            {this.renderUserItemByRoom(0)}
-          </Styled.BreakoutBox>
-          <Styled.SpanWarn data-test="warningNoUserAssigned" valid={leastOneUserIsValid}>
-            {intl.formatMessage(intlMessages.leastOneWarnBreakout)}
-          </Styled.SpanWarn>
-        </Styled.Alert>
         {
           range(1, rooms + 1).map((value) => (
             <div key={`room-${value}`}>
@@ -925,12 +949,17 @@ class BreakoutRoom extends PureComponent {
     const {
       intl,
       isUpdate,
+      isBreakoutRecordable,
     } = this.props;
     const {
       numberOfRooms,
       durationTime,
       numberOfRoomsIsValid,
       durationIsValid,
+      freeJoin,
+      record,
+      captureNotes,
+      captureSlides,
     } = this.state;
     if (isUpdate) return null;
 
@@ -968,42 +997,6 @@ class BreakoutRoom extends PureComponent {
                 aria-label={intl.formatMessage(intlMessages.duration)}
                 data-test="durationTime"
               />
-              <Styled.HoldButtonWrapper
-                key="decrease-breakout-time"
-                exec={this.decreaseDurationTime}
-                minBound={MIN_BREAKOUT_ROOMS}
-                value={durationTime}
-              >
-                <Button
-                  label={intl.formatMessage(intlMessages.minusRoomTime)}
-                  aria-label={
-                    `${intl.formatMessage(intlMessages.minusRoomTime)} ${intl.formatMessage(intlMessages.roomTime, { 0: durationTime - 1 })}`
-                  }
-                  icon="substract"
-                  onClick={() => { }}
-                  hideLabel
-                  circle
-                  size="sm"
-                  data-test="decreaseBreakoutTime"
-                />
-              </Styled.HoldButtonWrapper>
-              <Styled.HoldButtonWrapper
-                key="increase-breakout-time"
-                exec={this.increaseDurationTime}
-              >
-                <Button
-                  label={intl.formatMessage(intlMessages.addRoomTime)}
-                  aria-label={
-                    `${intl.formatMessage(intlMessages.addRoomTime)} ${intl.formatMessage(intlMessages.roomTime, { 0: durationTime + 1 })}`
-                  }
-                  icon="add"
-                  onClick={() => { }}
-                  hideLabel
-                  circle
-                  size="sm"
-                  data-test="increaseBreakoutTime"
-                />
-              </Styled.HoldButtonWrapper>
             </Styled.DurationArea>
             <Styled.SpanWarn valid={durationIsValid}>
               {
@@ -1014,26 +1007,66 @@ class BreakoutRoom extends PureComponent {
               }
             </Styled.SpanWarn>
           </Styled.DurationLabel>
-          <Styled.AssignBtnsContainer>
-            <Styled.AssignBtns
-              data-test="randomlyAssign"
-              label={intl.formatMessage(intlMessages.randomlyAssign)}
-              aria-describedby="randomlyAssignDesc"
-              onClick={this.onAssignRandomly}
-              size="sm"
-              color="default"
-              disabled={!numberOfRoomsIsValid}
-            />
-            <Styled.AssignBtns
-              data-test="resetAssignments"
-              label={intl.formatMessage(intlMessages.resetAssignments)}
-              aria-describedby="resetAssignmentsDesc"
-              onClick={this.onAssignReset}
-              size="sm"
-              color="default"
-              disabled={!numberOfRoomsIsValid}
-            />
-          </Styled.AssignBtnsContainer>
+          <Styled.CheckBoxesContainer key="breakout-checkboxes">
+            <Styled.FreeJoinLabel htmlFor="freeJoinCheckbox" key="free-join-breakouts">
+              <Styled.FreeJoinCheckbox
+                type="checkbox"
+                id="freeJoinCheckbox"
+                onChange={this.setFreeJoin}
+                checked={freeJoin}
+                aria-label={intl.formatMessage(intlMessages.freeJoinLabel)}
+              />
+              <span aria-hidden>{intl.formatMessage(intlMessages.freeJoinLabel)}</span>
+            </Styled.FreeJoinLabel>
+            {
+              isBreakoutRecordable ? (
+                <Styled.FreeJoinLabel htmlFor="recordBreakoutCheckbox" key="record-breakouts">
+                  <Styled.FreeJoinCheckbox
+                    id="recordBreakoutCheckbox"
+                    type="checkbox"
+                    onChange={this.setRecord}
+                    checked={record}
+                    aria-label={intl.formatMessage(intlMessages.record)}
+                  />
+                  <span aria-hidden>
+                    {intl.formatMessage(intlMessages.record)}
+                  </span>
+                </Styled.FreeJoinLabel>
+              ) : null
+            }
+            {
+              isImportPresentationWithAnnotationsFromBreakoutRoomsEnabled() ? (
+                <Styled.FreeJoinLabel htmlFor="captureSlidesBreakoutCheckbox" key="capture-slides-breakouts">
+                  <Styled.FreeJoinCheckbox
+                    id="captureSlidesBreakoutCheckbox"
+                    type="checkbox"
+                    onChange={this.setCaptureSlides}
+                    checked={captureSlides}
+                    aria-label={intl.formatMessage(intlMessages.captureSlidesLabel)}
+                  />
+                  <span aria-hidden>
+                    {intl.formatMessage(intlMessages.captureSlidesLabel)}
+                  </span>
+                </Styled.FreeJoinLabel>
+              ) : null
+            }
+            {
+              isImportSharedNotesFromBreakoutRoomsEnabled() ? (
+                <Styled.FreeJoinLabel htmlFor="captureNotesBreakoutCheckbox" key="capture-notes-breakouts">
+                  <Styled.FreeJoinCheckbox
+                    id="captureNotesBreakoutCheckbox"
+                    type="checkbox"
+                    onChange={this.setCaptureNotes}
+                    checked={captureNotes}
+                    aria-label={intl.formatMessage(intlMessages.captureNotesLabel)}
+                  />
+                  <span aria-hidden>
+                    {intl.formatMessage(intlMessages.captureNotesLabel)}
+                  </span>
+                </Styled.FreeJoinLabel>
+              ) : null
+            }
+          </Styled.CheckBoxesContainer>
         </Styled.BreakoutSettings>
         <Styled.SpanWarn valid={numberOfRoomsIsValid}>
           {intl.formatMessage(intlMessages.numberOfRoomsIsValid)}
@@ -1041,6 +1074,7 @@ class BreakoutRoom extends PureComponent {
         <span aria-hidden id="randomlyAssignDesc" className="sr-only">
           {intl.formatMessage(intlMessages.randomlyAssignDesc)}
         </span>
+        <Styled.Separator />
       </React.Fragment>
     );
   }
@@ -1062,78 +1096,30 @@ class BreakoutRoom extends PureComponent {
     );
   }
 
-  renderCheckboxes() {
+  renderUnassingUsers() {
     const {
-      intl, isUpdate, isBreakoutRecordable,
+      intl,
+      isUpdate,
     } = this.props;
     if (isUpdate) return null;
     const {
-      freeJoin,
-      record,
-      captureNotes,
-      captureSlides,
+      numberOfRoomsIsValid,
     } = this.state;
     return (
-      <Styled.CheckBoxesContainer key="breakout-checkboxes">
-        <Styled.FreeJoinLabel htmlFor="freeJoinCheckbox" key="free-join-breakouts">
-          <Styled.FreeJoinCheckbox
-            type="checkbox"
-            id="freeJoinCheckbox"
-            onChange={this.setFreeJoin}
-            checked={freeJoin}
-            aria-label={intl.formatMessage(intlMessages.freeJoinLabel)}
-          />
-          <span aria-hidden>{intl.formatMessage(intlMessages.freeJoinLabel)}</span>
-        </Styled.FreeJoinLabel>
-        {
-          isBreakoutRecordable ? (
-            <Styled.FreeJoinLabel htmlFor="recordBreakoutCheckbox" key="record-breakouts">
-              <Styled.FreeJoinCheckbox
-                id="recordBreakoutCheckbox"
-                type="checkbox"
-                onChange={this.setRecord}
-                checked={record}
-                aria-label={intl.formatMessage(intlMessages.record)}
-              />
-              <span aria-hidden>
-                {intl.formatMessage(intlMessages.record)}
-              </span>
-            </Styled.FreeJoinLabel>
-          ) : null
-        }
-        {
-          isImportPresentationWithAnnotationsFromBreakoutRoomsEnabled() ? (
-            <Styled.FreeJoinLabel htmlFor="captureSlidesBreakoutCheckbox" key="capture-slides-breakouts">
-              <Styled.FreeJoinCheckbox
-                id="captureSlidesBreakoutCheckbox"
-                type="checkbox"
-                onChange={this.setCaptureSlides}
-                checked={captureSlides}
-                aria-label={intl.formatMessage(intlMessages.captureSlidesLabel)}
-              />
-              <span aria-hidden>
-                {intl.formatMessage(intlMessages.captureSlidesLabel)}
-              </span>
-            </Styled.FreeJoinLabel>
-          ) : null
-        }
-        {
-          isImportSharedNotesFromBreakoutRoomsEnabled() ? (
-            <Styled.FreeJoinLabel htmlFor="captureNotesBreakoutCheckbox" key="capture-notes-breakouts">
-              <Styled.FreeJoinCheckbox
-                id="captureNotesBreakoutCheckbox"
-                type="checkbox"
-                onChange={this.setCaptureNotes}
-                checked={captureNotes}
-                aria-label={intl.formatMessage(intlMessages.captureNotesLabel)}
-              />
-              <span aria-hidden>
-                {intl.formatMessage(intlMessages.captureNotesLabel)}
-              </span>
-            </Styled.FreeJoinLabel>
-          ) : null
-        }
-      </Styled.CheckBoxesContainer>
+      <Styled.AssignBtnsContainer>
+        <Styled.LabelText bold aria-hidden>
+          {intl.formatMessage(intlMessages.manageRooms)}
+        </Styled.LabelText>
+        <Styled.AssignBtns
+          data-test="resetAssignments"
+          label={intl.formatMessage(intlMessages.resetAssignments)}
+          aria-describedby="resetAssignmentsDesc"
+          onClick={this.onAssignReset}
+          size="sm"
+          color="default"
+          disabled={!numberOfRoomsIsValid}
+        />
+      </Styled.AssignBtnsContainer>
     );
   }
 
@@ -1175,7 +1161,7 @@ class BreakoutRoom extends PureComponent {
             <span>{user.userName}</span>
             <i>{(isMe(user.userId)) ? ` (${intl.formatMessage(intlMessages.you)})` : ''}</i>
           </span>
-          { room !== user.from ? (
+          {room !== user.from ? (
             <span
               className="close"
               role="button"
@@ -1184,7 +1170,7 @@ class BreakoutRoom extends PureComponent {
             >
               <Icon iconName="close" />
             </span>
-          ) : null }
+          ) : null}
         </Styled.RoomUserItem>
       ));
   }
@@ -1261,8 +1247,8 @@ class BreakoutRoom extends PureComponent {
   renderDesktop() {
     return [
       this.renderBreakoutForm(),
-      this.renderCheckboxes(),
-      this.renderRoomsGrid(),
+      this.renderUnassingUsers(),
+      this.renderContent(),
     ];
   }
 
@@ -1286,7 +1272,7 @@ class BreakoutRoom extends PureComponent {
     return [
       this.renderErrorMessages(),
       this.renderBreakoutForm(),
-      this.renderCheckboxes(),
+      this.renderUnassingUsers(),
       this.renderButtonSetLevel(2, intl.formatMessage(intlMessages.nextLabel)),
     ];
   }
@@ -1307,9 +1293,9 @@ class BreakoutRoom extends PureComponent {
     const { intl, isUpdate } = this.props;
     return (
       <Styled.SubTitle>
-        { isUpdate
+        {isUpdate
           ? intl.formatMessage(intlMessages.breakoutRoomUpdateDesc)
-          : intl.formatMessage(intlMessages.breakoutRoomDesc) }
+          : intl.formatMessage(intlMessages.breakoutRoomDesc)}
       </Styled.SubTitle>
     );
   }
diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/styles.js b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/styles.js
index adf4f3ca6c..d0402be418 100644
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/styles.js
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/styles.js
@@ -25,13 +25,22 @@ import {
 
 const BoxContainer = styled.div`
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(2, 1fr);
   grid-gap: 1.6rem 1rem;
   box-sizing: border-box;
   padding-bottom: 1rem;
 `;
 
+const ContentContainer = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  grid-template-areas: "sidebar content";
+  grid-gap: 1.5rem;
+`;
+
 const Alert = styled.div`
+  grid-area: sidebar;
+  margin-bottom: 2.5rem;
   ${({ valid }) => !valid && `
     position: relative;
 
@@ -61,15 +70,16 @@ const FreeJoinLabel = styled.label`
 
 const BreakoutNameInput = styled.input`
   width: 100%;
-  text-align: left;
+  text-align: center;
   font-weight: 600;
   padding: .25rem .25rem .25rem 0;
   margin: 0;
-  border: none;
   &::placeholder {
     color: ${colorGray};
     opacity: 1;
   }
+  border: 1px solid ${colorGrayLightest};
+  margin-bottom: 1rem;
 
   ${({ readOnly }) => readOnly && `
     cursor: default;
@@ -78,10 +88,14 @@ const BreakoutNameInput = styled.input`
 
 const BreakoutBox = styled(ScrollboxVertical)`
   width: 100%;
-  height: 21rem;
+  height: 10rem;
   border: 1px solid ${colorGrayLightest};
   border-radius: ${borderRadius};
   padding: ${lgPaddingY} 0;
+
+  ${({ hundred }) => hundred && `
+  height: 100%;
+  `}
 `;
 
 const SpanWarn = styled.span`
@@ -111,9 +125,9 @@ const RoomName = styled(BreakoutNameInput)`
 
 const BreakoutSettings = styled.div`
   display: grid;
-  grid-template-columns: 2fr 2fr 1fr; 
+  grid-template-columns: 1fr 1fr 1fr; 
   grid-template-rows: 1fr;
-  grid-gap: 1rem;
+  grid-gap: 6rem;
 
   @media ${smallOnly} {
     grid-template-columns: 1fr ;
@@ -160,6 +174,11 @@ const LabelText = styled.p`
   color: ${colorGray};
   white-space: nowrap;
   margin-bottom: .5rem;
+
+  ${({ bold }) => bold && `
+  font-weight: bold;
+  font-size: 1.5rem;
+  `}
 `;
 
 const DurationArea = styled.div`
@@ -173,13 +192,13 @@ const DurationInput = styled.input`
   color: ${colorGray};
   border: 1px solid ${colorGrayLighter};
   border-radius: ${borderRadius};
-  width: 50%;
-  text-align: center;
+  width: 100%;
+  text-align: left;
   padding: .25rem;
+  
 
   &::placeholder {
     color: ${colorGray};
-    opacity: 1;
   }
 `;
 
@@ -197,21 +216,32 @@ const HoldButtonWrapper = styled(HoldButton)`
 `;
 
 const AssignBtnsContainer = styled.div`
+  justify-items: center;
+  display: flex;
+  flex-flow: row;
+  align-items: baseline;
   margin-top: auto;
 `;
 
 const AssignBtns = styled(Button)`
-  color: ${colorPrimary};
+  color: ${colorDanger};
   font-size: ${fontSizeSmall};
   white-space: nowrap;
-  margin: 3px auto;
-  align-self: flex-end;
-  width: 100%;
+  margin-bottom: 0.5rem;
 `;
 
 const CheckBoxesContainer = styled(FlexRow)`
-  margin-top: 2rem;
-  margin-bottom: 0.25rem;
+  white-space: nowrap;
+  display: flex;
+  flex-flow: column;
+  justify-content: flex-end; 
+`;
+
+const Separator = styled.div`
+  width: 100%;
+  height: 1px;
+  margin: 1rem 0;
+  border: 1px solid ${colorGrayLightest};
 `;
 
 const FreeJoinCheckbox = styled.input`
@@ -331,6 +361,7 @@ export default {
   AssignBtnsContainer,
   AssignBtns,
   CheckBoxesContainer,
+  Separator,
   FreeJoinCheckbox,
   RoomUserItem,
   LockIcon,
@@ -341,4 +372,5 @@ export default {
   WithError,
   SubTitle,
   Content,
+  ContentContainer,
 };
diff --git a/bigbluebutton-html5/public/locales/en.json b/bigbluebutton-html5/public/locales/en.json
index 608eb06d18..d9908b8afd 100755
--- a/bigbluebutton-html5/public/locales/en.json
+++ b/bigbluebutton-html5/public/locales/en.json
@@ -1179,7 +1179,7 @@
     "app.createBreakoutRoom.durationInMinutes": "Duration (minutes)",
     "app.createBreakoutRoom.randomlyAssign": "Randomly assign",
     "app.createBreakoutRoom.randomlyAssignDesc": "Assigns users randomly to breakout rooms",
-    "app.createBreakoutRoom.resetAssignments": "Reset assignments",
+    "app.createBreakoutRoom.resetAssignments": "Unassign Users",
     "app.createBreakoutRoom.resetAssignmentsDesc": "Reset all user room assignments",
     "app.createBreakoutRoom.endAllBreakouts": "End all breakout rooms",
     "app.createBreakoutRoom.chatTitleMsgAllRooms": "all rooms",
@@ -1190,12 +1190,13 @@
     "app.createBreakoutRoom.minusRoomTime": "Decrease breakout room time to",
     "app.createBreakoutRoom.addRoomTime": "Increase breakout room time to",
     "app.createBreakoutRoom.addParticipantLabel": "+ Add participant",
-    "app.createBreakoutRoom.freeJoin": "Allow users to choose a breakout room to join",
-    "app.createBreakoutRoom.captureNotes": "Capture shared notes when breakout rooms end",
-    "app.createBreakoutRoom.captureSlides": "Capture whiteboard when breakout rooms end",
+    "app.createBreakoutRoom.freeJoin": "Allow users to choose rooms",
+    "app.createBreakoutRoom.manageRoomsLabel": "Manage Rooms",
+    "app.createBreakoutRoom.captureNotes": "Save shared notes",
+    "app.createBreakoutRoom.captureSlides": "Save whiteboard",
     "app.createBreakoutRoom.leastOneWarnBreakout": "You must place at least one user in a breakout room.",
     "app.createBreakoutRoom.minimumDurationWarnBreakout": "Minimum duration for a breakout room is {0} minutes.",
-    "app.createBreakoutRoom.modalDesc": "Tip: You can drag-and-drop a user's name to assign them to a specific breakout room.",
+    "app.createBreakoutRoom.modalDesc": "Complete the steps below to create breakout rooms in your session. To add participants to a room, simply drag their name to the desired room.",
     "app.createBreakoutRoom.roomTime": "{0} minutes",
     "app.createBreakoutRoom.numberOfRoomsError": "The number of rooms is invalid.",
     "app.createBreakoutRoom.duplicatedRoomNameError": "Room name can't be duplicated.",

From 50511ff3d33883dedeb14ba791349e1f6e8456e4 Mon Sep 17 00:00:00 2001
From: Scroody <andrezero@live.com>
Date: Wed, 5 Jul 2023 13:58:40 -0300
Subject: [PATCH 2/4] Requested changes made

---
 .../create-breakout-room/component.jsx        | 67 +++++++++++++++----
 .../create-breakout-room/styles.js            |  8 ++-
 bigbluebutton-html5/public/locales/en.json    | 10 ++-
 3 files changed, 64 insertions(+), 21 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
index 98d1305d9f..891417b63a 100644
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
@@ -177,6 +177,10 @@ const intlMessages = defineMessages({
     id: 'app.createBreakoutRoom.manageRoomsLabel',
     description: 'Label for manage rooms',
   },
+  sendInvitationToMods: {
+    id: 'app.createBreakoutRoom.sendInvitationToMods',
+    description: 'label for checkbox send invitation to moderators',
+  },
 });
 
 const BREAKOUT_LIM = Meteor.settings.public.app.breakouts.breakoutRoomLimit;
@@ -203,7 +207,7 @@ const setPresentationVisibility = (state) => {
   if (presentationInnerWrapper) {
     presentationInnerWrapper.style.display = state;
   }
-}
+};
 
 class BreakoutRoom extends PureComponent {
   constructor(props) {
@@ -234,6 +238,7 @@ class BreakoutRoom extends PureComponent {
     this.setInvitationConfig = this.setInvitationConfig.bind(this);
     this.setRecord = this.setRecord.bind(this);
     this.setCaptureNotes = this.setCaptureNotes.bind(this);
+    this.setInviteMods = this.setInviteMods.bind(this);
     this.setCaptureSlides = this.setCaptureSlides.bind(this);
     this.blurDurationTime = this.blurDurationTime.bind(this);
     this.removeRoomUsers = this.removeRoomUsers.bind(this);
@@ -250,12 +255,13 @@ class BreakoutRoom extends PureComponent {
       roomNamesChanged: [],
       roomSelected: 0,
       preventClosing: true,
-      leastOneUserIsValid: true,
+      leastOneUserIsValid: null,
       numberOfRoomsIsValid: true,
       roomNameDuplicatedIsValid: true,
       roomNameEmptyIsValid: true,
       record: false,
       captureNotes: false,
+      inviteMods: false,
       captureSlides: false,
       durationIsValid: true,
       breakoutJoinedUsers: null,
@@ -271,7 +277,7 @@ class BreakoutRoom extends PureComponent {
     const {
       breakoutJoinedUsers, getLastBreakouts, groups, isUpdate,
       allowUserChooseRoomByDefault, captureSharedNotesByDefault,
-      captureWhiteboardByDefault,
+      captureWhiteboardByDefault, inviteModsByDefault,
     } = this.props;
     setPresentationVisibility('none');
     this.setRoomUsers();
@@ -302,6 +308,7 @@ class BreakoutRoom extends PureComponent {
       freeJoin: allowUserChooseRoomByDefault,
       captureSlides: captureWhiteboardByDefault,
       captureNotes: captureSharedNotesByDefault,
+      inviteMods: inviteModsByDefault,
     });
 
     const lastBreakouts = getLastBreakouts();
@@ -439,6 +446,7 @@ class BreakoutRoom extends PureComponent {
       numberOfRooms,
       durationTime,
       durationIsValid,
+      inviteMods,
     } = this.state;
 
     if ((durationTime || 0) < MIN_BREAKOUT_TIME) {
@@ -481,7 +489,7 @@ class BreakoutRoom extends PureComponent {
       sequence: seq,
     }));
 
-    createBreakoutRoom(rooms, durationTime, record, captureNotes, captureSlides);
+    createBreakoutRoom(rooms, durationTime, record, captureNotes, captureSlides, inviteMods);
     Session.set('isUserListOpen', true);
   }
 
@@ -552,6 +560,7 @@ class BreakoutRoom extends PureComponent {
 
   onAssignRandomly() {
     const { numberOfRooms } = this.state;
+    this.setState({ hasUsersAssign: false });
     const { users } = this.state;
     // We only want to assign viewers so filter out the moderators. We also want to get
     // all users each run so that clicking the button again will reshuffle
@@ -572,6 +581,7 @@ class BreakoutRoom extends PureComponent {
 
   onAssignReset() {
     const { users } = this.state;
+    this.setState({ hasUsersAssign: true });
 
     users.forEach((u) => {
       if (u.room !== null && u.room > 0) {
@@ -623,6 +633,10 @@ class BreakoutRoom extends PureComponent {
     this.setState({ captureNotes: e.target.checked });
   }
 
+  setInviteMods(e) {
+    this.setState({ inviteMods: e.target.checked });
+  }
+
   setCaptureSlides(e) {
     this.setState({ captureSlides: e.target.checked });
   }
@@ -960,6 +974,7 @@ class BreakoutRoom extends PureComponent {
       record,
       captureNotes,
       captureSlides,
+      inviteMods,
     } = this.state;
     if (isUpdate) return null;
 
@@ -1066,6 +1081,18 @@ class BreakoutRoom extends PureComponent {
                 </Styled.FreeJoinLabel>
               ) : null
             }
+            <Styled.FreeJoinLabel htmlFor="sendInvitationToAssignedModeratorsCheckbox" key="send-invitation-to-assigned-moderators-breakouts">
+              <Styled.FreeJoinCheckbox
+                id="sendInvitationToAssignedModeratorsCheckbox"
+                type="checkbox"
+                onChange={this.setInviteMods}
+                checked={inviteMods}
+                aria-label={intl.formatMessage(intlMessages.sendInvitationToMods)}
+              />
+              <span aria-hidden>
+                {intl.formatMessage(intlMessages.sendInvitationToMods)}
+              </span>
+            </Styled.FreeJoinLabel>
           </Styled.CheckBoxesContainer>
         </Styled.BreakoutSettings>
         <Styled.SpanWarn valid={numberOfRoomsIsValid}>
@@ -1104,21 +1131,35 @@ class BreakoutRoom extends PureComponent {
     if (isUpdate) return null;
     const {
       numberOfRoomsIsValid,
+      leastOneUserIsValid,
     } = this.state;
+
     return (
       <Styled.AssignBtnsContainer>
         <Styled.LabelText bold aria-hidden>
           {intl.formatMessage(intlMessages.manageRooms)}
         </Styled.LabelText>
-        <Styled.AssignBtns
-          data-test="resetAssignments"
-          label={intl.formatMessage(intlMessages.resetAssignments)}
-          aria-describedby="resetAssignmentsDesc"
-          onClick={this.onAssignReset}
-          size="sm"
-          color="default"
-          disabled={!numberOfRoomsIsValid}
-        />
+        {leastOneUserIsValid ? (
+          <Styled.AssignBtns
+            data-test="resetAssignments"
+            label={intl.formatMessage(intlMessages.resetAssignments)}
+            aria-describedby="resetAssignmentsDesc"
+            onClick={this.onAssignReset}
+            size="sm"
+            color="default"
+            disabled={!numberOfRoomsIsValid}
+          />
+        ) : (
+          <Styled.AssignBtns
+            random
+            data-test="randomlyAssign"
+            label={intl.formatMessage(intlMessages.randomlyAssign)}
+            aria-describedby="randomlyAssignDesc"
+            onClick={this.onAssignRandomly}
+            size="sm"
+            color="default"
+          />
+        )}
       </Styled.AssignBtnsContainer>
     );
   }
diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/styles.js b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/styles.js
index d0402be418..95cfbfa2ee 100644
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/styles.js
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/styles.js
@@ -41,7 +41,7 @@ const ContentContainer = styled.div`
 const Alert = styled.div`
   grid-area: sidebar;
   margin-bottom: 2.5rem;
-  ${({ valid }) => !valid && `
+  ${({ valid }) => valid === false && `
     position: relative;
 
     & > * {
@@ -127,7 +127,7 @@ const BreakoutSettings = styled.div`
   display: grid;
   grid-template-columns: 1fr 1fr 1fr; 
   grid-template-rows: 1fr;
-  grid-gap: 6rem;
+  grid-gap: 4rem;
 
   @media ${smallOnly} {
     grid-template-columns: 1fr ;
@@ -228,6 +228,10 @@ const AssignBtns = styled(Button)`
   font-size: ${fontSizeSmall};
   white-space: nowrap;
   margin-bottom: 0.5rem;
+
+  ${({ random }) => random && `
+  color: ${colorPrimary};
+  `}
 `;
 
 const CheckBoxesContainer = styled(FlexRow)`
diff --git a/bigbluebutton-html5/public/locales/en.json b/bigbluebutton-html5/public/locales/en.json
index d9908b8afd..7c370fd932 100755
--- a/bigbluebutton-html5/public/locales/en.json
+++ b/bigbluebutton-html5/public/locales/en.json
@@ -7,6 +7,7 @@
     "app.chat.locked": "Chat is locked, messages can't be sent",
     "app.chat.inputLabel": "Message input for chat {0}",
     "app.chat.emojiButtonLabel": "Emoji Picker",
+    "app.chat.loadMoreButtonLabel": "Load More",
     "app.chat.inputPlaceholder": "Message {0}",
     "app.chat.titlePublic": "Public Chat",
     "app.chat.titlePrivate": "Private Chat with {0}",
@@ -137,6 +138,8 @@
     "app.userList.menuTitleContext": "Available options",
     "app.userList.chatListItem.unreadSingular": "One new message",
     "app.userList.chatListItem.unreadPlural": "{0} new messages",
+    "app.userList.menu.away": "Set yourself as away",
+    "app.userList.menu.notAway": "Set yourself as active",
     "app.userList.menu.chat.label": "Start a private chat",
     "app.userList.menu.clearStatus.label": "Clear status",
     "app.userList.menu.removeUser.label": "Remove user",
@@ -631,15 +634,9 @@
     "app.actionsBar.actionsDropdown.selectRandUserDesc": "Chooses a user from available viewers at random",
     "app.actionsBar.actionsDropdown.propagateLayoutLabel": "Propagate layout",
     "app.actionsBar.interactions.interactions": "Interactions",
-    "app.actionsBar.interactions.interactionsAdvancedButton": "Open interactions submenu",
     "app.actionsBar.interactions.raiseHand": "Raise your hand",
     "app.actionsBar.interactions.lowHand": "Lower your hand",
-    "app.actionsBar.interactions.writeQuestion": "Write a question",
     "app.actionsBar.interactions.addReaction": "Add a reaction",
-    "app.actionsBar.interactions.status": "Status",
-    "app.actionsBar.interactions.present": "Present",
-    "app.actionsBar.interactions.away": "Away",
-    "app.actionsBar.interactions.back": "Back",
     "app.actionsBar.emojiMenu.statusTriggerLabel": "Set status",
     "app.actionsBar.emojiMenu.awayLabel": "Away",
     "app.actionsBar.emojiMenu.awayDesc": "Change your status to away",
@@ -1194,6 +1191,7 @@
     "app.createBreakoutRoom.manageRoomsLabel": "Manage Rooms",
     "app.createBreakoutRoom.captureNotes": "Save shared notes",
     "app.createBreakoutRoom.captureSlides": "Save whiteboard",
+    "app.createBreakoutRoom.sendInvitationToMods": "Send invitation to assigned moderators",
     "app.createBreakoutRoom.leastOneWarnBreakout": "You must place at least one user in a breakout room.",
     "app.createBreakoutRoom.minimumDurationWarnBreakout": "Minimum duration for a breakout room is {0} minutes.",
     "app.createBreakoutRoom.modalDesc": "Complete the steps below to create breakout rooms in your session. To add participants to a room, simply drag their name to the desired room.",

From bd6420cd2f981c7912d1913d9e3fc361f1840ab8 Mon Sep 17 00:00:00 2001
From: Scroody <andrezero@live.com>
Date: Wed, 5 Jul 2023 15:48:21 -0300
Subject: [PATCH 3/4] Resquested changes

---
 .../imports/ui/components/common/modal/fullscreen/styles.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bigbluebutton-html5/imports/ui/components/common/modal/fullscreen/styles.js b/bigbluebutton-html5/imports/ui/components/common/modal/fullscreen/styles.js
index 8c321674fc..66467cccc5 100644
--- a/bigbluebutton-html5/imports/ui/components/common/modal/fullscreen/styles.js
+++ b/bigbluebutton-html5/imports/ui/components/common/modal/fullscreen/styles.js
@@ -22,12 +22,12 @@ const FullscreenModal = styled(Styled.BaseModal)`
   outline-style: solid;
   display: flex;
   flex-direction: column;
+  height: 100%;
   align-self: flex-start;
   padding: calc(${lineHeightComputed} / 2) ${lineHeightComputed};
 
   @media ${smallOnly} {
     width: 100%;
-    height: 100%;
   }
 `;
 

From 52b636a65ae38408f6ec1980391c5cd171d5b44c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ram=C3=B3n=20Souza?= <contato@ramonsouza.com>
Date: Fri, 7 Jul 2023 16:56:42 -0300
Subject: [PATCH 4/4] keyboard move user - unassigned list

---
 .../create-breakout-room/component.jsx            | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
index 891417b63a..b115f64b42 100644
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
@@ -328,6 +328,11 @@ class BreakoutRoom extends PureComponent {
       }
     }
 
+    const unassignedUsers = document.getElementById('breakoutBox-0');
+    if (unassignedUsers) {
+      unassignedUsers.addEventListener('keydown', this.handleMoveEvent, true);
+    }
+
     const { numberOfRooms } = this.state;
     const { users } = this.props;
     const { users: prevUsers } = prevProps;
@@ -352,6 +357,10 @@ class BreakoutRoom extends PureComponent {
         roomList.removeEventListener('keydown', this.handleMoveEvent, true);
       }
     }
+    const unassignedUsers = document.getElementById('breakoutBox-0');
+    if (unassignedUsers) {
+      unassignedUsers.removeEventListener('keydown', this.handleMoveEvent, true);
+    }
   }
 
   handleShiftUser(activeListSibling) {
@@ -365,6 +374,12 @@ class BreakoutRoom extends PureComponent {
           this.changeUserRoom(u.userId, users[index].room);
         }
       });
+    } else {
+      users.forEach((u, index) => {
+        if (`roomUserItem-${u.userId}` === document.activeElement.id) {
+          this.changeUserRoom(u.userId, 0);
+        }
+      });
     }
   }