[Chore] Improper React props are causing console errors

[justinkambic]

Task summary

As noted in a recent code review, we have an issue with several of our components spawning console errors related to invalid react props propagating to the DOM. Example from ActionElement component:

console.error
      Warning: React does not recognize the `isDragOver` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isdragover` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
          at div
          at EuiAccordionClass (.../synthetics-recorder/node_modules/@elastic/eui/lib/components/accordion/accordion.js:87:5)
          at Render (.../synthetics-recorder/node_modules/@elastic/eui/lib/services/theme/hooks.js:39:24)
          at displayName (.../synthetics-recorder/node_modules/styled-components/src/models/StyledComponent.js:247:14)
          at div
          at EuiFlexItem (.../synthetics-recorder/node_modules/@elastic/eui/lib/components/flex/flex_item.js:30:23)
          at displayName (.../synthetics-recorder/node_modules/styled-components/src/models/StyledComponent.js:247:14)
          at Behavior (.../synthetics-recorder/src/components/ActionElement/Behavior.tsx:45:54)
          at div
          at .../synthetics-recorder/node_modules/@elastic/eui/lib/components/flex/flex_group.js:75:23
          at displayName (.../synthetics-recorder/node_modules/styled-components/src/models/StyledComponent.js:247:14)
          at ActionComponent (.../synthetics-recorder/src/components/ActionElement/ActionElement.tsx:91:3)
          at displayName (.../synthetics-recorder/node_modules/styled-components/src/models/StyledComponent.js:247:14)
          at RenderContexts (.../synthetics-recorder/src/helpers/test/RenderContexts.tsx:38:3)
          at RenderContexts (.../synthetics-recorder/src/helpers/test/RenderContexts.tsx:38:3)
          at RenderContexts (.../synthetics-recorder/src/helpers/test/RenderContexts.tsx:38:3)
          at RenderContexts (.../synthetics-recorder/src/helpers/test/RenderContexts.tsx:38:3)
          at RenderContexts (.../synthetics-recorder/src/helpers/test/RenderContexts.tsx:38:3)
          at RenderContexts (.../synthetics-recorder/src/helpers/test/RenderContexts.tsx:38:3)
          at RenderContexts (.../synthetics-recorder/src/helpers/test/RenderContexts.tsx:38:3)
          at RenderContexts (.../synthetics-recorder/src/helpers/test/RenderContexts.tsx:38:3)
          at useMemo (.../synthetics-recorder/node_modules/styled-components/src/models/ThemeProvider.js:49:24)
          at StyledComponentsEuiProvider (.../synthetics-recorder/src/contexts/StyledComponentsEuiProvider.tsx:30:3)
          at TestContextWrapper (.../synthetics-recorder/src/helpers/test/render.tsx:47:3)

You can find these errors by simply running the project's unit tests.

npm run test:unit

Components that are causing this issue:

• ActionElement
• SeparatorActions

Linked resources

No response

Additional information

The proposed workaround is to simply wrap these EUI components with a pass-through function that will filter out these props. As noted in the original comment that spawned this issue, EUI components oftentimes propagate their props downward to help ensure they don't break intended functionality of calling code. In this case, we're providing invalid props to DOM nodes like onMouseEnter or isGrabbing, hence triggering the React warnings.

Instead, we should create a component like SeparatorActionsWrapper that accepts isGrabbing and implements the intended styles and other effects based on the prop's value, without passing the actual isGrabbing prop to the EUI component.