chore(AI): trafficBillingDisplay flag cleanup (#10949)

frontend/src/component/admin/billing/Billing.tsx

@@ -8,7 +8,6 @@ import { Alert, Box, styled, Typography } from '@mui/material';
 import { BillingDashboard } from './BillingDashboard/BillingDashboard.tsx';
 import { BillingHistory } from './BillingHistory/BillingHistory.tsx';
 import useInvoices from 'hooks/api/getters/useInvoices/useInvoices';
-import { useUiFlag } from 'hooks/useUiFlag';
 import { BillingInvoices } from './BillingInvoices/BillingInvoices.tsx';
 import { BillingInfo } from './BillingInfo/BillingInfo.tsx';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig.ts';
@@ -32,7 +31,6 @@ export const Billing = () => {
     const { isBilling, refetchInstanceStatus, refresh, loading } =
         useInstanceStatus();
     const { invoices } = useInvoices();
-    const trafficBillingDisplay = useUiFlag('trafficBillingDisplay');
     const {
         uiConfig: { billing },
     } = useUiConfig();
@@ -48,7 +46,7 @@ export const Billing = () => {
         hardRefresh();
     }, [refetchInstanceStatus, refresh]);
 
-    if (trafficBillingDisplay && eligibleForDetailedBilling) {
+    if (eligibleForDetailedBilling) {
         return (
             <Box
                 sx={(theme) => ({

frontend/src/component/admin/billing/BillingDashboard/BillingDashboard.tsx

@@ -1,13 +1,10 @@
 import { Grid } from '@mui/material';
 import { BillingInformation } from './BillingInformation/BillingInformation.tsx';
 import { BillingPlan } from './BillingPlan/BillingPlan.tsx';
-import { useUiFlag } from 'hooks/useUiFlag.ts';
 
 export const BillingDashboard = () => {
-    const trafficBillingDisplay = useUiFlag('trafficBillingDisplay');
-
     return (
-        <Grid container spacing={trafficBillingDisplay ? 2 : 4}>
+        <Grid container spacing={2}>
             <BillingInformation />
             <BillingPlan />
         </Grid>

frontend/src/component/admin/billing/BillingDashboard/BillingInformation/BillingInformation.tsx

@@ -4,17 +4,6 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import { InstanceState } from 'interfaces/instance';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { useInstanceStatus } from 'hooks/api/getters/useInstanceStatus/useInstanceStatus';
-import { useUiFlag } from 'hooks/useUiFlag.ts';
-
-/**
- * @deprecated remove with `trafficBillingDisplay` flag
- */
-const LegacyStyledInfoBox = styled('aside')(({ theme }) => ({
-    padding: theme.spacing(4),
-    height: '100%',
-    borderRadius: theme.shape.borderRadiusLarge,
-    backgroundColor: theme.palette.background.elevation2,
-}));
 
 const StyledInfoBox = styled(Paper)(({ theme }) => ({
     padding: theme.spacing(4),
@@ -47,15 +36,11 @@ export const BillingInformation = () => {
         uiConfig: { billing },
     } = useUiConfig();
     const isPAYG = billing === 'pay-as-you-go';
-    const trafficBillingDisplay = useUiFlag('trafficBillingDisplay');
-    const StyledWrapper = trafficBillingDisplay
-        ? StyledInfoBox
-        : LegacyStyledInfoBox;
 
     if (!instanceStatus)
         return (
             <Grid item xs={12} md={5}>
-                <StyledWrapper data-loading sx={{ flex: 1, height: '400px' }} />
+                <StyledInfoBox data-loading sx={{ flex: 1, height: '400px' }} />
             </Grid>
         );
 
@@ -65,7 +50,7 @@ export const BillingInformation = () => {
 
     return (
         <Grid item xs={12} md={5}>
-            <StyledWrapper>
+            <StyledInfoBox>
                 <StyledTitle variant='body1'>Billing information</StyledTitle>
                 <ConditionallyRender
                     condition={Boolean(isCustomBilling)}
@@ -104,7 +89,7 @@ export const BillingInformation = () => {
                     </a>{' '}
                     for any clarification
                 </StyledInfoLabel>
-            </StyledWrapper>
+            </StyledInfoBox>
         </Grid>
     );
 };

frontend/src/component/admin/billing/BillingDashboard/BillingPlan/BillingPlan.tsx

@@ -8,7 +8,6 @@ import { GridCol } from 'component/common/GridCol/GridCol';
 import { Badge } from 'component/common/Badge/Badge';
 import { BillingDetails } from './BillingDetails.tsx';
 import { useInstanceStatus } from 'hooks/api/getters/useInstanceStatus/useInstanceStatus';
-import { useUiFlag } from 'hooks/useUiFlag.ts';
 
 export const BILLING_PRO_BASE_PRICE = 80;
 export const BILLING_PRO_SEAT_PRICE = 15;
@@ -19,19 +18,6 @@ export const BILLING_PAYG_DEFAULT_MINIMUM_SEATS = 5;
 export const BILLING_PRO_DEFAULT_INCLUDED_SEATS = 5;
 export const BILLING_INCLUDED_REQUESTS = 53_000_000;
 
-/**
- * @deprecated remove with `trafficBillingDisplay` flag
- */
-const LegacyStyledPlanBox = styled('aside')(({ theme }) => ({
-    padding: theme.spacing(2.5),
-    height: '100%',
-    borderRadius: theme.shape.borderRadiusLarge,
-    boxShadow: theme.boxShadows.elevated,
-    [theme.breakpoints.up('md')]: {
-        padding: theme.spacing(6.5),
-    },
-}));
-
 const StyledPlanBox = styled(Paper)(({ theme }) => ({
     padding: theme.spacing(4),
     height: '100%',
@@ -74,7 +60,6 @@ export const BillingPlan = () => {
     const {
         uiConfig: { billing },
     } = useUiConfig();
-    const trafficBillingDisplay = useUiFlag('trafficBillingDisplay');
     const { instanceStatus } = useInstanceStatus();
 
     const isPro =
@@ -82,14 +67,10 @@ export const BillingPlan = () => {
     const isPAYG = billing === 'pay-as-you-go';
     const isEnterpriseConsumption = billing === 'enterprise-consumption';
 
-    const StyledWrapper = trafficBillingDisplay
-        ? StyledPlanBox
-        : LegacyStyledPlanBox;
-
     if (!instanceStatus)
         return (
             <Grid item xs={12} md={7}>
-                <StyledWrapper data-loading sx={{ flex: 1, height: '400px' }} />
+                <StyledPlanBox data-loading sx={{ flex: 1, height: '400px' }} />
             </Grid>
         );
 
@@ -101,7 +82,7 @@ export const BillingPlan = () => {
 
     return (
         <Grid item xs={12} md={7}>
-            <StyledWrapper>
+            <StyledPlanBox>
                 <ConditionallyRender
                     condition={inactive}
                     show={
@@ -177,7 +158,7 @@ export const BillingPlan = () => {
                     isPAYG={isPAYG}
                     isEnterpriseConsumption={isEnterpriseConsumption}
                 />
-            </StyledWrapper>
+            </StyledPlanBox>
         </Grid>
     );
 };

frontend/src/interfaces/uiConfig.ts

@@ -87,7 +87,6 @@ export type UiFlags = {
     impactMetrics?: boolean;
     plausibleMetrics?: boolean;
     globalChangeRequestList?: boolean;
-    trafficBillingDisplay?: boolean;
     milestoneProgression?: boolean;
     featureReleasePlans?: boolean;
     safeguards?: boolean;

src/lib/types/experimental.ts

@@ -57,7 +57,6 @@ export type IFlagKey =
     | 'fetchMode'
     | 'optimizeLifecycle'
     | 'globalChangeRequestList'
-    | 'trafficBillingDisplay'
     | 'milestoneProgression'
     | 'featureReleasePlans'
     | 'plausibleMetrics'
@@ -262,10 +261,6 @@ const flags: IFlags = {
         process.env.UNLEASH_EXPERIMENTAL_GLOBAL_CHANGE_REQUEST_LIST,
         false,
     ),
-    trafficBillingDisplay: parseEnvVarBoolean(
-        process.env.UNLEASH_EXPERIMENTAL_TRAFFIC_BILLING_DISPLAY,
-        false,
-    ),
     milestoneProgression: parseEnvVarBoolean(
         process.env.UNLEASH_EXPERIMENTAL_MILESTONE_PROGRESSION,
         false,

src/server-dev.ts

@@ -52,7 +52,6 @@ process.nextTick(async () => {
                         customMetrics: true,
                         impactMetrics: true,
                         globalChangeRequestList: true,
-                        trafficBillingDisplay: true,
                         milestoneProgression: true,
                         featureReleasePlans: true,
                         safeguards: true,