Skip to content

Commit

Permalink
[Fleet] Make add agent action more obvious in integration policy table (
Browse files Browse the repository at this point in the history
#112936)

* add agent button changes

* remove unused imports

* move cell to separatre component and add tests

* fix conflicting i18n defaults

* remove tests for old layout

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
  • Loading branch information
hop-dev and kibanamachine authored Sep 23, 2021
1 parent d75df38 commit 467e585
Show file tree
Hide file tree
Showing 5 changed files with 102 additions and 86 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -241,38 +241,6 @@ describe('when on integration detail', () => {
'http://localhost/mock/app/integrations/edit-integration/e8a37031-2907-44f6-89d2-98bd493f60dc'
);
});

it('should NOT show link for agent count if it is zero', async () => {
await mockedApi.waitForApi();
const firstRowAgentCount = renderResult.getAllByTestId('rowAgentCount')[0];
expect(firstRowAgentCount.textContent).toEqual('0');
expect(firstRowAgentCount.tagName).not.toEqual('A');
});

it('should show add agent button if agent count is zero', async () => {
await mockedApi.waitForApi();
const firstRowAgentCount = renderResult.getAllByTestId('rowAgentCount')[0];
expect(firstRowAgentCount.textContent).toEqual('0');

const addAgentButton = renderResult.getAllByTestId('addAgentButton')[0];
expect(addAgentButton).not.toBeNull();
});

it('should show link for agent count if greater than zero', async () => {
await mockedApi.waitForApi();
const secondRowAgentCount = renderResult.getAllByTestId('rowAgentCount')[1];
expect(secondRowAgentCount.textContent).toEqual('100');
expect(secondRowAgentCount.tagName).toEqual('A');
});

it('should NOT show add agent button if agent count is greater than zero', async () => {
await mockedApi.waitForApi();
const secondRowAgentCount = renderResult.getAllByTestId('rowAgentCount')[1];
expect(secondRowAgentCount.textContent).toEqual('100');

const addAgentButton = renderResult.getAllByTestId('addAgentButton')[1];
expect(addAgentButton).toBeUndefined();
});
});
});

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

import React from 'react';

import { act } from '@testing-library/react';

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

import { PackagePolicyAgentsCell } from './package_policy_agents_cell';

function renderCell({ agentCount = 0, agentPolicyId = '123', onAddAgent = () => {} }) {
const renderer = createIntegrationsTestRendererMock();

return renderer.render(
<PackagePolicyAgentsCell
agentCount={agentCount}
agentPolicyId={agentPolicyId}
onAddAgent={onAddAgent}
/>
);
}

describe('PackagePolicyAgentsCell', () => {
test('it should display add agent if count is 0', async () => {
const utils = renderCell({ agentCount: 0 });
await act(async () => {
expect(utils.queryByText('Add agent')).toBeInTheDocument();
});
});

test('it should display only count if count > 0', async () => {
const utils = renderCell({ agentCount: 9999 });
await act(async () => {
expect(utils.queryByText('Add agent')).not.toBeInTheDocument();
expect(utils.queryByText('9999')).toBeInTheDocument();
});
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

import React from 'react';

import { EuiButton } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';

import { LinkedAgentCount } from '../../../../../../components';

export const PackagePolicyAgentsCell = ({
agentPolicyId,
agentCount = 0,
onAddAgent,
}: {
agentPolicyId: string;
agentCount?: number;
onAddAgent: () => void;
}) => {
if (agentCount > 0) {
return (
<LinkedAgentCount
count={agentCount}
agentPolicyId={agentPolicyId}
className="eui-textTruncate"
/>
);
}

return (
<EuiButton iconType="plusInCircle" data-test-subj="addAgentButton" onClick={onAddAgent}>
<FormattedMessage
id="xpack.fleet.epm.packageDetails.integrationList.addAgent"
defaultMessage="Add agent"
/>
</EuiButton>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,16 @@ import type {
EuiTableFieldDataColumnType,
} from '@elastic/eui';
import {
EuiButtonIcon,
EuiBasicTable,
EuiLink,
EuiFlexGroup,
EuiFlexItem,
EuiToolTip,
EuiText,
EuiButton,
EuiSpacer,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedRelative, FormattedMessage } from '@kbn/i18n/react';
import styled from 'styled-components';

import { InstallStatus } from '../../../../../types';
import type { GetAgentPoliciesResponseItem, InMemoryPackagePolicy } from '../../../../../types';
Expand All @@ -41,10 +38,10 @@ import { PACKAGE_POLICY_SAVED_OBJECT_TYPE } from '../../../../../constants';
import {
AgentEnrollmentFlyout,
AgentPolicySummaryLine,
LinkedAgentCount,
PackagePolicyActionsMenu,
} from '../../../../../components';

import { PackagePolicyAgentsCell } from './components/package_policy_agents_cell';
import { usePackagePoliciesWithAgentPolicy } from './use_package_policies_with_agent_policy';
import { Persona } from './persona';

Expand All @@ -58,10 +55,6 @@ interface InMemoryPackagePolicyAndAgentPolicy {
agentPolicy: GetAgentPoliciesResponseItem;
}

const AddAgentButton = styled(EuiButtonIcon)`
margin-left: ${(props) => props.theme.eui.euiSizeS};
`;

const IntegrationDetailsLink = memo<{
packagePolicy: InMemoryPackagePolicyAndAgentPolicy['packagePolicy'];
}>(({ packagePolicy }) => {
Expand Down Expand Up @@ -266,51 +259,6 @@ export const PackagePoliciesPage = ({ name, version }: PackagePoliciesPanelProps
return <AgentPolicySummaryLine policy={agentPolicy} />;
},
},
{
field: '',
name: i18n.translate('xpack.fleet.epm.packageDetails.integrationList.agentCount', {
defaultMessage: 'Agents',
}),
truncateText: true,
align: 'left',
width: '8ch',
render({ packagePolicy, agentPolicy }: InMemoryPackagePolicyAndAgentPolicy) {
const count = agentPolicy?.agents ?? 0;

return (
<>
<LinkedAgentCount
count={count}
agentPolicyId={packagePolicy.policy_id}
className="eui-textTruncate"
data-test-subj="rowAgentCount"
/>
{count === 0 && (
<EuiToolTip
content={i18n.translate(
'xpack.fleet.epm.packageDetails.integrationList.addAgent',
{
defaultMessage: 'Add Agent',
}
)}
>
<AddAgentButton
iconType="plusInCircle"
onClick={() => setFlyoutOpenForPolicyId(agentPolicy.id)}
data-test-subj="addAgentButton"
aria-label={i18n.translate(
'xpack.fleet.epm.packageDetails.integrationList.addAgent',
{
defaultMessage: 'Add Agent',
}
)}
/>
</EuiToolTip>
)}
</>
);
},
},
{
field: 'packagePolicy.updated_by',
name: i18n.translate('xpack.fleet.epm.packageDetails.integrationList.updatedBy', {
Expand All @@ -335,6 +283,21 @@ export const PackagePoliciesPage = ({ name, version }: PackagePoliciesPanelProps
);
},
},
{
field: '',
name: i18n.translate('xpack.fleet.epm.packageDetails.integrationList.agentCount', {
defaultMessage: 'Agents',
}),
render({ agentPolicy }: InMemoryPackagePolicyAndAgentPolicy) {
return (
<PackagePolicyAgentsCell
agentPolicyId={agentPolicy.id}
agentCount={agentPolicy.agents}
onAddAgent={() => setFlyoutOpenForPolicyId(agentPolicy.id)}
/>
);
},
},
{
field: '',
name: i18n.translate('xpack.fleet.epm.packageDetails.integrationList.actions', {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export const PackagePolicyActionsMenu: React.FunctionComponent<{
>
<FormattedMessage
id="xpack.fleet.epm.packageDetails.integrationList.addAgent"
defaultMessage="Add Agent"
defaultMessage="Add agent"
/>
</EuiContextMenuItem>,
]
Expand Down

0 comments on commit 467e585

Please sign in to comment.