Page MenuHomePhabricator
Files F3348356

D8141.diff
No OneTemporary
Actions

D8141.diff
View Options

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 UserAvatar from '../../../avatars/user-avatar.react.js';
import Button, { buttonThemes } from '../../../components/button.react.js';
import Dropdown from '../../../components/dropdown.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(<UnsavedChangesModal />);
}, [initialSelectedRole, popModal, pushModal, selectedRole]);
+ const disabledRoleChangeMessage = React.useMemo(() => {
+ const memberIsAdmin = roleIsAdminRole(
+ threadInfo.roles[initialSelectedRole],
+ );
+
+ if (!otherUsersButNoOtherAdminsValue || !memberIsAdmin) {
+ return null;
+ }
+
+ return (
+ <>
+ <div className={css.roleModalDisabled}>
+ <SWMansionIcon
+ icon="info-circle"
+ size={36}
+ className={css.infoIcon}
+ />
+ <div className={css.infoText}>
+ There must be at least one admin at any given time in a community.
+ </div>
+ </div>
+ </>
+ );
+ }, [initialSelectedRole, otherUsersButNoOtherAdminsValue, threadInfo.roles]);
+
const onSave = React.useCallback(() => {
if (selectedRole === initialSelectedRole) {
popModal();
@@ -102,8 +134,10 @@
options={roleOptions}
activeSelection={selectedRole}
setActiveSelection={setSelectedRole}
+ disabled={!!disabledRoleChangeMessage}
/>
</div>
+ {disabledRoleChangeMessage}
<div className={css.roleModalActionButtons}>
<Button
variant="outline"
@@ -117,6 +151,7 @@
className={css.roleModalSaveButton}
buttonColor={buttonThemes.primary}
onClick={onSave}
+ disabled={!!disabledRoleChangeMessage}
>
Save
</Button>
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -235,5 +235,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);
}

File Metadata

Mime Type
text/plain
Expires
Sat, Nov 23, 2:34 PM (20 h, 4 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2571179
Default Alt Text
D8141.diff (4 KB)

Event Timeline