[Security Solution][Rac][Tgrid] Use correct prop name for disabling timeline context menu button (#96453)

* Use correct prop name for disabling timeline context menu button

* Update usages of disabled to isDisabled on EuiIconButton

* Update failing snapshot and tests looking for old prop
This commit is contained in:
Kevin Qualters 2021-04-08 10:44:31 -04:00 committed by GitHub
parent e3f31ea9ad
commit de8ba08ac0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 109 additions and 102 deletions

View file

@ -341,7 +341,7 @@ describe('AddToCaseAction', () => {
);
expect(
wrapper.find(`[data-test-subj="attach-alert-to-case-button"]`).first().prop('disabled')
wrapper.find(`[data-test-subj="attach-alert-to-case-button"]`).first().prop('isDisabled')
).toBeTruthy();
});
@ -358,7 +358,7 @@ describe('AddToCaseAction', () => {
);
expect(
wrapper.find(`[data-test-subj="attach-alert-to-case-button"]`).first().prop('disabled')
wrapper.find(`[data-test-subj="attach-alert-to-case-button"]`).first().prop('isDisabled')
).toBeTruthy();
});
});

View file

@ -172,7 +172,7 @@ const AddToCaseActionComponent: React.FC<AddToCaseActionProps> = ({
size="s"
iconType="folderClosed"
onClick={openPopover}
disabled={isDisabled}
isDisabled={isDisabled}
/>
</EuiToolTip>
),

View file

@ -215,19 +215,20 @@ const AlertContextMenuComponent: React.FC<AlertContextMenuProps> = ({
setEventsLoading,
]);
// eslint-disable-next-line react-hooks/exhaustive-deps
const openAlertActionComponent = (
<EuiContextMenuItem
key="open-alert"
aria-label="Open alert"
data-test-subj="open-alert-status"
id={FILTER_OPEN}
onClick={openAlertActionOnClick}
disabled={!hasIndexUpdateDelete && !hasIndexMaintenance}
>
<EuiText size="m">{i18n.ACTION_OPEN_ALERT}</EuiText>
</EuiContextMenuItem>
);
const openAlertActionComponent = useMemo(() => {
return (
<EuiContextMenuItem
key="open-alert"
aria-label="Open alert"
data-test-subj="open-alert-status"
id={FILTER_OPEN}
onClick={openAlertActionOnClick}
disabled={!hasIndexUpdateDelete && !hasIndexMaintenance}
>
<EuiText size="m">{i18n.ACTION_OPEN_ALERT}</EuiText>
</EuiContextMenuItem>
);
}, [openAlertActionOnClick, hasIndexUpdateDelete, hasIndexMaintenance]);
const closeAlertActionClick = useCallback(() => {
updateAlertStatusAction({
@ -248,19 +249,20 @@ const AlertContextMenuComponent: React.FC<AlertContextMenuProps> = ({
setEventsLoading,
]);
// eslint-disable-next-line react-hooks/exhaustive-deps
const closeAlertActionComponent = (
<EuiContextMenuItem
key="close-alert"
aria-label="Close alert"
data-test-subj="close-alert-status"
id={FILTER_CLOSED}
onClick={closeAlertActionClick}
disabled={!hasIndexUpdateDelete && !hasIndexMaintenance}
>
<EuiText size="m">{i18n.ACTION_CLOSE_ALERT}</EuiText>
</EuiContextMenuItem>
);
const closeAlertActionComponent = useMemo(() => {
return (
<EuiContextMenuItem
key="close-alert"
aria-label="Close alert"
data-test-subj="close-alert-status"
id={FILTER_CLOSED}
onClick={closeAlertActionClick}
disabled={!hasIndexUpdateDelete && !hasIndexMaintenance}
>
<EuiText size="m">{i18n.ACTION_CLOSE_ALERT}</EuiText>
</EuiContextMenuItem>
);
}, [closeAlertActionClick, hasIndexUpdateDelete, hasIndexMaintenance]);
const inProgressAlertActionClick = useCallback(() => {
updateAlertStatusAction({
@ -281,72 +283,77 @@ const AlertContextMenuComponent: React.FC<AlertContextMenuProps> = ({
setEventsLoading,
]);
// eslint-disable-next-line react-hooks/exhaustive-deps
const inProgressAlertActionComponent = (
<EuiContextMenuItem
key="in-progress-alert"
aria-label="Mark alert in progress"
data-test-subj="in-progress-alert-status"
id={FILTER_IN_PROGRESS}
onClick={inProgressAlertActionClick}
disabled={!canUserCRUD || !hasIndexUpdateDelete}
>
<EuiText size="m">{i18n.ACTION_IN_PROGRESS_ALERT}</EuiText>
</EuiContextMenuItem>
);
const inProgressAlertActionComponent = useMemo(() => {
return (
<EuiContextMenuItem
key="in-progress-alert"
aria-label="Mark alert in progress"
data-test-subj="in-progress-alert-status"
id={FILTER_IN_PROGRESS}
onClick={inProgressAlertActionClick}
disabled={!canUserCRUD || !hasIndexUpdateDelete}
>
<EuiText size="m">{i18n.ACTION_IN_PROGRESS_ALERT}</EuiText>
</EuiContextMenuItem>
);
}, [canUserCRUD, hasIndexUpdateDelete, inProgressAlertActionClick]);
const button = (
<EuiToolTip position="top" content={i18n.MORE_ACTIONS}>
<EuiButtonIcon
aria-label={ariaLabel}
data-test-subj="timeline-context-menu-button"
size="s"
iconType="boxesHorizontal"
onClick={onButtonClick}
disabled={disabled}
/>
</EuiToolTip>
);
const button = useMemo(() => {
return (
<EuiToolTip position="top" content={i18n.MORE_ACTIONS}>
<EuiButtonIcon
aria-label={ariaLabel}
data-test-subj="timeline-context-menu-button"
size="s"
iconType="boxesHorizontal"
onClick={onButtonClick}
isDisabled={disabled}
/>
</EuiToolTip>
);
}, [disabled, onButtonClick, ariaLabel]);
const handleAddEndpointExceptionClick = useCallback((): void => {
closePopover();
setOpenAddExceptionModal('endpoint');
}, [closePopover]);
// eslint-disable-next-line react-hooks/exhaustive-deps
const addEndpointExceptionComponent = (
<EuiContextMenuItem
key="add-endpoint-exception-menu-item"
aria-label="Add Endpoint Exception"
data-test-subj="add-endpoint-exception-menu-item"
id="addEndpointException"
onClick={handleAddEndpointExceptionClick}
disabled={!canUserCRUD || !hasIndexWrite || !isEndpointAlert}
>
<EuiText size="m">{i18n.ACTION_ADD_ENDPOINT_EXCEPTION}</EuiText>
</EuiContextMenuItem>
);
const addEndpointExceptionComponent = useMemo(() => {
return (
<EuiContextMenuItem
key="add-endpoint-exception-menu-item"
aria-label="Add Endpoint Exception"
data-test-subj="add-endpoint-exception-menu-item"
id="addEndpointException"
onClick={handleAddEndpointExceptionClick}
disabled={!canUserCRUD || !hasIndexWrite || !isEndpointAlert}
>
<EuiText size="m">{i18n.ACTION_ADD_ENDPOINT_EXCEPTION}</EuiText>
</EuiContextMenuItem>
);
}, [canUserCRUD, hasIndexWrite, isEndpointAlert, handleAddEndpointExceptionClick]);
const handleAddExceptionClick = useCallback((): void => {
closePopover();
setOpenAddExceptionModal('detection');
}, [closePopover]);
// eslint-disable-next-line react-hooks/exhaustive-deps
const addExceptionComponent = (
<EuiContextMenuItem
key="add-exception-menu-item"
aria-label="Add Exception"
data-test-subj="add-exception-menu-item"
id="addException"
onClick={handleAddExceptionClick}
disabled={!canUserCRUD || !hasIndexWrite}
>
<EuiText data-test-subj="addExceptionButton" size="m">
{i18n.ACTION_ADD_EXCEPTION}
</EuiText>
</EuiContextMenuItem>
);
const addExceptionComponent = useMemo(() => {
return (
<EuiContextMenuItem
key="add-exception-menu-item"
aria-label="Add Exception"
data-test-subj="add-exception-menu-item"
id="addException"
onClick={handleAddExceptionClick}
disabled={!canUserCRUD || !hasIndexWrite}
>
<EuiText data-test-subj="addExceptionButton" size="m">
{i18n.ACTION_ADD_EXCEPTION}
</EuiText>
</EuiContextMenuItem>
);
}, [handleAddExceptionClick, canUserCRUD, hasIndexWrite]);
const statusFilters = useMemo(() => {
if (!alertStatus) {

View file

@ -27,16 +27,16 @@ exports[`ToolTipFilter renders correctly against snapshot 1`] = `
aria-label="Next"
color="text"
data-test-subj="previous-feature-button"
disabled={true}
iconType="arrowLeft"
isDisabled={true}
onClick={[MockFunction]}
/>
<EuiButtonIcon
aria-label="Next"
color="text"
data-test-subj="next-feature-button"
disabled={false}
iconType="arrowRight"
isDisabled={false}
onClick={[MockFunction]}
/>
</span>

View file

@ -42,7 +42,7 @@ describe('ToolTipFilter', () => {
);
expect(
wrapper.find('[data-test-subj="previous-feature-button"]').first().prop('disabled')
wrapper.find('[data-test-subj="previous-feature-button"]').first().prop('isDisabled')
).toBe(true);
});
@ -70,9 +70,9 @@ describe('ToolTipFilter', () => {
/>
);
expect(wrapper.find('[data-test-subj="next-feature-button"]').first().prop('disabled')).toBe(
false
);
expect(
wrapper.find('[data-test-subj="next-feature-button"]').first().prop('isDisabled')
).toBe(false);
});
test('nextFeature is called when featureIndex is < totalFeatures', () => {
@ -102,7 +102,7 @@ describe('ToolTipFilter', () => {
);
expect(
wrapper.find('[data-test-subj="previous-feature-button"]').first().prop('disabled')
wrapper.find('[data-test-subj="previous-feature-button"]').first().prop('isDisabled')
).toBe(false);
});
@ -130,9 +130,9 @@ describe('ToolTipFilter', () => {
/>
);
expect(wrapper.find('[data-test-subj="next-feature-button"]').first().prop('disabled')).toBe(
true
);
expect(
wrapper.find('[data-test-subj="next-feature-button"]').first().prop('isDisabled')
).toBe(true);
});
test('nextFunction is not called when featureIndex >== totalFeatures', () => {
@ -161,7 +161,7 @@ describe('ToolTipFilter', () => {
);
expect(
wrapper.find('[data-test-subj="previous-feature-button"]').first().prop('disabled')
wrapper.find('[data-test-subj="previous-feature-button"]').first().prop('isDisabled')
).toBe(true);
});
@ -189,9 +189,9 @@ describe('ToolTipFilter', () => {
/>
);
expect(wrapper.find('[data-test-subj="next-feature-button"]').first().prop('disabled')).toBe(
true
);
expect(
wrapper.find('[data-test-subj="next-feature-button"]').first().prop('isDisabled')
).toBe(true);
});
test('nextFunction is not called when only a single feature is provided', () => {
@ -221,7 +221,7 @@ describe('ToolTipFilter', () => {
);
expect(
wrapper.find('[data-test-subj="previous-feature-button"]').first().prop('disabled')
wrapper.find('[data-test-subj="previous-feature-button"]').first().prop('isDisabled')
).toBe(false);
});
@ -249,9 +249,9 @@ describe('ToolTipFilter', () => {
/>
);
expect(wrapper.find('[data-test-subj="next-feature-button"]').first().prop('disabled')).toBe(
false
);
expect(
wrapper.find('[data-test-subj="next-feature-button"]').first().prop('isDisabled')
).toBe(false);
});
test('nextFunction is called when featureIndex > 0 && featureIndex < totalFeatures', () => {

View file

@ -54,7 +54,7 @@ export const ToolTipFooterComponent = ({
onClick={previousFeature}
iconType="arrowLeft"
aria-label="Next"
disabled={featureIndex <= 0}
isDisabled={featureIndex <= 0}
/>
<EuiButtonIcon
data-test-subj={'next-feature-button'}
@ -62,7 +62,7 @@ export const ToolTipFooterComponent = ({
onClick={nextFeature}
iconType="arrowRight"
aria-label="Next"
disabled={featureIndex >= totalFeatures - 1}
isDisabled={featureIndex >= totalFeatures - 1}
/>
</span>
</EuiFlexItem>