From c93c82213ea322d3d8f2e381eb8fcedb92f4d3c5 Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Fri, 5 May 2023 21:40:15 -0500 Subject: [PATCH 1/7] feat: [M3-6470] - Add resource links to StackScripts empty state landing page --- .../ResourcesLinksSubSection.tsx | 2 +- .../StackScriptBase/StackScriptBase.tsx | 43 ++--------- .../StackScriptsEmptyLandingPage.tsx | 41 +++++++++++ .../StackScriptsEmptyResourcesData.ts | 72 +++++++++++++++++++ 4 files changed, 118 insertions(+), 40 deletions(-) create mode 100644 packages/manager/src/features/StackScripts/StackScriptBase/StackScriptsEmptyLandingPage.tsx create mode 100644 packages/manager/src/features/StackScripts/StackScriptBase/StackScriptsEmptyResourcesData.ts diff --git a/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksSubSection.tsx b/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksSubSection.tsx index e27833a8977..17b10d5dad4 100644 --- a/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksSubSection.tsx +++ b/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksSubSection.tsx @@ -49,7 +49,7 @@ export const ResourcesLinksSubSection = ( return ( - + {icon} {title} {children} diff --git a/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx b/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx index d8502e1c7ec..a2281d05d96 100644 --- a/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx +++ b/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. ) : ( - this.goToCreateStackScript(), - }, - ]} - className={classes.stackscriptPlaceholder} - > - - Automate Deployment with StackScripts! - - - - Learn more about getting started - -  or  - - visit our guides and tutorials. - - - + )} ) : ( diff --git a/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptsEmptyLandingPage.tsx b/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptsEmptyLandingPage.tsx new file mode 100644 index 00000000000..5ccfcc1791b --- /dev/null +++ b/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptsEmptyLandingPage.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; +import FirewallIcon from 'src/assets/icons/entityIcons/firewall.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 ( + { + sendEvent({ + category: linkGAEvent.category, + action: 'Click:button', + label: 'Create StackScript', + }); + goToCreateStackScript(); + }, + children: 'Create StackScript', + }, + ]} + gettingStartedGuidesData={gettingStartedGuides} + headers={headers} + icon={FirewallIcon} + linkGAEvent={linkGAEvent} + youtubeLinkData={youtubeLinkData} + /> + ); +}; diff --git a/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptsEmptyResourcesData.ts b/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptsEmptyResourcesData.ts new file mode 100644 index 00000000000..c8ce945647d --- /dev/null +++ b/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', +}; From 26f9dc8d68ef9222a4700491e84033d2c577a4b7 Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Fri, 5 May 2023 22:08:30 -0500 Subject: [PATCH 2/7] Add StackScriptsIcon --- .../StackScriptBase/StackScriptsEmptyLandingPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptsEmptyLandingPage.tsx b/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptsEmptyLandingPage.tsx index 5ccfcc1791b..51da185b8a5 100644 --- a/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptsEmptyLandingPage.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptsEmptyLandingPage.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import FirewallIcon from 'src/assets/icons/entityIcons/firewall.svg'; +import StackScriptsIcon from 'src/assets/icons/entityIcons/stackscript.svg'; import { ResourcesSection } from 'src/components/EmptyLandingPageResources/ResourcesSection'; import { sendEvent } from 'src/utilities/ga'; import { @@ -33,7 +33,7 @@ export const StackScriptsEmptyLandingState = (props: Props) => { ]} gettingStartedGuidesData={gettingStartedGuides} headers={headers} - icon={FirewallIcon} + icon={StackScriptsIcon} linkGAEvent={linkGAEvent} youtubeLinkData={youtubeLinkData} /> From f0529ec2aac8af952cbf18a96047a2f0fb11f0ca Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Mon, 8 May 2023 08:30:51 -0500 Subject: [PATCH 3/7] Update CHANGELOG.md --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c5797ed4f63..b754246487b 100644 --- a/CHANGELOG.md +++ b/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 \ No newline at end of file +- now using `npm --no-git-tag-version version patch|minor|major` to bump versions so that shrinkwrap also gets updated From 6980a37e7cf43bd2f329347c1b301861c4836c84 Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Mon, 8 May 2023 10:43:26 -0500 Subject: [PATCH 4/7] Update right doc url for Shell Scripts --- .../StackScriptBase/StackScriptsEmptyResourcesData.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptsEmptyResourcesData.ts b/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptsEmptyResourcesData.ts index c8ce945647d..190b4560785 100644 --- a/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptsEmptyResourcesData.ts +++ b/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptsEmptyResourcesData.ts @@ -49,7 +49,8 @@ export const youtubeLinkData: ResourcesLinkSection = { external: true, }, { - to: 'https://jira.linode.com/browse/M3-6470#10', + to: + 'https://www.linode.com/docs/products/tools/stackscripts/guides/create/', text: 'Shell Scripts', external: true, }, From 95c35247d529f4bbd64f6d0679d36d7cd041536b Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Mon, 8 May 2023 10:55:51 -0500 Subject: [PATCH 5/7] PR: feedback organize imports --- .../StackScriptBase/StackScriptBase.tsx | 46 +++++++++---------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx b/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx index a2281d05d96..0d725b6135e 100644 --- a/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx @@ -1,39 +1,39 @@ -import { Image } from '@linode/api-v4/lib/images'; -import { StackScript } from '@linode/api-v4/lib/stackscripts'; -import { APIError, Filter, ResourcePage } from '@linode/api-v4/lib/types'; -import classNames from 'classnames'; -import { pathOr } from 'ramda'; import * as React from 'react'; -import { RouteComponentProps, withRouter } from 'react-router-dom'; -import { Waypoint } from 'react-waypoint'; -import { compose } from 'recompose'; -import StackScriptsIcon from 'src/assets/icons/entityIcons/stackscript.svg'; +import { APIError, Filter, ResourcePage } from '@linode/api-v4/lib/types'; +import { + AcceptedFilters, + generateCatchAllFilter, + generateSpecificFilter, +} from '../stackScriptUtils'; import Button from 'src/components/Button'; +import classNames from 'classnames'; import { CircleProgress } from 'src/components/CircleProgress'; +import { compose } from 'recompose'; import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField'; import ErrorState from 'src/components/ErrorState'; +import { Image } from '@linode/api-v4/lib/images'; +import { pathOr } from 'ramda'; import Notice from 'src/components/Notice'; import Placeholder from 'src/components/Placeholder'; +import { RouteComponentProps, withRouter } from 'react-router-dom'; +import StackScriptsIcon from 'src/assets/icons/entityIcons/stackscript.svg'; +import StackScriptTableHead from '../Partials/StackScriptTableHead'; +import { StackScript } from '@linode/api-v4/lib/stackscripts'; +import { StackScriptsEmptyLandingState } from './StackScriptsEmptyLandingPage'; +import { StackScriptsRequest } from '../types'; import { Table } from 'src/components/Table'; -import { - withProfile, - WithProfileProps, -} from 'src/containers/profile.container'; -import { WithQueryClientProps } from 'src/containers/withQueryClient.container'; -import { isLinodeKubeImageId } from 'src/store/image/image.helpers'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import { getDisplayName } from 'src/utilities/getDisplayName'; -import { handleUnauthorizedErrors } from 'src/utilities/handleUnauthorizedErrors'; import { getQueryParam } from 'src/utilities/queryParams'; -import StackScriptTableHead from '../Partials/StackScriptTableHead'; +import { handleUnauthorizedErrors } from 'src/utilities/handleUnauthorizedErrors'; +import { isLinodeKubeImageId } from 'src/store/image/image.helpers'; +import { Waypoint } from 'react-waypoint'; +import { WithQueryClientProps } from 'src/containers/withQueryClient.container'; import { - AcceptedFilters, - generateCatchAllFilter, - generateSpecificFilter, -} from '../stackScriptUtils'; -import { StackScriptsRequest } from '../types'; + withProfile, + WithProfileProps, +} from 'src/containers/profile.container'; import withStyles, { StyleProps } from './StackScriptBase.styles'; -import { StackScriptsEmptyLandingState } from './StackScriptsEmptyLandingPage'; type CurrentFilter = 'label' | 'deploys' | 'revision'; From 611ee46c2c432be69bf5ec1070983a4bee2e4b1f Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Mon, 8 May 2023 11:39:33 -0500 Subject: [PATCH 6/7] PR: Feedback --- .../EmptyLandingPageResources/ResourcesLinksSubSection.tsx | 2 +- .../StackScripts/StackScriptBase/StackScriptBase.styles.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksSubSection.tsx b/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksSubSection.tsx index 17b10d5dad4..e27833a8977 100644 --- a/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksSubSection.tsx +++ b/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksSubSection.tsx @@ -49,7 +49,7 @@ export const ResourcesLinksSubSection = ( return ( - + {icon} {title} {children} diff --git a/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.styles.ts b/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.styles.ts index 44da3ac4883..7710683e9ea 100644 --- a/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.styles.ts +++ b/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.styles.ts @@ -19,7 +19,6 @@ const styles = (theme: Theme) => }, emptyState: { color: theme.palette.text.primary, - textAlign: 'center', }, table: { backgroundColor: theme.bg.bgPaper, From 6a76e731aece84881ff574a41504fca361ae73f5 Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Wed, 10 May 2023 15:04:41 -0500 Subject: [PATCH 7/7] Update youtube link for Shell Scripts Explained --- .../StackScriptBase/StackScriptsEmptyResourcesData.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptsEmptyResourcesData.ts b/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptsEmptyResourcesData.ts index 190b4560785..42e969382b1 100644 --- a/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptsEmptyResourcesData.ts +++ b/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptsEmptyResourcesData.ts @@ -49,9 +49,8 @@ export const youtubeLinkData: ResourcesLinkSection = { external: true, }, { - to: - 'https://www.linode.com/docs/products/tools/stackscripts/guides/create/', - text: 'Shell Scripts', + to: 'https://www.youtube.com/watch?v=EbyA5rZwyRw', + text: 'Shell Scripts Explained', external: true, }, {