[EuiInlineEdit] Test Cases for EuiInlineEdit (#6722)

* Added Cypress tests for EuiInlineEdit functionality

* Added snapshots for read mode and edit mode for the Text and Title variations for EuiInlineEdit

* Use RTL render method for snapshots

* [InlineEditForm] - Add data-test-subj to EuiInlineEditForm buttons and inputs
- Removed opinionated save logic that prevented users from being able to save empty strings in editMode

* Created test cases for EuiInlineEditForm. These test cases handle the functional and prop testing for both the Text and Title variations of the component

* Updated InlineEdit Text and Title test suites to only include basic render tests and snapshots of their sizing in both readMode and editMode

* Removed Cypress test in favor of testing EuiInlineEdit with Jest

* Created the onSave prop that returns that latest value within EuiFieldText (in editMode) at the time the save button is clicked.

* [REVERT ME] Added text to the InlineEditText example to display the use of the onSave prop

* Updated onSave prop test to use the Jest mock function call instead of relying on variable value changes

* [PR Feedback] Remove tests that toggled between read/edit mode in EuiInlineEdit Text and Title test suites.

* [PR Feedback] - Updated the descriptions for the onSave and onConfirm props
- Removed data-test-subj IDs from the loading skeleton rectangles
- Updated the isLoading prop to default to false and removed explicit declarations in Text and Title

* [PR Feedback] Updated EuiInlineEditForm test cases with more specific cases for onSave. Removed the isLoading default set in the props for the form as it's no longer needed

* Revert "[REVERT ME] Added text to the InlineEditText example to display the use of the onSave prop"

This reverts commit 6005e53.

Removing modifications to docs file as they were only needed for testing

* Created a new documentation example to showcase the onSave prop

* Update src-docs/src/views/inline_edit/inline_edit_example.js

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>

---------

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>

src-docs/src/views/inline_edit/inline_edit_example.js

@@ -20,6 +20,9 @@ const inlineEditTitleSource = require('!!raw-loader!./inline_edit_title');
 import InlineEditModeProps from './inline_edit_mode_props';
 const inlineEditModePropsSource = require('!!raw-loader!./inline_edit_mode_props');
 
+import InlineEditSave from './inline_edit_save';
+const inlineEditSaveSource = require('!!raw-loader!././inline_edit_save');
+
 import InlineEditConfirm from './inline_edit_confirm';
 const inlineEditConfirmSource = require('!!raw-loader!././inline_edit_confirm');
 
@@ -38,6 +41,7 @@ export const InlineEditExample = {
       </EuiText>
     </>
   ),
+  isNew: true,
   sections: [
     {
       title: 'Display and edit basic text',
@@ -80,6 +84,26 @@ export const InlineEditExample = {
       demo: <InlineEditTitle />,
       props: { EuiInlineEditTitle },
     },
+    {
+      title: 'Saving edited text',
+      text: (
+        <>
+          <p>
+            Use the <EuiCode>onSave</EuiCode> property to retrieve the value of
+            the edited text when the save button is pressed, and the{' '}
+            <EuiCode>onConfirm</EuiCode> callback (if passed) returns{' '}
+            <EuiCode>true</EuiCode> .{' '}
+          </p>
+        </>
+      ),
+      source: [
+        {
+          type: GuideSectionTypes.TSX,
+          code: inlineEditSaveSource,
+        },
+      ],
+      demo: <InlineEditSave />,
+    },
     {
       title: 'Loading and invalid states',
       text: (

src-docs/src/views/inline_edit/inline_edit_save.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { EuiButton, EuiInlineEditText, EuiSpacer } from '../../../../src';
+
+export default () => {
+  const saveToLocalStorage = (newInlineEditValue: string) => {
+    localStorage.setItem('inlineEditValue', newInlineEditValue);
+  };
+
+  const removeFromLocalStorage = () => {
+    localStorage.removeItem('inlineEditValue');
+  };
+
+  const defaultInlineEditValue =
+    localStorage.getItem('inlineEditValue') ||
+    'This value will persist when you refresh the page!';
+
+  return (
+    <>
+      <EuiInlineEditText
+        inputAriaLabel="Edit text inline"
+        defaultValue={defaultInlineEditValue}
+        size="m"
+        onSave={(onSaveVal) => saveToLocalStorage(onSaveVal)}
+      />
+
+      <EuiSpacer />
+
+      <EuiButton onClick={removeFromLocalStorage}>
+        Remove saved value from local storage
+      </EuiButton>
+    </>
+  );
+};