Skip to content

Commit

Permalink
[Ingest Manager] Simplify add/edit package config (integration) form (#…
Browse files Browse the repository at this point in the history 
…71187) (#71460)

* Match add integration page with designs

* Clean up package config layout code

* Match edit integration config page with designs

* Fix typing and i18n issues

* Add back data test subj

* Add loading UI for second step; code clean up

* Fix limited packages incorrect response

* Add ability to create agent config when selecting config to add integration to

* Add error count to input-level panel; memoize children components

* Add error count next to all advanced options toggles

* Move general form error to bottom bar

* #69750 Auto-expand inputs with required & empty (invalid) vars

* #68019 Enforce unique package config names, per agent config

* Fix typing

* Fix i18n

* Fix reloading when new agent config _wasn't_ created

* Memoize edit integration and fix fields not collapsing on edit

* Really fix types
# Conflicts:
#	x-pack/plugins/translations/translations/ja-JP.json
#	x-pack/plugins/translations/translations/zh-CN.json
  • Loading branch information
@jen-huang
jen-huang authored Jul 13, 2020
1 parent e2d7e2c commit 81b4f82
Show file tree
Hide file tree
Showing 24 changed files with 1,594 additions and 1,008 deletions.
252 changes: 135 additions & 117 deletions ...ons/ingest_manager/sections/agent_config/create_package_config_page/components/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import React from 'react';
import React, { memo, useMemo } from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
import {
EuiFlexGroup,
Expand All @@ -27,130 +27,148 @@ export const CreatePackageConfigPageLayout: React.FunctionComponent<{
agentConfig?: AgentConfig;
packageInfo?: PackageInfo;
'data-test-subj'?: string;
}> = ({
from,
cancelUrl,
onCancel,
agentConfig,
packageInfo,
children,
'data-test-subj': dataTestSubj,
}) => {
const leftColumn = (
<EuiFlexGroup direction="column" gutterSize="s" alignItems="flexStart">
<EuiFlexItem>
{/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
<EuiButtonEmpty
size="xs"
iconType="arrowLeft"
flush="left"
href={cancelUrl}
onClick={onCancel}
data-test-subj={`${dataTestSubj}_cancelBackLink`}
>
<FormattedMessage
id="xpack.ingestManager.createPackageConfig.cancelLinkText"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem>
}> = memo(
({
from,
cancelUrl,
onCancel,
agentConfig,
packageInfo,
children,
'data-test-subj': dataTestSubj,
}) => {
const pageTitle = useMemo(() => {
if ((from === 'package' || from === 'edit') && packageInfo) {
return (
<EuiFlexGroup alignItems="center" gutterSize="m">
<EuiFlexItem grow={false}>
<PackageIcon
packageName={packageInfo?.name || ''}
version={packageInfo?.version || ''}
icons={packageInfo?.icons}
size="xl"
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiText>
<h1>
{from === 'edit' ? (
<FormattedMessage
id="xpack.ingestManager.editPackageConfig.pageTitleWithPackageName"
defaultMessage="Edit {packageName} integration"
values={{
packageName: packageInfo.title,
}}
/>
) : (
<FormattedMessage
id="xpack.ingestManager.createPackageConfig.pageTitleWithPackageName"
defaultMessage="Add {packageName} integration"
values={{
packageName: packageInfo.title,
}}
/>
)}
</h1>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
);
}

return from === 'edit' ? (
<EuiText>
<h1>
{from === 'edit' ? (
<FormattedMessage
id="xpack.ingestManager.editPackageConfig.pageTitle"
defaultMessage="Edit integration"
/>
) : (
<FormattedMessage
id="xpack.ingestManager.createPackageConfig.pageTitle"
defaultMessage="Add integration"
/>
)}
<FormattedMessage
id="xpack.ingestManager.editPackageConfig.pageTitle"
defaultMessage="Edit integration"
/>
</h1>
</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiSpacer size="s" />
<EuiText color="subdued" size="s">
{from === 'edit' ? (
) : (
<EuiText>
<h1>
<FormattedMessage
id="xpack.ingestManager.editPackageConfig.pageDescription"
defaultMessage="Follow the instructions below to edit this integration."
id="xpack.ingestManager.createPackageConfig.pageTitle"
defaultMessage="Add integration"
/>
) : from === 'config' ? (
</h1>
</EuiText>
);
}, [from, packageInfo]);

const pageDescription = useMemo(() => {
return from === 'edit' ? (
<FormattedMessage
id="xpack.ingestManager.editPackageConfig.pageDescription"
defaultMessage="Modify integration settings and deploy changes to the selected agent configuration."
/>
) : from === 'config' ? (
<FormattedMessage
id="xpack.ingestManager.createPackageConfig.pageDescriptionfromConfig"
defaultMessage="Configure an integration for the selected agent configuration."
/>
) : (
<FormattedMessage
id="xpack.ingestManager.createPackageConfig.pageDescriptionfromPackage"
defaultMessage="Follow the instructions below to add this integration to an agent configuraiton."
/>
);
}, [from]);

const leftColumn = (
<EuiFlexGroup direction="column" gutterSize="s" alignItems="flexStart">
<EuiFlexItem>
{/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
<EuiButtonEmpty
size="xs"
iconType="arrowLeft"
flush="left"
href={cancelUrl}
onClick={onCancel}
data-test-subj={`${dataTestSubj}_cancelBackLink`}
>
<FormattedMessage
id="xpack.ingestManager.createPackageConfig.pageDescriptionfromConfig"
defaultMessage="Follow the instructions below to add an integration to this agent configuration."
id="xpack.ingestManager.createPackageConfig.cancelLinkText"
defaultMessage="Cancel"
/>
) : (
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem>{pageTitle}</EuiFlexItem>
<EuiFlexItem>
<EuiSpacer size="s" />
<EuiText color="subdued" size="s">
{pageDescription}
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
);

const rightColumn =
agentConfig && (from === 'config' || from === 'edit') ? (
<EuiDescriptionList className="eui-textRight" textStyle="reverse">
<EuiDescriptionListTitle>
<FormattedMessage
id="xpack.ingestManager.createPackageConfig.pageDescriptionfromPackage"
defaultMessage="Follow the instructions below to add this integration to an agent configuration."
id="xpack.ingestManager.createPackageConfig.agentConfigurationNameLabel"
defaultMessage="Agent configuration"
/>
)}
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
);
const rightColumn = (
<EuiFlexGroup justifyContent="flexEnd" direction={'row'} gutterSize="xl">
<EuiFlexItem grow={false}>
<EuiSpacer size="s" />
{agentConfig && (from === 'config' || from === 'edit') ? (
<EuiDescriptionList style={{ textAlign: 'right' }} textStyle="reverse">
<EuiDescriptionListTitle>
<FormattedMessage
id="xpack.ingestManager.createPackageConfig.agentConfigurationNameLabel"
defaultMessage="Configuration"
/>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
{agentConfig?.name || '-'}
</EuiDescriptionListDescription>
</EuiDescriptionList>
) : null}
{packageInfo && from === 'package' ? (
<EuiDescriptionList style={{ textAlign: 'right' }} textStyle="reverse">
<EuiDescriptionListTitle>
<FormattedMessage
id="xpack.ingestManager.createPackageConfig.packageNameLabel"
defaultMessage="Integration"
/>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
<EuiFlexGroup justifyContent="flexEnd" alignItems="center" gutterSize="s">
<EuiFlexItem grow={false}>
<PackageIcon
packageName={packageInfo?.name || ''}
version={packageInfo?.version || ''}
icons={packageInfo?.icons}
size="m"
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
{packageInfo?.title || packageInfo?.name || '-'}
</EuiFlexItem>
</EuiFlexGroup>
</EuiDescriptionListDescription>
</EuiDescriptionList>
) : null}
</EuiFlexItem>
</EuiFlexGroup>
);
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>{agentConfig?.name || '-'}</EuiDescriptionListDescription>
</EuiDescriptionList>
) : undefined;

const maxWidth = 770;
return (
<WithHeaderLayout
restrictHeaderWidth={maxWidth}
restrictWidth={maxWidth}
leftColumn={leftColumn}
rightColumn={rightColumn}
rightColumnGrow={false}
data-test-subj={dataTestSubj}
>
{children}
</WithHeaderLayout>
);
};
const maxWidth = 770;
return (
<WithHeaderLayout
restrictHeaderWidth={maxWidth}
restrictWidth={maxWidth}
leftColumn={leftColumn}
rightColumn={rightColumn}
rightColumnGrow={false}
data-test-subj={dataTestSubj}
>
{children}
</WithHeaderLayout>
);
}
);
Loading

0 comments on commit 81b4f82

Please sign in to comment.