UX update for ingest manager edit/create datasource for endpoint

elastic · Jun 26, 2020 · 7e55c41 · 7e55c41
1 parent ff3ee41
commit 7e55c41
Showing 1 changed file with 49 additions and 21 deletions.
diff --git a/...n/public/management/pages/policy/view/ingest_manager_integration/configure_datasource.tsx b/...n/public/management/pages/policy/view/ingest_manager_integration/configure_datasource.tsx
@@ -6,7 +6,8 @@
 
 import React, { memo } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiEmptyPrompt, EuiText } from '@elastic/eui';
+import { EuiCallOut, EuiText, EuiTitle, EuiButton, EuiSpacer } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import { useKibana } from '../../../../../../../../../src/plugins/kibana_react/public';
 import { LinkToApp } from '../../../../../common/components/endpoint/link_to_app';
 import {
@@ -28,36 +29,63 @@ export const ConfigureEndpointDatasource = memo<CustomConfigureDatasourceContent
     }
 
     return (
-      <EuiEmptyPrompt
-        data-test-subj={`endpointDatasourceConfig_${from === 'edit' ? 'edit' : 'create'}`}
-        body={
-          <EuiText>
+      <>
+        <EuiTitle size="xs">
+          <h4>
+            <FormattedMessage
+              id="xpack.securitySolution.endpoint.ingestManager.policyConfiguration"
+              defaultMessage="Policy Configuration"
+            />
+          </h4>
+        </EuiTitle>
+        <EuiSpacer size="m" />
+        <EuiCallOut
+          data-test-subj={`endpointDatasourceConfig_${from === 'edit' ? 'edit' : 'create'}`}
+          iconType="iInCircle"
+          title={i18n.translate(
+            'xpack.securitySolution.endpoint.ingestManager.policyConfiguration.calloutTitle',
+            {
+              defaultMessage: 'Manage Policy configuration in the Security app',
+            }
+          )}
+        >
+          <EuiText size="s">
             <p>
               {from === 'edit' ? (
-                <LinkToApp
-                  data-test-subj="editLinkToPolicyDetails"
-                  appId="securitySolution:management"
-                  appPath={policyUrl}
-                  // Cannot use formalUrl here since the code is called in Ingest, which does not use redux
-                  href={`${services.application.getUrlForApp(
-                    'securitySolution:management'
-                  )}${policyUrl}`}
-                >
+                <>
                   <FormattedMessage
-                    id="xpack.securitySolution.endpoint.ingestManager.editDatasource.stepConfigure"
-                    defaultMessage="View and configure Security Policy"
+                    id="xpack.securitySolution.endpoint.ingestManager.editDatasource.endpointConfiguration"
+                    defaultMessage="You can make changes to the Policy Configuration in the Security app. Fleet will deploy changes to your agents whenever your Policy changes."
                   />
-                </LinkToApp>
+                  <EuiSpacer />
+                  <EuiButton>
+                    <LinkToApp
+                      data-test-subj="editLinkToPolicyDetails"
+                      appId="securitySolution:management"
+                      className="editLinkToPolicyDetails"
+                      appPath={policyUrl}
+                      // Cannot use formalUrl here since the code is called in Ingest, which does not use redux
+                      href={`${services.application.getUrlForApp(
+                        'securitySolution:management'
+                      )}${policyUrl}`}
+                    >
+                      <FormattedMessage
+                        id="xpack.securitySolution.endpoint.ingestManager.editDatasource.configurePolicyLink"
+                        defaultMessage="Configure Policy"
+                      />
+                    </LinkToApp>
+                  </EuiButton>
+                </>
               ) : (
                 <FormattedMessage
-                  id="xpack.securitySolution.endpoint.ingestManager.createDatasource.stepConfigure"
-                  defaultMessage="The recommended Security Policy has been associated with this data source. The Security Policy can be edited in the Security application once your data source has been saved."
+                  id="xpack.securitySolution.endpoint.ingestManager.createDatasource.endpointConfiguration"
+                  defaultMessage="Any agents that use this agent configuration will use a basic policy. You can make changes to this policy in the Security app, and Fleet will deploy those changes to your agents."
                 />
               )}
             </p>
           </EuiText>
-        }
-      />
+        </EuiCallOut>
+      </>
     );
   }
 );