[Fleet] Wrap package policy editor errors in EuiErrorBoundary (#112263)
This commit is contained in:
parent
a4229399f6
commit
584f92cc06
|
@ -20,6 +20,7 @@ import {
|
|||
EuiFlexItem,
|
||||
EuiSpacer,
|
||||
EuiLink,
|
||||
EuiErrorBoundary,
|
||||
} from '@elastic/eui';
|
||||
import type { EuiStepProps } from '@elastic/eui/src/components/steps/step';
|
||||
import type { ApplicationStart } from 'kibana/public';
|
||||
|
@ -503,70 +504,75 @@ export const CreatePackagePolicyPage: React.FunctionComponent = () => {
|
|||
|
||||
return (
|
||||
<CreatePackagePolicyPageLayout {...layoutProps} data-test-subj="createPackagePolicy">
|
||||
{formState === 'CONFIRM' && agentPolicy && (
|
||||
<ConfirmDeployAgentPolicyModal
|
||||
agentCount={agentCount}
|
||||
agentPolicy={agentPolicy}
|
||||
onConfirm={onSubmit}
|
||||
onCancel={() => setFormState('VALID')}
|
||||
/>
|
||||
)}
|
||||
{packageInfo && (
|
||||
<IntegrationBreadcrumb
|
||||
pkgTitle={integrationInfo?.title || packageInfo.title}
|
||||
pkgkey={pkgKeyFromPackageInfo(packageInfo)}
|
||||
integration={integrationInfo?.name}
|
||||
/>
|
||||
)}
|
||||
<StepsWithLessPadding steps={steps} />
|
||||
<EuiSpacer size="xl" />
|
||||
<EuiSpacer size="xl" />
|
||||
<CustomEuiBottomBar data-test-subj="integrationsBottomBar">
|
||||
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
|
||||
<EuiFlexItem grow={false}>
|
||||
{!isLoadingAgentPolicyStep && agentPolicy && packageInfo && formState === 'INVALID' ? (
|
||||
<FormattedMessage
|
||||
id="xpack.fleet.createPackagePolicy.errorOnSaveText"
|
||||
defaultMessage="Your integration policy has errors. Please fix them before saving."
|
||||
/>
|
||||
) : null}
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<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="createPackagePolicyCancelButton"
|
||||
>
|
||||
<FormattedMessage
|
||||
id="xpack.fleet.createPackagePolicy.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="createPackagePolicySaveButton"
|
||||
>
|
||||
<FormattedMessage
|
||||
id="xpack.fleet.createPackagePolicy.saveButton"
|
||||
defaultMessage="Save integration"
|
||||
/>
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</CustomEuiBottomBar>
|
||||
<EuiErrorBoundary>
|
||||
{formState === 'CONFIRM' && agentPolicy && (
|
||||
<ConfirmDeployAgentPolicyModal
|
||||
agentCount={agentCount}
|
||||
agentPolicy={agentPolicy}
|
||||
onConfirm={onSubmit}
|
||||
onCancel={() => setFormState('VALID')}
|
||||
/>
|
||||
)}
|
||||
{packageInfo && (
|
||||
<IntegrationBreadcrumb
|
||||
pkgTitle={integrationInfo?.title || packageInfo.title}
|
||||
pkgkey={pkgKeyFromPackageInfo(packageInfo)}
|
||||
integration={integrationInfo?.name}
|
||||
/>
|
||||
)}
|
||||
<StepsWithLessPadding steps={steps} />
|
||||
<EuiSpacer size="xl" />
|
||||
<EuiSpacer size="xl" />
|
||||
<CustomEuiBottomBar data-test-subj="integrationsBottomBar">
|
||||
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
|
||||
<EuiFlexItem grow={false}>
|
||||
{!isLoadingAgentPolicyStep &&
|
||||
agentPolicy &&
|
||||
packageInfo &&
|
||||
formState === 'INVALID' ? (
|
||||
<FormattedMessage
|
||||
id="xpack.fleet.createPackagePolicy.errorOnSaveText"
|
||||
defaultMessage="Your integration policy has errors. Please fix them before saving."
|
||||
/>
|
||||
) : null}
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<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="createPackagePolicyCancelButton"
|
||||
>
|
||||
<FormattedMessage
|
||||
id="xpack.fleet.createPackagePolicy.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="createPackagePolicySaveButton"
|
||||
>
|
||||
<FormattedMessage
|
||||
id="xpack.fleet.createPackagePolicy.saveButton"
|
||||
defaultMessage="Save integration"
|
||||
/>
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</CustomEuiBottomBar>
|
||||
</EuiErrorBoundary>
|
||||
</CreatePackagePolicyPageLayout>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -25,6 +25,7 @@ import {
|
|||
EuiFlyoutBody,
|
||||
EuiFlyoutHeader,
|
||||
EuiTitle,
|
||||
EuiErrorBoundary,
|
||||
} from '@elastic/eui';
|
||||
import styled from 'styled-components';
|
||||
|
||||
|
@ -510,93 +511,95 @@ export const EditPackagePolicyForm = memo<{
|
|||
|
||||
return (
|
||||
<CreatePackagePolicyPageLayout {...layoutProps} data-test-subj="editPackagePolicy">
|
||||
{isLoadingData ? (
|
||||
<Loading />
|
||||
) : loadingError || !agentPolicy || !packageInfo ? (
|
||||
<Error
|
||||
title={
|
||||
<FormattedMessage
|
||||
id="xpack.fleet.editPackagePolicy.errorLoadingDataTitle"
|
||||
defaultMessage="Error loading data"
|
||||
/>
|
||||
}
|
||||
error={
|
||||
loadingError ||
|
||||
i18n.translate('xpack.fleet.editPackagePolicy.errorLoadingDataMessage', {
|
||||
defaultMessage: 'There was an error loading this integration information',
|
||||
})
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<Breadcrumb
|
||||
agentPolicyName={agentPolicy.name}
|
||||
from={from}
|
||||
packagePolicyName={packagePolicy.name}
|
||||
pkgkey={pkgKeyFromPackageInfo(packageInfo)}
|
||||
pkgTitle={packageInfo.title}
|
||||
policyId={policyId}
|
||||
<EuiErrorBoundary>
|
||||
{isLoadingData ? (
|
||||
<Loading />
|
||||
) : loadingError || !agentPolicy || !packageInfo ? (
|
||||
<Error
|
||||
title={
|
||||
<FormattedMessage
|
||||
id="xpack.fleet.editPackagePolicy.errorLoadingDataTitle"
|
||||
defaultMessage="Error loading data"
|
||||
/>
|
||||
}
|
||||
error={
|
||||
loadingError ||
|
||||
i18n.translate('xpack.fleet.editPackagePolicy.errorLoadingDataMessage', {
|
||||
defaultMessage: 'There was an error loading this integration information',
|
||||
})
|
||||
}
|
||||
/>
|
||||
{formState === 'CONFIRM' && (
|
||||
<ConfirmDeployAgentPolicyModal
|
||||
agentCount={agentCount}
|
||||
agentPolicy={agentPolicy}
|
||||
onConfirm={onSubmit}
|
||||
onCancel={() => setFormState('VALID')}
|
||||
) : (
|
||||
<>
|
||||
<Breadcrumb
|
||||
agentPolicyName={agentPolicy.name}
|
||||
from={from}
|
||||
packagePolicyName={packagePolicy.name}
|
||||
pkgkey={pkgKeyFromPackageInfo(packageInfo)}
|
||||
pkgTitle={packageInfo.title}
|
||||
policyId={policyId}
|
||||
/>
|
||||
)}
|
||||
{isUpgrade && dryRunData && (
|
||||
<>
|
||||
<UpgradeStatusCallout dryRunData={dryRunData} />
|
||||
<EuiSpacer size="xxl" />
|
||||
</>
|
||||
)}
|
||||
{configurePackage}
|
||||
{/* Extra space to accomodate the EuiBottomBar height */}
|
||||
<EuiSpacer size="xxl" />
|
||||
<EuiSpacer size="xxl" />
|
||||
<EuiBottomBar>
|
||||
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
|
||||
<EuiFlexItem grow={false}>
|
||||
{agentPolicy && packageInfo && formState === 'INVALID' ? (
|
||||
<FormattedMessage
|
||||
id="xpack.fleet.createPackagePolicy.errorOnSaveText"
|
||||
defaultMessage="Your integration policy has errors. Please fix them before saving."
|
||||
/>
|
||||
) : null}
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButtonEmpty color="ghost" href={cancelUrl}>
|
||||
<FormattedMessage
|
||||
id="xpack.fleet.editPackagePolicy.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="saveIntegration"
|
||||
>
|
||||
<FormattedMessage
|
||||
id="xpack.fleet.editPackagePolicy.saveButton"
|
||||
defaultMessage="Save integration"
|
||||
/>
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiBottomBar>
|
||||
</>
|
||||
)}
|
||||
{formState === 'CONFIRM' && (
|
||||
<ConfirmDeployAgentPolicyModal
|
||||
agentCount={agentCount}
|
||||
agentPolicy={agentPolicy}
|
||||
onConfirm={onSubmit}
|
||||
onCancel={() => setFormState('VALID')}
|
||||
/>
|
||||
)}
|
||||
{isUpgrade && dryRunData && (
|
||||
<>
|
||||
<UpgradeStatusCallout dryRunData={dryRunData} />
|
||||
<EuiSpacer size="xxl" />
|
||||
</>
|
||||
)}
|
||||
{configurePackage}
|
||||
{/* Extra space to accomodate the EuiBottomBar height */}
|
||||
<EuiSpacer size="xxl" />
|
||||
<EuiSpacer size="xxl" />
|
||||
<EuiBottomBar>
|
||||
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
|
||||
<EuiFlexItem grow={false}>
|
||||
{agentPolicy && packageInfo && formState === 'INVALID' ? (
|
||||
<FormattedMessage
|
||||
id="xpack.fleet.createPackagePolicy.errorOnSaveText"
|
||||
defaultMessage="Your integration policy has errors. Please fix them before saving."
|
||||
/>
|
||||
) : null}
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButtonEmpty color="ghost" href={cancelUrl}>
|
||||
<FormattedMessage
|
||||
id="xpack.fleet.editPackagePolicy.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="saveIntegration"
|
||||
>
|
||||
<FormattedMessage
|
||||
id="xpack.fleet.editPackagePolicy.saveButton"
|
||||
defaultMessage="Save integration"
|
||||
/>
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiBottomBar>
|
||||
</>
|
||||
)}
|
||||
</EuiErrorBoundary>
|
||||
</CreatePackagePolicyPageLayout>
|
||||
);
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue