From 77ae154fe15369492632f00952a3989d31ea9176 Mon Sep 17 00:00:00 2001 From: Allison Gruninger Date: Mon, 22 Jan 2018 17:15:26 -0800 Subject: [PATCH] Experimental Language Toggle --- .../function-new/function-new.component.html | 10 +++ .../function-new/function-new.component.scss | 4 + .../function-new/function-new.component.ts | 81 +++++++++++++++---- .../src/app/shared/models/portal-resources.ts | 1 + AzureFunctions/ResourcesPortal/Resources.resx | 3 + 5 files changed, 83 insertions(+), 16 deletions(-) diff --git a/AzureFunctions.AngularClient/src/app/function/function-new/function-new.component.html b/AzureFunctions.AngularClient/src/app/function/function-new/function-new.component.html index f2fd22dcb4..252713a768 100644 --- a/AzureFunctions.AngularClient/src/app/function/function-new/function-new.component.html +++ b/AzureFunctions.AngularClient/src/app/function/function-new/function-new.component.html @@ -44,6 +44,16 @@

{{ 'functionNew_chooseTemplate' | translate }}

(value)="onScenarioChanged($event)" attr.aria-label="{{'templatePicker_scenario' | translate}}"> + + {{ 'experimentalLanguageSupport' | translate }} + + +
diff --git a/AzureFunctions.AngularClient/src/app/function/function-new/function-new.component.scss b/AzureFunctions.AngularClient/src/app/function/function-new/function-new.component.scss index 03bef979c0..559cb82aba 100644 --- a/AzureFunctions.AngularClient/src/app/function/function-new/function-new.component.scss +++ b/AzureFunctions.AngularClient/src/app/function/function-new/function-new.component.scss @@ -174,6 +174,10 @@ drop-down{ padding-right: 25px; } +.language-toggle { + padding-left: 7px; +} + .sidebar-container{ height: 100%; width: 100%; diff --git a/AzureFunctions.AngularClient/src/app/function/function-new/function-new.component.ts b/AzureFunctions.AngularClient/src/app/function/function-new/function-new.component.ts index 5445e024f3..d1474a483a 100644 --- a/AzureFunctions.AngularClient/src/app/function/function-new/function-new.component.ts +++ b/AzureFunctions.AngularClient/src/app/function/function-new/function-new.component.ts @@ -36,6 +36,8 @@ export interface CreateCard extends Template { icon: string; barcolor: string; focusable: boolean; + allLanguages: string[]; + supportedLanguages: string[]; } @Component({ @@ -63,6 +65,11 @@ export class FunctionNewComponent extends FunctionAppContextComponent implements public createCards: CreateCard[] = []; public createFunctionCard: CreateCard; public createFunctionLanguage: string = null; + public showExperimentalLanguages = false; + public allLanguages: DropDownElement[] = []; + public supportedLanguages: DropDownElement[] = []; + + public readonly allExperimentalLanguages = ['Bash', 'Batch', 'PHP', 'PowerShell', 'Python', 'TypeScript' ]; public createCardStyles = { 'blob': { color: '#1E5890', barcolor: '#DAE6EF', icon: 'image/blob.svg' }, @@ -86,28 +93,28 @@ export class FunctionNewComponent extends FunctionAppContextComponent implements private _orderedCategoties: CategoryOrder[] = [{ - name: this._translateService.instant('temp_category_core'), + name: this._translateService.instant('temp_category_all'), index: 0 }, + { + name: this._translateService.instant('temp_category_core'), + index: 1 + }, { name: this._translateService.instant('temp_category_api'), - index: 1, + index: 2 }, { name: this._translateService.instant('temp_category_dataProcessing'), - index: 2, + index: 3 }, { name: this._translateService.instant('temp_category_samples'), - index: 3, + index: 4 }, { name: this._translateService.instant('temp_category_experimental'), - index: 4, - }, - { - name: this._translateService.instant('temp_category_all'), - index: 1000, + index: 5, }]; @ViewChild('container') createCardContainer: ElementRef; @@ -204,7 +211,7 @@ export class FunctionNewComponent extends FunctionAppContextComponent implements }); if (index === -1) { - const dropDownElement: any = { + const dropDownElement: DropDownElement = { displayLabel: c, value: c }; @@ -225,6 +232,10 @@ export class FunctionNewComponent extends FunctionAppContextComponent implements }); // if the card doesn't exist, create it based off the template, else add information to the preexisting card + const isExperimental = this.allExperimentalLanguages.find((l) => { + return l === template.metadata.language; + }); + if (templateIndex === -1) { this.createCards.push({ name: `${template.metadata.name}`, @@ -232,7 +243,9 @@ export class FunctionNewComponent extends FunctionAppContextComponent implements description: template.metadata.description, enabledInTryMode: template.metadata.enabledInTryMode, AADPermissions: template.metadata.AADPermissions, - languages: [`${template.metadata.language}`], + languages: isExperimental ? [] : [`${template.metadata.language}`], + supportedLanguages: isExperimental ? [] : [`${template.metadata.language}`], + allLanguages: [`${template.metadata.language}`], categories: template.metadata.category, ids: [`${template.id}`], icon: this.createCardStyles.hasOwnProperty(template.metadata.categoryStyle) ? @@ -244,7 +257,11 @@ export class FunctionNewComponent extends FunctionAppContextComponent implements focusable: false }); } else { - this.createCards[templateIndex].languages.push(`${template.metadata.language}`); + if (!isExperimental) { + this.createCards[templateIndex].languages.push(`${template.metadata.language}`); + this.createCards[templateIndex].supportedLanguages.push(`${template.metadata.language}`); + } + this.createCards[templateIndex].allLanguages.push(`${template.metadata.language}`); this.createCards[templateIndex].categories = this.createCards[templateIndex].categories.concat(template.metadata.category); this.createCards[templateIndex].ids.push(`${template.id}`); } @@ -266,9 +283,26 @@ export class FunctionNewComponent extends FunctionAppContextComponent implements this._sortCategories(); - this.languages = this.languages.sort((a: DropDownElement, b: DropDownElement) => { + // sort out supported languages and set those as default language options in drop-down + this.languages.forEach(language => { + const isExperimental = this.allExperimentalLanguages.find((l) => { + return l === language.value; + }); + if (!isExperimental) { + this.supportedLanguages.push({ + displayLabel: language.displayLabel, + value: language.value + }); + } + }); + + this.allLanguages = this.languages.sort((a: DropDownElement, b: DropDownElement) => { + return a.displayLabel > b.displayLabel ? 1 : -1; + }); + this.supportedLanguages = this.supportedLanguages.sort((a: DropDownElement, b: DropDownElement) => { return a.displayLabel > b.displayLabel ? 1 : -1; }); + this.languages = this.supportedLanguages; // order preference defined in constants.ts this.createCards.sort((a: Template, b: Template) => { @@ -293,6 +327,14 @@ export class FunctionNewComponent extends FunctionAppContextComponent implements }); } + switchExperimentalLanguagesOption() { + this.showExperimentalLanguages = !this.showExperimentalLanguages; + this.createCards.forEach(card => { + card.languages = this.showExperimentalLanguages ? card.allLanguages : card.supportedLanguages; + }); + this.languages = this.showExperimentalLanguages ? this.allLanguages : this.supportedLanguages; + } + onLanguageChanged(language: string) { this.language = language; this.categories = []; @@ -312,7 +354,7 @@ export class FunctionNewComponent extends FunctionAppContextComponent implements }); if (index === -1) { - const dropDownElement: any = { + const dropDownElement: DropDownElement = { displayLabel: c, value: c }; @@ -323,11 +365,18 @@ export class FunctionNewComponent extends FunctionAppContextComponent implements dropDownElement.default = true; } - this.categories.push(dropDownElement); + // only display the experimental category if experimental languages are shown + if (c === this._translateService.instant('temp_category_experimental')) { + if (this.showExperimentalLanguages) { + this.categories.push(dropDownElement); + } + } else { + this.categories.push(dropDownElement); + } } })); - const dropDownElement: any = { + const dropDownElement: DropDownElement = { displayLabel: this._translateService.instant('temp_category_all'), value: this._translateService.instant('temp_category_all') }; diff --git a/AzureFunctions.AngularClient/src/app/shared/models/portal-resources.ts b/AzureFunctions.AngularClient/src/app/shared/models/portal-resources.ts index 3b638bc7e6..369099cf28 100644 --- a/AzureFunctions.AngularClient/src/app/shared/models/portal-resources.ts +++ b/AzureFunctions.AngularClient/src/app/shared/models/portal-resources.ts @@ -824,4 +824,5 @@ public static entity: string = "entity"; public static entityColon: string = "entityColon"; public static swaggerDefinition_notSupportedForBeta: string = "swaggerDefinition_notSupportedForBeta"; + public static experimentalLanguageSupport: string = "experimentalLanguageSupport"; } \ No newline at end of file diff --git a/AzureFunctions/ResourcesPortal/Resources.resx b/AzureFunctions/ResourcesPortal/Resources.resx index bf96c72e9b..7d47a5a279 100644 --- a/AzureFunctions/ResourcesPortal/Resources.resx +++ b/AzureFunctions/ResourcesPortal/Resources.resx @@ -2590,4 +2590,7 @@ Set to "External URL" to use an API definition that is hosted elsewhere. Function API definition (Swagger) feature is not supported for beta runtime currently. + + Experimental Language Support: + \ No newline at end of file