Add HTTP verb selection to the url box

.angular-cli.json

@@ -21,7 +21,10 @@
       "styles": [
         "styles.scss"
       ],
-      "scripts": [],
+      "scripts": [
+        "../node_modules/@webcomponents/custom-elements/custom-elements.min.js",
+        "../node_modules/clarity-icons/clarity-icons.min.js"
+      ],
       "environmentSource": "environments/environment.ts",
       "environments": {
         "dev": "environments/environment.ts",

src/app/components/index.ts

@@ -12,6 +12,7 @@ import { PipesModule } from '../pipes';
 import { QueryEditorComponent } from './query-editor/query-editor.component';
 import { QueryResultComponent } from './query-result/query-result.component';
 import { ActionBarComponent } from './action-bar/action-bar.component';
+import { UrlBoxComponent } from './url-box/url-box.component';
 import { SetVariableDialogComponent } from './set-variable-dialog/set-variable-dialog.component';
 import { ForkRepoComponent } from './fork-repo/fork-repo.component';
 import { WindowSwitcherComponent } from './window-switcher/window-switcher.component';
@@ -26,7 +27,8 @@ const COMPONENTS = [
     ForkRepoComponent,
     WindowSwitcherComponent,
     SubscriptionUrlDialogComponent,
-    SubscriptionResultItemComponent
+    SubscriptionResultItemComponent,
+    UrlBoxComponent
 ];
 
 @NgModule({

src/app/components/url-box/url-box.component.html

@@ -0,0 +1,16 @@
+<div class="url-box row">
+  <clr-dropdown>
+    <button type="button" class="url-box__button btn btn-outline-primary col-xs-1" clrDropdownTrigger>
+      POST
+      <clr-icon shape="angle down"></clr-icon>
+    </button>
+    <clr-dropdown-menu *clrIfOpen>
+      <button type="button" clrDropdownItem>POST</button>
+      <button type="button" clrDropdownItem>GET</button>
+      <button type="button" clrDropdownItem>PUT</button>
+      <button type="button" clrDropdownItem>DELETE</button>
+    </clr-dropdown-menu>
+  </clr-dropdown>
+  <input #urlInput type="text" class="url-box__input col-xs-11" placeholder="Enter URL" (blur)="setApiUrl()" (keyup.enter)="setApiUrl()"
+         [value]="apiUrl">
+</div>

src/app/components/url-box/url-box.component.ts

@@ -0,0 +1,19 @@
+import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core';
+
+@Component({
+  selector: 'app-url-box',
+  templateUrl: './url-box.component.html'
+})
+export class UrlBoxComponent {
+  @Input() apiUrl: string;
+  @Output() updatedUrl = new EventEmitter();
+
+
+  @ViewChild('urlInput') urlInput;
+  constructor() { }
+
+  setApiUrl() {
+    const url = this.urlInput.nativeElement.value;
+    this.updatedUrl.emit(url);
+  }
+}

src/app/containers/window/window.component.html

@@ -7,10 +7,7 @@
       </div>
     </div>
   </div>
-  <div class="url-box">
-    <input #urlInput type="text" class="url-box__input" placeholder="Enter URL" (blur)="setApiUrl()" (keyup.enter)="setApiUrl()"
-      [value]="apiUrl">
-  </div>
+  <app-url-box [apiUrl]="apiUrl" (updatedUrl)="setApiUrl($event)"></app-url-box>
   <app-action-bar
     (toggleHeaderDialog)="toggleHeader()"
     (toggleVariableDialog)="toggleVariableDialog()"

src/app/containers/window/window.component.ts

@@ -138,8 +138,7 @@ export class WindowComponent implements OnInit {
     this.initSetup();
   }
 
-  setApiUrl() {
-    const url = this.urlInput.nativeElement.value;
+  setApiUrl(url) {
     if (url !== this.apiUrl) {
       this.store.dispatch(new queryActions.SetUrlAction(url, this.windowId));
       this.store.dispatch(new queryActions.SendIntrospectionQueryRequestAction(this.windowId));

src/scss/components/_url-box.scss

@@ -12,10 +12,27 @@
   padding: 0 15px;
   transition: all .3s ease;
   border-radius: 4px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
   &:hover {
     border-color: $light-grey;
   }
   &:focus, &:active {
     border-color: $primary-color;
   }
 }
+
+.btn.btn-outline-primary.url-box__button {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  height: 100%;
+  border-color: $green;
+  color: $green;
+
+  clr-icon {
+    fill: $green;
+    color: $green;
+  }
+}
+
+