PF-1391 - Adding breakout room example app

examples/breakout-rooms/README.md

@@ -62,16 +62,7 @@ https://github.com/miroapp/app-examples/assets/7162412/c4c02dde-6680-4970-a51e-2
      - `boards:write`
      - `identity:read`
 
-4. Go back to your app home page, and under the `Permissions` section, you will see a blue button that says `Install app and get OAuth token`. Click that button. Then click on `Add` as shown in the video below. <b>In the video we install a different app, but the process is the same regardless of the app.</b>
-
-> ⚠️ We recommend to install your app on a [developer team](https://developers.miro.com/docs/create-a-developer-team) while you are developing or testing apps.⚠️
-
-https://github.com/miroapp/app-examples/assets/10428517/1e6862de-8617-46ef-b265-97ff1cbfe8bf
-
-5. Go to your developer team, and open your boards.
-6. Click on the app icon on the left sidebar.
-
-### Example of app yaml
+#### Example of app yaml
 
 ```yaml
 # See https://developers.miro.com/docs/app-manifest on how to use this
@@ -84,6 +75,15 @@ scopes:
   - identity:read
 ```
 
+4. Go back to your app home page, and under the `Permissions` section, you will see a blue button that says `Install app and get OAuth token`. Click that button. Then click on `Add` as shown in the video below. <b>In the video we install a different app, but the process is the same regardless of the app.</b>
+
+> ⚠️ We recommend to install your app on a [developer team](https://developers.miro.com/docs/create-a-developer-team) while you are developing or testing apps.⚠️
+
+https://github.com/miroapp/app-examples/assets/10428517/1e6862de-8617-46ef-b265-97ff1cbfe8bf
+
+5. Go to your developer team, and open your boards.
+6. Click on the app icon on the left sidebar.
+
 # 🗂️ Folder structure <a name="folder"></a>
 
 ```

examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.css

@@ -24,15 +24,15 @@
   padding: 1em;
 }
 
-.validation-messages h5 {
+.validation-messages .validatino-messages-title {
   font-size: 1em;
   font-weight: 600;
   line-height: 1em;
   margin: 0;
   color: #656b81;
 }
 
-.validation-messages ul {
+.validation-messages .validatino-messages-items {
   font-size: 0.9em;
 }
 

examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx

@@ -10,21 +10,22 @@
   useSelectedItems,
   useTimer,
 } from "../../hooks";
 import { convertTime, formatDisplayTime, isUser } from "../../utils";
 import { RoomConfig } from "../RoomConfig/RoomConfig";
 import { DEFAULT_TIME, Timer } from "../Timer/Timer";
 import {
   DropdownMenu,
   IconButton,
   IconPlus,
   IconHandFilled,
   IconDotsThreeVertical,
   Button,
 } from "@mirohq/design-system";
 
 import "./BreakoutManager.css";
 import { BreakoutStarter } from "../BreakoutStarter";
 import { WaitingList } from "../WaitingList";
+import { RoomsManager } from "../RoomsManager";
 
 export const BreakoutManager: React.FC = () => {
   const { breakout, rooms, isFacilitator, ...service } = useBreakout();
@@ -209,81 +210,44 @@
   }
 
   const canStartSession = validations.length < 1;
-  const isEditabled = breakout?.state !== "started";
+  const isEditable = breakout?.state !== "started";
 
   return (
     <main className="manager-container">
       {breakout?.state !== "started" && rooms.length < 1 ? (
         <BreakoutStarter onAddGroup={handleAddGroup} />
       ) : (
-        <div className="container">
-          <section className="rooms-container">
-            {rooms.map((room) => (
-              <RoomConfig
-                key={room.id}
-                room={room}
-                isEditable={isEditabled}
-                isSelected={room.id === selectedRoom?.id}
-                unassignedUsers={unassignedUsers}
-                onAddParticipant={handleAddParticipant}
-                onSelect={handleStartSelectTarget}
-                onRemove={handleRemoveRoom}
-                onRemoveParticipant={handleRemoveParticipant}
-              />
-            ))}
-            <div className="breakout-controls">
-              <IconButton
-                label="Add a room"
-                variant="solid-prominent"
-                css={{ borderRadius: "100%" }}
-                onClick={handleAddGroup}
-              >
-                <IconPlus />
-              </IconButton>
-
-              {canUseTimer && (
-                <Timer
-                  onSet={setTimerDuration}
-                  step={convertTime(1, "milliseconds", "minutes")}
-                />
-              )}
-
-              {isFacilitator && (
-                <DropdownMenu>
-                  <DropdownMenu.Trigger asChild>
-                    <IconDotsThreeVertical />
-                  </DropdownMenu.Trigger>
-                  <DropdownMenu.Content>
-                    <>
-                      <DropdownMenu.Item
-                        onClick={() => handleReleaseFacilitator()}
-                      >
-                        <DropdownMenu.IconSlot>
-                          <IconHandFilled />
-                        </DropdownMenu.IconSlot>
-                        Release facilitator role
-                      </DropdownMenu.Item>
-                    </>
-                  </DropdownMenu.Content>
-                </DropdownMenu>
-              )}
-            </div>
-          </section>
-        </div>
+        <RoomsManager
+          rooms={rooms}
+          isEditable={isEditable}
+          isFacilitator={isFacilitator}
+          canUseTimer={canUseTimer}
+          selectedRoom={selectedRoom}
+          unassignedUsers={unassignedUsers}
+          onAddParticipant={handleAddParticipant}
+          onSelectTarget={handleStartSelectTarget}
+          onRemove={handleRemoveRoom}
+          onRemoveParticipant={handleRemoveParticipant}
+          onAddGroup={handleAddGroup}
+          onReleaseFacilitator={handleReleaseFacilitator}
+          onSetTime={setTimerDuration}
+        />
       )}
 
       {rooms.length && unassignedUsers.length ? (
         <WaitingList
           unassignedUsers={unassignedUsers}
           onSplitUsers={handleSplitUsers}
-          disabled={!isEditabled}
+          disabled={!isEditable}
         />
       ) : null}
 
-      {isEditabled && validations.length > 0 ? (
+      {isEditable && validations.length > 0 ? (
         <div className="validation-messages">
-          <h5>Before starting the session:</h5>
-          <ul>
+          <h5 className="validatino-messages-title">
+            Before starting the session:
+          </h5>
+          <ul className="validatino-messages-items">
             {validations.map((message) => (
               <li key={message}>{message}</li>
             ))}

examples/breakout-rooms/src/components/BreakoutStarter/BreakoutStarter.css

@@ -3,11 +3,11 @@
   flex-direction: column;
   align-items: center;
   flex: 1;
-  justify-content: space-between;
+  justify-content: center;
 }
 
 .breakout-starter .waiting-icon {
-  margin-bottom: 50%;
+  margin: auto;
 }
 
 .starter-action {

examples/breakout-rooms/src/components/RoomConfig/RoomConfig.tsx

@@ -20,7 +20,7 @@ export type Props = {
   isEditable: boolean;
   isSelected: boolean;
   unassignedUsers: OnlineUserInfo[];
-  onSelect: (room: Room) => void;
+  onSelectTarget: (room: Room) => void;
   onRemove: (room: Room) => void;
   onAddParticipant: (room: Room, user: OnlineUserInfo) => void;
   onRemoveParticipant: (room: Room, participant: Participant) => void;
@@ -30,7 +30,7 @@ export const RoomConfig: React.FunctionComponent<Props> = ({
   room,
   isEditable,
   unassignedUsers,
-  onSelect,
+  onSelectTarget,
   onRemove,
   onAddParticipant,
   onRemoveParticipant,
@@ -43,7 +43,7 @@ export const RoomConfig: React.FunctionComponent<Props> = ({
           label="Select frame"
           variant="ghost"
           disabled={!isEditable}
-          onClick={() => onSelect(room)}
+          onClick={() => onSelectTarget(room)}
         >
           <IconFrame />
         </IconButton>

examples/breakout-rooms/src/components/RoomsManager/RoomsManager.tsx

@@ -0,0 +1,100 @@
+import * as React from "react";
+import { OnlineUserInfo } from "@mirohq/websdk-types";
+import { convertTime } from "../../utils";
+import { RoomConfig, Props as RoomConfigProps } from "../RoomConfig";
+import {
+  DropdownMenu,
+  IconButton,
+  IconDotsThreeVertical,
+  IconHandFilled,
+  IconPlus,
+} from "@mirohq/design-system";
+import { Timer } from "../Timer";
+import { Room } from "../../types";
+
+export type Props = {
+  rooms: Room[];
+  selectedRoom?: Room;
+  isEditable: boolean;
+  isFacilitator: boolean;
+  canUseTimer: boolean;
+  unassignedUsers: OnlineUserInfo[];
+  onAddParticipant: RoomConfigProps["onAddParticipant"];
+  onSelectTarget: RoomConfigProps["onSelectTarget"];
+  onRemove: RoomConfigProps["onRemove"];
+  onRemoveParticipant: RoomConfigProps["onRemoveParticipant"];
+  onAddGroup: () => void;
+  onReleaseFacilitator: () => void;
+  onSetTime: (time: number) => void;
+};
+
+export const RoomsManager: React.FC<Props> = ({
+  rooms,
+  isEditable,
+  isFacilitator,
+  canUseTimer,
+  selectedRoom,
+  unassignedUsers,
+  onAddParticipant,
+  onSelectTarget,
+  onRemove,
+  onRemoveParticipant,
+  onAddGroup,
+  onSetTime,
+  onReleaseFacilitator,
+}) => {
+  return (
+    <div className="container">
+      <section className="rooms-container">
+        {rooms.map((room) => (
+          <RoomConfig
+            key={room.id}
+            room={room}
+            isEditable={isEditable}
+            isSelected={room.id === selectedRoom?.id}
+            unassignedUsers={unassignedUsers}
+            onAddParticipant={onAddParticipant}
+            onSelectTarget={onSelectTarget}
+            onRemove={onRemove}
+            onRemoveParticipant={onRemoveParticipant}
+          />
+        ))}
+        <div className="breakout-controls">
+          <IconButton
+            label="Add a room"
+            variant="solid-prominent"
+            css={{ borderRadius: "100%" }}
+            onClick={onAddGroup}
+          >
+            <IconPlus />
+          </IconButton>
+
+          {canUseTimer && (
+            <Timer
+              onSet={onSetTime}
+              step={convertTime(1, "milliseconds", "minutes")}
+            />
+          )}
+
+          {isFacilitator && (
+            <DropdownMenu>
+              <DropdownMenu.Trigger asChild>
+                <IconDotsThreeVertical />
+              </DropdownMenu.Trigger>
+              <DropdownMenu.Content>
+                <>
+                  <DropdownMenu.Item onClick={() => onReleaseFacilitator()}>
+                    <DropdownMenu.IconSlot>
+                      <IconHandFilled />
+                    </DropdownMenu.IconSlot>
+                    Release facilitator role
+                  </DropdownMenu.Item>
+                </>
+              </DropdownMenu.Content>
+            </DropdownMenu>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+};

examples/breakout-rooms/src/components/RoomsManager/index.tsx

@@ -0,0 +1 @@
+export * from "./RoomsManager";

examples/breakout-rooms/src/components/WaitingList/WaitingList.css

@@ -7,7 +7,7 @@
   gap: 1em;
 }
 
-.waiting-list h5 {
+.waiting-list .waiting-list-title {
   font-size: 1em;
   margin: 0;
   font-weight: 600;

examples/breakout-rooms/src/components/WaitingList/WaitingList.tsx

@@ -17,7 +17,9 @@ export const WaitingList: React.FC<Props> = ({
 }) => {
   return (
     <section className="waiting-list">
-      <h5>{unassignedUsers.length} user(s) not in rooms</h5>
+      <h5 className="waiting-list-title">
+        {unassignedUsers.length} user(s) not in rooms
+      </h5>
       <Button
         variant="solid-subtle"
         size="large"

examples/breakout-rooms/src/components/WaitingRoom/WaitingRoom.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
   gap: 2em;
   height: 100%;
 }
@@ -18,5 +18,5 @@
 }
 
 .waiting-room-container .waiting-icon {
-  margin-bottom: 100%;
+  margin: auto;
 }