change: [DPS-36551] - NEW chip for Delivery Logs

packages/manager/.changeset/pr-13358-changed-1770121973008.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Add an aclpLogs.new flag and a NEW chip for Delivery Logs based on the flag's value ([#13358](https://github.com/linode/manager/pull/13358))

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

@@ -106,7 +106,8 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
   const isManaged = accountSettings?.managed ?? false;
 
   const { isACLPEnabled } = useIsACLPEnabled();
-  const { isACLPLogsEnabled, isACLPLogsBeta } = useIsACLPLogsEnabled();
+  const { isACLPLogsEnabled, isACLPLogsBeta, isACLPLogsNew } =
+    useIsACLPLogsEnabled();
 
   const isAlertsEnabled =
     isACLPEnabled &&
@@ -273,6 +274,7 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
                 hide: !isACLPLogsEnabled,
                 to: '/logs/delivery',
                 isBeta: isACLPLogsBeta,
+                isNew: !isACLPLogsBeta && isACLPLogsNew,
               },
               {
                 display: 'Longview',
@@ -350,6 +352,7 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
         isPlacementGroupsEnabled,
         isACLPEnabled,
         isACLPLogsBeta,
+        isACLPLogsNew,
         isACLPLogsEnabled,
         isIAMEnabled,
         isMarketplaceV2FeatureEnabled,

packages/manager/src/featureFlags.ts

@@ -129,6 +129,10 @@ interface AclpLogsFlag extends BetaFeatureFlag {
    * This property indicates whether to show Custom HTTPS destination type
    */
   customHttpsEnabled?: boolean;
+  /**
+   * This property indicates whether the feature is new or not
+   */
+  new?: boolean;
 }
 
 interface LkeEnterpriseFlag extends BaseFeatureFlag {

packages/manager/src/features/Delivery/DeliveryLanding.tsx

@@ -1,3 +1,4 @@
+import { NewFeatureChip } from '@linode/ui';
 import * as React from 'react';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
@@ -11,6 +12,7 @@ import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
 import { TabPanels } from 'src/components/Tabs/TabPanels';
 import { Tabs } from 'src/components/Tabs/Tabs';
 import { TanStackTabLinkList } from 'src/components/Tabs/TanStackTabLinkList';
+import { useIsACLPLogsEnabled } from 'src/features/Delivery/deliveryUtils';
 import { useTabs } from 'src/hooks/useTabs';
 
 const Destinations = React.lazy(() =>
@@ -26,9 +28,14 @@ const Streams = React.lazy(() =>
 );
 
 export const DeliveryLanding = React.memo(() => {
+  const { isACLPLogsNew } = useIsACLPLogsEnabled();
+
   const landingHeaderProps: LandingHeaderProps = {
     breadcrumbProps: {
       pathname: '/logs/delivery',
+      labelOptions: {
+        suffixComponent: isACLPLogsNew ? <NewFeatureChip /> : undefined,
+      },
     },
     docsLink: 'https://techdocs.akamai.com/cloud-computing/docs/log-delivery',
     removeCrumbX: 1,

packages/manager/src/features/Delivery/deliveryUtils.ts

@@ -27,12 +27,13 @@ import type {
 /**
  * Hook to determine if the ACLP Logs feature is enabled for the current user.
 
- * @returns {{ isACLPLogsEnabled: boolean, isACLPLogsBeta: boolean }} An object indicating if the feature is enabled and if it is in beta.
+ * @returns {{ isACLPLogsEnabled: boolean, isACLPLogsBeta: boolean, isACLPLogsNew: boolean, isACLPLogsCustomHttpsEnabled: boolean }}
  */
 export const useIsACLPLogsEnabled = (): {
   isACLPLogsBeta: boolean;
   isACLPLogsCustomHttpsEnabled: boolean;
   isACLPLogsEnabled: boolean;
+  isACLPLogsNew: boolean;
 } => {
   const { data: account } = useAccount();
   const flags = useFlags();
@@ -48,6 +49,7 @@ export const useIsACLPLogsEnabled = (): {
   return {
     isACLPLogsBeta: !!flags.aclpLogs?.beta,
     isACLPLogsCustomHttpsEnabled: !!flags.aclpLogs?.customHttpsEnabled,
+    isACLPLogsNew: !!flags.aclpLogs?.new,
     isACLPLogsEnabled,
   };
 };