Skip to content

Commit

Permalink
fix: [Rules > Shared exception lists][AXE-CORE]: Interactive controls…
Browse files Browse the repository at this point in the history 
… must not be nested

Closes: elastic/security-team#8611
  • Loading branch information
@alexwizp
alexwizp committed Mar 5, 2024
1 parent 68a2bd7 commit 8d49272
Showing 1 changed file with 87 additions and 91 deletions.
178 changes: 87 additions & 91 deletions x-pack/plugins/security_solution/public/exceptions/components/exceptions_list_card/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ import {
EuiPanel,
EuiText,
EuiAccordion,
EuiButtonIcon,
useEuiTheme,
useEuiShadow,
} from '@elastic/eui';
import { css } from '@emotion/css';
import { ExceptionListTypeEnum } from '@kbn/securitysolution-io-ts-list-types';
Expand Down Expand Up @@ -98,6 +99,8 @@ export const ExceptionsListCard = memo<ExceptionsListCardProps>(
onCancelManageRules,
onRuleSelectionChange,
} = useListDetailsView(exceptionsList.list_id);
const { euiTheme } = useEuiTheme();
const panelShadow = useEuiShadow();

const {
listId,
Expand Down Expand Up @@ -142,101 +145,94 @@ export const ExceptionsListCard = memo<ExceptionsListCardProps>(
return (
<EuiFlexGroup gutterSize="none">
<EuiFlexItem>
<EuiPanel hasShadow={false}>
<EuiAccordion
// Note: this uses `className` instead of the `css` prop, because a plugin
// cannot be set up for styled-components and `@emotion/react` at the same time
// @see https://github.com/elastic/eui/discussions/6828#discussioncomment-6076157
buttonProps={{ className: buttonCss }}
id={openAccordionId}
arrowDisplay="none"
onToggle={() => setToggleAccordion(!toggleAccordion)}
buttonContent={
<EuiPanel>
<ListHeaderContainer gutterSize="m" alignItems="flexStart">
<EuiFlexItem grow={false}>
<EuiButtonIcon
iconType={toggleAccordion ? 'arrowDown' : 'arrowRight'}
aria-label="Next"
/>
<EuiAccordion
// Note: this uses `className` instead of the `css` prop, because a plugin
// cannot be set up for styled-components and `@emotion/react` at the same time
// @see https://github.com/elastic/eui/discussions/6828#discussioncomment-6076157
buttonProps={{ className: buttonCss }}
id={openAccordionId}
arrowDisplay="none"
buttonElement="div"
onToggle={() => setToggleAccordion(!toggleAccordion)}
css={css`
.euiAccordion__triggerWrapper {
border-radius: ${euiTheme.border.radius.medium};
padding: ${euiTheme.size.base};
margin-top: ${euiTheme.size.l};
${panelShadow}
}
`}
buttonContent={
<ListHeaderContainer gutterSize="m" alignItems="flexStart">
<EuiFlexItem>
<EuiFlexGroup
direction="column"
key={listId}
alignItems="flexStart"
gutterSize="none"
>
<EuiFlexItem grow>
<EuiText size="m">
<EuiLink data-test-subj="exception-list-name" onClick={goToExceptionDetail}>
{listName}
</EuiLink>
</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGroup
direction="column"
key={listId}
alignItems="flexStart"
gutterSize="none"
>
<EuiFlexItem grow>
<EuiText size="m">
<EuiLink
data-test-subj="exception-list-name"
onClick={goToExceptionDetail}
>
{listName}
</EuiLink>
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow>
<EuiText size="xs">
<EuiTextColor color="subdued">{listDescription}</EuiTextColor>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
<EuiFlexItem grow>
<EuiText size="xs">
<EuiTextColor color="subdued">{listDescription}</EuiTextColor>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>

<EuiFlexItem>
<EuiFlexGroup alignItems="center">
<EuiFlexItem>
<EuiFlexGroup alignItems="center">
<EuiFlexItem>
<TitleBadge title={i18n.DATE_CREATED} badgeString={createdAt} />
</EuiFlexItem>
<EuiFlexItem>
<TitleBadge title={i18n.CREATED_BY} badgeString={createdBy} />
</EuiFlexItem>
<EuiFlexItem>
<TitleBadge title={i18n.EXCEPTIONS} badgeString={exceptionItemsCount} />
</EuiFlexItem>
<EuiFlexItem data-test-subj="exceptionListCardLinkedRulesBadge">
<TitleBadge
title={i18n.RULES}
badgeString={linkedRules.length.toString()}
/>
</EuiFlexItem>
<EuiFlexItem>
<HeaderMenu
disableActions={readOnly}
dataTestSubj="sharedListOverflowCard"
actions={menuActionItems}
/>
</EuiFlexItem>
</EuiFlexGroup>
<TitleBadge title={i18n.DATE_CREATED} badgeString={createdAt} />
</EuiFlexItem>
</ListHeaderContainer>
</EuiPanel>
}
data-test-subj={`exceptionsManagementListCard-${listId}`}
>
<ExceptionPanel hasBorder>
<ListExceptionItems
isReadOnly={readOnly}
exceptions={exceptions}
listType={exceptionsList.type as ExceptionListTypeEnum}
pagination={pagination}
hideUtility
viewerStatus={exceptionViewerStatus}
ruleReferences={ruleReferences}
onDeleteException={onDeleteException}
onEditExceptionItem={onEditExceptionItem}
onPaginationChange={onPaginationChange}
onCreateExceptionListItem={onAddExceptionClick}
lastUpdated={null}
emptyViewerTitle={emptyViewerTitle}
emptyViewerBody={emptyViewerBody}
emptyViewerButtonText={emptyViewerButtonText}
/>
</ExceptionPanel>
</EuiAccordion>
</EuiPanel>
<EuiFlexItem>
<TitleBadge title={i18n.CREATED_BY} badgeString={createdBy} />
</EuiFlexItem>
<EuiFlexItem>
<TitleBadge title={i18n.EXCEPTIONS} badgeString={exceptionItemsCount} />
</EuiFlexItem>
<EuiFlexItem data-test-subj="exceptionListCardLinkedRulesBadge">
<TitleBadge title={i18n.RULES} badgeString={linkedRules.length.toString()} />
</EuiFlexItem>
<EuiFlexItem>
<HeaderMenu
disableActions={readOnly}
dataTestSubj="sharedListOverflowCard"
actions={menuActionItems}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</ListHeaderContainer>
}
data-test-subj={`exceptionsManagementListCard-${listId}`}
>
<ExceptionPanel hasBorder>
<ListExceptionItems
isReadOnly={readOnly}
exceptions={exceptions}
listType={exceptionsList.type as ExceptionListTypeEnum}
pagination={pagination}
hideUtility
viewerStatus={exceptionViewerStatus}
ruleReferences={ruleReferences}
onDeleteException={onDeleteException}
onEditExceptionItem={onEditExceptionItem}
onPaginationChange={onPaginationChange}
onCreateExceptionListItem={onAddExceptionClick}
lastUpdated={null}
emptyViewerTitle={emptyViewerTitle}
emptyViewerBody={emptyViewerBody}
emptyViewerButtonText={emptyViewerButtonText}
/>
</ExceptionPanel>
</EuiAccordion>
</EuiFlexItem>
{showAddExceptionFlyout ? (
<AddExceptionFlyout
Expand Down

0 comments on commit 8d49272

Please sign in to comment.