mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 01:13:23 -04:00
[Security Solution] [EUI Visual Refresh] update deprecated usage of "success" color (#205679)
## Summary Resolves EUI Visual Refresh issue #202491 This PR is part of a list of PRs to perform the changes necessary to get the new Borealis theme working correctly. It focuses on replacing the deprecated color "success" colors have been updated to "accentSecondary". --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Agustina Nahir Ruidiaz
GitHub
parent
d0e05fdf37
commit
487be325c0
4 changed files with 0 additions and 324 deletions
|
|
@ -222,7 +222,6 @@ module.exports = {
|
|||
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]guided_onboarding_tour[\/\\]tour_step.tsx/,
|
||||
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]header_actions[\/\\]actions.tsx/,
|
||||
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]header_actions[\/\\]header_actions.tsx/,
|
||||
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]header_page[\/\\]editable_title.tsx/,
|
||||
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]header_page[\/\\]index.tsx/,
|
||||
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]header_page[\/\\]title.tsx/,
|
||||
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]header_section[\/\\]index.tsx/,
|
||||
|
|
|
|||
|
|
@ -1,27 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`EditableTitle it renders 1`] = `
|
||||
<EuiFlexGroup
|
||||
alignItems="center"
|
||||
gutterSize="none"
|
||||
>
|
||||
<EuiFlexItem
|
||||
grow={false}
|
||||
>
|
||||
<Memo(TitleComponent)
|
||||
title="Test title"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
grow={false}
|
||||
>
|
||||
<Styled(EuiButtonIcon)
|
||||
aria-label="You can edit Test title by clicking"
|
||||
data-test-subj="editable-title-edit-icon"
|
||||
iconType="pencil"
|
||||
isDisabled={false}
|
||||
onClick={[Function]}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
`;
|
||||
|
|
@ -1,171 +0,0 @@
|
|||
/*
|
||||
* 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 { shallow } from 'enzyme';
|
||||
import React from 'react';
|
||||
|
||||
import { TestProviders } from '../../mock';
|
||||
import { EditableTitle } from './editable_title';
|
||||
import { useMountAppended } from '../../utils/use_mount_appended';
|
||||
|
||||
describe('EditableTitle', () => {
|
||||
const mount = useMountAppended();
|
||||
const submitTitle = jest.fn();
|
||||
|
||||
test('it renders', () => {
|
||||
const wrapper = shallow(
|
||||
<EditableTitle title="Test title" onSubmit={submitTitle} isLoading={false} />
|
||||
);
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('it shows the edit title input field', () => {
|
||||
const wrapper = mount(
|
||||
<TestProviders>
|
||||
<EditableTitle title="Test title" onSubmit={submitTitle} isLoading={false} />
|
||||
</TestProviders>
|
||||
);
|
||||
|
||||
wrapper.find('button[data-test-subj="editable-title-edit-icon"]').simulate('click');
|
||||
wrapper.update();
|
||||
|
||||
expect(wrapper.find('[data-test-subj="editable-title-input-field"]').first().exists()).toBe(
|
||||
true
|
||||
);
|
||||
});
|
||||
|
||||
test('it shows the submit button', () => {
|
||||
const wrapper = mount(
|
||||
<TestProviders>
|
||||
<EditableTitle title="Test title" onSubmit={submitTitle} isLoading={false} />
|
||||
</TestProviders>
|
||||
);
|
||||
|
||||
wrapper.find('button[data-test-subj="editable-title-edit-icon"]').simulate('click');
|
||||
wrapper.update();
|
||||
|
||||
expect(wrapper.find('[data-test-subj="editable-title-submit-btn"]').first().exists()).toBe(
|
||||
true
|
||||
);
|
||||
});
|
||||
|
||||
test('it shows the cancel button', () => {
|
||||
const wrapper = mount(
|
||||
<TestProviders>
|
||||
<EditableTitle title="Test title" onSubmit={submitTitle} isLoading={false} />
|
||||
</TestProviders>
|
||||
);
|
||||
|
||||
wrapper.find('button[data-test-subj="editable-title-edit-icon"]').simulate('click');
|
||||
wrapper.update();
|
||||
|
||||
expect(wrapper.find('[data-test-subj="editable-title-cancel-btn"]').first().exists()).toBe(
|
||||
true
|
||||
);
|
||||
});
|
||||
|
||||
test('it DOES NOT shows the edit icon when in edit mode', () => {
|
||||
const wrapper = mount(
|
||||
<TestProviders>
|
||||
<EditableTitle title="Test title" onSubmit={submitTitle} isLoading={false} />
|
||||
</TestProviders>
|
||||
);
|
||||
|
||||
wrapper.find('button[data-test-subj="editable-title-edit-icon"]').simulate('click');
|
||||
wrapper.update();
|
||||
|
||||
expect(wrapper.find('[data-test-subj="editable-title-edit-icon"]').first().exists()).toBe(
|
||||
false
|
||||
);
|
||||
});
|
||||
|
||||
test('it switch to non edit mode when canceled', () => {
|
||||
const wrapper = mount(
|
||||
<TestProviders>
|
||||
<EditableTitle title="Test title" onSubmit={submitTitle} isLoading={false} />
|
||||
</TestProviders>
|
||||
);
|
||||
|
||||
wrapper.find('button[data-test-subj="editable-title-edit-icon"]').simulate('click');
|
||||
wrapper.update();
|
||||
wrapper.find('button[data-test-subj="editable-title-cancel-btn"]').simulate('click');
|
||||
|
||||
expect(wrapper.find('[data-test-subj="editable-title-edit-icon"]').first().exists()).toBe(true);
|
||||
});
|
||||
|
||||
test('it should change the title', () => {
|
||||
const newTitle = 'new test title';
|
||||
|
||||
const wrapper = mount(
|
||||
<TestProviders>
|
||||
<EditableTitle title="Test title" onSubmit={submitTitle} isLoading={false} />
|
||||
</TestProviders>
|
||||
);
|
||||
|
||||
wrapper.find('button[data-test-subj="editable-title-edit-icon"]').simulate('click');
|
||||
wrapper.update();
|
||||
|
||||
wrapper
|
||||
.find('input[data-test-subj="editable-title-input-field"]')
|
||||
.simulate('change', { target: { value: newTitle } });
|
||||
|
||||
wrapper.update();
|
||||
|
||||
expect(
|
||||
wrapper.find('input[data-test-subj="editable-title-input-field"]').prop('value')
|
||||
).toEqual(newTitle);
|
||||
});
|
||||
|
||||
test('it should NOT change the title when cancel', () => {
|
||||
const title = 'Test title';
|
||||
const newTitle = 'new test title';
|
||||
|
||||
const wrapper = mount(
|
||||
<TestProviders>
|
||||
<EditableTitle title={title} onSubmit={submitTitle} isLoading={false} />
|
||||
</TestProviders>
|
||||
);
|
||||
|
||||
wrapper.find('button[data-test-subj="editable-title-edit-icon"]').simulate('click');
|
||||
wrapper.update();
|
||||
|
||||
wrapper
|
||||
.find('input[data-test-subj="editable-title-input-field"]')
|
||||
.simulate('change', { target: { value: newTitle } });
|
||||
wrapper.update();
|
||||
|
||||
wrapper.find('button[data-test-subj="editable-title-cancel-btn"]').simulate('click');
|
||||
wrapper.update();
|
||||
|
||||
expect(wrapper.find('h1[data-test-subj="header-page-title"]').text()).toEqual(title);
|
||||
});
|
||||
|
||||
test('it submits the title', () => {
|
||||
const newTitle = 'new test title';
|
||||
|
||||
const wrapper = mount(
|
||||
<TestProviders>
|
||||
<EditableTitle title="Test title" onSubmit={submitTitle} isLoading={false} />
|
||||
</TestProviders>
|
||||
);
|
||||
|
||||
wrapper.find('button[data-test-subj="editable-title-edit-icon"]').simulate('click');
|
||||
wrapper.update();
|
||||
|
||||
wrapper
|
||||
.find('input[data-test-subj="editable-title-input-field"]')
|
||||
.simulate('change', { target: { value: newTitle } });
|
||||
|
||||
wrapper.find('button[data-test-subj="editable-title-submit-btn"]').simulate('click');
|
||||
wrapper.update();
|
||||
|
||||
expect(submitTitle).toHaveBeenCalled();
|
||||
expect(submitTitle.mock.calls[0][0]).toEqual(newTitle);
|
||||
expect(wrapper.find('[data-test-subj="editable-title-edit-icon"]').first().exists()).toBe(true);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,125 +0,0 @@
|
|||
/*
|
||||
* 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 type { ChangeEvent } from 'react';
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
import {
|
||||
EuiButton,
|
||||
EuiButtonEmpty,
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiFieldText,
|
||||
EuiButtonIcon,
|
||||
EuiLoadingSpinner,
|
||||
} from '@elastic/eui';
|
||||
|
||||
import * as i18n from './translations';
|
||||
|
||||
import { Title } from './title';
|
||||
|
||||
const MyEuiButtonIcon = styled(EuiButtonIcon)`
|
||||
${({ theme }) => css`
|
||||
margin-left: ${theme.eui.euiSize};
|
||||
`}
|
||||
`;
|
||||
|
||||
const MySpinner = styled(EuiLoadingSpinner)`
|
||||
${({ theme }) => css`
|
||||
margin-left: ${theme.eui.euiSize};
|
||||
`}
|
||||
`;
|
||||
|
||||
interface Props {
|
||||
disabled?: boolean;
|
||||
isLoading: boolean;
|
||||
title: string | React.ReactNode;
|
||||
onSubmit: (title: string) => void;
|
||||
}
|
||||
|
||||
const EditableTitleComponent: React.FC<Props> = ({
|
||||
disabled = false,
|
||||
onSubmit,
|
||||
isLoading,
|
||||
title,
|
||||
}) => {
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
const [changedTitle, onTitleChange] = useState<string>(typeof title === 'string' ? title : '');
|
||||
|
||||
const onCancel = useCallback(() => setEditMode(false), []);
|
||||
const onClickEditIcon = useCallback(() => setEditMode(true), []);
|
||||
|
||||
const onClickSubmit = useCallback((): void => {
|
||||
if (changedTitle !== title) {
|
||||
onSubmit(changedTitle);
|
||||
}
|
||||
setEditMode(false);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [changedTitle, title]);
|
||||
|
||||
const handleOnChange = useCallback(
|
||||
(e: ChangeEvent<HTMLInputElement>) => onTitleChange(e.target.value),
|
||||
[]
|
||||
);
|
||||
return editMode ? (
|
||||
<EuiFlexGroup alignItems="center" gutterSize="m" justifyContent="spaceBetween">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiFieldText
|
||||
onChange={handleOnChange}
|
||||
value={`${changedTitle}`}
|
||||
data-test-subj="editable-title-input-field"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexGroup gutterSize="none" responsive={false} wrap={true}>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButton
|
||||
color="success"
|
||||
data-test-subj="editable-title-submit-btn"
|
||||
fill
|
||||
iconType="save"
|
||||
onClick={onClickSubmit}
|
||||
size="s"
|
||||
>
|
||||
{i18n.SAVE}
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButtonEmpty
|
||||
data-test-subj="editable-title-cancel-btn"
|
||||
iconType="cross"
|
||||
onClick={onCancel}
|
||||
size="s"
|
||||
>
|
||||
{i18n.CANCEL}
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiFlexItem />
|
||||
</EuiFlexGroup>
|
||||
) : (
|
||||
<EuiFlexGroup alignItems="center" gutterSize="none">
|
||||
<EuiFlexItem grow={false}>
|
||||
<Title title={title} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
{isLoading && <MySpinner data-test-subj="editable-title-loading" />}
|
||||
{!isLoading && (
|
||||
<MyEuiButtonIcon
|
||||
isDisabled={disabled}
|
||||
aria-label={i18n.EDIT_TITLE_ARIA(title as string)}
|
||||
iconType="pencil"
|
||||
onClick={onClickEditIcon}
|
||||
data-test-subj="editable-title-edit-icon"
|
||||
/>
|
||||
)}
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
);
|
||||
};
|
||||
|
||||
export const EditableTitle = React.memo(EditableTitleComponent);
|
||||
Loading…
Add table
Add a link
Reference in a new issue