upcoming: [M3-10389] - Feature flag New Chip and Beta Chip for Linode Interfaces

packages/manager/.changeset/pr-12846-upcoming-features-1757510754077.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Feature flag New Chip and Beta Chip for Linode Interfaces ([#12846](https://github.com/linode/manager/pull/12846))

packages/manager/src/featureFlags.ts

@@ -53,6 +53,17 @@ interface BaseFeatureFlag {
   enabled: boolean;
 }
 
+interface LinodeInterfacesFlag extends BaseFeatureFlag {
+  /**
+   * Shows a Beta chip for UI elements related to Linode Interfaces
+   */
+  beta?: boolean;
+  /**
+   * Shows a New chip for UI elements related to Linode Interfaces
+   */
+  new?: boolean;
+}
+
 interface VMHostMaintenanceFlag extends BaseFeatureFlag {
   beta: boolean;
   new: boolean;
@@ -164,7 +175,7 @@ export interface Flags {
   limitsEvolution: LimitsEvolution;
   linodeCloneFirewall: boolean;
   linodeDiskEncryption: boolean;
-  linodeInterfaces: BaseFeatureFlag;
+  linodeInterfaces: LinodeInterfacesFlag;
   lkeEnterprise: LkeEnterpriseFlag;
   mainContentBanner: MainContentBanner;
   marketplaceAppOverrides: MarketplaceAppOverride[];

packages/manager/src/features/Account/NetworkInterfaceType.tsx

@@ -1,10 +1,11 @@
 import { useAccountSettings, useMutateAccountSettings } from '@linode/queries';
 import { Box, Button, Paper, Select, Stack, Typography } from '@linode/ui';
 import { useSnackbar } from 'notistack';
-import * as React from 'react';
+import React from 'react';
 import { Controller, useForm } from 'react-hook-form';
 
 import { usePermissions } from '../IAM/hooks/usePermissions';
+import { LinodeInterfaceFeatureStatusChip } from '../Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/LinodeInterfaceFeatureChip';
 
 import type {
   AccountSettings,
@@ -79,8 +80,9 @@ export const NetworkInterfaceType = () => {
         <Stack mt={1}>
           <Typography variant="body1">
             Choose whether to use Configuration Profile Interfaces or Linode
-            Interfaces (BETA) when creating new Linodes or upgrading existing
-            ones.
+            Interfaces
+            <LinodeInterfaceFeatureStatusChip fallback=" " sx={{ mx: 0.5 }} />
+            when creating new Linodes or upgrading existing ones.
           </Typography>
           <Controller
             control={control}

packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceGeneration.tsx

@@ -1,6 +1,5 @@
 import { useAccountSettings } from '@linode/queries';
 import {
-  BetaChip,
   Box,
   FormControl,
   FormControlLabel,
@@ -14,6 +13,8 @@ import { useController } from 'react-hook-form';
 
 import { ShowMoreExpansion } from 'src/components/ShowMoreExpansion';
 
+import { LinodeInterfaceFeatureStatusChip } from '../../LinodesDetail/LinodeNetworking/LinodeInterfaces/LinodeInterfaceFeatureChip';
+
 import type { LinodeCreateFormValues } from '../utilities';
 import type { LinodeInterfaceAccountSetting } from '@linode/api-v4';
 
@@ -70,7 +71,7 @@ export const InterfaceGeneration = () => {
                     <Typography sx={(theme) => ({ font: theme.font.bold })}>
                       Linode Interfaces
                     </Typography>
-                    <BetaChip />
+                    <LinodeInterfaceFeatureStatusChip />
                   </Stack>
                   <Typography>
                     Linode Interfaces are the preferred option for VPCs and are

packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/UpgradeInterfaces/UpgradeInterfacesDialog.tsx

@@ -1,7 +1,8 @@
-import { BetaChip, Dialog } from '@linode/ui';
+import { Dialog } from '@linode/ui';
 import { useMediaQuery } from '@mui/material';
 import React from 'react';
 
+import { LinodeInterfaceFeatureStatusChip } from '../../LinodeNetworking/LinodeInterfaces/LinodeInterfaceFeatureChip';
 import { ConfigSelectDialogContent } from './DialogContents/ConfigSelectDialogContent';
 import { ErrorDialogContent } from './DialogContents/ErrorDialogContent';
 import { PromptDialogContent } from './DialogContents/PromptDialogContent';
@@ -60,7 +61,7 @@ export const UpgradeInterfacesDialog = (props: UpgradeInterfacesProps) => {
         },
       }}
       title={dialogState.dialogTitle ?? 'Upgrade Interfaces'}
-      titleSuffix={<BetaChip />}
+      titleSuffix={<LinodeInterfaceFeatureStatusChip />}
     >
       {dialogState.step === 'prompt' && (
         <PromptDialogContent {...dialogProps} state={dialogState} />

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/LinodeInterfaceFeatureChip.tsx

@@ -0,0 +1,38 @@
+import { BetaChip, NewFeatureChip } from '@linode/ui';
+import React from 'react';
+
+import { useFlags } from 'src/hooks/useFlags';
+
+import type { BetaChipProps } from '@linode/ui';
+
+interface Props extends BetaChipProps {
+  /**
+   * If provided, this will be what is rendered when no chip is showing.
+   *
+   * @default null
+   */
+  fallback?: React.ReactNode;
+}
+
+/**
+ * Renders a Chip informing users of the status of the Linode Interfaces feature.
+ */
+export const LinodeInterfaceFeatureStatusChip = (props: Props) => {
+  const { fallback, ...chipProps } = props;
+
+  const flags = useFlags();
+
+  if (flags.linodeInterfaces?.beta) {
+    return <BetaChip {...chipProps} />;
+  }
+
+  if (flags.linodeInterfaces?.new) {
+    return <NewFeatureChip {...chipProps} />;
+  }
+
+  if (fallback) {
+    return fallback;
+  }
+
+  return null;
+};

packages/ui/.changeset/pr-12846-changed-1757510862146.md

@@ -0,0 +1,5 @@
+---
+"@linode/ui": Changed
+---
+
+Remove \`marginRight: 0\` on \`MuiChip\` when it is the last child ([#12846](https://github.com/linode/manager/pull/12846))

packages/ui/src/foundations/themes/light.ts

@@ -819,9 +819,6 @@ export const lightTheme: ThemeOptions = {
           '&:focus': {
             outline: `1px dotted ${Color.Neutrals[60]}`,
           },
-          '&:last-child': {
-            marginRight: 0,
-          },
           alignItems: 'center',
           borderRadius: 4,
           color: Content.Text.Primary.Default,