Updated fancy input

packages/altair-app/src/app/components/components.module.ts

@@ -31,6 +31,7 @@ import { DialogComponent } from './dialog/dialog.component';
 import { EditCollectionDialogComponent } from './edit-collection-dialog/edit-collection-dialog.component';
 import { EnvironmentManagerComponent } from './environment-manager/environment-manager.component';
 import { FancyInputComponent } from './fancy-input/fancy-input.component';
+import { FancyInputMarkerComponent } from './fancy-input-marker/fancy-input-marker.component';
 import { PreRequestEditorComponent } from './pre-request-editor/pre-request-editor.component';
 import { PostRequestEditorComponent } from './post-request-editor/post-request-editor.component';
 import { SchemaFormModule } from './schema-form/schema-form.module';
@@ -60,6 +61,7 @@ const COMPONENTS = [
   EditCollectionDialogComponent,
   EnvironmentManagerComponent,
   FancyInputComponent,
+  FancyInputMarkerComponent,
   PreRequestEditorComponent,
   PostRequestEditorComponent,
   PluginManagerComponent,

packages/altair-app/src/app/components/fancy-input-marker/fancy-input-marker.component.html

@@ -0,0 +1,13 @@
+<mark
+  [ngClass]="{ 'fancy-input-marker__invalid': !resolvedValue }"
+>{{ section.content }}</mark>
+<div
+  *ngIf="resolvedValue"
+  class="value-indicator__wrapper"
+>.
+  <div
+    nz-tooltip
+    [nzTooltipTitle]="resolvedValue"
+    class="value-indicator"
+  ></div>
+</div>

packages/altair-app/src/app/components/fancy-input-marker/fancy-input-marker.component.spec.ts

@@ -0,0 +1,38 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Store } from '@ngrx/store';
+import { SharedModule } from 'app/modules/shared/shared.module';
+import { MockModule } from 'ng-mocks';
+import { mockStoreFactory } from '../../../testing';
+
+import { FancyInputMarkerComponent } from './fancy-input-marker.component';
+
+describe('FancyInputMarkerComponent', () => {
+  let component: FancyInputMarkerComponent;
+  let fixture: ComponentFixture<FancyInputMarkerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FancyInputMarkerComponent ],
+      imports: [
+        MockModule(SharedModule),
+      ],
+      providers: [
+        {
+          provide: Store,
+          useValue: mockStoreFactory(),
+        }
+      ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FancyInputMarkerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

packages/altair-app/src/app/components/fancy-input-marker/fancy-input-marker.component.ts

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { IDictionary } from 'app/interfaces/shared';
+import { EnvironmentService, VARIABLE_REGEX } from 'app/services/environment/environment.service';
+import { HighlightSection } from '../fancy-input/fancy-input.component';
+
+@Component({
+  selector: 'app-fancy-input-marker',
+  templateUrl: './fancy-input-marker.component.html',
+  styles: [
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  preserveWhitespaces: false,
+})
+export class FancyInputMarkerComponent implements OnInit, OnChanges {
+
+  @Input() section: HighlightSection = { content: '' };
+  @Input() activeEnvironment: IDictionary = {};
+
+  resolvedValue = '';
+
+  constructor(
+    private environmentService: EnvironmentService,
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.resolvedValue = this.environmentService.hydrate(this.section.content);
+  }
+
+}

packages/altair-app/src/app/components/fancy-input/__snapshots__/fancy-input.component.spec.ts.snap

@@ -7,6 +7,11 @@ exports[`FancyInputComponent should render the highlights correctly based on the
   <div
     class="fancy-input-container"
   >
+    <input
+      class="fancy-input-content fancy-input-element ng-untouched ng-valid ng-dirty"
+      placeholder=""
+      type="text"
+    />
     <div
       class="fancy-input-backdrop"
     >
@@ -24,9 +29,14 @@ exports[`FancyInputComponent should render the highlights correctly based on the
 
 
 
-        <mark>
-          {{variable1}}
-        </mark>
+        <app-fancy-input-marker>
+          <mark
+            class="fancy-input-marker__invalid"
+          >
+            {{variable1}}
+          </mark>
+
+        </app-fancy-input-marker>
 
 
 
@@ -38,9 +48,14 @@ exports[`FancyInputComponent should render the highlights correctly based on the
 
 
 
-        <mark>
-          {{variable2}}
-        </mark>
+        <app-fancy-input-marker>
+          <mark
+            class="fancy-input-marker__invalid"
+          >
+            {{variable2}}
+          </mark>
+
+        </app-fancy-input-marker>
 
 
 
@@ -51,11 +66,6 @@ exports[`FancyInputComponent should render the highlights correctly based on the
 
       </div>
     </div>
-    <input
-      class="fancy-input-content fancy-input-element ng-untouched ng-valid ng-dirty"
-      placeholder=""
-      type="text"
-    />
   </div>
 </div>
 `;
@@ -67,6 +77,11 @@ exports[`FancyInputComponent should set component value when input value changes
   <div
     class="fancy-input-container"
   >
+    <input
+      class="fancy-input-content fancy-input-element ng-untouched ng-valid ng-dirty"
+      placeholder=""
+      type="text"
+    />
     <div
       class="fancy-input-backdrop"
     >
@@ -83,11 +98,6 @@ exports[`FancyInputComponent should set component value when input value changes
 
       </div>
     </div>
-    <input
-      class="fancy-input-content fancy-input-element ng-untouched ng-valid ng-dirty"
-      placeholder=""
-      type="text"
-    />
   </div>
 </div>
 `;

packages/altair-app/src/app/components/fancy-input/fancy-input.component.html

@@ -17,11 +17,12 @@
         <span
           *ngIf="!section.type"
         >{{ section.content }}</span>
-        <mark
+        <app-fancy-input-marker
           *ngIf="section.type === 'mark'"
-          nz-tooltip
-          nzTooltipTitle="Variable"
-        >{{ section.content }}</mark>
+          [section]="section"
+          [activeEnvironment]="activeEnvironment"
+          (click)="fancyInputEl.focus()"
+        ></app-fancy-input-marker>
       </ng-container>
     </div>
   </div>

packages/altair-app/src/app/components/fancy-input/fancy-input.component.spec.ts

@@ -3,17 +3,37 @@ import { ComponentFixture, TestBed, tick, fakeAsync, waitForAsync } from '@angul
 
 import { FancyInputComponent } from './fancy-input.component';
 import { FormsModule } from '@angular/forms';
+import { SharedModule } from 'app/modules/shared/shared.module';
+import { MockModule } from 'ng-mocks';
+import { Store } from '@ngrx/store';
+import { mock, mockStoreFactory } from '../../../testing';
+import { FancyInputMarkerComponent } from '../fancy-input-marker/fancy-input-marker.component';
+import { EnvironmentService } from 'app/services';
 
 describe('FancyInputComponent', () => {
   let component: FancyInputComponent;
   let fixture: ComponentFixture<FancyInputComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ FancyInputComponent ],
+      declarations: [ FancyInputComponent, FancyInputMarkerComponent ],
       imports: [
         FormsModule,
-      ]
+        SharedModule,
+      ],
+      providers: [
+        {
+          provide: Store,
+          useValue: mockStoreFactory(),
+        },
+        {
+          provide: EnvironmentService,
+          useValue: mock<EnvironmentService>({
+            getActiveEnvironment: () => ({}),
+            hydrate: () => '',
+          }),
+        }
+      ],
     })
     .compileComponents();
   }));

packages/altair-app/src/app/components/fancy-input/fancy-input.component.ts

@@ -1,15 +1,25 @@
 import { Component, OnInit, ViewChild, ElementRef, Input, Output, EventEmitter, forwardRef } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import { EnvironmentService } from 'app/services';
 import { debug } from 'app/utils/logger';
+import { distinct, distinctUntilChanged, map } from 'rxjs/operators';
+
+import * as fromRoot from '../../store';
 // import { VARIABLE_REGEX } from 'app/services/environment/environment.service';
 // TODO: Duplicating for now after changing to use lookahead in environment service variable regex
-const VARIABLE_REGEX = /{{\s*[\w\.]+\s*}}/g;
+export const VARIABLE_REGEX = /{{\s*([\w\.]+)\s*}}/g;
 interface BoundaryMarker {
   index: number;
   type: 'start' | 'stop';
   className?: string;
 }
 
+export interface HighlightSection {
+  content: string;
+  type?: string;
+}
+
 @Component({
   selector: 'app-fancy-input',
   templateUrl: './fancy-input.component.html',
@@ -48,12 +58,27 @@ export class FancyInputComponent implements ControlValueAccessor, OnInit {
 
 
   highlightData = {
-    sections: [] as any[]
+    sections: [] as HighlightSection[]
   };
 
   private innerValue = '';
 
-  constructor() { }
+  private activeEnvironment = {};
+
+  constructor(
+    private store: Store<fromRoot.State>,
+    private environmentService: EnvironmentService,
+  ) {
+    store.pipe(
+      map(data => data.environments),
+      distinctUntilChanged(),
+    ).subscribe({
+      next: (data) => {
+        // get active environment
+        this.activeEnvironment = environmentService.getActiveEnvironment();
+      },
+    });
+  }
 
   // From ControlValueAccessor interface
   writeValue(value: any) {
@@ -184,7 +209,7 @@ export class FancyInputComponent implements ControlValueAccessor, OnInit {
     });
   }
   generateHighlightSections(val: string, boundaries: BoundaryMarker[]) {
-    const sections: any[] = [];
+    const sections: HighlightSection[] = [];
     let lastBoundary = {
       index: 0,
       type: ''
@@ -193,7 +218,7 @@ export class FancyInputComponent implements ControlValueAccessor, OnInit {
     boundaries.forEach(boundary => {
       sections.push({
         content: val.substring(lastBoundary.index, boundary.index),
-        type: lastBoundary.type === 'start' && boundary.type === 'stop' && 'mark'
+        type: lastBoundary.type === 'start' && boundary.type === 'stop' ? 'mark' : undefined,
       });
       lastBoundary = boundary;
     });

packages/altair-app/src/scss/components/_fancy-input.scss

@@ -46,19 +46,57 @@ app-fancy-input,
   padding: 0;
 	border: 0;
   background: none transparent !important;
-  span, mark {
-    // display: inline-block;
-  }
 }
 
-.fancy-input-content mark {
-  // background: var(--cerise-color);
-  // background: rgba(var(--rgb-cerise), .5);
-  color: var(--primary-color);
-	background: transparent;
-  border-radius: 4px;
-	padding: 0 !important;
-	// TODO: When we introduce popover for mark, uncomment the pointer events
-	// pointer-events: all;
-	// color: var(--white-color);
+app-fancy-input-marker {
+	display: inline-block;
+	position: relative;
+
+
+	mark {
+		// background: var(--cerise-color);
+		// background: rgba(var(--rgb-cerise), .5);
+		color: var(--primary-color);
+		background: transparent;
+		border-radius: 4px;
+		padding: 0 !important;
+		// TODO: When we introduce popover for mark, uncomment the pointer events
+		// pointer-events: all;
+		// color: var(--white-color);
+	}
+
+	.fancy-input-marker__invalid {
+		color: var(--red-color);
+	}
+
+	.value-indicator__wrapper {
+		display: flex;
+		position: absolute;
+    top: 50%;
+    right: -5%;
+    // width: 4px;
+    line-height: 1;
+    transform: translateY(-50%);
+		color: transparent;
+	}
+
+	.value-indicator {
+		position: absolute;
+		top: -10%;
+		right: 0;
+		width: 7px;
+		height: 7px;
+		background-color: var(--theme-font-color);
+		// border: 1px solid var(--theme-font-color);
+		border-radius: 50%;
+		pointer-events: all;
+		opacity: .5;
+		transition: all .3s ease;
+
+		&:hover {
+			opacity: 1;
+			transform: scale(1.2);
+		}
+	}
 }
+