Skip to content

Commit

Permalink
[Cloud Security] [Agentless ] Added beta badge and defaulted selector…
Browse files Browse the repository at this point in the history 
… to agent-based (elastic#189217)
  • Loading branch information
@seanrathier
seanrathier authored Aug 2, 2024
1 parent ae5d264 commit cea8676
Show file tree
Hide file tree
Showing 8 changed files with 176 additions and 166 deletions.
73 changes: 44 additions & 29 deletions ...s/cloud_security_posture/public/components/fleet_extensions/policy_template_form.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1460,7 +1460,7 @@ describe('<CspPolicyTemplateForm />', () => {
expect(setupTechnologySelector).not.toBeInTheDocument();
});

it('should render setup technology selector for AWS and allow to select agent-based', async () => {
it('should render setup technology selector for AWS and allow to select agentless', async () => {
const newPackagePolicy = getMockPolicyAWS();

const { getByTestId, getByRole } = render(
Expand All @@ -1471,31 +1471,34 @@ describe('<CspPolicyTemplateForm />', () => {
SETUP_TECHNOLOGY_SELECTOR_ACCORDION_TEST_SUBJ
);
const setupTechnologySelector = getByTestId(SETUP_TECHNOLOGY_SELECTOR_TEST_SUBJ);
const awsCredentialsTypeSelector = getByTestId(AWS_CREDENTIALS_TYPE_SELECTOR_TEST_SUBJ);
const options: HTMLOptionElement[] = within(awsCredentialsTypeSelector).getAllByRole(
'option'
);
const optionValues = options.map((option) => option.value);

// default state
expect(setupTechnologySelectorAccordion).toBeInTheDocument();
expect(setupTechnologySelector).toBeInTheDocument();
expect(setupTechnologySelector).toHaveTextContent(/agentless/i);
expect(options).toHaveLength(2);
expect(optionValues).toEqual(
expect.arrayContaining(['direct_access_keys', 'temporary_keys'])
);
expect(setupTechnologySelector).toHaveTextContent(/agent-based/i);

expect(
getByTestId(AWS_CREDENTIALS_TYPE_OPTIONS_TEST_SUBJ.CLOUDFORMATION)
).toBeInTheDocument();
expect(getByTestId(AWS_CREDENTIALS_TYPE_OPTIONS_TEST_SUBJ.MANUAL)).toBeInTheDocument();

// select agent-based and check for cloudformation option
userEvent.click(setupTechnologySelector);
const agentBasedOption = getByRole('option', { name: /agent-based/i });
const agentlessOption = getByRole('option', { name: /agentless/i });
await waitForEuiPopoverOpen();
userEvent.click(agentBasedOption);
userEvent.click(agentlessOption);

const awsCredentialsTypeSelector = getByTestId(AWS_CREDENTIALS_TYPE_SELECTOR_TEST_SUBJ);
const options: HTMLOptionElement[] = within(awsCredentialsTypeSelector).getAllByRole(
'option'
);
const optionValues = options.map((option) => option.value);

await waitFor(() => {
expect(
getByTestId(AWS_CREDENTIALS_TYPE_OPTIONS_TEST_SUBJ.CLOUDFORMATION)
).toBeInTheDocument();
expect(getByTestId(AWS_CREDENTIALS_TYPE_OPTIONS_TEST_SUBJ.MANUAL)).toBeInTheDocument();
expect(options).toHaveLength(2);
expect(optionValues).toEqual(
expect.arrayContaining(['direct_access_keys', 'temporary_keys'])
);
});
});

Expand Down Expand Up @@ -1614,13 +1617,28 @@ describe('<CspPolicyTemplateForm />', () => {
SETUP_TECHNOLOGY_SELECTOR_ACCORDION_TEST_SUBJ
);
const setupTechnologySelector = getByTestId(SETUP_TECHNOLOGY_SELECTOR_TEST_SUBJ);

// default state for Azure with the Org selected
expect(setupTechnologySelectorAccordion).toBeInTheDocument();
expect(setupTechnologySelector).toBeInTheDocument();
expect(setupTechnologySelector).toHaveTextContent(/agent-based/i);
await waitFor(() => {
expect(getByTestId(CIS_AZURE_SETUP_FORMAT_TEST_SUBJECTS.ARM_TEMPLATE)).toBeInTheDocument();
expect(getByTestId(CIS_AZURE_SETUP_FORMAT_TEST_SUBJECTS.MANUAL)).toBeInTheDocument();
});

// select agent-based and check for ARM template option
userEvent.click(setupTechnologySelector);
const agentlessOption = getByRole('option', { name: /agentless/i });
await waitForEuiPopoverOpen();
userEvent.click(agentlessOption);

const tenantIdField = queryByTestId(CIS_AZURE_INPUT_FIELDS_TEST_SUBJECTS.TENANT_ID);
const clientIdField = queryByTestId(CIS_AZURE_INPUT_FIELDS_TEST_SUBJECTS.CLIENT_ID);
const clientSecretField = queryByTestId(CIS_AZURE_INPUT_FIELDS_TEST_SUBJECTS.CLIENT_SECRET);
const armTemplateSelector = queryByTestId(CIS_AZURE_SETUP_FORMAT_TEST_SUBJECTS.ARM_TEMPLATE);
const manualSelector = queryByTestId(CIS_AZURE_SETUP_FORMAT_TEST_SUBJECTS.MANUAL);

// default state for Azure with the Org selected
expect(setupTechnologySelectorAccordion).toBeInTheDocument();
expect(setupTechnologySelector).toBeInTheDocument();
expect(setupTechnologySelector).toHaveTextContent(/agentless/i);
Expand All @@ -1629,24 +1647,14 @@ describe('<CspPolicyTemplateForm />', () => {
expect(clientSecretField).toBeInTheDocument();
expect(armTemplateSelector).not.toBeInTheDocument();
expect(manualSelector).not.toBeInTheDocument();

// select agent-based and check for ARM template option
userEvent.click(setupTechnologySelector);
const agentBasedOption = getByRole('option', { name: /agent-based/i });
await waitForEuiPopoverOpen();
userEvent.click(agentBasedOption);
await waitFor(() => {
expect(getByTestId(CIS_AZURE_SETUP_FORMAT_TEST_SUBJECTS.ARM_TEMPLATE)).toBeInTheDocument();
expect(getByTestId(CIS_AZURE_SETUP_FORMAT_TEST_SUBJECTS.MANUAL)).toBeInTheDocument();
});
});

it('should render setup technology selector for Azure for Single Subscription type', async () => {
const newPackagePolicy = getMockPolicyAzure({
'azure.account_type': { value: 'single-account', type: 'text' },
});

const { getByTestId, queryByTestId } = render(
const { getByTestId, queryByTestId, getByRole } = render(
<WrappedComponent
newPolicy={newPackagePolicy}
isAgentlessEnabled={true}
Expand All @@ -1662,6 +1670,13 @@ describe('<CspPolicyTemplateForm />', () => {
SETUP_TECHNOLOGY_SELECTOR_ACCORDION_TEST_SUBJ
);
const setupTechnologySelector = getByTestId(SETUP_TECHNOLOGY_SELECTOR_TEST_SUBJ);

// select agentless and check for ARM template option
userEvent.click(setupTechnologySelector);
const agentlessOption = getByRole('option', { name: /agentless/i });
await waitForEuiPopoverOpen();
userEvent.click(agentlessOption);

const tenantIdField = queryByTestId(CIS_AZURE_INPUT_FIELDS_TEST_SUBJECTS.TENANT_ID);
const clientIdField = queryByTestId(CIS_AZURE_INPUT_FIELDS_TEST_SUBJECTS.CLIENT_ID);
const clientSecretField = queryByTestId(CIS_AZURE_INPUT_FIELDS_TEST_SUBJECTS.CLIENT_SECRET);
Expand Down
1 change: 0 additions & 1 deletion ...lugins/cloud_security_posture/public/components/fleet_extensions/policy_template_form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -552,7 +552,6 @@ export const CspPolicyTemplateForm = memo<PackagePolicyReplaceDefineStepExtensio
input,
isAgentlessEnabled,
handleSetupTechnologyChange,
isEditPage,
});
const shouldRenderAgentlessSelector =
(!isEditPage && isAgentlessAvailable) ||
Expand Down
82 changes: 60 additions & 22 deletions ...ublic/components/fleet_extensions/setup_technology_selector/setup_technology_selector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,19 @@ import React from 'react';

import { SetupTechnology } from '@kbn/fleet-plugin/public';
import { FormattedMessage } from '@kbn/i18n-react';
import { i18n } from '@kbn/i18n';
import {
EuiBetaBadge,
EuiAccordion,
EuiFormRow,
EuiLink,
EuiSpacer,
EuiSuperSelect,
EuiText,
useGeneratedHtmlId,
EuiFlexItem,
EuiFlexGroup,
useEuiTheme,
} from '@elastic/eui';
import {
SETUP_TECHNOLOGY_SELECTOR_ACCORDION_TEST_SUBJ,
Expand All @@ -32,55 +37,88 @@ export const SetupTechnologySelector = ({
setupTechnology: SetupTechnology;
onSetupTechnologyChange: (value: SetupTechnology) => void;
}) => {
const { euiTheme } = useEuiTheme();
const agentlessOptionBadge = (isDropDownDisplay: boolean) => {
const title = isDropDownDisplay ? (
<strong>
<FormattedMessage
id="xpack.csp.fleetIntegration.setupTechnology.agentlessDrowpownDisplay"
defaultMessage="Agentless"
/>
</strong>
) : (
<FormattedMessage
id="xpack.csp.fleetIntegration.setupTechnology.agentlessInputDisplay"
defaultMessage="Agentless"
/>
);
return (
<EuiFlexGroup alignItems="center" responsive={false}>
<EuiFlexItem grow={false}>{title}</EuiFlexItem>
<EuiFlexItem css={{ paddingTop: !isDropDownDisplay ? euiTheme.size.xs : undefined }}>
<EuiBetaBadge
label={i18n.translate(
'xpack.csp.fleetIntegration.setupTechnology.agentlessInputDisplay.techPreviewBadge.label',
{
defaultMessage: 'Beta',
}
)}
size="m"
color="hollow"
tooltipContent={i18n.translate(
'xpack.csp.fleetIntegration.setupTechnology.agentlessInputDisplay.techPreviewBadge.tooltip',
{
defaultMessage:
'This functionality is in technical preview and may be changed in a future release. Please help us by reporting any bugs.',
}
)}
/>
</EuiFlexItem>
</EuiFlexGroup>
);
};

const options = [
{
value: SetupTechnology.AGENTLESS,
value: SetupTechnology.AGENT_BASED,
'data-test-subj': 'setup-technology-agent-based-option',
inputDisplay: (
<FormattedMessage
id="xpack.csp.fleetIntegration.setupTechnology.agentlessInputDisplay"
defaultMessage="Agentless"
id="xpack.csp.fleetIntegration.setupTechnology.agentbasedInputDisplay"
defaultMessage="Agent-based"
/>
),
dropdownDisplay: (
<>
<strong>
<FormattedMessage
id="xpack.csp.fleetIntegration.setupTechnology.agentlessDrowpownDisplay"
defaultMessage="Agentless"
id="xpack.csp.fleetIntegration.setupTechnology.agentbasedDrowpownDisplay"
defaultMessage="Agent-based"
/>
</strong>
<EuiText size="s" color="subdued">
<p>
<FormattedMessage
id="xpack.csp.fleetIntegration.setupTechnology.agentlessDrowpownDescription"
defaultMessage="Set up the integration without an agent"
id="xpack.csp.fleetIntegration.setupTechnology.agentbasedDrowpownDescription"
defaultMessage="Set up the integration with an agent"
/>
</p>
</EuiText>
</>
),
},
{
value: SetupTechnology.AGENT_BASED,
inputDisplay: (
<FormattedMessage
id="xpack.csp.fleetIntegration.setupTechnology.agentbasedInputDisplay"
defaultMessage="Agent-based"
/>
),
value: SetupTechnology.AGENTLESS,
inputDisplay: agentlessOptionBadge(false),
'data-test-subj': 'setup-technology-agentless-option',
dropdownDisplay: (
<>
<strong>
<FormattedMessage
id="xpack.csp.fleetIntegration.setupTechnology.agentbasedDrowpownDisplay"
defaultMessage="Agent-based"
/>
</strong>
{agentlessOptionBadge(true)}
<EuiText size="s" color="subdued">
<p>
<FormattedMessage
id="xpack.csp.fleetIntegration.setupTechnology.agentbasedDrowpownDescription"
defaultMessage="Set up the integration with an agent"
id="xpack.csp.fleetIntegration.setupTechnology.agentlessDrowpownDescription"
defaultMessage="Set up the integration without an agent"
/>
</p>
</EuiText>
Expand Down
Loading

0 comments on commit cea8676

Please sign in to comment.