guan404ming commented on code in PR #53035:
URL: https://github.com/apache/airflow/pull/53035#discussion_r2249298135
##########
airflow-core/src/airflow/ui/src/components/FlexibleForm/FlexibleForm.tsx:
##########
@@ -95,60 +107,82 @@ export const FlexibleForm = ({
}
};
- return Object.entries(params).some(([, param]) => typeof
param.schema.section !== "string")
- ? Object.entries(params).map(([, secParam]) => {
- const currentSection = secParam.schema.section ??
flexibleFormDefaultSection;
-
- if (processedSections.has(currentSection)) {
- return undefined;
- } else {
- processedSections.set(currentSection, true);
-
- return (
- <Accordion.Item
- // We need to make the item content overflow visible for
dropdowns to work, but directly applying the style does not work
- css={{
- "& > div:nth-of-type(1)": {
- overflow: "visible",
- },
- }}
- key={currentSection}
- value={currentSection}
- >
- <Accordion.ItemTrigger cursor="button">
- <Text color={sectionError.get(currentSection) ? "fg.error" :
undefined}>
- {currentSection}
- </Text>
- {sectionError.get(currentSection) ? (
- <Icon color="fg.error" margin="-1">
- <MdError />
- </Icon>
+ return Object.entries(params).some(([, param]) => typeof
param.schema.section !== "string") ? (
+ Object.entries(params).map(([, secParam]) => {
+ const currentSection = secParam.schema.section ??
flexibleFormDefaultSection;
+
+ if (processedSections.has(currentSection)) {
+ return undefined;
+ } else {
+ processedSections.set(currentSection, true);
+
+ return (
+ <Accordion.Item
+ // We need to make the item content overflow visible for dropdowns
to work, but directly applying the style does not work
+ css={{
+ "& > div:nth-of-type(1)": {
+ overflow: "visible",
+ },
+ }}
+ key={currentSection}
+ value={currentSection}
+ >
+ <Accordion.ItemTrigger cursor="button">
+ <Text color={sectionError.get(currentSection) ? "fg.error" :
undefined}>{currentSection}</Text>
+ {sectionError.get(currentSection) ? (
+ <Icon color="fg.error" margin="-1">
+ <MdError />
+ </Icon>
+ ) : undefined}
+ </Accordion.ItemTrigger>
+
+ <Accordion.ItemContent pt={0}>
+ <Accordion.ItemBody>
+ {Boolean(subHeader) ? (
+ <Text color="fg.muted" fontSize="xs" mb={2}>
+ {subHeader}
+ </Text>
) : undefined}
- </Accordion.ItemTrigger>
-
- <Accordion.ItemContent pt={0}>
- <Accordion.ItemBody>
- {Boolean(subHeader) ? (
- <Text color="fg.muted" fontSize="xs" mb={2}>
- {subHeader}
- </Text>
+ <Stack separator={<StackSeparator py={2} />}>
+ {Boolean(flexFormDescription) ? (
+ <Markdown
remarkPlugins={[remarkGfm]}>{flexFormDescription}</Markdown>
Review Comment:
Yes, I realized how it implement after I took a deeper look about the
`ReactMarkdown`. Thus, I've updated the component.
--
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]
