bbovenzi commented on code in PR #55604:
URL: https://github.com/apache/airflow/pull/55604#discussion_r2389235120
##########
airflow-core/src/airflow/ui/src/components/LimitedItemsList.tsx:
##########
@@ -69,11 +64,63 @@ export const LimitedItemsList = ({
remainingItems.length === 1 ? (
<Text as="span">{remainingItems[0]}</Text>
) : (
- <Tooltip content={remainingItemsList} interactive={interactive}>
- <Text as="span" cursor="help">
- {translate("limitedList", { count: remainingItems.length })}
- </Text>
- </Tooltip>
+ <Popover.Root lazyMount unmountOnExit>
+ <Popover.Trigger asChild>
+ <Button
+ _hover={{ color: "blue.600", textDecoration: "underline" }}
Review Comment:
Since this is a button now, I think we can remove the custom hover effect
##########
airflow-core/src/airflow/ui/src/components/LimitedItemsList.tsx:
##########
@@ -69,11 +64,63 @@ export const LimitedItemsList = ({
remainingItems.length === 1 ? (
<Text as="span">{remainingItems[0]}</Text>
) : (
- <Tooltip content={remainingItemsList} interactive={interactive}>
- <Text as="span" cursor="help">
- {translate("limitedList", { count: remainingItems.length })}
- </Text>
- </Tooltip>
+ <Popover.Root lazyMount unmountOnExit>
+ <Popover.Trigger asChild>
+ <Button
+ _hover={{ color: "blue.600", textDecoration: "underline" }}
+ color="blue.500"
+ cursor="pointer"
+ fontSize="sm"
+ minH="auto"
+ px={1}
+ py={0}
+ size="xs"
+ variant="ghost"
+ >
+ {translate("limitedList", { count: remainingItems.length })}
+ </Button>
+ </Popover.Trigger>
+ <Popover.Content maxW="400px" width="fit-content">
+ <Popover.Arrow />
+ <Popover.Body>
+ <Text fontSize="sm" fontWeight="medium" mb={3}>
+ {translate("limitedList.allItems", { count: items.length
})}
+ </Text>
+
+ <Box maxH="300px" overflowY="auto">
+ {interactive ? (
+ <HStack flexWrap="wrap" gap={2}>
+ {items.map((item, index) => (
+ <Box
+ bg="bg.subtle"
+ borderRadius="sm"
+ key={typeof item === "string" ? item : index}
+ px={2}
+ py={1}
+ >
+ {item}
+ </Box>
+ ))}
+ </HStack>
+ ) : (
+ <Stack gap={1}>
+ {items.map((item, index) => (
+ <Text fontSize="sm" key={typeof item === "string" ?
item : index} userSelect="text">
+ {item}
+ </Text>
+ ))}
+ </Stack>
+ )}
+ </Box>
+
+ <Text color="gray.500" fontSize="xs" mt={3}>
Review Comment:
We shouldn't need this color prop
##########
airflow-core/src/airflow/ui/src/components/LimitedItemsList.tsx:
##########
@@ -69,11 +64,63 @@ export const LimitedItemsList = ({
remainingItems.length === 1 ? (
<Text as="span">{remainingItems[0]}</Text>
) : (
- <Tooltip content={remainingItemsList} interactive={interactive}>
- <Text as="span" cursor="help">
- {translate("limitedList", { count: remainingItems.length })}
- </Text>
- </Tooltip>
+ <Popover.Root lazyMount unmountOnExit>
+ <Popover.Trigger asChild>
+ <Button
+ _hover={{ color: "blue.600", textDecoration: "underline" }}
+ color="blue.500"
Review Comment:
```suggestion
colorPalette="brand"
```
--
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]
