feat(ProjectSettingsForm): add project labels

miles-grant-ibigroup · miles-grant-ibigroup · commit 818bb954ed7f · 2021-07-21T16:13:58.000-04:00
diff --git a/lib/manager/components/LabelPanel.js b/lib/manager/components/LabelPanel.js
@@ -0,0 +1,37 @@
+import React, { Component } from 'react'
+import { Panel } from 'react-bootstrap'
+
+import FeedLabel from '../../common/containers/FeedLabel'
+import { Project } from '../../types'
+
+import LabelEditorModal from './LabelEditorModal'
+
+export default class LabelPanel extends Component<{ project: Project; }> {
+  _onClickNewLabel = () => this.refs.newLabelModal.open();
+
+  render () {
+    const {large, project} = this.props
+    const { labels, id: projectId } = project
+
+    let labelBody = (
+      <div className='noLabelsMessage' >
+        There are no labels in this project.
+      </div>
+    )
+    if (labels.length > 0) {
+      labelBody = labels.map((label) => (
+        <FeedLabel key={label.id} label={label} />
+      ))
+    }
+
+    return (
+      <Panel header={<h3>Labels</h3>}>
+        <div className={`feedLabelContainer ${large ? 'large' : ''}`}>
+          <LabelEditorModal ref='newLabelModal' projectId={projectId} />
+          <button className='newLabel' onClick={this._onClickNewLabel}>Add a new label</button>
+          {labelBody}
+        </div>
+      </Panel>
+    )
+  }
+}
diff --git a/lib/manager/components/ProjectSettingsForm.js b/lib/manager/components/ProjectSettingsForm.js
@@ -30,9 +30,10 @@ import ConfirmModal from '../../common/components/ConfirmModal'
 import TimezoneSelect from '../../common/components/TimezoneSelect'
 import {getComponentMessages} from '../../common/util/config'
 import {parseBounds, validationState} from '../util'
-
 import type {Bounds, Project} from '../../types'
 
+import LabelPanel from './LabelPanel'
+
 type ProjectModel = {
   autoFetchFeeds?: boolean,
   autoFetchHour?: number,
@@ -235,7 +236,7 @@ export default class ProjectSettingsForm extends Component<Props, State> {
   _getChanges = () => {
     const {model} = this.state
     const {project} = this.props
-    let changes: any = {}
+    const changes: any = {}
     Object.keys(model).map(k => {
       if (model[k] !== project[k]) {
         changes[k] = model[k]
@@ -252,7 +253,7 @@ export default class ProjectSettingsForm extends Component<Props, State> {
   }
 
   render () {
-    const {editDisabled, showDangerZone} = this.props
+    const {editDisabled, showDangerZone, project} = this.props
     const {model, validation} = this.state
     const {autoFetchHour, autoFetchMinute} = model
     const autoFetchChecked = model.autoFetchFeeds
@@ -359,6 +360,7 @@ export default class ProjectSettingsForm extends Component<Props, State> {
             </ListGroupItem>
           </ListGroup>
         </Panel>
+        <LabelPanel project={project} large />
         {showDangerZone &&
           <Panel bsStyle='danger' header={<h3>Danger zone</h3>}>
             <ListGroup fill>
diff --git a/lib/manager/components/ProjectViewer.js b/lib/manager/components/ProjectViewer.js
@@ -27,14 +27,13 @@ import WatchButton from '../../common/containers/WatchButton'
 import {getComponentMessages, getConfigProperty, isModuleEnabled} from '../../common/util/config'
 import DeploymentsPanel from '../containers/DeploymentsPanel'
 import FeedSourceTable from '../containers/FeedSourceTable'
-import FeedLabel from '../../common/containers/FeedLabel'
 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'
+import LabelPanel from './LabelPanel'
 
 type Props = ContainerProps & {
   activeComponent: ?string,
@@ -309,30 +308,6 @@ class ProjectSummaryPanel extends Component<{feedSources: Array<Feed>, 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} />
-      ))
-    }
-
-    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 }) => {
   // If user has more than 3 labels, hide the feed source instruction
   if (project.labels.length <= 3) {
diff --git a/lib/style.css b/lib/style.css
@@ -156,6 +156,10 @@ td.feed-source-info {
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
   grid-gap: 15px;
 }
+.feedLabelContainer.large .noLabelsMessage {
+  /* Match the margin of the new labels "button" */
+  margin: 0 0 10px 0;
+}
 .feedSourceLabelRow {
   display: inline-flex;
   width: 100%;
