Merge pull request #648 from ibi-group/mtc-service-alerts-character-count-up

MTC Service Alerts: Change Character limit validation

Author: landonreed

lib/alerts/components/AlertEditor.js

@@ -70,21 +70,14 @@ export default class AlertEditor extends Component<Props> {
 
   validateAndSave = () => {
     const {alert, saveAlert} = this.props
-    const {affectedEntities, description, end, start, title} = alert
+    const {affectedEntities, end, start, title} = alert
     const momentEnd = moment(end)
     const momentStart = moment(start)
 
     // alert title must not be blank nor just whitespace
     if (!title.trim()) {
       return window.alert('You must specify an alert title')
     }
-    // alert title/description must meet character limits (for display purposes)
-    if (title.length > ALERT_TITLE_CHAR_LIMIT) {
-      return window.alert(`Alert title must be ${ALERT_TITLE_CHAR_LIMIT} characters or less`)
-    }
-    if (description && description.length > ALERT_DESCRIPTION_CHAR_LIMIT) {
-      return window.alert(`Alert description must be ${ALERT_DESCRIPTION_CHAR_LIMIT} characters or less`)
-    }
     if (!end || !start || !momentEnd.isValid() || !momentStart.isValid()) {
       return window.alert('Alert must have a valid start and end date')
     }
@@ -146,7 +139,14 @@ export default class AlertEditor extends Component<Props> {
     const descriptionCharactersRemaining = alert.description
       ? ALERT_DESCRIPTION_CHAR_LIMIT - alert.description.length
       : ALERT_DESCRIPTION_CHAR_LIMIT
-    const canPublish = alert.affectedEntities.length &&
+    const titleCharacterCount = alert.title
+      ? alert.title.length
+      : 0
+    const descriptionCharactersCount = alert.description
+      ? alert.description.length
+      : 0
+    const canPublish =
+      alert.affectedEntities.length &&
       checkEntitiesForFeeds(alert.affectedEntities, publishableFeeds)
     const canEdit = checkEntitiesForFeeds(alert.affectedEntities, editableFeeds)
     const editingIsDisabled = alert.published && !canPublish ? true : !canEdit
@@ -221,10 +221,17 @@ export default class AlertEditor extends Component<Props> {
                             : 'text-danger'
                         }
                         style={{fontWeight: 400}}>
-                        {titleCharactersRemaining}
+                        {titleCharacterCount}
                       </span>
                       <h5 style={{margin: '0px'}}>
                         <small>
+                          {titleCharacterCount > ALERT_TITLE_CHAR_LIMIT &&
+                            (
+                              <span className='text-danger'>
+                                WARNING: Alert title longer than {ALERT_TITLE_CHAR_LIMIT} characters may get truncated in some dissemination channels. <br />
+                              </span>
+                            )
+                          }
                           Note: alert title serves as text for eTID alerts. Use
                           descriptive language so it can serve as a standalone
                           alert.
@@ -290,7 +297,7 @@ export default class AlertEditor extends Component<Props> {
                 </Col>
               </Row>
               <Row>
-                <Col xs={12} sm={6}>
+                <Col xs={12}>
                   <FormGroup controlId='formControlsDescription'>
                     <ControlLabel>
                       Description
@@ -302,18 +309,28 @@ export default class AlertEditor extends Component<Props> {
                             : 'text-danger'
                         }
                         style={{fontWeight: 400}}>
-                        {descriptionCharactersRemaining}
+                        {descriptionCharactersCount}
                       </span>
+                      {descriptionCharactersCount > ALERT_DESCRIPTION_CHAR_LIMIT &&
+                        (
+                          <h5 style={{margin: '0px'}}>
+                            <small className='text-danger'>
+                              WARNING: Alert description longer than {ALERT_DESCRIPTION_CHAR_LIMIT} characters may get truncated in some dissemination channels.
+                            </small>
+                          </h5>
+                        )
+                      }
                     </ControlLabel>
                     <FormControl
                       componentClass='textarea'
                       placeholder='Detailed description of alert...'
                       defaultValue={alert.description}
                       name='description'
-                      onChange={this._onChange} />
+                      onChange={this._onChange}
+                      style={{ minHeight: '89px' }} />
                   </FormGroup>
                 </Col>
-                <Col xs={12} sm={6}>
+                <Col xs={12}>
                   <FormGroup controlId='formControlsURL'>
                     <ControlLabel>URL</ControlLabel>
                     <FormControl