Fix/console warn (#290)

* fix: resolve uncontrolled autocomplete

* fix: return if no strategy is present

* fix: change logic for retrieving context index

* fix: remove prop types from UserList

* fix: add default to api key name input

* fix: remove raised property from button

frontend/src/component/common/Dialogue/Dialogue.jsx

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import ConditionallyRender from '../ConditionallyRender/ConditionallyRender';
 import { useStyles } from './Dialogue.styles';
 
-const ConfirmDialogue = ({
+const Dialogue = ({
     children,
     open,
     onClick,
@@ -67,10 +67,9 @@ const ConfirmDialogue = ({
     );
 };
 
-ConfirmDialogue.propTypes = {
+Dialogue.propTypes = {
     primaryButtonText: PropTypes.string,
     secondaryButtonText: PropTypes.string,
-    children: PropTypes.object,
     open: PropTypes.bool,
     onClick: PropTypes.func,
     onClose: PropTypes.func,
@@ -80,4 +79,4 @@ ConfirmDialogue.propTypes = {
     fullWidth: PropTypes.bool,
 };
 
-export default ConfirmDialogue;
+export default Dialogue;

frontend/src/component/context/ContextList/ContextList.jsx

@@ -26,6 +26,8 @@ const ContextList = ({ removeContextField, history, contextFields }) => {
     const [showDelDialogue, setShowDelDialogue] = useState(false);
     const [name, setName] = useState();
 
+    console.log(contextFields);
+
     const styles = useStyles();
     const contextList = () =>
         contextFields.map(field => (

frontend/src/component/feature/strategy/StrategyCard/StrategyCardContent/common/StrategyCardConstraints/StrategyCardConstraints.jsx

@@ -6,7 +6,7 @@ import { useStyles } from './StrategyCardConstraints.styles.js';
 import ConditionallyRender from '../../../../../../common/ConditionallyRender/ConditionallyRender';
 import { C } from '../../../../../../common/flags.js';
 
-const StrategyCardConstraints = ({ constraints= [], flags }) => {
+const StrategyCardConstraints = ({ constraints = [], flags }) => {
     const styles = useStyles();
 
     const isEnterprise = () => {
@@ -33,8 +33,9 @@ const StrategyCardConstraints = ({ constraints= [], flags }) => {
     };
 
     const renderConstraints = () => {
+        /* TODO: We need something unique here or we might have weird rendering issues. */
         return constraints.map((constraint, i) => (
-            <div key={`${constraint.contextName}-${constraint.operator}`}>
+            <div key={`${constraint.contextName}-${constraint.operator}-${i}`}>
                 <ConditionallyRender
                     condition={i > 0}
                     show={<span>and</span>}

frontend/src/component/feature/strategy/StrategyConstraint/StrategyConstraintInputField/StrategyConstraintInputField.jsx

@@ -13,7 +13,12 @@ const constraintOperators = [
     { key: 'NOT_IN', label: 'NOT_IN' },
 ];
 
-const StrategyConstraintInputField = ({ constraint, updateConstraint, removeConstraint, contextFields }) => {
+const StrategyConstraintInputField = ({
+    constraint,
+    updateConstraint,
+    removeConstraint,
+    contextFields,
+}) => {
     const [error, setError] = useState();
     const commonStyles = useCommonStyles();
     const styles = useStyles();
@@ -40,10 +45,14 @@ const StrategyConstraintInputField = ({ constraint, updateConstraint, removeCons
         key: f.name,
         label: f.name,
     }));
-    const constraintDef = contextFields.find(c => c.name === constraint.contextName);
+    const constraintDef = contextFields.find(
+        c => c.name === constraint.contextName
+    );
 
     const options =
-        constraintDef && constraintDef.legalValues && constraintDef.legalValues.length > 0
+        constraintDef &&
+        constraintDef.legalValues &&
+        constraintDef.legalValues.length > 0
             ? constraintDef.legalValues.map(l => ({ value: l, label: l }))
             : undefined;
     const values = constraint.values.map(v => ({ value: v, label: v }));
@@ -55,8 +64,10 @@ const StrategyConstraintInputField = ({ constraint, updateConstraint, removeCons
                     name="contextName"
                     label="Context Field"
                     options={constraintContextNames}
-                    value={constraint.contextName}
+                    value={constraint.contextName || ''}
-                    onChange={evt => updateConstraint(evt.target.value, 'contextName')}
+                    onChange={evt =>
+                        updateConstraint(evt.target.value, 'contextName')
+                    }
                     className={styles.contextField}
                 />
             </td>
@@ -66,7 +77,9 @@ const StrategyConstraintInputField = ({ constraint, updateConstraint, removeCons
                     label="Operator"
                     options={constraintOperators}
                     value={constraint.operator}
-                    onChange={evt => updateConstraint(evt.target.value, 'operator')}
+                    onChange={evt =>
+                        updateConstraint(evt.target.value, 'operator')
+                    }
                     className={styles.operator}
                 />
             </td>
@@ -78,13 +91,27 @@ const StrategyConstraintInputField = ({ constraint, updateConstraint, removeCons
                             multiple
                             size="small"
                             options={options}
+                            value={values || []}
                             getOptionLabel={option => option.label}
-                            getOptionSelected={(option, value) => option.value === value.value}
+                            getOptionSelected={(option, value) =>
-                            defaultValue={values}
+                                option.value === value.value
+                            }
                             filterSelectedOptions
-                            filterOptions={options => options.filter(o => !values.some(v => v.value === o.value))}
+                            filterOptions={options =>
-                            onChange={(evt, values) => handleChangeValue(values)}
+                                options.filter(
-                            renderInput={params => <TextField {...params} variant="outlined" label="Values" />}
+                                    o => !values.some(v => v.value === o.value)
+                                )
+                            }
+                            onChange={(evt, values) =>
+                                handleChangeValue(values)
+                            }
+                            renderInput={params => (
+                                <TextField
+                                    {...params}
+                                    variant="outlined"
+                                    label="Values"
+                                />
+                            )}
                         />
                     }
                     elseShow={
@@ -94,7 +121,9 @@ const StrategyConstraintInputField = ({ constraint, updateConstraint, removeCons
                             onBlur={onBlur}
                             values={constraint.values}
                             label="Values (v1, v2, v3)"
-                            updateValues={values => updateConstraint(values, 'values')}
+                            updateValues={values =>
+                                updateConstraint(values, 'values')
+                            }
                         />
                     }
                 />

frontend/src/component/feature/view/update-description-component.jsx

@@ -1,7 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
-import { Typography, IconButton, FormControl, TextField, Button } from '@material-ui/core';
+import {
+    Typography,
+    IconButton,
+    FormControl,
+    TextField,
+    Button,
+} from '@material-ui/core';
 import CreateIcon from '@material-ui/icons/Create';
 import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyRender';
 
@@ -53,7 +59,10 @@ export default class UpdateDescriptionComponent extends React.Component {
                                 aria-label="toggle description edit"
                                 to="#edit"
                                 component={Link}
-                                onClick={this.onEditMode.bind(this, description)}
+                                onClick={this.onEditMode.bind(
+                                    this,
+                                    description
+                                )}
                             >
                                 <CreateIcon />
                             </IconButton>
@@ -79,11 +88,16 @@ export default class UpdateDescriptionComponent extends React.Component {
                     onChange={this.updateValue}
                 />
                 <div style={{ marginTop: '0.5rem' }}>
-                    <Button type="submit" color="primary" variant="contained" onClick={this.onSave}>
+                    <Button
+                        type="submit"
+                        color="primary"
+                        variant="contained"
+                        onClick={this.onSave}
+                    >
                         Save
                     </Button>
                     &nbsp;
-                    <Button type="cancel" raised onClick={this.onCancel}>
+                    <Button type="cancel" onClick={this.onCancel}>
                         Cancel
                     </Button>
                 </div>
@@ -93,6 +107,8 @@ export default class UpdateDescriptionComponent extends React.Component {
 
     render() {
         const { editMode } = this.state;
-        return editMode ? this.renderEdit(this.props) : this.renderRead(this.props);
+        return editMode
+            ? this.renderEdit(this.props)
+            : this.renderRead(this.props);
     }
 }

frontend/src/component/strategies/CreateStrategy/CreateStrategy.jsx

@@ -30,7 +30,7 @@ const CreateStrategy = ({
             <ConditionallyRender
                 condition={editMode}
                 show={
-                    <Typography variant="p">
+                    <Typography variant="body1">
                         Be careful! Changing a strategy definition might also
                         require changes to the implementation in the clients.
                     </Typography>

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

@@ -17,7 +17,7 @@ export default class StrategyDetails extends Component {
         toggles: PropTypes.array,
         applications: PropTypes.array,
         activeTab: PropTypes.string.isRequired,
-        strategy: PropTypes.object.isRequired,
+        strategy: PropTypes.object,
         fetchStrategies: PropTypes.func.isRequired,
         fetchApplications: PropTypes.func.isRequired,
         fetchFeatureToggles: PropTypes.func.isRequired,
@@ -38,6 +38,8 @@ export default class StrategyDetails extends Component {
 
     render() {
         const strategy = this.props.strategy;
+        if (!strategy) return null;
+
         const tabData = [
             {
                 label: 'Details',

frontend/src/component/tag-types/TagTypeList/TagTypeList.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Link, useHistory } from 'react-router-dom';
 
@@ -11,7 +11,6 @@ import {
     IconButton,
     Button,
     Tooltip,
-    Typography,
 } from '@material-ui/core';
 import HeaderTitle from '../../common/HeaderTitle';
 import PageContent from '../../common/PageContent/PageContent';
@@ -131,9 +130,7 @@ const TagTypeList = ({ tagTypes, fetchTagTypes, removeTagType }) => {
                 onClose={() => {
                     setDeletion({ open: false });
                 }}
-            >
+            />
-                <Typography>Are you sure?</Typography>
-            </Dialogue>
         </PageContent>
     );
 };

frontend/src/page/admin/api/api-key-create.jsx

@@ -1,6 +1,13 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Select, TextField, Button, MenuItem, FormControl, InputLabel } from '@material-ui/core';
+import {
+    Select,
+    TextField,
+    Button,
+    MenuItem,
+    FormControl,
+    InputLabel,
+} from '@material-ui/core';
 import Dialogue from '../../../component/common/Dialogue/Dialogue';
 import classnames from 'classnames';
 import { styles as commonStyles } from '../../../component/common';
@@ -43,9 +50,15 @@ function CreateApiKey({ addKey }) {
                 secondaryButtonText="Cancel"
                 title="Add new API key"
             >
-                <form onSubmit={submit} className={classnames(styles.addApiKeyForm, commonStyles.contentSpacing)}>
+                <form
+                    onSubmit={submit}
+                    className={classnames(
+                        styles.addApiKeyForm,
+                        commonStyles.contentSpacing
+                    )}
+                >
                     <TextField
-                        value={username}
+                        value={username || ''}
                         name="username"
                         onChange={e => setUsername(e.target.value)}
                         label="Username"
@@ -55,7 +68,11 @@ function CreateApiKey({ addKey }) {
                         variant="outlined"
                         size="small"
                     />
-                    <FormControl variant="outlined" size="small" style={{ minWidth: '120px' }}>
+                    <FormControl
+                        variant="outlined"
+                        size="small"
+                        style={{ minWidth: '120px' }}
+                    >
                         <InputLabel id="apikey_type" />
                         <Select
                             labelId="apikey_type"
@@ -63,10 +80,18 @@ function CreateApiKey({ addKey }) {
                             value={type}
                             onChange={e => setType(e.target.value)}
                         >
-                            <MenuItem value="CLIENT" key="apikey_client" title="Client">
+                            <MenuItem
+                                value="CLIENT"
+                                key="apikey_client"
+                                title="Client"
+                            >
                                 Client
                             </MenuItem>
-                            <MenuItem value="ADMIN" key="apikey_admin" title="Admin">
+                            <MenuItem
+                                value="ADMIN"
+                                key="apikey_admin"
+                                title="Admin"
+                            >
                                 Admin
                             </MenuItem>
                         </Select>

frontend/src/page/admin/users/UsersList/UsersList.jsx

@@ -240,14 +240,6 @@ function UsersList({ location }) {
 }
 
 UsersList.propTypes = {
-    roles: PropTypes.array.isRequired,
-    users: PropTypes.array.isRequired,
-    fetchUsers: PropTypes.func.isRequired,
-    removeUser: PropTypes.func.isRequired,
-    addUser: PropTypes.func.isRequired,
-    validatePassword: PropTypes.func.isRequired,
-    updateUser: PropTypes.func.isRequired,
-    changePassword: PropTypes.func.isRequired,
     location: PropTypes.object.isRequired,
 };
 

frontend/src/store/context/index.js

@@ -17,12 +17,16 @@ function getInitState() {
     return new List(DEFAULT_CONTEXT_FIELDS);
 }
 
-const strategies = (state = getInitState(), action) => {
+const context = (state = getInitState(), action) => {
     switch (action.type) {
         case RECEIVE_CONTEXT:
             return new List(action.value);
         case REMOVE_CONTEXT:
-            return state.remove(state.indexOf(action.context));
+            const index = state.findIndex(
+                item => item.name === action.context.name
+            );
+
+            return state.remove(index);
         case ADD_CONTEXT_FIELD:
             return state.push(action.context);
         case UPDATE_CONTEXT_FIELD: {
@@ -39,4 +43,4 @@ const strategies = (state = getInitState(), action) => {
     }
 };
 
-export default strategies;
+export default context;