From 24215fd10b216e3d007cbb38d88c80e73f00a2c3 Mon Sep 17 00:00:00 2001 From: efloden Date: Fri, 16 Feb 2018 16:51:55 +1000 Subject: [PATCH] feat(ZNTA-2392): enforce comment required criteria option disable reject translation button until all requirements met add disabled style to the reject translation button --- .../CriteriaDropdown.js | 22 +++++++-- .../CriteriaDropdown.test.js | 15 +++++- .../RejectTranslationModal/index.css | 6 +++ .../RejectTranslationModal/index.js | 46 ++++++++++++++----- 4 files changed, 72 insertions(+), 17 deletions(-) diff --git a/server/zanata-frontend/src/app/editor/containers/RejectTranslationModal/CriteriaDropdown.js b/server/zanata-frontend/src/app/editor/containers/RejectTranslationModal/CriteriaDropdown.js index d26bb9b8ea..365b1639d9 100644 --- a/server/zanata-frontend/src/app/editor/containers/RejectTranslationModal/CriteriaDropdown.js +++ b/server/zanata-frontend/src/app/editor/containers/RejectTranslationModal/CriteriaDropdown.js @@ -4,6 +4,7 @@ import { Icon } from '../../../components' import * as PropTypes from 'prop-types' import Dropdown from '../../components/Dropdown' import { MINOR, MAJOR, CRITICAL } from '../../utils/reject-trans-util' +import { UNSPECIFIED } from './index' /** * A Local Editor Dropdown coponent that selects the Criteria @@ -17,7 +18,8 @@ class CriteriaDropdown extends Component { priority: PropTypes.oneOf([MINOR, MAJOR, CRITICAL]).isRequired })).isRequired, onCriteriaChange: PropTypes.func.isRequired, - selectedCriteria: PropTypes.string.isRequired + onUnspecifiedCriteria: PropTypes.func.isRequired, + criteriaDescription: PropTypes.string.isRequired } constructor (props) { super(props) @@ -34,24 +36,36 @@ class CriteriaDropdown extends Component { this.props.onCriteriaChange(event) this.toggleDropdown() } + onUnspecifiedCriteria = () => { + this.props.onUnspecifiedCriteria() + this.toggleDropdown() + } render () { - const { criteriaList, selectedCriteria } = this.props + const { criteriaList, criteriaDescription } = this.props const options = criteriaList.map((value, index) => { return ( -
  • {value.description}
    • ) }) + // FIXME: should not be modifying the options array + options.unshift( +
  • + {UNSPECIFIED} +
    • + ) return ( - {selectedCriteria} + {criteriaDescription} diff --git a/server/zanata-frontend/src/app/editor/containers/RejectTranslationModal/CriteriaDropdown.test.js b/server/zanata-frontend/src/app/editor/containers/RejectTranslationModal/CriteriaDropdown.test.js index eeaebf7875..1df28b4911 100644 --- a/server/zanata-frontend/src/app/editor/containers/RejectTranslationModal/CriteriaDropdown.test.js +++ b/server/zanata-frontend/src/app/editor/containers/RejectTranslationModal/CriteriaDropdown.test.js @@ -4,6 +4,7 @@ import CriteriaDropdown from './CriteriaDropdown' import { MINOR, MAJOR, CRITICAL } from '../../utils/reject-trans-util' import { Icon } from '../../../components' import Dropdown from '../../components/Dropdown' +import { UNSPECIFIED } from './index' const defaultClick = () => {} const criteriaList = [{ @@ -21,13 +22,22 @@ const criteriaList = [{ }] const options = criteriaList.map((value, index) => { return ( -
  • {value.description}
    • ) }) + +// FIXME: should not be modifying the options array +options.unshift( +
  • + {UNSPECIFIED} +
    • +) /* global describe it expect */ describe('CriteriaDropdown', () => { it('renders default markup', () => { @@ -35,7 +45,8 @@ describe('CriteriaDropdown', () => { ) const expected = ReactDOMServer.renderToStaticMarkup( diff --git a/server/zanata-frontend/src/app/editor/containers/RejectTranslationModal/index.css b/server/zanata-frontend/src/app/editor/containers/RejectTranslationModal/index.css index fcb09d7919..aa7fec9923 100644 --- a/server/zanata-frontend/src/app/editor/containers/RejectTranslationModal/index.css +++ b/server/zanata-frontend/src/app/editor/containers/RejectTranslationModal/index.css @@ -7,6 +7,7 @@ --TM-text-color: rgb(84, 102, 119); --TM-icon-vert-alignment: middle; --TM-dropdown-text-color: #03a6d7; + --Button-color-neutral: color(#416988 tint(50%)); } #RejectTranslationModal .flex { @@ -85,6 +86,11 @@ visibility: hidden; } +#RejectTranslationModal .EditorButton:disabled { + color: var(--Button-color-text-invert); + background-color: var(--Button-color-neutral); +} + .EditorRejection-input { margin-top: 1rem; padding: 0.75rem; diff --git a/server/zanata-frontend/src/app/editor/containers/RejectTranslationModal/index.js b/server/zanata-frontend/src/app/editor/containers/RejectTranslationModal/index.js index 7038fb0030..725275c794 100644 --- a/server/zanata-frontend/src/app/editor/containers/RejectTranslationModal/index.js +++ b/server/zanata-frontend/src/app/editor/containers/RejectTranslationModal/index.js @@ -15,6 +15,7 @@ import { MINOR, MAJOR, CRITICAL, priorities, textState } from '../../utils/reject-trans-util' +export const UNSPECIFIED = 'Unspecified Criteria' const textLimit = 500 /** @@ -41,11 +42,17 @@ export class RejectTranslationModal extends Component { review: { selectedPriority: MINOR, priorityId: 0, - selectedCriteria: '-- Select a predefined criteria --', + criteriaDescription: '-- Select a predefined criteria --', criteriaId: undefined, reviewComment: '' }, - charsLeft: textLimit + charsLeft: textLimit, + selectedCriteria: { + id: undefined, + editable: false, + description: '', + priority: MINOR + } } constructor (props) { super(props) @@ -62,14 +69,26 @@ export class RejectTranslationModal extends Component { })) } onCriteriaChange = (event) => { - const selectedCriteria = event.target.innerText - const criteriaId = this.props.criteriaList.find( - x => x.description === event.target.innerText).id + const selectedCriteria = this.props.criteriaList.find( + x => x.description === event.target.innerText) this.setState(prevState => ({ review: update(prevState.review, { - selectedCriteria: {$set: selectedCriteria}, - criteriaId: {$set: criteriaId} - }) + criteriaDescription: {$set: selectedCriteria.description}, + criteriaId: {$set: selectedCriteria.id}, + selectedPriority: {$set: selectedCriteria.priority} + }), + selectedCriteria: selectedCriteria + })) + } + onUnspecifiedCriteria = () => { + const unspecifiedCriteria = this.defaultState.selectedCriteria + this.setState(prevState => ({ + review: update(prevState.review, { + criteriaDescription: {$set: UNSPECIFIED}, + criteriaId: {$set: undefined}, + selectedPriority: {$set: unspecifiedCriteria.priority} + }), + selectedCriteria: unspecifiedCriteria })) } setReviewComment = (event) => { @@ -106,7 +125,7 @@ export class RejectTranslationModal extends Component { /* eslint-disable max-len */ render () { const { show, criteriaList } = this.props - const { review } = this.state + const { review, selectedCriteria } = this.state const priorityTextState = textState(review.selectedPriority) const criteriaTile = (!isEmpty(criteriaList)) ?
    @@ -116,13 +135,17 @@ export class RejectTranslationModal extends Component { + onUnspecifiedCriteria={this.onUnspecifiedCriteria} + criteriaDescription={review.criteriaDescription} />
    : undefined + const canReject = ( + (!isEmpty(review.reviewComment)) || + (selectedCriteria.editable === false)) return (