feat: Permissions for board members

Closes #262
2025-07-27 09:09:46 +02:00 · 2022-08-19 14:00:40 +02:00 · 2022-08-19 14:00:40 +02:00 · f9e0147f33
commit f9e0147f33
parent 281cb4a71b
61 changed files with 1063 additions and 191 deletions
--- a/client/src/components/BoardActions/BoardActions.jsx
+++ b/client/src/components/BoardActions/BoardActions.jsx
@ -3,6 +3,7 @@ import PropTypes from 'prop-types';

 import Filters from './Filters';
 import Memberships from '../Memberships';
+import BoardMembershipPermissionsSelectStep from '../BoardMembershipPermissionsSelectStep';

 import styles from './BoardActions.module.scss';

@ -15,6 +16,7 @@ const BoardActions = React.memo(
    allUsers,
    canEditMemberships,
    onMembershipCreate,
+    onMembershipUpdate,
    onMembershipDelete,
    onUserToFilterAdd,
    onUserFromFilterRemove,
@ -30,8 +32,10 @@ const BoardActions = React.memo(
          <Memberships
            items={memberships}
            allUsers={allUsers}
+            permissionsSelectStep={BoardMembershipPermissionsSelectStep}
            canEdit={canEditMemberships}
            onCreate={onMembershipCreate}
+            onUpdate={onMembershipUpdate}
            onDelete={onMembershipDelete}
          />
        </div>
@ -65,6 +69,7 @@ BoardActions.propTypes = {
  /* eslint-enable react/forbid-prop-types */
  canEditMemberships: PropTypes.bool.isRequired,
  onMembershipCreate: PropTypes.func.isRequired,
+  onMembershipUpdate: PropTypes.func.isRequired,
  onMembershipDelete: PropTypes.func.isRequired,
  onUserToFilterAdd: PropTypes.func.isRequired,
  onUserFromFilterRemove: PropTypes.func.isRequired,
--- a/client/src/components/BoardMembershipPermissionsSelectStep/BoardMembershipPermissionsSelectStep.jsx
+++ b/client/src/components/BoardMembershipPermissionsSelectStep/BoardMembershipPermissionsSelectStep.jsx
@ -0,0 +1,101 @@
+import omit from 'lodash/omit';
+import React, { useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Button, Form, Menu, Radio, Segment } from 'semantic-ui-react';
+import { Popup } from '../../lib/custom-ui';
+
+import { BoardMembershipRoles } from '../../constants/Enums';
+
+import styles from './BoardMembershipPermissionsSelectStep.module.scss';
+
+const BoardMembershipPermissionsSelectStep = React.memo(
+  ({ defaultData, title, buttonContent, onSelect, onBack }) => {
+    const [t] = useTranslation();
+
+    const [data, setData] = useState(() => ({
+      role: BoardMembershipRoles.EDITOR,
+      canComment: null,
+      ...defaultData,
+    }));
+
+    const handleRoleSelectClick = useCallback((role) => {
+      setData((prevData) => ({
+        ...prevData,
+        role,
+        canComment: role === BoardMembershipRoles.EDITOR ? null : !!prevData.canComment,
+      }));
+    }, []);
+
+    const handleSettingChange = useCallback((_, { name: fieldName, checked: value }) => {
+      setData((prevData) => ({
+        ...prevData,
+        [fieldName]: value,
+      }));
+    }, []);
+
+    const handleSubmit = useCallback(() => {
+      onSelect(data.role === BoardMembershipRoles.EDITOR ? omit(data, 'canComment') : data);
+    }, [onSelect, data]);
+
+    return (
+      <>
+        <Popup.Header onBack={onBack}>
+          {t(title, {
+            context: 'title',
+          })}
+        </Popup.Header>
+        <Popup.Content>
+          <Form onSubmit={handleSubmit}>
+            <Menu secondary vertical className={styles.menu}>
+              <Menu.Item
+                active={data.role === BoardMembershipRoles.EDITOR}
+                onClick={() => handleRoleSelectClick(BoardMembershipRoles.EDITOR)}
+              >
+                <div className={styles.menuItemTitle}>{t('common.editor')}</div>
+                <div className={styles.menuItemDescription}>
+                  {t('common.canEditContentOfBoard')}
+                </div>
+              </Menu.Item>
+              <Menu.Item
+                active={data.role === BoardMembershipRoles.VIEWER}
+                onClick={() => handleRoleSelectClick(BoardMembershipRoles.VIEWER)}
+              >
+                <div className={styles.menuItemTitle}>{t('common.viewer')}</div>
+                <div className={styles.menuItemDescription}>{t('common.canOnlyViewBoard')}</div>
+              </Menu.Item>
+            </Menu>
+            {data.role !== BoardMembershipRoles.EDITOR && (
+              <Segment basic className={styles.settings}>
+                <Radio
+                  toggle
+                  name="canComment"
+                  checked={data.canComment}
+                  label={t('common.canComment')}
+                  onChange={handleSettingChange}
+                />
+              </Segment>
+            )}
+            <Button positive content={t(buttonContent)} />
+          </Form>
+        </Popup.Content>
+      </>
+    );
+  },
+);
+
+BoardMembershipPermissionsSelectStep.propTypes = {
+  defaultData: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  title: PropTypes.string,
+  buttonContent: PropTypes.string,
+  onSelect: PropTypes.func.isRequired,
+  onBack: PropTypes.func.isRequired,
+};
+
+BoardMembershipPermissionsSelectStep.defaultProps = {
+  defaultData: undefined,
+  title: 'common.selectPermissions',
+  buttonContent: 'action.selectPermissions',
+};
+
+export default BoardMembershipPermissionsSelectStep;
--- a/client/src/components/BoardMembershipPermissionsSelectStep/BoardMembershipPermissionsSelectStep.module.scss
+++ b/client/src/components/BoardMembershipPermissionsSelectStep/BoardMembershipPermissionsSelectStep.module.scss
@ -0,0 +1,18 @@
+:global(#app) {
+  .menu {
+    margin: 0 auto 8px;
+    width: 100%;
+  }
+
+  .menuItemDescription {
+    opacity: 0.5;
+  }
+
+  .menuItemTitle {
+    margin-bottom: 8px;
+  }
+
+  .settings {
+    margin: 0 0 8px;
+  }
+}
--- a/client/src/components/BoardMembershipPermissionsSelectStep/index.js
+++ b/client/src/components/BoardMembershipPermissionsSelectStep/index.js
@ -0,0 +1,3 @@
+import BoardMembershipPermissionsSelectStep from './BoardMembershipPermissionsSelectStep';
+
+export default BoardMembershipPermissionsSelectStep;
--- a/client/src/components/CardModal/Attachments/Attachments.jsx
+++ b/client/src/components/CardModal/Attachments/Attachments.jsx
@ -13,7 +13,7 @@ import styles from './Attachments.module.scss';
 const INITIALLY_VISIBLE = 4;

 const Attachments = React.memo(
-  ({ items, onUpdate, onDelete, onCoverUpdate, onGalleryOpen, onGalleryClose }) => {
+  ({ items, canEdit, onUpdate, onDelete, onCoverUpdate, onGalleryOpen, onGalleryClose }) => {
    const [t] = useTranslation();
    const [isAllVisible, toggleAllVisible] = useToggle();

@ -99,6 +99,7 @@ const Attachments = React.memo(
                createdAt={item.createdAt}
                isCover={item.isCover}
                isPersisted={item.isPersisted}
+                canEdit={canEdit}
                onClick={item.image || isPdf ? open : undefined}
                onCoverSelect={() => handleCoverSelect(item.id)}
                onCoverDeselect={handleCoverDeselect}
@ -151,6 +152,7 @@ const Attachments = React.memo(

 Attachments.propTypes = {
  items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  canEdit: PropTypes.bool.isRequired,
  onUpdate: PropTypes.func.isRequired,
  onDelete: PropTypes.func.isRequired,
  onCoverUpdate: PropTypes.func.isRequired,
--- a/client/src/components/CardModal/Attachments/Item.jsx
+++ b/client/src/components/CardModal/Attachments/Item.jsx
@ -17,6 +17,7 @@ const Item = React.forwardRef(
      createdAt,
      isCover,
      isPersisted,
+      canEdit,
      onCoverSelect,
      onCoverDeselect,
      onClick,
@ -96,7 +97,7 @@ const Item = React.forwardRef(
              value: createdAt,
            })}
          </span>
-          {coverUrl && (
+          {coverUrl && canEdit && (
            <span className={styles.options}>
              <button type="button" className={styles.option} onClick={handleToggleCoverClick}>
                <Icon
@ -118,17 +119,19 @@ const Item = React.forwardRef(
            </span>
          )}
        </div>
-        <EditPopup
-          defaultData={{
-            name,
-          }}
-          onUpdate={onUpdate}
-          onDelete={onDelete}
-        >
-          <Button className={classNames(styles.button, styles.target)}>
-            <Icon fitted name="pencil" size="small" />
-          </Button>
-        </EditPopup>
+        {canEdit && (
+          <EditPopup
+            defaultData={{
+              name,
+            }}
+            onUpdate={onUpdate}
+            onDelete={onDelete}
+          >
+            <Button className={classNames(styles.button, styles.target)}>
+              <Icon fitted name="pencil" size="small" />
+            </Button>
+          </EditPopup>
+        )}
      </div>
    );
  },
@ -141,6 +144,7 @@ Item.propTypes = {
  createdAt: PropTypes.instanceOf(Date),
  isCover: PropTypes.bool.isRequired,
  isPersisted: PropTypes.bool.isRequired,
+  canEdit: PropTypes.bool.isRequired,
  onClick: PropTypes.func,
  onCoverSelect: PropTypes.func.isRequired,
  onCoverDeselect: PropTypes.func.isRequired,
--- a/client/src/components/CardModal/CardModal.jsx
+++ b/client/src/components/CardModal/CardModal.jsx
@ -48,6 +48,7 @@ const CardModal = React.memo(
    allBoardMemberships,
    allLabels,
    canEdit,
+    canEditCommentActivities,
    canEditAllCommentActivities,
    onUpdate,
    onMove,
@ -302,7 +303,10 @@ const CardModal = React.memo(
                  {canEdit ? (
                    <DescriptionEdit defaultValue={description} onUpdate={handleDescriptionUpdate}>
                      {description ? (
-                        <button type="button" className={styles.descriptionText}>
+                        <button
+                          type="button"
+                          className={classNames(styles.descriptionText, styles.cursorPointer)}
+                        >
                          <Markdown linkStopPropagation linkTarget="_blank">
                            {description}
                          </Markdown>
@ -348,6 +352,7 @@ const CardModal = React.memo(
                  <div className={styles.moduleHeader}>{t('common.attachments')}</div>
                  <Attachments
                    items={attachments}
+                    canEdit={canEdit}
                    onUpdate={onAttachmentUpdate}
                    onDelete={onAttachmentDelete}
                    onCoverUpdate={handleCoverUpdate}
@ -363,7 +368,7 @@ const CardModal = React.memo(
              isAllFetched={isAllActivitiesFetched}
              isDetailsVisible={isActivitiesDetailsVisible}
              isDetailsFetching={isActivitiesDetailsFetching}
-              canEdit={canEdit}
+              canEdit={canEditCommentActivities}
              canEditAllComments={canEditAllCommentActivities}
              onFetch={onActivitiesFetch}
              onDetailsToggle={onActivitiesDetailsToggle}
@ -508,6 +513,7 @@ CardModal.propTypes = {
  allLabels: PropTypes.array.isRequired,
  /* eslint-enable react/forbid-prop-types */
  canEdit: PropTypes.bool.isRequired,
+  canEditCommentActivities: PropTypes.bool.isRequired,
  canEditAllCommentActivities: PropTypes.bool.isRequired,
  onUpdate: PropTypes.func.isRequired,
  onMove: PropTypes.func.isRequired,
--- a/client/src/components/CardModal/CardModal.module.scss
+++ b/client/src/components/CardModal/CardModal.module.scss
@ -64,6 +64,10 @@
    padding: 8px 8px 0 16px;
  }

+  .cursorPointer {
+    cursor: pointer;
+  }
+
  .dueDate {
    background: rgba(9, 30, 66, 0.04);
    border: none;
@ -114,7 +118,6 @@
    background: transparent;
    border: none;
    color: #17394d;
-    cursor: pointer;
    font-size: 15px;
    margin-bottom: 8px;
    outline: none;
--- a/client/src/components/Memberships/ActionsPopup.jsx
+++ b/client/src/components/Memberships/ActionsPopup.jsx
@ -1,3 +1,4 @@
+import pick from 'lodash/pick';
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
@ -11,12 +12,14 @@ import DeleteStep from '../DeleteStep';
 import styles from './ActionsPopup.module.scss';

 const StepTypes = {
+  EDIT_PERMISSIONS: 'EDIT_PERMISSIONS',
  DELETE: 'DELETE',
 };

 const ActionsStep = React.memo(
  ({
-    user,
+    membership,
+    permissionsSelectStep,
    leaveButtonContent,
    leaveConfirmationTitle,
    leaveConfirmationContent,
@ -26,63 +29,115 @@ const ActionsStep = React.memo(
    deleteConfirmationContent,
    deleteConfirmationButtonContent,
    canLeave,
-    canDelete,
+    canEdit,
+    onUpdate,
    onDelete,
+    onClose,
  }) => {
    const [t] = useTranslation();
    const [step, openStep, handleBack] = useSteps();

+    const handleEditPermissionsClick = useCallback(() => {
+      openStep(StepTypes.EDIT_PERMISSIONS);
+    }, [openStep]);
+
    const handleDeleteClick = useCallback(() => {
      openStep(StepTypes.DELETE);
    }, [openStep]);

-    if (step && step.type === StepTypes.DELETE) {
-      return (
-        <DeleteStep
-          title={t(user.isCurrent ? leaveConfirmationTitle : deleteConfirmationTitle, {
-            context: 'title',
-          })}
-          content={t(user.isCurrent ? leaveConfirmationContent : deleteConfirmationContent)}
-          buttonContent={t(
-            user.isCurrent ? leaveConfirmationButtonContent : deleteConfirmationButtonContent,
-          )}
-          onConfirm={onDelete}
-          onBack={handleBack}
-        />
-      );
+    const handleRoleSelect = useCallback(
+      (data) => {
+        if (onUpdate) {
+          onUpdate(data);
+        }
+
+        onClose();
+      },
+      [onUpdate, onClose],
+    );
+
+    if (step) {
+      switch (step.type) {
+        case StepTypes.EDIT_PERMISSIONS: {
+          const PermissionsSelectStep = permissionsSelectStep;
+
+          return (
+            <PermissionsSelectStep
+              defaultData={pick(membership, ['role', 'canComment'])}
+              title="common.editPermissions"
+              buttonContent="action.save"
+              onSelect={handleRoleSelect}
+              onBack={handleBack}
+            />
+          );
+        }
+        case StepTypes.DELETE:
+          return (
+            <DeleteStep
+              title={t(
+                membership.user.isCurrent ? leaveConfirmationTitle : deleteConfirmationTitle,
+                {
+                  context: 'title',
+                },
+              )}
+              content={t(
+                membership.user.isCurrent ? leaveConfirmationContent : deleteConfirmationContent,
+              )}
+              buttonContent={t(
+                membership.user.isCurrent
+                  ? leaveConfirmationButtonContent
+                  : deleteConfirmationButtonContent,
+              )}
+              onConfirm={onDelete}
+              onBack={handleBack}
+            />
+          );
+        default:
+      }
    }

    return (
      <>
        <span className={styles.user}>
-          <User name={user.name} avatarUrl={user.avatarUrl} size="large" />
+          <User name={membership.user.name} avatarUrl={membership.user.avatarUrl} size="large" />
        </span>
        <span className={styles.content}>
-          <div className={styles.name}>{user.name}</div>
-          <div className={styles.email}>{user.email}</div>
-          {user.isCurrent
-            ? canLeave && (
-                <Button
-                  content={t(leaveButtonContent)}
-                  className={styles.deleteButton}
-                  onClick={handleDeleteClick}
-                />
-              )
-            : canDelete && (
-                <Button
-                  content={t(deleteButtonContent)}
-                  className={styles.deleteButton}
-                  onClick={handleDeleteClick}
-                />
-              )}
+          <div className={styles.name}>{membership.user.name}</div>
+          <div className={styles.email}>{membership.user.email}</div>
        </span>
+        {permissionsSelectStep && canEdit && (
+          <Button
+            fluid
+            content={t('action.editPermissions')}
+            className={styles.button}
+            onClick={handleEditPermissionsClick}
+          />
+        )}
+        {membership.user.isCurrent
+          ? canLeave && (
+              <Button
+                fluid
+                content={t(leaveButtonContent)}
+                className={styles.button}
+                onClick={handleDeleteClick}
+              />
+            )
+          : canEdit && (
+              <Button
+                fluid
+                content={t(deleteButtonContent)}
+                className={styles.button}
+                onClick={handleDeleteClick}
+              />
+            )}
      </>
    );
  },
 );

 ActionsStep.propTypes = {
-  user: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  membership: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  permissionsSelectStep: PropTypes.elementType,
  leaveButtonContent: PropTypes.string,
  leaveConfirmationTitle: PropTypes.string,
  leaveConfirmationContent: PropTypes.string,
@ -92,11 +147,14 @@ ActionsStep.propTypes = {
  deleteConfirmationContent: PropTypes.string,
  deleteConfirmationButtonContent: PropTypes.string,
  canLeave: PropTypes.bool.isRequired,
-  canDelete: PropTypes.bool.isRequired,
+  canEdit: PropTypes.bool.isRequired,
+  onUpdate: PropTypes.func,
  onDelete: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
 };

 ActionsStep.defaultProps = {
+  permissionsSelectStep: undefined,
  leaveButtonContent: 'action.leaveBoard',
  leaveConfirmationTitle: 'common.leaveBoard',
  leaveConfirmationContent: 'common.areYouSureYouWantToLeaveBoard',
@ -105,6 +163,7 @@ ActionsStep.defaultProps = {
  deleteConfirmationTitle: 'common.removeMember',
  deleteConfirmationContent: 'common.areYouSureYouWantToRemoveThisMemberFromBoard',
  deleteConfirmationButtonContent: 'action.removeMember',
+  onUpdate: undefined,
 };

 export default withPopup(ActionsStep);
--- a/client/src/components/Memberships/ActionsPopup.module.scss
+++ b/client/src/components/Memberships/ActionsPopup.module.scss
@ -1,28 +1,31 @@
 :global(#app) {
+  .button {
+    background: transparent;
+    box-shadow: none;
+    color: #6b808c;
+    font-weight: normal;
+    margin-top: 8px;
+    padding: 6px 11px;
+    text-align: left;
+    text-decoration: underline;
+    transition: none;
+
+    &:hover {
+      background: rgba(9, 30, 66, 0.08);
+      color: #092d42;
+    }
+  }
+
  .content {
    display: inline-block;
    width: calc(100% - 44px);
  }

-  .deleteButton {
-    background: transparent;
-    box-shadow: none;
-    flex: 0 0 auto;
-    font-weight: normal;
-    margin: 0 0 0 -10px;
-    padding: 11px 10px;
-    text-decoration: underline;
-
-    &:hover {
-      background: #e9e9e9;
-    }
-  }
-
  .email {
    color: #888888;
    font-size: 14px;
    line-height: 1.2;
-    padding: 4px 0 4px 2px;
+    padding: 2px 0 2px 2px;
  }

  .name {
@ -36,7 +39,7 @@
  .user {
    display: inline-block;
    padding-right: 8px;
-    padding-top: 8px;
+    padding-top: 10px;
    vertical-align: top;
  }
 }
--- a/client/src/components/Memberships/AddPopup/AddPopup.jsx
+++ b/client/src/components/Memberships/AddPopup/AddPopup.jsx
@ -4,89 +4,141 @@ import { useTranslation } from 'react-i18next';
 import { withPopup } from '../../../lib/popup';
 import { Input, Popup } from '../../../lib/custom-ui';

-import { useField } from '../../../hooks';
+import { useField, useSteps } 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 StepTypes = {
+  SELECT_PERMISSIONS: 'SELECT_PERMISSIONS',
+};

-  const filteredUsers = useMemo(
-    () =>
-      users.filter(
-        (user) =>
-          user.email.includes(search) ||
-          user.name.toLowerCase().includes(search) ||
-          (user.username && user.username.includes(search)),
-      ),
-    [users, search],
-  );
+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 searchField = useRef(null);
+    const filteredUsers = useMemo(
+      () =>
+        users.filter(
+          (user) =>
+            user.email.includes(search) ||
+            user.name.toLowerCase().includes(search) ||
+            (user.username && user.username.includes(search)),
+        ),
+      [users, search],
+    );

-  const handleUserSelect = useCallback(
-    (id) => {
-      onCreate({
-        userId: id,
-      });
+    const searchField = useRef(null);

-      onClose();
-    },
-    [onCreate, onClose],
-  );
+    const handleUserSelect = useCallback(
+      (id) => {
+        if (permissionsSelectStep) {
+          openStep(StepTypes.SELECT_PERMISSIONS, {
+            userId: id,
+          });
+        } else {
+          onCreate({
+            userId: id,
+          });

-  useEffect(() => {
-    searchField.current.focus();
-  }, []);
+          onClose();
+        }
+      },
+      [permissionsSelectStep, onCreate, onClose, openStep],
+    );

-  return (
-    <>
-      <Popup.Header>
-        {t(title, {
-          context: 'title',
-        })}
-      </Popup.Header>
-      <Popup.Content>
-        <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)}
+    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 (
+              <PermissionsSelectStep
+                buttonContent="action.addMember"
+                onSelect={handleRoleSelect}
+                onBack={handleBack}
              />
-            ))}
-          </div>
-        )}
-      </Popup.Content>
-    </>
-  );
-});
+            );
+          }
+
+          openStep(null);
+
+          break;
+        }
+        default:
+      }
+    }
+
+    return (
+      <>
+        <Popup.Header>
+          {t(title, {
+            context: 'title',
+          })}
+        </Popup.Header>
+        <Popup.Content>
+          <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>
+      </>
+    );
+  },
+);

 AddStep.propTypes = {
  /* eslint-disable react/forbid-prop-types */
  users: PropTypes.array.isRequired,
  currentUserIds: PropTypes.array.isRequired,
  /* eslint-disable react/forbid-prop-types */
+  permissionsSelectStep: PropTypes.elementType,
  title: PropTypes.string,
  onCreate: PropTypes.func.isRequired,
  onClose: PropTypes.func.isRequired,
 };

 AddStep.defaultProps = {
+  permissionsSelectStep: undefined,
  title: 'common.addMember',
 };

--- a/client/src/components/Memberships/Memberships.jsx
+++ b/client/src/components/Memberships/Memberships.jsx
@ -12,6 +12,7 @@ const Memberships = React.memo(
  ({
    items,
    allUsers,
+    permissionsSelectStep,
    addTitle,
    leaveButtonContent,
    leaveConfirmationTitle,
@ -24,6 +25,7 @@ const Memberships = React.memo(
    canEdit,
    canLeaveIfLast,
    onCreate,
+    onUpdate,
    onDelete,
  }) => {
    return (
@ -32,7 +34,8 @@ const Memberships = React.memo(
          {items.map((item) => (
            <span key={item.id} className={styles.user}>
              <ActionsPopup
-                user={item.user}
+                membership={item}
+                permissionsSelectStep={permissionsSelectStep}
                leaveButtonContent={leaveButtonContent}
                leaveConfirmationTitle={leaveConfirmationTitle}
                leaveConfirmationContent={leaveConfirmationContent}
@ -42,7 +45,8 @@ const Memberships = React.memo(
                deleteConfirmationContent={deleteConfirmationContent}
                deleteConfirmationButtonContent={deleteConfirmationButtonContent}
                canLeave={items.length > 1 || canLeaveIfLast}
-                canDelete={canEdit}
+                canEdit={canEdit}
+                onUpdate={(data) => onUpdate(item.id, data)}
                onDelete={() => onDelete(item.id)}
              >
                <User
@ -59,6 +63,7 @@ const Memberships = React.memo(
          <AddPopup
            users={allUsers}
            currentUserIds={items.map((item) => item.user.id)}
+            permissionsSelectStep={permissionsSelectStep}
            title={addTitle}
            onCreate={onCreate}
          >
@ -75,6 +80,7 @@ Memberships.propTypes = {
  items: PropTypes.array.isRequired,
  allUsers: PropTypes.array.isRequired,
  /* eslint-enable react/forbid-prop-types */
+  permissionsSelectStep: PropTypes.elementType,
  addTitle: PropTypes.string,
  leaveButtonContent: PropTypes.string,
  leaveConfirmationTitle: PropTypes.string,
@ -87,10 +93,12 @@ Memberships.propTypes = {
  canEdit: PropTypes.bool,
  canLeaveIfLast: PropTypes.bool,
  onCreate: PropTypes.func.isRequired,
+  onUpdate: PropTypes.func,
  onDelete: PropTypes.func.isRequired,
 };

 Memberships.defaultProps = {
+  permissionsSelectStep: undefined,
  addTitle: undefined,
  leaveButtonContent: undefined,
  leaveConfirmationTitle: undefined,
@ -102,6 +110,7 @@ Memberships.defaultProps = {
  deleteConfirmationButtonContent: undefined,
  canEdit: true,
  canLeaveIfLast: true,
+  onUpdate: undefined,
 };

 export default Memberships;