--unprivileged,
command: sudo ./elastic-agent,
+ guideLink: (
+
+
+
+ ),
}}
/>
diff --git a/x-pack/plugins/integration_assistant/public/components/create_integration_card_button/create_integration_card_button.tsx b/x-pack/plugins/integration_assistant/public/components/create_integration_card_button/create_integration_card_button.tsx
index cb6e64a1aa554..55baee561bb4a 100644
--- a/x-pack/plugins/integration_assistant/public/components/create_integration_card_button/create_integration_card_button.tsx
+++ b/x-pack/plugins/integration_assistant/public/components/create_integration_card_button/create_integration_card_button.tsx
@@ -5,7 +5,7 @@
* 2.0.
*/
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
import {
EuiLink,
EuiPanel,
@@ -15,41 +15,53 @@ import {
EuiIcon,
EuiText,
EuiTitle,
- useEuiTheme,
+ useEuiPaddingCSS,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { css } from '@emotion/react';
import integrationsImage from '../../common/images/integrations_light.svg';
+import { useKibana } from '../../common/hooks/use_kibana';
-const useStyles = () => {
- const { euiTheme } = useEuiTheme();
+const useStyles = (compressed: boolean) => {
+ const paddings = useEuiPaddingCSS();
return {
image: css`
- width: 160px;
- height: 155px;
+ width: ${compressed ? '140px' : '160px'};
+ height: ${compressed ? '90px' : '155px'};
object-fit: cover;
object-position: left center;
`,
container: css`
- height: 135px;
+ height: ${compressed ? '80px' : '135px'};
`,
textContainer: css`
height: 100%;
- padding: ${euiTheme.size.l} 0 ${euiTheme.size.l} ${euiTheme.size.l};
+ ${compressed ? `${paddings.m.styles}` : `${paddings.l.styles} padding-right: 0;`}
`,
};
};
export interface CreateIntegrationCardButtonProps {
- href: string;
+ compressed?: boolean;
}
export const CreateIntegrationCardButton = React.memo(
- ({ href }) => {
- const styles = useStyles();
+ ({ compressed = false }) => {
+ const { getUrlForApp, navigateToUrl } = useKibana().services.application;
+ const styles = useStyles(compressed);
+
+ const href = useMemo(() => getUrlForApp('integrations', { path: '/create' }), [getUrlForApp]);
+ const navigate = useCallback(
+ (ev) => {
+ ev.preventDefault();
+ navigateToUrl(href);
+ },
+ [href, navigateToUrl]
+ );
+
return (