Annotations: As a user I can write an annotation to an existing annotation stream

Blocked by https://github.com/influxdata/idpe/issues/9001

---

I am a user and I want to annotate a visualization I am looking at

GIVEN I have already created at least 1 Annotation Stream
AND I am looking at a visualization in the Data Explorer or a Dashboard

WHEN I click the `Annotations` button
THEN I see a toolbar with controls for annotations

WHEN I click the blue `Annotate` button
THEN I see instructions on how to annotate a visualization

WHEN I hover over a compatible visualization (TBD)
THEN I see a vertical marker following my mouse (inside the visualization)
AND the vertical marker tells me I can `Click to add single point, click + drag to add a range`

WHEN I click or click+drag on a compatible visualization
THEN I see an overlay with a form for creating the annotation

WHEN I click the blue `Add Annotation` button
AND there are no form errors
THEN my annotation is written to the bucket associated with the stream selected and inherits tags + measurements
AND I see a notification appear (success, 5s, "Annotation written successfully! Please wait a moment for it to appear")

WHEN I click the blue `Add Annotation` button
AND there are form errors
THEN I see error text below each invalid input

[Design Mockup](https://www.figma.com/file/AQk0tUthLFepRhFUibvzMI/Annotations?node-id=145%3A333)
[AddAnnotationOverlay.tsx](https://github.com/influxdata/ui/blob/feat/annotations-controls/src/annotations/components/addAnnotation/AddAnnotationOverlay.tsx)

This UI is partially built out:
Access the overlay by clicking `Annotate`
Access the overlay with route `orgs/orgID/dashboard/dashboardID/add-annotation` (from dashboard) or `orgs/orgID/data-explorer/add-annotation` (from DE)