Merge pull request #1732 from altair-graphql/general-ui-updates

General UI updates
altair-graphql · Oct 29, 2021 · f0206da · f0206da
2 parents e23eb25 + 40c3c52
commit f0206da
Show file tree

Hide file tree

Showing 30 changed files with 1,015 additions and 697 deletions.
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
@@ -9,6 +9,7 @@ import { SharedModule } from '../modules/shared/shared.module';
 import { PipesModule } from '../pipes';
 import { DirectivesModule } from '../directives';
 
+import { HeaderComponent } from './header/header.component';
 import { QueryEditorComponent } from './query-editor/query-editor.component';
 import { QueryResultComponent } from './query-result/query-result.component';
 import { ActionBarComponent } from './action-bar/action-bar.component';
@@ -39,6 +40,7 @@ import { PluginManagerComponent } from './plugin-manager/plugin-manager.componen
 import { ElementWrapperComponent } from './element-wrapper/element-wrapper.component';
 
 const COMPONENTS = [
+  HeaderComponent,
   QueryEditorComponent,
   QueryResultComponent,
   ActionBarComponent,

diff --git a/...ges/altair-app/src/app/modules/altair/components/flex-resizer/flex-resizer.component.html b/...ges/altair-app/src/app/modules/altair/components/flex-resizer/flex-resizer.component.html
@@ -1 +0,0 @@
-<app-icon name="more-vertical"></app-icon>

diff --git a/...-app/src/app/modules/altair/components/header/__snapshots__/header.component.spec.ts.snap b/...-app/src/app/modules/altair/components/header/__snapshots__/header.component.spec.ts.snap
@@ -0,0 +1,104 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HeaderComponent should render correctly 1`] = `
+<app-header>
+  <div
+    class="header__logo-wrapper"
+  >
+    <img
+      alt="logo"
+      class="header__logo"
+      src="assets/img/logo.svg"
+    />
+  </div>
+  <app-window-switcher />
+  <div
+    class="header__actions"
+  >
+    <ul
+      class="header__menu"
+    >
+      
+      <li
+        class="header__menu-item"
+        nz-dropdown=""
+        nztrigger="click"
+      >
+        
+        
+        <span>
+          <app-icon
+            name="eye-off"
+          />
+          <span>
+            
+          </span>
+        </span>
+      </li>
+      <nz-dropdown-menu>
+        <ul
+          class="environments-dropdown__list"
+          nz-menu=""
+        >
+          
+          <li
+            nz-menu-item=""
+          >
+             ... 
+          </li>
+        </ul>
+      </nz-dropdown-menu>
+      <li
+        class="header__menu-item"
+        nz-dropdown=""
+        nztrigger="click"
+      >
+        <app-icon
+          name="settings"
+        />
+      </li>
+      <nz-dropdown-menu>
+        <ul
+          nz-menu=""
+        >
+          <li
+            nz-menu-item=""
+          >
+            
+          </li>
+          <li
+            nz-menu-item=""
+          >
+            
+          </li>
+          <li
+            nz-menu-item=""
+          >
+            
+          </li>
+          <li
+            nz-menu-item=""
+          >
+            
+          </li>
+          <li
+            nz-menu-item=""
+          >
+            
+          </li>
+          <li
+            nz-menu-item=""
+          >
+            
+          </li>
+          <li
+            nz-menu-item=""
+          >
+            
+          </li>
+        </ul>
+      </nz-dropdown-menu>
+    </ul>
+  </div>
+</app-header>
+`;
diff --git a/packages/altair-app/src/app/modules/altair/components/header/header.component.html b/packages/altair-app/src/app/modules/altair/components/header/header.component.html
@@ -0,0 +1,122 @@
+<div
+  class="header__logo-wrapper"
+  [ngClass]="{ 'header__logo-wrapper--experimental': experimentalEnabled }"
+>
+  <img
+    src="assets/img/logo.svg"
+    alt="logo"
+    class="header__logo"
+  >
+</div>
+
+<app-window-switcher
+  [windows]="windows"
+  [windowIds] = "windowIds"
+  [activeWindowId]="activeWindowId"
+  [closedWindows]="closedWindows"
+  [isElectron]="isElectron"
+  (newWindowChange)="newWindowChange.emit($event)"
+  (activeWindowChange)="activeWindowChange.emit($event)"
+  (removeWindowChange)="removeWindowChange.emit($event)"
+  (duplicateWindowChange)="duplicateWindowChange.emit($event)"
+  (windowNameChange)="windowNameChange.emit($event)"
+  (repositionWindowChange)="repositionWindowChange.emit($event)"
+  (reopenClosedWindowChange)="reopenClosedWindowChange.emit($event)"
+></app-window-switcher>
+
+<div class="header__actions">
+  <ul class="header__menu">
+    <li
+      *ngFor="let panel of headerPanels trackBy:trackById"
+      (click)="togglePanelActiveChange.emit(panel)"
+      [popper]="panel.title"
+      [popperPlacement]="'bottom'"
+      class="header__menu-item"
+      [ngClass]="{ 'header__menu-item--active': panel.isActive }"
+    >
+      <app-icon name="cpu"></app-icon>
+      <nz-modal
+        [nzVisible]="panel.isActive"
+        (nzVisibleChange)="togglePanelActiveChange.emit(panel)"
+        [nzTitle]="modalTitle"
+        [nzContent]="modalContent"
+        [nzFooter]="null"
+        (nzOnCancel)="togglePanelActiveChange.emit(panel)"
+      >
+        <ng-template #modalTitle>
+          <div class="app-dialog-header">
+            <div class="app-dialog-title">{{ panel.title }}</div>
+          </div>
+        </ng-template>
+
+        <ng-template #modalContent>
+          <app-element-wrapper
+            [element]="panel.element"
+          ></app-element-wrapper>
+        </ng-template>
+      </nz-modal>
+    </li>
+
+    <li
+      nz-dropdown
+      nzTrigger="click"
+      [nzDropdownMenu]="environmentsMenu"
+      class="header__menu-item"
+    >
+      <span *ngIf="activeEnvironment">
+        <app-icon name="eye"></app-icon>
+        <span>{{ activeEnvironment?.title }}</span>
+      </span>
+      <span *ngIf="activeEnvironment === undefined">
+        <app-icon name="eye-off"></app-icon>
+        <span>{{ 'NO_ENVIRONMENT_TEXT' | translate }}</span>
+      </span>
+    </li>
+    <nz-dropdown-menu #environmentsMenu="nzDropdownMenu">
+      <ul nz-menu class="environments-dropdown__list">
+        <ng-container *ngIf="environments?.subEnvironments.length">
+          <li
+            nz-menu-item
+            (click)="selectActiveEnvironmentChange.emit(environment.id)"
+            *ngFor="let environment of environments.subEnvironments; trackBy:trackById;"
+            [ngClass]="{ 'active': environment.id === activeEnvironment }"
+          >
+            {{ environment.title }}
+          </li>
+          <li
+            nz-menu-item
+            (click)="selectActiveEnvironmentChange.emit(undefined)"
+          >
+            {{ 'NO_ENVIRONMENT_TEXT' | translate }}
+          </li>
+          <li nz-menu-divider></li>
+        </ng-container>
+        <li
+          nz-menu-item
+          (click)="toggleEnvironmentManagerChange.emit(true)"
+        >
+          {{ 'ENVIRONMENTS_BUTTON' | translate }}...
+        </li>
+      </ul>
+    </nz-dropdown-menu>
+    <li
+      nz-dropdown
+      nzTrigger="click"
+      [nzDropdownMenu]="settingsMenu"
+      class="header__menu-item"
+    >
+      <app-icon name="settings"></app-icon>
+    </li>
+    <nz-dropdown-menu #settingsMenu="nzDropdownMenu">
+      <ul nz-menu>
+        <li nz-menu-item (click)="importWindowChange.emit()">{{ 'IMPORT_WINDOW_TEXT' | translate }}</li>
+        <li nz-menu-item (click)="showImportCurlDialogChange.emit(true)">{{ 'IMPORT_WINDOW_FROM_CURL_TEXT' | translate }}</li>
+        <li nz-menu-item (click)="showSettingsDialogChange.emit()">{{ 'SETTINGS_TEXT' | translate }}</li>
+        <li nz-menu-item (click)="openLink($event, 'https://github.com/altair-graphql/altair')">{{ 'STAR_ON_GITHUB_TEXT' | translate }}</li>
+        <li nz-menu-item (click)="openLink($event, 'https://github.com/altair-graphql/altair/issues/new?template=Bug_report.md')">{{ 'REPORT_BUG_TEXT' | translate }}</li>
+        <li nz-menu-item (click)="exportBackupDataChange.emit()">{{ 'EXPORT_BACKUP_DATA_TEXT' | translate }}</li>
+        <li nz-menu-item (click)="importBackupDataChange.emit()">{{ 'IMPORT_BACKUP_DATA_TEXT' | translate }}</li>
+      </ul>
+    </nz-dropdown-menu>
+  </ul>
+</div>
diff --git a/packages/altair-app/src/app/modules/altair/components/header/header.component.spec.ts b/packages/altair-app/src/app/modules/altair/components/header/header.component.spec.ts
@@ -0,0 +1,30 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { expect, describe, it } from '@jest/globals';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MockModule } from 'ng-mocks';
+import { mount, NgxTestWrapper } from '../../../../../testing';
+import { SharedModule } from '../../modules/shared/shared.module';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let wrapper: NgxTestWrapper<HeaderComponent>;
+
+  beforeEach(async() => {
+    wrapper = await mount({
+      component: HeaderComponent,
+      imports: [
+        MockModule(SharedModule),
+      ],
+      schemas: [ NO_ERRORS_SCHEMA ],
+    });
+  });
+
+  it('should create', () => {
+    expect(wrapper.componentInstance).toBeTruthy();
+  });
+
+  it('should render correctly', () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});
diff --git a/packages/altair-app/src/app/modules/altair/components/header/header.component.ts b/packages/altair-app/src/app/modules/altair/components/header/header.component.ts
@@ -0,0 +1,49 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { AltairPanel } from 'altair-graphql-core/build/plugin/panel';
+import { EnvironmentsState, EnvironmentState } from 'altair-graphql-core/build/types/state/environments.interfaces';
+import { externalLink } from '../../utils';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styles: [
+  ]
+})
+export class HeaderComponent  {
+
+  @Input() experimentalEnabled = false;
+  @Input() windows = {};
+  @Input() windowIds = [];
+  @Input() closedWindows = [];
+  @Input() activeWindowId = '';
+  @Input() isElectron = false;
+  @Input() headerPanels: AltairPanel[] = [];
+  @Input() activeEnvironment: EnvironmentState;
+  @Input() environments: EnvironmentsState;
+  @Output() activeWindowChange = new EventEmitter<string>();
+  @Output() newWindowChange = new EventEmitter();
+  @Output() removeWindowChange = new EventEmitter<string>();
+  @Output() duplicateWindowChange = new EventEmitter<string>();
+  @Output() windowNameChange = new EventEmitter<{ windowId: string, windowName: string }>();
+  @Output() repositionWindowChange = new EventEmitter<{ currentPosition: number, newPosition: number }>();
+  @Output() reopenClosedWindowChange = new EventEmitter();
+  @Output() togglePanelActiveChange = new EventEmitter<AltairPanel>();
+  @Output() selectActiveEnvironmentChange = new EventEmitter<string | undefined>();
+  @Output() toggleEnvironmentManagerChange = new EventEmitter<boolean>();
+  @Output() showSettingsDialogChange = new EventEmitter();
+  @Output() importWindowChange = new EventEmitter();
+  @Output() showImportCurlDialogChange = new EventEmitter<boolean>();
+  @Output() exportBackupDataChange = new EventEmitter();
+  @Output() importBackupDataChange = new EventEmitter();
+
+  constructor() { }
+
+  openLink(e: Event, url: string) {
+    externalLink(e, url);
+  }
+
+  trackById(index: number, item: any) {
+    return item.id;
+  }
+
+}
diff --git a/packages/altair-app/src/app/modules/altair/components/query-editor/query-editor.component.ts b/packages/altair-app/src/app/modules/altair/components/query-editor/query-editor.component.ts
@@ -61,6 +61,7 @@ const AUTOCOMPLETE_CHARS = /^[a-zA-Z0-9_@(]$/;
 })
 export class QueryEditorComponent implements OnInit, AfterViewInit, OnChanges {
 
+  @Input() activeWindowId = null;
   @Input() query = '';
   @Input() gqlSchema: GraphQLSchema;
   @Input() tabSize = 2;
@@ -227,6 +228,10 @@ export class QueryEditorComponent implements OnInit, AfterViewInit, OnChanges {
       // Update the editor shortcuts based on the provided shortcuts
       this.updateEditorShortcuts(changes.shortcutMapping.currentValue);
     }
+
+    if (changes?.activeWindowId?.currentValue) {
+      handleEditorRefresh(this.editor && this.editor.codeMirror);
+    }
   }
 
   /**