fix(W-17885420): Can't get past Starter repos screen

.github/workflows/ci.yml

@@ -10,7 +10,7 @@ jobs:
     strategy:
       matrix:
         node-version: [22.x]
-        os: [sfdc-hk-ubuntu-22.04-arm-xlarge]
+        os: [pub-hk-ubuntu-22.04-small]
 
     steps:
       - name: Set up Xorg Server

src/webviews/addons-view/index.css

@@ -25,7 +25,7 @@ section {
     padding: 1rem;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 
-    .icon-logo-block-16 {
+    .icon-logo-outline-16 {
       color: var(--heroku-primary);
       font-size: 4rem;
       margin-right: 1rem;

src/webviews/addons-view/index.html

@@ -1,6 +1,6 @@
 <section>
   <header>
-    <span class="icon icon-logo-block-16" aria-hidden="true"></span>
+    <span class="icon icon-logo-outline-16" aria-hidden="true"></span>
     <div class="title">
       <h1 id="main-heading">Add-ons Marketplace</h1>
       <p>Install add-ons for <span id="app-name"></span></p>

src/webviews/components/repo-card/index.ts

@@ -275,10 +275,10 @@ export class HerokuRepoCard extends FASTElement {
     this.metaItemStarCount.textContent = (item.stargazers_count ?? item.stars ?? '').toString();
 
     // forks
-    this.metaItemForkCount.textContent = (item.forks_count ?? item.forks).toString();
+    this.metaItemForkCount.textContent = (item.forks_count ?? item.forks ?? '').toString();
 
     // last updated
-    this.metaItemLastUpdated.textContent = `Last Updated: ${new Date(item.updated_at).toLocaleDateString()}`;
+    this.metaItemLastUpdated.textContent = `Last Updated: ${new Date(item.updated_at ?? Date.now()).toLocaleDateString()}`;
 
     // Form for data collection and submission
     this.deployOptionsForm.dataset.repoUrl = item.clone_url ?? `${item.public_repository}.git`;

src/webviews/heroku-app-editor-view/index.css

@@ -34,7 +34,7 @@ section {
     padding: 1rem;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 
-    .icon-logo-block-16 {
+    .icon-logo-outline-16 {
       color: var(--heroku-primary);
       font-size: 4rem;
       margin-right: 1rem;

src/webviews/heroku-app-editor-view/index.html

@@ -1,6 +1,6 @@
 <section aria-labelledby="main-heading">
   <header>
-    <span class="icon icon-logo-block-16" aria-hidden="true"></span>
+    <span class="icon icon-logo-outline-16" aria-hidden="true"></span>
     <div class="title">
       <h1 id="main-heading">Deploy workspace to Heroku</h1>
       <p>Setup your workspace as a Heroku app</p>

src/webviews/heroku-app-editor-view/index.ts

@@ -84,11 +84,14 @@ export class HerokuAppEditor extends FASTElement {
     const mapTeams = mapTeamsByEnterpriseAccount(teams);
 
     void (async (): Promise<void> => {
-      const repos = await Promise.all(repoInfos.map((info) => this.githubService.getRepo(info.owner, info.repo)));
+      const repos = await Promise.allSettled(
+        repoInfos.map((info) => this.githubService.getRepo(info.owner, info.repo))
+      );
 
       for (let i = 0; i < appJsonList.length; i++) {
         const appJson = appJsonList[i];
         const repo = repos[i];
+        const repoInfo = repoInfos[i];
 
         const li = this.herokuRepoCardTemplate.content.cloneNode(true) as DocumentFragment;
         const repoCard = li.querySelector(HEROKU_REPO_CARD_TAG) as HerokuRepoCard;
@@ -97,7 +100,22 @@ export class HerokuAppEditor extends FASTElement {
         // any decorators have fully initialized and the shadow DOM
         // is available before we try to access it.
         requestAnimationFrame(() => {
-          repoCard.data = repo as RepoCardData;
+          if (repo.status === 'fulfilled') {
+            repoCard.data = repo.value as RepoCardData;
+          } else {
+            repoCard.data = {
+              name: appJson.name ?? repoInfo.repo ?? 'Unnamed App',
+              description: appJson.description ?? '',
+              stars: 0,
+              forks: 0,
+              language: 'Unknown',
+              // eslint-disable-next-line camelcase
+              html_url: appJson.repository ?? 'Unknown URL',
+              // eslint-disable-next-line camelcase
+              repo_name: appJson.repository ?? repoInfo.owner ?? 'Unknown owner'
+            } as RepoCardData;
+          }
+
           repoCard.spaces = mappedSpaces;
           repoCard.teams = mapTeams;
           repoCard.existingApps = existingApps;

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

@@ -34,7 +34,7 @@ section {
     padding: 1rem;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 
-    .icon-logo-block-16 {
+    .icon-logo-outline-16 {
       color: var(--heroku-primary);
       font-size: 4rem;
       margin-right: 1rem;

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

@@ -1,6 +1,6 @@
 <section aria-labelledby="main-heading">
   <header>
-    <span class="icon icon-logo-block-16" aria-hidden="true"></span>
+    <span class="icon icon-logo-outline-16" aria-hidden="true"></span>
     <div class="title">
       <h1 id="main-heading">Heroku starter apps</h1>
       <p>Reference & Starter Applications for Heroku</p>

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

@@ -6,7 +6,7 @@ import {
   type TextField,
   type ProgressRing
 } from '@vscode/webview-ui-toolkit';
-import type { GithubSearchResponse } from 'github-api';
+import type { RepoSearchResultItem } from 'github-api';
 import type { App, Space, Team } from '@heroku-cli/schema';
 import type { EnvironmentVariables } from '@heroku/app-json-schema';
 import { HerokuDeployButton } from '@heroku/elements';
@@ -85,8 +85,8 @@ export class HerokuStarterApps extends FASTElement {
   private existingApps: App[] = [];
   private teams: Map<string, Team[]> | undefined;
   private spaces: Map<string, Space[]> | undefined;
-  private referenceAppRepos: GithubSearchResponse | undefined;
-  private herokuGettingStartedRepos: GithubSearchResponse | undefined;
+  private referenceAppRepos: RepoSearchResultItem[] | undefined;
+  private herokuGettingStartedRepos: RepoSearchResultItem[] | undefined;
 
   private githubService = new GithubService();
   private configVarsByContentsUrl = new Map<string, EnvironmentVariables>();
@@ -218,7 +218,7 @@ export class HerokuStarterApps extends FASTElement {
     void (async (): Promise<void> => {
       const [herokuGettingStartedRepoResult, herokuReferenceAppsResult] = await Promise.allSettled([
         this.githubService.searchRepositories({
-          q: 'heroku-getting-started user:heroku',
+          q: 'heroku-getting-started',
           sort: 'stars'
         }),
         this.githubService.searchRepositories({
@@ -228,10 +228,12 @@ export class HerokuStarterApps extends FASTElement {
       ]);
 
       if (herokuGettingStartedRepoResult.status === 'fulfilled') {
-        this.herokuGettingStartedRepos = herokuGettingStartedRepoResult.value;
+        this.herokuGettingStartedRepos = herokuGettingStartedRepoResult.value?.items.filter((repo) =>
+          repo.name.startsWith('heroku-')
+        );
       }
       if (herokuReferenceAppsResult.status === 'fulfilled') {
-        this.referenceAppRepos = herokuReferenceAppsResult.value;
+        this.referenceAppRepos = herokuReferenceAppsResult.value?.items;
       }
       this.renderReferenceAppsList();
       this.renderStarterAppsList();
@@ -266,7 +268,7 @@ export class HerokuStarterApps extends FASTElement {
     this.referenceAppsUList.innerHTML = '';
 
     const referenceAppReposFragment = document.createDocumentFragment();
-    (this.referenceAppRepos?.items ?? []).forEach((item) => {
+    (this.referenceAppRepos ?? []).forEach((item) => {
       if (this.reposRendered.has(item.name)) {
         return;
       }
@@ -286,7 +288,7 @@ export class HerokuStarterApps extends FASTElement {
 
     const herokuGettingStartedReposFragment = document.createDocumentFragment();
 
-    (this.herokuGettingStartedRepos?.items ?? []).forEach((item) => {
+    (this.herokuGettingStartedRepos ?? []).forEach((item) => {
       if (this.reposRendered.has(item.name)) {
         return;
       }