From 41a53946e12e653d96507285f5923345b8733fae Mon Sep 17 00:00:00 2001 From: Kent Huang <kent@infuseai.io> Date: Fri, 27 Dec 2024 17:23:52 +0800 Subject: [PATCH 1/3] [Feature] DRC-980 Show tooltip on node selector input field Signed-off-by: Kent Huang <kent@infuseai.io> --- .../components/lineage/LineageViewTopBar.tsx | 80 ++++++++++++++----- 1 file changed, 58 insertions(+), 22 deletions(-) diff --git a/js/src/components/lineage/LineageViewTopBar.tsx b/js/src/components/lineage/LineageViewTopBar.tsx index 6a9d0fd8..4b0b6793 100644 --- a/js/src/components/lineage/LineageViewTopBar.tsx +++ b/js/src/components/lineage/LineageViewTopBar.tsx @@ -21,6 +21,9 @@ import { Spacer, Text, Tooltip, + VStack, + Code, + Link, } from "@chakra-ui/react"; import { FiPackage } from "react-icons/fi"; @@ -34,6 +37,28 @@ import { ChevronDownIcon } from "@chakra-ui/icons"; import { trackHistoryAction } from "@/lib/api/track"; import { DisableTooltipMessages } from "@/constants/tooltipMessage"; +const SelectFilterTooltip = () => { + return ( + <VStack align={"start"} spacing={0}> + <Text fontSize="10pt" color={"gray.500"} pb={1}> + Select nodes by dbt node selector syntax + </Text> + <Text fontSize="8pt"> + <Code fontSize={"8pt"}>model_name</Code> Select a node + </Text> + <Text fontSize="8pt"> + <Code fontSize={"8pt"}>model_name+</Code> Select downstream nodes + </Text> + <Text fontSize="8pt"> + <Code fontSize={"8pt"}>+model_name</Code> Select upstream nodes + </Text> + <Text fontSize="8pt"> + <Code fontSize={"8pt"}>model*</Code> Select by wildcard + </Text> + </VStack> + ); +}; + const HistoryToggle = () => { const { isHistoryOpen, showHistory, closeHistory } = useRecceActionContext(); return ( @@ -215,6 +240,7 @@ const NodeSelectionInput = (props: { value: string; onChange: (value: string) => void; isDisabled?: boolean; + tooltipComponent?: React.ReactNode; }) => { const [inputValue, setInputValue] = useState(props.value); const inputRef = useRef(null); @@ -226,29 +252,38 @@ const NodeSelectionInput = (props: { }, [props.value]); return ( - <Input - ref={inputRef} - height="24px" - fontSize="10pt" - placeholder="with selectors" - isDisabled={props.isDisabled} - value={inputValue} - onChange={(event) => { - setInputValue(event.target.value); - }} - onKeyUp={(event) => { - if (event.key === "Enter") { - props.onChange(inputValue); - } else if (event.key === "Escape") { - event.preventDefault(); - setInputValue(props.value); - if (inputRef.current) { - (inputRef.current as any).blur(); + <Tooltip + label={props.tooltipComponent} + placement="bottom-start" + defaultIsOpen={true} + color={"black"} + backgroundColor={"white"} + closeOnClick={false} + > + <Input + ref={inputRef} + height="24px" + fontSize="10pt" + placeholder="with selectors" + isDisabled={props.isDisabled} + value={inputValue} + onChange={(event) => { + setInputValue(event.target.value); + }} + onKeyUp={(event) => { + if (event.key === "Enter") { + props.onChange(inputValue); + } else if (event.key === "Escape") { + event.preventDefault(); + setInputValue(props.value); + if (inputRef.current) { + (inputRef.current as any).blur(); + } } - } - }} - onBlur={() => setInputValue(props.value)} - /> + }} + onBlur={() => setInputValue(props.value)} + /> + </Tooltip> ); }; @@ -265,6 +300,7 @@ const SelectFilter = ({ isDisabled }: { isDisabled: boolean }) => { select: value ? value : undefined, }); }} + tooltipComponent={<SelectFilterTooltip />} /> ); }; From b09d1ab6122f1da45519d4b8d48a515d131d4b8b Mon Sep 17 00:00:00 2001 From: Kent Huang <kent@infuseai.io> Date: Mon, 30 Dec 2024 14:56:13 +0800 Subject: [PATCH 2/3] [Fix] Only display tooltip when single environment mode Signed-off-by: Kent Huang <kent@infuseai.io> --- js/src/components/lineage/LineageViewTopBar.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/js/src/components/lineage/LineageViewTopBar.tsx b/js/src/components/lineage/LineageViewTopBar.tsx index 4b0b6793..62fcb7de 100644 --- a/js/src/components/lineage/LineageViewTopBar.tsx +++ b/js/src/components/lineage/LineageViewTopBar.tsx @@ -36,6 +36,7 @@ import { findByRunType } from "../run/registry"; import { ChevronDownIcon } from "@chakra-ui/icons"; import { trackHistoryAction } from "@/lib/api/track"; import { DisableTooltipMessages } from "@/constants/tooltipMessage"; +import { useRecceServerFlag } from "@/lib/hooks/useRecceServerFlag"; const SelectFilterTooltip = () => { return ( @@ -243,6 +244,7 @@ const NodeSelectionInput = (props: { tooltipComponent?: React.ReactNode; }) => { const [inputValue, setInputValue] = useState(props.value); + const { data: flags } = useRecceServerFlag(); const inputRef = useRef(null); useEffect(() => { @@ -259,6 +261,7 @@ const NodeSelectionInput = (props: { color={"black"} backgroundColor={"white"} closeOnClick={false} + isDisabled={!flags?.single_env_onboarding} > <Input ref={inputRef} From f649d157eb3e53ef832a9089bfd3532eff13af3e Mon Sep 17 00:00:00 2001 From: Kent Huang <kent@infuseai.io> Date: Mon, 30 Dec 2024 17:11:09 +0800 Subject: [PATCH 3/3] [Fix] Code review issue to config zindex of tooltip Signed-off-by: Kent Huang <kent@infuseai.io> --- js/src/components/lineage/LineageViewTopBar.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/js/src/components/lineage/LineageViewTopBar.tsx b/js/src/components/lineage/LineageViewTopBar.tsx index 62fcb7de..d277af83 100644 --- a/js/src/components/lineage/LineageViewTopBar.tsx +++ b/js/src/components/lineage/LineageViewTopBar.tsx @@ -255,6 +255,15 @@ const NodeSelectionInput = (props: { return ( <Tooltip + // Custom tooltip style + width={"300px"} + padding={2} + shadow={"md"} + borderWidth={1} + rounded={"md"} + styleConfig={{ + zIndex: "dropdown", + }} label={props.tooltipComponent} placement="bottom-start" defaultIsOpen={true}