use x-input in auth

altair-graphql · Apr 1, 2024 · 1c2f93a · 1c2f93a
1 parent 34ffb36
commit 1c2f93a
Show file tree

Hide file tree

Showing 15 changed files with 175 additions and 170 deletions.
diff --git a/.../altair/components/authorization/authorization-apikey/authorization-apikey.component.html b/.../altair/components/authorization/authorization-apikey/authorization-apikey.component.html
@@ -2,13 +2,13 @@
   <nz-form-item>
     <nz-form-label nzRequired nzFor="key">Key</nz-form-label>
     <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="The input is not a valid key!">
-      <input nz-input formControlName="key" id="key" class="app-input" autocomplete="off" />
+      <app-x-input nz-input formControlName="key" id="key" class="app-input" autocomplete="off" />
     </nz-form-control>
   </nz-form-item>
   <nz-form-item>
     <nz-form-label nzRequired nzFor="value">Value</nz-form-label>
     <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="The input is not a valid value!">
-      <input nz-input formControlName="value" id="value" class="app-input" autocomplete="off" />
+      <app-x-input nz-input formControlName="value" id="value" class="app-input" autocomplete="off" />
     </nz-form-control>
   </nz-form-item>
 </form>
diff --git a/...tair/components/authorization/authorization-apikey/authorization-apikey.component.spec.ts b/...tair/components/authorization/authorization-apikey/authorization-apikey.component.spec.ts
@@ -1,17 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { AuthorizationApikeyComponent } from './authorization-apikey.component';
+import { SharedModule } from 'app/modules/altair/modules/shared/shared.module';
+import { ComponentModule } from '../../components.module';
+import { MockModule } from 'ng-mocks';
 
 describe('AuthorizationApikeyComponent', () => {
   let component: AuthorizationApikeyComponent;
   let fixture: ComponentFixture<AuthorizationApikeyComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AuthorizationApikeyComponent]
-    })
-    .compileComponents();
-    
+      declarations: [AuthorizationApikeyComponent],
+      imports: [MockModule(SharedModule), MockModule(ComponentModule)],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(AuthorizationApikeyComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

diff --git a/...es/altair/components/authorization/authorization-apikey/authorization-apikey.component.ts b/...es/altair/components/authorization/authorization-apikey/authorization-apikey.component.ts
@@ -1,11 +1,8 @@
 import { Component, Input, OnInit, Output } from '@angular/core';
 import { NonNullableFormBuilder } from '@angular/forms';
-import { SharedModule } from 'app/modules/altair/modules/shared/shared.module';
 
 @Component({
   selector: 'app-authorization-apikey',
-  standalone: true,
-  imports: [SharedModule],
   templateUrl: './authorization-apikey.component.html',
   styles: ``,
 })

diff --git a/...es/altair/components/authorization/authorization-basic/authorization-basic.component.html b/...es/altair/components/authorization/authorization-basic/authorization-basic.component.html
@@ -2,13 +2,13 @@
   <nz-form-item>
     <nz-form-label nzRequired nzFor="username">Username</nz-form-label>
     <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="The input is not a valid username!">
-      <input nz-input formControlName="username" id="username" class="app-input" autocomplete="off" />
+      <app-x-input nz-input formControlName="username" id="username" class="app-input" autocomplete="off" />
     </nz-form-control>
   </nz-form-item>
   <nz-form-item>
     <nz-form-label nzRequired nzFor="password">Password</nz-form-label>
     <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="The input is not a valid password!">
-      <input nz-input formControlName="password" id="password" class="app-input" type="password" autocomplete="off" />
+      <app-x-input nz-input formControlName="password" id="password" class="app-input" type="password" autocomplete="off" />
     </nz-form-control>
   </nz-form-item>
 </form>
diff --git a/...altair/components/authorization/authorization-basic/authorization-basic.component.spec.ts b/...altair/components/authorization/authorization-basic/authorization-basic.component.spec.ts
@@ -1,14 +1,19 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { AuthorizationBasicComponent } from './authorization-basic.component';
+import { SharedModule } from 'app/modules/altair/modules/shared/shared.module';
+import { ComponentModule } from '../../components.module';
+import { Store } from '@ngrx/store';
+import { MockModule } from 'ng-mocks';
 
 describe('AuthorizationBasicComponent', () => {
   let component: AuthorizationBasicComponent;
   let fixture: ComponentFixture<AuthorizationBasicComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AuthorizationBasicComponent],
+      declarations: [AuthorizationBasicComponent],
+      imports: [MockModule(SharedModule), MockModule(ComponentModule)],
     }).compileComponents();
 
     fixture = TestBed.createComponent(AuthorizationBasicComponent);

diff --git a/...ules/altair/components/authorization/authorization-basic/authorization-basic.component.ts b/...ules/altair/components/authorization/authorization-basic/authorization-basic.component.ts
@@ -1,11 +1,8 @@
 import { Component, Input, OnInit, Output } from '@angular/core';
 import { NonNullableFormBuilder } from '@angular/forms';
-import { SharedModule } from 'app/modules/altair/modules/shared/shared.module';
 
 @Component({
   selector: 'app-authorization-basic',
-  standalone: true,
-  imports: [SharedModule],
   templateUrl: './authorization-basic.component.html',
   styles: ``,
 })

diff --git a/.../altair/components/authorization/authorization-bearer/authorization-bearer.component.html b/.../altair/components/authorization/authorization-bearer/authorization-bearer.component.html
@@ -2,7 +2,7 @@
   <nz-form-item>
     <nz-form-label nzRequired nzFor="token">Bearer token</nz-form-label>
     <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="The input is not a valid bearer token!">
-      <input nz-input formControlName="token" id="token" class="app-input" autocomplete="off" />
+      <app-x-input nz-input formControlName="token" id="token" class="app-input ant-input" autocomplete="off" />
     </nz-form-control>
   </nz-form-item>
 </form>
diff --git a/...tair/components/authorization/authorization-bearer/authorization-bearer.component.spec.ts b/...tair/components/authorization/authorization-bearer/authorization-bearer.component.spec.ts
@@ -1,17 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { AuthorizationBearerComponent } from './authorization-bearer.component';
+import { SharedModule } from 'app/modules/altair/modules/shared/shared.module';
+import { ComponentModule } from '../../components.module';
+import { MockModule } from 'ng-mocks';
 
 describe('AuthorizationBearerComponent', () => {
   let component: AuthorizationBearerComponent;
   let fixture: ComponentFixture<AuthorizationBearerComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AuthorizationBearerComponent]
-    })
-    .compileComponents();
-    
+      declarations: [AuthorizationBearerComponent],
+      imports: [MockModule(SharedModule), MockModule(ComponentModule)],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(AuthorizationBearerComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

diff --git a/...es/altair/components/authorization/authorization-bearer/authorization-bearer.component.ts b/...es/altair/components/authorization/authorization-bearer/authorization-bearer.component.ts
@@ -1,11 +1,8 @@
 import { Component, Input, OnInit, Output } from '@angular/core';
 import { NonNullableFormBuilder } from '@angular/forms';
-import { SharedModule } from 'app/modules/altair/modules/shared/shared.module';
 
 @Component({
   selector: 'app-authorization-bearer',
-  standalone: true,
-  imports: [SharedModule],
   templateUrl: './authorization-bearer.component.html',
   styles: ``,
 })

diff --git a/.../altair/components/authorization/authorization-editor/authorization-editor.component.html b/.../altair/components/authorization/authorization-editor/authorization-editor.component.html
@@ -1,32 +1,34 @@
-<form nz-form nzLayout="vertical" [formGroup]="typeForm">
-  <nz-form-item>
-    <nz-form-label>{{ 'AUTHORIZATION_TYPE_TEXT' | translate }}</nz-form-label>
-    <nz-form-control [nzSm]="6" nzErrorTip="The input is not a valid type!">
-      <nz-select formControlName="type">
-        @for (item of AUTH_TYPES; track $index) {
-          <nz-option [nzValue]="item" [nzLabel]="AUTH_MAPPING[item].copy | translate"></nz-option>
-        }
-      </nz-select>
-    </nz-form-control>
-  </nz-form-item>
-</form>
-@switch (typeForm.controls.type.value) {
-  @case ('api-key') {
-    <app-authorization-apikey
-      [authData]="authorizationState?.data"
-      (authDataChange)="authDataChange.emit($event)"
-    />
+<div class="p-10">
+  <form nz-form nzLayout="vertical" [formGroup]="typeForm">
+    <nz-form-item>
+      <nz-form-label>{{ 'AUTHORIZATION_TYPE_TEXT' | translate }}</nz-form-label>
+      <nz-form-control [nzSm]="8" nzErrorTip="The input is not a valid type!">
+        <nz-select formControlName="type">
+          @for (item of AUTH_TYPES; track $index) {
+            <nz-option [nzValue]="item" [nzLabel]="AUTH_MAPPING[item].copy | translate"></nz-option>
+          }
+        </nz-select>
+      </nz-form-control>
+    </nz-form-item>
+  </form>
+  @switch (typeForm.controls.type.value) {
+    @case ('api-key') {
+      <app-authorization-apikey
+        [authData]="authorizationState?.data"
+        (authDataChange)="authDataChange.emit($event)"
+      />
+    }
+    @case ('basic') {
+      <app-authorization-basic
+        [authData]="authorizationState?.data"
+        (authDataChange)="authDataChange.emit($event)"
+      />
+    }
+    @case ('bearer') {
+      <app-authorization-bearer
+        [authData]="authorizationState?.data"
+        (authDataChange)="authDataChange.emit($event)"
+      />
+    }
   }
-  @case ('basic') {
-    <app-authorization-basic
-      [authData]="authorizationState?.data"
-      (authDataChange)="authDataChange.emit($event)"
-    />
-  }
-  @case ('bearer') {
-    <app-authorization-bearer
-      [authData]="authorizationState?.data"
-      (authDataChange)="authDataChange.emit($event)"
-    />
-  }
-}
+</div>
diff --git a/packages/altair-app/src/app/modules/altair/components/components.module.ts b/packages/altair-app/src/app/modules/altair/components/components.module.ts
@@ -53,11 +53,7 @@ import { AuthorizationBearerComponent } from './authorization/authorization-bear
 import { AuthorizationBasicComponent } from './authorization/authorization-basic/authorization-basic.component';
 import { AuthorizationApikeyComponent } from './authorization/authorization-apikey/authorization-apikey.component';
 
-const STANDALONE_COMPONENTS = [
-  AuthorizationApikeyComponent,
-  AuthorizationBearerComponent,
-  AuthorizationBasicComponent,
-];
+// const STANDALONE_COMPONENTS = [];
 const COMPONENTS = [
   HeaderComponent,
   QueryEditorComponent,
@@ -98,6 +94,9 @@ const COMPONENTS = [
   QueryRevisionDialogComponent,
   UpgradeDialogComponent,
   AuthorizationEditorComponent,
+  AuthorizationApikeyComponent,
+  AuthorizationBearerComponent,
+  AuthorizationBasicComponent,
 ];
 
 @NgModule({
@@ -110,7 +109,7 @@ const COMPONENTS = [
     DirectivesModule,
     SharedModule,
     SchemaFormModule,
-    ...STANDALONE_COMPONENTS,
+    // ...STANDALONE_COMPONENTS,
   ],
   declarations: COMPONENTS,
   exports: [...COMPONENTS],

diff --git a/packages/altair-app/src/app/modules/altair/components/x-input/x-input.component.ts b/packages/altair-app/src/app/modules/altair/components/x-input/x-input.component.ts
@@ -14,12 +14,7 @@ import {
   CompletionContext,
   completionKeymap,
 } from '@codemirror/autocomplete';
-import {
-  EditorState,
-  Extension,
-  StateEffect,
-  StateField,
-} from '@codemirror/state';
+import { EditorState, Extension, StateEffect, StateField } from '@codemirror/state';
 import {
   Decoration,
   DecorationSet,
@@ -65,13 +60,12 @@ export class XInputComponent implements AfterViewInit, ControlValueAccessor {
   private innerValue = '';
   private activeEnvironment: IEnvironment = {};
 
-  highlightEnvVariable =
-    StateEffect.define<{
-      from: number;
-      to: number;
-      value: string;
-      found: boolean;
-    }>();
+  highlightEnvVariable = StateEffect.define<{
+    from: number;
+    to: number;
+    value: string;
+    found: boolean;
+  }>();
   envHighlightTheme = EditorView.baseTheme({
     '.cm-env-var-highlight': { color: 'var(--red-color)', cursor: 'pointer' },
     '.cm-env-var-highlight--found': {
@@ -87,7 +81,15 @@ export class XInputComponent implements AfterViewInit, ControlValueAccessor {
     private environmentService: EnvironmentService,
     private zone: NgZone
   ) {}
+
   ngAfterViewInit(): void {
+    this.setReady();
+  }
+
+  setReady() {
+    if (this.ready) {
+      return;
+    }
     this.ready = true;
     this.extensions = this.getExtensions();
   }
@@ -248,10 +250,7 @@ export class XInputComponent implements AfterViewInit, ControlValueAccessor {
 
     if (view.state.field(this.highlightField, false)) {
       effects.push(
-        StateEffect.appendConfig.of([
-          this.highlightField,
-          this.envHighlightTheme,
-        ])
+        StateEffect.appendConfig.of([this.highlightField, this.envHighlightTheme])
       );
     }
 
@@ -315,6 +314,7 @@ export class XInputComponent implements AfterViewInit, ControlValueAccessor {
 
   // From ControlValueAccessor interface
   writeValue(value: string) {
+    this.setReady();
     if (value !== this.innerValue) {
       this.innerValue = value;
     }