feat(FeedSourceTableRow): show labels of feed source

miles-grant-ibigroup · miles-grant-ibigroup · commit be0b052d7f6a · 2021-07-20T12:10:20.000-04:00
diff --git a/lib/common/components/FeedLabel.js b/lib/common/components/FeedLabel.js
@@ -11,11 +11,11 @@ const getComplementaryColor = (cssHex, strength) => {
 }
 
 export default function Label (props) {
-  const { name, color } = props
+  const { name, color, small } = props
 
   return (
     <span
-      className='feedLabel'
+      className={`feedLabel ${small ? 'small' : ''}`}
       style={{
         backgroundColor: color,
         color: getComplementaryColor(color, 45),
diff --git a/lib/manager/components/FeedSourceTableRow.js b/lib/manager/components/FeedSourceTableRow.js
@@ -25,7 +25,7 @@ import {abbreviate, isValidZipFile} from '../../common/util/util'
 import ConfirmModal from '../../common/components/ConfirmModal'
 import SelectFileModal from '../../common/components/SelectFileModal'
 import WatchButton from '../../common/containers/WatchButton'
-
+import FeedLabel from '../../common/components/FeedLabel'
 import type {Props as ContainerProps} from '../containers/FeedSourceTableRow'
 import type {Feed, ValidationSummary} from '../../types'
 import type {
@@ -266,6 +266,15 @@ class FeedInfo extends PureComponent<{ feedSource: Feed }> {
             <Icon type={feedSource.isPublic ? 'globe' : 'lock'} />
             {feedSource.isPublic ? 'Public' : 'Private'}
           </Col>
+          {feedSource.labels.length > 0 &&
+          <Col xs={12}>
+            <div className='feedSourceLabelRow'>
+              <Icon type={'tag'} />
+              <div className='feedLabelContainer'>
+                {feedSource.labels.map(label => <FeedLabel small key={label.id} {...label} />)}
+              </div>
+            </div>
+          </Col>}
         </Row>
       </div>
     )
diff --git a/lib/manager/components/ProjectViewer.js b/lib/manager/components/ProjectViewer.js
@@ -27,7 +27,7 @@ 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 Label from '../../common/components/Label'
+import Label from '../../common/components/FeedLabel'
 import type {Props as ContainerProps} from '../containers/ActiveProjectViewer'
 import type {Feed, Project} from '../../types'
 import type {ManagerUserState} from '../../types/reducers'
diff --git a/lib/style.css b/lib/style.css
@@ -147,8 +147,14 @@ td.feed-source-info {
 .feedLabelContainer {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
-  gap: 10px;
+  grid-gap: 5px;
   grid-auto-flow: dense;
+  width: 100%;
+}
+.feedSourceLabelRow {
+  display: inline-flex;
+  width: 100%;
+  align-items: baseline;
 }
 .feedLabel {
   display: inline-block;
@@ -163,6 +169,9 @@ td.feed-source-info {
 
   padding: 5px;
 }
+.feedLabel.small {
+  padding: 2.5px;
+}
 
 /* Feed transformation substitution styling */
 .substitution-row td {
diff --git a/lib/types/index.js b/lib/types/index.js
@@ -7,7 +7,6 @@ import {
   FETCH_FREQUENCIES,
   RETRIEVAL_METHODS
 } from '../common/constants'
-
 import type UserPermissions from '../common/user/UserPermissions'
 
 type InputType =
@@ -385,6 +384,7 @@ export type Feed = {
   id: string,
   isCreating?: boolean,
   isPublic: boolean,
+  labels: Array<Label>,
   lastFetched?: ?number,
   lastUpdated?: number,
   latestValidation?: ValidationSummary,
@@ -522,6 +522,13 @@ export type FeedVersion = {|
   version: number
 |}
 
+export type Label = {
+  color: string,
+  description: string,
+  id: string,
+  name: string
+}
+
 // TODO: Remove this eslint rule once https://github.com/babel/babel-eslint/pull/584
 // is merged in.
 /* eslint-enable no-use-before-define */
