Page MenuHomePhabricator
Files F3489045

D4309.id13624.diff
No OneTemporary
Actions

D4309.id13624.diff
View Options

diff --git a/web/settings/relationship/add-users-list.css b/web/settings/relationship/add-users-list.css
--- a/web/settings/relationship/add-users-list.css
+++ b/web/settings/relationship/add-users-list.css
@@ -1,10 +1,22 @@
.container {
- overflow: auto;
height: 580px;
display: flex;
flex-direction: column;
}
+.userTagsContainer {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+}
+
+.userRowsContainer {
+ overflow: auto;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+}
+
.addUserButton {
display: flex;
flex-direction: row;
diff --git a/web/settings/relationship/add-users-list.react.js b/web/settings/relationship/add-users-list.react.js
--- a/web/settings/relationship/add-users-list.react.js
+++ b/web/settings/relationship/add-users-list.react.js
@@ -8,6 +8,7 @@
import type { GlobalAccountUserInfo } from 'lib/types/user-types.js';
import { useServerCall } from 'lib/utils/action-utils.js';
+import Label from '../../components/label.react.js';
import { useSelector } from '../../redux/redux-utils.js';
import AddUsersListItem from './add-users-list-item.react.js';
import css from './add-users-list.css';
@@ -110,11 +111,36 @@
},
[mergedUserInfos],
);
+ const deselectUser = React.useCallback(
+ (userID: string) =>
+ setPendingUsersToAdd(pendingUsers => {
+ const filteredPendingUsers = pendingUsers.filter(
+ userInfo => userInfo.id !== userID,
+ );
+ if (filteredPendingUsers.length !== pendingUsers.length) {
+ return filteredPendingUsers;
+ }
+ return pendingUsers;
+ }),
+ [],
+ );
const pendingUserIDs = React.useMemo(
() => new Set(pendingUsersToAdd.map(userInfo => userInfo.id)),
[pendingUsersToAdd],
);
+ const userTags = React.useMemo(() => {
+ if (pendingUsersToAdd.length === 0) {
+ return null;
+ }
+ const tags = pendingUsersToAdd.map(userInfo => (
+ <Label key={userInfo.id} onClose={() => deselectUser(userInfo.id)}>
+ {userInfo.username}
+ </Label>
+ ));
+ return <div className={css.userTagsContainer}>{tags}</div>;
+ }, [deselectUser, pendingUsersToAdd]);
+
const filteredUsers = React.useMemo(
() => sortedUsers.filter(userInfo => !pendingUserIDs.has(userInfo.id)),
[pendingUserIDs, sortedUsers],
@@ -131,7 +157,12 @@
)),
[filteredUsers, selectUser],
);
- return <div className={css.container}>{userRows}</div>;
+ return (
+ <div className={css.container}>
+ {userTags}
+ <div className={css.userRowsContainer}>{userRows}</div>
+ </div>
+ );
}
export default AddUsersList;

File Metadata

Mime Type
text/plain
Expires
Thu, Dec 19, 11:15 AM (20 h, 13 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2677138
Default Alt Text
D4309.id13624.diff (2 KB)

Event Timeline