feat: [M3-6464] – Add resource links to empty Volumes landing page

CHANGELOG.md

@@ -7,6 +7,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 ## [Unreleased]
 
 ### Added:
+- Resource links to empty state Volumes landing page #9065
 
 ### Changed:
 

packages/manager/src/features/Volumes/VolumesLanding.tsx

@@ -5,18 +5,13 @@ import { connect } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { compose } from 'recompose';
 import { bindActionCreators, Dispatch } from 'redux';
-import VolumeIcon from 'src/assets/icons/entityIcons/volume.svg';
-import { makeStyles } from '@mui/styles';
 import TableBody from 'src/components/core/TableBody';
 import TableHead from 'src/components/core/TableHead';
-import Typography from 'src/components/core/Typography';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import ErrorState from 'src/components/ErrorState';
 import LandingHeader from 'src/components/LandingHeader';
 import Loading from 'src/components/LandingLoading';
-import Link from 'src/components/Link';
 import PaginationFooter from 'src/components/PaginationFooter/PaginationFooter';
-import Placeholder from 'src/components/Placeholder';
 import Table from 'src/components/Table/Table';
 import TableCell from 'src/components/TableCell/TableCell';
 import TableRow from 'src/components/TableRow/TableRow';
@@ -38,6 +33,7 @@ import { DestructiveVolumeDialog } from './DestructiveVolumeDialog';
 import { UpgradeVolumeDialog } from './UpgradeVolumeDialog';
 import { VolumeAttachmentDrawer } from './VolumeAttachmentDrawer';
 import { ActionHandlers as VolumeHandlers } from './VolumesActionMenu';
+import { VolumesLandingEmptyState } from './VolumesLandingEmptyState';
 import VolumeTableRow from './VolumeTableRow';
 
 interface Props {
@@ -78,18 +74,9 @@ interface DispatchProps {
 
 type CombinedProps = Props & DispatchProps;
 
-export const useStyles = makeStyles(() => ({
-  empty: {
-    '& svg': {
-      transform: 'scale(0.75)',
-    },
-  },
-}));
-
 const preferenceKey = 'volumes';
 
-export const VolumesLanding: React.FC<CombinedProps> = (props) => {
-  const classes = useStyles();
+export const VolumesLanding = (props: CombinedProps) => {
   const history = useHistory();
 
   const pagination = usePagination(1, preferenceKey);
@@ -226,32 +213,7 @@ export const VolumesLanding: React.FC<CombinedProps> = (props) => {
   }
 
   if (volumes?.results === 0) {
-    return (
-      <>
-        <DocumentTitleSegment segment="Volumes" />
-        <Placeholder
-          title="Volumes"
-          className={classes.empty}
-          icon={VolumeIcon}
-          isEntity
-          buttonProps={[
-            {
-              onClick: () => history.push('/volumes/create'),
-              children: 'Create Volume',
-            },
-          ]}
-        >
-          <Typography variant="subtitle1">
-            Attach additional storage to your Linode.
-          </Typography>
-          <Typography variant="subtitle1">
-            <Link to="https://www.linode.com/docs/products/storage/block-storage/">
-              Learn more about Linode Block Storage Volumes.
-            </Link>
-          </Typography>
-        </Placeholder>
-      </>
-    );
+    return <VolumesLandingEmptyState />;
   }
 
   const handlers: VolumeHandlers = {

packages/manager/src/features/Volumes/VolumesLandingEmptyState.styles.ts

@@ -0,0 +1,8 @@
+import { styled } from '@mui/material/styles';
+import VolumeIcon from 'src/assets/icons/entityIcons/volume.svg';
+
+const StyledVolumeIcon = styled(VolumeIcon)(() => ({
+  transform: 'scale(0.75)',
+}));
+
+export { StyledVolumeIcon };

packages/manager/src/features/Volumes/VolumesLandingEmptyState.tsx

@@ -0,0 +1,170 @@
+import * as React from 'react';
+import { useHistory } from 'react-router-dom';
+import DocsIcon from 'src/assets/icons/docs.svg';
+import ExternalLinkIcon from 'src/assets/icons/external-link.svg';
+import PointerIcon from 'src/assets/icons/pointer.svg';
+import YoutubeIcon from 'src/assets/icons/youtube.svg';
+import List from 'src/components/core/List';
+import ListItem from 'src/components/core/ListItem';
+import Typography from 'src/components/core/Typography';
+import Link from 'src/components/Link';
+import Placeholder from 'src/components/Placeholder';
+import LinksSection from 'src/features/linodes/LinodesLanding/LinksSection';
+import LinkSubSection from 'src/features/linodes/LinodesLanding/LinksSubSection';
+import {
+  docsLink,
+  getLinkOnClick,
+  guidesMoreLinkText,
+  youtubeChannelLink,
+  youtubeMoreLinkLabel,
+  youtubeMoreLinkText,
+} from 'src/utilities/emptyStateLandingUtils';
+import { sendEvent } from 'src/utilities/ga';
+import { StyledVolumeIcon } from './VolumesLandingEmptyState.styles';
+
+const guidesLinkData = [
+  {
+    to: 'https://www.linode.com/docs/products/storage/block-storage/',
+    text: 'Overview of Block Storage',
+  },
+  {
+    to: 'https://www.linode.com/docs/products/storage/block-storage/guides/',
+    text: 'Create and Manage Block Storage Volumes',
+  },
+  {
+    to:
+      'https://www.linode.com/docs/products/storage/block-storage/guides/configure-volume/',
+    text: 'Configure a Volume on a Compute Instance',
+  },
+];
+
+const youtubeLinkData = [
+  {
+    to: 'https://www.youtube.com/watch?v=7ti25oK7UMA',
+    text: 'How to Use Block Storage with Your Linode',
+  },
+  {
+    to: 'https://www.youtube.com/watch?v=8G0cNZZIxNc',
+    text: 'Block Storage Vs Object Storage',
+  },
+  {
+    to: 'https://www.youtube.com/watch?v=Z9jZv_IHO2s',
+    text:
+      'How to use Block Storage to Increase Space on Your Nextcloud Instance',
+  },
+];
+
+const gaCategory = 'Volumes landing page empty';
+const linkGAEventTemplate = {
+  category: gaCategory,
+  action: 'Click:link',
+};
+
+const GuideLinks = (
+  <List>
+    {guidesLinkData.map((linkData) => (
+      <ListItem key={linkData.to}>
+        <Link
+          to={linkData.to}
+          onClick={getLinkOnClick(linkGAEventTemplate, linkData.text)}
+        >
+          {linkData.text}
+        </Link>
+      </ListItem>
+    ))}
+  </List>
+);
+
+const YoutubeLinks = (
+  <List>
+    {youtubeLinkData.map((linkData) => (
+      <ListItem key={linkData.to}>
+        <Link
+          onClick={getLinkOnClick(linkGAEventTemplate, linkData.text)}
+          to={linkData.to}
+        >
+          {linkData.text}
+          <ExternalLinkIcon />
+        </Link>
+      </ListItem>
+    ))}
+  </List>
+);
+
+const VolumesLandingEmptyState = () => {
+  const { push } = useHistory();
+
+  return (
+    <Placeholder
+      title="Volumes"
+      subtitle="NVM block storage service"
+      icon={StyledVolumeIcon}
+      isEntity
+      buttonProps={[
+        {
+          onClick: () => {
+            sendEvent({
+              category: gaCategory,
+              action: 'Click:button',
+              label: 'Create Volume',
+            });
+            push('/volumes/create');
+          },
+          children: 'Create Volume',
+        },
+      ]}
+      linksSection={
+        <div style={{ maxWidth: '762px' }}>
+          <LinksSection>
+            <LinkSubSection
+              title="Getting Started Guides"
+              icon={<DocsIcon />}
+              MoreLink={(props) => (
+                <Link
+                  onClick={getLinkOnClick(
+                    linkGAEventTemplate,
+                    guidesMoreLinkText
+                  )}
+                  to={docsLink}
+                  {...props}
+                >
+                  {guidesMoreLinkText}
+                  <PointerIcon />
+                </Link>
+              )}
+            >
+              {GuideLinks}
+            </LinkSubSection>
+            <LinkSubSection
+              title="Video Playlist"
+              icon={<YoutubeIcon />}
+              external
+              MoreLink={(props) => (
+                <Link
+                  onClick={getLinkOnClick(
+                    linkGAEventTemplate,
+                    youtubeMoreLinkLabel
+                  )}
+                  to={youtubeChannelLink}
+                  {...props}
+                >
+                  {youtubeMoreLinkText}
+                  <ExternalLinkIcon style={{ marginLeft: 8 }} />
+                </Link>
+              )}
+            >
+              {YoutubeLinks}
+            </LinkSubSection>
+          </LinksSection>
+        </div>
+      }
+    >
+      <Typography variant="subtitle1">
+        Attach scalable, fault-tolerant, and performant block storage volumes to
+        your Linode Compute Instances or Kubernetes Clusters.
+      </Typography>
+    </Placeholder>
+  );
+};
+
+export { VolumesLandingEmptyState };

packages/manager/src/features/linodes/LinodesLanding/LinksSubSection.tsx

@@ -7,7 +7,7 @@ import { Theme } from '@mui/material/styles';
 const useStyles = makeStyles((theme: Theme) => ({
   linksSubSection: {
     display: 'grid',
-    gridTemplateRows: `22px  minmax(${theme.spacing(3)}, 100%) 1.125rem`,
+    gridTemplateRows: `22px minmax(${theme.spacing(3)}, 100%) 1.125rem`,
     rowGap: theme.spacing(2),
     width: '100%',
     '& > h2': {