upcoming: [DPS-33104] DataStream: routes, feature flag, tabs (#12155)

* upcoming: [DPS-33104] DataStream: routes, feature flag, tabs

* [DPS-33104] CR: Fix braces

* [DPS-33104] CR: remove braces, idx, default export

* [DPS-33104] CR: update header's spacing

* [DPS-33104] CR: remove react-router-dom dependencies

* [DPS-33104] CR: replace TabLinkList with TanStackTabLinkList

---------

Co-authored-by: Jaalah Ramos <125309814+jaalah-akamai@users.noreply.github.com>

Author: mduda-akamai

packages/manager/.changeset/pr-12155-upcoming-features-1746446424705.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+DataStream: routes, feature flag, tabs ([#12155](https://github.com/linode/manager/pull/12155))

packages/manager/eslint.config.js

@@ -403,6 +403,7 @@ export const baseConfig = [
       // for each new features added to the migration router, add its directory here
       'src/features/Betas/**/*',
       'src/features/Domains/**/*',
+      'src/features/DataStream/**/*',
       'src/features/Firewalls/**/*',
       'src/features/Images/**/*',
       'src/features/Longview/**/*',

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

@@ -38,6 +38,7 @@ export type NavEntity =
   | 'Cloud Load Balancers'
   | 'Dashboard'
   | 'Databases'
+  | 'DataStream'
   | 'Domains'
   | 'Firewalls'
   | 'Help & Support'
@@ -239,6 +240,12 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
               display: 'Longview',
               href: '/longview',
             },
+            {
+              display: 'DataStream',
+              hide: !flags.aclpLogs?.enabled,
+              href: '/datastream',
+              isBeta: flags.aclpLogs?.beta,
+            },
           ],
           name: 'Monitor',
         },

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

@@ -22,6 +22,7 @@ const options: { flag: keyof Flags; label: string }[] = [
   { flag: 'aclp', label: 'CloudPulse' },
   { flag: 'aclpAlerting', label: 'CloudPulse Alerting' },
   { flag: 'aclpIntegration', label: 'ACLP Integration' },
+  { flag: 'aclpLogs', label: 'ACLP Logs' },
   { flag: 'apl', label: 'Akamai App Platform' },
   { flag: 'blockStorageEncryption', label: 'Block Storage Encryption (BSE)' },
   { flag: 'disableLargestGbPlans', label: 'Disable Largest GB Plans' },

packages/manager/src/featureFlags.ts

@@ -110,6 +110,7 @@ export interface Flags {
   aclpAlerting: AclpAlerting;
   aclpAlertServiceTypeConfig: AclpAlertServiceTypeConfig[];
   aclpIntegration: boolean;
+  aclpLogs: BetaFeatureFlag;
   aclpReadEndpoint: string;
   aclpResourceTypeMap: CloudPulseResourceTypeMapFlag[];
   apicliButtonCopy: string;
@@ -244,6 +245,7 @@ export type ProductInformationBannerLocation =
   | 'Account'
   | 'Betas'
   | 'Databases'
+  | 'DataStream'
   | 'Domains'
   | 'Firewalls'
   | 'Identity and Access'

packages/manager/src/features/DataStream/DataStreamLanding.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+
+import { DocumentTitleSegment } from 'src/components/DocumentTitle';
+import { LandingHeader } from 'src/components/LandingHeader';
+import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+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 { useTabs } from 'src/hooks/useTabs';
+
+const Destinations = React.lazy(() =>
+  import('./Destinations/Destinations').then((module) => ({
+    default: module.Destinations,
+  }))
+);
+
+const Streams = React.lazy(() =>
+  import('./Streams/Streams').then((module) => ({
+    default: module.Streams,
+  }))
+);
+
+export const DataStreamLanding = React.memo(() => {
+  const landingHeaderProps = {
+    breadcrumbProps: {
+      pathname: '/datastream',
+    },
+    entity: 'DataStream',
+    title: 'DataStream',
+  };
+
+  const { handleTabChange, tabIndex, tabs } = useTabs([
+    {
+      to: '/datastream/streams',
+      title: 'Streams',
+    },
+    {
+      to: '/datastream/destinations',
+      title: 'Destinations',
+    },
+  ]);
+
+  return (
+    <>
+      <ProductInformationBanner bannerLocation="DataStream" />
+      <DocumentTitleSegment segment="DataStream" />
+      <LandingHeader {...landingHeaderProps} spacingBottom={4} />
+
+      <Tabs index={tabIndex} onChange={handleTabChange}>
+        <TanStackTabLinkList tabs={tabs} />
+
+        <React.Suspense fallback={<SuspenseLoader />}>
+          <TabPanels>
+            <SafeTabPanel index={0}>
+              <Streams />
+            </SafeTabPanel>
+            <SafeTabPanel index={1}>
+              <Destinations />
+            </SafeTabPanel>
+          </TabPanels>
+        </React.Suspense>
+      </Tabs>
+    </>
+  );
+});

packages/manager/src/features/DataStream/Destinations/Destinations.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+export const Destinations = () => {
+  return <p>Content for Destinations tab</p>;
+};

packages/manager/src/features/DataStream/Streams/Streams.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+export const Streams = () => {
+  return <p>Content for Streams tab</p>;
+};

packages/manager/src/routes/datastream/DataStreamRoute.tsx

@@ -0,0 +1,16 @@
+import { NotFound } from '@linode/ui';
+import { Outlet } from '@tanstack/react-router';
+import React from 'react';
+
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+import { useFlags } from 'src/hooks/useFlags';
+
+export const DataStreamRoute = () => {
+  const flags = useFlags();
+  const { aclpLogs } = flags;
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      {aclpLogs?.enabled ? <Outlet /> : <NotFound />}
+    </React.Suspense>
+  );
+};

packages/manager/src/routes/datastream/dataStreamLazyRoutes.ts

@@ -0,0 +1,7 @@
+import { createLazyRoute } from '@tanstack/react-router';
+
+import { DataStreamLanding } from 'src/features/DataStream/DataStreamLanding';
+
+export const dataStreamLandingLazyRoute = createLazyRoute('/datastream')({
+  component: DataStreamLanding,
+});