Page MenuHomePhabricator
Files F3357538

D3876.diff
No OneTemporary
Actions

D3876.diff
View Options

diff --git a/web/modals/threads/members/add-members-modal.react.js b/web/modals/threads/members/add-members-modal.react.js
--- a/web/modals/threads/members/add-members-modal.react.js
+++ b/web/modals/threads/members/add-members-modal.react.js
@@ -19,6 +19,7 @@
} from 'lib/utils/action-utils';
import Button from '../../../components/button.react';
+import Label from '../../../components/label.react';
import { useSelector } from '../../../redux/redux-utils';
import SearchModal from '../../search-modal.react';
import AddMembersList from './add-members-list.react';
@@ -48,8 +49,11 @@
const otherUserInfos = useSelector(userInfoSelectorForPotentialMembers);
const userSearchIndex = useSelector(userSearchIndexForPotentialMembers);
const excludeUserIDs = React.useMemo(
- () => threadActualMembers(threadInfo.members),
- [threadInfo.members],
+ () =>
+ threadActualMembers(threadInfo.members).concat(
+ Array.from(pendingUsersToAdd),
+ ),
+ [pendingUsersToAdd, threadInfo.members],
);
const userSearchResults = React.useMemo(
@@ -108,8 +112,32 @@
threadID,
]);
+ const pendingUsersWithNames = React.useMemo(
+ () =>
+ Array.from(pendingUsersToAdd)
+ .map(userID => [userID, otherUserInfos[userID].username])
+ .sort((a, b) => a[1].localeCompare(b[1])),
+ [otherUserInfos, pendingUsersToAdd],
+ );
+
+ const labelItems = React.useMemo(() => {
+ if (!pendingUsersWithNames.length) {
+ return null;
+ }
+ return (
+ <div className={css.addMembersPendingList}>
+ {pendingUsersWithNames.map(([userID, username]) => (
+ <Label key={userID} onClose={() => onSwitchUser(userID)}>
+ {username}
+ </Label>
+ ))}
+ </div>
+ );
+ }, [onSwitchUser, pendingUsersWithNames]);
+
return (
<div className={css.addMembersContent}>
+ {labelItems}
<div className={css.addMembersListContainer}>
<AddMembersList
userListItems={userSearchResults}
diff --git a/web/modals/threads/members/members-modal.css b/web/modals/threads/members/members-modal.css
--- a/web/modals/threads/members/members-modal.css
+++ b/web/modals/threads/members/members-modal.css
@@ -68,11 +68,18 @@
flex-direction: column;
overflow: auto;
color: var(--fg);
- row-gap: 16px;
width: 383px;
height: 617px;
}
+div.addMembersPendingList {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 6px;
+ padding: 8px;
+}
+
div.addMembersListContainer {
overflow: auto;
flex: 1;
@@ -82,6 +89,7 @@
display: flex;
justify-content: end;
column-gap: 16px;
+ margin-top: 16px;
}
div.addMemberItemsGroupHeader {

File Metadata

Mime Type
text/plain
Expires
Mon, Nov 25, 12:09 AM (19 h, 57 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2577762
Default Alt Text
D3876.diff (2 KB)

Event Timeline