Merge pull request #108 from Unleash/fix_lint_warns

chore(lint) Added propTypes to all components

frontend/CHANGELOG.md

@@ -10,6 +10,7 @@ The latest version of this document is always available in
 ## [Unreleased] 
 - Move metrics poller to seperate class
 - Bugfix: CreatedAt set when creating new toggle
+- chore(lint): Added propTypes to all components
 
 ## [3.0.0-alpha.6]
 - Bugfix: actions should always throw errors

frontend/src/component/application/__tests__/application-edit-component-test.js

@@ -6,7 +6,9 @@ import renderer from 'react-test-renderer';
 jest.mock('react-mdl');
 
 test('renders correctly if no application', () => {
-    const tree = renderer.create(<ClientApplications fetchApplication={jest.fn()} />).toJSON();
+    const tree = renderer
+        .create(<ClientApplications fetchApplication={jest.fn()} storeApplicationMetaData={jest.fn()} />)
+        .toJSON();
 
     expect(tree).toMatchSnapshot();
 });

frontend/src/component/application/application-edit-component.js

@@ -1,5 +1,6 @@
 /* eslint react/no-multi-comp:off */
 import React, { Component, PureComponent } from 'react';
+import PropTypes from 'prop-types';
 
 import { Link } from 'react-router';
 import {
@@ -23,6 +24,13 @@ import { IconLink, shorten, styles as commonStyles } from '../common';
 import { formatFullDateTime } from '../common/util';
 
 class StatefulTextfield extends Component {
+    static propTypes = {
+        value: PropTypes.string,
+        label: PropTypes.string,
+        rows: PropTypes.number,
+        onBlur: PropTypes.func.isRequired,
+    };
+
     constructor(props) {
         super(props);
         this.state = { value: props.value };
@@ -47,6 +55,13 @@ class StatefulTextfield extends Component {
 }
 
 class ClientApplications extends PureComponent {
+    static propTypes = {
+        fetchApplication: PropTypes.func.isRequired,
+        appName: PropTypes.string,
+        application: PropTypes.object,
+        storeApplicationMetaData: PropTypes.func.isRequired,
+    };
+
     constructor(props) {
         super(props);
         this.state = { activeTab: 0 };

frontend/src/component/application/application-list-component.js

@@ -1,8 +1,14 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { ProgressBar, Card } from 'react-mdl';
 import { AppsLinkList, styles as commonStyles } from '../common';
 
 class ClientStrategies extends Component {
+    static propTypes = {
+        applications: PropTypes.array,
+        fetchAll: PropTypes.func.isRequired,
+    };
+
     componentDidMount() {
         this.props.fetchAll();
     }

frontend/src/component/archive/archive-list-component.jsx

@@ -1,9 +1,16 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { Link } from 'react-router';
 import { DataTable, TableHeader, IconButton, Icon, Card } from 'react-mdl';
 import { styles as commonStyles } from '../common';
 
 class ArchiveList extends Component {
+    static propTypes = {
+        archive: PropTypes.array,
+        fetchArchive: PropTypes.func,
+        revive: PropTypes.func,
+    };
+
     componentDidMount() {
         this.props.fetchArchive();
     }

frontend/src/component/common/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Link } from 'react-router';
 import { List, ListItem, ListItemContent, Button, Icon, Switch, MenuItem } from 'react-mdl';
 import styles from './common.scss';
@@ -25,6 +26,9 @@ export const AppsLinkList = ({ apps }) => (
             ))}
     </List>
 );
+AppsLinkList.propTypes = {
+    apps: PropTypes.array.isRequired,
+};
 
 export const HeaderTitle = ({ title, actions, subtitle }) => (
     <div
@@ -43,6 +47,11 @@ export const HeaderTitle = ({ title, actions, subtitle }) => (
         {actions && <div style={{ flex: '1', textAlign: 'right' }}>{actions}</div>}
     </div>
 );
+HeaderTitle.propTypes = {
+    title: PropTypes.string,
+    subtitle: PropTypes.string,
+    actions: PropTypes.any,
+};
 
 export const DataTableHeader = ({ title, actions }) => (
     <div className={styles.dataTableHeader}>
@@ -52,6 +61,10 @@ export const DataTableHeader = ({ title, actions }) => (
         {actions && <div className={styles.actions}>{actions}</div>}
     </div>
 );
+DataTableHeader.propTypes = {
+    title: PropTypes.string,
+    actions: PropTypes.any,
+};
 
 export const FormButtons = ({ submitText = 'Create', onCancel }) => (
     <div>
@@ -65,6 +78,10 @@ export const FormButtons = ({ submitText = 'Create', onCancel }) => (
         </Button>
     </div>
 );
+FormButtons.propTypes = {
+    submitText: PropTypes.string,
+    onCancel: PropTypes.func.isRequired,
+};
 
 export const SwitchWithLabel = ({ onChange, checked, children, ...switchProps }) => (
     <span className={styles.switchWithLabel}>
@@ -74,6 +91,10 @@ export const SwitchWithLabel = ({ onChange, checked, children, ...switchProps })
         </span>
     </span>
 );
+SwitchWithLabel.propTypes = {
+    checked: PropTypes.bool,
+    onChange: PropTypes.func,
+};
 
 export const TogglesLinkList = ({ toggles }) => (
     <List style={{ textAlign: 'left' }} className={styles.truncate}>
@@ -89,6 +110,9 @@ export const TogglesLinkList = ({ toggles }) => (
             ))}
     </List>
 );
+TogglesLinkList.propTypes = {
+    toggles: PropTypes.array,
+};
 
 export function getIcon(type) {
     switch (type) {
@@ -110,6 +134,10 @@ export const IconLink = ({ url, icon }) => (
         <Icon name={icon} />
     </a>
 );
+IconLink.propTypes = {
+    url: PropTypes.string,
+    icon: PropTypes.string,
+};
 
 export const DropdownButton = ({ label, id }) => (
     <Button id={id} className={styles.dropdownButton}>
@@ -117,6 +145,10 @@ export const DropdownButton = ({ label, id }) => (
         <Icon name="arrow_drop_down" className="mdl-color-text--grey-600" />
     </Button>
 );
+DropdownButton.propTypes = {
+    label: PropTypes.string,
+    id: PropTypes.string,
+};
 
 export const MenuItemWithIcon = ({ icon, label, disabled, ...menuItemProps }) => (
     <MenuItem disabled={disabled} style={{ display: 'flex', alignItems: 'center' }} {...menuItemProps}>
@@ -124,6 +156,11 @@ export const MenuItemWithIcon = ({ icon, label, disabled, ...menuItemProps }) =>
         {label}
     </MenuItem>
 );
+MenuItemWithIcon.propTypes = {
+    icon: PropTypes.string,
+    label: PropTypes.string,
+    disabled: PropTypes.bool,
+};
 
 const badNumbers = [NaN, Infinity, -Infinity];
 export function calc(value, total, decimal) {

frontend/src/component/feature/form/index.jsx

@@ -104,11 +104,14 @@ AddFeatureToggleComponent.propTypes = {
     setValue: PropTypes.func.isRequired,
     addStrategy: PropTypes.func.isRequired,
     removeStrategy: PropTypes.func.isRequired,
+    moveStrategy: PropTypes.func.isRequired,
     updateStrategy: PropTypes.func.isRequired,
     onSubmit: PropTypes.func.isRequired,
     onCancel: PropTypes.func.isRequired,
     validateName: PropTypes.func.isRequired,
     editmode: PropTypes.bool,
+    initCallRequired: PropTypes.bool,
+    init: PropTypes.func,
 };
 
 export default AddFeatureToggleComponent;

frontend/src/component/feature/form/strategy-input-percentage.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Slider } from 'react-mdl';
 
 const labelStyle = {
@@ -8,7 +9,7 @@ const labelStyle = {
     fontSize: '12px',
 };
 
-export default ({ name, value, onChange }) => (
+const InputPercentage = ({ name, value, onChange }) => (
     <div style={{ marginBottom: '20px' }}>
         <div style={labelStyle}>
             {name}: {value}%
@@ -16,3 +17,11 @@ export default ({ name, value, onChange }) => (
         <Slider min={0} max={100} defaultValue={value} value={value} onChange={onChange} label={name} />
     </div>
 );
+
+InputPercentage.propTypes = {
+    name: PropTypes.string,
+    value: PropTypes.number,
+    onChange: PropTypes.func.isRequired,
+};
+
+export default InputPercentage;

frontend/src/component/feature/list-component.jsx

@@ -13,6 +13,7 @@ export default class FeatureListComponent extends React.PureComponent {
         featureMetrics: PropTypes.object.isRequired,
         fetchFeatureToggles: PropTypes.func.isRequired,
         updateSetting: PropTypes.func.isRequired,
+        toggleFeature: PropTypes.func.isRequired,
         settings: PropTypes.object,
     };
 

frontend/src/component/feature/metric-component.jsx

@@ -17,6 +17,9 @@ const StrategyChipItem = ({ strategy }) => (
         </Link>
     </Chip>
 );
+StrategyChipItem.propTypes = {
+    strategy: PropTypes.object.isRequired,
+};
 
 // TODO what about "missing" strategies here?
 const StrategiesList = ({ strategies }) => (
@@ -25,6 +28,9 @@ const StrategiesList = ({ strategies }) => (
         {strategies.map((strategy, i) => <StrategyChipItem key={i} strategy={strategy} />)}
     </div>
 );
+StrategiesList.propTypes = {
+    strategies: PropTypes.array.isRequired,
+};
 
 export default class MetricComponent extends React.Component {
     static propTypes = {

frontend/src/component/history/history-component.jsx

@@ -1,9 +1,15 @@
 import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
 import { Card } from 'react-mdl';
 import HistoryList from './history-list-container';
 import { styles as commonStyles } from '../common';
 
 class History extends PureComponent {
+    static propTypes = {
+        fetchHistory: PropTypes.func.isRequired,
+        history: PropTypes.array.isRequired,
+    };
+
     componentDidMount() {
         this.props.fetchHistory();
     }

frontend/src/component/history/history-list-component.jsx

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import HistoryItemDiff from './history-item-diff';
 import HistoryItemJson from './history-item-json';
 import { Table, TableHeader } from 'react-mdl';
@@ -8,6 +9,13 @@ import { formatFullDateTime } from '../common/util';
 import styles from './history.scss';
 
 class HistoryList extends Component {
+    static propTypes = {
+        title: PropTypes.string,
+        history: PropTypes.array,
+        settings: PropTypes.object,
+        updateSetting: PropTypes.func.isRequired,
+    };
+
     toggleShowDiff() {
         this.props.updateSetting('showData', !this.props.settings.showData);
     }

frontend/src/component/history/history-list-toggle-component.jsx

@@ -5,6 +5,8 @@ import HistoryList from './history-list-container';
 class HistoryListToggle extends Component {
     static propTypes = {
         toggleName: PropTypes.string.isRequired,
+        history: PropTypes.array,
+        fetchHistoryForToggle: PropTypes.func.isRequired,
     };
 
     componentDidMount() {

frontend/src/component/strategies/add-strategy.jsx

@@ -66,6 +66,11 @@ const Parameter = ({ set, input = {}, index }) => (
         />
     </div>
 );
+Parameter.propTypes = {
+    input: PropTypes.object,
+    set: PropTypes.func,
+    index: PropTypes.number,
+};
 
 const EditHeader = () => (
     <div>
@@ -90,6 +95,12 @@ const Parameters = ({ input = [], count = 0, updateInList }) => (
     </div>
 );
 
+Parameters.propTypes = {
+    input: PropTypes.array,
+    updateInList: PropTypes.func.isRequired,
+    count: PropTypes.number,
+};
+
 class AddStrategy extends Component {
     static propTypes = {
         input: PropTypes.object,

frontend/src/component/strategies/list-component.jsx

@@ -6,6 +6,12 @@ import { List, ListItem, ListItemContent, IconButton, Grid, Cell } from 'react-m
 import { HeaderTitle } from '../common';
 
 class StrategiesListComponent extends Component {
+    static propTypes = {
+        strategies: PropTypes.array.isRequired,
+        fetchStrategies: PropTypes.func.isRequired,
+        removeStrategy: PropTypes.func.isRequired,
+    };
+
     static contextTypes = {
         router: PropTypes.object,
     };

frontend/src/component/user/show-user-component.jsx

@@ -5,6 +5,7 @@ import styles from './user.scss';
 export default class ShowUserComponent extends React.Component {
     static propTypes = {
         profile: PropTypes.object,
+        fetchUser: PropTypes.func.isRequired,
     };
 
     componentDidMount() {