From 00e37d22cf11bc5d1f9d6f8617c3b37bc778d87f Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Wed, 19 Apr 2023 11:00:07 -0500
Subject: [PATCH] feat: [M3-6427] - Add No Results section for Marketplace
 Search (#8999)

* feat: [M3-6427] - Add No Results section for Marketplace Search

* Update AppPanelSection.tsx

* UX feedback

* Left align copy

* Update AppPanelSection.tsx

* PR - feedback

* Update CHANGELOG.md
---
 CHANGELOG.md                                  |  1 +
 .../linodes/LinodesCreate/AppPanelSection.tsx | 72 ++++++++++---------
 .../linodes/LinodesCreate/SelectAppPanel.tsx  |  3 +
 .../TabbedContent/FromAppsContent.tsx         |  1 +
 4 files changed, 45 insertions(+), 32 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8bd8184dc30..cbf1a518e2f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -28,6 +28,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 ### Added:
 - Cross Data Center Clone warning #8937
 - `Plan` column header to plan select table #8943
+- Add No Results section for Marketplace Search #8999
 
 ### Changed:
 - Use Akamai logo for TPA provider screen #8982
diff --git a/packages/manager/src/features/linodes/LinodesCreate/AppPanelSection.tsx b/packages/manager/src/features/linodes/LinodesCreate/AppPanelSection.tsx
index fa0f75d7f5f..cf18c7173b8 100644
--- a/packages/manager/src/features/linodes/LinodesCreate/AppPanelSection.tsx
+++ b/packages/manager/src/features/linodes/LinodesCreate/AppPanelSection.tsx
@@ -19,6 +19,7 @@ interface Props {
   apps: StackScript[];
   disabled: boolean;
   selectedStackScriptID: number | undefined;
+  searchValue?: string;
   openDrawer: (stackScriptLabel: string) => void;
   handleClick: (
     id: number,
@@ -37,6 +38,7 @@ export const AppPanelSection: React.FC<Props> = (props) => {
     disabled,
     openDrawer,
     handleClick,
+    searchValue,
   } = props;
 
   return (
@@ -45,40 +47,46 @@ export const AppPanelSection: React.FC<Props> = (props) => {
       {heading && heading.length > 0 ? (
         <Divider spacingTop={16} spacingBottom={16} />
       ) : null}
-      <AppPanelGrid container spacing={2}>
-        {apps.map((eachApp) => {
-          const decodedLabel = decode(eachApp.label);
-          const isCluster =
-            decodedLabel.endsWith('Cluster ') &&
-            eachApp.user_defined_fields.some(
-              (field) => field.name === 'cluster_size'
-            );
+      {apps.length > 0 ? (
+        <AppPanelGrid container spacing={2}>
+          {apps.map((eachApp) => {
+            const decodedLabel = decode(eachApp.label);
+            const isCluster =
+              decodedLabel.endsWith('Cluster ') &&
+              eachApp.user_defined_fields.some(
+                (field) => field.name === 'cluster_size'
+              );
 
-          const label = isCluster
-            ? decodedLabel.split(' Cluster')[0]
-            : decodedLabel;
+            const label = isCluster
+              ? decodedLabel.split(' Cluster')[0]
+              : decodedLabel;
 
-          return (
-            <SelectionCardWrapper
-              id={eachApp.id}
-              key={eachApp.id}
-              checked={eachApp.id === selectedStackScriptID}
-              // Decode App labels since they may contain HTML entities.
-              label={label}
-              clusterLabel={decodedLabel}
-              availableImages={eachApp.images}
-              userDefinedFields={eachApp.user_defined_fields}
-              handleClick={handleClick}
-              openDrawer={openDrawer}
-              disabled={disabled}
-              iconUrl={eachApp.logo_url.toLowerCase() || ''}
-              labelDecoration={
-                isCluster ? <Chip size="small" label="CLUSTER" /> : undefined
-              }
-            />
-          );
-        })}
-      </AppPanelGrid>
+            return (
+              <SelectionCardWrapper
+                id={eachApp.id}
+                key={eachApp.id}
+                checked={eachApp.id === selectedStackScriptID}
+                // Decode App labels since they may contain HTML entities.
+                label={label}
+                clusterLabel={decodedLabel}
+                availableImages={eachApp.images}
+                userDefinedFields={eachApp.user_defined_fields}
+                handleClick={handleClick}
+                openDrawer={openDrawer}
+                disabled={disabled}
+                iconUrl={eachApp.logo_url.toLowerCase() || ''}
+                labelDecoration={
+                  isCluster ? <Chip size="small" label="CLUSTER" /> : undefined
+                }
+              />
+            );
+          })}
+        </AppPanelGrid>
+      ) : (
+        <Typography>
+          {`Sorry, no results matching "${searchValue}" were found.`}
+        </Typography>
+      )}
     </>
   );
 };
diff --git a/packages/manager/src/features/linodes/LinodesCreate/SelectAppPanel.tsx b/packages/manager/src/features/linodes/LinodesCreate/SelectAppPanel.tsx
index df22b54bafc..02a5103efa4 100644
--- a/packages/manager/src/features/linodes/LinodesCreate/SelectAppPanel.tsx
+++ b/packages/manager/src/features/linodes/LinodesCreate/SelectAppPanel.tsx
@@ -43,6 +43,7 @@ interface Props extends AppsData {
   error?: string;
   isSearching: boolean;
   isFiltering: boolean;
+  searchValue?: string;
 }
 
 type CombinedProps = Props & WithStyles<ClassNames>;
@@ -113,6 +114,7 @@ class SelectAppPanel extends React.PureComponent<CombinedProps> {
       openDrawer,
       isSearching,
       isFiltering,
+      searchValue,
     } = this.props;
 
     if (appInstancesError) {
@@ -185,6 +187,7 @@ class SelectAppPanel extends React.PureComponent<CombinedProps> {
           selectedStackScriptID={selectedStackScriptID}
           handleClick={handleClick}
           openDrawer={openDrawer}
+          searchValue={searchValue}
         />
       </Paper>
     );
diff --git a/packages/manager/src/features/linodes/LinodesCreate/TabbedContent/FromAppsContent.tsx b/packages/manager/src/features/linodes/LinodesCreate/TabbedContent/FromAppsContent.tsx
index ff47bfd8a91..6a193bfc166 100644
--- a/packages/manager/src/features/linodes/LinodesCreate/TabbedContent/FromAppsContent.tsx
+++ b/packages/manager/src/features/linodes/LinodesCreate/TabbedContent/FromAppsContent.tsx
@@ -358,6 +358,7 @@ class FromAppsContent extends React.Component<CombinedProps, State> {
             error={hasErrorFor('stackscript_id')}
             isSearching={isSearching}
             isFiltering={isFiltering}
+            searchValue={query}
           />
           {!userCannotCreateLinode && selectedStackScriptLabel ? (
             <UserDefinedFieldsPanel