Feat/add enterprise badge to change req settings

frontend/src/component/common/PremiumFeature/PremiumFeature.tsx

@@ -0,0 +1,84 @@
+import { ReactComponent as ProPlanIcon } from 'assets/icons/pro-enterprise-feature-badge.svg';
+import { Box, Link, styled, Typography } from '@mui/material';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
+
+const PremiumFeatureWrapper = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    padding: theme.spacing(1, 0.5),
+}));
+
+const StyledTitle = styled(Typography)(({ theme }) => ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.fontSizes.smallBody,
+    gap: theme.spacing(1),
+}));
+
+const StyledBody = styled(Typography)(({ theme }) => ({
+    fontSize: theme.fontSizes.smallBody,
+    margin: theme.spacing(1, 0),
+}));
+
+const StyledLink = styled(Link)(({ theme }) => ({
+    fontSize: theme.fontSizes.smallBody,
+    width: 'fit-content',
+}));
+
+export enum FeatureLevelTitle {
+    PRO = 'Pro & Enterprise feature',
+    ENTERPRISE = 'Enterprise feature',
+}
+
+export enum PlausibleOrigin {
+    PROJECT = 'Projects',
+    ACCESS = 'Access',
+    CHANGE_REQUEST = 'Change Request',
+}
+
+export interface PremiumFeatureProps {
+    children: React.ReactNode;
+    origin: PlausibleOrigin;
+    enterpriseOnly?: boolean;
+    center?: boolean;
+}
+
+export const PremiumFeature = ({
+    enterpriseOnly = false,
+    origin,
+    children,
+    center,
+}: PremiumFeatureProps) => {
+    const tracker = usePlausibleTracker();
+    const handleClick = () => {
+        if (origin) {
+            tracker.trackEvent('upgrade_plan_clicked', {
+                props: { origin },
+            });
+        }
+    };
+    return (
+        <PremiumFeatureWrapper
+            sx={{
+                alignItems: center ? 'center' : 'start',
+                textAlign: center ? 'center' : 'left',
+            }}
+        >
+            <StyledTitle>
+                <ProPlanIcon />
+                {enterpriseOnly
+                    ? FeatureLevelTitle.ENTERPRISE
+                    : FeatureLevelTitle.PRO}
+            </StyledTitle>
+            <StyledBody>{children}</StyledBody>
+            <StyledLink
+                href={'https://www.getunleash.io/plans'}
+                target="_blank"
+                onClick={handleClick}
+            >
+                Upgrade now
+            </StyledLink>
+        </PremiumFeatureWrapper>
+    );
+};

frontend/src/component/common/VerticalTabs/VerticalTab/VerticalTab.tsx

@@ -1,25 +1,36 @@
-import { styled } from '@mui/material';
+import { Button, styled } from '@mui/material';
 
-const StyledTab = styled('button')<{ selected: boolean }>(
+const StyledTab = styled(Button)<{ selected: boolean }>(
     ({ theme, selected }) => ({
-        cursor: 'pointer',
-        border: 0,
-        backgroundColor: selected
-            ? theme.palette.background.paper
-            : 'transparent',
-        borderLeft: `${theme.spacing(1)} solid ${
-            selected ? theme.palette.primary.main : 'transparent'
-        }`,
-        borderRadius: theme.shape.borderRadiusMedium,
-        padding: theme.spacing(2, 4),
-        color: theme.palette.text.primary,
-        fontSize: theme.fontSizes.bodySize,
-        fontWeight: selected ? theme.fontWeight.bold : theme.fontWeight.medium,
-        textAlign: 'left',
-        transition: 'background-color 0.2s ease',
+        '&.MuiButton-root': {
+            cursor: 'pointer',
+            height: theme.spacing(6.5),
+            border: 0,
+            backgroundColor: selected
+                ? theme.palette.background.paper
+                : 'transparent',
+            borderLeft: `${theme.spacing(1)} solid ${
+                selected ? theme.palette.primary.main : 'transparent'
+            }`,
+            borderRadius: theme.shape.borderRadiusMedium,
+            justifyContent: 'start',
+            transition: 'background-color 0.2s ease',
+            color: theme.palette.text.primary,
+            textAlign: 'left',
+            padding: theme.spacing(2, 4),
+            fontSize: theme.fontSizes.bodySize,
+            fontWeight: selected
+                ? theme.fontWeight.bold
+                : theme.fontWeight.medium,
+            lineHeight: 1.2,
+        },
         '&:hover': {
             backgroundColor: theme.palette.neutral.light,
         },
+        '&.Mui-disabled': {
+            pointerEvents: 'auto',
+        },
+        justifyContent: 'space-between',
     })
 );
 
@@ -34,7 +45,15 @@ export const VerticalTab = ({
     selected,
     onClick,
 }: IVerticalTabProps) => (
-    <StyledTab selected={Boolean(selected)} onClick={onClick}>
+    <StyledTab
+        selected={Boolean(selected)}
+        onClick={onClick}
+        disableRipple
+        disableElevation
+        disableFocusRipple
+        disableTouchRipple
+        fullWidth
+    >
         {label}
     </StyledTab>
 );