remove link from within button

elastic · Jun 26, 2020 · 6bd2f89 · 6bd2f89
1 parent 7e55c41
commit 6bd2f89
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 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
@@ -5,31 +5,42 @@
  */
 
 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) */
   appPath?: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   appState?: any;
   onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+  /** Uses an EuiButton element for styling */
+  asButton?: boolean;
 };
 
 /**
  * An `EuiLink` that will use Kibana's `.application.navigateToApp()` to redirect the user to the
  * 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/...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,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