Make notes in UI visible directly in header

[jscheffl]

In Airflow 2 Dag run and Task Instance notes were directly displayed in the details panel. In Airflow 3 UI you needed to click on the modal note button so far.

With this PR the notes are directly displayed on the header card for direct visibility... and can be edited. Button is only displayed to add the note initially.

This is according to the discussion in Slack: https://apache-airflow.slack.com/archives/C0809U4S1Q9/p1747945039343669

New experience on Dag run:

dag_run2-2025-06-15_18.01.23.mp4

New experience on Task instances:

task_instance-2025-06-15_18.07.00.mp4

FYI @AutomationDev85@wolfdn@clellmann

[pierrejeambrun]

I am not a big fan of this change. If you have a 200 lines note. Everything will be push down and you'll have to scroll to access the rest of the UI.

[jscheffl]

I am not a big fan of this change. If you have a 200 lines note. Everything will be push down and you'll have to scroll to access the rest of the UI.

Nobody forces you to have 200 lines of note. A note w/ markdown still could carry a <details> area which folds. Otherwise I doubt you can make a useful note with 200 lines if the note is limited to 1000 chars atm.

But otherwise: We could also wrap it into a box that has a maximum height of e.g. 200px so that you expand it only to full size if you click on it. Probably there is a component for this... feel free to add it.

[bbovenzi]

Oh this will mess with the outstanding Gantt Chart PR so one of these needs to be rethought. I understand wanting to make notes more obvious. If so, we may need to do the same for dag and task documentation.

At the bare minimum, we should put this inside of an accordion so it can be hidden away.

Also, removing the "Add/Edit note" button form the header when there is a note isn't great.

[pierrejeambrun]

This creates an issue with cache invalidation. (Clearing a task with a note, should be reflected directly in the component, but because of the local state, it keeps the old value).

Edit that problem might be there before. (or not if the modal is unmount)

Edit 2: Unrelated, created a separate issue for it #53085

[jscheffl]

In Airflow 2 Dag run and Task Instance notes were directly displayed in the details panel. In Airflow 3 UI you needed to click on the modal note button so far.

With this PR the notes are directly displayed on the header card for direct visibility... and can be edited. Button is only displayed to add the note initially.

This is according to the discussion in Slack: https://apache-airflow.slack.com/archives/C0809U4S1Q9/p1747945039343669

New experience on Dag run:

dag_run2-2025-06-15_18.01.23.mp4

New experience on Task instances:

task_instance-2025-06-15_18.07.00.mp4

FYI @AutomationDev85@wolfdn@clellmann

[pierrejeambrun]

I am not a big fan of this change. If you have a 200 lines note. Everything will be push down and you'll have to scroll to access the rest of the UI.

[jscheffl]

I am not a big fan of this change. If you have a 200 lines note. Everything will be push down and you'll have to scroll to access the rest of the UI.

Nobody forces you to have 200 lines of note. A note w/ markdown still could carry a <details> area which folds. Otherwise I doubt you can make a useful note with 200 lines if the note is limited to 1000 chars atm.

But otherwise: We could also wrap it into a box that has a maximum height of e.g. 200px so that you expand it only to full size if you click on it. Probably there is a component for this... feel free to add it.

[bbovenzi]

Oh this will mess with the outstanding Gantt Chart PR so one of these needs to be rethought. I understand wanting to make notes more obvious. If so, we may need to do the same for dag and task documentation.

At the bare minimum, we should put this inside of an accordion so it can be hidden away.

Also, removing the "Add/Edit note" button form the header when there is a note isn't great.

[pierrejeambrun]

This creates an issue with cache invalidation. (Clearing a task with a note, should be reflected directly in the component, but because of the local state, it keeps the old value).

Edit that problem might be there before. (or not if the modal is unmount)

Edit 2: Unrelated, created a separate issue for it #53085

[jscheffl]

In Airflow 2 Dag run and Task Instance notes were directly displayed in the details panel. In Airflow 3 UI you needed to click on the modal note button so far.

With this PR the notes are directly displayed on the header card for direct visibility... and can be edited. Button is only displayed to add the note initially.

This is according to the discussion in Slack: https://apache-airflow.slack.com/archives/C0809U4S1Q9/p1747945039343669

New experience on Dag run:

dag_run2-2025-06-15_18.01.23.mp4

New experience on Task instances:

task_instance-2025-06-15_18.07.00.mp4

FYI @AutomationDev85@wolfdn@clellmann

[pierrejeambrun]

I am not a big fan of this change. If you have a 200 lines note. Everything will be push down and you'll have to scroll to access the rest of the UI.

[jscheffl]

I am not a big fan of this change. If you have a 200 lines note. Everything will be push down and you'll have to scroll to access the rest of the UI.

Nobody forces you to have 200 lines of note. A note w/ markdown still could carry a <details> area which folds. Otherwise I doubt you can make a useful note with 200 lines if the note is limited to 1000 chars atm.

But otherwise: We could also wrap it into a box that has a maximum height of e.g. 200px so that you expand it only to full size if you click on it. Probably there is a component for this... feel free to add it.

[bbovenzi]

Oh this will mess with the outstanding Gantt Chart PR so one of these needs to be rethought. I understand wanting to make notes more obvious. If so, we may need to do the same for dag and task documentation.

At the bare minimum, we should put this inside of an accordion so it can be hidden away.

Also, removing the "Add/Edit note" button form the header when there is a note isn't great.

[pierrejeambrun]

This creates an issue with cache invalidation. (Clearing a task with a note, should be reflected directly in the component, but because of the local state, it keeps the old value).

Edit that problem might be there before. (or not if the modal is unmount)

Edit 2: Unrelated, created a separate issue for it #53085

[jscheffl]

In Airflow 2 Dag run and Task Instance notes were directly displayed in the details panel. In Airflow 3 UI you needed to click on the modal note button so far.

With this PR the notes are directly displayed on the header card for direct visibility... and can be edited. Button is only displayed to add the note initially.

This is according to the discussion in Slack: https://apache-airflow.slack.com/archives/C0809U4S1Q9/p1747945039343669

New experience on Dag run:

dag_run2-2025-06-15_18.01.23.mp4

New experience on Task instances:

task_instance-2025-06-15_18.07.00.mp4

FYI @AutomationDev85@wolfdn@clellmann

[pierrejeambrun]

I am not a big fan of this change. If you have a 200 lines note. Everything will be push down and you'll have to scroll to access the rest of the UI.

[jscheffl]

I am not a big fan of this change. If you have a 200 lines note. Everything will be push down and you'll have to scroll to access the rest of the UI.

Nobody forces you to have 200 lines of note. A note w/ markdown still could carry a <details> area which folds. Otherwise I doubt you can make a useful note with 200 lines if the note is limited to 1000 chars atm.

But otherwise: We could also wrap it into a box that has a maximum height of e.g. 200px so that you expand it only to full size if you click on it. Probably there is a component for this... feel free to add it.

[bbovenzi]

Oh this will mess with the outstanding Gantt Chart PR so one of these needs to be rethought. I understand wanting to make notes more obvious. If so, we may need to do the same for dag and task documentation.

At the bare minimum, we should put this inside of an accordion so it can be hidden away.

Also, removing the "Add/Edit note" button form the header when there is a note isn't great.

[pierrejeambrun]

This creates an issue with cache invalidation. (Clearing a task with a note, should be reflected directly in the component, but because of the local state, it keeps the old value).

Edit that problem might be there before. (or not if the modal is unmount)

Edit 2: Unrelated, created a separate issue for it #53085

[jscheffl]

In Airflow 2 Dag run and Task Instance notes were directly displayed in the details panel. In Airflow 3 UI you needed to click on the modal note button so far.

With this PR the notes are directly displayed on the header card for direct visibility... and can be edited. Button is only displayed to add the note initially.

This is according to the discussion in Slack: https://apache-airflow.slack.com/archives/C0809U4S1Q9/p1747945039343669

New experience on Dag run:

dag_run2-2025-06-15_18.01.23.mp4

New experience on Task instances:

task_instance-2025-06-15_18.07.00.mp4

FYI @AutomationDev85@wolfdn@clellmann

[pierrejeambrun]

I am not a big fan of this change. If you have a 200 lines note. Everything will be push down and you'll have to scroll to access the rest of the UI.

[jscheffl]

I am not a big fan of this change. If you have a 200 lines note. Everything will be push down and you'll have to scroll to access the rest of the UI.

Nobody forces you to have 200 lines of note. A note w/ markdown still could carry a <details> area which folds. Otherwise I doubt you can make a useful note with 200 lines if the note is limited to 1000 chars atm.

But otherwise: We could also wrap it into a box that has a maximum height of e.g. 200px so that you expand it only to full size if you click on it. Probably there is a component for this... feel free to add it.

[bbovenzi]

Oh this will mess with the outstanding Gantt Chart PR so one of these needs to be rethought. I understand wanting to make notes more obvious. If so, we may need to do the same for dag and task documentation.

At the bare minimum, we should put this inside of an accordion so it can be hidden away.

Also, removing the "Add/Edit note" button form the header when there is a note isn't great.

[pierrejeambrun]

This creates an issue with cache invalidation. (Clearing a task with a note, should be reflected directly in the component, but because of the local state, it keeps the old value).

Edit that problem might be there before. (or not if the modal is unmount)

Edit 2: Unrelated, created a separate issue for it #53085

[jscheffl]

In Airflow 2 Dag run and Task Instance notes were directly displayed in the details panel. In Airflow 3 UI you needed to click on the modal note button so far.

With this PR the notes are directly displayed on the header card for direct visibility... and can be edited. Button is only displayed to add the note initially.

This is according to the discussion in Slack: https://apache-airflow.slack.com/archives/C0809U4S1Q9/p1747945039343669

New experience on Dag run:

dag_run2-2025-06-15_18.01.23.mp4

New experience on Task instances:

task_instance-2025-06-15_18.07.00.mp4

FYI @AutomationDev85@wolfdn@clellmann

[pierrejeambrun]

I am not a big fan of this change. If you have a 200 lines note. Everything will be push down and you'll have to scroll to access the rest of the UI.

[jscheffl]

I am not a big fan of this change. If you have a 200 lines note. Everything will be push down and you'll have to scroll to access the rest of the UI.

Nobody forces you to have 200 lines of note. A note w/ markdown still could carry a <details> area which folds. Otherwise I doubt you can make a useful note with 200 lines if the note is limited to 1000 chars atm.

But otherwise: We could also wrap it into a box that has a maximum height of e.g. 200px so that you expand it only to full size if you click on it. Probably there is a component for this... feel free to add it.

[bbovenzi]

Oh this will mess with the outstanding Gantt Chart PR so one of these needs to be rethought. I understand wanting to make notes more obvious. If so, we may need to do the same for dag and task documentation.

At the bare minimum, we should put this inside of an accordion so it can be hidden away.

Also, removing the "Add/Edit note" button form the header when there is a note isn't great.

[pierrejeambrun]

This creates an issue with cache invalidation. (Clearing a task with a note, should be reflected directly in the component, but because of the local state, it keeps the old value).

Edit that problem might be there before. (or not if the modal is unmount)

Edit 2: Unrelated, created a separate issue for it #53085

[jscheffl]

In Airflow 2 Dag run and Task Instance notes were directly displayed in the details panel. In Airflow 3 UI you needed to click on the modal note button so far.

With this PR the notes are directly displayed on the header card for direct visibility... and can be edited. Button is only displayed to add the note initially.

This is according to the discussion in Slack: https://apache-airflow.slack.com/archives/C0809U4S1Q9/p1747945039343669

New experience on Dag run:

dag_run2-2025-06-15_18.01.23.mp4

New experience on Task instances:

task_instance-2025-06-15_18.07.00.mp4

FYI @AutomationDev85@wolfdn@clellmann

[pierrejeambrun]

I am not a big fan of this change. If you have a 200 lines note. Everything will be push down and you'll have to scroll to access the rest of the UI.

[jscheffl]

I am not a big fan of this change. If you have a 200 lines note. Everything will be push down and you'll have to scroll to access the rest of the UI.

Nobody forces you to have 200 lines of note. A note w/ markdown still could carry a <details> area which folds. Otherwise I doubt you can make a useful note with 200 lines if the note is limited to 1000 chars atm.

But otherwise: We could also wrap it into a box that has a maximum height of e.g. 200px so that you expand it only to full size if you click on it. Probably there is a component for this... feel free to add it.

[bbovenzi]

Oh this will mess with the outstanding Gantt Chart PR so one of these needs to be rethought. I understand wanting to make notes more obvious. If so, we may need to do the same for dag and task documentation.

At the bare minimum, we should put this inside of an accordion so it can be hidden away.

Also, removing the "Add/Edit note" button form the header when there is a note isn't great.

[pierrejeambrun]

This creates an issue with cache invalidation. (Clearing a task with a note, should be reflected directly in the component, but because of the local state, it keeps the old value).

Edit that problem might be there before. (or not if the modal is unmount)

Edit 2: Unrelated, created a separate issue for it #53085

[jscheffl]

In Airflow 2 Dag run and Task Instance notes were directly displayed in the details panel. In Airflow 3 UI you needed to click on the modal note button so far.

With this PR the notes are directly displayed on the header card for direct visibility... and can be edited. Button is only displayed to add the note initially.

This is according to the discussion in Slack: https://apache-airflow.slack.com/archives/C0809U4S1Q9/p1747945039343669

New experience on Dag run:

dag_run2-2025-06-15_18.01.23.mp4

New experience on Task instances:

task_instance-2025-06-15_18.07.00.mp4

FYI @AutomationDev85@wolfdn@clellmann

[pierrejeambrun]

I am not a big fan of this change. If you have a 200 lines note. Everything will be push down and you'll have to scroll to access the rest of the UI.

[jscheffl]

I am not a big fan of this change. If you have a 200 lines note. Everything will be push down and you'll have to scroll to access the rest of the UI.

Nobody forces you to have 200 lines of note. A note w/ markdown still could carry a <details> area which folds. Otherwise I doubt you can make a useful note with 200 lines if the note is limited to 1000 chars atm.

But otherwise: We could also wrap it into a box that has a maximum height of e.g. 200px so that you expand it only to full size if you click on it. Probably there is a component for this... feel free to add it.

[bbovenzi]

Oh this will mess with the outstanding Gantt Chart PR so one of these needs to be rethought. I understand wanting to make notes more obvious. If so, we may need to do the same for dag and task documentation.

At the bare minimum, we should put this inside of an accordion so it can be hidden away.

Also, removing the "Add/Edit note" button form the header when there is a note isn't great.

[pierrejeambrun]

This creates an issue with cache invalidation. (Clearing a task with a note, should be reflected directly in the component, but because of the local state, it keeps the old value).

Edit that problem might be there before. (or not if the modal is unmount)

Edit 2: Unrelated, created a separate issue for it #53085