fix(W-17632498,W-17632503): search broken, add feedback with no results

src/extension/lexers/lexer-utils.ts

@@ -88,7 +88,7 @@ export function isAssignmentOperation(node: sh.Node): node is sh.Assign {
 /**
  * Get the vscode position for the specified node
  *
- * @param pos The node positon to convert to a vscode position
+ * @param pos The node position to convert to a vscode position
  * @returns the vscode position for the specified node
  */
 export function nodePosToVScodePosition(pos: sh.Pos): vscode.Position {

src/webviews/addons-view/index.css

@@ -3,6 +3,9 @@
   width: 100%;
   font-family: var(--vscode-font-family);
 }
+.hidden {
+  display: none;
+}
 section {
   background: var(--vscode-editor-background);
   color: var(--vscode-editor-foreground);

src/webviews/addons-view/index.html

@@ -22,6 +22,7 @@ <h1 id="main-heading">Add-ons Marketplace</h1>
     </div>
   </header>
   <vscode-progress-ring class="loading-indicator"></vscode-progress-ring>
+  <h2 id="no-results" class="hidden">No results found</h2>
   <ul class="addons-list" id="addons"></ul>
 </section>
 

src/webviews/addons-view/index.ts

@@ -54,6 +54,8 @@ const styles = (await loadCss(import.meta.resolve('./index.css'))).concat(common
  *
  */
 export class HerokuAddOnsMarketplace extends FASTElement {
+  @shadowChild('#no-results')
+  private noResultsElement!: HTMLElement;
   @shadowChild('#categories-dropdown')
   private categoryDropdown!: Dropdown;
   @shadowChild('#addons')
@@ -478,5 +480,6 @@ export class HerokuAddOnsMarketplace extends FASTElement {
         return matchesSearchTerm && matchesCategory && matchesInstalled;
       });
     this.renderAddonCards(filteredAddons);
+    this.noResultsElement.classList.toggle('hidden', !!filteredAddons?.length);
   };
 }

src/webviews/heroku-starter-apps-view/index.html

@@ -18,6 +18,7 @@ <h1 id="main-heading">Heroku starter apps</h1>
     </div>
   </header>
   <vscode-progress-ring class="loading-indicator"></vscode-progress-ring>
+  <h2 id="no-results" class="hidden">No results found</h2>
   <div class="content-area">
     <ul id="heroku-elements-apps" class="repo-list" role="list" aria-label="Reference applications">
       <!-- #repo-template -->

src/webviews/heroku-starter-apps-view/index.ts

@@ -59,6 +59,9 @@ const styles = (await loadCss([import.meta.resolve('./index.css')])).concat(comm
  * - spaces: Optional array of Heroku spaces
  */
 export class HerokuStarterApps extends FASTElement {
+  @shadowChild('#no-results')
+  private noResultsElement!: HTMLElement;
+
   @shadowChild('#reference-apps')
   private referenceAppsUList!: HTMLUListElement;
 
@@ -87,7 +90,7 @@ export class HerokuStarterApps extends FASTElement {
 
   private githubService = new GithubService();
   private configVarsByContentsUrl = new Map<string, EnvironmentVariables>();
-  private reposRendered = new Set<string>();
+  private reposRendered = new Map<string, RepoCardData>();
 
   /**
    * Constructor for the HerokuStarterApps class.
@@ -181,23 +184,20 @@ export class HerokuStarterApps extends FASTElement {
       'html_url',
       'public_repository'
     ];
-    const herokuGettingStartedRepos = this.herokuGettingStartedRepos?.items ?? [];
-    const referenceAppRepos = this.referenceAppRepos?.items ?? [];
-
-    const allRepos = [
-      ...(elementsButtons as HerokuDeployButton[]),
-      ...herokuGettingStartedRepos,
-      ...referenceAppRepos
-    ] as RepoCardData[];
-    for (const repo of allRepos) {
+    let foundCt = 0;
+    for (const [id, repo] of this.reposRendered) {
       const matches = fields.some((field) => {
         const value = repo[field]?.toLocaleString().toLocaleLowerCase();
         return value?.includes(term);
       });
-      const element = this.shadowRoot!.getElementById(repo.name ?? repo.repo_name);
+      const element = this.shadowRoot!.getElementById(id);
       element?.classList.toggle('hidden', !matches);
       element?.setAttribute('aria-hidden', String(!matches));
+      if (matches) {
+        foundCt++;
+      }
     }
+    this.noResultsElement.classList.toggle('hidden', foundCt > 0);
   };
 
   /**
@@ -227,11 +227,9 @@ export class HerokuStarterApps extends FASTElement {
       });
       this.renderReferenceAppsList();
       this.renderStarterAppsList();
+      this.renderHerokuButtonsList();
+      this.loadingIndicator.remove();
     })();
-
-    this.renderHerokuButtonsList();
-
-    this.loadingIndicator.remove();
   };
 
   /**
@@ -247,7 +245,7 @@ export class HerokuStarterApps extends FASTElement {
       }
       const li = this.createRepoCard(item as RepoCardData);
       herokuElementsAppsReposFragment.appendChild(li);
-      this.reposRendered.add(item.repo_name);
+      this.reposRendered.set(item.repo_name, item as RepoCardData);
     });
 
     this.herokuElementsAppsUList.appendChild(herokuElementsAppsReposFragment);
@@ -266,7 +264,7 @@ export class HerokuStarterApps extends FASTElement {
       }
       const li = this.createRepoCard(item as RepoCardData);
       referenceAppReposFragment.appendChild(li);
-      this.reposRendered.add(item.name);
+      this.reposRendered.set(item.name, item as RepoCardData);
     });
 
     this.referenceAppsUList.appendChild(referenceAppReposFragment);
@@ -286,6 +284,7 @@ export class HerokuStarterApps extends FASTElement {
       }
       const li = this.createRepoCard(item as RepoCardData);
       herokuGettingStartedReposFragment.appendChild(li);
+      this.reposRendered.set(item.name, item as RepoCardData);
     });
 
     this.starterAppsUList.appendChild(herokuGettingStartedReposFragment);