Add support for XCom page in browse and task instance tab

[tirkarthi]

Add support to display XCom details for a task instance in a tab. Add a clipboard button next to the value so that user can copy the value easily. The PR also adds global XCom page under browse similar to Events page currently.

Notes for review and self :

1. Events page is at src/pages/Events/ should I move this also to src/pages/XCom from current airflow/ui/src/pages/TaskInstance/XCom . I started with task instance and later realized it's easier to make this page global .
2. Added run_id to the response for better filtering in retrieving value API in the global XCom page without any run id in the URL params.
3. Each XCom entry needs an API call passing stringify: true to get the value. I have added a skeleton but is it possible to set some value to reuse the Skeleton from Table's component.
4. Clipboard button was automatically generated from https://www.chakra-ui.com/docs/components/clipboard . Do I need to move these to individual files or disable the warnings?
5. The value can be pretty printed and highlighted for JSON like legacy UI but can try it in another PR.

/home/karthikeyan/stuff/python/airflow/airflow/ui/src/components/ui/clipboard.tsx
   38:27  warning  Declare only one React component per file  react/no-multi-comp
   47:31  warning  Declare only one React component per file  react/no-multi-comp
   61:32  warning  Declare only one React component per file  react/no-multi-comp
   72:30  warning  Declare only one React component per file  react/no-multi-comp
   92:36  warning  Declare only one React component per file  react/no-multi-comp
  104:31  warning  Declare only one React component per file  react/no-multi-comp

Related #44667

XCom under browse page

[tirkarthi]

Not sure why my pre-commit run and the one in CI are different.

[jscheffl]

In the legacy UI in 2.10 I invested a bit of efforts making XCom better readable for users in #40640 . Especially for Dicts and lists. Can you re-apply such feature also for the new XCom display, such that dicts are not just dumped as text? (I know I generated a set of side-effects as bugs which needed to be fixed, so in the new UI we have the chance to make it "right the first time" also with a re-usable component for DAG Run Conf.

[tirkarthi]

Thanks @jscheffl, it needs porting ReactJSON related component from legacy UI and would like to tackle it in a separate PR as noted in the PR description since it seems to take fair bit of work.

[jscheffl]

Thanks @jscheffl, it needs porting ReactJSON related component from legacy UI and would like to tackle it in a separate PR as noted in the PR description since it seems to take fair bit of work.

Fair. As long as it is not forgotten :-D And does not need to be e exactly the same component as in legacy if there are better components nowadays.

Regarding (3) in your list above: In the past "Rest API" call the public XCom endpoint was used and for adding the "ReactJSON" I needed to add the "stringify" option as workarouns as the stringified version before used Python-style quotes which were not JSON parsable in the React / Javascript code. In the legacy this is really bad (in my view) and it would be better if in the new UI it is made "right" from the beginning. I wanted to prevent this in the past not having a breaking change in the REST API - but now would be the time with FastAPI anyway. So stringify might need to be set to false later back again to get a native object, else would be a waste to re-parse the string to JSON in TypeScript again after REST endpoint

[tirkarthi]

Thanks @jscheffl, here is one rough attempt I can think of. Pass stringify: false in the API. Try JSON.stringify() and set highlight to true to use <SyntaxHighlighter />. On error just convert to string using String() and set highlight to be false to render it as normal <Text>. But this also means if there is __str__ implemented for the custom object in Python land then JS String() value might be different in case the object doesn't fit JSON.stringify.

[jscheffl]

Thanks @jscheffl, here is one rough attempt I can think of. Pass stringify: false in the API. Try JSON.stringify() and set highlight to true to use <SyntaxHighlighter />. On error just convert to string using String() and set highlight to be false to render it as normal <Text>. But this also means if there is __str__ implemented for the custom object in Python land then JS String() value might be different in case the object doesn't fit JSON.stringify.

Yeah, but this is only rough :-) Then rather to it "right" in a follow-up PR 👍

[bbovenzi]

I agree with moving this to a more global component like we did for events.

Also +1 on trying to use syntax highlighter. I wonder if we should update xcom entry to tell us what type the value is so the UI isn't guessing

[bbovenzi]

Clipboard.tsx Let's make sure this is capitalized and exported from the index.ts file

We can leave the warning for now. I am happy to fix that later. I might just port all of the chakra generated snippets to a separate directory so we don't have to do all of this manual formatting every single time.

[tirkarthi]

Thanks, moved it to Clipboard.tsx and imported it in index.ts .

[bbovenzi]

Suggested change

	const XComColumn = (): Array<ColumnDef<XComResponse>> => [
	const columns = Array<ColumnDef<XComResponse>> = [

1. start the variable names lowercase
2. We're not passing any arguments, its better as just an array

[tirkarthi]

Thanks, done. Somehow keep forgetting to start variables with lowercase if not a type.

[bbovenzi]

Maybe we should make the skeleton the same size of the XComEntry skeleton?

[tirkarthi]

The default value is width={200} in the datatable component . Maybe I can remove the skeletonWidth here and make width={200} in XComEntry ?

airflow/airflow/ui/src/components/DataTable/skeleton.tsx

Line 38 in e0377eb

width={colDef.meta?.skeletonWidth ?? 200}

[bbovenzi]

oh yeah let's just let it render the default then

[tirkarthi]

Thanks, removed skeletonWidth to render default values and it can be adjusted in future if needed.