fix issue with http protocol append to url with variable

packages/altair-app/src/app/modules/altair/components/url-box/url-box.component.spec.ts

@@ -42,4 +42,30 @@ describe('UrlBoxComponent', () => {
     await wrapper.nextTick();
     expect(wrapper.element).toMatchSnapshot();
   });
+
+  describe('sanitizeUrl', () => {
+    it('should add http protocol if missing', () => {
+      expect(wrapper.componentInstance.sanitizeUrl('localhost:3000')).toBe(
+        'http://localhost:3000'
+      );
+    });
+
+    it('should not add http protocol if already present', () => {
+      expect(
+        wrapper.componentInstance.sanitizeUrl('http://localhost:3000')
+      ).toBe('http://localhost:3000');
+    });
+
+    it('should not add http protocol if url contains https', () => {
+      expect(
+        wrapper.componentInstance.sanitizeUrl('https://localhost:3000')
+      ).toBe('https://localhost:3000');
+    });
+
+    it('should not add protocol if url contains variable', () => {
+      expect(wrapper.componentInstance.sanitizeUrl('{{url}}/graphql')).toBe(
+        '{{url}}/graphql'
+      );
+    });
+  });
 });

packages/altair-app/src/app/modules/altair/components/url-box/url-box.component.ts

@@ -2,6 +2,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { IQueryCollection } from 'altair-graphql-core/build/types/state/collection.interfaces';
 import { HTTP_VERBS } from 'altair-graphql-core/build/types/state/query.interfaces';
 import { OperationDefinitionNode } from 'graphql';
+import { VARIABLE_REGEX } from '../../services/environment/environment.service';
 
 @Component({
   selector: 'app-url-box',
@@ -42,14 +43,14 @@ export class UrlBoxComponent {
     // trim the url and remove any spaces
     // add http protocol if missing
     url = url.trim();
-    if (!url.match(/^[a-zA-Z]+:\/\//)) {
+    if (!RegExp(/^[a-zA-Z]+:\/\//).exec(url) && !VARIABLE_REGEX.test(url)) {
       url = 'http://' + url;
     }
 
     return url;
   }
 
   queryOperationTrackBy(index: number, operation: OperationDefinitionNode) {
-    return operation.name && operation.name.value;
+    return operation.name?.value;
   }
 }