;
+
+ 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();
+ });
+});
diff --git a/packages/altair-app/src/app/components/fancy-input-marker/fancy-input-marker.component.ts b/packages/altair-app/src/app/components/fancy-input-marker/fancy-input-marker.component.ts
new file mode 100644
index 0000000000..23dd71ef34
--- /dev/null
+++ b/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);
+ }
+
+}
diff --git a/packages/altair-app/src/app/components/fancy-input/__snapshots__/fancy-input.component.spec.ts.snap b/packages/altair-app/src/app/components/fancy-input/__snapshots__/fancy-input.component.spec.ts.snap
index cb409bd709..69abae413a 100644
--- a/packages/altair-app/src/app/components/fancy-input/__snapshots__/fancy-input.component.spec.ts.snap
+++ b/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
- {{ section.content }}
- {{ section.content }}
+ [section]="section"
+ [activeEnvironment]="activeEnvironment"
+ (click)="fancyInputEl.focus()"
+ >
diff --git a/packages/altair-app/src/app/components/fancy-input/fancy-input.component.spec.ts b/packages/altair-app/src/app/components/fancy-input/fancy-input.component.spec.ts
index c72bbf39ef..664ea76b9d 100644
--- a/packages/altair-app/src/app/components/fancy-input/fancy-input.component.spec.ts
+++ b/packages/altair-app/src/app/components/fancy-input/fancy-input.component.spec.ts
@@ -3,6 +3,12 @@ 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;
@@ -10,10 +16,24 @@ describe('FancyInputComponent', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [ FancyInputComponent ],
+ declarations: [ FancyInputComponent, FancyInputMarkerComponent ],
imports: [
FormsModule,
- ]
+ SharedModule,
+ ],
+ providers: [
+ {
+ provide: Store,
+ useValue: mockStoreFactory(),
+ },
+ {
+ provide: EnvironmentService,
+ useValue: mock({
+ getActiveEnvironment: () => ({}),
+ hydrate: () => '',
+ }),
+ }
+ ],
})
.compileComponents();
}));
diff --git a/packages/altair-app/src/app/components/fancy-input/fancy-input.component.ts b/packages/altair-app/src/app/components/fancy-input/fancy-input.component.ts
index e30e4c2260..1205765b03 100644
--- a/packages/altair-app/src/app/components/fancy-input/fancy-input.component.ts
+++ b/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,
+ 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;
});
diff --git a/packages/altair-app/src/scss/components/_fancy-input.scss b/packages/altair-app/src/scss/components/_fancy-input.scss
index f0cd36ef41..cbc7e1f6a9 100644
--- a/packages/altair-app/src/scss/components/_fancy-input.scss
+++ b/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);
+ }
+ }
}
+