Some standalone and other fixes

AzureFunctions.AngularClient/src/app/binding-input/binding-input.component.html

@@ -16,6 +16,18 @@
              (selectItem)="finishDialogPicker($event)">
 </app-setting>
 
+<storage *ngIf="pickerName === 'Storage'"
+  [functionApp]="functionApp"
+  (close)="closePicker($event)"
+  (selectItem)="finishDialogPicker($event)">
+</storage>
+
+<sql *ngIf="pickerName === 'Sql'"
+  [functionApp]="functionApp"
+  (close)="closePicker($event)"
+  (selectItem)="finishDialogPicker($event)">
+</sql>
+
 <notification-hub *ngIf="pickerName === 'NotificationHub'"
              [functionApp]="functionApp"
              (close)="closePicker($event)"

AzureFunctions.AngularClient/src/app/binding-input/binding-input.component.ts

@@ -12,7 +12,9 @@ import { DropDownElement } from '../shared/models/drop-down-element';
 import { PortalResources } from '../shared/models/portal-resources';
 import { GlobalStateService } from '../shared/services/global-state.service';
 import { FunctionApp } from '../shared/function-app';
-import { CacheService } from './../shared/services/cache.service';
+import { CacheService } from '../shared/services/cache.service';
+import { ScenarioService } from '../shared/services/scenario/scenario.service';
+import { ScenarioIds } from '../shared/models/constants';
 
 @Component({
     selector: 'binding-input',
@@ -31,6 +33,7 @@ export class BindingInputComponent {
     public appSettingValue: string;
     private _input: BindingInputBase<any>;
     private showTryView: boolean;
+    private useCustomFunctionInputPicker: boolean;    
     @Input() public functionApp: FunctionApp;
 
     constructor(
@@ -39,7 +42,9 @@ export class BindingInputComponent {
         private _userService: UserService,
         private _translateService: TranslateService,
         private _globalStateService: GlobalStateService,
-        private _cacheService: CacheService) {
+        private _cacheService: CacheService,
+        private _scenarioService: ScenarioService) {
+        this.useCustomFunctionInputPicker =  this._scenarioService.checkScenario(ScenarioIds.headerOnTopOfSideNav).status === 'enabled';            
         this.showTryView = this._globalStateService.showTryView;
     }
 
@@ -75,30 +80,35 @@ export class BindingInputComponent {
         let bladeInput = null;
         switch (input.resource) {
             case ResourceType.Storage:
-                this.pickerName = 'StorageAccountPickerBlade';
+                this.pickerName = this.useCustomFunctionInputPicker ? 'Storage' : 'StorageAccountPickerBlade';
                 break;
             case ResourceType.EventHub:
-                this.pickerName = 'EventHub';
+                this.pickerName = this.useCustomFunctionInputPicker ? 'AppSetting' : 'EventHub';
                 break;
             case ResourceType.ServiceBus:
-                this.pickerName = 'ServiceBus';
+                this.pickerName = this.useCustomFunctionInputPicker ? 'AppSetting' : 'ServiceBus';
                 break;
             case ResourceType.NotificationHub:
-                this.pickerName = 'NotificationHub';
+                this.pickerName = this.useCustomFunctionInputPicker ? 'AppSetting' : 'NotificationHub';
                 break;
             case ResourceType.AppSetting:
                 this.pickerName = 'AppSetting';
                 break;
             case ResourceType.DocumentDB:
-                this.pickerName = 'DocDbPickerBlade';
+                this.pickerName = this.useCustomFunctionInputPicker ? 'AppSetting' : 'DocDbPickerBlade';
                 break;
             case ResourceType.ServiceBus:
-                this.pickerName = 'NotificationHubPickerBlade';
+                this.pickerName = this.useCustomFunctionInputPicker ? 'AppSetting' : 'NotificationHubPickerBlade';
                 break;
             case ResourceType.ApiHub:
                 bladeInput = input.metadata;
                 bladeInput.bladeName = 'CreateDataConnectionBlade';
                 break;
+            case ResourceType.Sql:
+                this.pickerName = this.useCustomFunctionInputPicker ? 'Sql' : 'AppSetting';
+                break;
+            default:
+                this.pickerName = 'AppSetting';
         }
 
         // for tests

AzureFunctions.AngularClient/src/app/binding/binding.component.ts

@@ -790,6 +790,15 @@ export class BindingComponent {
                     }
                 }
                 break;
+            case ResourceType.Sql:
+                for (const key in this._appSettings) {
+                    const value = this._appSettings[key].toLowerCase();
+                    if (value.toLocaleLowerCase().indexOf('initial catalog=') > -1 && value.indexOf('password=') > -1) {
+                        result.push(key);
+                    }
+                }
+                break;
+
         }
         return result;
     }

AzureFunctions.AngularClient/src/app/download-function-app-content/download-function-app-content.component.html

@@ -7,13 +7,19 @@ <h3>{{'downloadFunctionAppContent' | translate}}</h3>
             </div>
 
             <div class="modal-body">
-                <div>
+                <!-- when vsproj option is disabled we dont need to show radio options as there are only two options-->
+                <div check-scenario="DownloadWithVsProj" 
+                     [cs-input]="{}"
+                     cs-enabledByDefault="true">
                     <radio-selector [defaultValue]="currentDownloadOption"
                                     [options]="downloadOptions"
                                     (value)="currentDownloadOption = $event">
                     </radio-selector>
                 </div>
-                <div id="app-settings-checkbox">
+                <div check-scenario="DownloadWithAppSettings"
+                     [cs-input]="{}"
+                     cs-enabledByDefault="true"
+                     id="app-settings-checkbox">
                     <input type="checkbox" [(ngModel)]="includeAppSettings" />
                     <label>{{ 'downloadFunctionAppContent_includeAppSettings' | translate }}</label>
                     <pop-over [position]="'bottom'" [message]="'downloadFunctionAppContent_includeAppSettingsHelp' | translate">

AzureFunctions.AngularClient/src/app/function/binding-input-v2/binding-input-v2.component.html

@@ -16,6 +16,17 @@
              (selectItem)="finishDialogPicker($event)">
 </app-setting>
 
+<storage *ngIf="pickerName === 'Storage'"
+  [functionApp]="functionApp"
+  (close)="closePicker($event)"
+  (selectItem)="finishDialogPicker($event)">
+</storage>
+
+<sql *ngIf="pickerName === 'Sql'"
+  [functionApp]="functionApp"
+  (close)="closePicker($event)"
+  (selectItem)="finishDialogPicker($event)">
+</sql>
 <tooltip-content #freeAccountTooltip>
   <p>
     {{ 'tryNow_FreeAccountToolTip' | translate }}
@@ -93,12 +104,12 @@
 
     <ng-container *ngIf="!!input.errorText && !input.isValid && !input.okEmpty">
       <span class="fa fa-exclamation input-error-adjust"></span>
-      <div class="input-show-error" tabindex="0">{{input.errorText}}</div>
+      <div class="input-show-error" tabindex="0" [innerHTML]="input.errorText"></div>
     </ng-container>
 
     <ng-container *ngIf="!!input.errorText && input.isValid">
       <span class="fa fa-exclamation input-warning-adjust"></span>
-      <div class="input-show-warning" tabindex="0">{{input.errorText}}</div>
+      <div class="input-show-warning" tabindex="0" [innerHTML]="input.errorText"></div>
     </ng-container>
 
     <div *ngIf="description && !input.errorText">
@@ -126,12 +137,12 @@
 
     <ng-container *ngIf="!!input.errorText && !input.isValid && !input.okEmpty">
       <span class="fa fa-exclamation input-error-adjust"></span>
-      <div class="input-show-error" tabindex="0">{{input.errorText}}</div>
+      <div class="input-show-error" tabindex="0" [innerHTML]="input.errorText"></div>
     </ng-container>
 
     <ng-container *ngIf="!!input.errorText && input.isValid">
       <span class="fa fa-exclamation input-warning-adjust"></span>
-      <div class="input-show-warning" tabindex="0">{{input.errorText}}</div>
+      <div class="input-show-warning" tabindex="0" [innerHTML]="input.errorText"></div>
     </ng-container>
   </div>
 

AzureFunctions.AngularClient/src/app/function/binding-input-v2/binding-input-v2.component.ts

@@ -15,6 +15,8 @@ import { PortalResources } from '../../shared/models/portal-resources';
 import { GlobalStateService } from '../../shared/services/global-state.service';
 import { FunctionApp } from '../../shared/function-app';
 import { CacheService } from './../../shared/services/cache.service';
+import { ScenarioService } from '../../shared/services/scenario/scenario.service';
+import { ScenarioIds } from '../../shared/models/constants';
 
 @Component({
     selector: 'binding-input-v2',
@@ -35,6 +37,7 @@ export class BindingInputV2Component {
     public showAppSettingValue = false;
     private _input: BindingInputBase<any>;
     private showTryView: boolean;
+    private useCustomFunctionInputPicker: boolean;
     @Input() public functionApp: FunctionApp;
 
     constructor(
@@ -43,7 +46,9 @@ export class BindingInputV2Component {
         private _userService: UserService,
         private _translateService: TranslateService,
         private _globalStateService: GlobalStateService,
-        private _cacheService: CacheService) {
+        private _cacheService: CacheService,
+        private _scenarioService: ScenarioService) {
+        this.useCustomFunctionInputPicker =  this._scenarioService.checkScenario(ScenarioIds.headerOnTopOfSideNav).status === 'enabled';
         this.showTryView = this._globalStateService.showTryView;
     }
 
@@ -82,27 +87,32 @@ export class BindingInputV2Component {
         let bladeInput = null;
         switch (input.resource) {
             case ResourceType.Storage:
-                this.pickerName = 'StorageAccountPickerBlade';
+                this.pickerName = this.useCustomFunctionInputPicker ? 'Storage' : 'StorageAccountPickerBlade';
                 break;
             case ResourceType.EventHub:
-                this.pickerName = 'EventHub';
+                this.pickerName = this.useCustomFunctionInputPicker ? 'AppSetting' : 'EventHub';
                 break;
             case ResourceType.ServiceBus:
-                this.pickerName = 'ServiceBus';
+                this.pickerName = this.useCustomFunctionInputPicker ? 'AppSetting' : 'ServiceBus';
                 break;
             case ResourceType.AppSetting:
                 this.pickerName = 'AppSetting';
                 break;
             case ResourceType.DocumentDB:
-                this.pickerName = 'DocDbPickerBlade';
+                this.pickerName = this.useCustomFunctionInputPicker ? 'AppSetting' : 'DocDbPickerBlade';
                 break;
             case ResourceType.ServiceBus:
-                this.pickerName = 'NotificationHubPickerBlade';
+                this.pickerName = this.useCustomFunctionInputPicker ? 'AppSetting' : 'NotificationHubPickerBlade';
                 break;
             case ResourceType.ApiHub:
                 bladeInput = input.metadata;
                 bladeInput.bladeName = 'CreateDataConnectionBlade';
                 break;
+            case ResourceType.Sql:
+                this.pickerName = this.useCustomFunctionInputPicker ? 'Sql' : 'AppSetting';
+                break;
+            default:
+                this.pickerName = 'AppSetting';
         }
 
         // for tests
@@ -277,6 +287,8 @@ export class BindingInputV2Component {
         }
         picker.inProcess = false;
         this._globalStateService.clearBusyState();
+        this.pickerInputs = picker.items
+        .map(p => ({ displayLabel: p, value: p}));
     }
 
     setBottomDescription(id: string) {

AzureFunctions.AngularClient/src/app/function/binding-v2/binding-v2.component.ts

@@ -775,6 +775,14 @@ export class BindingV2Component {
                     }
                 }
                 break;
+            case ResourceType.Sql:
+                for (const key in this._appSettings) {
+                    const value = this._appSettings[key].toLowerCase();
+                    if (value.toLocaleLowerCase().indexOf('initial catalog=') > -1 && value.indexOf('password=') > -1) {
+                        result.push(key);
+                    }
+                }
+                break;
         }
         return result;
     }

AzureFunctions.AngularClient/src/app/function/function-new/function-new.component.html

@@ -9,7 +9,13 @@
 
                 <div class="choose">
                     <h2>{{ 'functionNew_chooseTemplate' | translate }}</h2>
-                    <h2 class="quickstart link" (click)="quickstart()">{{ 'functionNew_chooseTemplateQuickstart' | translate }}</h2>
+                    <h2 check-scenario="QuickStartLink"
+                        [cs-input]="{}"
+                        cs-enabledByDefault="true">{{ 'or' | translate }}</h2>                    
+                    <h2 check-scenario="QuickStartLink"
+                        [cs-input]="{}"
+                        cs-enabledByDefault="true"
+                        class="quickstart link" (click)="quickstart()">{{ 'functionNew_chooseTemplateQuickstart' | translate }}</h2>
                 </div>
 
                 <div class="search-and-sort">

AzureFunctions.AngularClient/src/app/functions.module.ts

@@ -8,6 +8,8 @@ import { AggregateBlockComponent } from './aggregate-block/aggregate-block.compo
 import { FunctionMonitorComponent } from './function-monitor/function-monitor.component';
 import { BindingEventGridComponent } from './binding-event-grid/binding-event-grid.component';
 import { AppSettingComponent } from './pickers/app-setting/app-setting.component';
+import { StorageComponent } from './pickers/storage/storage.component';
+import { SqlComponent } from './pickers/sql/sql.component';
 import { ServiceBusComponent } from './pickers/service-bus/service-bus.component';
 import { NotificationHubComponent } from './pickers/notification-hub/notification-hub.component';
 import { EventHubComponent } from './pickers/event-hub/event-hub.component';
@@ -103,6 +105,8 @@ const routing: ModuleWithProviders = RouterModule.forChild([
         ServiceBusComponent,
         NotificationHubComponent,
         AppSettingComponent,
+        StorageComponent,
+        SqlComponent,
         BindingEventGridComponent,
         FunctionMonitorComponent,
         AggregateBlockComponent,

AzureFunctions.AngularClient/src/app/pickers/picker.scss

@@ -1,3 +1,5 @@
+@import '../../sass/common/variables';
+
 .line {
     display: flex;
     flex-direction: row;
@@ -32,4 +34,42 @@ select {
 
 .button-spin {
     margin-top: 20px;
-}
+}
+
+.headerBox{
+    width: 100%;
+    height: 40px;
+    text-align: left;
+    color: $heading-text-color;
+    background-color: $custom-picker-header-bg-color; 
+    font-size: 14px;
+    line-height: 37px;
+    margin-bottom: 20px;
+    img {
+        display: inline-block;
+        height: 40px;
+        width: 40px;
+        margin-right: 15px;
+        float: left;
+        padding: 5px;
+    }
+}
+
+.sql-pciker-header {
+    background-color: $custom-sq-picker-header-bg-color;
+}
+.sql-picker-image {
+    background-color: $custom-sql-picker-imgae-bg-color;
+}
+
+.storage-picker-image {
+    background-color: $custom-picker-imgae-bg-color;    
+}
+
+.close-button {
+    padding: 10px;
+}
+
+.disabled{
+    color: $disabled-color;
+}