fix: Hide label actions based on role

client/src/components/BoardActions/BoardActions.jsx

@@ -14,6 +14,7 @@ const BoardActions = React.memo(
     filterUsers,
     filterLabels,
     allUsers,
+    canEdit,
     canEditMemberships,
     onMembershipCreate,
     onMembershipUpdate,
@@ -45,6 +46,7 @@ const BoardActions = React.memo(
             labels={filterLabels}
             allBoardMemberships={memberships}
             allLabels={labels}
+            canEdit={canEdit}
             onUserAdd={onUserToFilterAdd}
             onUserRemove={onUserFromFilterRemove}
             onLabelAdd={onLabelToFilterAdd}
@@ -67,6 +69,7 @@ BoardActions.propTypes = {
   filterLabels: PropTypes.array.isRequired,
   allUsers: PropTypes.array.isRequired,
   /* eslint-enable react/forbid-prop-types */
+  canEdit: PropTypes.bool.isRequired,
   canEditMemberships: PropTypes.bool.isRequired,
   onMembershipCreate: PropTypes.func.isRequired,
   onMembershipUpdate: PropTypes.func.isRequired,

client/src/components/BoardActions/Filters.jsx

@@ -15,6 +15,7 @@ const Filters = React.memo(
     labels,
     allBoardMemberships,
     allLabels,
+    canEdit,
     onUserAdd,
     onUserRemove,
     onLabelAdd,
@@ -74,6 +75,7 @@ const Filters = React.memo(
             title={t('common.filterByLabels', {
               context: 'title',
             })}
+            canEdit={canEdit}
             onSelect={onLabelAdd}
             onDeselect={onLabelRemove}
             onCreate={onLabelCreate}
@@ -108,6 +110,7 @@ Filters.propTypes = {
   allBoardMemberships: PropTypes.array.isRequired,
   allLabels: PropTypes.array.isRequired,
   /* eslint-enable react/forbid-prop-types */
+  canEdit: PropTypes.bool.isRequired,
   onUserAdd: PropTypes.func.isRequired,
   onUserRemove: PropTypes.func.isRequired,
   onLabelAdd: PropTypes.func.isRequired,

client/src/components/LabelsStep/Item.jsx

@@ -8,45 +8,51 @@ import { Button } from 'semantic-ui-react';
 import styles from './Item.module.scss';
 import globalStyles from '../../styles.module.scss';
 
-const Item = React.memo(({ name, color, isPersisted, isActive, onSelect, onDeselect, onEdit }) => {
-  const handleToggleClick = useCallback(() => {
-    if (isActive) {
-      onDeselect();
-    } else {
-      onSelect();
-    }
-  }, [isActive, onSelect, onDeselect]);
+const Item = React.memo(
+  ({ name, color, isPersisted, isActive, canEdit, onSelect, onDeselect, onEdit }) => {
+    const handleToggleClick = useCallback(() => {
+      if (isActive) {
+        onDeselect();
+      } else {
+        onSelect();
+      }
+    }, [isActive, onSelect, onDeselect]);
 
-  return (
-    <div className={styles.wrapper}>
-      <Button
-        fluid
-        content={name}
-        active={isActive}
-        disabled={!isPersisted}
-        className={classNames(
-          styles.labelButton,
-          isActive && styles.labelButtonActive,
-          globalStyles[`background${upperFirst(camelCase(color))}`],
+    return (
+      <div className={styles.wrapper}>
+        <Button
+          fluid
+          content={name}
+          active={isActive}
+          disabled={!isPersisted}
+          className={classNames(
+            styles.labelButton,
+            isActive && styles.labelButtonActive,
+            globalStyles[`background${upperFirst(camelCase(color))}`],
+          )}
+          onClick={handleToggleClick}
+        />
+        {canEdit && (
+          <Button
+            icon="pencil"
+            size="small"
+            floated="right"
+            disabled={!isPersisted}
+            className={styles.editButton}
+            onClick={onEdit}
+          />
         )}
-        onClick={handleToggleClick}
-      />
-      <Button
-        icon="pencil"
-        size="small"
-        disabled={!isPersisted}
-        className={styles.editButton}
-        onClick={onEdit}
-      />
-    </div>
-  );
-});
+      </div>
+    );
+  },
+);
 
 Item.propTypes = {
   name: PropTypes.string,
   color: PropTypes.string.isRequired,
   isPersisted: PropTypes.bool.isRequired,
   isActive: PropTypes.bool.isRequired,
+  canEdit: PropTypes.bool.isRequired,
   onSelect: PropTypes.func.isRequired,
   onDeselect: PropTypes.func.isRequired,
   onEdit: PropTypes.func.isRequired,

client/src/components/LabelsStep/Item.module.scss

@@ -4,7 +4,6 @@
     box-shadow: none;
     flex: 0 0 auto;
     font-weight: normal;
-    margin: 0;
     padding: 8px 10px;
     text-decoration: underline;
 
@@ -18,6 +17,7 @@
     flex: 1 1 auto;
     font-size: 14px;
     font-weight: bold;
+    margin-right: 0;
     overflow: hidden;
     padding: 8px 32px 8px 10px;
     position: relative;

client/src/components/LabelsStep/LabelsStep.jsx

@@ -18,7 +18,18 @@ const StepTypes = {
 };
 
 const LabelsStep = React.memo(
-  ({ items, currentIds, title, onSelect, onDeselect, onCreate, onUpdate, onDelete, onBack }) => {
+  ({
+    items,
+    currentIds,
+    title,
+    canEdit,
+    onSelect,
+    onDeselect,
+    onCreate,
+    onUpdate,
+    onDelete,
+    onBack,
+  }) => {
     const [t] = useTranslation();
     const [step, openStep, handleBack] = useSteps();
     const [search, handleSearchChange] = useField('');
@@ -140,6 +151,7 @@ const LabelsStep = React.memo(
                   color={item.color}
                   isPersisted={item.isPersisted}
                   isActive={currentIds.includes(item.id)}
+                  canEdit={canEdit}
                   onSelect={() => handleSelect(item.id)}
                   onDeselect={() => handleDeselect(item.id)}
                   onEdit={() => handleEdit(item.id)}
@@ -147,12 +159,14 @@ const LabelsStep = React.memo(
               ))}
             </div>
           )}
-          <Button
-            fluid
-            content={t('action.createNewLabel')}
-            className={styles.addButton}
-            onClick={handleAddClick}
-          />
+          {canEdit && (
+            <Button
+              fluid
+              content={t('action.createNewLabel')}
+              className={styles.addButton}
+              onClick={handleAddClick}
+            />
+          )}
         </Popup.Content>
       </>
     );
@@ -165,6 +179,7 @@ LabelsStep.propTypes = {
   currentIds: PropTypes.array.isRequired,
   /* eslint-enable react/forbid-prop-types */
   title: PropTypes.string,
+  canEdit: PropTypes.bool,
   onSelect: PropTypes.func.isRequired,
   onDeselect: PropTypes.func.isRequired,
   onCreate: PropTypes.func.isRequired,
@@ -175,6 +190,7 @@ LabelsStep.propTypes = {
 
 LabelsStep.defaultProps = {
   title: 'common.labels',
+  canEdit: true,
   onBack: undefined,
 };
 

client/src/containers/BoardActionsContainer.js

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 
 import selectors from '../selectors';
 import entryActions from '../entry-actions';
+import { BoardMembershipRoles } from '../constants/Enums';
 import BoardActions from '../components/BoardActions';
 
 const mapStateToProps = (state) => {
@@ -12,6 +13,7 @@ const mapStateToProps = (state) => {
   const labels = selectors.selectLabelsForCurrentBoard(state);
   const filterUsers = selectors.selectFilterUsersForCurrentBoard(state);
   const filterLabels = selectors.selectFilterLabelsForCurrentBoard(state);
+  const currentUserMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
 
   return {
     memberships,
@@ -19,6 +21,7 @@ const mapStateToProps = (state) => {
     filterUsers,
     filterLabels,
     allUsers,
+    canEdit: !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR,
     canEditMemberships: isCurrentUserManager,
   };
 };