refactor: [M3-8843] - StackScript Landing page

packages/manager/cypress/e2e/core/stackscripts/smoke-community-stackscripts.spec.ts

@@ -106,7 +106,10 @@ describe('Community Stackscripts integration tests', () => {
     cy.visitWithLogin('/stackscripts/community');
     cy.wait('@getStackScripts');
 
-    cy.get('[data-qa-stackscript-empty-msg="true"]').should('not.exist');
+    // Confirm that empty state is not shown.
+    cy.get('[data-qa-placeholder-container="resources-section"]').should(
+      'not.exist'
+    );
     cy.findByText('Automate deployment scripts').should('not.exist');
 
     cy.defer(getProfile, 'getting profile').then((profile: Profile) => {
@@ -138,7 +141,7 @@ describe('Community Stackscripts integration tests', () => {
 
       // Search the corresponding community stack script
       mockGetStackScripts([stackScript]).as('getFilteredStackScripts');
-      cy.get('[id="search-by-label,-username,-or-description"]')
+      cy.findByPlaceholderText('Search by Label, Username, or Description')
         .click()
         .type(`${stackScript.label}{enter}`);
       cy.wait('@getFilteredStackScripts');
@@ -201,7 +204,9 @@ describe('Community Stackscripts integration tests', () => {
       cy.wait('@getStackScripts');
 
       // Confirm that empty state is not shown.
-      cy.get('[data-qa-stackscript-empty-msg="true"]').should('not.exist');
+      cy.get('[data-qa-placeholder-container="resources-section"]').should(
+        'not.exist'
+      );
       cy.findByText('Automate deployment scripts').should('not.exist');
 
       // Confirm that scrolling to the bottom of the StackScripts list causes
@@ -271,13 +276,16 @@ describe('Community Stackscripts integration tests', () => {
     cy.visitWithLogin('/stackscripts/community');
     cy.wait('@getStackScripts');
 
-    cy.get('[data-qa-stackscript-empty-msg="true"]').should('not.exist');
+    // Confirm that empty state is not shown.
+    cy.get('[data-qa-placeholder-container="resources-section"]').should(
+      'not.exist'
+    );
     cy.findByText('Automate deployment scripts').should('not.exist');
 
     cy.get('tr').then((value) => {
       const rowCount = Cypress.$(value).length - 1; // Remove the table title row
 
-      cy.get('[id="search-by-label,-username,-or-description"]')
+      cy.findByPlaceholderText('Search by Label, Username, or Description')
         .click()
         .type(`${stackScript.label}{enter}`);
       cy.get(`[data-qa-table-row="${stackScript.label}"]`).should('be.visible');
@@ -311,7 +319,7 @@ describe('Community Stackscripts integration tests', () => {
     cy.visitWithLogin('/stackscripts/community');
     cy.wait(['@getStackScripts', '@getPreferences']);
 
-    cy.get('[id="search-by-label,-username,-or-description"]')
+    cy.findByPlaceholderText('Search by Label, Username, or Description')
       .click()
       .type(`${stackScriptName}{enter}`);
     cy.get(`[data-qa-table-row="${stackScriptName}"]`)

packages/manager/cypress/e2e/core/stackscripts/smoke-stackscripts-landing-page.spec.ts

@@ -15,7 +15,8 @@ describe('Display stackscripts', () => {
     cy.wait('@getStackScripts');
 
     cy.findByText('Automate deployment scripts').should('be.visible');
-    cy.get('[data-qa-stackscript-empty-msg="true"]')
+
+    cy.get('[data-qa-placeholder-container="resources-section"]')
       .should('be.visible')
       .within(() => {
         ui.button

packages/manager/src/components/StackScript/StackScript.tsx

@@ -71,12 +71,6 @@ const useStyles = makeStyles()((theme: Theme) => ({
     fontSize: '1rem',
     marginTop: theme.spacing(1),
   },
-  root: {
-    '.detailsWrapper &': {
-      padding: theme.spacing(4),
-    },
-    backgroundColor: theme.bg.bgPaper,
-  },
 }));
 
 export interface StackScriptProps {
@@ -159,7 +153,7 @@ export const StackScript = React.memo((props: StackScriptProps) => {
       : `/stackscripts/community?${queryString}`;
 
   return (
-    <div className={classes.root}>
+    <div>
       <Box
         sx={{
           alignItems: 'flex-start',

packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionList.tsx

@@ -9,7 +9,6 @@ import { debounce } from 'throttle-debounce';
 
 import { Button } from 'src/components/Button/Button';
 import { CircleProgress } from 'src/components/CircleProgress';
-import { Code } from 'src/components/Code/Code';
 import { Stack } from 'src/components/Stack';
 import { Table } from 'src/components/Table';
 import { TableBody } from 'src/components/TableBody';
@@ -22,7 +21,7 @@ import { TableRowLoading } from 'src/components/TableRowLoading/TableRowLoading'
 import { TableSortCell } from 'src/components/TableSortCell';
 import { TextField } from 'src/components/TextField';
 import { TooltipIcon } from 'src/components/TooltipIcon';
-import { Typography } from 'src/components/Typography';
+import { StackScriptSearchHelperText } from 'src/features/StackScripts/Partials/StackScriptSearchHelperText';
 import { useOrder } from 'src/hooks/useOrder';
 import {
   useStackScriptQuery,
@@ -172,36 +171,12 @@ export const StackScriptSelectionList = ({ type }: Props) => {
             </InputAdornment>
           ),
         }}
-        tooltipText={
-          <Stack spacing={1}>
-            <Typography>
-              You can search for a specific item by prepending your search term
-              with "username:", "label:", or "description:".
-            </Typography>
-            <Box>
-              <Typography fontFamily={(theme) => theme.font.bold}>
-                Examples
-              </Typography>
-              <Typography fontSize="0.8rem">
-                <Code>username: linode</Code>
-              </Typography>
-              <Typography fontSize="0.8rem">
-                <Code>label: sql</Code>
-              </Typography>
-              <Typography fontSize="0.8rem">
-                <Code>description: "ubuntu server"</Code>
-              </Typography>
-              <Typography fontSize="0.8rem">
-                <Code>label: sql or label: php</Code>
-              </Typography>
-            </Box>
-          </Stack>
-        }
         hideLabel
         label="Search"
         onChange={debounce(400, (e) => setQuery(e.target.value))}
         placeholder="Search StackScripts"
         spellCheck={false}
+        tooltipText={<StackScriptSearchHelperText />}
         tooltipWidth={300}
         value={query}
       />

packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionRow.tsx

@@ -7,6 +7,7 @@ import { Stack } from 'src/components/Stack';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 import { Typography } from 'src/components/Typography';
+import { isLKEStackScript } from 'src/features/StackScripts/stackScriptUtils';
 import { truncate } from 'src/utilities/truncate';
 
 import type { StackScript } from '@linode/api-v4';
@@ -22,9 +23,9 @@ interface Props {
 export const StackScriptSelectionRow = (props: Props) => {
   const { disabled, isSelected, onOpenDetails, onSelect, stackscript } = props;
 
-  // Never show LKE StackScripts. We try to hide these from the user, even though they
+  // Never show LKE StackScripts. We try to hide these from the user even though they
   // are returned by the API.
-  if (stackscript.username.startsWith('lke-service-account-')) {
+  if (isLKEStackScript(stackscript)) {
     return null;
   }
 

packages/manager/src/features/StackScripts/CommonStackScript.styles.ts

@@ -1,57 +1,16 @@
+import { styled } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme, styled } from '@mui/material/styles';
-import { Link } from 'react-router-dom';
 
 import { Button } from 'src/components/Button/Button';
 import { TableCell } from 'src/components/TableCell';
-import { TableRow } from 'src/components/TableRow';
 import { Typography } from 'src/components/Typography';
 
+import type { Theme } from '@mui/material/styles';
+
 const libRadioLabel = {
   cursor: 'pointer',
 };
 
-const stackScriptUsernameStyling = (theme: Theme) => {
-  return {
-    ...libRadioLabel,
-    color: theme.textColors.tableStatic,
-    fontSize: '0.875rem',
-    lineHeight: '1.125rem',
-  };
-};
-
-const rowStyles = {
-  '& > button': {
-    height: 46,
-  },
-  height: 46,
-};
-
-const libTitle = (theme: Theme) => {
-  return {
-    fontSize: '0.875rem',
-    lineHeight: '1.125rem',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    [theme.breakpoints.down('md')]: {
-      wordBreak: 'break-all',
-    },
-    whiteSpace: 'nowrap' as const,
-  };
-};
-
-export const StyledTitleTypography = styled(Typography, {
-  label: 'StyledTitleTypography',
-})(({ theme }) => ({
-  ...libTitle(theme),
-}));
-
-export const StyledTitleTableCell = styled(TableCell, {
-  label: 'StyledTitleTableCell',
-})(({ theme }) => ({
-  ...libTitle(theme),
-}));
-
 export const StyledDetailsButton = styled(Button, {
   label: 'StyledDetailsButton',
 })(({ theme }) => ({
@@ -123,16 +82,6 @@ export const StyledImagesTableCell = styled(TableCell, {
   whiteSpace: 'pre-wrap',
 });
 
-export const StyledTableRow = styled(TableRow, { label: 'StyledTableRow' })({
-  ...rowStyles,
-});
-
-export const StyledRowTableCell = styled(TableCell, {
-  label: 'StyledRowTableCell',
-})({
-  ...rowStyles,
-});
-
 export const StyledTypography = styled(Typography, {
   label: 'StyledTypography',
 })(({ theme }) => ({
@@ -146,28 +95,21 @@ export const StyledTypography = styled(Typography, {
   whiteSpace: 'nowrap',
 }));
 
+const stackScriptUsernameStyling = (theme: Theme) => {
+  return {
+    ...libRadioLabel,
+    color: theme.textColors.tableStatic,
+    fontSize: '0.875rem',
+    lineHeight: '1.125rem',
+  };
+};
+
 export const StyledUsernameLabel = styled('label', {
   label: 'StyledUsernameLabel',
 })(({ theme }) => ({
   ...stackScriptUsernameStyling(theme),
 }));
 
-export const StyledLabelSpan = styled('span', { label: 'StyledLabelSpan' })({
-  ...libRadioLabel,
-});
-
-export const StyledUsernameSpan = styled('span', {
-  label: 'StyledUsernameSpan',
-})(({ theme }) => ({
-  ...stackScriptUsernameStyling(theme),
-}));
-
-export const StyledLink = styled(Link, { label: 'StyledLink' })(
-  ({ theme }) => ({
-    color: theme.textColors.tableStatic,
-  })
-);
-
 export const StyledStackScriptSectionTableCell = styled(TableCell, {
   label: 'StyledStackScriptSectionTableCell',
 })({

packages/manager/src/features/StackScripts/Partials/StackScriptSearchHelperText.tsx

@@ -0,0 +1,34 @@
+import { Box } from '@linode/ui';
+import React from 'react';
+
+import { Code } from 'src/components/Code/Code';
+import { Stack } from 'src/components/Stack';
+import { Typography } from 'src/components/Typography';
+
+export const StackScriptSearchHelperText = () => {
+  return (
+    <Stack spacing={1}>
+      <Typography>
+        You can search for a specific item by prepending your search term with
+        "username:", "label:", or "description:".
+      </Typography>
+      <Box>
+        <Typography fontFamily={(theme) => theme.font.bold}>
+          Examples
+        </Typography>
+        <Typography fontSize="0.8rem">
+          <Code>username: linode</Code>
+        </Typography>
+        <Typography fontSize="0.8rem">
+          <Code>label: sql</Code>
+        </Typography>
+        <Typography fontSize="0.8rem">
+          <Code>description: "ubuntu server"</Code>
+        </Typography>
+        <Typography fontSize="0.8rem">
+          <Code>label: sql or label: php</Code>
+        </Typography>
+      </Box>
+    </Stack>
+  );
+};

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

@@ -197,9 +197,7 @@ const withStackScriptBase = (options: WithStackScriptBaseOptions) => (
                   You don’t have any StackScripts to select from.
                 </StyledPlaceholder>
               ) : (
-                <StackScriptsEmptyLandingState
-                  goToCreateStackScript={this.goToCreateStackScript}
-                />
+                <StackScriptsEmptyLandingState />
               )}
             </StyledEmptyStateDiv>
           ) : (
@@ -427,11 +425,6 @@ const withStackScriptBase = (options: WithStackScriptBaseOptions) => (
       );
     };
 
-    goToCreateStackScript = () => {
-      const { history } = this.props;
-      history.push('/stackscripts/create');
-    };
-
     handleClickTableHeader = (value: string) => {
       const { currentSearchFilter, sortOrder } = this.state;
 

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useHistory } from 'react-router-dom';
 
 import LinodeIcon from 'src/assets/icons/entityIcons/linode.svg';
 import { ResourcesSection } from 'src/components/EmptyLandingPageResources/ResourcesSection';
@@ -11,12 +12,8 @@ import {
   youtubeLinkData,
 } from './StackScriptsEmptyResourcesData';
 
-interface Props {
-  goToCreateStackScript: () => void;
-}
-
-export const StackScriptsEmptyLandingState = (props: Props) => {
-  const { goToCreateStackScript } = props;
+export const StackScriptsEmptyLandingState = () => {
+  const history = useHistory();
 
   return (
     <ResourcesSection
@@ -29,7 +26,7 @@ export const StackScriptsEmptyLandingState = (props: Props) => {
               category: linkAnalyticsEvent.category,
               label: 'Create StackScript',
             });
-            goToCreateStackScript();
+            history.push('/stackscripts/create');
           },
         },
       ]}