Add user comment to task instance and dag run

[Jorricks]

Implement the support for notes inside Airflow.

Quick showcase:
http://www.giphy.com/gifs/RU8JL1GbYdSic9WiU2

Closes: #16790

Steps:

1. Add column to database schema.
2. Add code inside DagRun & TaskInstance.
3. Add code to DagRun and TaskInstance views so you can edit it there.
4. Add code inside API to set Task & DagRun notes.
5. Add react code to set the DagRun notes.
6. Make it look & work somewhat decently in the react front-end.
7. Add react code to set the TaskInstances notes.
8. Add minor overlay over DagRuns to indicate there is a note or not.
9. Add minor overlay over TaskInstance to indicate there is a note or not.
10. Make it work with Mapped Instances as well.
11. Implemented autofocus.
12. Implemented accordion to be initially open when there is a note and closed otherwise.
13. Fix all broken tests
14. Added notes support in TriggerDAGRunOperator
15. Add tests for setting notes on DagRun & TaskInstances.
16. Change UserNotes to notes.
17. Create collapsable user notes.
18. Change TaskInstance API endpoint to Patch.
19. Update names of variables.
20. Change corner color to transparent over black.

[bbovenzi]

I would vote to just call it notes instead of user_notes.
Some variables start becoming quite verbose like useSetDagRunUserNote

[pierrejeambrun]

Maybe we could use something similar to what we have for dag documentation ?

Keeps UI consistent and make sense for a 'note' ? (Not sure if we need this collapsible though, having the collapsible feature seems nice as the note can be pretty long Column(String(1000)))

[Jorricks]

Maybe we could use something similar to what we have for dag documentation ?

Keeps UI consistent and make sense for a 'note' ? (Not sure if we need this collapsible though, having the collapsible feature seems nice as the note can be pretty long Column(String(1000)))

Yes good idea! Let's do that.

[Jorricks]

I am a bit wondering..
Would it be better to create a separate tab for the TaskInstances or would it be better to also use an accordion in-between clearing/changing and details?
IMO it's better to keep the same tab as we want notes to be the first thing people see, (because if they wouldn't be important, they wouldn't be set).

Edit: Went for collapsible :)

[Jorricks]

I modified the look and feel for the TaskInstance and DagRun overview a bit so that the titles have the same font.
Furthermore, also implemented the TaskInstance stuff.
As far as I can judge, this is pretty much ready in terms of functionality.
Just needs a proper code review & some tests.

Latest version can be seen here:
http://www.giphy.com/gifs/FicsjJDKZ7pbDiVFOR

[bbovenzi]

Great work with the edit button to change from a paragraph to a textarea! I agree, the accordion is better than a separate tab.

[Jorricks]

To fix in a separate MR;
Rebasing fixed all errors that were present.

[bbovenzi]

http://localhost:28080/api/v1/dags/simple_mapping/dagRuns/scheduled__2022-03-04T00:00:00+00:00/taskInstances/add_one

I can't replicate this on main. Could you rebase first?

[Jorricks]

http://localhost:28080/api/v1/dags/simple_mapping/dagRuns/scheduled__2022-03-04T00:00:00+00:00/taskInstances/add_one

I can't replicate this on main. Could you rebase first?

Trying that now.

[Jorricks]

Sorry for the closing of the ticket. Happened due to me accidentally pressing 'sync fork', which removed all commits.
I rebased everything. Just checking now that it all still works. Then I'll see if the AWS action change is still present.

[Jorricks]

Reopen

[Jorricks]

Updated the GIF to reflect the latest state

[Jorricks]

Very happy to get this merged! 🎉 🎉
Thanks everyone for all the feedback and in special @bbovenzi who did major improvements on the Typescript part and helped me out with coding in react for the first time 👍 .