- {filteredUsers.map((user) => (
-
handleUserSelect(user.id)}
+const StepTypes = {
+ SELECT_PERMISSIONS: 'SELECT_PERMISSIONS',
+};
+
+const AddStep = React.memo(
+ ({ users, currentUserIds, permissionsSelectStep, title, onCreate, onClose }) => {
+ const [t] = useTranslation();
+ const [step, openStep, handleBack] = useSteps();
+ 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) => {
+ if (permissionsSelectStep) {
+ openStep(StepTypes.SELECT_PERMISSIONS, {
+ userId: id,
+ });
+ } else {
+ onCreate({
+ userId: id,
+ });
+
+ onClose();
+ }
+ },
+ [permissionsSelectStep, onCreate, onClose, openStep],
+ );
+
+ const handleRoleSelect = useCallback(
+ (data) => {
+ onCreate({
+ userId: step.params.userId,
+ ...data,
+ });
+
+ onClose();
+ },
+ [onCreate, onClose, step],
+ );
+
+ useEffect(() => {
+ searchField.current.focus();
+ }, []);
+
+ if (step) {
+ switch (step.type) {
+ case StepTypes.SELECT_PERMISSIONS: {
+ const currentUser = users.find((user) => user.id === step.params.userId);
+
+ if (currentUser) {
+ const PermissionsSelectStep = permissionsSelectStep;
+
+ return (
+
- ))}
-