diff --git a/client/src/components/BoardActions/BoardActions.jsx b/client/src/components/BoardActions/BoardActions.jsx index 55e84d54..9ab6e473 100644 --- a/client/src/components/BoardActions/BoardActions.jsx +++ b/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, diff --git a/client/src/components/BoardActions/Filters.jsx b/client/src/components/BoardActions/Filters.jsx index 621c735c..6e30946d 100644 --- a/client/src/components/BoardActions/Filters.jsx +++ b/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, diff --git a/client/src/components/LabelsStep/Item.jsx b/client/src/components/LabelsStep/Item.jsx index 43f21599..a462b428 100755 --- a/client/src/components/LabelsStep/Item.jsx +++ b/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 ( -
-
- ); -}); + + ); + }, +); 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, diff --git a/client/src/components/LabelsStep/Item.module.scss b/client/src/components/LabelsStep/Item.module.scss index 03821431..a5ee71d5 100644 --- a/client/src/components/LabelsStep/Item.module.scss +++ b/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; diff --git a/client/src/components/LabelsStep/LabelsStep.jsx b/client/src/components/LabelsStep/LabelsStep.jsx index 3b46feb5..0ee67ce1 100755 --- a/client/src/components/LabelsStep/LabelsStep.jsx +++ b/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( ))} )} -