UIE-10778: IAM LA/New flag fix

Author: mpolotsk-akamai

packages/manager/src/components/PrimaryNav/PrimaryNav.tsx

@@ -137,7 +137,6 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
   const { isDatabasesEnabled, isDatabasesV2Beta } = useIsDatabasesEnabled();
 
   const { isIAMEnabled } = useIsIAMEnabled();
-  const showLimitedAvailabilityBadges = flags.iamLimitedAvailabilityBadges;
 
   const { isNetworkLoadBalancerEnabled } = useIsNetworkLoadBalancerEnabled();
 
@@ -314,7 +313,7 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
                 display: 'Identity & Access',
                 hide: !isIAMEnabled,
                 to: '/iam',
-                isNew: isIAMEnabled && showLimitedAvailabilityBadges,
+                isNew: isIAMEnabled && flags.iamNewBadge,
               },
               {
                 display: 'Quotas',

packages/manager/src/dev-tools/FeatureFlagTool.tsx

@@ -72,8 +72,8 @@ const options: { flag: keyof Flags; label: string }[] = [
   { flag: 'apicliButtonCopy', label: 'APICLI Button Copy' },
   { flag: 'iam', label: 'IAM enabled & Beta' },
   {
-    flag: 'iamLimitedAvailabilityBadges',
-    label: 'IAM Limited Availability Badges',
+    flag: 'iamNewBadge',
+    label: 'IAM New Badge',
   },
   { flag: 'iamDelegation', label: 'IAM Delegation (Parent/Child)' },
   {

packages/manager/src/featureFlags.ts

@@ -251,7 +251,7 @@ export interface Flags {
   hostnameEndpoints: boolean;
   iam: BaseFeatureFlag;
   iamDelegation: BaseFeatureFlag;
-  iamLimitedAvailabilityBadges: boolean;
+  iamNewBadge: boolean;
   ipv6Sharing: boolean;
   kubernetesBlackwellPlans: boolean;
   limitsEvolution: LimitsEvolution;

packages/manager/src/features/IAM/IAMLanding.tsx

@@ -1,4 +1,4 @@
-import { Chip, NewFeatureChip, styled } from '@linode/ui';
+import { NewFeatureChip } from '@linode/ui';
 import { Outlet, useLocation, useNavigate } from '@tanstack/react-router';
 import * as React from 'react';
 
@@ -20,8 +20,7 @@ import { IAM_DOCS_LINK, ROLES_LEARN_MORE_LINK } from './Shared/constants';
 export const IdentityAccessLanding = React.memo(() => {
   const flags = useFlags();
   const { isIAMEnabled } = useIsIAMEnabled();
-  const showLimitedAvailabilityBadges =
-    flags.iamLimitedAvailabilityBadges && isIAMEnabled;
+  const showNewBadge = flags.iamNewBadge && isIAMEnabled;
   const location = useLocation();
   const navigate = useNavigate();
   const { isParentUserType } = useDelegationRole();
@@ -62,12 +61,7 @@ export const IdentityAccessLanding = React.memo(() => {
         {...landingHeaderProps}
         breadcrumbProps={{
           labelOptions: {
-            suffixComponent: showLimitedAvailabilityBadges ? (
-              <>
-                <NewFeatureChip />
-                <StyledLimitedAvailabilityChip label="Limited availability" />
-              </>
-            ) : null,
+            suffixComponent: showNewBadge ? <NewFeatureChip /> : null,
           },
           removeCrumbX: 1,
         }}
@@ -84,20 +78,3 @@ export const IdentityAccessLanding = React.memo(() => {
     </>
   );
 });
-
-const StyledLimitedAvailabilityChip = styled(Chip, {
-  label: 'StyledLimitedAvailabilityChip',
-  shouldForwardProp: (prop) => prop !== 'color',
-})(({ theme }) => ({
-  '& .MuiChip-label': {
-    padding: 0,
-  },
-  background: theme.tokens.component.Badge.Informative.Subtle.Background,
-  color: theme.tokens.component.Badge.Informative.Subtle.Text,
-  font: theme.font.bold,
-  fontSize: '12px',
-  lineHeight: '12px',
-  height: 16,
-  letterSpacing: '.22px',
-  padding: theme.spacingFunction(4),
-}));

packages/manager/src/features/IAM/Roles/Defaults/DefaultsLanding.tsx

@@ -18,8 +18,7 @@ export const DefaultsLanding = () => {
   const navigate = useNavigate();
   const flags = useFlags();
   const { isIAMEnabled } = useIsIAMEnabled();
-  const showLimitedAvailabilityBadges =
-    flags.iamLimitedAvailabilityBadges && isIAMEnabled;
+  const showNewBadge = flags.iamNewBadge && isIAMEnabled;
 
   const { tabs, tabIndex, handleTabChange } = useTabs([
     {
@@ -46,7 +45,7 @@ export const DefaultsLanding = () => {
               label: (
                 <>
                   {IAM_LABEL}
-                  {showLimitedAvailabilityBadges ? (
+                  {showNewBadge ? (
                     <NewFeatureChip sx={{ position: 'relative', top: -1 }} />
                   ) : null}
                 </>

packages/manager/src/features/IAM/Users/UserDetailsLanding.tsx

@@ -26,8 +26,7 @@ export const UserDetailsLanding = () => {
   const flags = useFlags();
   const theme = useTheme();
   const { isIAMEnabled } = useIsIAMEnabled();
-  const showLimitedAvailabilityBadges =
-    flags.iamLimitedAvailabilityBadges && isIAMEnabled;
+  const showNewBadge = flags.iamNewBadge && isIAMEnabled;
   const { username } = useParams({ from: '/iam/users/$username' });
   const { isIAMDelegationEnabled } = useIsIAMDelegationEnabled();
   const { isParentUserType } = useDelegationRole();
@@ -68,7 +67,7 @@ export const UserDetailsLanding = () => {
               label: (
                 <>
                   {IAM_LABEL}
-                  {showLimitedAvailabilityBadges ? (
+                  {showNewBadge ? (
                     <NewFeatureChip
                       component="span"
                       sx={{ position: 'relative', top: -1 }}

packages/manager/src/features/TopMenu/UserMenu/UserMenuPopover.tsx

@@ -51,7 +51,7 @@ interface MenuLink {
 export const UserMenuPopover = (props: UserMenuPopoverProps) => {
   const { anchorEl, isDrawerOpen, onClose, onDrawerOpen } = props;
   const sessionContext = React.useContext(switchAccountSessionContext);
-  const { limitsEvolution, iamLimitedAvailabilityBadges } = useFlags();
+  const { limitsEvolution, iamNewBadge } = useFlags();
   const {
     isProxyOrDelegateUserType,
     isParentUserType,
@@ -142,7 +142,7 @@ export const UserMenuPopover = (props: UserMenuPopoverProps) => {
       {
         display: isIAMEnabled ? 'Identity & Access' : 'Users & Grants',
         to: isIAMEnabled ? '/iam' : '/users',
-        isNew: isIAMEnabled && iamLimitedAvailabilityBadges,
+        isNew: isIAMEnabled && iamNewBadge,
       },
       {
         display: 'Quotas',
@@ -166,7 +166,7 @@ export const UserMenuPopover = (props: UserMenuPopoverProps) => {
         to: '/account-settings',
       },
     ],
-    [isIAMEnabled, limitsEvolution, iamLimitedAvailabilityBadges]
+    [isIAMEnabled, limitsEvolution, iamNewBadge]
   );
 
   const renderLink = (link: MenuLink) => {