feat: upgrade change requests (#8812)

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}
                 </Box>
 
+                {showChangeRequestUpgrade ? <UpgradeChangeRequests /> : null}
+
                 <StyledButtons>
                     <PermissionButton
                         permission={permission}

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx

@@ -22,6 +22,8 @@ import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { FeatureStrategyIcons } from 'component/feature/FeatureStrategy/FeatureStrategyIcons/FeatureStrategyIcons';
 import { useGlobalLocalStorage } from 'hooks/useGlobalLocalStorage';
 import { Badge } from 'component/common/Badge/Badge';
+import { UpgradeChangeRequests } from './UpgradeChangeRequests';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 
 interface IFeatureOverviewEnvironmentProps {
     env: IFeatureEnvironment;
@@ -131,6 +133,8 @@ const FeatureOverviewEnvironment = ({
     const featureEnvironment = feature?.environments.find(
         (featureEnvironment) => featureEnvironment.name === env.name,
     );
+    const { isOss } = useUiConfig();
+    const showChangeRequestUpgrade = env.type === 'production' && isOss();
 
     return (
         <ConditionallyRender
@@ -228,6 +232,9 @@ const FeatureOverviewEnvironment = ({
                                                 environmentMetric
                                             }
                                         />
+                                        {showChangeRequestUpgrade ? (
+                                            <UpgradeChangeRequests />
+                                        ) : null}
                                     </>
                                 }
                             />

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 (
+        <Wrapper>
+            <MainContent>
+                <StyledImage
+                    src={formatAssetPath(upgradeChangeRequests)}
+                    alt='Change requests'
+                />
+                <MainText>
+                    <p>
+                        Include <b>Change Requests</b> 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.
+                    </p>
+                    <StyledLink
+                        href='https://www.getunleash.io/upgrade-unleash?utm_source=change-requests'
+                        target='_blank'
+                    >
+                        View our Enterprise offering
+                    </StyledLink>
+                </MainText>
+            </MainContent>
+            <Tooltip title='Dismiss' arrow>
+                <StyledCloseButton
+                    aria-label='dismiss'
+                    onClick={() => {
+                        setChangeRequestUpgrade('closed');
+                    }}
+                    size='small'
+                >
+                    <Close fontSize='inherit' />
+                </StyledCloseButton>
+            </Tooltip>
+        </Wrapper>
+    );
+};