Skip to content

Correctly handle batch calls to setState when creating secrets #1385

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
openshift-merge-robot merged 1 commit into from
Apr 5, 2019
Merged

Correctly handle batch calls to setState when creating secrets #1385

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
157 changes: 85 additions & 72 deletions frontend/public/components/secrets/create-secret.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* eslint-disable no-undef */
/* eslint-disable no-undef, no-unused-vars */
import * as _ from 'lodash-es';
import * as React from 'react';
import { Helmet } from 'react-helmet';
Expand Down Expand Up @@ -132,9 +132,12 @@ const withSecretForm = (SubForm) => class SecretFormComponent extends React.Comp
});
}
onNameChanged(event) {
const secret = {...this.state.secret};
secret.metadata.name = event.target.value;
this.setState({secret});
const name = event.target.value;
this.setState((state: BaseEditSecretState_) => {
const secret = _.cloneDeep(state.secret);
secret.metadata.name = name;
return {secret};
});
}
onFormDisable(disable) {
this.setState({
Expand Down Expand Up @@ -280,7 +283,7 @@ class ImageSecretForm extends React.Component<ImageSecretFormProps, ImageSecretF
}
}

export type ConfigEntryFormState = {
type ConfigEntryFormState = {
address: string,
username: string,
password: string,
Expand All @@ -289,14 +292,14 @@ export type ConfigEntryFormState = {
uid: string,
};

export type ConfigEntryFormProps = {
type ConfigEntryFormProps = {
id: number,
entry: Object,
onChange: Function,
};

class ConfigEntryForm extends React.Component<ConfigEntryFormProps, ConfigEntryFormState> {
constructor(props) {
constructor(props: ConfigEntryFormProps) {
super(props);
this.state = {
address: _.get(this.props.entry, 'address'),
Expand All @@ -306,24 +309,37 @@ class ConfigEntryForm extends React.Component<ConfigEntryFormProps, ConfigEntryF
auth: _.get(this.props.entry, 'auth'),
uid: _.get(this.props, 'uid'),
};
this.changeData = this.changeData.bind(this);
}
// If 'username' or 'password' fields are updated, 'auth' field has to be updated as well, else stays the same.
updateAuth(updatedFieldName) {
return _.includes(['username', 'password'], updatedFieldName)
? Base64.encode(`${this.state.username}:${this.state.password}`)
: this.state.auth;
}
changeData(event) {
const { name, value } = event.target;
this.setState({
[name]: value,
} as ConfigEntryFormState, () => {
this.setState({
auth: this.updateAuth(name),
} as ConfigEntryFormState, () => this.props.onChange(this.state, this.props.id));
});
}

propagateChange = () => {
const { onChange, id } = this.props;
onChange(this.state, id);
};

onAddressChanged: React.ReactEventHandler<HTMLInputElement> = event => {
Copy link
Member

@jhadvig jhadvig Apr 5, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Breaking down the changeData method makes sense 👍 more clear this way

this.setState({ address: event.currentTarget.value }, this.propagateChange);
};

onUsernameChanged: React.ReactEventHandler<HTMLInputElement> = event => {
const username = event.currentTarget.value;
this.setState((state: ConfigEntryFormState) => ({
username,
auth: Base64.encode(`${username}:${state.password}`),
}), this.propagateChange);
};

onPasswordChanged: React.ReactEventHandler<HTMLInputElement> = event => {
const password = event.currentTarget.value;
this.setState((state: ConfigEntryFormState) => ({
password,
auth: Base64.encode(`${state.username}:${password}`),
}), this.propagateChange);
};

onEmailChanged: React.ReactEventHandler<HTMLInputElement> = event => {
this.setState({ email: event.currentTarget.value }, this.propagateChange);
};

render() {
return <div className="co-create-image-secret__form">
<div className="form-group">
Expand All @@ -333,7 +349,7 @@ class ConfigEntryForm extends React.Component<ConfigEntryFormProps, ConfigEntryF
id={`${this.props.id}-address`}
type="text"
name="address"
onChange={this.changeData}
onChange={this.onAddressChanged}
value={this.state.address}
required />
</div>
Expand All @@ -345,7 +361,7 @@ class ConfigEntryForm extends React.Component<ConfigEntryFormProps, ConfigEntryF
id={`${this.props.id}-username`}
type="text"
name="username"
onChange={this.changeData}
onChange={this.onUsernameChanged}
value={this.state.username}
required />
</div>
Expand All @@ -357,7 +373,7 @@ class ConfigEntryForm extends React.Component<ConfigEntryFormProps, ConfigEntryF
id={`${this.props.id}-password`}
type="password"
name="password"
onChange={this.changeData}
onChange={this.onPasswordChanged}
value={this.state.password}
required />
</div>
Expand All @@ -369,15 +385,15 @@ class ConfigEntryForm extends React.Component<ConfigEntryFormProps, ConfigEntryF
id={`${this.props.id}-email`}
type="text"
name="email"
onChange={this.changeData}
onChange={this.onEmailChanged}
value={this.state.email} />
</div>
</div>
</div>;
}
}

export type CreateConfigSubformState = {
type CreateConfigSubformState = {
isDockerconfigjson: boolean,
hasDuplicate: boolean,
secretEntriesArray: {
Expand All @@ -393,7 +409,7 @@ export type CreateConfigSubformState = {
};

class CreateConfigSubform extends React.Component<CreateConfigSubformProps, CreateConfigSubformState> {
constructor(props) {
constructor(props: CreateConfigSubformProps) {
super(props);
this.state = {
// If user creates a new image secret by filling out the form a 'kubernetes.io/dockerconfigjson' secret will be created.
Expand Down Expand Up @@ -448,27 +464,25 @@ class CreateConfigSubform extends React.Component<CreateConfigSubformProps, Crea
const imageSecretObject = this.imageSecretArrayToObject(secretEntriesArray);
this.props.onChange(this.state.isDockerconfigjson ? {[AUTHS_KEY]: imageSecretObject} : imageSecretObject);
}
onDataChanged(updatedEntry, entryID) {
const updatedSecretEntriesArray = [...this.state.secretEntriesArray];
const updatedEntryData = {
uid: updatedSecretEntriesArray[entryID].uid,
entry: updatedEntry,
};
updatedSecretEntriesArray[entryID] = updatedEntryData;
this.setState({
secretEntriesArray: updatedSecretEntriesArray,
}, () => {
this.propagateEntryChange(this.state.secretEntriesArray);
});
}
removeEntry(entryID){
const updatedSecretEntriesArray = [...this.state.secretEntriesArray];
updatedSecretEntriesArray.splice(entryID, 1);
this.setState({
secretEntriesArray: updatedSecretEntriesArray,
}, () => {
this.propagateEntryChange(this.state.secretEntriesArray);
});
onDataChanged(updatedEntry, entryIndex: number) {
this.setState((state: CreateConfigSubformState) => {
const secretEntriesArray = [...state.secretEntriesArray];
const updatedEntryData = {
uid: secretEntriesArray[entryIndex].uid,
entry: updatedEntry,
};
secretEntriesArray[entryIndex] = updatedEntryData;
return {
secretEntriesArray,
};
}, () => this.propagateEntryChange(this.state.secretEntriesArray));
}
removeEntry(entryIndex: number) {
this.setState((state: CreateConfigSubformState) => {
const secretEntriesArray = [...state.secretEntriesArray];
secretEntriesArray.splice(entryIndex, 1);
return { secretEntriesArray };
}, () => this.propagateEntryChange(this.state.secretEntriesArray));
}
addEntry(){
this.setState({
Expand Down Expand Up @@ -703,18 +717,18 @@ class SSHAuthSubform extends React.Component<SSHAuthSubformProps, SSHAuthSubform
}
}

export type KeyValueEntryFormState = {
type KeyValueEntryFormState = {
key: string,
value: string,
};

export type KeyValueEntryFormProps = {
type KeyValueEntryFormProps = {
entry: KeyValueEntryFormState
id: number,
onChange: Function,
};

export type GenericSecretFormProps = {
type GenericSecretFormProps = {
onChange: Function,
stringData: {
[key: string]: string
Expand All @@ -723,7 +737,7 @@ export type GenericSecretFormProps = {
isCreate: boolean,
};

export type GenericSecretFormState = {
type GenericSecretFormState = {
secretEntriesArray: {
entry: KeyValueEntryFormState,
uid: string,
Expand Down Expand Up @@ -927,7 +941,7 @@ export const EditSecret = ({match: {params}, kind}) => <Firehose resources={[{ki
<SecretLoadingWrapper fixedKeys={['kind', 'metadata']} titleVerb="Edit" saveButtonText="Save" />
</Firehose>;

export type SecretLoadingWrapperProps = {
type SecretLoadingWrapperProps = {
obj?: {
data?: K8sResourceKind;
[key: string]: any;
Expand All @@ -937,12 +951,12 @@ export type SecretLoadingWrapperProps = {
saveButtonText: string;
};

export type SecretLoadingWrapperState = {
type SecretLoadingWrapperState = {
formComponent: React.ReactType;
secretTypeAbstraction: SecretTypeAbstraction;
};

export type BaseEditSecretState_ = {
type BaseEditSecretState_ = {
secretTypeAbstraction?: SecretTypeAbstraction;
secret: K8sResourceKind;
inProgress: boolean;
Expand All @@ -954,7 +968,7 @@ export type BaseEditSecretState_ = {
disableForm: boolean;
};

export type BaseEditSecretProps_ = {
type BaseEditSecretProps_ = {
obj?: K8sResourceKind;
fixed: any;
kind?: string;
Expand All @@ -966,14 +980,14 @@ export type BaseEditSecretProps_ = {
onCancel?: () => null;
};

export type BasicAuthSubformProps = {
type BasicAuthSubformProps = {
onChange: Function;
stringData: {
[key: string]: string;
};
};

export type ImageSecretFormState = {
type ImageSecretFormState = {
type: SecretType;
stringData: {
[key: string]: any;
Expand All @@ -982,7 +996,7 @@ export type ImageSecretFormState = {
dataKey: string;
};

export type ImageSecretFormProps = {
type ImageSecretFormProps = {
onChange: Function;
onError: Function;
onFormDisable: Function;
Expand All @@ -993,46 +1007,46 @@ export type ImageSecretFormProps = {
isCreate: boolean;
};

export type CreateConfigSubformProps = {
type CreateConfigSubformProps = {
onChange: Function;
stringData: {
[key: string]: any;
};
};

export type UploadConfigSubformState = {
type UploadConfigSubformState = {
parseError: boolean;
configFile: string;
};

export type UploadConfigSubformProps = {
type UploadConfigSubformProps = {
onChange: Function;
onDisable: Function;
stringData: {
[key: string]: Object;
};
};

export type SSHAuthSubformState = {
type SSHAuthSubformState = {
'ssh-privatekey': string;
};

export type SSHAuthSubformProps = {
type SSHAuthSubformProps = {
onChange: Function;
stringData: {
[key: string]: string;
};
};

export type SourceSecretFormState = {
type SourceSecretFormState = {
type: SecretType;
stringData: {
[key: string]: string;
};
authType: SecretType.basicAuth | SecretType.sshAuth;
};

export type SourceSecretFormProps = {
type SourceSecretFormProps = {
onChange: Function;
stringData: {
[key: string]: string;
Expand All @@ -1041,16 +1055,15 @@ export type SourceSecretFormProps = {
isCreate: boolean;
};

export type WebHookSecretFormState = {
type WebHookSecretFormState = {
stringData: {
[key: string]: string;
};
};

export type WebHookSecretFormProps = {
type WebHookSecretFormProps = {
onChange: Function;
stringData: {
WebHookSecretKey: string;
};
};
/* eslint-enable no-undef */