feat(Labels): add label descriptions

miles-grant-ibigroup · miles-grant-ibigroup · commit 350c6a1d9b4e · 2021-07-21T12:33:52.000-04:00
diff --git a/lib/common/components/FeedLabel.js b/lib/common/components/FeedLabel.js
@@ -38,6 +38,7 @@ export default class FeedLabel extends React.Component {
           color: getComplementaryColor(label.color, 40),
           borderColor: getComplementaryColor(label.color, 10)
         }}
+        title={label.description}
       >
 
         <div className='labelName'>
diff --git a/lib/manager/components/LabelEditor.js b/lib/manager/components/LabelEditor.js
@@ -22,7 +22,8 @@ import type {ManagerUserState} from '../../types/reducers'
 export default class LabelEditor extends React.Component {
     state = {
       validation: {
-        name: true
+        name: true,
+        description: true
       },
       newLabel: {...this.props.label}
     }
@@ -42,10 +43,11 @@ export default class LabelEditor extends React.Component {
       else return permissions.isApplicationAdmin() || permissions.canAdministerAnOrganization()
     }
 
-  _onFormChange = ({target}: {target: HTMLInputElement}) => {
+  _onFormChange = ({target}: {target: HTMLInputElement}, alwaysValid: Boolean) => {
     const {name, value, type, checked} = target
+
     const universalValue = type === 'checkbox' ? checked : value
-    const valid = type === 'checkbox' ? true : universalValue.length > 0
+    const valid = alwaysValid || universalValue.length
 
     this.setState(
       update(this.state, {
@@ -110,6 +112,17 @@ export default class LabelEditor extends React.Component {
               <FormControl.Feedback />
               <HelpBlock>Required.</HelpBlock>
             </FormGroup>
+            <FormGroup
+              data-test-id='label-description'
+            >
+              <ControlLabel>Description</ControlLabel>
+              <FormControl
+                value={newLabel.description}
+                name={'description'}
+                onChange={e => this._onFormChange(e, true)}
+              />
+              <FormControl.Feedback />
+            </FormGroup>
           </ListGroupItem>
           <ListGroupItem>
             <Row>
@@ -139,7 +152,7 @@ export default class LabelEditor extends React.Component {
                           checked={newLabel.adminOnly}
                           name={'adminOnly'}
                           type='checkbox'
-                          onChange={this._onFormChange}
+                          onChange={e => this._onFormChange(e, true)}
                         />
                       </Col>
                       <Col xs={9}>

Original file line number	Diff line number	Diff line change
`@@ -38,6 +38,7 @@ export default class FeedLabel extends React.Component {`
`38`	`38`	`color: getComplementaryColor(label.color, 40),`
`39`	`39`	`borderColor: getComplementaryColor(label.color, 10)`
`40`	`40`	`}}`
	`41`	`+ title={label.description}`
`41`	`42`	`>`
`42`	`43`
`43`	`44`	`<div className='labelName'>`