Run Function App command fix

Author: gavin-aguiar

package-lock.json

@@ -2,7 +2,7 @@
     "name": "vscode-azurefunctions",
     "displayName": "Azure Functions",
     "description": "%azureFunctions.description%",
-    "version": "1.20.4-alpha.63",
+    "version": "1.20.4-alpha.78",
     "publisher": "ms-azuretools",
     "icon": "resources/azure-functions.png",
     "aiKey": "0c6ae279ed8443289764825290e4f9e2-1a736e7c-1324-4338-be46-fc2a58ae4d14-7255",

package.json

@@ -38,9 +38,11 @@ <h1>Create a new Azure Functions project</h1>
                     <div class="filter-chips" id="language-filters" role="radiogroup" aria-label="Filter by language">
                         <button class="filter-chip active" data-value="all" role="radio" aria-checked="true">All</button>
                         <button class="filter-chip" data-value="python" role="radio" aria-checked="false">Python</button>
-                        <button class="filter-chip" data-value="node" role="radio" aria-checked="false">Node.js</button>
-                        <button class="filter-chip" data-value="java" role="radio" aria-checked="false">Java</button>
                         <button class="filter-chip" data-value="dotnet" role="radio" aria-checked="false">.NET</button>
+                        <button class="filter-chip" data-value="typescript" role="radio" aria-checked="false">TypeScript</button>
+                        <button class="filter-chip" data-value="javascript" role="radio" aria-checked="false">JavaScript</button>
+                        <button class="filter-chip" data-value="java" role="radio" aria-checked="false">Java</button>
+                        <button class="filter-chip" data-value="go" role="radio" aria-checked="false">Go</button>
                         <button class="filter-chip" data-value="powershell" role="radio" aria-checked="false">PowerShell</button>
                     </div>
                 </div>

resources/webviews/templateGallery/index.html

@@ -413,13 +413,15 @@
 
         // Special badges
         let badgesHtml = categoriesHtml;
-        if (template.isPopular) {
-            badgesHtml += '<span class="popular-badge"><span class="codicon codicon-star-full"></span>Popular</span>';
-        }
         if (template.isNew) {
             badgesHtml += '<span class="new-badge"><span class="codicon codicon-sparkle"></span>New</span>';
         }
 
+        // Featured cards get accent border + corner star
+        if (template.isPopular) {
+            card.classList.add('featured');
+        }
+
         card.innerHTML = `
             <div class="card-languages">${languagesHtml}</div>
             <h3 class="card-title">${escapeHtml(template.displayName)}</h3>

resources/webviews/templateGallery/main.js

@@ -179,17 +179,17 @@ body {
 
 /* Language filter chips — idle state shows a colored left border as a hint */
 #language-filters .filter-chip[data-value="python"]     { border-left: 3px solid #3776AB; }
-#language-filters .filter-chip[data-value="javascript"] { border-left: 3px solid #F7DF1E; }
-#language-filters .filter-chip[data-value="typescript"] { border-left: 3px solid #166534; }
+#language-filters .filter-chip[data-value="javascript"] { border-left: 3px solid #166534; }
+#language-filters .filter-chip[data-value="typescript"] { border-left: 3px solid #F7DF1E; }
 #language-filters .filter-chip[data-value="java"]       { border-left: 3px solid #ED8B00; }
 #language-filters .filter-chip[data-value="dotnet"]     { border-left: 3px solid #512BD4; }
 #language-filters .filter-chip[data-value="powershell"] { border-left: 3px solid #012456; }
 #language-filters .filter-chip[data-value="go"]         { border-left: 3px solid #00ADD8; }
 
 /* Active state fills with the language color */
 #language-filters .filter-chip.active[data-value="python"]     { background-color: #3776AB; color: white; border-color: #3776AB; }
-#language-filters .filter-chip.active[data-value="javascript"] { background-color: #F7DF1E; color: #222;  border-color: #F7DF1E; }
-#language-filters .filter-chip.active[data-value="typescript"] { background-color: #166534; color: white; border-color: #166534; }
+#language-filters .filter-chip.active[data-value="javascript"] { background-color: #166534; color: white; border-color: #166534; }
+#language-filters .filter-chip.active[data-value="typescript"] { background-color: #F7DF1E; color: #222;  border-color: #F7DF1E; }
 #language-filters .filter-chip.active[data-value="java"]       { background-color: #ED8B00; color: white; border-color: #ED8B00; }
 #language-filters .filter-chip.active[data-value="dotnet"]     { background-color: #512BD4; color: white; border-color: #512BD4; }
 #language-filters .filter-chip.active[data-value="powershell"] { background-color: #012456; color: white; border-color: #012456; }
@@ -259,8 +259,8 @@ body {
 }
 
 .language-badge.python     { background-color: #3776AB; color: white; }
-.language-badge.javascript { background-color: #F7DF1E; color: #222; }
-.language-badge.typescript { background-color: #166534; color: white; }
+.language-badge.javascript { background-color: #166534; color: white; }
+.language-badge.typescript { background-color: #F7DF1E; color: #222; }
 .language-badge.java       { background-color: #ED8B00; color: white; }
 .language-badge.dotnet     { background-color: #512BD4; color: white; }
 .language-badge.powershell { background-color: #012456; color: white; }
@@ -299,10 +299,27 @@ body {
     font-size: 11px;
     border-radius: 4px;
     background-color: var(--vscode-textBlockQuote-background);
-    color: var(--vscode-textBlockQuote-border);
+    color: var(--vscode-descriptionForeground);
+}
+
+/* Featured card — accent border + corner star */
+.template-card.featured {
+    position: relative;
+    border-left: 3px solid var(--vscode-button-background);
+}
+
+.template-card.featured::after {
+    content: '\ea6a'; /* codicon star-full */
+    font-family: 'codicon';
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 16px;
+    color: #FFC107;
+    opacity: 0.85;
+    pointer-events: none;
 }
 
-.popular-badge,
 .new-badge {
     display: flex;
     align-items: center;
@@ -312,11 +329,6 @@ body {
     border-radius: 4px;
 }
 
-.popular-badge {
-    background-color: rgba(255, 193, 7, 0.15);
-    color: #FFC107;
-}
-
 .new-badge {
     background-color: rgba(76, 175, 80, 0.15);
     color: #4CAF50;

resources/webviews/templateGallery/styles.css

@@ -3,13 +3,15 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { AzureWizardPromptStep, type AzureWizardExecuteStep, type IAzureQuickPickItem, type IWizardOptions } from '@microsoft/vscode-azext-utils';
-import { type QuickPickOptions } from 'vscode';
+import { AzureWizardPromptStep, UserCancelledError, type AzureWizardExecuteStep, type IAzureQuickPickItem, type IWizardOptions } from '@microsoft/vscode-azext-utils';
+import { QuickPickItemKind, type QuickPickOptions } from 'vscode';
 import { ProjectLanguage, nodeDefaultModelVersion, nodeLearnMoreLink, nodeModels, pythonDefaultModelVersion, pythonLearnMoreLink, pythonModels, showBallerinaProjectCreationSetting } from '../../constants';
+import { ext } from '../../extensionVariables';
 import { localize } from '../../localize';
 import { TemplateSchemaVersion } from '../../templates/TemplateProviderBase';
 import { nonNullProp } from '../../utils/nonNull';
 import { getWorkspaceSetting } from '../../vsCodeConfig/settings';
+import { FunctionListStep } from '../createFunction/FunctionListStep';
 import { addInitVSCodeSteps } from '../initProjectForVSCode/InitVSCodeLanguageStep';
 import { type IProjectWizardContext } from './IProjectWizardContext';
 import { ProgrammingModelStep } from './ProgrammingModelStep';
@@ -20,14 +22,17 @@ import { PowerShellProjectCreateStep } from './ProjectCreateStep/PowerShellProje
 import { PythonProjectCreateStep } from './ProjectCreateStep/PythonProjectCreateStep';
 import { ScriptProjectCreateStep } from './ProjectCreateStep/ScriptProjectCreateStep';
 import { TypeScriptProjectCreateStep } from './ProjectCreateStep/TypeScriptProjectCreateStep';
-import { StartingPointStep } from './StartingPointStep';
 import { addBallerinaCreateProjectSteps } from './ballerinaSteps/addBallerinaCreateProjectSteps';
 import { DotnetRuntimeStep } from './dotnetSteps/DotnetRuntimeStep';
 import { addJavaCreateProjectSteps } from './javaSteps/addJavaCreateProjectSteps';
 import { MCPDownloadSnippetsExecuteStep } from './mcpServerSteps/MCPDownloadSnippetsExecuteStep';
 import { MCPDownloadSnippetsPromptStep } from './mcpServerSteps/MCPDownloadSnippetsPromptStep';
 import { MCPProjectCreateStep } from './mcpServerSteps/MCPProjectCreateStep';
 import { MCPServerLanguagePromptStep } from './mcpServerSteps/MCPServerLanguagePromptStep';
+import { TemplateGalleryPanel } from './TemplateGalleryPanel';
+
+// Sentinel value used to detect when the user picks "Browse Template Gallery…"
+const templateGalleryLanguage = 'TemplateGallery' as ProjectLanguage;
 
 export class NewProjectLanguageStep extends AzureWizardPromptStep<IProjectWizardContext> {
     public hideStepCount: boolean = true;
@@ -64,8 +69,25 @@ export class NewProjectLanguageStep extends AzureWizardPromptStep<IProjectWizard
             });
         }
 
+        // Add a separator and a "Browse Template Gallery…" option at the bottom
+        languagePicks.push(
+            { label: '', data: { language: templateGalleryLanguage }, kind: QuickPickItemKind.Separator },
+            {
+                label: `$(library) ${localize('browseTemplateGallery', 'Browse Template Gallery...')}`,
+                data: { language: templateGalleryLanguage },
+                suppressPersistence: true,
+            },
+        );
+
         const options: QuickPickOptions = { placeHolder: localize('selectProjectType', 'Select a project type') };
         const result = (await context.ui.showQuickPick(languagePicks, options)).data;
+
+        if (result.language === templateGalleryLanguage) {
+            TemplateGalleryPanel.createOrShow(ext.context.extensionUri);
+            context.telemetry.properties.flow = 'templateGalleryFromWizard';
+            throw new UserCancelledError('templateGallery');
+        }
+
         context.language = result.language;
         this.setTemplateSchemaVersion(context);
     }
@@ -138,11 +160,13 @@ export class NewProjectLanguageStep extends AzureWizardPromptStep<IProjectWizard
 
         const wizardOptions: IWizardOptions<IProjectWizardContext> = { promptSteps, executeSteps };
 
-        // Add StartingPointStep which handles both template and scratch paths
-        // For template path: shows template selection and clones project
-        // For scratch path: shows existing function trigger selection (FunctionListStep)
-        // Note: Java needs to fix this issue first: https://github.com/Microsoft/vscode-azurefunctions/issues/81
-        promptSteps.push(new StartingPointStep(this._templateId, this._functionSettings));
+        // All languages except Java support creating a function after creating a project
+        // Java needs to fix this issue first: https://github.com/Microsoft/vscode-azurefunctions/issues/81
+        promptSteps.push(new FunctionListStep({
+            isProjectWizard: true,
+            templateId: this._templateId,
+            functionSettings: this._functionSettings,
+        }));
 
         return wizardOptions;
     }

src/commands/createNewProject/NewProjectLanguageStep.ts

@@ -821,12 +821,12 @@ Return ONLY a valid JSON object with absolutely no other text, explanations, or
                     <div class="filter-chips" id="language-filters" role="radiogroup" aria-label="Filter by language">
                         <button class="filter-chip active" data-value="all" role="radio" aria-checked="true">All</button>
                         <button class="filter-chip" data-value="python" role="radio" aria-checked="false">Python</button>
-                        <button class="filter-chip" data-value="javascript" role="radio" aria-checked="false">JavaScript</button>
+                        <button class="filter-chip" data-value="dotnet" role="radio" aria-checked="false">.NET</button>
                         <button class="filter-chip" data-value="typescript" role="radio" aria-checked="false">TypeScript</button>
+                        <button class="filter-chip" data-value="javascript" role="radio" aria-checked="false">JavaScript</button>
                         <button class="filter-chip" data-value="java" role="radio" aria-checked="false">Java</button>
-                        <button class="filter-chip" data-value="dotnet" role="radio" aria-checked="false">.NET</button>
-                        <button class="filter-chip" data-value="powershell" role="radio" aria-checked="false">PowerShell</button>
                         <button class="filter-chip" data-value="go" role="radio" aria-checked="false">Go</button>
+                        <button class="filter-chip" data-value="powershell" role="radio" aria-checked="false">PowerShell</button>
                     </div>
                 </div>