1
0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00

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
This commit is contained in:
Fredrik Strand Oseberg 2021-05-07 08:42:51 +02:00 committed by GitHub
parent ad09c4039a
commit cc54fad3a4
11 changed files with 114 additions and 47 deletions

View File

@ -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;

View File

@ -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 => (

View File

@ -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>}

View File

@ -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}
onChange={evt => updateConstraint(evt.target.value, 'contextName')}
value={constraint.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}
defaultValue={values}
getOptionSelected={(option, value) =>
option.value === value.value
}
filterSelectedOptions
filterOptions={options => options.filter(o => !values.some(v => v.value === o.value))}
onChange={(evt, values) => handleChangeValue(values)}
renderInput={params => <TextField {...params} variant="outlined" label="Values" />}
filterOptions={options =>
options.filter(
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')
}
/>
}
/>

View File

@ -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);
}
}

View File

@ -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>

View File

@ -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',

View File

@ -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>
);
};

View File

@ -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>

View File

@ -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,
};

View File

@ -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;