Don't add forumExample card if forumUrl has otherActions (microsoft#7793)

Author: shakao

pxtlib/discourse.ts

@@ -53,7 +53,7 @@ namespace pxt.discourse {
 
     export function topicsByTag(apiUrl: string, tag: string): Promise<pxt.CodeCard[]> {
         apiUrl = apiUrl.replace(/\/$/, '');
-        const q = `${apiUrl}/tags/${tag}.json`;
+        const q = `${apiUrl}/tag/${tag}.json`;
         return pxt.Util.httpGetJsonAsync(q)
             .then((json: TagsResponse) => {
                 const users = pxt.Util.toDictionary(json.users, u => u.id.toString());

pxtlib/gallery.ts

@@ -253,7 +253,7 @@ ${(cards || []).map(
         return md;
 
         function otherActionsToMd(oas: pxt.CodeCardAction[]): string {
-            return oas.map(oa => `* otherAction: ${oa.url} ${oa.editor || "ts"} ${oa.cardType || ""}`)
+            return oas.map(oa => `* otherAction: ${oa.url}, ${oa.editor || ""}, ${oa.cardType || ""}`)
                 .join('\n');
         }
     }

webapp/src/projects.tsx

@@ -105,10 +105,11 @@ export class Projects extends auth.Component<ISettingsProps, ProjectsState> {
     chgGallery(scr: pxt.CodeCard, action?: pxt.CodeCardAction) {
         let editor: string = (action && action.editor) || "blocks";
         if (editor == "js") editor = "ts";
-        pxt.tickEvent("projects.gallery", { name: scr.name, cardType: scr.cardType, editor });
         const url = action ? action.url : scr.url;
+        const type = action?.cardType || scr.cardType
         const editorPref = editor + "prj";
-        switch (scr.cardType) {
+        pxt.tickEvent("projects.gallery", { name: scr.name, cardType: type, editor });
+        switch (type) {
             case "template":
                 const prj = pxt.Util.clone(pxt.appTarget.blocksprj);
                 prj.config.dependencies = {}; // clear all dependencies
@@ -122,6 +123,7 @@ export class Projects extends auth.Component<ISettingsProps, ProjectsState> {
                 this.props.parent.startActivity("tutorial", url, scr.name, editorPref);
                 break;
             case "sharedExample":
+                console.log("shared example")
                 let id = pxt.github.normalizeRepoId(url) || pxt.Cloud.parseScriptId(url);
                 if (!id) {
                     core.errorNotification(lf("Sorry, the project url looks invalid."));
@@ -863,12 +865,13 @@ export class ProjectsDetail extends data.Component<ProjectsDetailProps, Projects
         this.linkRef = React.createRef<HTMLAnchorElement>();
     }
 
-    protected isLink() {
+    protected isLink(actionType?: pxt.CodeCardType) {
         const { cardType, url, youTubeId, youTubePlaylistId } = this.props;
+        const type = actionType || cardType;
 
-        return isCodeCardWithLink(cardType) && (youTubeId || youTubePlaylistId || url);
+        return isCodeCardWithLink(type) && (youTubeId || youTubePlaylistId || url);
 
-        function isCodeCardWithLink(value: string) {
+        function isCodeCardWithLink(value: pxt.CodeCardType) {
             switch (value) {
                 case "file":
                 case "example":
@@ -899,10 +902,12 @@ export class ProjectsDetail extends data.Component<ProjectsDetailProps, Projects
         let clickLabel = lf("Show Instructions");
         if (cardType == "tutorial")
             clickLabel = lf("Start Tutorial");
-        else if (cardType == "codeExample" || cardType == "example" || cardType == "sharedExample")
+        else if (cardType == "codeExample" || cardType == "example")
             clickLabel = lf("Open Example");
         else if (cardType == "forumUrl")
             clickLabel = lf("Open in Forum");
+        else if (cardType == "sharedExample")
+            clickLabel = lf("Open in Editor");
         else if (cardType == "template")
             clickLabel = lf("New Project");
         else if (youTubeId)
@@ -916,30 +921,34 @@ export class ProjectsDetail extends data.Component<ProjectsDetailProps, Projects
         switch (type) {
             case "tutorial":
             case "example":
-            case "sharedExample":
                 if (action && action.editor) return action.editor;
                 return "blocks";
             case "codeExample":
                 if (action && action.editor) return action.editor;
                 return "js";
+            case "sharedExample":
+                return action?.editor;
             default:
                 return null;
         }
     }
 
-    protected getActionIcon(onClick: any, type: string, editor?: pxt.CodeCardEditorType): JSX.Element {
+    protected getActionIcon(onClick: any, type: pxt.CodeCardType, editor?: pxt.CodeCardEditorType): JSX.Element {
         const { youTubeId, youTubePlaylistId } = this.props;
         let icon = "file text";
         switch (type) {
             case "tutorial":
             case "example":
-            case "sharedExample":
                 icon = "xicon blocks"
                 if (editor) icon = `xicon ${editor}`;
                 break;
             case "codeExample":
                 icon = `xicon ${editor || "js"}`;
                 break;
+            case "sharedExample":
+                icon = "pencil"
+                if (editor) icon = `xicon ${editor}`;
+                break;
             case "forumUrl":
                 icon = "comments"
                 break;
@@ -951,7 +960,7 @@ export class ProjectsDetail extends data.Component<ProjectsDetailProps, Projects
                 if (youTubeId || youTubePlaylistId) icon = "youtube";
                 break;
         }
-        return this.isLink() && type != "forumExample" // TODO (shakao)  migrate forumurl to otherAction json in md
+        return this.isLink(type) && type != "forumExample" // TODO (shakao)  migrate forumurl to otherAction json in md
             ? <sui.Link role="button" className="link button attached" icon={icon} href={this.getUrl()} target="_blank" tabIndex={-1} />
             : <sui.Item role="button" className="button attached" icon={icon} onClick={onClick} tabIndex={-1} />
     }
@@ -969,7 +978,7 @@ export class ProjectsDetail extends data.Component<ProjectsDetailProps, Projects
         }
     }
 
-    protected getActionCard(text: string, type: string, onClick: any, autoFocus?: boolean, action?: pxt.CodeCardAction, key?: string): JSX.Element {
+    protected getActionCard(text: string, type: pxt.CodeCardType, onClick: any, autoFocus?: boolean, action?: pxt.CodeCardAction, key?: string): JSX.Element {
         const editor = this.getActionEditor(type, action);
         const title = this.getActionTitle(editor);
         return <div className={`card-action ui items ${editor || ""}`} key={key}>
@@ -991,7 +1000,7 @@ export class ProjectsDetail extends data.Component<ProjectsDetailProps, Projects
                     onClick={onClick}
                     onKeyDown={sui.fireClickOnEnter}
                     autoFocus={autoFocus}
-                    title={lf("Open in {0}", title)}
+                    title={lf("Open in {0}", title || lf("Editor"))}
                 />}
         </div>
     }
@@ -1092,9 +1101,10 @@ export class ProjectsDetail extends data.Component<ProjectsDetailProps, Projects
                     {this.getActionCard(clickLabel, cardType, this.handleDetailClick, true)}
                     {otherActions && otherActions.map((el, i) => {
                         let onClick = this.handleActionClick(el);
-                        return this.getActionCard(clickLabel, el.cardType || cardType, onClick, false, el, `action${i}`);
+                        let label = el.cardType ? this.getClickLabel(el.cardType) : clickLabel;
+                        return this.getActionCard(label, el.cardType || cardType, onClick, false, el, `action${i}`);
                     })}
-                    {cardType === "forumUrl" &&
+                    {cardType === "forumUrl" && (!otherActions || otherActions.length == 0) &&
                         // TODO (jwunderl) temporarily disabled in electron re: https://github.com/microsoft/pxt-arcade/issues/2346;
                         // reenable CORS issue is fixed.
                         !pxt.BrowserUtils.isPxtElectron() &&