feat(Labels): add label assigner

miles-grant-ibigroup · miles-grant-ibigroup · commit c03d86891f64 · 2021-07-21T15:59:49.000-04:00
diff --git a/lib/common/components/FeedLabel.js b/lib/common/components/FeedLabel.js
@@ -28,20 +28,31 @@ export default class FeedLabel extends React.Component {
   }
 
   render () {
-    const {small, label} = this.props
+    const {small, label, checked, onClick} = this.props
 
     return (
       <div
-        className={`feedLabel ${small ? 'small' : ''}`}
+        className={`feedLabel ${small ? 'small' : ''} ${checked !== undefined ? 'clickable' : ''}`}
         style={{
           backgroundColor: label.color,
           color: getComplementaryColor(label.color, 55),
           borderColor: getComplementaryColor(label.color, 10)
         }}
         title={label.description}
+
+        onClick={() => onClick(label.id)}
+        onKeyPress={() => onClick(label.id)}
+        role='checkbox'
+        aria-checked={checked}
+        tabIndex={0}
       >
 
         <div className='labelName'>
+          {checked !== undefined
+            ? <div className='actionButtons'>
+              <input type='checkbox' checked={checked} />
+            </div>
+            : ''}
           {label.adminOnly ? <Icon type='lock' /> : ''}
           <span>{label.name}</span>
         </div>
diff --git a/lib/manager/actions/feeds.js b/lib/manager/actions/feeds.js
@@ -8,6 +8,7 @@ import {isModuleEnabled} from '../../common/util/config'
 import {fetchSnapshots} from '../../editor/actions/snapshots'
 import type {Feed, NewFeed} from '../../types'
 import type {dispatchFn, getStateFn} from '../../types/reducers'
+import { stringifyLabels } from '../util'
 
 import {fetchFeedSourceDeployments} from './deployments'
 import {fetchProject, fetchProjectWithFeeds} from './projects'
@@ -81,8 +82,9 @@ export function createFeedSource (newFeed: NewFeed) {
 export function updateFeedSource (feedSource: Feed, properties: {[string]: any}) {
   return function (dispatch: dispatchFn, getState: getStateFn) {
     dispatch(savingFeedSource())
-    // Convert feed source labels to format wanted by datatools-server
-    feedSource.labels = feedSource.labels.map(label => label.id)
+    feedSource.labels = stringifyLabels(feedSource.labels)
+    properties.labels = stringifyLabels(properties.labels)
+
     return dispatch(secureFetch(`${FS_URL}/${feedSource.id}`, 'put', {...feedSource, ...properties}))
       // Re-fetch feed source with versions and snapshots.
       .then((res) => dispatch(fetchFeedSource(feedSource.id)))
diff --git a/lib/manager/components/GeneralSettings.js b/lib/manager/components/GeneralSettings.js
@@ -17,10 +17,11 @@ import {
 
 import * as feedsActions from '../actions/feeds'
 import {FREQUENCY_INTERVALS} from '../../common/constants'
-import FeedFetchFrequency from './FeedFetchFrequency'
-
 import type {Feed, FetchFrequency, Project} from '../../types'
 import type {ManagerUserState} from '../../types/reducers'
+import LabelAssigner from '../containers/LabelAssigner'
+
+import FeedFetchFrequency from './FeedFetchFrequency'
 
 type Props = {
   confirmDeleteFeedSource: () => void,
@@ -108,7 +109,8 @@ export default class GeneralSettings extends Component<Props, State> {
     const {
       confirmDeleteFeedSource,
       disabled,
-      feedSource
+      feedSource,
+      project
     } = this.props
     const {
       name,
@@ -199,6 +201,9 @@ export default class GeneralSettings extends Component<Props, State> {
             </ListGroupItem>
           </ListGroup>
         </Panel>
+        <Panel header={<h3>Labels</h3>}>
+          <LabelAssigner feedSource={feedSource} project={project} />
+        </Panel>
         <Panel bsStyle='danger' header={<h3>Danger zone</h3>}>
           <ListGroup fill>
             <ListGroupItem>
diff --git a/lib/manager/components/LabelAssigner.js b/lib/manager/components/LabelAssigner.js
@@ -0,0 +1,46 @@
+// @flow
+
+import React from 'react'
+
+import FeedLabel from '../../common/containers/FeedLabel'
+import { stringifyLabels } from '../util'
+
+// TODO: props
+export default class LabelAssigner extends React.Component {
+  state = {};
+  onLabelClick = (labelId) => {
+    const {feedSource} = this.props
+    const updatedLabels = stringifyLabels(feedSource.labels)
+
+    const labelIndex = updatedLabels.indexOf(labelId)
+
+    // Either remove the label from the list, or add it
+    if (labelIndex < 0) {
+      updatedLabels.push(labelId)
+    } else {
+      updatedLabels.splice(labelIndex, 1)
+    }
+
+    this.props.updateFeedSource(feedSource, { labels: updatedLabels })
+  }
+
+  render () {
+    const { project, feedSource } = this.props
+    const projectLabels = project.labels
+    const fsLabelIds = feedSource.labels.map((label) => label.id)
+
+    return (
+      <div className='feedLabelContainer large'>
+        {projectLabels.map((label) => (
+          <FeedLabel
+            key={label.id}
+            label={label}
+            checked={fsLabelIds.find((id) => id === label.id) !== undefined}
+            small
+            onClick={this.onLabelClick}
+          />
+        ))}
+      </div>
+    )
+  }
+}
diff --git a/lib/manager/components/LabelEditorModal.js b/lib/manager/components/LabelEditorModal.js
@@ -43,7 +43,7 @@ export default class LabelEditorModal extends React.Component<LabelEditorModalPr
       return (
         <Modal show={this.state.showModal} onHide={this.close}>
           <Header>
-            <Title>Editing {label.name ? 'Label' : 'New Label'}</Title>
+            <Title>{label.name ? 'Edit Label' : 'Create New Label'}</Title>
           </Header>
 
           <Body>
diff --git a/lib/manager/containers/LabelAssigner.js b/lib/manager/containers/LabelAssigner.js
@@ -0,0 +1,20 @@
+// @flow
+
+import { connect } from 'react-redux'
+
+import { updateFeedSource } from '../actions/feeds'
+import LabelAssigner from '../components/LabelAssigner'
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+  }
+}
+
+const mapDispatchToProps = {
+  updateFeedSource
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(LabelAssigner)
diff --git a/lib/manager/util/index.js b/lib/manager/util/index.js
@@ -3,8 +3,6 @@
 import moment from 'moment'
 import {get} from 'object-path'
 
-import {getVersionValidationSummaryByFilterStrategy} from './version'
-
 import type {
   Bounds,
   Feed,
@@ -20,6 +18,8 @@ import type {
   ProjectsState
 } from '../../types/reducers'
 
+import {getVersionValidationSummaryByFilterStrategy} from './version'
+
 /**
  * Sort function that compares a field that might be datetimes. If ascending is
  * set to false, the entities will be sorting in descending order. Empty entries
@@ -397,3 +397,10 @@ export function projectHasAtLeastOneFeedWithAPublishedVersion (project: ?Project
 export function validationState (val: ?boolean): ?string {
   return val ? undefined : 'error'
 }
+
+export function stringifyLabels (labels: [any]) {
+  // Convert feed source labels to id strings wanted by datatools-server,
+  // but only if we have a label object
+  if (!labels) return []
+  return labels.map(label => label.id ? label.id : label)
+}
diff --git a/lib/style.css b/lib/style.css
@@ -152,6 +152,10 @@ td.feed-source-info {
   width: 100%;
   align-items: center;
 }
+.feedLabelContainer.large {
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  grid-gap: 15px;
+}
 .feedSourceLabelRow {
   display: inline-flex;
   width: 100%;
@@ -169,6 +173,10 @@ td.feed-source-info {
   border: 1px solid;
 
   padding: 5px 0 8px 0;
+  height: 100%;
+}
+.feedLabel.clickable {
+  cursor: pointer;
 }
 .feedLabel.small {
   /* removing bottom padding seems to be only way to account for the icon baseline fix */
@@ -189,6 +197,8 @@ td.feed-source-info {
 }
 .feedLabel.small .labelName {
   padding: 0;
+  height: 100%;
+  align-items: center;
 }
 
 .feedLabel .labelName i {
@@ -201,6 +211,10 @@ td.feed-source-info {
   align-items: flex-end;
   flex-direction: column;
 }
+.feedLabel .actionButtons input[type="checkbox"] {
+  margin: 0 5px 2px 0;
+  padding: 0;
+}
 .feedLabel .actionButtons button {
   background: none;
   border: none;
