diff --git a/frontend/src/assets/img/upgradeChangeRequests.png b/frontend/src/assets/img/upgradeChangeRequests.png new file mode 100644 index 000000000000..401e98620771 Binary files /dev/null and b/frontend/src/assets/img/upgradeChangeRequests.png differ diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx index d69079bcb97b..57b2dd300c21 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx @@ -46,6 +46,7 @@ import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; import { BuiltInStrategies, formatStrategyName } from 'utils/strategyNames'; import { Badge } from 'component/common/Badge/Badge'; import EnvironmentIcon from 'component/common/EnvironmentIcon/EnvironmentIcon'; +import { UpgradeChangeRequests } from '../../FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/UpgradeChangeRequests'; interface IFeatureStrategyFormProps { feature: IFeatureToggle; @@ -262,6 +263,10 @@ export const FeatureStrategyForm = ({ ? 'Add to existing change request' : 'Add change to draft'; + const { isOss } = useUiConfig(); + const showChangeRequestUpgrade = + foundEnvironment?.type === 'production' && isOss(); + const navigate = useNavigate(); const { error: uiConfigError, loading: uiConfigLoading } = useUiConfig(); @@ -538,6 +543,8 @@ export const FeatureStrategyForm = ({ {Limit} + {showChangeRequestUpgrade ? : null} + featureEnvironment.name === env.name, ); + const { isOss } = useUiConfig(); + const showChangeRequestUpgrade = env.type === 'production' && isOss(); return ( + {showChangeRequestUpgrade ? ( + + ) : null} } /> diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/UpgradeChangeRequests.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/UpgradeChangeRequests.tsx new file mode 100644 index 000000000000..8d48accb96b6 --- /dev/null +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/UpgradeChangeRequests.tsx @@ -0,0 +1,89 @@ +import { Box, IconButton, Link, styled, Tooltip } from '@mui/material'; +import upgradeChangeRequests from 'assets/img/upgradeChangeRequests.png'; +import { formatAssetPath } from 'utils/formatPath'; +import Close from '@mui/icons-material/Close'; +import { useLocalStorageState } from 'hooks/useLocalStorageState'; + +const Wrapper = styled(Box)(({ theme }) => ({ + backgroundColor: theme.palette.background.paper, + borderRadius: theme.shape.borderRadiusMedium, + border: `1px solid ${theme.palette.secondary.border}`, + padding: theme.spacing(2), + display: 'flex', + position: 'relative', +})); + +const StyledLink = styled(Link)(({ theme }) => ({ + textDecoration: 'none', + fontWeight: theme.typography.fontWeightBold, +})); + +const StyledImage = styled('img')(({ theme }) => ({ + height: theme.spacing(6), +})); + +const StyledCloseButton = styled(IconButton)(({ theme }) => ({ + position: 'absolute', + top: theme.spacing(0.5), + right: theme.spacing(0.5), +})); + +const MainContent = styled(Box)(({ theme }) => ({ + display: 'flex', + gap: theme.spacing(3), + marginLeft: theme.spacing(0.5), + marginRight: theme.spacing(1), +})); + +const MainText = styled(Box)(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + gap: theme.spacing(0.5), +})); + +export const UpgradeChangeRequests = () => { + const [changeRequestsUpgrade, setChangeRequestUpgrade] = + useLocalStorageState<'open' | 'closed'>( + 'upgrade-change-requests:v1', + 'open', + ); + + if (changeRequestsUpgrade === 'closed') return null; + + return ( + + + + +

+ Include Change Requests in your process to bring + a pull request-like experience to your feature flags. + Reduce the risk of errors with the four-eyes approval + principle. +

+ + View our Enterprise offering + +
+
+ + { + setChangeRequestUpgrade('closed'); + }} + size='small' + > + + + +
+ ); +};