diff --git a/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx b/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx index c008fd69ee..13f6ae1432 100644 --- a/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx +++ b/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx @@ -96,6 +96,7 @@ export const StrategyItemContainer: FC = ({ {onDragStart ? ( ({ display: 'flex', @@ -51,6 +54,22 @@ export const FeatureOverview = () => { return ; } + const { setSplashSeen } = useSplashApi(); + const { splash } = useAuthSplash(); + const dragTooltipSplashId = 'strategy-drag-tooltip'; + const shouldShowStrategyDragTooltip = !splash?.[dragTooltipSplashId]; + const [showTooltip, setShowTooltip] = useState(false); + const [hasClosedTooltip, setHasClosedTooltip] = useState(false); + const toggleShowTooltip = (envIsOpen: boolean) => { + setShowTooltip( + !hasClosedTooltip && shouldShowStrategyDragTooltip && envIsOpen, + ); + }; + const onTooltipClose = () => { + setHasClosedTooltip(true); + setSplashSeen(dragTooltipSplashId); + }; + return (
@@ -63,6 +82,7 @@ export const FeatureOverview = () => {
@@ -92,6 +112,8 @@ export const FeatureOverview = () => { } /> + +
); }; diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx index 3adc2244c0..f683dd8959 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx @@ -59,12 +59,14 @@ type FeatureOverviewEnvironmentProps = { }; metrics?: Pick; otherEnvironments?: string[]; + onToggleEnvOpen?: (isOpen: boolean) => void; }; export const FeatureOverviewEnvironment = ({ environment, metrics = { yes: 0, no: 0 }, otherEnvironments = [], + onToggleEnvOpen = () => {}, }: FeatureOverviewEnvironmentProps) => { const [isOpen, setIsOpen] = useState(false); const projectId = useRequiredPathParam('projectId'); @@ -83,7 +85,11 @@ export const FeatureOverviewEnvironment = ({ data-testid={`${FEATURE_ENVIRONMENT_ACCORDION}_${environment.name}`} expanded={isOpen && hasActivations} disabled={!hasActivations} - onChange={() => setIsOpen(isOpen ? !isOpen : hasActivations)} + onChange={() => { + const state = isOpen ? !isOpen : hasActivations; + onToggleEnvOpen(state); + setIsOpen(state); + }} > void; }; const FeatureOverviewWithReleasePlans: FC< @@ -33,7 +34,7 @@ const FeatureOverviewWithReleasePlans: FC< export const FeatureOverviewEnvironments: FC< FeatureOverviewEnvironmentsProps -> = ({ hiddenEnvironments = [] }) => { +> = ({ hiddenEnvironments = [], onToggleEnvOpen }) => { const projectId = useRequiredPathParam('projectId'); const featureId = useRequiredPathParam('featureId'); const { feature } = useFeature(projectId, featureId); @@ -60,6 +61,7 @@ export const FeatureOverviewEnvironments: FC< ?.filter((env) => !hiddenEnvironments.includes(env.name)) .map((env) => ( ({ + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(1), + maxWidth: '300px', + background: '#201e42', + borderRadius: theme.shape.borderRadiusMedium, + color: theme.palette.common.white, + padding: theme.spacing(2), + paddingRight: theme.spacing(1), + fontSize: theme.typography.body2.fontSize, +})); + +const OkButton = styled(Button)(({ theme }) => ({ + color: theme.palette.secondary.border, + alignSelf: 'start', + marginLeft: theme.spacing(-1), +})); + +const StyledCloseButton = styled(IconButton)(({ theme }) => ({ + color: theme.palette.common.white, + background: 'none', + border: 'none', + position: 'absolute', + top: theme.spacing(1), + right: theme.spacing(1), + svg: { + width: theme.spacing(2), + height: theme.spacing(2), + }, +})); + +const StyledHeader = styled('p')(({ theme }) => ({ + fontSize: theme.typography.body1.fontSize, + fontWeight: 'bold', +})); + +const CustomTooltip = ({ closeProps }: TooltipRenderProps) => { + return ( + + + + + Decide the order evaluation +

+ Strategies are evaluated in the order presented here. Drag and + rearrange the strategies to get the order you prefer. +

+ + Ok, got it! + +
+ ); +}; + +type Props = { + show: boolean; + onClose: () => void; +}; + +export const StrategyDragTooltip: FC = ({ show, onClose }) => { + return ( + { + if (action === 'close') { + onClose(); + } + }} + floaterProps={{ + styles: { + arrow: { + color: '#201e42', + spread: 16, + length: 10, + }, + }, + }} + run={show} + disableOverlay + disableScrolling + tooltipComponent={CustomTooltip} + steps={[ + { + disableBeacon: true, + offset: 0, + target: '.strategy-drag-handle', + content: <>, + }, + ]} + /> + ); +};