From 7e55c41e4d7824dec393ab3c23d04cdde3398253 Mon Sep 17 00:00:00 2001
From: Candace Park <candace.park@elastic.co>
Date: Fri, 26 Jun 2020 10:57:13 -0400
Subject: [PATCH 1/3] UX update for ingest manager edit/create datasource for
 endpoint

---
 .../configure_datasource.tsx                  | 70 +++++++++++++------
 1 file changed, 49 insertions(+), 21 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/configure_datasource.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/configure_datasource.tsx
index 7b4dc36def133..8eb1fe3bd5b51 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/configure_datasource.tsx
+++ b/x-pack/plugins/security_solution/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>
+      </>
     );
   }
 );

From 6bd2f89d8fbe2791d8714770618f72a804b46c81 Mon Sep 17 00:00:00 2001
From: Candace Park <candace.park@elastic.co>
Date: Fri, 26 Jun 2020 16:22:17 -0400
Subject: [PATCH 2/3] remove link from within button

---
 .../components/endpoint/link_to_app.tsx       | 25 +++++++++++----
 .../configure_datasource.tsx                  | 32 ++++++++-----------
 2 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/endpoint/link_to_app.tsx b/x-pack/plugins/security_solution/public/common/components/endpoint/link_to_app.tsx
index d6d8859b280b8..a12611ea27035 100644
--- a/x-pack/plugins/security_solution/public/common/components/endpoint/link_to_app.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/endpoint/link_to_app.tsx
@@ -5,10 +5,10 @@
  */
 
 import React, { memo, MouseEventHandler } from 'react';
-import { EuiLink, EuiLinkProps } from '@elastic/eui';
+import { EuiLink, EuiLinkProps, EuiButton, EuiButtonProps } from '@elastic/eui';
 import { useNavigateToAppEventHandler } from '../../hooks/endpoint/use_navigate_to_app_event_handler';
 
-type LinkToAppProps = EuiLinkProps & {
+type LinkToAppProps = (EuiLinkProps | EuiButtonProps) & {
   /** the app id - normally the value of the `id` in that plugin's `kibana.json`  */
   appId: string;
   /** Any app specific path (route) */
@@ -16,6 +16,8 @@ type LinkToAppProps = EuiLinkProps & {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   appState?: any;
   onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+  /** Uses an EuiButton element for styling */
+  asButton?: boolean;
 };
 
 /**
@@ -23,13 +25,22 @@ type LinkToAppProps = EuiLinkProps & {
  * a given app without causing a full browser refresh
  */
 export const LinkToApp = memo<LinkToAppProps>(
-  ({ appId, appPath: path, appState: state, onClick, children, ...otherProps }) => {
+  ({ appId, appPath: path, appState: state, onClick, asButton, children, ...otherProps }) => {
     const handleOnClick = useNavigateToAppEventHandler(appId, { path, state, onClick });
+
     return (
-      // eslint-disable-next-line @elastic/eui/href-or-on-click
-      <EuiLink {...otherProps} onClick={handleOnClick}>
-        {children}
-      </EuiLink>
+      <>
+        {asButton && asButton === true ? (
+          <EuiButton {...(otherProps as EuiButtonProps)} onClick={handleOnClick}>
+            {children}
+          </EuiButton>
+        ) : (
+          // eslint-disable-next-line @elastic/eui/href-or-on-click
+          <EuiLink {...otherProps} onClick={handleOnClick}>
+            {children}
+          </EuiLink>
+        )}
+      </>
     );
   }
 );
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/configure_datasource.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/configure_datasource.tsx
index 8eb1fe3bd5b51..e54594f47d009 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/configure_datasource.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/configure_datasource.tsx
@@ -6,7 +6,7 @@
 
 import React, { memo } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiCallOut, EuiText, EuiTitle, EuiButton, EuiSpacer } from '@elastic/eui';
+import { EuiCallOut, EuiText, EuiTitle, 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';
@@ -58,23 +58,19 @@ export const ConfigureEndpointDatasource = memo<CustomConfigureDatasourceContent
                     defaultMessage="You can make changes to the Policy Configuration in the Security app. Fleet will deploy changes to your agents whenever your Policy changes."
                   />
                   <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>
+                  <LinkToApp
+                    data-test-subj="editLinkToPolicyDetails"
+                    asButton={true}
+                    appId="securitySolution:management"
+                    className="editLinkToPolicyDetails"
+                    appPath={policyUrl}
+                    // Cannot use formalUrl here since the code is called in Ingest, which does not use redux
+                  >
+                    <FormattedMessage
+                      id="xpack.securitySolution.endpoint.ingestManager.editDatasource.configurePolicyLink"
+                      defaultMessage="Configure Policy"
+                    />
+                  </LinkToApp>
                 </>
               ) : (
                 <FormattedMessage

From 327caee5f041dde3b9081331e76f2d124f18875e Mon Sep 17 00:00:00 2001
From: Candace Park <candace.park@elastic.co>
Date: Fri, 26 Jun 2020 18:01:20 -0400
Subject: [PATCH 3/3] remove unnecessary import

---
 .../view/ingest_manager_integration/configure_datasource.tsx    | 2 --
 1 file changed, 2 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/configure_datasource.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/configure_datasource.tsx
index e54594f47d009..df1591bf78778 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/configure_datasource.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/configure_datasource.tsx
@@ -8,7 +8,6 @@ import React, { memo } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiCallOut, EuiText, EuiTitle, 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 {
   CustomConfigureDatasourceContent,
@@ -22,7 +21,6 @@ import { getPolicyDetailPath } from '../../../../common/routing';
  */
 export const ConfigureEndpointDatasource = memo<CustomConfigureDatasourceContent>(
   ({ from, datasourceId }: CustomConfigureDatasourceProps) => {
-    const { services } = useKibana();
     let policyUrl = '';
     if (from === 'edit' && datasourceId) {
       policyUrl = getPolicyDetailPath(datasourceId);