From 584f92cc0637bca0023d6e70ce2c8aae32d0a854 Mon Sep 17 00:00:00 2001
From: Nicolas Chaulet <nicolas.chaulet@elastic.co>
Date: Wed, 15 Sep 2021 11:14:37 -0400
Subject: [PATCH] [Fleet] Wrap package policy editor errors in EuiErrorBoundary
 (#112263)

---
 .../create_package_policy_page/index.tsx      | 134 +++++++-------
 .../edit_package_policy_page/index.tsx        | 173 +++++++++---------
 2 files changed, 158 insertions(+), 149 deletions(-)

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/index.tsx
index 1f7fa0ceb354..5e00bce5d6c6 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/index.tsx
@@ -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>
   );
 };
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/index.tsx
index a36bc988da89..040070bcff7c 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/index.tsx
@@ -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>
   );
 });