Skip to content

Commit

Permalink
[MD]Refactor layout and validate input fields for listing and create …
Browse files Browse the repository at this point in the history
…pages (opensearch-project#2202)

Signed-off-by: Louis Chu <clingzhi@amazon.com>

Signed-off-by: Louis Chu <clingzhi@amazon.com>
  • Loading branch information
noCharger authored and kristenTian committed Sep 12, 2022
1 parent 97a65a0 commit 16f4ca8
Show file tree
Hide file tree
Showing 25 changed files with 526 additions and 243 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*/

import { i18n } from '@osd/i18n';
import { CredentialEditPageItem } from './types';
import { EditCredentialItem } from './types';

export function getListBreadcrumbs() {
return [
Expand All @@ -29,7 +29,7 @@ export function getCreateBreadcrumbs() {
];
}

export function getEditBreadcrumbs(credential: CredentialEditPageItem) {
export function getEditBreadcrumbs(credential: EditCredentialItem) {
return [
...getListBreadcrumbs(),
{
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,261 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import React from 'react';

import {
EuiForm,
EuiFormRow,
EuiFieldText,
EuiButton,
EuiFieldPassword,
EuiPageContent,
EuiHorizontalRule,
EuiSpacer,
EuiText,
} from '@elastic/eui';
import { FormattedMessage } from '@osd/i18n/react';
import { DocLinksStart } from 'src/core/public';
import { context as contextType } from '../../../../../../opensearch_dashboards_react/public';

import { CredentialManagmentContextValue } from '../../../../types';
import { CreateCredentialItem } from '../../../types';
import { Header } from '../header';

export interface CredentialFormProps {
docLinks: DocLinksStart;
handleSubmit: (formValues: CreateCredentialItem) => void;
}

export interface CredentialFormState {
formErrors: string[];
formErrorsByField: CredentialFormValidation;
title: string;
description: string;
username: string;
password: string;
dual: boolean;
}

interface CredentialFormValidation {
title: string[];
description: string[];
username: string[];
password: string[];
}

const defaultValidation: CredentialFormValidation = {
title: [],
description: [],
username: [],
password: [],
};

export class CredentialForm extends React.Component<CredentialFormProps, CredentialFormState> {
static contextType = contextType;
public readonly context!: CredentialManagmentContextValue;

constructor(props: CredentialFormProps, context: CredentialManagmentContextValue) {
super(props, context);

this.state = {
formErrors: [],
formErrorsByField: { ...defaultValidation },
title: '',
description: '',
username: '',
password: '',
dual: true,
};
}

/* Validations */

isFormValid = () => {
const validationByField: CredentialFormValidation = {
title: [],
description: [],
username: [],
password: [],
};
const formErrorMessages: string[] = [];
/* Title validation */
if (!this.state.title) {
validationByField.title.push('Title should not be empty');
formErrorMessages.push('Title should not be empty');
}
/* Username Validation */
if (!this.state.username) {
validationByField.username.push('Username should not be empty');
formErrorMessages.push('Username should not be empty');
}
/* Password Validation */
if (!this.state.password) {
validationByField.password.push('Password should not be empty');
formErrorMessages.push('Password should not be empty');
}

this.setState({
formErrors: formErrorMessages,
formErrorsByField: { ...validationByField },
});
return formErrorMessages.length === 0;
};

/* Events */

onChangeTitle = (e: { target: { value: any } }) => {
this.setState({ title: e.target.value }, () => {
if (this.state.formErrorsByField.title.length) {
this.isFormValid();
}
});
};

onChangeDescription = (e: { target: { value: any } }) => {
this.setState({ description: e.target.value }, () => {
if (this.state.formErrorsByField.description.length) {
this.isFormValid();
}
});
};

onChangeUsername = (e: { target: { value: any } }) => {
this.setState({ username: e.target.value }, () => {
if (this.state.formErrorsByField.username.length) {
this.isFormValid();
}
});
};

onChangePassword = (e: { target: { value: any } }) => {
this.setState({ password: e.target.value }, () => {
if (this.state.formErrorsByField.password.length) {
this.isFormValid();
}
});
};

onClickSubmitForm = () => {
if (this.isFormValid()) {
const formValues: CreateCredentialItem = {
title: this.state.title,
description: this.state.description,
username: this.state.username,
password: this.state.password,
};
this.props.handleSubmit(formValues);
}
};

/* Render methods */

renderHeader() {
const { docLinks } = this.props;
return <Header docLinks={docLinks} />;
}

renderContent = () => {
const header = this.renderHeader();

return (
<EuiPageContent>
{header}
<EuiHorizontalRule />
<EuiForm
data-test-subj="credential-creation"
isInvalid={!!this.state.formErrors.length}
error={this.state.formErrors}
>
{/* Title */}
<EuiFormRow
label="Title"
isInvalid={!!this.state.formErrorsByField.title.length}
error={this.state.formErrorsByField.title}
helpText="Tip: Title your stored credential with an employee or team name"
>
<EuiFieldText
name="credentialTitle"
value={this.state.title || ''}
placeholder="Text field (placeholder)"
isInvalid={!!this.state.formErrorsByField.title.length}
onChange={this.onChangeTitle}
/>
</EuiFormRow>

{/* Description */}
<EuiFormRow
label="Description"
isInvalid={!!this.state.formErrorsByField.description.length}
error={this.state.formErrorsByField.description}
helpText="Describe what this credential is used for"
>
<EuiFieldText
name="description"
value={this.state.description || ''}
placeholder="Text field (placeholder)"
isInvalid={!!this.state.formErrorsByField.description.length}
onChange={this.onChangeDescription}
/>
</EuiFormRow>

{/* Authentication */}
<EuiSpacer size="xl" />
<EuiText grow={false}>
<h4>
<FormattedMessage
id="createCredentialForm.authenticationHeader"
defaultMessage="Authentication"
/>
</h4>
</EuiText>
<EuiSpacer size="s" />

{/* Username */}
<EuiFormRow
label="Username"
isInvalid={!!this.state.formErrorsByField.username.length}
error={this.state.formErrorsByField.username}
>
<EuiFieldText
name="username"
value={this.state.username || ''}
placeholder="Text field (placeholder)"
isInvalid={!!this.state.formErrorsByField.username.length}
onChange={this.onChangeUsername}
/>
</EuiFormRow>

{/* Password */}
<EuiFormRow
label="Password"
isInvalid={!!this.state.formErrorsByField.password.length}
error={this.state.formErrorsByField.password}
>
<EuiFieldPassword
name="password"
type={this.state.dual ? 'dual' : undefined}
value={this.state.password || ''}
placeholder="Password field (placeholder)"
isInvalid={!!this.state.formErrorsByField.password.length}
onChange={this.onChangePassword}
/>
</EuiFormRow>

<EuiSpacer size="xl" />

{/* Create Credential button*/}
<EuiButton type="submit" fill onClick={this.onClickSubmitForm}>
Create stored credential
</EuiButton>
</EuiForm>
</EuiPageContent>
);
};

render() {
return <>{this.renderContent()}</>;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

export { CredentialForm } from './create_credential_form';
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,21 @@ import { EuiBetaBadge, EuiSpacer, EuiTitle, EuiText, EuiCode, EuiLink } from '@e

import { i18n } from '@osd/i18n';
import { FormattedMessage } from '@osd/i18n/react';
import { DocLinksStart } from 'opensearch-dashboards/public';
import { DocLinksStart } from 'src/core/public';
import { useOpenSearchDashboards } from '../../../../../../opensearch_dashboards_react/public';
import { CredentialManagementContext } from '../../../../types';
export const Header = ({ docLinks }: { docLinks: DocLinksStart }) => {

export const Header = ({
prompt,
docLinks,
}: {
prompt?: React.ReactNode;
docLinks: DocLinksStart;
}) => {
const changeTitle = useOpenSearchDashboards<CredentialManagementContext>().services.chrome
.docTitle.change;
const createCredentialHeader = i18n.translate('credentialManagement.createIndexPatternHeader', {
defaultMessage: 'Save Your Credential',
defaultMessage: 'Create Stored Credential',
});

changeTitle(createCredentialHeader);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

export { CredentialForm } from './create_credential_form';
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

export { CredentialForm } from './components';
export { LocalizedContent } from './text_content';
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@
* SPDX-License-Identifier: Apache-2.0
*/

export * as localizedContent from '../text_content/text_content';
export * as LocalizedContent from '../text_content/text_content';
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const CreateButton = ({ history }: Props) => {
>
<FormattedMessage
id="credentialManagement.credentialsTable.createBtn"
defaultMessage="Save your credential"
defaultMessage="Create stored credential"
/>
</EuiButton>
);
Expand Down
Loading

0 comments on commit 16f4ca8

Please sign in to comment.