feat: [M3-6470] - Add resource links to StackScripts empty state landing state

CHANGELOG.md

@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 ### Added:
 - Resource links to empty state Volumes landing page #9065
 - Resource links to empty state Firewalls landing page #9078
+- Resource links to empty state StackScripts landing page #9091
 - Ability download DNS zone file #9075
 
 ### Changed:
@@ -5435,4 +5436,4 @@ A new visual design has begun!
 
 - update TFA forms with success states #1774
 - simplify initial api call logic #1770
-- now using `npm --no-git-tag-version version patch|minor|major` to bump versions so that shrinkwrap also gets updated
+- now using `npm --no-git-tag-version version patch|minor|major` to bump versions so that shrinkwrap also gets updated

packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksSubSection.tsx

@@ -49,7 +49,7 @@ export const ResourcesLinksSubSection = (
 
   return (
     <StyledResourcesLinksSubSection>
-      <Typography variant="h2">
+      <Typography variant="h2" style={{ textAlign: 'left' }}>
         {icon} {title}
       </Typography>
       {children}

packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx

@@ -10,7 +10,6 @@ import { compose } from 'recompose';
 import StackScriptsIcon from 'src/assets/icons/entityIcons/stackscript.svg';
 import Button from 'src/components/Button';
 import { CircleProgress } from 'src/components/CircleProgress';
-import Typography from 'src/components/core/Typography';
 import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
 import ErrorState from 'src/components/ErrorState';
 import Notice from 'src/components/Notice';
@@ -34,6 +33,7 @@ import {
 } from '../stackScriptUtils';
 import { StackScriptsRequest } from '../types';
 import withStyles, { StyleProps } from './StackScriptBase.styles';
+import { StackScriptsEmptyLandingState } from './StackScriptsEmptyLandingPage';
 
 type CurrentFilter = 'label' | 'deploys' | 'revision';
 
@@ -493,44 +493,9 @@ const withStackScriptBase = (options: WithStackScriptBaseOptions) => (
                   You don’t have any StackScripts to select from.
                 </Placeholder>
               ) : (
-                <Placeholder
-                  icon={StackScriptsIcon}
-                  renderAsSecondary
-                  isEntity
-                  title="StackScripts"
-                  buttonProps={[
-                    {
-                      children: 'Create StackScript',
-                      onClick: () => this.goToCreateStackScript(),
-                    },
-                  ]}
-                  className={classes.stackscriptPlaceholder}
-                >
-                  <Typography variant="subtitle1">
-                    Automate Deployment with StackScripts!
-                  </Typography>
-                  <Typography variant="subtitle1">
-                    <a
-                      href="https://linode.com/docs/platform/stackscripts-new-manager/"
-                      target="_blank"
-                      aria-describedby="external-site"
-                      rel="noopener noreferrer"
-                      className="h-u"
-                    >
-                      Learn more about getting started
-                    </a>
-                    &nbsp;or&nbsp;
-                    <a
-                      href="https://www.linode.com/docs/"
-                      target="_blank"
-                      aria-describedby="external-site"
-                      rel="noopener noreferrer"
-                      className="h-u"
-                    >
-                      visit our guides and tutorials.
-                    </a>
-                  </Typography>
-                </Placeholder>
+                <StackScriptsEmptyLandingState
+                  goToCreateStackScript={this.goToCreateStackScript}
+                />
               )}
             </div>
           ) : (

packages/manager/src/features/StackScripts/StackScriptBase/StackScriptsEmptyLandingPage.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import StackScriptsIcon from 'src/assets/icons/entityIcons/stackscript.svg';
+import { ResourcesSection } from 'src/components/EmptyLandingPageResources/ResourcesSection';
+import { sendEvent } from 'src/utilities/ga';
+import {
+  gettingStartedGuides,
+  headers,
+  linkGAEvent,
+  youtubeLinkData,
+} from './StackScriptsEmptyResourcesData';
+
+interface Props {
+  goToCreateStackScript: () => void;
+}
+
+export const StackScriptsEmptyLandingState = (props: Props) => {
+  const { goToCreateStackScript } = props;
+
+  return (
+    <ResourcesSection
+      buttonProps={[
+        {
+          onClick: () => {
+            sendEvent({
+              category: linkGAEvent.category,
+              action: 'Click:button',
+              label: 'Create StackScript',
+            });
+            goToCreateStackScript();
+          },
+          children: 'Create StackScript',
+        },
+      ]}
+      gettingStartedGuidesData={gettingStartedGuides}
+      headers={headers}
+      icon={StackScriptsIcon}
+      linkGAEvent={linkGAEvent}
+      youtubeLinkData={youtubeLinkData}
+    />
+  );
+};

packages/manager/src/features/StackScripts/StackScriptBase/StackScriptsEmptyResourcesData.ts

@@ -0,0 +1,72 @@
+import {
+  youtubeChannelLink,
+  youtubeMoreLinkText,
+} from 'src/utilities/emptyStateLandingUtils';
+import type {
+  ResourcesHeaders,
+  ResourcesLinkSection,
+  ResourcesLinks,
+} from 'src/components/EmptyLandingPageResources/ResourcesLinksTypes';
+
+export const headers: ResourcesHeaders = {
+  description:
+    'Run custom scripts to install and configure software when initializing Linode Compute Instances',
+
+  subtitle: 'Automate deployment scripts',
+  title: 'StackScripts',
+};
+
+export const gettingStartedGuides: ResourcesLinkSection = {
+  links: [
+    {
+      to:
+        'https://www.linode.com/docs/products/tools/stackscripts/get-started/',
+      text: 'Getting Started with StackScripts',
+    },
+    {
+      to:
+        'https://www.linode.com/docs/products/tools/stackscripts/guides/create/',
+      text: 'Create a StackScript',
+    },
+    {
+      to:
+        'https://www.linode.com/docs/products/tools/stackscripts/guides/write-a-custom-script/',
+      text: 'Write a Custom Script for Use with StackScripts',
+    },
+  ],
+  moreInfo: {
+    to: 'https://www.linode.com/docs/products/tools/stackscripts/ ',
+    text: 'View additional Object Storage documentation',
+  },
+  title: 'Getting Started Guides',
+};
+
+export const youtubeLinkData: ResourcesLinkSection = {
+  links: [
+    {
+      to: 'https://www.youtube.com/watch?v=nygChMc1hX4',
+      text: 'Automate Server Deployments Using Stackscripts',
+      external: true,
+    },
+    {
+      to: 'https://jira.linode.com/browse/M3-6470#10',
+      text: 'Shell Scripts',
+      external: true,
+    },
+    {
+      to: 'https://www.youtube.com/watch?v=yM8v5i2Qjgg',
+      text: ' Linux for Programmers #7 | Environment Variables',
+      external: true,
+    },
+  ],
+  moreInfo: {
+    to: youtubeChannelLink,
+    text: youtubeMoreLinkText,
+  },
+  title: 'Video Playlist',
+};
+
+export const linkGAEvent: ResourcesLinks['linkGAEvent'] = {
+  action: 'Click:link',
+  category: 'StackScripts landing page empty',
+};