Merge 0b7da39 into 038df74

public/locales/de/translation.json

@@ -362,6 +362,7 @@
     "ShowOtherUsersNotesOption": "Karten anderer Teilnehmer anzeigen",
     "ShowNoteReactionsOptions": "Emoji-Reaktionen auf Karten anzeigen",
     "AllowNoteRepositioningOption": "Verschieben von Karten erlauben",
+    "AllowEditing": "Teilnehmer-Änderungen erlauben",
     "generatePassword": "Passwort erstellen und absichern",
     "save": "speichern",
     "edit": "bearbeiten"

public/locales/en/translation.json

@@ -362,6 +362,7 @@
     "ShowOtherUsersNotesOption": "Show notes of other users",
     "ShowNoteReactionsOptions": "Show note reactions",
     "AllowNoteRepositioningOption": "Allow note repositioning",
+    "AllowEditing": "Allow participant changes",
     "generatePassword": "Generate password and protect",
     "save": "save",
     "edit": "edit"

src/components/BoardHeader/HeaderMenu/BoardOptions/LockBoard.tsx

@@ -0,0 +1,20 @@
+import store, {useAppSelector} from "store";
+import {useTranslation} from "react-i18next";
+import {Actions} from "store/action";
+import {BoardOption} from "./BoardOption";
+import {BoardOptionButton} from "./BoardOptionButton";
+import {BoardOptionToggle} from "./BoardOptionToggle";
+import "../BoardSettings/BoardSettings.scss";
+
+export const LockBoard = () => {
+  const {t} = useTranslation();
+  const allowEditing = useAppSelector((state) => state.board.data!.allowEditing);
+
+  return (
+    <BoardOption>
+      <BoardOptionButton label={t("BoardSettings.AllowEditing")} onClick={() => store.dispatch(Actions.editBoard({allowEditing: !allowEditing}))}>
+        <BoardOptionToggle active={allowEditing} />
+      </BoardOptionButton>
+    </BoardOption>
+  );
+};

src/components/BoardHeader/HeaderMenu/BoardOptions/index.ts

@@ -2,10 +2,12 @@ import {ShowAuthorOption} from "./ShowAuthorOption";
 import {ShowHiddenColumnsOption} from "./ShowHiddenColumnsOption";
 import {ShowOtherUsersNotesOption} from "./ShowOtherUsersNotesOption";
 import {ShowAllBoardSettings} from "./ShowAllBoardSettings";
+import {LockBoard} from "./LockBoard";
 
 export const BoardOption = {
   ShowAuthorOption,
   ShowHiddenColumnsOption,
   ShowOtherUsersNotesOption,
   ShowAllBoardSettings,
+  LockBoard,
 };

src/components/BoardHeader/HeaderMenu/HeaderMenu.tsx

@@ -31,6 +31,7 @@ const HeaderMenu = (props: HeaderMenuProps) => {
             <BoardOption.ShowAuthorOption />
             <BoardOption.ShowOtherUsersNotesOption />
             <BoardOption.ShowHiddenColumnsOption />
+            <BoardOption.LockBoard />
           </>
         )}
         <BoardOption.ShowAllBoardSettings onClose={props.onClose} />

src/components/BoardHeader/HeaderMenu/__tests__/__snapshots__/HeaderMenu.test.tsx.snap

@@ -107,6 +107,26 @@ exports[`<HeaderMenu/> should render correctly for moderator 1`] = `
                 </span>
               </button>
             </li>
+            <li
+              class="board-option"
+            >
+              <button
+                class="board-option-button"
+              >
+                <div
+                  class="board-option-toggle"
+                >
+                  <div
+                    class="board-option-toggle__switch board-option-toggle__switch--right"
+                  />
+                </div>
+                <span
+                  class="board-option-button__label"
+                >
+                  Allow participant changes
+                </span>
+              </button>
+            </li>
             <li
               class="board-option"
               data-testid="allSettings"

src/components/Column/ColumnSettings.tsx

@@ -31,6 +31,7 @@ export const ColumnSettings: FC<ColumnSettingsProps> = ({id, name, color, visibl
   const showHiddenColumns = useAppSelector((state) => state.participants?.self.showHiddenColumns);
   const dispatch = useDispatch();
   const columnSettingsRef = useOnBlur(onClose ?? (() => {}));
+  const boardIsLocked = useAppSelector((state) => !state.board.data!.allowEditing);
 
   const handleAddColumn = (columnIndex: number) => {
     if (!showHiddenColumns) {
@@ -46,6 +47,7 @@ export const ColumnSettings: FC<ColumnSettingsProps> = ({id, name, color, visibl
       <ul>
         <li>
           <button
+            disabled={boardIsLocked}
             onClick={() => {
               onClose?.();
               dispatch(Actions.editColumn(id, {name, color, index, visible: !visible}));
@@ -57,6 +59,7 @@ export const ColumnSettings: FC<ColumnSettingsProps> = ({id, name, color, visibl
         </li>
         <li>
           <button
+            disabled={boardIsLocked}
             onClick={() => {
               onNameEdit?.();
               onClose?.();
@@ -68,6 +71,7 @@ export const ColumnSettings: FC<ColumnSettingsProps> = ({id, name, color, visibl
         </li>
         <li>
           <button
+            disabled={boardIsLocked}
             onClick={() => {
               onClose?.();
               handleAddColumn(index);
@@ -79,6 +83,7 @@ export const ColumnSettings: FC<ColumnSettingsProps> = ({id, name, color, visibl
         </li>
         <li>
           <button
+            disabled={boardIsLocked}
             onClick={() => {
               onClose?.();
               handleAddColumn(index + 1);
@@ -90,6 +95,7 @@ export const ColumnSettings: FC<ColumnSettingsProps> = ({id, name, color, visibl
         </li>
         <li>
           <button
+            disabled={boardIsLocked}
             onClick={() => {
               onClose?.();
               dispatch(Actions.deleteColumn(id));
@@ -101,42 +107,49 @@ export const ColumnSettings: FC<ColumnSettingsProps> = ({id, name, color, visibl
         </li>
         <li>
           <button
+            disabled={boardIsLocked}
             aria-label="Backlog Blue"
             title="Backlog Blue"
             className={classNames(getColorClassName("backlog-blue"), "column__color-button")}
             onClick={() => dispatch(Actions.editColumn(id, {name, color: "backlog-blue", index, visible}))}
           />
           <button
+            disabled={boardIsLocked}
             aria-label="Grooming Green"
             title="Grooming Green"
             className={classNames(getColorClassName("grooming-green"), "column__color-button")}
             onClick={() => dispatch(Actions.editColumn(id, {name, color: "grooming-green", index, visible}))}
           />
           <button
+            disabled={boardIsLocked}
             aria-label="Lean Lilac"
             title="Lean Lilac"
             className={classNames(getColorClassName("lean-lilac"), "column__color-button")}
             onClick={() => dispatch(Actions.editColumn(id, {name, color: "lean-lilac", index, visible}))}
           />
           <button
+            disabled={boardIsLocked}
             aria-label="Online Orange"
             title="Online Orange"
             className={classNames(getColorClassName("online-orange"), "column__color-button")}
             onClick={() => dispatch(Actions.editColumn(id, {name, color: "online-orange", index, visible}))}
           />
           <button
+            disabled={boardIsLocked}
             aria-label="Planning Pink"
             title="Planning Pink"
             className={classNames(getColorClassName("planning-pink"), "column__color-button")}
             onClick={() => dispatch(Actions.editColumn(id, {name, color: "planning-pink", index, visible}))}
           />
           <button
+            disabled={boardIsLocked}
             aria-label="Poker Purple"
             title="Poker Purple"
             className={classNames(getColorClassName("poker-purple"), "column__color-button")}
             onClick={() => dispatch(Actions.editColumn(id, {name, color: "poker-purple", index, visible}))}
           />
           <button
+            disabled={boardIsLocked}
             aria-label="Retro Red"
             title="Retro Red"
             className={classNames(getColorClassName("retro-red"), "column__color-button")}

src/components/MenuBars/MenuBars.tsx

@@ -50,6 +50,7 @@ export const MenuBars = ({showPreviousColumn, showNextColumn, onPreviousColumn,
 
   const [fabIsExpanded, setFabIsExpanded] = useState(false);
   const [showBoardReactionsMenu, setShowBoardReactionsMenu] = useState(false);
+  const boardIsLocked = useAppSelector((state) => !state.board.data!.allowEditing);
 
   useEffect(() => {
     const handleClickOutside = ({target}: MouseEvent) => {
@@ -202,6 +203,7 @@ export const MenuBars = ({showPreviousColumn, showNextColumn, onPreviousColumn,
                 icon={CheckIcon}
                 active={isReady}
                 hotkeyKey={TOGGLE_READY_STATE.toUpperCase()}
+                disabled={boardIsLocked}
               />
             </li>
             <li>
@@ -212,6 +214,7 @@ export const MenuBars = ({showPreviousColumn, showNextColumn, onPreviousColumn,
                 onClick={toggleRaiseHand}
                 active={raisedHand}
                 hotkeyKey={TOGGLE_RAISED_HAND.toUpperCase()}
+                disabled={boardIsLocked}
               />
             </li>
             <li>
@@ -222,6 +225,7 @@ export const MenuBars = ({showPreviousColumn, showNextColumn, onPreviousColumn,
                 onClick={toggleBoardReactionsMenu}
                 active={showBoardReactionsMenu}
                 hotkeyKey={TOGGLE_BOARD_REACTION_MENU.toUpperCase()}
+                disabled={boardIsLocked}
               />
             </li>
             <li>
@@ -239,7 +243,15 @@ export const MenuBars = ({showPreviousColumn, showNextColumn, onPreviousColumn,
           {isAdmin && (
             <ul className="menu__items">
               <li>
-                <TooltipButton active={state.activeTimer} direction="left" label="Timer" onClick={toggleTimerMenu} icon={TimerIcon} hotkeyKey={TOGGLE_TIMER_MENU.toUpperCase()} />
+                <TooltipButton
+                  active={state.activeTimer}
+                  direction="left"
+                  label="Timer"
+                  onClick={toggleTimerMenu}
+                  icon={TimerIcon}
+                  hotkeyKey={TOGGLE_TIMER_MENU.toUpperCase()}
+                  disabled={boardIsLocked}
+                />
               </li>
               <li>
                 <TooltipButton
@@ -249,6 +261,7 @@ export const MenuBars = ({showPreviousColumn, showNextColumn, onPreviousColumn,
                   onClick={toggleVotingMenu}
                   icon={VoteIcon}
                   hotkeyKey={TOGGLE_VOTING_MENU.toUpperCase()}
+                  disabled={boardIsLocked}
                 />
               </li>
               <li>
@@ -259,6 +272,7 @@ export const MenuBars = ({showPreviousColumn, showNextColumn, onPreviousColumn,
                   icon={FocusIcon}
                   onClick={toggleModeration}
                   hotkeyKey={TOGGLE_MODERATION.toUpperCase()}
+                  disabled={boardIsLocked}
                 />
               </li>
             </ul>

src/components/Note/Note.tsx

@@ -33,6 +33,7 @@ export const Note = (props: NoteProps) => {
   const isStack = useAppSelector((state) => state.notes.filter((n) => n.position.stack === props.noteId).length > 0);
   const isShared = useAppSelector((state) => state.board.data?.sharedNote === props.noteId);
   const allowStacking = useAppSelector((state) => state.board.data?.allowStacking ?? true);
+  const boardIsLocked = useAppSelector((state) => !state.board.data!.allowEditing);
   const showNoteReactions = useAppSelector((state) => state.board.data?.showNoteReactions ?? true);
   const showAuthors = useAppSelector((state) => !!state.board.data?.showAuthors);
   const me = useAppSelector((state) => state.participants?.self);
@@ -100,7 +101,7 @@ export const Note = (props: NoteProps) => {
       id={props.noteId}
       columnId={note.position.column}
       className={classNames("note__root", props.colorClassName)}
-      disabled={!(isModerator || allowStacking)}
+      disabled={!isModerator && (!allowStacking || boardIsLocked)}
     >
       <div tabIndex={0} role="button" className={`note note--${stackSetting}`} onClick={handleClick} onKeyDown={handleKeyPress} ref={noteRef}>
         <header className="note__header">
@@ -122,7 +123,7 @@ export const Note = (props: NoteProps) => {
           <main className={classNames("note__text", {"note__text--extended": !showNoteReactions})}>{note.text}</main>
         )}
         <footer className={classNames("note__footer", {"note__footer--collapsed": !showNoteReactions})}>
-          <NoteReactionList noteId={props.noteId} dimensions={dimensions} colorClassName={props.colorClassName} show={showNoteReactions} />
+          {(isModerator || !boardIsLocked) && <NoteReactionList noteId={props.noteId} dimensions={dimensions} colorClassName={props.colorClassName} show={showNoteReactions} />}
         </footer>
       </div>
       {isStack && <div className="note__in-stack" />}

src/components/NoteInput/NoteInput.scss

@@ -6,6 +6,7 @@ $note-input__input-right: 40px;
 .note-input {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   min-height: 36px;
   width: 100%;
   position: relative;
@@ -22,6 +23,12 @@ $note-input__input-right: 40px;
   }
 }
 
+.note-input__lock-icon {
+  width: 32px;
+  height: 32px;
+  color: $color-dark-gray;
+}
+
 .note-input__input {
   left: $note-input__input-left;
   right: $note-input__input-right;

src/components/NoteInput/NoteInput.tsx

@@ -1,5 +1,4 @@
 import {useRef, useState} from "react";
-import "./NoteInput.scss";
 import {ReactComponent as PlusIcon} from "assets/icon-add.svg";
 import {ReactComponent as ImageIcon} from "assets/icon-addimage.svg";
 import {ReactComponent as StarIcon} from "assets/icon-star.svg";
@@ -13,6 +12,9 @@ import TextareaAutosize from "react-autosize-textarea";
 import {hotkeyMap} from "constants/hotkeys";
 import {useEmojiAutocomplete} from "utils/hooks/useEmojiAutocomplete";
 import {EmojiSuggestions} from "components/EmojiSuggestions";
+import {ReactComponent as LockIcon} from "assets/icon-lock.svg";
+import {useAppSelector} from "store";
+import "./NoteInput.scss";
 
 export interface NoteInputProps {
   columnId: string;
@@ -26,6 +28,7 @@ export const NoteInput = ({columnIndex, columnId, columnIsVisible, toggleColumnV
   const dispatch = useDispatch();
   const {t} = useTranslation();
   const [toastDisplayed, setToastDisplayed] = useState(false);
+  const boardLocked = useAppSelector((state) => !state.board.data!.allowEditing);
 
   const addNote = (content: string) => {
     if (!content.trim()) return;
@@ -68,7 +71,9 @@ export const NoteInput = ({columnIndex, columnId, columnIsVisible, toggleColumnV
       }}
       ref={emoji.containerRef}
     >
+      {boardLocked && <LockIcon className="note-input__lock-icon" />}
       <TextareaAutosize
+        disabled={boardLocked}
         ref={noteInputRef}
         className="note-input__input"
         placeholder={t("NoteInput.placeholder")}

src/components/SettingsDialog/BoardSettings/BoardSettings.tsx

@@ -167,6 +167,31 @@ export const BoardSettings = () => {
           </div>
           {state.currentUserIsModerator && (
             <>
+              <div className="settings-dialog__group">
+                <SettingsButton
+                  data-testid="note-repositioning"
+                  className="board-settings__allow-note-repositioning-button"
+                  label={t("BoardSettings.AllowNoteRepositioningOption")}
+                  onClick={() => store.dispatch(Actions.editBoard({allowStacking: !state.board.allowStacking}))}
+                  role="switch"
+                  aria-checked={state.board.allowStacking}
+                >
+                  <div className="board-settings__allow-note-repositioning-value">
+                    <Toggle active={state.board.allowStacking} />
+                  </div>
+                </SettingsButton>
+                <SettingsButton
+                  className="board-settings__allow-board-editing"
+                  label={t("BoardSettings.AllowEditing")}
+                  onClick={() => store.dispatch(Actions.editBoard({allowEditing: !state.board.allowEditing}))}
+                  role="switch"
+                  aria-checked={state.board.allowEditing}
+                >
+                  <div className="board-settings__allow-board-editing-value">
+                    <Toggle active={state.board.allowEditing} />
+                  </div>
+                </SettingsButton>
+              </div>
               <div className="settings-dialog__group">
                 <SettingsButton
                   data-testid="author"
@@ -221,19 +246,6 @@ export const BoardSettings = () => {
                     <Toggle active={!!state.me?.showHiddenColumns} />
                   </div>
                 </SettingsButton>
-                <hr className="settings-dialog__separator" />
-                <SettingsButton
-                  data-testid="note-repositioning"
-                  className="board-settings__allow-note-repositioning-button"
-                  label={t("BoardSettings.AllowNoteRepositioningOption")}
-                  onClick={() => store.dispatch(Actions.editBoard({allowStacking: !state.board.allowStacking}))}
-                  role="switch"
-                  aria-checked={state.board.allowStacking}
-                >
-                  <div className="board-settings__allow-note-repositioning-value">
-                    <Toggle active={state.board.allowStacking} />
-                  </div>
-                </SettingsButton>
               </div>
 
               <SettingsButton