Skip to content

Commit

Permalink
PR feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
@js-jankisalvi
js-jankisalvi committed Jul 7, 2023
1 parent a12a48a commit 0097ebf
Show file tree
Hide file tree
Showing 4 changed files with 84 additions and 24 deletions.
11 changes: 3 additions & 8 deletions x-pack/plugins/cases/public/components/markdown_editor/editable_markdown_footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,19 @@
import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty, EuiButton } from '@elastic/eui';
import React from 'react';

import { useFormData } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib';

import * as i18n from '../case_view/translations';
import { MAX_COMMENT_LENGTH } from '../../../common/constants';

interface EditableMarkdownFooterProps {
handleSaveAction: () => Promise<void>;
handleCancelAction: () => void;
isSaveDisabled: boolean;
}

const EditableMarkdownFooterComponent: React.FC<EditableMarkdownFooterProps> = ({
handleSaveAction,
handleCancelAction,
isSaveDisabled,
}) => {
const [{ content }] = useFormData<{ content: string }>({ watch: ['content'] });

const isDisabled = !content?.trim().length || content.trim().length > MAX_COMMENT_LENGTH;

return (
<EuiFlexGroup gutterSize="s" justifyContent="flexEnd" responsive={false}>
<EuiFlexItem grow={false}>
Expand All @@ -45,7 +40,7 @@ const EditableMarkdownFooterComponent: React.FC<EditableMarkdownFooterProps> = (
fill
iconType="save"
onClick={handleSaveAction}
disabled={isDisabled}
disabled={isSaveDisabled}
size="s"
>
{i18n.SAVE}
Expand Down
46 changes: 31 additions & 15 deletions x-pack/plugins/cases/public/components/markdown_editor/editable_markdown_renderer.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,17 @@
*/

import React from 'react';
import { useForm, Form } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib';
import type { FormSchema } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib';
import { useForm, Form, FIELD_TYPES } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib';
import { waitFor, fireEvent, screen, render, act } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { fieldValidators } from '@kbn/es-ui-shared-plugin/static/forms/helpers';
import * as i18n from '../../common/translations';

const { emptyField, maxLengthField } = fieldValidators;

import { EditableMarkdown } from '.';
import { TestProviders } from '../../common/mock';
import type { Content } from '../user_actions/schema';
import { schema } from '../user_actions/schema';
import { MAX_COMMENT_LENGTH } from '../../../common/constants';

jest.mock('../../common/lib/kibana');

Expand All @@ -25,6 +27,24 @@ const newValue = 'Hello from Tehas';
const hyperlink = `[hyperlink](http://elastic.co)`;
const draftStorageKey = `cases.testAppId.caseId.markdown-id.markdownEditor`;
const content = `A link to a timeline ${hyperlink}`;
const maxLength = 5000;

const mockSchema: FormSchema<{ content: string }> = {
content: {
type: FIELD_TYPES.TEXTAREA,
validations: [
{
validator: emptyField(i18n.REQUIRED_FIELD),
},
{
validator: maxLengthField({
length: maxLength,
message: i18n.MAX_LENGTH_ERROR('textarea', maxLength),
}),
},
],
},
};

const editorRef: React.MutableRefObject<null | undefined> = { current: null };
const defaultProps = {
Expand All @@ -36,7 +56,7 @@ const defaultProps = {
onChangeEditable,
onSaveContent,
fieldName: 'content',
formSchema: schema,
formSchema: mockSchema,
editorRef,
};

Expand All @@ -45,10 +65,10 @@ describe('EditableMarkdown', () => {
children,
testProviderProps = {},
}) => {
const { form } = useForm<Content>({
const { form } = useForm<{ content: string }>({
defaultValue: { content },
options: { stripEmptyFields: false },
schema,
schema: mockSchema,
});

return (
Expand Down Expand Up @@ -116,10 +136,6 @@ describe('EditableMarkdown', () => {
});

describe('errors', () => {
beforeAll(() => {
jest.useFakeTimers();
});

it('Shows error message and save button disabled if current text is empty', async () => {
render(
<MockHookWrapperComponent>
Expand All @@ -132,7 +148,7 @@ describe('EditableMarkdown', () => {
userEvent.type(screen.getByTestId('euiMarkdownEditorTextArea'), '');

await waitFor(() => {
expect(screen.getByText('Empty comments are not allowed.')).toBeInTheDocument();
expect(screen.getByText('Required field')).toBeInTheDocument();
expect(screen.getByTestId('editable-save-markdown')).toHaveProperty('disabled');
});
});
Expand All @@ -149,13 +165,13 @@ describe('EditableMarkdown', () => {
userEvent.type(screen.getByTestId('euiMarkdownEditorTextArea'), ' ');

await waitFor(() => {
expect(screen.getByText('Empty comments are not allowed.')).toBeInTheDocument();
expect(screen.getByText('Required field')).toBeInTheDocument();
expect(screen.getByTestId('editable-save-markdown')).toHaveProperty('disabled');
});
});

it('Shows error message and save button disabled if current text is too long', async () => {
const longComment = 'b'.repeat(MAX_COMMENT_LENGTH + 1);
const longComment = 'b'.repeat(maxLength + 1);

render(
<MockHookWrapperComponent>
Expand All @@ -170,7 +186,7 @@ describe('EditableMarkdown', () => {
await waitFor(() => {
expect(
screen.getByText(
'The length of the comment is too long. The maximum length is 30000 characters.'
`The length of the textarea is too long. The maximum length is ${maxLength} characters.`
)
).toBeInTheDocument();
expect(screen.getByTestId('editable-save-markdown')).toHaveProperty('disabled');
Expand Down
3 changes: 2 additions & 1 deletion x-pack/plugins/cases/public/components/markdown_editor/editable_markdown_renderer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const EditableMarkDownRenderer = forwardRef<
options: { stripEmptyFields: false },
schema: formSchema,
});
const { submit, setFieldValue } = form;
const { submit, setFieldValue, isValid: isFormValid } = form;

const setComment = useCallback(
(newComment) => {
Expand Down Expand Up @@ -90,6 +90,7 @@ const EditableMarkDownRenderer = forwardRef<
<EditableMarkdownFooter
handleSaveAction={handleSaveAction}
handleCancelAction={handleCancelAction}
isSaveDisabled={isFormValid !== undefined && !isFormValid}
/>
),
initialValue: content,
Expand Down
48 changes: 48 additions & 0 deletions x-pack/plugins/cases/public/components/user_actions/markdown_form.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import userEvent from '@testing-library/user-event';
import type { AppMockRenderer } from '../../common/mock';
import { createAppMockRenderer } from '../../common/mock';
import { UserActionMarkdown } from './markdown_form';
import { MAX_COMMENT_LENGTH } from '../../../common/constants';

jest.mock('../../common/lib/kibana');
jest.mock('../../common/navigation/hooks');
Expand Down Expand Up @@ -58,6 +59,53 @@ describe('UserActionMarkdown ', () => {
expect(screen.getByTestId('editable-cancel-markdown')).toBeInTheDocument();
});

describe('errors', () => {
it('Shows error message and save button disabled if current text is empty', async () => {
appMockRenderer.render(<UserActionMarkdown {...{ ...defaultProps, isEditable: true }} />);

userEvent.clear(screen.getByTestId('euiMarkdownEditorTextArea'));

userEvent.type(screen.getByTestId('euiMarkdownEditorTextArea'), '');

await waitFor(() => {
expect(screen.getByText('Empty comments are not allowed.')).toBeInTheDocument();
expect(screen.getByTestId('editable-save-markdown')).toHaveProperty('disabled');
});
});

it('Shows error message and save button disabled if current text is of empty characters', async () => {
appMockRenderer.render(<UserActionMarkdown {...{ ...defaultProps, isEditable: true }} />);

userEvent.clear(screen.getByTestId('euiMarkdownEditorTextArea'));

userEvent.type(screen.getByTestId('euiMarkdownEditorTextArea'), ' ');

await waitFor(() => {
expect(screen.getByText('Empty comments are not allowed.')).toBeInTheDocument();
expect(screen.getByTestId('editable-save-markdown')).toHaveProperty('disabled');
});
});

it('Shows error message and save button disabled if current text is too long', async () => {
const longComment = 'b'.repeat(MAX_COMMENT_LENGTH + 1);

appMockRenderer.render(<UserActionMarkdown {...{ ...defaultProps, isEditable: true }} />);

const markdown = screen.getByTestId('euiMarkdownEditorTextArea');

userEvent.paste(markdown, longComment);

await waitFor(() => {
expect(
screen.getByText(
'The length of the comment is too long. The maximum length is 30000 characters.'
)
).toBeInTheDocument();
expect(screen.getByTestId('editable-save-markdown')).toHaveProperty('disabled');
});
});
});

describe('useForm stale state bug', () => {
const oldContent = defaultProps.content;
const appendContent = ' appended content';
Expand Down

0 comments on commit 0097ebf

Please sign in to comment.