[Security Solutions][Cases - Timeline] Fix bug when adding a timeline to a case

[cnasikas]

Summary

The PR fixes a bug where an error occurred when trying to attach a timeline to an existing case or to a new case.

Attach timeline to a new case

Attach timeline to an existing case

Checklist

Delete any items that are not applicable to this PR.

• Unit or functional tests were updated or added to match the most common scenarios

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[elasticmachine]

Pinging @elastic/siem (Team:SIEM)

[cnasikas]

@elasticmachine merge upstream

[stephmilovic]

code and manual testing LGTM. looks like you may need help from @MadameSheema on getting the cypress passing consistently.

[cnasikas]

@elasticmachine merge upstream

[patrykkopycinski]

@sebelga could you take a look at that?

[sebelga]

It would be better to use the useFormData hook and directly provide the field value to this hook. For example, the AddComment would be

const { form } = useForm<CommentRequest>({
  defaultValue: initialCommentValue,
  options: { stripEmptyFields: false },
  schema,
});
const { setFieldValue, reset, submit } = form;

// Get the updated field value
const [{ comment }] = useFormData({ form, watch: ['comment'] });

// Pass it to the hook
const { handleCursorChange, handleOnTimelineChange } = useInsertTimeline<CommentRequest>(comment);

// I am not sure I understand what this does...
// If you need to format the field value on each keystroke, use a "formatter" on the field
// If you need to format the field when initiated, use a "deserializer" on the field.
const addQuote = useCallback(
  (quote) => {
    setFieldValue('comment', `${comment}${comment.length > 0 ? '\n\n' : ''}${quote}`);
  },
  [comment, setFieldValue]
);

[cnasikas]

@sebelga Thank you for your feedback! The addQuote function takes the content of a comment and make it a quote. This will only happen when the user clicks the add quote button and not on each keystroke or at the initiation of the field.

[sebelga]

I see, thanks for the explanation @cnasikas

[patrykkopycinski]

Thank you for using useFormData hook and adding Cypress tests, LGTM ❤️ 💪

[cnasikas]

@elasticmachine merge upstream

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: a009f8e

Build metrics

async chunks size

id	value	diff	baseline
securitySolution	10.0MB	+4.0KB	10.0MB

distributable file count

id	value	diff	baseline
default	45553	+1	45552

History

• 💔 Build #74444 failed 4e08f57
• 💔 Build #74428 failed 1361761
• 💔 Build #74414 failed 5859391
• 💔 Build #74365 failed c02ee6f
• 💔 Build #74213 failed 04c50de

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[elasticmachine]

Pinging @elastic/security-solution (Team: SecuritySolution)