[EuiTour] Single injection component

[thompsongl]

Could there be an easier way of injecting all the tour steps in to one spot now? In the video above, I ended up making a new DiscoverGridTour component that returns the following:

return (
    <>
      <EuiTourStep
        {...euiTourStepOne}
        footerAction={
          <EuiButtonEmpty color="text" flush="right" size="xs" onClick={actions.incrementStep}>
            Next
          </EuiButtonEmpty>
        }
      />
      <EuiTourStep {...euiTourStepTwo} />
    </>
  );

Then, right above the DiscoverGrid component in discover_grid.tsx I was able to inject these tour steps using the following:

...
return (
    <>
      <DiscoverGridTour /> // <--- Injecting all the steps right here
      <DiscoverGridContext.Provider
        value={{
          expanded: expandedDoc,
... 

We probably don't want tours with more than a handful of steps anyway, but having to manually spread each EuiTourStepProp is a bit clunky - this could be done with a loop or something to make it smaller, but perhaps worth considering another option entirely? Similar to how the EuiTour component works in the "Managed state via EuiTour render prop component" documentation example, but without having to spread each step. Totally possible this already exists and I missed it, though :)

Originally posted by @Heenawter in #5696 (comment)

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[github-actions]

❌ We're automatically closing this issue due to lack of activity. Please comment if you feel this was done in error.