feat: Add search by users, members and labels

client/src/components/Memberships/AddPopup/AddPopup.jsx

@@ -1,15 +1,31 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { withPopup } from '../../../lib/popup';
-import { Popup } from '../../../lib/custom-ui';
+import { Input, Popup } from '../../../lib/custom-ui';
 
+import { useField } from '../../../hooks';
 import UserItem from './UserItem';
 
 import styles from './AddPopup.module.scss';
 
 const AddStep = React.memo(({ users, currentUserIds, title, onCreate, onClose }) => {
   const [t] = useTranslation();
+  const [searchValue, handleSearchFieldChange] = useField('');
+  const search = useMemo(() => searchValue.trim().toLowerCase(), [searchValue]);
+
+  const filteredUsers = useMemo(
+    () =>
+      users.filter(
+        (user) =>
+          user.email.includes(search) ||
+          user.name.toLowerCase().includes(search) ||
+          (user.username && user.username.includes(search)),
+      ),
+    [users, search],
+  );
+
+  const searchField = useRef(null);
 
   const handleUserSelect = useCallback(
     (id) => {
@@ -22,6 +38,10 @@ const AddStep = React.memo(({ users, currentUserIds, title, onCreate, onClose })
     [onCreate, onClose],
   );
 
+  useEffect(() => {
+    searchField.current.focus();
+  }, []);
+
   return (
     <>
       <Popup.Header>
@@ -30,17 +50,27 @@ const AddStep = React.memo(({ users, currentUserIds, title, onCreate, onClose })
         })}
       </Popup.Header>
       <Popup.Content>
-        <div className={styles.menu}>
-          {users.map((user) => (
-            <UserItem
-              key={user.id}
-              name={user.name}
-              avatarUrl={user.avatarUrl}
-              isActive={currentUserIds.includes(user.id)}
-              onSelect={() => handleUserSelect(user.id)}
-            />
-          ))}
-        </div>
+        <Input
+          fluid
+          ref={searchField}
+          value={searchValue}
+          placeholder={t('common.searchUsers')}
+          icon="search"
+          onChange={handleSearchFieldChange}
+        />
+        {filteredUsers.length > 0 && (
+          <div className={styles.users}>
+            {filteredUsers.map((user) => (
+              <UserItem
+                key={user.id}
+                name={user.name}
+                avatarUrl={user.avatarUrl}
+                isActive={currentUserIds.includes(user.id)}
+                onSelect={() => handleUserSelect(user.id)}
+              />
+            ))}
+          </div>
+        )}
       </Popup.Content>
     </>
   );