Skip to content

Commit 2b7ebd6

Browse files
mduda-akamaimduda-akamai
committed
upcoming: [DPS-33112] Add Streams empty state and Create Stream views
1 parent b23ebe6 commit 2b7ebd6

14 files changed

+246
-8
lines changed

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@linode/manager": Upcoming Features
3+
---
4+
5+
DataStream: add Streams empty state and Create Stream views ([#12235](https://github.com/linode/manager/pull/12235))

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ const Destinations = React.lazy(() =>
1717
);
1818

1919
const Streams = React.lazy(() =>
20-
import('./Streams/Streams').then((module) => ({
21-
default: module.Streams,
20+
import('./Streams/StreamsLanding').then((module) => ({
21+
default: module.StreamsLanding,
2222
}))
2323
);
2424

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { makeStyles } from 'tss-react/mui';
2+
3+
import type { Theme } from '@mui/material/styles';
4+
5+
export const useStyles = makeStyles()((theme: Theme) => ({
6+
root: {
7+
'& .mlMain': {
8+
[theme.breakpoints.down('lg')]: {
9+
flexBasis: '100%',
10+
maxWidth: '100%',
11+
},
12+
},
13+
'& .mlSidebar': {
14+
[theme.breakpoints.down('lg')]: {
15+
background: theme.color.white,
16+
flexBasis: '100%',
17+
maxWidth: '100%',
18+
marginTop: theme.spacingFunction(16),
19+
padding: theme.spacingFunction(8),
20+
},
21+
},
22+
},
23+
}));

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { Stack } from '@linode/ui';
2+
import Grid from '@mui/material/Grid';
3+
import * as React from 'react';
4+
5+
import { DocumentTitleSegment } from 'src/components/DocumentTitle';
6+
import { LandingHeader } from 'src/components/LandingHeader';
7+
import { StreamCreateCheckoutBar } from 'src/features/DataStream/Streams/StreamCreate/StreamCreateCheckoutBar';
8+
import { StreamCreateDataSet } from 'src/features/DataStream/Streams/StreamCreate/StreamCreateDataSet';
9+
import { StreamCreateDelivery } from 'src/features/DataStream/Streams/StreamCreate/StreamCreateDelivery';
10+
import { StreamCreateGeneralInfo } from 'src/features/DataStream/Streams/StreamCreate/StreamCreateGeneralInfo';
11+
12+
import { useStyles } from './StreamCreate.styles';
13+
14+
export const StreamCreate = () => {
15+
const { classes } = useStyles();
16+
17+
const landingHeaderProps = {
18+
breadcrumbProps: {
19+
pathname: '/datastream/streams/create',
20+
crumbOverrides: [
21+
{
22+
label: 'DataStream',
23+
position: 1,
24+
},
25+
],
26+
},
27+
removeCrumbX: 2,
28+
title: 'Create Stream',
29+
};
30+
31+
return (
32+
<Grid className={classes.root} container>
33+
<DocumentTitleSegment segment="Create Stream" />
34+
<LandingHeader {...landingHeaderProps} />
35+
36+
<Grid className="mlMain">
37+
<Stack spacing={2}>
38+
<StreamCreateGeneralInfo />
39+
<StreamCreateDataSet />
40+
<StreamCreateDelivery />
41+
</Stack>
42+
</Grid>
43+
<Grid className="mlSidebar">
44+
<StreamCreateCheckoutBar />
45+
</Grid>
46+
</Grid>
47+
);
48+
};

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Divider } from '@linode/ui';
2+
import * as React from 'react';
3+
4+
import { CheckoutBar } from 'src/components/CheckoutBar/CheckoutBar';
5+
6+
export const StreamCreateCheckoutBar = () => {
7+
const onDeploy = () => {};
8+
9+
return (
10+
<CheckoutBar
11+
disabled={true}
12+
heading="Stream Summary"
13+
onDeploy={onDeploy}
14+
priceSelectionText="Select Data Set and define a Destination to view pricing and create a stream."
15+
submitText="Create Stream"
16+
>
17+
<Divider dark spacingBottom={0} spacingTop={16} />
18+
</CheckoutBar>
19+
);
20+
};

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Box, Paper, Typography } from '@linode/ui';
2+
import React from 'react';
3+
4+
import { DocsLink } from 'src/components/DocsLink/DocsLink';
5+
6+
export const StreamCreateDataSet = () => {
7+
return (
8+
<Paper>
9+
<Box display="flex" justifyContent="space-between">
10+
<Typography variant="h2">Data Set</Typography>
11+
<DocsLink
12+
// TODO: Change the link when proper documentation is ready
13+
href="https://techdocs.akamai.com/cloud-computing/docs"
14+
label="Docs"
15+
/>
16+
</Box>
17+
</Paper>
18+
);
19+
};

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Box, Paper, Typography } from '@linode/ui';
2+
import React from 'react';
3+
4+
import { DocsLink } from 'src/components/DocsLink/DocsLink';
5+
6+
export const StreamCreateDelivery = () => {
7+
return (
8+
<Paper>
9+
<Box display="flex" justifyContent="space-between">
10+
<Typography variant="h2">Delivery</Typography>
11+
<DocsLink
12+
// TODO: Change the link when proper documentation is ready
13+
href="https://techdocs.akamai.com/cloud-computing/docs"
14+
label="Docs"
15+
/>
16+
</Box>
17+
</Paper>
18+
);
19+
};

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Paper, Typography } from '@linode/ui';
2+
import React from 'react';
3+
4+
export const StreamCreateGeneralInfo = () => {
5+
return (
6+
<Paper>
7+
<Typography variant="h2">General Information</Typography>
8+
</Paper>
9+
);
10+
};

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

Lines changed: 0 additions & 5 deletions
This file was deleted.

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import * as React from 'react';
2+
3+
import { StreamsLandingEmptyState } from 'src/features/DataStream/Streams/StreamsLandingEmptyState';
4+
5+
export const StreamsLanding = () => {
6+
return <StreamsLandingEmptyState />;
7+
};

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { useNavigate } from '@tanstack/react-router';
2+
import * as React from 'react';
3+
4+
import ComputeIcon from 'src/assets/icons/entityIcons/compute.svg';
5+
import { DocumentTitleSegment } from 'src/components/DocumentTitle';
6+
import { ResourcesSection } from 'src/components/EmptyLandingPageResources/ResourcesSection';
7+
import { sendEvent } from 'src/utilities/analytics/utils';
8+
9+
import {
10+
gettingStartedGuides,
11+
headers,
12+
linkAnalyticsEvent,
13+
} from './StreamsLandingEmptyStateData';
14+
15+
export const StreamsLandingEmptyState = () => {
16+
const navigate = useNavigate();
17+
18+
return (
19+
<>
20+
<DocumentTitleSegment segment="Streams" />
21+
<ResourcesSection
22+
buttonProps={[
23+
{
24+
children: 'Create Stream',
25+
onClick: () => {
26+
sendEvent({
27+
action: 'Click:button',
28+
category: linkAnalyticsEvent.category,
29+
label: 'Create Stream',
30+
});
31+
navigate({ to: '/datastream/streams/create' });
32+
},
33+
},
34+
]}
35+
gettingStartedGuidesData={gettingStartedGuides}
36+
headers={headers}
37+
icon={ComputeIcon}
38+
linkAnalyticsEvent={linkAnalyticsEvent}
39+
/>
40+
</>
41+
);
42+
};

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import {
2+
docsLink,
3+
guidesMoreLinkText,
4+
} from 'src/utilities/emptyStateLandingUtils';
5+
6+
import type {
7+
ResourcesHeaders,
8+
ResourcesLinks,
9+
ResourcesLinkSection,
10+
} from 'src/components/EmptyLandingPageResources/ResourcesLinksTypes';
11+
12+
export const headers: ResourcesHeaders = {
13+
title: 'Streams',
14+
subtitle: '',
15+
description: 'Create a data stream and configure delivery of cloud logs',
16+
};
17+
18+
export const linkAnalyticsEvent: ResourcesLinks['linkAnalyticsEvent'] = {
19+
action: 'Click:link',
20+
category: 'Streams landing page empty',
21+
};
22+
23+
export const gettingStartedGuides: ResourcesLinkSection = {
24+
links: [
25+
{
26+
// TODO: Change the link and text when proper documentation is ready
27+
text: 'Getting started guide',
28+
to: 'https://techdocs.akamai.com/cloud-computing/docs',
29+
},
30+
],
31+
moreInfo: {
32+
text: guidesMoreLinkText,
33+
to: docsLink,
34+
},
35+
title: 'Getting Started Guides',
36+
};

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
import { createLazyRoute } from '@tanstack/react-router';
22

33
import { DataStreamLanding } from 'src/features/DataStream/DataStreamLanding';
4+
import { StreamCreate } from 'src/features/DataStream/Streams/StreamCreate/StreamCreate';
45

56
export const dataStreamLandingLazyRoute = createLazyRoute('/datastream')({
67
component: DataStreamLanding,
78
});
9+
10+
export const streamCreateLazyRoute = createLazyRoute(
11+
'/datastream/streams/create'
12+
)({
13+
component: StreamCreate,
14+
});

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,13 @@ const streamsRoute = createRoute({
2626
import('./dataStreamLazyRoutes').then((m) => m.dataStreamLandingLazyRoute)
2727
);
2828

29+
const streamsCreateRoute = createRoute({
30+
getParentRoute: () => dataStreamRoute,
31+
path: 'streams/create',
32+
}).lazy(() =>
33+
import('./dataStreamLazyRoutes').then((m) => m.streamCreateLazyRoute)
34+
);
35+
2936
const destinationsRoute = createRoute({
3037
getParentRoute: () => dataStreamRoute,
3138
path: 'destinations',
@@ -35,6 +42,6 @@ const destinationsRoute = createRoute({
3542

3643
export const dataStreamRouteTree = dataStreamRoute.addChildren([
3744
dataStreamLandingRoute,
38-
streamsRoute,
45+
streamsRoute.addChildren([streamsCreateRoute]),
3946
destinationsRoute,
4047
]);

0 commit comments

Comments
 (0)