Draggable: only set drag handle props on the drag handle itself

[ashharrison90]

What this PR does / why we need it:

• Update dependency react-select to v5.3.2 #49142 updated our version of react-select
  • this includes this pr which short circuits the onControlMouseDown function in react-select if event.defaultPrevented = true
• react-beatiful-dnd sets event.preventDefault() on it's drag handlers
• we were incorrectly spreading dragHandleProps onto elements that weren't the drag handles themselves, but instead the whole row.
• changed it to spread the props onto the correct elements.
  • this also makes it so that rows can no longer be dragged from anywhere, only the appropriate drag handle.

Which issue(s) this PR fixes:

Fixes #49867

Special notes for your reviewer:

[joshhunt]

Excellent job tracking down the cause of this and coming up with a good fix! I want to demo this first to see what it's like in practice.

Not super in love with defining functions inline in (functional) components - a lot of the times it's just components within components, especially more so since the argument is called "props" 😅. Maybe we can just hoist this out to a component to this file?

[joshhunt]

is this... a... component? 😇

[joshhunt]

Hmmm..... In practice, I think the drag handle is quite small and awfully close to the no-confirm Delete button

We could give the handle a bunch of padding and offset that with negative margins (to make the drag handle flush with the outer bounds of the row), and push it a bit away from the action buttons?

(red bg mine, to show the target size)

quick inspector CSS:

    padding: 7px;
    margin: -9px;
    margin-left: calc(16px - 7px);

[grafanabot]

Drone build failed: https://drone.grafana.net/grafana/grafana-enterprise/20657

[gillesdemey]

Works like a charm, LGTM!

[axelavargas]

👏🏾