upcoming: [DPS-33112] Add Streams empty state and Create Stream views

packages/manager/.changeset/pr-12235-upcoming-features-1747394318662.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+DataStream: add Streams empty state and Create Stream views ([#12235](https://github.com/linode/manager/pull/12235))

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

@@ -17,8 +17,8 @@ const Destinations = React.lazy(() =>
 );
 
 const Streams = React.lazy(() =>
-  import('./Streams/Streams').then((module) => ({
-    default: module.Streams,
+  import('./Streams/StreamsLanding').then((module) => ({
+    default: module.StreamsLanding,
   }))
 );
 

packages/manager/src/features/DataStream/Streams/StreamCreate/StreamCreate.styles.ts

@@ -0,0 +1,23 @@
+import { makeStyles } from 'tss-react/mui';
+
+import type { Theme } from '@mui/material/styles';
+
+export const useStyles = makeStyles()((theme: Theme) => ({
+  root: {
+    '& .mlMain': {
+      [theme.breakpoints.down('lg')]: {
+        flexBasis: '100%',
+        maxWidth: '100%',
+      },
+    },
+    '& .mlSidebar': {
+      [theme.breakpoints.down('lg')]: {
+        background: theme.color.white,
+        flexBasis: '100%',
+        maxWidth: '100%',
+        marginTop: theme.spacingFunction(16),
+        padding: theme.spacingFunction(8),
+      },
+    },
+  },
+}));

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

@@ -0,0 +1,48 @@
+import { Stack } from '@linode/ui';
+import Grid from '@mui/material/Grid';
+import * as React from 'react';
+
+import { DocumentTitleSegment } from 'src/components/DocumentTitle';
+import { LandingHeader } from 'src/components/LandingHeader';
+import { StreamCreateCheckoutBar } from 'src/features/DataStream/Streams/StreamCreate/StreamCreateCheckoutBar';
+import { StreamCreateDataSet } from 'src/features/DataStream/Streams/StreamCreate/StreamCreateDataSet';
+import { StreamCreateDelivery } from 'src/features/DataStream/Streams/StreamCreate/StreamCreateDelivery';
+import { StreamCreateGeneralInfo } from 'src/features/DataStream/Streams/StreamCreate/StreamCreateGeneralInfo';
+
+import { useStyles } from './StreamCreate.styles';
+
+export const StreamCreate = () => {
+  const { classes } = useStyles();
+
+  const landingHeaderProps = {
+    breadcrumbProps: {
+      pathname: '/datastream/streams/create',
+      crumbOverrides: [
+        {
+          label: 'DataStream',
+          position: 1,
+        },
+      ],
+    },
+    removeCrumbX: 2,
+    title: 'Create Stream',
+  };
+
+  return (
+    <Grid className={classes.root} container>
+      <DocumentTitleSegment segment="Create Stream" />
+      <LandingHeader {...landingHeaderProps} />
+
+      <Grid className="mlMain">
+        <Stack spacing={2}>
+          <StreamCreateGeneralInfo />
+          <StreamCreateDataSet />
+          <StreamCreateDelivery />
+        </Stack>
+      </Grid>
+      <Grid className="mlSidebar">
+        <StreamCreateCheckoutBar />
+      </Grid>
+    </Grid>
+  );
+};

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

@@ -0,0 +1,20 @@
+import { Divider } from '@linode/ui';
+import * as React from 'react';
+
+import { CheckoutBar } from 'src/components/CheckoutBar/CheckoutBar';
+
+export const StreamCreateCheckoutBar = () => {
+  const onDeploy = () => {};
+
+  return (
+    <CheckoutBar
+      disabled={true}
+      heading="Stream Summary"
+      onDeploy={onDeploy}
+      priceSelectionText="Select Data Set and define a Destination to view pricing and create a stream."
+      submitText="Create Stream"
+    >
+      <Divider dark spacingBottom={0} spacingTop={16} />
+    </CheckoutBar>
+  );
+};

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

@@ -0,0 +1,19 @@
+import { Box, Paper, Typography } from '@linode/ui';
+import React from 'react';
+
+import { DocsLink } from 'src/components/DocsLink/DocsLink';
+
+export const StreamCreateDataSet = () => {
+  return (
+    <Paper>
+      <Box display="flex" justifyContent="space-between">
+        <Typography variant="h2">Data Set</Typography>
+        <DocsLink
+          // TODO: Change the link when proper documentation is ready
+          href="https://techdocs.akamai.com/cloud-computing/docs"
+          label="Docs"
+        />
+      </Box>
+    </Paper>
+  );
+};

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

@@ -0,0 +1,19 @@
+import { Box, Paper, Typography } from '@linode/ui';
+import React from 'react';
+
+import { DocsLink } from 'src/components/DocsLink/DocsLink';
+
+export const StreamCreateDelivery = () => {
+  return (
+    <Paper>
+      <Box display="flex" justifyContent="space-between">
+        <Typography variant="h2">Delivery</Typography>
+        <DocsLink
+          // TODO: Change the link when proper documentation is ready
+          href="https://techdocs.akamai.com/cloud-computing/docs"
+          label="Docs"
+        />
+      </Box>
+    </Paper>
+  );
+};

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

@@ -0,0 +1,10 @@
+import { Paper, Typography } from '@linode/ui';
+import React from 'react';
+
+export const StreamCreateGeneralInfo = () => {
+  return (
+    <Paper>
+      <Typography variant="h2">General Information</Typography>
+    </Paper>
+  );
+};

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+import { StreamsLandingEmptyState } from 'src/features/DataStream/Streams/StreamsLandingEmptyState';
+
+export const StreamsLanding = () => {
+  return <StreamsLandingEmptyState />;
+};

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

@@ -0,0 +1,42 @@
+import { useNavigate } from '@tanstack/react-router';
+import * as React from 'react';
+
+import ComputeIcon from 'src/assets/icons/entityIcons/compute.svg';
+import { DocumentTitleSegment } from 'src/components/DocumentTitle';
+import { ResourcesSection } from 'src/components/EmptyLandingPageResources/ResourcesSection';
+import { sendEvent } from 'src/utilities/analytics/utils';
+
+import {
+  gettingStartedGuides,
+  headers,
+  linkAnalyticsEvent,
+} from './StreamsLandingEmptyStateData';
+
+export const StreamsLandingEmptyState = () => {
+  const navigate = useNavigate();
+
+  return (
+    <>
+      <DocumentTitleSegment segment="Streams" />
+      <ResourcesSection
+        buttonProps={[
+          {
+            children: 'Create Stream',
+            onClick: () => {
+              sendEvent({
+                action: 'Click:button',
+                category: linkAnalyticsEvent.category,
+                label: 'Create Stream',
+              });
+              navigate({ to: '/datastream/streams/create' });
+            },
+          },
+        ]}
+        gettingStartedGuidesData={gettingStartedGuides}
+        headers={headers}
+        icon={ComputeIcon}
+        linkAnalyticsEvent={linkAnalyticsEvent}
+      />
+    </>
+  );
+};

packages/manager/src/features/DataStream/Streams/StreamsLandingEmptyStateData.ts

@@ -0,0 +1,36 @@
+import {
+  docsLink,
+  guidesMoreLinkText,
+} from 'src/utilities/emptyStateLandingUtils';
+
+import type {
+  ResourcesHeaders,
+  ResourcesLinks,
+  ResourcesLinkSection,
+} from 'src/components/EmptyLandingPageResources/ResourcesLinksTypes';
+
+export const headers: ResourcesHeaders = {
+  title: 'Streams',
+  subtitle: '',
+  description: 'Create a data stream and configure delivery of cloud logs',
+};
+
+export const linkAnalyticsEvent: ResourcesLinks['linkAnalyticsEvent'] = {
+  action: 'Click:link',
+  category: 'Streams landing page empty',
+};
+
+export const gettingStartedGuides: ResourcesLinkSection = {
+  links: [
+    {
+      // TODO: Change the link and text when proper documentation is ready
+      text: 'Getting started guide',
+      to: 'https://techdocs.akamai.com/cloud-computing/docs',
+    },
+  ],
+  moreInfo: {
+    text: guidesMoreLinkText,
+    to: docsLink,
+  },
+  title: 'Getting Started Guides',
+};

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

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

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

@@ -26,6 +26,13 @@ const streamsRoute = createRoute({
   import('./dataStreamLazyRoutes').then((m) => m.dataStreamLandingLazyRoute)
 );
 
+const streamsCreateRoute = createRoute({
+  getParentRoute: () => dataStreamRoute,
+  path: 'streams/create',
+}).lazy(() =>
+  import('./dataStreamLazyRoutes').then((m) => m.streamCreateLazyRoute)
+);
+
 const destinationsRoute = createRoute({
   getParentRoute: () => dataStreamRoute,
   path: 'destinations',
@@ -35,6 +42,6 @@ const destinationsRoute = createRoute({
 
 export const dataStreamRouteTree = dataStreamRoute.addChildren([
   dataStreamLandingRoute,
-  streamsRoute,
+  streamsRoute.addChildren([streamsCreateRoute]),
   destinationsRoute,
 ]);