Mark the props of the component as read-only.

ui/src/App/Team/Archives/ActionItemArchives/DeleteMultipleActionItemsConfirmation/DeleteMultipleActionItemsConfirmation.tsx

@@ -26,7 +26,7 @@ interface Props {
 	onActionItemDeletion(): void;
 }
 
-function DeleteMultipleActionItemsConfirmation(props: Props) {
+function DeleteMultipleActionItemsConfirmation(props: Readonly<Props>) {
 	const { actionItemIds, onActionItemDeletion } = props;
 
 	const team = useRecoilValue(TeamState);

ui/src/App/Team/Archives/ActionItemArchives/DeleteSingleActionItemConfirmation/DeleteSingleActionItemConfirmation.tsx

@@ -26,7 +26,7 @@ interface Props {
 	onActionItemDeletion(): void;
 }
 
-function DeleteSingleActionItemConfirmation(props: Props) {
+function DeleteSingleActionItemConfirmation(props: Readonly<Props>) {
 	const { actionItemId, onActionItemDeletion } = props;
 
 	const team = useRecoilValue(TeamState);

ui/src/App/Team/Archives/Pagination/Pagination.tsx

@@ -25,7 +25,7 @@ interface Props {
 	onPageChange(pageIndex: number): void;
 }
 
-function Pagination(props: Props) {
+function Pagination(props: Readonly<Props>) {
 	const { pageCount, onPageChange } = props;
 
 	return pageCount > 1 ? (

ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/ArchivedBoardTile/ArchivedBoardTile.tsx

@@ -34,7 +34,7 @@ interface Props {
 	isSelected: boolean;
 }
 
-function ArchivedBoardTile(props: Props): React.ReactElement {
+function ArchivedBoardTile(props: Readonly<Props>): React.ReactElement {
 	const { board, onBoardDeletion, onBoardCheckboxClick, isSelected } = props;
 
 	const setModalContents = useSetRecoilState(ModalContentsState);

ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/ArchivedBoardsListHeader/ArchivedBoardListHeader.tsx

@@ -31,7 +31,7 @@ interface Props {
 	areAllSelected?: boolean;
 }
 
-function ArchivedBoardListHeader(props: Props) {
+function ArchivedBoardListHeader(props: Readonly<Props>) {
 	const { onDateClick, onSelectAllClick, areAllSelected = false } = props;
 
 	const [sortOrder, setSortOrder] = useState<SortOrder>(SortOrder.DESC);

ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/DeleteBoardConfirmation/DeleteBoardConfirmation.tsx

@@ -26,7 +26,7 @@ interface Props {
 	onBoardDeletion(): void;
 }
 
-function DeleteBoardConfirmation(props: Props) {
+function DeleteBoardConfirmation(props: Readonly<Props>) {
 	const { boardId, onBoardDeletion } = props;
 
 	const team = useRecoilValue(TeamState);

ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/DeleteBoardsConfirmation/DeleteBoardsConfirmation.tsx

@@ -26,7 +26,7 @@ interface Props {
 	onBoardDeletion(): void;
 }
 
-function DeleteBoardsConfirmation(props: Props) {
+function DeleteBoardsConfirmation(props: Readonly<Props>) {
 	const { boardIds, onBoardDeletion } = props;
 
 	const team = useRecoilValue(TeamState);

ui/src/App/Team/Retro/ActionItemsColumn/ActionItem/ActionItem.tsx

@@ -34,7 +34,7 @@ interface Props {
 	actionItemId: number;
 }
 
-function ActionItem(props: Props) {
+function ActionItem(props: Readonly<Props>) {
 	const { actionItemId } = props;
 
 	const actionItem = useRecoilValue(ActionItemByIdState(actionItemId));

ui/src/App/Team/Retro/ActionItemsColumn/ActionItem/DefaultActionItemView/DefaultActionItemView.tsx

@@ -42,7 +42,7 @@ interface Props {
 	setActionItemMinHeight: (height: number | undefined) => void;
 }
 
-function DefaultActionItemView(props: Props) {
+function DefaultActionItemView(props: Readonly<Props>) {
 	const { actionItem, setViewState, setActionItemMinHeight } = props;
 
 	const team = useRecoilValue(TeamState);

ui/src/App/Team/Retro/ActionItemsColumn/ActionItem/DeleteActionItemView/DeleteActionItemView.tsx

@@ -30,7 +30,7 @@ interface Props {
 	height: number | undefined;
 }
 
-function DeleteActionItemView(props: Props) {
+function DeleteActionItemView(props: Readonly<Props>) {
 	const { actionItemId, setViewState, height } = props;
 
 	const setModalContents = useSetRecoilState(ModalContentsState);

ui/src/App/Team/Retro/ActionItemsColumn/ActionItem/EditActionItemView/EditActionItemView.tsx

@@ -30,7 +30,7 @@ interface Props {
 	setViewState: (viewState: ActionItemViewState) => void;
 }
 
-function EditActionItemView(props: Props) {
+function EditActionItemView(props: Readonly<Props>) {
 	const { actionItem, setViewState } = props;
 
 	const team = useRecoilValue(TeamState);

ui/src/App/Team/Retro/MobileColumnNav/MobileColumnNav.tsx

@@ -28,7 +28,7 @@ interface Props {
 	setSelectedIndex(index: number): void;
 }
 
-function MobileColumnNav(props: Props): React.ReactElement {
+function MobileColumnNav(props: Readonly<Props>): React.ReactElement {
 	const { columns = [], selectedIndex, setSelectedIndex } = props;
 
 	const isSelectedIndex = (index: number): boolean => index === selectedIndex;

ui/src/App/Team/Retro/RetroSubheader/SubheaderButton/SubheaderButton.tsx

@@ -24,7 +24,7 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
 	fontAwesomeIconClasses?: string;
 }
 
-function SubheaderButton(props: Props) {
+function SubheaderButton(props: Readonly<Props>) {
 	const { fontAwesomeIconClasses, className, children, ...buttonProps } = props;
 
 	return (

ui/src/App/Team/Retro/ThoughtsColumn/DraggableThoughtItem/DraggableRetroItem.tsx

@@ -33,7 +33,7 @@ interface Props {
 	index: number;
 }
 
-const DraggableRetroItem = (props: Props): React.ReactElement => {
+const DraggableRetroItem = (props: Readonly<Props>): React.ReactElement => {
 	const { thought, topic, index } = props;
 	const disableDraggable = useRecoilValue(DisableDraggableState);
 

ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItem/DefaultThoughtItemView/DefaultThoughtItemView.tsx

@@ -44,7 +44,7 @@ interface Props {
 	setThoughtItemHeight: (height: number | undefined) => void;
 }
 
-function DefaultThoughtItemView(props: Props) {
+function DefaultThoughtItemView(props: Readonly<Props>) {
 	const {
 		thought,
 		type,

ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItem/DeleteThoughtView/DeleteThoughtView.tsx

@@ -30,7 +30,7 @@ interface Props {
 	thoughtId: number;
 }
 
-function DeleteThoughtView(props: Props) {
+function DeleteThoughtView(props: Readonly<Props>) {
 	const { setViewState, height, thoughtId } = props;
 	const team = useRecoilValue(TeamState);
 	const setModalContents = useSetRecoilState(ModalContentsState);

ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItem/EditThoughtView/EditThoughtView.tsx

@@ -29,7 +29,7 @@ interface Props {
 	setViewState: (viewState: ThoughtItemViewState) => void;
 }
 
-function EditThoughtView(props: Props) {
+function EditThoughtView(props: Readonly<Props>) {
 	const { thought, setViewState } = props;
 	const team = useRecoilValue(TeamState);
 

ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItem/ThoughtItem.tsx

@@ -37,7 +37,7 @@ interface Props {
 	disableButtons?: boolean;
 }
 
-function ThoughtItem(props: Props) {
+function ThoughtItem(props: Readonly<Props>) {
 	const { thoughtId, type, disableButtons = false } = props;
 
 	const thought = useRecoilValue(ThoughtByIdState(thoughtId));

ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItemWithAddAction/ThoughtItemWithAddAction.tsx

@@ -29,7 +29,7 @@ interface Props {
 	thoughtId: number;
 }
 
-function ThoughtItemWithAddAction(props: Props) {
+function ThoughtItemWithAddAction(props: Readonly<Props>) {
 	const { type, thoughtId } = props;
 
 	const [showAddActionItemCard, setShowAddActionItemCard] = useState(false);

ui/src/App/Team/Retro/ThoughtsColumn/ThoughtsColumn.tsx

@@ -41,7 +41,7 @@ interface Props {
 	column: Column;
 }
 
-function ThoughtsColumn(props: Props) {
+function ThoughtsColumn(props: Readonly<Props>) {
 	const { column } = props;
 
 	const team = useRecoilValue(TeamState);

ui/src/App/Team/TeamHeader/Settings/AccountTab/AccountTab.tsx

@@ -30,7 +30,7 @@ interface Props {
 	accountTabData?: AddBoardOwnersFormProps;
 }
 
-function AccountTab(props: Props): React.ReactElement {
+function AccountTab(props: Readonly<Props>): React.ReactElement {
 	const { accountTabData } = props;
 
 	const team = useRecoilValue(TeamState);

ui/src/App/Team/TeamHeader/Settings/AccountTab/AddBoardOwnersForm/AddBoardOwnersConfirmationForm/AddBoardOwnersConfirmationForm.tsx

@@ -31,7 +31,7 @@ interface Props {
 	email2?: string;
 }
 
-function AddBoardOwnersConfirmationForm(props: Props) {
+function AddBoardOwnersConfirmationForm(props: Readonly<Props>) {
 	const { email1, email2 = '' } = props;
 
 	const team = useRecoilValue(TeamState);

ui/src/App/Team/TeamHeader/Settings/AccountTab/BoardOwnersForm/EmailSentConfirmation/EmailSentConfirmation.tsx

@@ -29,7 +29,7 @@ interface Props {
 	paragraph1: string;
 }
 
-function EmailSentConfirmation(props: Props) {
+function EmailSentConfirmation(props: Readonly<Props>) {
 	const { paragraph1 } = props;
 
 	const setModalContents = useSetRecoilState(ModalContentsState);

ui/src/App/Team/TeamHeader/Settings/Settings.tsx

@@ -38,7 +38,7 @@ interface Props {
 	accountTabData?: AddBoardOwnersFormProps;
 }
 
-export function Settings(props: Props) {
+export function Settings(props: Readonly<Props>) {
 	const { activeTab = SettingsTabs.STYLES, accountTabData } = props;
 
 	const environmentConfig = useRecoilValue(EnvironmentConfigState);

ui/src/App/Team/TeamHeader/TeamHeaderNavLink/TeamHeaderNavLink.tsx

@@ -28,7 +28,7 @@ interface Props {
 	end?: boolean;
 }
 
-function TeamHeaderNavLink(props: Props) {
+function TeamHeaderNavLink(props: Readonly<Props>) {
 	const { to, children, end } = props;
 
 	return (

ui/src/Common/ActionItemDisplayOnly/ActionItemDisplayOnly.tsx

@@ -27,7 +27,7 @@ interface Props {
 	actionItem: Action;
 }
 
-function ActionItemDisplayOnly(props: Props) {
+function ActionItemDisplayOnly(props: Readonly<Props>) {
 	const { actionItem } = props;
 
 	return (

ui/src/Common/ArchivedActionItem/ArchivedActionItem.tsx

@@ -38,7 +38,7 @@ interface Props {
 	onActionItemCheckboxClick?(actionItemId: number, isChecked: boolean): void;
 }
 
-function ArchivedActionItem(props: Props) {
+function ArchivedActionItem(props: Readonly<Props>) {
 	const {
 		actionItem,
 		isSelected = false,

ui/src/Common/AssigneeInput/AssigneeInput.tsx

@@ -32,7 +32,7 @@ interface Props {
 	readOnly?: boolean;
 }
 
-function AssigneeInput(props: Props) {
+function AssigneeInput(props: Readonly<Props>) {
 	const { assignee = '', onAssign, disabled, readOnly } = props;
 	const assigneeInputRef = useRef<HTMLInputElement>(null);
 

ui/src/Common/CheckYourMailConfirmationPage/CheckYourMailConfirmationPage.tsx

@@ -28,7 +28,7 @@ interface Props {
 	paragraph2: string;
 }
 
-function CheckYourMailConfirmationPage(props: Props) {
+function CheckYourMailConfirmationPage(props: Readonly<Props>) {
 	const { paragraph1, paragraph2 } = props;
 
 	return (

ui/src/Common/Checkbox/Checkbox.tsx

@@ -28,7 +28,7 @@ interface Props {
 	onChange(checked: boolean): void;
 }
 
-function Checkbox(props: Props) {
+function Checkbox(props: Readonly<Props>) {
 	const { id, label, value, className, onChange } = props;
 	const [isChecked, setIsChecked] = useState<boolean>(false);
 

ui/src/Common/ColumnHeader/ColumnHeaderInput/ColumnHeaderInput.tsx

@@ -30,7 +30,7 @@ interface Props {
 	setEditing(editing: boolean): void;
 }
 
-function ColumnHeaderInput(props: Props) {
+function ColumnHeaderInput(props: Readonly<Props>) {
 	const { initialTitle, updateTitle, setEditing } = props;
 
 	const [value, setValue] = useState(initialTitle);

ui/src/Common/ColumnHeader/EditColumnButton/EditColumnButton.tsx

@@ -25,7 +25,7 @@ interface Props {
 	onClick(): void;
 }
 
-function EditColumnButton(props: Props) {
+function EditColumnButton(props: Readonly<Props>) {
 	const { title, onClick } = props;
 
 	return (

ui/src/Common/ColumnHeader/SortColumnButton/SortColumnButton.tsx

@@ -26,7 +26,7 @@ interface Props {
 	onClick?(sortedState: boolean): void;
 }
 
-function SortColumnButton(props: Props) {
+function SortColumnButton(props: Readonly<Props>) {
 	const { title, onClick } = props;
 	const [sorted, setSorted] = useState(false);
 

ui/src/Common/ColumnItem/EditColumnItem/EditColumnItem.tsx

@@ -38,7 +38,7 @@ interface Props {
 	className?: string;
 }
 
-function EditColumnItem(props: Props) {
+function EditColumnItem(props: Readonly<Props>) {
 	const {
 		onConfirm,
 		onCancel,

ui/src/Common/ConfirmationModal/ConfirmationModal.tsx

@@ -35,7 +35,7 @@ interface Props {
 	submitButtonText: string;
 }
 
-function ConfirmationModal(props: Props) {
+function ConfirmationModal(props: Readonly<Props>) {
 	const {
 		testId,
 		className,

ui/src/Common/CreateColumnItemInput/CreateColumnItemInput.tsx

@@ -32,7 +32,7 @@ interface Props {
 
 const MAX_CHARACTER_COUNT = 255;
 
-function CreateColumnItemInput(props: Props): React.ReactElement {
+function CreateColumnItemInput(props: Readonly<Props>): React.ReactElement {
 	const { placeholder, type, handleSubmission, ...labelProps } = props;
 
 	const [value, setValue] = useState('');

ui/src/Common/Dropdown/Dropdown.tsx

@@ -29,7 +29,7 @@ interface Props {
 	onChange: (value: string) => void;
 }
 
-function Dropdown(props: Props) {
+function Dropdown(props: Readonly<Props>) {
 	const { label, options, defaultValue, onChange } = props;
 
 	return (

ui/src/Common/FloatingCharacterCountdown/FloatingCharacterCountdown.tsx

@@ -26,7 +26,9 @@ interface Props {
 	charsAreRunningOutThreshold?: number;
 }
 
-export default function FloatingCharacterCountdown(props: Props): ReactElement {
+export default function FloatingCharacterCountdown(
+	props: Readonly<Props>
+): ReactElement {
 	const {
 		maxCharacterCount = 255,
 		charsAreRunningOutThreshold = 20,

ui/src/Common/Header/Header.tsx

@@ -28,7 +28,7 @@ interface Props {
 	children?: ReactNode;
 }
 
-function Header(props: Props) {
+function Header(props: Readonly<Props>) {
 	const { name, children } = props;
 
 	const retroquestLogo =

ui/src/Common/Input/Input.tsx

@@ -28,7 +28,7 @@ type Props = ComponentPropsWithoutRef<'input'> & {
 	validationMessage?: string;
 };
 
-export default function Input(props: Props): React.ReactElement {
+export default function Input(props: Readonly<Props>): React.ReactElement {
 	const {
 		id,
 		label,

ui/src/Common/InputEmail/InputEmail.tsx

@@ -31,7 +31,7 @@ interface Props {
 
 const EMAIL_REGEX = /^.+@[^@]+$/;
 
-function InputEmail(props: Props) {
+function InputEmail(props: Readonly<Props>) {
 	const {
 		value = '',
 		required = true,

ui/src/Common/InputPassword/InputPassword.tsx

@@ -42,7 +42,7 @@ export function validatePasswordString(password: string): boolean {
 	);
 }
 
-function InputPassword(props: Props) {
+function InputPassword(props: Readonly<Props>) {
 	const {
 		label = 'Password',
 		password,

ui/src/Common/InputTeamName/InputTeamName.tsx

@@ -29,7 +29,7 @@ interface Props {
 
 const TEAM_NAME_REGEX = /^[\w\s]+$/;
 
-function InputTeamName(props: Props) {
+function InputTeamName(props: Readonly<Props>) {
 	const {
 		value = '',
 		required,

ui/src/Common/NotFoundSection/NotFoundSection.tsx

@@ -23,7 +23,7 @@ interface Props {
 	paragraph: ReactElement;
 }
 
-function NotFoundSection(props: Props): React.ReactElement {
+function NotFoundSection(props: Readonly<Props>): React.ReactElement {
 	const { paragraph, subHeader = 'No archives were found.' } = props;
 
 	return (