Quickstart: more templates option

client/src/app/function/function-new/function-new.component.ts

@@ -1,4 +1,4 @@
-import { LogCategories, Order, Regex, KeyCodes, ScenarioIds, Constants, WorkerRuntimeLanguages, Links } from './../../shared/models/constants';
+import { LogCategories, Order, Regex, KeyCodes, ScenarioIds, Constants, WorkerRuntimeLanguages, Links, SiteTabIds } from './../../shared/models/constants';
 import { Dom } from './../../shared/Utilities/dom';
 import { Binding } from './../../shared/models/binding';
 import { Template } from './../../shared/models/template-picker';
@@ -26,6 +26,7 @@ import { ScenarioService } from '../../shared/services/scenario/scenario.service
 import { ArmObj } from '../../shared/models/arm/arm-obj';
 import { ApplicationSettings } from '../../shared/models/arm/application-settings';
 import { SiteService } from '../../shared/services/site.service';
+import { BroadcastEvent } from 'app/shared/models/broadcast-event';
 
 interface CategoryOrder {
     name: string;
@@ -784,7 +785,15 @@ export class FunctionNewComponent extends FunctionAppContextComponent implements
     }
 
     quickstart() {
-        this.functionsNode.openCreateDashboard(DashboardType.CreateFunctionQuickstartDashboard);
+        if (this.runtimeVersion === 'V1') {
+            this.functionsNode.openCreateDashboard(DashboardType.CreateFunctionQuickstartDashboard);
+        } else {
+            this._broadcastService.broadcastEvent(BroadcastEvent.OpenTab, SiteTabIds.quickstart);
+            this._broadcastService.broadcastEvent(BroadcastEvent.TreeUpdate, {
+                operation: 'navigate',
+                data: 'appNode',
+            });
+        }
     }
 
     onKeyPressQuick(event: KeyboardEvent) {

client/src/app/shared/models/broadcast-event.ts

@@ -39,7 +39,7 @@ export interface BusyStateEvent {
 }
 
 export interface TreeUpdateEvent {
-    operation: 'add' | 'remove' | 'removeChild' | 'update' | 'navigate' | 'newFunction';
+    operation: 'add' | 'remove' | 'removeChild' | 'update' | 'navigate' | 'newFunction' | 'moreTemplates';
     resourceId: string;
     data?: any;
 }

client/src/app/site/quickstart/step-create-portal-function/step-create-portal-function.component.html

@@ -13,5 +13,5 @@
 </div>
 <div class="footer">
     <button type="button" class="custom-button form-button" previousStep>{{'back' | translate}}</button>
-    <button type="button" class="custom-button form-button" *ngIf="selectedPortalTemplateCard" (click)="create()">{{'create' | translate}}</button>
+    <button type="button" class="custom-button form-button" *ngIf="selectedPortalTemplateCard" (click)="finish()">{{finishButtonText}}</button>
 </div>

client/src/app/site/quickstart/step-create-portal-function/step-create-portal-function.component.ts

@@ -24,30 +24,40 @@ import { errorIds } from 'app/shared/models/error-ids';
 })
 export class StepCreatePortalFunctionComponent implements OnInit, OnDestroy {
 
-    public readonly portalTemplateCards: PortalTemplateCard[] = [
-        {
-            id: 'HttpTrigger',
-            name: this._translateService.instant(PortalResources.intro_webHook),
-            icon: 'image/http.svg',
-            color: '#731DDA',
-            description: this._translateService.instant(PortalResources.httpCardDescription),
-        },
-        {
-            id: 'TimerTrigger',
-            name: this._translateService.instant(PortalResources.intro_timer),
-            icon: 'image/timer.svg',
-            color: '#3C86FF',
-            description: this._translateService.instant(PortalResources.timerCardDescription),
-        },
-    ];
+    public readonly httpTriggerCard: PortalTemplateCard = {
+        id: 'HttpTrigger',
+        name: this._translateService.instant(PortalResources.intro_webHook),
+        icon: 'image/http.svg',
+        color: '#731DDA',
+        description: this._translateService.instant(PortalResources.httpCardDescription),
+    };
 
+    public readonly timerTriggerCard: PortalTemplateCard = {
+        id: 'TimerTrigger',
+        name: this._translateService.instant(PortalResources.intro_timer),
+        icon: 'image/timer.svg',
+        color: '#3C86FF',
+        description: this._translateService.instant(PortalResources.timerCardDescription),
+    };
+
+    public readonly moreTemplatesCard: PortalTemplateCard = {
+        id: 'MoreTemplates',
+        name: this._translateService.instant(PortalResources.moreTemplatesTitle),
+        icon: 'image/other.svg',
+        color: '#000000',
+        description: this._translateService.instant(PortalResources.moreTemplatesDescription),
+    };
+
+    public portalTemplateCards: PortalTemplateCard[];
     public selectedPortalTemplateCard: PortalTemplateCard = null;
     public bindingManager: BindingManager = new BindingManager();
     public context: FunctionAppContext;
+    public isLinux: boolean;
     public workerRuntime: workerRuntimeOptions;
     public language: string;
     public templates: FunctionTemplate[];
     public functionsInfo: FunctionInfo[];
+    public finishButtonText: string;
 
     private _ngUnsubscribe = new Subject();
 
@@ -59,8 +69,10 @@ export class StepCreatePortalFunctionComponent implements OnInit, OnDestroy {
         private _broadcastService: BroadcastService) {
 
         this.context = this._wizardService.context.value;
+        this.isLinux = this._wizardService.isLinux.value;
         this.workerRuntime = this._wizardService.workerRuntime.value;
         this.language =  this._getLanguage();
+        this.portalTemplateCards = this._getPortalTemplateCards();
 
         this._wizardService.context.statusChanges
             .takeUntil(this._ngUnsubscribe)
@@ -74,6 +86,13 @@ export class StepCreatePortalFunctionComponent implements OnInit, OnDestroy {
                 this.workerRuntime = this._wizardService.workerRuntime.value;
                 this.language = this._getLanguage();
             });
+
+        this._wizardService.isLinux.statusChanges
+            .takeUntil(this._ngUnsubscribe)
+            .subscribe(() => {
+                this.isLinux = this._wizardService.isLinux.value;
+                this.portalTemplateCards = this._getPortalTemplateCards();
+            });
     }
 
     ngOnInit() {
@@ -88,10 +107,19 @@ export class StepCreatePortalFunctionComponent implements OnInit, OnDestroy {
 
     public selectPortalTemplate(card: PortalTemplateCard) {
         this.selectedPortalTemplateCard = card;
+        this._setButtonText();
         this._wizardService.portalTemplate.setValue(card.id);
     }
 
-    create() {
+    public finish() {
+        if (this.selectedPortalTemplateCard.id === 'MoreTemplates') {
+            this._navigateToMoreTempaltes();
+        } else {
+            this._createFunction();
+        }
+    }
+
+    private _createFunction() {
         if (!this._globalStateService.IsBusy) {
 
             this._globalStateService.setBusyState();
@@ -127,6 +155,26 @@ export class StepCreatePortalFunctionComponent implements OnInit, OnDestroy {
         }
     }
 
+    private _getPortalTemplateCards(): PortalTemplateCard[] {
+        if (this.isLinux) {
+            return [this.httpTriggerCard, this.timerTriggerCard];
+        }
+        return [this.httpTriggerCard, this.timerTriggerCard, this.moreTemplatesCard];
+    }
+
+    private _navigateToMoreTempaltes() {
+        this._broadcastService.broadcastEvent(BroadcastEvent.CloseTab, SiteTabIds.quickstart);
+        this._broadcastService.broadcastEvent(BroadcastEvent.TreeUpdate, {operation: 'moreTemplates'});
+    }
+
+    private _setButtonText() {
+        if (this.selectedPortalTemplateCard.id === 'MoreTemplates') {
+            this.finishButtonText = this._translateService.instant(PortalResources.moreTemplatesButton);
+        } else {
+            this.finishButtonText = this._translateService.instant(PortalResources.create);
+        }
+    }
+
     private _getLanguage(): string {
         return WorkerRuntimeLanguages[this.workerRuntime] === 'C#' ? 'CSharp' : WorkerRuntimeLanguages[this.workerRuntime];
     }

client/src/app/site/quickstart/wizard-logic/quickstart-models.ts

@@ -14,5 +14,5 @@ export class WizardForm {
 
 export type devEnvironmentOptions = 'vs' | 'vscode' | 'coretools' | 'maven' | 'portal';
 export type workerRuntimeOptions = 'dotnet' | 'node' | 'nodejs' | 'python' | 'java';
-export type portalTemplateOptions = 'HttpTrigger' | 'TimerTrigger' | 'QueueTrigger';
+export type portalTemplateOptions = 'HttpTrigger' | 'TimerTrigger' | 'MoreTemplates';
 export type deploymentOptions = 'vsDirectPublish' | 'vscodeDirectPublish' | 'coretoolsDirectPublish' | 'mavenDirectPublish' | 'deploymentCenter';

client/src/app/tree-view/app-node.ts

@@ -144,6 +144,8 @@ export class AppNode extends TreeNode
         .subscribe(event => {
             if (event.operation === 'newFunction') {
                 (<FunctionsNode>this.children[0]).addChild(event.data);
+            } else if (event.operation === 'moreTemplates') {
+                (<FunctionsNode>this.children[0]).openCreateDashboard(DashboardType.CreateFunctionDashboard);
             }
         });
 

server/Resources/Resources.resx

@@ -4135,6 +4135,15 @@ Set to "External URL" to use an API definition that is hosted elsewhere.</value>
   <data name="singleContainerPreviewTitle" xml:space="preserve">
     <value>Single Container (Preview)</value>
   </data>
+  <data name="moreTemplatesTitle" xml:space="preserve">
+    <value>More templates...</value>
+  </data>
+  <data name="moreTemplatesDescription" xml:space="preserve">
+    <value>View all templates available to this function app</value>
+  </data>
+  <data name="moreTemplatesButton" xml:space="preserve">
+    <value>Finish and view templates</value>
+  </data>
   <data name="dockerComposeSample1TitleLinux" xml:space="preserve">
     <value>ASP.NET Core with SQL Server</value>
   </data>