diff --git a/src/components/Common/Tooltip/Tooltip.js b/src/components/Common/Tooltip/Tooltip.js index a697e1f4..159f2eb0 100644 --- a/src/components/Common/Tooltip/Tooltip.js +++ b/src/components/Common/Tooltip/Tooltip.js @@ -6,7 +6,7 @@ import { aroundTransition } from "../../../utils/transition"; import "./Tooltip.styl"; export const Tooltip = forwardRef( - ({ title, children, defaultVisible, style }, ref) => { + ({ title, children, defaultVisible, disabled, style }, ref) => { const child = Children.only(children); const triggerElement = ref ?? useRef(); const tooltipElement = useRef(); @@ -83,14 +83,20 @@ export const Tooltip = forwardRef( [injected, offset, title, visibilityClasses, tooltipElement], ); + useEffect(() => { + if (disabled === true && visibility === "visible") performAnimation(false); + }, [disabled]); + const clone = cloneElement(child, { ...child.props, ref: triggerElement, onMouseEnter(e) { + if (disabled === true) return; setInjected(true); child.props.onMouseEnter?.(e); }, onMouseLeave(e) { + if (disabled === true) return; performAnimation(false); child.props.onMouseLeave?.(e); }, diff --git a/src/components/DataManager/Toolbar/instruments.js b/src/components/DataManager/Toolbar/instruments.js index e66301d8..fcc3d8d5 100644 --- a/src/components/DataManager/Toolbar/instruments.js +++ b/src/components/DataManager/Toolbar/instruments.js @@ -1,11 +1,13 @@ import { FaCaretDown, FaChevronDown } from "react-icons/fa"; -import { FF_LOPS_E_10, isFF } from "../../../utils/feature-flags"; +import { Block } from "../../../utils/bem"; +import { FF_LOPS_E_10, FF_SELF_SERVE, isFF } from "../../../utils/feature-flags"; import { ErrorBox } from "../../Common/ErrorBox"; import { FieldsButton } from "../../Common/FieldsButton"; import { FiltersPane } from "../../Common/FiltersPane"; import { Icon } from "../../Common/Icon/Icon"; import { Interface } from "../../Common/Interface"; import { ExportButton, ImportButton } from "../../Common/SDKButtons"; +import { Tooltip } from "../../Common/Tooltip/Tooltip"; import { ActionsButton } from "./ActionsButton"; import { GridWidthButton } from "./GridWidthButton"; import { LabelButton } from "./LabelButton"; @@ -14,9 +16,42 @@ import { OrderButton } from "./OrderButton"; import { RefreshButton } from "./RefreshButton"; import { ViewToggle } from "./ViewToggle"; -const style = { - minWidth: '110px', - justifyContent: 'space-between', +const style = { + minWidth: '110px', + justifyContent: 'space-between', +}; + +// Check if user is on trial +const isTrialExpired = window.APP_SETTINGS.billing.checks.is_license_expired; +// Check the subscription period end date +const subscriptionPeriodEnd = window.APP_SETTINGS.subscription.current_period_end; +// Check if user is self-serve +const isSelfServe = isFF(FF_SELF_SERVE) && window.APP_SETTINGS.billing.enterprise; +// Check if user is self-serve and has expired trial +const isSelfServeExpiredTrial = isSelfServe && isTrialExpired && !subscriptionPeriodEnd; +// Check if user is self-serve and has expired subscription +const isSelfServeExpiredSubscription = isSelfServe && subscriptionPeriodEnd && new Date(subscriptionPeriodEnd) < new Date(); +// Check if user is self-serve and has expired trial or subscription +const isSelfServeExpired = isSelfServeExpiredTrial || isSelfServeExpiredSubscription; + +const WithDisabledTooltip = ({ children, ...props }) => { + if (!props.disabled) { + return children; + } + + return ( + + + {children} + + + ); + }; export const instruments = { @@ -26,7 +61,7 @@ export const instruments = { 'columns': ({ size }) => { const iconProps = {}; const isNewUI = isFF(FF_LOPS_E_10); - + if (isNewUI) { iconProps.size = 12; iconProps.style = { @@ -71,7 +106,11 @@ export const instruments = { 'import-button': ({ size }) => { return ( - Import + + Import + ); }, diff --git a/src/utils/feature-flags.js b/src/utils/feature-flags.js index 7e5b539e..368f9db9 100644 --- a/src/utils/feature-flags.js +++ b/src/utils/feature-flags.js @@ -77,6 +77,12 @@ export const FF_OPTIC_2 = "fflag_feat_optic_2_ensure_draft_saved_short"; */ export const FF_LOPS_86 = "fflag_feat_front_lops_86_datasets_storage_edit_short"; +/** + * Self Serve + * @link https://app.launchdarkly.com/default/test/features/fflag_feat_front_leap_482_self_serve_short/ + */ +export const FF_SELF_SERVE = "fflag_feat_front_leap_482_self_serve_short"; + // Customize flags const flags = {};