Fix lint issues and update snapshots

Author: PanSpagetka

package.json

@@ -158,5 +158,8 @@
       "eslint --fix",
       "git add"
     ]
+  },
+  "dependencies": {
+    "react-select": "^1.2.1"
   }
 }

packages/tagging/src/components/InnerComponents/CategoryModifier.js

@@ -4,28 +4,43 @@ import { Col, ControlLabel, FormGroup } from 'patternfly-react';
 import TagSelector from './TagSelector';
 
 const CategoryModifier = ({
-  tagCategories, onTagCategoryChange, selectedTagCategory, categoryLabel,
+  tagCategories,
+  onTagCategoryChange,
+  selectedTagCategory,
+  categoryLabel
 }) => (
   <FormGroup>
     <Col xs={12} md={4} lg={6}>
       <ControlLabel>{categoryLabel}</ControlLabel>
     </Col>
     <Col xs={12} md={8} lg={6}>
-      <TagSelector tagCategories={tagCategories} onTagCategoryChange={onTagCategoryChange} selectedOption={selectedTagCategory} />
+      <TagSelector
+        tagCategories={tagCategories}
+        onTagCategoryChange={onTagCategoryChange}
+        selectedOption={selectedTagCategory}
+      />
     </Col>
   </FormGroup>
 );
 
 CategoryModifier.propTypes = {
-  tagCategories: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.number, description: PropTypes.string.isRequired }).isRequired).isRequired,
-  selectedTagCategory: PropTypes.shape({ id: PropTypes.number, description: PropTypes.string }),
+  tagCategories: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number,
+      description: PropTypes.string.isRequired
+    }).isRequired
+  ).isRequired,
+  selectedTagCategory: PropTypes.shape({
+    id: PropTypes.number,
+    description: PropTypes.string
+  }),
   onTagCategoryChange: PropTypes.func.isRequired,
-  categoryLabel: PropTypes.string,
+  categoryLabel: PropTypes.string
 };
 
 CategoryModifier.defaultProps = {
   categoryLabel: 'Category',
-  selectedTagCategory: {},
+  selectedTagCategory: {}
 };
 
 export default CategoryModifier;

packages/tagging/src/components/InnerComponents/Tag.js

@@ -1,22 +1,12 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Label } from 'patternfly-react';
-import { OverlayTrigger, Tooltip } from 'patternfly-react';
+import { Label, OverlayTrigger, Tooltip } from 'patternfly-react';
 
+const tooltip = text => <Tooltip id="tooltip">{text}</Tooltip>;
 
-const tooltip = (text) => (
-  <Tooltip id="tooltip">
-    {text}
-  </Tooltip>
-);
-
-const Tag = ({
-  onTagDeleteClick, tagCategory, tagValue, truncate,
-}) => (
+const Tag = ({ onTagDeleteClick, tagCategory, tagValue, truncate }) => (
   <li key={tagValue.id} className="tag">
-    <OverlayTrigger
-      placement="bottom"
-      overlay={tooltip(tagValue.description)}>
+    <OverlayTrigger placement="bottom" overlay={tooltip(tagValue.description)}>
       <Label
         key={tagValue.id}
         bsStyle="primary"
@@ -31,9 +21,12 @@ const Tag = ({
 
 Tag.propTypes = {
   onTagDeleteClick: PropTypes.func.isRequired,
-  tagCategory: PropTypes.PropTypes.shape({ id: PropTypes.number, description: PropTypes.string }).isRequired,
+  tagCategory: PropTypes.PropTypes.shape({
+    id: PropTypes.number,
+    description: PropTypes.string
+  }).isRequired,
   tagValue: PropTypes.object.isRequired,
-  truncate: PropTypes.func,
+  truncate: PropTypes.func.isRequired
 };
 
 export default Tag;

packages/tagging/src/components/InnerComponents/TagCategory.js

@@ -3,32 +3,32 @@ import PropTypes from 'prop-types';
 import { OverlayTrigger, Tooltip } from 'patternfly-react';
 import Tag from './Tag';
 
-
-
 class TagCategory extends React.Component {
-
-  generateTag = tagValue =>
-    (<Tag
+  generateTag = tagValue => (
+    <Tag
       key={tagValue.id}
       tagCategory={this.props.tagCategory}
       tagValue={tagValue}
       onTagDeleteClick={this.props.onTagDeleteClick}
       truncate={this.props.valueTruncate}
-    />);
+    />
+  );
 
   render() {
-    let values = [...this.props.tagValues];
+    const values = [...this.props.tagValues];
     const categoryTooltip = (
-      <Tooltip id="tooltip">
-        {this.props.tagCategory.description}
-      </Tooltip>
+      <Tooltip id="tooltip">{this.props.tagCategory.description}</Tooltip>
     );
     return (
       <ul className="tag-category list-inline">
         <OverlayTrigger placement="bottom" overlay={categoryTooltip}>
-          <div className="category-label" >{this.props.categoryTruncate(this.props.tagCategory.description)}</div>
+          <div className="category-label">
+            {this.props.categoryTruncate(this.props.tagCategory.description)}
+          </div>
         </OverlayTrigger>
-        {values.sort((a,b) => a.description < b.description ? -1 : 1).map(tagValue => this.generateTag(tagValue))}
+        {values
+          .sort((a, b) => (a.description < b.description ? -1 : 1))
+          .map(tagValue => this.generateTag(tagValue))}
       </ul>
     );
   }
@@ -37,14 +37,20 @@ class TagCategory extends React.Component {
 TagCategory.propTypes = {
   onTagDeleteClick: PropTypes.func.isRequired,
   tagCategory: PropTypes.object.isRequired,
-  tagValues: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.number.isRequired, description: PropTypes.string.isRequired }).isRequired).isRequired,
+  tagValues: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      description: PropTypes.string.isRequired
+    }).isRequired
+  ).isRequired,
   categoryTruncate: PropTypes.func,
-  valueTruncate: PropTypes.func,
+  valueTruncate: PropTypes.func
 };
 
 TagCategory.defaultProps = {
-  categoryTruncate: str => ( str.length > 18 ? str.substring(0, 18) + '...' : str ),
-  valueTruncate: str => ( str.length > 18 ? str.substring(0, 18) + '...' : str ),
-}
+  categoryTruncate: str =>
+    str.length > 18 ? `${str.substring(0, 18)}...` : str,
+  valueTruncate: str => (str.length > 18 ? `${str.substring(0, 18)}...` : str)
+};
 
 export default TagCategory;

packages/tagging/src/components/InnerComponents/TagModifier.js

@@ -4,21 +4,22 @@ import { Row, Col, Form } from 'patternfly-react';
 
 const TagModifier = ({ header, children }) => (
   <React.Fragment>
-    <Row><Col lg={12}><h2>{header}</h2></Col></Row>
-    <Form horizontal>
-      {children}
-    </Form>
-
+    <Row>
+      <Col lg={12}>
+        <h2>{header}</h2>
+      </Col>
+    </Row>
+    <Form horizontal>{children}</Form>
   </React.Fragment>
 );
 
 TagModifier.propTypes = {
   header: PropTypes.string,
-  children: PropTypes.arrayOf(PropTypes.element).isRequired,
+  children: PropTypes.arrayOf(PropTypes.element).isRequired
 };
 
 TagModifier.defaultProps = {
-  header: 'Add/Modify tag',
+  header: 'Add/Modify tag'
 };
 
 export default TagModifier;

packages/tagging/src/components/InnerComponents/TagSelector.js

@@ -4,71 +4,73 @@ import PropTypes from 'prop-types';
 import { OverlayTrigger, Tooltip } from 'patternfly-react';
 
 class TagSelector extends React.Component {
-  handleChange = (selectedOption) => {
+  handleChange = selectedOption => {
     this.props.onTagCategoryChange({
       id: selectedOption.value,
-      description: this.props.tagCategories.find(category => (category.id === selectedOption.value)).description,
+      description: this.props.tagCategories.find(
+        category => category.id === selectedOption.value
+      ).description
     });
-  }
-
-  tooltip = (text) => (
-    <Tooltip id="tooltip">
-      {text}
-    </Tooltip>
-  );
+  };
 
-  labelWithIcon = (description, infoText) => (<div>
-    <span>
-      {description}
-    </span>
-    <OverlayTrigger
-      placement="bottom"
-      overlay={this.tooltip(infoText)}
-    >
-      <span
-        className="pull-right pficon pficon-info tag-icon"
-        aria-hidden="true"
-      />
-    </OverlayTrigger>
-    <span className="sr-only">{infoText}</span>
-  </div>)
+  tooltip = text => <Tooltip id="tooltip">{text}</Tooltip>;
 
+  labelWithIcon = (description, infoText) => (
+    <div>
+      <span>{description}</span>
+      <OverlayTrigger placement="bottom" overlay={this.tooltip(infoText)}>
+        <span
+          className="pull-right pficon pficon-info tag-icon"
+          aria-hidden="true"
+        />
+      </OverlayTrigger>
+      <span className="sr-only">{infoText}</span>
+    </div>
+  );
 
   tagCategories = this.props.tagCategories.map(category => ({
-          keyWord: category.description.toLowerCase(),
-          value: category.id,
-          label: category.singleValue ? this.labelWithIcon(category.description, this.props.infoText) : category.description,
-        }));
+    keyWord: category.description.toLowerCase(),
+    value: category.id,
+    label: category.singleValue
+      ? this.labelWithIcon(category.description, this.props.infoText)
+      : category.description
+  }));
 
   render() {
-    const id = this.props.selectedOption.id;
-    const label = this.props.selectedOption.description;
     return (
       <Select
-        value={id}
-        label={label}
+        value={this.props.selectedOption.id}
+        label={this.props.selectedOption.description}
         options={this.tagCategories}
         onChange={this.handleChange}
         className="selected-option"
         name="form-field-name"
-        filterOptions={(options, filter) => options.filter(item => item.keyWord.includes(filter.toLowerCase())) }
+        filterOptions={(options, filter) =>
+          options.filter(item => item.keyWord.includes(filter.toLowerCase()))
+        }
         clearable={false}
-
       />
-
     );
   }
 }
 TagSelector.propTypes = {
-  tagCategories: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.number, description: PropTypes.string.isRequired }).isRequired).isRequired,
-  selectedOption: PropTypes.shape({ id: PropTypes.number, description: PropTypes.string }),
+  tagCategories: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number,
+      description: PropTypes.string.isRequired
+    }).isRequired
+  ).isRequired,
+  selectedOption: PropTypes.shape({
+    id: PropTypes.number,
+    description: PropTypes.string
+  }),
   onTagCategoryChange: PropTypes.func.isRequired,
-  infoText: PropTypes.string,
+  infoText: PropTypes.string
 };
 
 TagSelector.defaultProps = {
   infoText: 'Only a single value can be assigned from these categories',
-  selectedOption: {},
+  selectedOption: {}
 };
 
 export default TagSelector;

packages/tagging/src/components/InnerComponents/TagView.js

@@ -4,23 +4,30 @@ import { Row, Col } from 'patternfly-react';
 import TagCategory from './TagCategory';
 
 class TagView extends React.Component {
-  generateTagCategories = tag =>
-    (<TagCategory
+  generateTagCategories = tag => (
+    <TagCategory
       key={tag.id}
       tagCategory={{ id: tag.id, description: tag.description }}
       tagValues={tag.tagValues}
       onTagDeleteClick={this.props.onTagDeleteClick}
-    />);
+    />
+  );
 
   render() {
-    let assignedTags = [...this.props.assignedTags];
+    const assignedTags = [...this.props.assignedTags];
     return (
       <React.Fragment>
-        <Row><Col lg={12}><h2>{this.props.header}</h2></Col></Row>
+        <Row>
+          <Col lg={12}>
+            <h2>{this.props.header}</h2>
+          </Col>
+        </Row>
         <Row>
           <Col lg={12}>
             <ul className="list-inline">
-              {assignedTags.sort((a, b) => a.description < b.description ? -1 : 1).map(this.generateTagCategories)}
+              {assignedTags
+                .sort((a, b) => (a.description < b.description ? -1 : 1))
+                .map(this.generateTagCategories)}
             </ul>
           </Col>
         </Row>
@@ -29,19 +36,24 @@ class TagView extends React.Component {
   }
 }
 TagView.propTypes = {
-  assignedTags: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    description: PropTypes.string.isRequired,
-    tagValues: PropTypes.arrayOf(PropTypes.shape(
-      { id: PropTypes.number.isRequired, description: PropTypes.string.isRequired }).isRequired).isRequired
-  })),
+  assignedTags: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      description: PropTypes.string.isRequired,
+      tagValues: PropTypes.arrayOf(
+        PropTypes.shape({
+          id: PropTypes.number.isRequired,
+          description: PropTypes.string.isRequired
+        }).isRequired
+      ).isRequired
+    })
+  ).isRequired,
   onTagDeleteClick: PropTypes.func.isRequired,
-  header: PropTypes.string,
+  header: PropTypes.string
 };
 
-
 TagView.defaultProps = {
-  header: 'Assigned tags',
+  header: 'Assigned tags'
 };
 
 export default TagView;