diff --git a/web/modals/threads/members/change-member-role-modal.css b/web/modals/threads/members/change-member-role-modal.css --- a/web/modals/threads/members/change-member-role-modal.css +++ b/web/modals/threads/members/change-member-role-modal.css @@ -48,3 +48,27 @@ .roleModalBackButton { padding: 14px 32px; } + +.roleModalDisabled { + color: var(--change-member-role-modal-description-text); + background-color: var(--change-member-role-modal-disabled-background); + padding: 8px; + width: 73%; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + margin: 0 auto; + border-radius: 10px; + margin-bottom: 20px; +} + +.infoIcon { + margin-right: 4px; + margin-bottom: 12px; +} + +.infoText { + font-size: var(--s-font-14); + padding: 4px; +} diff --git a/web/modals/threads/members/change-member-role-modal.react.js b/web/modals/threads/members/change-member-role-modal.react.js --- a/web/modals/threads/members/change-member-role-modal.react.js +++ b/web/modals/threads/members/change-member-role-modal.react.js @@ -8,6 +8,9 @@ changeThreadMemberRolesActionTypes, } from 'lib/actions/thread-actions.js'; import { useModalContext } from 'lib/components/modal-provider.react.js'; +import SWMansionIcon from 'lib/components/SWMansionIcon.react.js'; +import { otherUsersButNoOtherAdmins } from 'lib/selectors/thread-selectors.js'; +import { roleIsAdminRole } from 'lib/shared/thread-utils.js'; import type { RelativeMemberInfo, ThreadInfo } from 'lib/types/thread-types'; import { useDispatchActionPromise, @@ -19,6 +22,7 @@ import Button, { buttonThemes } from '../../../components/button.react.js'; import Dropdown from '../../../components/dropdown.react.js'; import UserAvatar from '../../../components/user-avatar.react.js'; +import { useSelector } from '../../../redux/redux-utils.js'; import Modal from '../../modal.react.js'; import UnsavedChangesModal from '../../unsaved-changes-modal.react.js'; @@ -32,6 +36,9 @@ const { pushModal, popModal } = useModalContext(); const dispatchActionPromise = useDispatchActionPromise(); const callChangeThreadMemberRoles = useServerCall(changeThreadMemberRoles); + const otherUsersButNoOtherAdminsValue = useSelector( + otherUsersButNoOtherAdmins(threadInfo.id), + ); const roleOptions = React.useMemo( () => @@ -56,6 +63,31 @@ pushModal(); }, [initialSelectedRole, popModal, pushModal, selectedRole]); + const disabledRoleChangeMessage = React.useMemo(() => { + const memberIsAdmin = roleIsAdminRole( + threadInfo.roles[initialSelectedRole], + ); + + if (!otherUsersButNoOtherAdminsValue || !memberIsAdmin) { + return null; + } + + return ( + <> +
+ +
+ There must be at least one admin at any given time in a community. +
+
+ + ); + }, [initialSelectedRole, otherUsersButNoOtherAdminsValue, threadInfo.roles]); + const onSave = React.useCallback(() => { if (selectedRole === initialSelectedRole) { popModal(); @@ -102,8 +134,10 @@ options={roleOptions} activeSelection={selectedRole} setActiveSelection={setSelectedRole} + disabled={!!disabledRoleChangeMessage} /> + {disabledRoleChangeMessage}
diff --git a/web/theme.css b/web/theme.css --- a/web/theme.css +++ b/web/theme.css @@ -234,5 +234,6 @@ --dropdown-disabled-color: var(--shades-black-60); --change-member-role-modal-description-text: var(--shades-white-60); --change-member-role-modal-generic-text: var(--shades-white-100); + --change-member-role-modal-disabled-background: var(--shades-black-80); --unsaved-changes-modal-text-color: var(--shades-white-60); }