From 386d4b018fd7755a4a4d0ad065545e038a0f3d06 Mon Sep 17 00:00:00 2001
From: Joey Wunderlich <jwunderl@users.noreply.github.com>
Date: Thu, 5 Oct 2023 10:19:02 -0700
Subject: [PATCH] [stable8.5-Arcade] Port hw dialogue fixes (#9707)

* Pull hw options from target config (#9696)

* pull from targetconfig instead of /hardware

* update comment

* extract localization for multiplayer hero games & tags (#9698)

* extract localization for multiplayer hero games & tags

* also translate descriptions for hw
---
 cli/cli.ts                                | 28 +++++++++++++++-
 localtypings/pxtarget.d.ts                |  2 ++
 multiplayer/src/components/JoinOrHost.tsx |  4 +--
 webapp/src/extensionsBrowser.tsx          |  2 +-
 webapp/src/projects.tsx                   | 40 ++++++++---------------
 5 files changed, 46 insertions(+), 30 deletions(-)

diff --git a/cli/cli.ts b/cli/cli.ts
index 74b36c33b248..2bbb4430a2e3 100644
--- a/cli/cli.ts
+++ b/cli/cli.ts
@@ -1840,7 +1840,7 @@ function saveThemeJson(cfg: pxt.TargetBundle, localDir?: boolean, packaged?: boo
     walkDocs(theme.docMenu);
     if (nodeutil.fileExistsSync("targetconfig.json")) {
         const targetConfig = nodeutil.readJson("targetconfig.json") as pxt.TargetConfig;
-        if (targetConfig && targetConfig.galleries) {
+        if (targetConfig?.galleries) {
             const docsRoot = nodeutil.targetDir;
             let gcards: pxt.CodeCard[] = [];
             let tocmd: string =
@@ -1891,6 +1891,32 @@ ${gcards.map(gcard => `[${gcard.name}](${gcard.url})`).join(',\n')}
 
 `, { encoding: "utf8" });
         }
+        const multiplayerGames = targetConfig?.multiplayer?.games;
+        for (const game of (multiplayerGames ?? [])) {
+            if (game.title) targetStrings[`{id:game-title}${game.title}`] = game.title;
+            if (game.subtitle) targetStrings[`{id:game-subtitle}${game.subtitle}`] = game.subtitle;
+        }
+
+        const approvedRepoLib = targetConfig?.packages?.approvedRepoLib;
+        for (const [extension, repoData] of Object.entries(approvedRepoLib ?? {})) {
+            for (const tag of (repoData.tags ?? [])) {
+                targetStrings[`{id:extension-tag}${tag}`] = tag;
+            }
+        }
+
+        const builtinExtensionLib = targetConfig?.packages?.builtinExtensionsLib;
+        for (const [extension, repoData] of Object.entries(builtinExtensionLib ?? {})) {
+            for (const tag of (repoData.tags ?? [])) {
+                targetStrings[`{id:extension-tag}${tag}`] = tag;
+            }
+        }
+
+        const hardwareOptions = targetConfig?.hardwareOptions;
+        for (const opt of (hardwareOptions ?? [])) {
+            // Not translating hardware name, as that is typically a brand name / etc.
+            if (opt.description)
+                targetStrings[`{id:hardware-description}${opt.description}`] = opt.description;
+        }
     }
     // extract strings from editor
     ["editor", "fieldeditors", "cmds"]
diff --git a/localtypings/pxtarget.d.ts b/localtypings/pxtarget.d.ts
index 4f3594a00978..bd154b1e62dd 100644
--- a/localtypings/pxtarget.d.ts
+++ b/localtypings/pxtarget.d.ts
@@ -28,6 +28,8 @@ declare namespace pxt {
         // localized galleries
         localizedGalleries?: pxt.Map<pxt.Map<string>>;
         windowsStoreLink?: string;
+        // localized options on download dialog; name, description, url, imageUrl, variant used.
+        hardwareOptions?: CodeCard[];
         // release manifest for the electron app
         electronManifest?: pxt.electron.ElectronManifest;
         profileNotification?: ProfileNotification;
diff --git a/multiplayer/src/components/JoinOrHost.tsx b/multiplayer/src/components/JoinOrHost.tsx
index 7fc7fb9e78d5..72e41afe64d7 100644
--- a/multiplayer/src/components/JoinOrHost.tsx
+++ b/multiplayer/src/components/JoinOrHost.tsx
@@ -157,8 +157,8 @@ export default function Render() {
                             return (
                                 <HostGameButton
                                     shareId={game.shareId}
-                                    title={game.title}
-                                    subtitle={game.subtitle}
+                                    title={pxt.Util.rlf(`{id:game-title}${game.title}`)}
+                                    subtitle={pxt.Util.rlf(`{id:game-subtitle}${game.subtitle}`)}
                                     image={resourceUrl(game.image)}
                                     key={i}
                                 />
diff --git a/webapp/src/extensionsBrowser.tsx b/webapp/src/extensionsBrowser.tsx
index 0faa9f0c4d0d..1c94663abeba 100644
--- a/webapp/src/extensionsBrowser.tsx
+++ b/webapp/src/extensionsBrowser.tsx
@@ -524,7 +524,7 @@ export const ExtensionsBrowser = (props: ExtensionsProps) => {
                         {categoryNames.map(c =>
                             <Button title={pxt.Util.rlf(c)}
                                 key={c}
-                                label={pxt.Util.rlf(c)}
+                                label={pxt.Util.rlf(`{id:extension-tag}${c}`)}
                                 onClick={() => handleCategoryClick(c)}
                                 onKeydown={() => handleCategoryClick}
                                 className={"extension-tag " + (selectedTag == c ? "selected" : "")}
diff --git a/webapp/src/projects.tsx b/webapp/src/projects.tsx
index c3756e1ad2b7..b70fc1a62a88 100644
--- a/webapp/src/projects.tsx
+++ b/webapp/src/projects.tsx
@@ -1641,20 +1641,6 @@ export class ChooseHwDialog extends data.Component<ISettingsProps, ChooseHwDialo
         this.setState({ visible: true, skipDownload: !!skipDownload });
     }
 
-    fetchGallery(): pxt.CodeCard[] {
-        const path = "/hardware";
-        let res = this.getData(`gallery:${encodeURIComponent(path)}`) as pxt.gallery.Gallery[];
-        if (res) {
-            if (res instanceof Error) {
-                // ignore
-            } else {
-                this.prevGalleries = pxt.Util.concat(res.map(g => g.cards))
-                    .filter(c => !!c.variant);
-            }
-        }
-        return this.prevGalleries || [];
-    }
-
     private setHwVariant(cfg: pxt.PackageConfig, card: pxt.CodeCard) {
         pxt.tickEvent("projects.choosehwvariant", {
             hwid: cfg.name,
@@ -1681,17 +1667,19 @@ export class ChooseHwDialog extends data.Component<ISettingsProps, ChooseHwDialo
             const savedV = v
             v.card.onClick = () => this.setHwVariant(savedV, null)
         }
-        let cards = this.fetchGallery();
-        for (const card of cards) {
-            const savedV = variants.find(variant => variant.name == card.variant);
-            const savedCard = card;
-            if (savedV)
-                card.onClick = () => this.setHwVariant(savedV, savedCard);
-            else {
-                pxt.reportError("hw", "invalid variant");
+
+        const targetConfig = this.getData("target-config:") as pxt.TargetConfig;
+        const cards = targetConfig?.hardwareOptions?.map(el => {
+            const displayCard = { ...el };
+            const matchingVariant = variants.find(variant => variant.name === displayCard.variant);
+            if (!matchingVariant) {
+                // Variant may be experimental hw, ignore this option
+                return undefined;
             }
-        }
-        cards = cards.filter(card => !!card.onClick);
+
+            displayCard.onClick = () => this.setHwVariant(matchingVariant, displayCard);
+            return displayCard;
+        }).filter(el => !!el);
 
         return (
             <sui.Modal isOpen={visible} className="hardwaredialog" size="large"
@@ -1701,12 +1689,12 @@ export class ChooseHwDialog extends data.Component<ISettingsProps, ChooseHwDialo
             >
                 <div className="group">
                     <div className="ui cards centered" role="listbox">
-                        {cards.map(card =>
+                        {cards?.map(card =>
                             <codecard.CodeCardView
                                 key={'card' + card.name}
                                 name={card.name}
                                 ariaLabel={card.name}
-                                description={card.description}
+                                description={pxt.Util.rlf(`{id:hardware-description}${card.description}`)}
                                 imageUrl={card.imageUrl}
                                 learnMoreUrl={card.url}
                                 onClick={card.onClick}