Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Fleet][Integrations] Add callout to Microsoft Defender integrations showing support for bi-directional response actions #207861

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+116 −77
Open

[Fleet][Integrations] Add callout to Microsoft Defender integrations showing support for bi-directional response actions #207861

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0795c5b
Refactor `<BidirectionalIntegrationsBanner>` component for better sca…
paul-tavares Jan 22, 2025
d7a3a11
updated tests for `<BidirectionalIntegrationsBanner>`
paul-tavares Jan 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 40 additions & 10 deletions ...ations/sections/epm/screens/detail/components/bidirectional_integrations_callout.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@
*/

import React from 'react';
import { type RenderResult } from '@testing-library/react';
import { type RenderResult, fireEvent, waitFor } from '@testing-library/react';

import type { FleetStartServices } from '../../../../../../..';

import { createFleetTestRendererMock } from '../../../../../../../mock';

Expand All @@ -18,33 +20,61 @@ import {
jest.mock('react-use/lib/useLocalStorage');

describe('BidirectionalIntegrationsBanner', () => {
let formProps: BidirectionalIntegrationsBannerProps;
let componentProps: BidirectionalIntegrationsBannerProps;
let renderResult: RenderResult;
let render: () => RenderResult;
let storageMock: jest.Mocked<FleetStartServices['storage']>;

beforeEach(() => {
formProps = {
onDismiss: jest.fn(),
};
componentProps = { integrationPackageName: 'sentinel_one' };

const testRunner = createFleetTestRendererMock();

const renderer = createFleetTestRendererMock();
storageMock = testRunner.startServices.storage;

renderResult = renderer.render(<BidirectionalIntegrationsBanner {...formProps} />);
render = () => {
renderResult = testRunner.render(<BidirectionalIntegrationsBanner {...componentProps} />);
return renderResult;
};
});

it('should render bidirectional integrations banner', () => {
render();
expect(renderResult.getByTestId('bidirectionalIntegrationsCallout')).toBeInTheDocument();
});

it('should contain a link to documentation', () => {
render();
const docLink = renderResult.getByTestId('bidirectionalIntegrationDocLink');

expect(docLink).toBeInTheDocument();
expect(docLink.getAttribute('href')).toContain('third-party-actions.html');
});

it('should call `onDismiss` callback when user clicks dismiss', () => {
renderResult.getByTestId('euiDismissCalloutButton').click();
it('should remove the callout when the dismiss button is clicked', async () => {
render();
fireEvent.click(renderResult.getByTestId('euiDismissCalloutButton'));

await waitFor(() => {
expect(storageMock.store.setItem).toHaveBeenCalledWith(
'fleet.showSOReponseSupportBanner',
'false'
);
expect(renderResult.queryByTestId('bidirectionalIntegrationsCallout')).toBeFalsy();
});
});

it('should render nothing if integration is not supported', () => {
componentProps.integrationPackageName = 'foo';
render();

expect(renderResult.queryByTestId('bidirectionalIntegrationsCallout')).toBeFalsy();
});

it('should render nothing if user had dismissed the callout in the past', () => {
(storageMock.store.getItem as jest.Mock).mockReturnValue('false');
render();

expect(formProps.onDismiss).toBeCalled();
expect(renderResult.queryByTestId('bidirectionalIntegrationsCallout')).toBeFalsy();
});
});
110 changes: 73 additions & 37 deletions ...ntegrations/sections/epm/screens/detail/components/bidirectional_integrations_callout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,26 @@
* 2.0.
*/

import React, { memo } from 'react';
import React, { memo, useCallback, useMemo, useState } from 'react';
import styled from 'styled-components';
import { EuiCallOut, EuiLink, EuiTextColor } from '@elastic/eui';
import { EuiCallOut, EuiLink, EuiSpacer, EuiTextColor } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { useKibana } from '@kbn/kibana-react-plugin/public';

import type { FleetStartServices } from '../../../../../../..';

/**
* A list of Integration `package.name`'s that support security's bi-directional response actions
* along with its corresponding storage (local storage) key for persisting the user's dismissal of
* the callout
*/
const SUPPORTED_INTEGRATIONS_STORAGE_KEY: Readonly<Record<string, string>> = Object.freeze({
sentinel_one: 'fleet.showSOReponseSupportBanner',
crowdstrike: 'fleet.showCSResponseSupportBanner',
microsoft_defender_endpoint: 'fleet.showMSDefenderResponseSupportBanner',
m365_defender: 'fleet.showMSDefenderResponseSupportBanner', // Same key as the one above
});

const AccentCallout = styled(EuiCallOut)`
.euiCallOutHeader__title {
color: ${(props) => props.theme.eui.euiColorAccent};
Expand All @@ -19,47 +33,69 @@ const AccentCallout = styled(EuiCallOut)`
`;

export interface BidirectionalIntegrationsBannerProps {
onDismiss: () => void;
integrationPackageName: string;
}
export const BidirectionalIntegrationsBanner = memo<BidirectionalIntegrationsBannerProps>(
({ onDismiss }) => {
const { docLinks } = useKibana().services;
({ integrationPackageName }) => {
const { docLinks, storage } = useKibana<FleetStartServices>().services;
const storageKey = SUPPORTED_INTEGRATIONS_STORAGE_KEY[integrationPackageName];
const [showBanner, setShowBanner] = useState(
storageKey ? storage.get(storageKey) ?? true : false
);

const bannerTitle = (
<EuiTextColor color="accent">
<FormattedMessage
id="xpack.fleet.bidirectionalIntegrationsBanner.title"
defaultMessage={'NEW: Response enabled integration'}
/>
</EuiTextColor>
const onDismissHandler = useCallback(() => {
setShowBanner(false);

if (storageKey) {
storage.set(storageKey, false);
}
}, [storage, storageKey]);

const bannerTitle = useMemo(
() => (
<EuiTextColor color="accent">
<FormattedMessage
id="xpack.fleet.bidirectionalIntegrationsBanner.title"
defaultMessage={'NEW: Response enabled integration'}
/>
</EuiTextColor>
),
[]
);

if (!storageKey || !showBanner) {
return null;
}

return (
<AccentCallout
title={bannerTitle}
iconType="cheer"
onDismiss={onDismiss}
data-test-subj={'bidirectionalIntegrationsCallout'}
>
<FormattedMessage
id="xpack.fleet.bidirectionalIntegrationsBanner.body"
defaultMessage="Orchestrate response actions across endpoint vendors with bidirectional integrations. {learnmore}."
values={{
learnmore: (
<EuiLink
href={docLinks?.links.securitySolution.bidirectionalIntegrations}
target="_blank"
data-test-subj="bidirectionalIntegrationDocLink"
>
<FormattedMessage
id="xpack.fleet.bidirectionalIntegrations.doc.link"
defaultMessage="Learn more"
/>
</EuiLink>
),
}}
/>
</AccentCallout>
<>
<AccentCallout
title={bannerTitle}
iconType="cheer"
onDismiss={onDismissHandler}
data-test-subj={'bidirectionalIntegrationsCallout'}
>
<FormattedMessage
id="xpack.fleet.bidirectionalIntegrationsBanner.body"
defaultMessage="Orchestrate response actions across endpoint vendors with bidirectional integrations. {learnmore}."
values={{
learnmore: (
<EuiLink
href={docLinks?.links.securitySolution.bidirectionalIntegrations}
target="_blank"
data-test-subj="bidirectionalIntegrationDocLink"
>
<FormattedMessage
id="xpack.fleet.bidirectionalIntegrations.doc.link"
defaultMessage="Learn more"
/>
</EuiLink>
),
}}
/>
</AccentCallout>
<EuiSpacer size="s" />
</>
);
}
);
Expand Down
33 changes: 3 additions & 30 deletions .../fleet/public/applications/integrations/sections/epm/screens/detail/overview/overview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,8 +175,6 @@ export const OverviewPage: React.FC<Props> = memo(
const isUnverified = isPackageUnverified(packageInfo, packageVerificationKeyId);
const isPrerelease = isPackagePrerelease(packageInfo.version);
const isElasticDefend = packageInfo.name === 'endpoint';
const isSentinelOne = packageInfo.name === 'sentinel_one';
const isCrowdStrike = packageInfo.name === 'crowdstrike';
const [markdown, setMarkdown] = useState<string | undefined>(undefined);
const [selectedItemId, setSelectedItem] = useState<string | undefined>(undefined);
const [isSideNavOpenOnMobile, setIsSideNavOpenOnMobile] = useState(false);
Expand Down Expand Up @@ -301,27 +299,11 @@ export const OverviewPage: React.FC<Props> = memo(
const [showAVCBanner, setShowAVCBanner] = useState(
storage.get('securitySolution.showAvcBanner') ?? true
);
const [showCSResponseSupportBanner, setShowCSResponseSupportBanner] = useState(
storage.get('fleet.showCSResponseSupportBanner') ?? true
);
const [showSOReponseSupportBanner, setShowSOResponseSupportBanner] = useState(
storage.get('fleet.showSOReponseSupportBanner') ?? true
);
const onAVCBannerDismiss = useCallback(() => {
setShowAVCBanner(false);
storage.set('securitySolution.showAvcBanner', false);
}, [storage]);

const onCSResponseSupportBannerDismiss = useCallback(() => {
setShowCSResponseSupportBanner(false);
storage.set('fleet.showCSResponseSupportBanner', false);
}, [storage]);

const onSOResponseSupportBannerDismiss = useCallback(() => {
setShowSOResponseSupportBanner(false);
storage.set('fleet.showSOReponseSupportBanner', false);
}, [storage]);

return (
<EuiFlexGroup alignItems="flexStart" data-test-subj="epm.OverviewPage">
<SideBar grow={2}>
Expand All @@ -342,18 +324,9 @@ export const OverviewPage: React.FC<Props> = memo(
<EuiSpacer size="s" />
</>
)}
{isCrowdStrike && showCSResponseSupportBanner && (
<>
<BidirectionalIntegrationsBanner onDismiss={onCSResponseSupportBannerDismiss} />
<EuiSpacer size="s" />
</>
)}
{isSentinelOne && showSOReponseSupportBanner && (
<>
<BidirectionalIntegrationsBanner onDismiss={onSOResponseSupportBannerDismiss} />
<EuiSpacer size="s" />
</>
)}

<BidirectionalIntegrationsBanner integrationPackageName={packageInfo.name} />
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I refactored the component and moved all business logic to it so it can scale better as we add support for more integrations and to help manage it in a single place


<CloudPostureThirdPartySupportCallout packageInfo={packageInfo} />
{isPrerelease && (
<PrereleaseCallout
Expand Down