feat(ZNTA-2392): enforce comment required criteria option

disable reject translation button until all requirements met
add disabled style to the reject translation button

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 (
-        <li key={index}
+        <li key={index + 1}
           className='EditorDropdown-item'
           onClick={this.onCriteriaChange}>
           {value.description}
         </li>
       )
     })
+    // FIXME: should not be modifying the options array
+    options.unshift(
+      <li key={0}
+        className='EditorDropdown-item'
+        onClick={this.onUnspecifiedCriteria}>
+        {UNSPECIFIED}
+      </li>
+    )
     return (
       <Dropdown enabled isOpen={this.state.dropdownOpen}
         onToggle={this.toggleDropdown}
         className='dropdown-menu Criteria'>
         <Dropdown.Button>
           <a className='EditorDropdown-item'>
-            {selectedCriteria}
+            {criteriaDescription}
             <Icon className='n1 u-pullRight' name='chevron-down' />
           </a>
         </Dropdown.Button>

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,21 +22,31 @@ const criteriaList = [{
 }]
 const options = criteriaList.map((value, index) => {
   return (
-    <li key={index}
+    <li key={index + 1}
       className='EditorDropdown-item'
       onClick={defaultClick}>
       {value.description}
     </li>
   )
 })
+
+// FIXME: should not be modifying the options array
+options.unshift(
+  <li key={0}
+    className='EditorDropdown-item'
+    onClick={defaultClick}>
+    {UNSPECIFIED}
+  </li>
+)
 /* global describe it expect */
 describe('CriteriaDropdown', () => {
   it('renders default markup', () => {
     const actual = ReactDOMServer.renderToStaticMarkup(
       <CriteriaDropdown
         criteriaList={criteriaList}
         onCriteriaChange={defaultClick}
-        selectedCriteria='One'
+        onUnspecifiedCriteria={defaultClick}
+        criteriaDescription='One'
       />
     )
     const expected = ReactDOMServer.renderToStaticMarkup(

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;

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))
         ? <div className='flex'>
@@ -116,13 +135,17 @@ export class RejectTranslationModal extends Component {
           <CriteriaDropdown
             criteriaList={criteriaList}
             onCriteriaChange={this.onCriteriaChange}
-            selectedCriteria={review.selectedCriteria} />
+            onUnspecifiedCriteria={this.onUnspecifiedCriteria}
+            criteriaDescription={review.criteriaDescription} />
           <PriorityDropdown
             textState={priorityTextState}
             priority={review.selectedPriority}
             priorityChange={this.onPriorityChange} />
         </div>
         : undefined
+    const canReject = (
+      (!isEmpty(review.reviewComment)) ||
+      (selectedCriteria.editable === false))
     return (
       <Modal show={show}
         onHide={this.onHideResetState}
@@ -157,7 +180,8 @@ export class RejectTranslationModal extends Component {
               </Button>
               <Button
                 className='EditorButton Button--large u-rounded Button--primary'
-                onClick={this.saveTransReview}>
+                onClick={this.saveTransReview}
+                disabled={!canReject}>
                 Reject translation
               </Button>
             </Row>