From eea081e114ae5ea4b93610666d859f77f11e3b84 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Mon, 2 Jul 2018 17:31:46 +0000
Subject: [PATCH] Merged in feature/SHIBUI-581 (pull request #100)

SHIBUI-581 Implemented reloading attributes form

* SHIBUI-581 Adding autocomplete component

* SHIBUI-581 Implemented reloading attributes form

Approved-by: Shibui Jenkins <shibui.jenkins@gmail.com>
---
 ui/package-lock.json                          |  5 ++
 ui/package.json                               |  1 +
 ui/src/app/schema-form/model/one-of.ts        |  4 ++
 ui/src/app/schema-form/registry.ts            |  6 +--
 ui/src/app/schema-form/schema-form.module.ts  |  4 +-
 .../widget/datalist/datalist.component.html   | 22 +++++++++
 .../widget/datalist/datalist.component.ts     | 10 ++++
 .../widget/select/select.component.html       |  3 +-
 .../autocomplete/autocomplete.component.html  | 39 +++++++++------
 .../autocomplete/autocomplete.component.scss  |  9 ++++
 .../autocomplete/autocomplete.component.ts    |  5 +-
 .../filebacked-http-reloading.schema.json     | 48 +++++++++++++++++--
 ui/src/polyfills.ts                           |  2 +
 13 files changed, 134 insertions(+), 24 deletions(-)
 create mode 100644 ui/src/app/schema-form/model/one-of.ts
 create mode 100644 ui/src/app/schema-form/widget/datalist/datalist.component.html
 create mode 100644 ui/src/app/schema-form/widget/datalist/datalist.component.ts

diff --git a/ui/package-lock.json b/ui/package-lock.json
index 0fd8aeb12..dfd4540e1 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -3398,6 +3398,11 @@
         }
       }
     },
+    "datalist-polyfill": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/datalist-polyfill/-/datalist-polyfill-1.16.1.tgz",
+      "integrity": "sha512-iBMIfb4UHq/lmxar//Lsavr0Kd6KUonZCl8VmcEFEAkIqButhi+ujPswxsw2Sd2ZKsey/MMFOX8ehQUKhks1fg=="
+    },
     "date-now": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",
diff --git a/ui/package.json b/ui/package.json
index c0199ee2d..6d2fe0bef 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -33,6 +33,7 @@
     "@ngrx/store": "^5.2.0",
     "bootstrap": "4.1.1",
     "core-js": "^2.4.1",
+    "datalist-polyfill": "^1.16.1",
     "deep-object-diff": "^1.1.0",
     "file-saver": "^1.3.3",
     "font-awesome": "^4.7.0",
diff --git a/ui/src/app/schema-form/model/one-of.ts b/ui/src/app/schema-form/model/one-of.ts
new file mode 100644
index 000000000..7a33306e4
--- /dev/null
+++ b/ui/src/app/schema-form/model/one-of.ts
@@ -0,0 +1,4 @@
+export interface OneOf {
+    enum: string[];
+    description: string;
+}
diff --git a/ui/src/app/schema-form/registry.ts b/ui/src/app/schema-form/registry.ts
index a3bc92856..85e7d3a7d 100644
--- a/ui/src/app/schema-form/registry.ts
+++ b/ui/src/app/schema-form/registry.ts
@@ -12,11 +12,9 @@ import { IntegerWidget } from 'ngx-schema-form';
 import { ObjectWidget } from 'ngx-schema-form';
 import { RadioWidget } from 'ngx-schema-form';
 import { RangeWidget } from 'ngx-schema-form';
-import { SelectWidget } from 'ngx-schema-form';
-import { StringWidget } from 'ngx-schema-form';
 import { TextAreaWidget } from 'ngx-schema-form';
 import { CustomSelectComponent } from './widget/select/select.component';
-
+import { DatalistComponent } from './widget/datalist/datalist.component';
 
 
 export class CustomWidgetRegistry extends WidgetRegistry {
@@ -40,6 +38,8 @@ export class CustomWidgetRegistry extends WidgetRegistry {
 
         this.register('select', CustomSelectComponent);
 
+        this.register('datalist', DatalistComponent);
+
         /* NGX-Form */
         this.register('array', ArrayWidget);
         this.register('object', ObjectWidget);
diff --git a/ui/src/app/schema-form/schema-form.module.ts b/ui/src/app/schema-form/schema-form.module.ts
index 4ea92397d..95549b7de 100644
--- a/ui/src/app/schema-form/schema-form.module.ts
+++ b/ui/src/app/schema-form/schema-form.module.ts
@@ -10,12 +10,14 @@ import { CustomStringComponent } from './widget/text/string.component';
 import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
 import { SharedModule } from '../shared/shared.module';
 import { CustomSelectComponent } from './widget/select/select.component';
+import { DatalistComponent } from './widget/datalist/datalist.component';
 
 export const COMPONENTS = [
     BooleanRadioComponent,
     FieldsetComponent,
     CustomStringComponent,
-    CustomSelectComponent
+    CustomSelectComponent,
+    DatalistComponent
 ];
 
 @NgModule({
diff --git a/ui/src/app/schema-form/widget/datalist/datalist.component.html b/ui/src/app/schema-form/widget/datalist/datalist.component.html
new file mode 100644
index 000000000..9df975a27
--- /dev/null
+++ b/ui/src/app/schema-form/widget/datalist/datalist.component.html
@@ -0,0 +1,22 @@
+<div class="widget form-group">
+    <label [attr.for]="id" class="d-flex justify-content-between control-label">
+        <span>{{ schema.title }}</span>
+        <span *ngIf="schema.description">
+            <ng-template #tooltip i18n="@@tooltip--description">{{ schema.description }}</ng-template>
+            <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
+                [ngbPopover]="tooltip"
+                i18n-aria-label="@@tooltip--instruction"
+                aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+        </span>
+    </label>
+    <span *ngIf="schema.description" class="sr-only">{{ schema.description }}</span>
+    <auto-complete
+        [attr.id]="id"
+        [formControl]="control"
+        [matches]="schema.widget.data"
+        [required]="true"
+        [dropdown]="true"
+        role="textbox"
+        aria-label="Name ID Format (type for auto-complete)">
+    </auto-complete>
+</div>
\ No newline at end of file
diff --git a/ui/src/app/schema-form/widget/datalist/datalist.component.ts b/ui/src/app/schema-form/widget/datalist/datalist.component.ts
new file mode 100644
index 000000000..ca5d8ba58
--- /dev/null
+++ b/ui/src/app/schema-form/widget/datalist/datalist.component.ts
@@ -0,0 +1,10 @@
+import { Component, OnChanges } from '@angular/core';
+
+import { ControlWidget } from 'ngx-schema-form';
+import { OneOf } from '../../model/one-of';
+
+@Component({
+    selector: 'datalist-component',
+    templateUrl: `./datalist.component.html`
+})
+export class DatalistComponent extends ControlWidget {}
diff --git a/ui/src/app/schema-form/widget/select/select.component.html b/ui/src/app/schema-form/widget/select/select.component.html
index a29321e7a..831a7e852 100644
--- a/ui/src/app/schema-form/widget/select/select.component.html
+++ b/ui/src/app/schema-form/widget/select/select.component.html
@@ -12,7 +12,8 @@
     <span *ngIf="schema.description" class="sr-only">
         {{ schema.description }}
     </span>
-    <select *ngIf="schema.type != 'array'" [formControl]="control" [attr.name]="name" [attr.disabled]="schema.readOnly" class="form-control">
+    <select *ngIf="schema.type !== 'array'" [formControl]="control" [attr.name]="name" [attr.disabled]="schema.readOnly" class="form-control">
+        <option disabled selected>{{ schema.title }}</option>
         <option *ngFor="let option of schema.oneOf" [ngValue]="option.enum[0]">{{option.description}}</option>
     </select>
     <select *ngIf="schema.type === 'array'" multiple [formControl]="control" [attr.name]="name" [attr.disabled]="schema.readOnly" class="form-control">
diff --git a/ui/src/app/shared/autocomplete/autocomplete.component.html b/ui/src/app/shared/autocomplete/autocomplete.component.html
index cf1bda83b..26d51dbcf 100644
--- a/ui/src/app/shared/autocomplete/autocomplete.component.html
+++ b/ui/src/app/shared/autocomplete/autocomplete.component.html
@@ -1,19 +1,30 @@
 <div id="{{ id }}-container" class="dropdown form-group" (keydown)="handleKeyDown($event)" role='combobox' [attr.aria-expanded]="(menuIsVisible$ | async) ? 'true' : 'false'">
     <label for="{{ id }}__input" attr.aria-labelledby="{{ id }}__input" class="sr-only"></label>
-    <input
-        #inputField
-        [formControl]="input"
-        [disableValidation]="true"
-        id="{{ id }}__input"
-        class="form-control"
-        autoComplete="off"
-        type="text"
-        role="textbox"
-        [attr.aria-activedescendant]="activeDescendant"
-        attr.aria-owns="{{ id }}__listbox"
-        (focus)="handleInputFocus()"
-        (blur)="handleInputBlur()"
-    />
+    <div [ngClass]="{'input-group': dropdown}">
+        <input
+            #inputField
+            [formControl]="input"
+            [disableValidation]="true"
+            id="{{ id }}__input"
+            class="form-control"
+            autoComplete="off"
+            type="text"
+            role="textbox"
+            [attr.aria-activedescendant]="activeDescendant"
+            attr.aria-owns="{{ id }}__listbox"
+            (focus)="handleInputFocus()"
+            (blur)="handleInputBlur()"
+        />
+        <div class="input-group-append" *ngIf="dropdown">
+            <button class="btn btn-outline-secondary"
+                type="button"
+                aria-haspopup="true"
+                aria-expanded="false"
+                (click)="state.setState({menuOpen: true})">
+                <i class="fa fa-caret-down"></i>
+            </button>
+        </div>
+    </div>
     <ul class="dropdown-menu"
         id="{{ id }}__listbox"
         role="listbox"
diff --git a/ui/src/app/shared/autocomplete/autocomplete.component.scss b/ui/src/app/shared/autocomplete/autocomplete.component.scss
index 192e30310..b721d9ea2 100644
--- a/ui/src/app/shared/autocomplete/autocomplete.component.scss
+++ b/ui/src/app/shared/autocomplete/autocomplete.component.scss
@@ -1,3 +1,6 @@
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+
 .dropdown.form-group {
     margin-bottom: 0px;
 }
@@ -5,4 +8,10 @@
 .dropdown-menu {
     min-width: 100%;
     width: auto;
+}
+
+:host {
+    .btn-outline-secondary {
+        border-color: $input-border-color;
+    }
 }
\ No newline at end of file
diff --git a/ui/src/app/shared/autocomplete/autocomplete.component.ts b/ui/src/app/shared/autocomplete/autocomplete.component.ts
index 64fbb647a..6044b1757 100644
--- a/ui/src/app/shared/autocomplete/autocomplete.component.ts
+++ b/ui/src/app/shared/autocomplete/autocomplete.component.ts
@@ -19,8 +19,8 @@ import { FormControl, ControlValueAccessor, NG_VALUE_ACCESSOR, Validators } from
 import { Observable, Subject, Subscription, interval } from 'rxjs';
 import { takeUntil, combineLatest, map } from 'rxjs/operators';
 
-import { keyCodes, isPrintableKeyCode } from '../../shared/keycodes';
-import { AutoCompleteState, AutoCompleteStateEmitter, defaultState } from './autocomplete.model';
+import { keyCodes } from '../../shared/keycodes';
+import { AutoCompleteStateEmitter } from './autocomplete.model';
 import { NavigatorService } from '../../core/service/navigator.service';
 
 const POLL_TIMEOUT = 1000;
@@ -48,6 +48,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy, OnChanges, Afte
     @Input() showMoreText = 'Show More...';
     @Input() limit = 0;
     @Input() processing = false;
+    @Input() dropdown = false;
 
     @Output() more: EventEmitter<any> = new EventEmitter<any>();
     @Output() onChange: EventEmitter<string> = new EventEmitter<string>();
diff --git a/ui/src/assets/schema/provider/filebacked-http-reloading.schema.json b/ui/src/assets/schema/provider/filebacked-http-reloading.schema.json
index d222ec8e0..9595d904c 100644
--- a/ui/src/assets/schema/provider/filebacked-http-reloading.schema.json
+++ b/ui/src/assets/schema/provider/filebacked-http-reloading.schema.json
@@ -7,12 +7,40 @@
                 "minRefreshDelay": {
                     "title": "Min Refresh Delay",
                     "description": "",
-                    "type": "string"
+                    "type": "string",
+                    "widget": {
+                        "id": "datalist",
+                        "data": [
+                            "PT0S",
+                            "PT30S",
+                            "PT1M",
+                            "PT10M",
+                            "PT30M",
+                            "PT1H",
+                            "PT4H",
+                            "PT12H",
+                            "PT24H"
+                        ]
+                    }
                 },
                 "maxRefreshDelay": {
                     "title": "Max Refresh Delay",
                     "description": "",
-                    "type": "string"
+                    "type": "string",
+                    "widget": {
+                        "id": "datalist",
+                        "data": [
+                            "PT0S",
+                            "PT30S",
+                            "PT1M",
+                            "PT10M",
+                            "PT30M",
+                            "PT1H",
+                            "PT4H",
+                            "PT12H",
+                            "PT24H"
+                        ]
+                    }
                 },
                 "refreshDelayFactor": {
                     "title": "Refresh Delay Factor",
@@ -45,7 +73,21 @@
                 "expirationWarningThreshold": {
                     "title": "Expiration Warning Threshold",
                     "description": "",
-                    "type": "string"
+                    "type": "string",
+                    "widget": {
+                        "id": "datalist",
+                        "data": [
+                            "PT0S",
+                            "PT30S",
+                            "PT1M",
+                            "PT10M",
+                            "PT30M",
+                            "PT1H",
+                            "PT4H",
+                            "PT12H",
+                            "PT24H"
+                        ]
+                    }
                 }
             }
         }
diff --git a/ui/src/polyfills.ts b/ui/src/polyfills.ts
index 98fd84126..12d777922 100644
--- a/ui/src/polyfills.ts
+++ b/ui/src/polyfills.ts
@@ -70,3 +70,5 @@ import 'zone.js/dist/zone';  // Included with Angular CLI.
  * Need to import at least one locale-data with intl.
  */
 // import 'intl/locale-data/jsonp/en';
+
+import 'datalist-polyfill';