[EuiInlineEditForm] Support onCancel callback for non-controlled usage

[mgadewoll]

Summary

This PR updates the type definition for EuiInlineEditForms onCancel prop to support using it for non-controlled usage next to the already available controlled usage.

When the component is in edit mode, we have two actions: "Save" and "Cancel" and currently only the "Save" action provides a callback for non-controlled usage.
Instead we should also allow onCancel to be always allowed considering that the action is always available too.
The main purpose of the onCancel callback is to reset the value in controlled usage, but there might be a need to use onCancel for non-controlled usages as well to handle other side effects.

Note

No functional changes have been made in this PR. The callback was already always technically available, just that the type definition prohibited its usage.

QA

• checkout this PR and try the following combinations on e.g. EuiInlineEditTitle
  • using defaultValue & onCancel does not trigger a type error
  • using value & onChange and onCancel does not trigger a type error

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Added documentation
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Checked Code Sandbox works for any docs examples
• Code quality checklist
  • Added or updated jest and cypress tests
  • Updated visual regression tests
• Release checklist
  • A changelog entry exists and is marked appropriately.
  • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
• Designer checklist
  • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

[tkajtoch]

I'm not sure if this is expected or reproducible on your side, but I can't actually pass the QA steps provided. I'm getting onChange is not assignable to type undefined in both cases when I'm testing it in EuiInlineEditTitle

[mgadewoll]

I'm not sure if this is expected or reproducible on your side, but I can't actually pass the QA steps provided. I'm getting onChange is not assignable to type undefined in both cases when I'm testing it in EuiInlineEditTitle

That's weird. No I don't see that error 🤔

These examples work fine for me:

// no onCancel
<EuiInlineEditTitle
   heading="h2"
   inputAriaLabel="Edit title inline"
   defaultValue="Hello World (but as a title)!"
 />
 
 // defaultValue & onCancel
<EuiInlineEditTitle
   heading="h2"
   inputAriaLabel="Edit title inline"
   defaultValue="Hello World (but as a title)!"
   onCancel={() => console.log('CANCEL')}
 />
 
 // value & onChange & onCancel
 <EuiInlineEditTitle
  heading="h2"
  inputAriaLabel="Edit title inline"
  value="Foobar"
  onChange={() => console.log('CHANGE')}
  onCancel={() => console.log('CANCEL')}
/>

[weronikaolejniczak]

Checked out the branch and tested the above-mentioned cases:

Seems to be working as expected 👍🏻

[weronikaolejniczak]

I noticed on another pipeline that this component's EuiInlineEditForm › toggling between read mode and edit mode › onSave validation › handles async promises test is flaky. Maybe something comes to mind how to improve it? If not, that's fine, we can move on 😄

[mgadewoll]

I noticed on another pipeline that this component's EuiInlineEditForm › toggling between read mode and edit mode › onSave validation › handles async promises test is flaky. Maybe something comes to mind how to improve it? If not, that's fine, we can move on 😄

@weronikaolejniczak Yeah, this flaky test is known, it's not related to the changes themselves. The problem is that I haven't been able to reproduce it locally so I'm afraid this would create unrelated clutter in this PR by trying to figure out what's actually the issue. 🙈 I'd vote for checking on this separately.

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_8307/
• Storybook: https://eui.elastic.co/pr_8307/storybook
• New docs: https://eui.elastic.co/pr_8307/new-docs

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: ac49122

History

• 💚 Build #3409 succeeded 929d5c6
• 💚 Build #3402 succeeded 8fa75be

cc @tkajtoch @weronikaolejniczak