Final Staging

.github/workflows/release.yml

@@ -18,15 +18,15 @@ jobs:
           repo_token: ${{ secrets.github_token }}
           prerelease: false
           draft: true
-      # - id: staging-pr
+      # - id: master-pr
       #   uses: peter-evans/create-pull-request@v3
       #   with:
-      #     branch: staging
+      #     branch: master
       #     base: master
-      #     title: Staging to master
+      #     title: master to master
     outputs:
       release-tag: ${{ steps.release-draft.outputs.automatic_releases_tag }}
-      # staging-pr-id: ${{ steps.staging-pr.outputs.pull-request-number }}
+      # master-pr-id: ${{ steps.master-pr.outputs.pull-request-number }}
   electron:
     strategy:
       matrix:
@@ -124,7 +124,7 @@ jobs:
       # - uses: peter-evans/enable-pull-request-automerge@v1
       #   with:
       #     token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
-      #     pull-request-number: ${{ needs.prepare-release.outputs.staging-pr-id }}
+      #     pull-request-number: ${{ needs.prepare-release.outputs.master-pr-id }}
   deploy-docs:
     name: Deploy docs
     runs-on: ubuntu-latest

.github/workflows/staging.yml

@@ -1,9 +1,9 @@
-name: Staging
+name: Master
 
 on:
   push:
     branches:
-      - staging
+      - master
 
 jobs:
   translate:

README.md

@@ -58,7 +58,7 @@ Altair provides several features that make developing with GraphQL very efficien
 
 ### Missing feature?
 
-Is there a feature that is missing? You can let us know by creating a [new issue](https://github.com/altair-graphql/altair/issues/new) or you can add the feature by creating a [Pull Request](https://github.com/altair-graphql/altair/blob/staging/.github/CONTRIBUTING.md).
+Is there a feature that is missing? You can let us know by creating a [new issue](https://github.com/altair-graphql/altair/issues/new) or you can add the feature by creating a [Pull Request](https://github.com/altair-graphql/altair/blob/master/.github/CONTRIBUTING.md).
 
 ## Sponsors
 Thanks to all our sponsors for sponsoring this project! Do you use Altair GraphQL client at your company? Consider supporting this project as a major sponsor (primary, gold, silver or bronze) on [open collective](https://opencollective.com/altair/contribute).
@@ -126,7 +126,7 @@ $ composer require xkojimedia/laravel-altair-graphql
 *You can find other available integrations here: https://altair.sirmuel.design/docs/integrations*
 
 ### Configuration Options
-When using a custom instance of Altair, there are [couple of options](https://github.com/altair-graphql/altair/blob/staging/packages/altair-app/src/app/modules/altair/config.ts#L9) you can use to customize Altair based on your needs:
+When using a custom instance of Altair, there are [couple of options](https://github.com/altair-graphql/altair/blob/master/packages/altair-app/src/app/modules/altair/config.ts#L9) you can use to customize Altair based on your needs:
 
 - `endpointURL` `string` - URL to set as the server endpoint
 - `subscriptionsEndpoint` `string` - URL to set as the subscription endpoint

bin/publish_packages_local.sh

@@ -12,4 +12,4 @@ LATEST_TAG=$(git describe --tags `git rev-list --tags --max-count=1`)
 git checkout $LATEST_TAG
 yarn lerna bootstrap
 yarn lerna publish from-git --force-publish=* --no-git-tag-version --no-push --yes
-git checkout staging
+git checkout master

chocolatey/altair-graphql.nuspec

@@ -41,10 +41,10 @@ This is a nuspec. It mostly adheres to https://docs.nuget.org/create/Nuspec-Refe
     <iconUrl>https://altair.sirmuel.design/assets/img/altair_logo_128.png</iconUrl>
     <!-- <copyright>Year Software Vendor</copyright> -->
     <!-- If there is a license Url available, it is required for the community feed -->
-    <licenseUrl>https://github.com/altair-graphql/altair/blob/staging/.github/LICENSE</licenseUrl>
+    <licenseUrl>https://github.com/altair-graphql/altair/blob/master/.github/LICENSE</licenseUrl>
     <!-- <requireLicenseAcceptance>true</requireLicenseAcceptance>-->
     <projectSourceUrl>https://github.com/imolorhe/altair</projectSourceUrl>
-    <docsUrl>https://github.com/altair-graphql/altair/blob/staging/chocolatey/README.md</docsUrl>
+    <docsUrl>https://github.com/altair-graphql/altair/blob/master/chocolatey/README.md</docsUrl>
     <!--<mailingListUrl></mailingListUrl>-->
     <bugTrackerUrl>https://github.com/altair-graphql/altair/issues</bugTrackerUrl>
     <tags>altair-graphql graphql graphql-client altair opensource graphql-editor graphql-ide graphiql graphql-subscriptions</tags>

packages/altair-app/package.json

@@ -22,7 +22,7 @@
     "generate-settings-schema-validator": "./scripts/generate-settings-schema.sh",
     "analyze": "ng build --stats-json && npx webpack-bundle-analyzer dist/stats.json",
     "analyze:prod": "ng build --prod --aot --stats-json && npx webpack-bundle-analyzer dist/stats.json",
-    "webdriver-update-ci": "webdriver-manager update --standalone false --gecko false --versions.chrome=93.0.4577.63"
+    "webdriver-update-ci": "webdriver-manager update --standalone false --gecko false --versions.chrome=95.0.4638.69"
   },
   "dependencies": {
     "@angular/animations": "^12.2.6",

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

@@ -20,6 +20,7 @@ import { getReducer, metaReducers, reducerToken } from './store';
 
 import { QueryEffects } from './effects/query.effect';
 import { WindowsEffects } from './effects/windows.effect';
+import { WindowsMetaEffects } from './effects/windows-meta.effect';
 import { QueryCollectionEffects } from './effects/query-collection.effect';
 import { PluginEventEffects } from './effects/plugin-event.effect';
 import { LocalEffects } from './effects/local.effect';
@@ -139,6 +140,7 @@ const providers = [
     EffectsModule.forRoot([
       QueryEffects,
       WindowsEffects,
+      WindowsMetaEffects,
       QueryCollectionEffects,
       PluginEventEffects,
       LocalEffects,

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,

packages/altair-app/src/app/modules/altair/components/flex-resizer/flex-resizer.component.html

@@ -1 +0,0 @@
-<app-icon name="more-vertical"></app-icon>

packages/altair-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>
+`;

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>

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();
+  });
+});