Skip to content

Commit

Permalink
Move general form error to bottom bar
Browse files Browse the repository at this point in the history
  • Loading branch information
@jen-huang
jen-huang committed Jul 9, 2020
1 parent 9c0ea0f commit 8b1bb92
Show file tree
Hide file tree
Showing 5 changed files with 82 additions and 112 deletions.
36 changes: 8 additions & 28 deletions ...ctions/agent_config/create_package_config_page/components/package_config_input_config.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import {
EuiText,
EuiSpacer,
EuiButtonEmpty,
EuiIconTip,
} from '@elastic/eui';
import { PackageConfigInput, RegistryVarsEntry } from '../../../../types';
import {
Expand Down Expand Up @@ -69,33 +68,14 @@ export const PackageConfigInputConfig: React.FunctionComponent<{
<EuiFlexGroup gutterSize="none" alignItems="flexStart">
<EuiFlexItem grow={1} />
<EuiFlexItem grow={5}>
<EuiFlexGroup alignItems="center" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiText color={hasErrors ? 'danger' : 'default'}>
<h4>
<FormattedMessage
id="xpack.ingestManager.createPackageConfig.stepConfigure.inputSettingsTitle"
defaultMessage="Settings"
/>
</h4>
</EuiText>
</EuiFlexItem>
{hasErrors ? (
<EuiFlexItem grow={false}>
<EuiIconTip
content={
<FormattedMessage
id="xpack.ingestManager.createPackageConfig.stepConfigure.inputConfigErrorsTooltip"
defaultMessage="Fix configuration errors"
/>
}
position="right"
type="alert"
iconProps={{ color: 'danger' }}
/>
</EuiFlexItem>
) : null}
</EuiFlexGroup>
<EuiText>
<h4>
<FormattedMessage
id="xpack.ingestManager.createPackageConfig.stepConfigure.inputSettingsTitle"
defaultMessage="Settings"
/>
</h4>
</EuiText>
<EuiSpacer size="s" />
<EuiText color="subdued" size="s">
<p>
Expand Down
3 changes: 3 additions & 0 deletions ...ections/agent_config/create_package_config_page/components/package_config_input_panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,9 @@ export const PackageConfigInputPanel: React.FunctionComponent<{
enabled,
})),
});
if (!enabled && isShowingStreams) {
setIsShowingStreams(false);
}
}}
/>
</EuiFlexItem>
Expand Down
62 changes: 37 additions & 25 deletions ...ic/applications/ingest_manager/sections/agent_config/create_package_config_page/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -408,36 +408,48 @@ export const CreatePackageConfigPage: React.FunctionComponent = () => {
: undefined
}
>
<EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem grow={false}>
{/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
<EuiButtonEmpty
color="ghost"
href={cancelUrl}
onClick={cancelClickHandler}
data-test-subj="createPackageConfigCancelButton"
>
{!isLoadingSecondStep && agentConfig && packageInfo && formState === 'INVALID' ? (
<FormattedMessage
id="xpack.ingestManager.createPackageConfig.cancelButton"
defaultMessage="Cancel"
id="xpack.ingestManager.createPackageConfig.errorOnSaveText"
defaultMessage="Your integration configuration has errors. Please fix them before saving."
/>
</EuiButtonEmpty>
) : null}
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
onClick={onSubmit}
isLoading={formState === 'LOADING'}
disabled={formState !== 'VALID'}
iconType="save"
color="primary"
fill
data-test-subj="createPackageConfigSaveButton"
>
<FormattedMessage
id="xpack.ingestManager.createPackageConfig.saveButton"
defaultMessage="Save integration"
/>
</EuiButton>
<EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
<EuiFlexItem grow={false}>
{/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
<EuiButtonEmpty
color="ghost"
href={cancelUrl}
onClick={cancelClickHandler}
data-test-subj="createPackageConfigCancelButton"
>
<FormattedMessage
id="xpack.ingestManager.createPackageConfig.cancelButton"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
onClick={onSubmit}
isLoading={formState === 'LOADING'}
disabled={formState !== 'VALID'}
iconType="save"
color="primary"
fill
data-test-subj="createPackageConfigSaveButton"
>
<FormattedMessage
id="xpack.ingestManager.createPackageConfig.saveButton"
defaultMessage="Save integration"
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiBottomBar>
Expand Down
45 changes: 4 additions & 41 deletions ...ngest_manager/sections/agent_config/create_package_config_page/step_configure_package.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,13 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React from 'react';
import styled from 'styled-components';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiHorizontalRule, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiCallOut } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { EuiHorizontalRule, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { PackageInfo, RegistryStream, NewPackageConfig, PackageConfigInput } from '../../../types';
import { Loading } from '../../../components';
import { PackageConfigValidationResults, validationHasErrors } from './services';
import { PackageConfigValidationResults } from './services';
import { PackageConfigInputPanel, CustomPackageConfig } from './components';
import { CreatePackageConfigFrom } from './types';

const HorizontalRuleNoTopMargin = styled(EuiHorizontalRule)`
margin-top: 0;
`;

const findStreamsForInputType = (
inputType: string,
packageInfo: PackageInfo
Expand Down Expand Up @@ -57,8 +50,6 @@ export const StepConfigurePackage: React.FunctionComponent<{
validationResults,
submitAttempted,
}) => {
const hasErrors = validationResults ? validationHasErrors(validationResults) : false;

// Configure inputs (and their streams)
// Assume packages only export one config template for now
const renderConfigureInputs = () =>
Expand All @@ -67,7 +58,7 @@ export const StepConfigurePackage: React.FunctionComponent<{
packageInfo.config_templates[0].inputs &&
packageInfo.config_templates[0].inputs.length ? (
<>
<HorizontalRuleNoTopMargin margin="m" />
<EuiHorizontalRule margin="m" />
<EuiFlexGroup direction="column" gutterSize="none">
{packageInfo.config_templates[0].inputs.map((packageInput) => {
const packageConfigInput = packageConfig.inputs.find(
Expand Down Expand Up @@ -111,33 +102,5 @@ export const StepConfigurePackage: React.FunctionComponent<{
/>
);

return validationResults ? (
<EuiFlexGroup direction="column" gutterSize="none">
<EuiFlexItem>{renderConfigureInputs()}</EuiFlexItem>
{hasErrors && submitAttempted ? (
<EuiFlexItem>
<EuiSpacer size="m" />
<EuiCallOut
title={i18n.translate(
'xpack.ingestManager.createPackageConfig.stepConfigure.validationErrorTitle',
{
defaultMessage: 'Your integration configuration has errors',
}
)}
color="danger"
>
<p>
<FormattedMessage
id="xpack.ingestManager.createPackageConfig.stepConfigure.validationErrorText"
defaultMessage="Please fix the above errors before continuing"
/>
</p>
</EuiCallOut>
<EuiSpacer size="m" />
</EuiFlexItem>
) : null}
</EuiFlexGroup>
) : (
<Loading />
);
return validationResults ? renderConfigureInputs() : <Loading />;
};
48 changes: 30 additions & 18 deletions ...blic/applications/ingest_manager/sections/agent_config/edit_package_config_page/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -328,29 +328,41 @@ export const EditPackageConfigPage: React.FunctionComponent = () => {
: undefined
}
>
<EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem grow={false}>
<EuiButtonEmpty color="ghost" href={cancelUrl}>
{agentConfig && packageInfo && formState === 'INVALID' ? (
<FormattedMessage
id="xpack.ingestManager.editPackageConfig.cancelButton"
defaultMessage="Cancel"
id="xpack.ingestManager.createPackageConfig.errorOnSaveText"
defaultMessage="Your integration configuration has errors. Please fix them before saving."
/>
</EuiButtonEmpty>
) : null}
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
onClick={onSubmit}
isLoading={formState === 'LOADING'}
disabled={formState !== 'VALID'}
iconType="save"
color="primary"
fill
>
<FormattedMessage
id="xpack.ingestManager.editPackageConfig.saveButton"
defaultMessage="Save integration"
/>
</EuiButton>
<EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
<EuiFlexItem grow={false}>
<EuiButtonEmpty color="ghost" href={cancelUrl}>
<FormattedMessage
id="xpack.ingestManager.editPackageConfig.cancelButton"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
onClick={onSubmit}
isLoading={formState === 'LOADING'}
disabled={formState !== 'VALID'}
iconType="save"
color="primary"
fill
>
<FormattedMessage
id="xpack.ingestManager.editPackageConfig.saveButton"
defaultMessage="Save integration"
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiBottomBar>
Expand Down

0 comments on commit 8b1bb92

Please sign in to comment.