Skip to content

Commit

Permalink
Experimental Language Toggle
Browse files Browse the repository at this point in the history
  • Loading branch information
Allison Gruninger committed Jan 23, 2018
1 parent 8fab5a3 commit 77ae154
Show file tree
Hide file tree
Showing 5 changed files with 83 additions and 16 deletions.
10 changes: 10 additions & 0 deletions AzureFunctions.AngularClient/src/app/function/function-new/function-new.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,16 @@ <h2>{{ 'functionNew_chooseTemplate' | translate }}</h2>
(value)="onScenarioChanged($event)"
attr.aria-label="{{'templatePicker_scenario' | translate}}">
</drop-down>

{{ 'experimentalLanguageSupport' | translate }}
<slide-toggle class="language-toggle"
[on]="showExperimentalLanguages"
[isCommand]="true"
[name]="'experimentalLanguageSupport' | translate"
[ariaLabelFormat]="'nameAndStateName'"
(change)="switchExperimentalLanguagesOption()">
</slide-toggle>

</div>

<div class="selectionContainer" #container>
Expand Down
4 changes: 4 additions & 0 deletions AzureFunctions.AngularClient/src/app/function/function-new/function-new.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,10 @@ drop-down{
padding-right: 25px;
}

.language-toggle {
padding-left: 7px;
}

.sidebar-container{
height: 100%;
width: 100%;
Expand Down
81 changes: 65 additions & 16 deletions AzureFunctions.AngularClient/src/app/function/function-new/function-new.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@ export interface CreateCard extends Template {
icon: string;
barcolor: string;
focusable: boolean;
allLanguages: string[];
supportedLanguages: string[];
}

@Component({
Expand Down Expand Up @@ -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<string>[] = [];
public supportedLanguages: DropDownElement<string>[] = [];

public readonly allExperimentalLanguages = ['Bash', 'Batch', 'PHP', 'PowerShell', 'Python', 'TypeScript' ];

public createCardStyles = {
'blob': { color: '#1E5890', barcolor: '#DAE6EF', icon: 'image/blob.svg' },
Expand All @@ -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;
Expand Down Expand Up @@ -204,7 +211,7 @@ export class FunctionNewComponent extends FunctionAppContextComponent implements
});

if (index === -1) {
const dropDownElement: any = {
const dropDownElement: DropDownElement<string> = {
displayLabel: c,
value: c
};
Expand All @@ -225,14 +232,20 @@ 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}`,
value: template.id,
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) ?
Expand All @@ -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}`);
}
Expand All @@ -266,9 +283,26 @@ export class FunctionNewComponent extends FunctionAppContextComponent implements

this._sortCategories();

this.languages = this.languages.sort((a: DropDownElement<string>, b: DropDownElement<string>) => {
// 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<string>, b: DropDownElement<string>) => {
return a.displayLabel > b.displayLabel ? 1 : -1;
});
this.supportedLanguages = this.supportedLanguages.sort((a: DropDownElement<string>, b: DropDownElement<string>) => {
return a.displayLabel > b.displayLabel ? 1 : -1;
});
this.languages = this.supportedLanguages;

// order preference defined in constants.ts
this.createCards.sort((a: Template, b: Template) => {
Expand All @@ -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 = [];
Expand All @@ -312,7 +354,7 @@ export class FunctionNewComponent extends FunctionAppContextComponent implements
});

if (index === -1) {
const dropDownElement: any = {
const dropDownElement: DropDownElement<string> = {
displayLabel: c,
value: c
};
Expand All @@ -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<string> = {
displayLabel: this._translateService.instant('temp_category_all'),
value: this._translateService.instant('temp_category_all')
};
Expand Down
1 change: 1 addition & 0 deletions AzureFunctions.AngularClient/src/app/shared/models/portal-resources.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
}
3 changes: 3 additions & 0 deletions AzureFunctions/ResourcesPortal/Resources.resx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2590,4 +2590,7 @@ Set to "External URL" to use an API definition that is hosted elsewhere.</value>
<data name="swaggerDefinition_notSupportedForBeta" xml:space="preserve">
<value>Function API definition (Swagger) feature is not supported for beta runtime currently.</value>
</data>
<data name="experimentalLanguageSupport" xml:space="preserve">
<value>Experimental Language Support:</value>
</data>
</root>

0 comments on commit 77ae154

Please sign in to comment.