pierrejeambrun opened a new pull request, #28245:
URL: https://github.com/apache/airflow/pull/28245

   closes: #28167.
   
   Allow rendering of markdown for the task and dagrun notes in the grid view.
   
   We use a [react-markdown](https://github.com/remarkjs/react-markdown) which 
is very well maintained and popular and the 
[remark-gfm](https://github.com/remarkjs/remark-gfm) plugin to add support for 
table, strikethrough, checklist and other extra tags.
   
   We add a custom components mapping to be able to render ChakraUI components. 
This allows us to the markdown part consistent with the rest of the app. (same 
components). We also have full control here of what is rendered for each 
element.
   
   A few improvement to consider, that can come as follow up PRs:
   - As we render ChakraUI component when rendering the markdown, it is so 
consistent with the rest of the app that it can be difficult to dissociate what 
is the note, and what is the actual UI. To address this I added a few style 
unique to the markdown part so we have some differences (especially in font 
size) but it is not obvious. (maybe splitting to its own tab would help, see 
below)
   - Long notes are hard to see in the details tab because there is already a 
lot of information, maybe separating the note in its own tab would make it 
easier to visualize. (And also dissociate from the rest of the UI)
   - During my test, it was working pretty well, and we might sometimes want to 
put more that 1000 characters in the note. Maybe we could increase this a bit. 
(A table for instance really fills up the limit quite rapidly, just wondering)
   - No support yet for syntax highlighting for code block. This is just a 
normal 'Code' component and no language specific stuff happen. There are 
plugins for that, we might want to take a look.
   - I activated the 'skipHtml' props, as I don't know yet how safe it is to 
allow arbitrary html to run in here or if this is working well.
   
   
   An examples:
   
![image](https://user-images.githubusercontent.com/14861206/206583974-55341588-310e-4f3d-9157-f121eec0c00b.png)
   
   Another one with a table and a code block:
   
![image](https://user-images.githubusercontent.com/14861206/206585072-0b130b1b-fa87-413b-9f3a-34626d2e07c8.png)
   
   
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]

Reply via email to