feat(Labels): create new labels

miles-grant-ibigroup · miles-grant-ibigroup · commit ccb4afb29e4c · 2021-07-21T13:28:33.000-04:00
diff --git a/lib/common/components/FeedLabel.js b/lib/common/components/FeedLabel.js
@@ -16,7 +16,7 @@ const getComplementaryColor = (cssHex, strength) => {
 
 export default class FeedLabel extends React.Component {
   _onConfirmDelete = () => {
-    this.props.deleteLabel(this.props)
+    this.props.deleteLabel(this.props.label)
   }
 
   _onClickDelete = () => {
@@ -35,7 +35,7 @@ export default class FeedLabel extends React.Component {
         className={`feedLabel ${small ? 'small' : ''}`}
         style={{
           backgroundColor: label.color,
-          color: getComplementaryColor(label.color, 40),
+          color: getComplementaryColor(label.color, 55),
           borderColor: getComplementaryColor(label.color, 10)
         }}
         title={label.description}
diff --git a/lib/manager/actions/labels.js b/lib/manager/actions/labels.js
@@ -15,9 +15,11 @@ const LABEL_URL = '/api/manager/secure/label'
  */
 export function createLabel (label: Label) {
   return function (dispatch: dispatchFn, getState: getStateFn) {
+    console.log('createlabel')
+    console.log(label)
     return dispatch(secureFetch(LABEL_URL, 'post', label))
-      .then((res) => res.json())
-      .then((createdLabel) => {
+      .then(async (res) => {
+        const createdLabel = await res.json()
         dispatch(fetchProject(createdLabel.projectId))
         dispatch(fetchProjectFeeds(createdLabel.projectId))
       })
diff --git a/lib/manager/components/LabelEditor.js b/lib/manager/components/LabelEditor.js
@@ -30,9 +30,13 @@ export default class LabelEditor extends React.Component {
 
     componentDidMount = () => {
       // If we didn't get a label passed in, declare the label to be new
-      if (!this.props.label) {
+      if (Object.keys(this.props.label).length === 0) {
         this.setState({
-          labelIsNew: true
+          labelIsNew: true,
+          // Default to a nice orange
+          newLabel: {
+            color: '#FF9200'
+          }
         })
       }
     }
@@ -47,23 +51,24 @@ export default class LabelEditor extends React.Component {
     const {name, value, type, checked} = target
 
     const universalValue = type === 'checkbox' ? checked : value
-    const valid = alwaysValid || universalValue.length
+    const valid = alwaysValid || universalValue.length > 0
 
     this.setState(
       update(this.state, {
         newLabel: { $merge: {[name]: universalValue} },
-        validation: { [name]: { $set: universalValue !== undefined && valid } }
+        validation: { [name]: { $set: universalValue && valid } }
       })
     )
   }
 
   _getChanges = () => {
     const newLabel = this.state.newLabel
-    const oldLabel = this.props.label || {}
+    const oldLabel = this.props.label
+
     const changes: any = {}
-    Object.keys(oldLabel).map(k => {
-      if (oldLabel[k] !== newLabel[k]) {
-        changes[k] = oldLabel[k]
+    Object.keys(newLabel).map(k => {
+      if (newLabel[k] !== oldLabel[k]) {
+        changes[k] = newLabel[k]
       }
     })
     return changes
@@ -80,6 +85,8 @@ export default class LabelEditor extends React.Component {
     const {createLabel, updateLabel} = this.props
 
     if (labelIsNew) {
+      // Insert project ID
+      label.projectId = this.props.projectId
       createLabel(label)
     } else {
       updateLabel(label)
diff --git a/lib/manager/components/LabelEditorModal.js b/lib/manager/components/LabelEditorModal.js
@@ -8,6 +8,7 @@ import type {Label} from '../../types'
 
 type LabelEditorModalProps = {
     label?: Label,
+    projectId?: String
   }
 
   type LabelEditorModalState = {
@@ -37,15 +38,16 @@ export default class LabelEditorModal extends React.Component<LabelEditorModalPr
 
     render () {
       const {Body, Header, Title} = Modal
-      const {label} = this.props
+      const label = this.props.label || {}
+      const { projectId } = this.props
       return (
         <Modal show={this.state.showModal} onHide={this.close}>
           <Header>
             <Title>Editing {label.name ? 'Label' : 'New Label'}</Title>
           </Header>
 
           <Body>
-            <LabelEditor label={label} onDone={this.close} />
+            <LabelEditor label={label} onDone={this.close} projectId={projectId} />
           </Body>
         </Modal>
       )
diff --git a/lib/manager/components/ProjectViewer.js b/lib/manager/components/ProjectViewer.js
@@ -32,6 +32,7 @@ import type {Props as ContainerProps} from '../containers/ActiveProjectViewer'
 import type {Feed, Project} from '../../types'
 import type {ManagerUserState} from '../../types/reducers'
 
+import LabelEditorModal from './LabelEditorModal'
 import CreateFeedSource from './CreateFeedSource'
 import ProjectSettings from './ProjectSettings'
 
@@ -308,23 +309,28 @@ class ProjectSummaryPanel extends Component<{feedSources: Array<Feed>, project:
   }
 }
 
-const LabelPanel = ({ project }) => {
-  const { labels } = project
+class LabelPanel extends Component<{project: Project}> {
+  _onClickNewLabel = () => this.refs.newLabelModal.open()
+  render () {
+    const { labels, id: projectId } = this.props.project
 
-  let labelBody = 'There are no labels in this project.'
-  if (labels.length > 0) {
-    labelBody = labels.map((label) => (
-      <FeedLabel key={label.id} label={label} />
-    ))
-  }
+    let labelBody = 'There are no labels in this project.'
+    if (labels.length > 0) {
+      labelBody = labels.map((label) => (
+        <FeedLabel key={label.id} label={label} />
+      ))
+    }
 
-  return (
-    <Panel header={<h3>Labels</h3>}>
-      <div className='feedLabelContainer'>
-        {labelBody}
-      </div>
-    </Panel>
-  )
+    return (
+      <Panel header={<h3>Labels</h3>}>
+        <div className='feedLabelContainer'>
+          <LabelEditorModal ref='newLabelModal' projectId={projectId} />
+          <button className='newLabel' onClick={this._onClickNewLabel}>Add a new label</button>
+          {labelBody}
+        </div>
+      </Panel>
+    )
+  }
 }
 
 const ExplanatoryPanel = ({ project }) => {
diff --git a/lib/style.css b/lib/style.css
@@ -191,7 +191,11 @@ td.feed-source-info {
   padding: 0;
 }
 
-/* Delete Button */
+.feedLabel .labelName i {
+  padding-right: 2px;
+}
+
+/* Label Buttons */
 .feedLabel .actionButtons {
   display: flex;
   align-items: flex-end;
@@ -207,6 +211,19 @@ td.feed-source-info {
   opacity: 1;
 }
 
+/* New Label "button" */
+.newLabel {
+  background: none;
+  border: none;
+  margin: 0 0 10px 0;
+  padding: 0;
+  color: #337ab7;
+  text-decoration: none;
+}
+.newLabel:hover {
+  text-decoration: underline;
+}
+
 /* Feed transformation substitution styling */
 .substitution-row td {
   border-top: none;
