From 937a11ec3c8c274b4faf129d9058955297dc2ace Mon Sep 17 00:00:00 2001
From: Samuel Imolorhe <samuelimolo4real@gmail.com>
Date: Sat, 17 Feb 2024 01:46:29 +0100
Subject: [PATCH] Implement import/export of environments

---
 .../environment-manager.component.html        |  17 ++-
 .../environment-manager.component.ts          |   2 +
 .../fancy-input-marker.component.spec.ts      |   7 +-
 .../x-input/x-input.component.spec.ts         |   6 +
 .../containers/altair/altair.component.html   |   2 +
 .../altair/altair.component.spec.ts           |   8 ++
 .../containers/altair/altair.component.ts     |  43 ++++--
 .../app/modules/altair/interfaces/shared.ts   |   2 +
 .../app/modules/altair/modules/icons/icons.ts |   2 +
 .../environment/environment.service.spec.ts   |   6 +
 .../environment/environment.service.ts        |  54 ++++++-
 .../services/files/files.service.spec.ts      |  45 ++++++
 .../altair/services/files/files.service.ts    | 132 ++++++++++++++++++
 .../modules/altair/services/files/types.ts    |  23 +++
 .../src/app/modules/altair/services/index.ts  |   1 +
 .../modules/altair/services/window.service.ts |   2 +
 .../store/environments/environments.action.ts |   6 +-
 .../environments/environments.reducer.ts      |   9 +-
 .../src/app/modules/altair/utils/index.ts     |   5 +-
 .../altair-app/src/assets/i18n/default.json   |   1 +
 packages/altair-app/src/scss/_buttons.scss    |   4 +
 .../types/state/environments.interfaces.ts    |   6 +-
 packages/altair-electron/electron-builder.yml |   3 +
 23 files changed, 363 insertions(+), 23 deletions(-)
 create mode 100644 packages/altair-app/src/app/modules/altair/services/files/files.service.spec.ts
 create mode 100644 packages/altair-app/src/app/modules/altair/services/files/files.service.ts
 create mode 100644 packages/altair-app/src/app/modules/altair/services/files/types.ts

diff --git a/packages/altair-app/src/app/modules/altair/components/environment-manager/environment-manager.component.html b/packages/altair-app/src/app/modules/altair/components/environment-manager/environment-manager.component.html
index b69cea6939..4b9920fce1 100644
--- a/packages/altair-app/src/app/modules/altair/components/environment-manager/environment-manager.component.html
+++ b/packages/altair-app/src/app/modules/altair/components/environment-manager/environment-manager.component.html
@@ -67,10 +67,18 @@
             <div class="environment-manager__list-actions">
               <button
                 class="app-button full-width"
-                (click)="addSubEnvironmentChange.next()"
+                (click)="addSubEnvironmentChange.emit()"
                 >
+                <app-icon name="plus-circle"></app-icon>
                 {{ 'ADD_SUB_ENVIRONMENT_BUTTON' | translate }}
               </button>
+              <button
+                class="app-button full-width"
+                (click)="importEnvironmentChange.emit()"
+                >
+                <app-icon name="log-in"></app-icon>
+                {{ 'IMPORT_BUTTON' | translate }}
+              </button>
             </div>
           </div>
           <div class="environment-manager__editor-wrapper">
@@ -91,6 +99,13 @@
                     />
                 </div>
                 <div class="environment-manager__editor-meta-actions">
+                  <button
+                    class="app-button"
+                    (click)="exportEnvironmentChange.emit(selectedEnvironment)"
+                    >
+                    <app-icon name="file-down"></app-icon>
+                    {{ 'EXPORT_TEXT' | translate }}
+                  </button>
                   <button
                     class="app-button icon-button active-destructive"
                     (click)="onDeleteSubEnvironment()"
diff --git a/packages/altair-app/src/app/modules/altair/components/environment-manager/environment-manager.component.ts b/packages/altair-app/src/app/modules/altair/components/environment-manager/environment-manager.component.ts
index b411c35408..5bc9208911 100644
--- a/packages/altair-app/src/app/modules/altair/components/environment-manager/environment-manager.component.ts
+++ b/packages/altair-app/src/app/modules/altair/components/environment-manager/environment-manager.component.ts
@@ -55,6 +55,8 @@ export class EnvironmentManagerComponent implements OnInit, OnChanges {
   @Output() addSubEnvironmentChange = new EventEmitter();
   @Output() deleteSubEnvironmentChange = new EventEmitter();
   @Output() repositionSubEnvironmentsChange = new EventEmitter();
+  @Output() importEnvironmentChange = new EventEmitter();
+  @Output() exportEnvironmentChange = new EventEmitter<EnvironmentState>();
 
   @ViewChild('subEnvironmentTitle') subEnvironmentTitleEl?: ElementRef;
 
diff --git a/packages/altair-app/src/app/modules/altair/components/fancy-input-marker/fancy-input-marker.component.spec.ts b/packages/altair-app/src/app/modules/altair/components/fancy-input-marker/fancy-input-marker.component.spec.ts
index 3ab3a0c137..7b521e4a7c 100644
--- a/packages/altair-app/src/app/modules/altair/components/fancy-input-marker/fancy-input-marker.component.spec.ts
+++ b/packages/altair-app/src/app/modules/altair/components/fancy-input-marker/fancy-input-marker.component.spec.ts
@@ -1,10 +1,11 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { Store } from '@ngrx/store';
 import { SharedModule } from '../../modules/shared/shared.module';
-import { MockModule } from 'ng-mocks';
+import { MockModule, MockService } from 'ng-mocks';
 import { mockStoreFactory } from '../../../../../testing';
 
 import { FancyInputMarkerComponent } from './fancy-input-marker.component';
+import { EnvironmentService } from '../../services';
 
 describe('FancyInputMarkerComponent', () => {
   let component: FancyInputMarkerComponent;
@@ -15,6 +16,10 @@ describe('FancyInputMarkerComponent', () => {
       declarations: [FancyInputMarkerComponent],
       imports: [MockModule(SharedModule)],
       providers: [
+        {
+          provide: EnvironmentService,
+          useValue: MockService(EnvironmentService),
+        },
         {
           provide: Store,
           useValue: mockStoreFactory(),
diff --git a/packages/altair-app/src/app/modules/altair/components/x-input/x-input.component.spec.ts b/packages/altair-app/src/app/modules/altair/components/x-input/x-input.component.spec.ts
index 92b98d03e2..a897e82807 100644
--- a/packages/altair-app/src/app/modules/altair/components/x-input/x-input.component.spec.ts
+++ b/packages/altair-app/src/app/modules/altair/components/x-input/x-input.component.spec.ts
@@ -3,6 +3,8 @@ import { Store } from '@ngrx/store';
 import { mockStoreFactory } from '../../../../../testing';
 
 import { XInputComponent } from './x-input.component';
+import { EnvironmentService } from '../../services';
+import { MockService } from 'ng-mocks';
 
 describe('XInputComponent', () => {
   let component: XInputComponent;
@@ -13,6 +15,10 @@ describe('XInputComponent', () => {
     await TestBed.configureTestingModule({
       declarations: [XInputComponent],
       providers: [
+        {
+          provide: EnvironmentService,
+          useValue: MockService(EnvironmentService),
+        },
         {
           provide: Store,
           useValue: mockStore,
diff --git a/packages/altair-app/src/app/modules/altair/containers/altair/altair.component.html b/packages/altair-app/src/app/modules/altair/containers/altair/altair.component.html
index ba6a6c68a6..9a241b4572 100644
--- a/packages/altair-app/src/app/modules/altair/containers/altair/altair.component.html
+++ b/packages/altair-app/src/app/modules/altair/containers/altair/altair.component.html
@@ -385,6 +385,8 @@
             (repositionSubEnvironmentsChange)="
               repositionSubEnvironments($event)
             "
+            (importEnvironmentChange)="importEnvironmentData()"
+            (exportEnvironmentChange)="exportEnvironment($event)"
           ></app-environment-manager>
           <app-plugin-manager
             [showPluginManager]="(windowsMeta$ | async)?.showPluginManager"
diff --git a/packages/altair-app/src/app/modules/altair/containers/altair/altair.component.spec.ts b/packages/altair-app/src/app/modules/altair/containers/altair/altair.component.spec.ts
index 473c736d6e..21b4453e55 100644
--- a/packages/altair-app/src/app/modules/altair/containers/altair/altair.component.spec.ts
+++ b/packages/altair-app/src/app/modules/altair/containers/altair/altair.component.spec.ts
@@ -61,6 +61,14 @@ describe('AltairComponent', () => {
         provide: services.NotifyService,
         useValue: mock(),
       },
+      {
+        provide: services.FilesService,
+        useValue: mock(),
+      },
+      {
+        provide: services.EnvironmentService,
+        useValue: mock(),
+      },
       {
         provide: TranslateService,
         useValue: mock({
diff --git a/packages/altair-app/src/app/modules/altair/containers/altair/altair.component.ts b/packages/altair-app/src/app/modules/altair/containers/altair/altair.component.ts
index 651e4e204d..e26fb609f5 100644
--- a/packages/altair-app/src/app/modules/altair/containers/altair/altair.component.ts
+++ b/packages/altair-app/src/app/modules/altair/containers/altair/altair.component.ts
@@ -40,6 +40,9 @@ import {
   QueryCollectionService,
   ThemeRegistryService,
   SharingService,
+  FilesService,
+  EnvironmentService,
+  NotifyService,
 } from '../../services';
 
 import isElectron from 'altair-graphql-core/build/utils/is_electron';
@@ -63,7 +66,7 @@ import { RootState } from 'altair-graphql-core/build/types/state/state.interface
 import { AltairConfig } from 'altair-graphql-core/build/config';
 import { WindowState } from 'altair-graphql-core/build/types/state/window.interfaces';
 import { AltairPanel } from 'altair-graphql-core/build/plugin/panel';
-import { externalLink, mapToKeyValueList } from '../../utils';
+import { externalLink, mapToKeyValueList, openFiles } from '../../utils';
 import { AccountState } from 'altair-graphql-core/build/types/state/account.interfaces';
 import { catchUselessObservableError } from '../../utils/errors';
 import { PerWindowState } from 'altair-graphql-core/build/types/state/per-window.interfaces';
@@ -128,6 +131,9 @@ export class AltairComponent {
     private collectionService: QueryCollectionService,
     private themeRegistry: ThemeRegistryService,
     private sharingService: SharingService,
+    private filesService: FilesService,
+    private environmentService: EnvironmentService,
+    private notifyService: NotifyService,
     private altairConfig: AltairConfig
   ) {
     this.isWebApp = altairConfig.isWebApp;
@@ -654,6 +660,22 @@ export class AltairComponent {
       })
     );
   }
+  async importEnvironmentData() {
+    const data = await openFiles({ accept: '.agx' });
+
+    return data.map((content) => {
+      this.environmentService.importEnvironmentData(JSON.parse(content));
+    });
+  }
+  async exportEnvironment(environment: EnvironmentState) {
+    if (
+      await this.notifyService.confirm(
+        'Reminder: Your environment data may contain sensitive information. Are you sure you want to export it?'
+      )
+    ) {
+      this.environmentService.exportEnvironmentData(environment);
+    }
+  }
 
   toggleCollections() {
     this.showCollections = !this.showCollections;
@@ -854,20 +876,13 @@ export class AltairComponent {
   }
 
   async fileDropped(files: FileList) {
-    if (files && files.length) {
-      try {
-        // Handle window import
-        await this.windowService.handleImportedFile(files);
-      } catch (error) {
-        debug.log(error);
-        try {
-          // Handle collection import
-          await this.collectionService.handleImportedFile(files);
-        } catch (collectionError) {
-          debug.log(collectionError);
-        }
-      }
+    const file = files[0];
+    if (!file) {
+      debug.log('No file specified.');
+      return;
     }
+
+    await this.filesService.handleImportedFile(file);
   }
 
   hideDonationAlert() {
diff --git a/packages/altair-app/src/app/modules/altair/interfaces/shared.ts b/packages/altair-app/src/app/modules/altair/interfaces/shared.ts
index 07af562ee9..6a2e9a8806 100644
--- a/packages/altair-app/src/app/modules/altair/interfaces/shared.ts
+++ b/packages/altair-app/src/app/modules/altair/interfaces/shared.ts
@@ -6,6 +6,8 @@ export type TODO = any;
 
 export type UnknownError<V = unknown> = V | Error | string;
 
+export type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
+
 export interface TrackByIdItem {
   id: string;
 }
diff --git a/packages/altair-app/src/app/modules/altair/modules/icons/icons.ts b/packages/altair-app/src/app/modules/altair/modules/icons/icons.ts
index e2f961a331..0a0bae721f 100644
--- a/packages/altair-app/src/app/modules/altair/modules/icons/icons.ts
+++ b/packages/altair-app/src/app/modules/altair/modules/icons/icons.ts
@@ -23,6 +23,7 @@ import {
   Eye,
   EyeOff,
   File,
+  FileDown,
   FilePlus,
   FlaskConical,
   Folder,
@@ -90,6 +91,7 @@ export const icons = {
   Eye,
   EyeOff,
   File,
+  FileDown,
   FilePlus,
   FlaskConical,
   Folder,
diff --git a/packages/altair-app/src/app/modules/altair/services/environment/environment.service.spec.ts b/packages/altair-app/src/app/modules/altair/services/environment/environment.service.spec.ts
index 6caa98b8cc..4b76b44e21 100644
--- a/packages/altair-app/src/app/modules/altair/services/environment/environment.service.spec.ts
+++ b/packages/altair-app/src/app/modules/altair/services/environment/environment.service.spec.ts
@@ -6,6 +6,8 @@ import { Store } from '@ngrx/store';
 import { Subscription } from 'rxjs';
 import { mock } from '../../../../../testing';
 import { RootState } from 'altair-graphql-core/build/types/state/state.interfaces';
+import { NotifyService } from '../notify/notify.service';
+import { MockService } from 'ng-mocks';
 
 let mockStore: Store<RootState>;
 
@@ -45,6 +47,10 @@ describe('EnvironmentService', () => {
     TestBed.configureTestingModule({
       providers: [
         EnvironmentService,
+        {
+          provide: NotifyService,
+          useValue: MockService(NotifyService),
+        },
         {
           provide: Store,
           useFactory: () => mockStore,
diff --git a/packages/altair-app/src/app/modules/altair/services/environment/environment.service.ts b/packages/altair-app/src/app/modules/altair/services/environment/environment.service.ts
index f87e633699..53fb5a4642 100644
--- a/packages/altair-app/src/app/modules/altair/services/environment/environment.service.ts
+++ b/packages/altair-app/src/app/modules/altair/services/environment/environment.service.ts
@@ -7,10 +7,17 @@ import * as fromRoot from '../../store';
 import * as fromEnvironments from '../../store/environments/environments.reducer';
 import * as fromHeaders from '../../store/headers/headers.reducer';
 import { IDictionary } from '../../interfaces/shared';
-import { EnvironmentsState } from 'altair-graphql-core/build/types/state/environments.interfaces';
+import * as environmentsActions from '../../store/environments/environments.action';
+import {
+  EnvironmentState,
+  EnvironmentsState,
+  ExportEnvironmentState,
+} from 'altair-graphql-core/build/types/state/environments.interfaces';
 import { RootState } from 'altair-graphql-core/build/types/state/state.interfaces';
 import { HeaderState } from 'altair-graphql-core/build/types/state/header.interfaces';
 import { merge } from 'lodash-es';
+import { downloadJson } from '../../utils';
+import { NotifyService } from '../notify/notify.service';
 
 // Unfortunately, Safari doesn't support lookbehind in regex: https://caniuse.com/js-regexp-lookbehind
 // So have to go with an alternative approach using lookahead instead
@@ -30,7 +37,10 @@ interface HydrateEnvironmentOptions {
 export class EnvironmentService {
   environmentsState?: EnvironmentsState;
 
-  constructor(private store: Store<RootState>) {
+  constructor(
+    private notifyService: NotifyService,
+    private store: Store<RootState>
+  ) {
     this.store.subscribe({
       next: (data) => {
         this.environmentsState = data.environments;
@@ -163,4 +173,44 @@ export class EnvironmentService {
 
     return hydratedHeaders;
   }
+
+  importEnvironmentData(data: ExportEnvironmentState) {
+    if (!data.version || !data.type || data.type !== 'environment') {
+      throw new Error('File is not a valid Altair environment file.');
+    }
+
+    const id = uuid();
+    this.store.dispatch(
+      new environmentsActions.AddSubEnvironmentAction({
+        ...data,
+        id,
+      })
+    );
+    this.notifyService.success(
+      `${data.title ?? 'New'} environment imported successfully`
+    );
+  }
+
+  exportEnvironmentData(environment: EnvironmentState) {
+    return downloadJson(
+      this.getExportEnvironmentData(environment),
+      `${environment.title}_exported`,
+      {
+        fileType: 'agx',
+      }
+    );
+  }
+
+  getExportEnvironmentData(
+    environment: EnvironmentState
+  ): ExportEnvironmentState {
+    const exportCollectionData: ExportEnvironmentState = {
+      version: 1,
+      type: 'environment',
+      id: environment.id,
+      title: environment.title,
+      variables: JSON.parse(environment.variablesJson),
+    };
+    return exportCollectionData;
+  }
 }
diff --git a/packages/altair-app/src/app/modules/altair/services/files/files.service.spec.ts b/packages/altair-app/src/app/modules/altair/services/files/files.service.spec.ts
new file mode 100644
index 0000000000..a216960a61
--- /dev/null
+++ b/packages/altair-app/src/app/modules/altair/services/files/files.service.spec.ts
@@ -0,0 +1,45 @@
+import { TestBed } from '@angular/core/testing';
+
+import { FilesService } from './files.service';
+import { MockService } from 'ng-mocks';
+import { WindowService } from '../window.service';
+import { NotifyService } from '../notify/notify.service';
+import { EnvironmentService } from '../environment/environment.service';
+import { GqlService } from '../gql/gql.service';
+import { QueryCollectionService } from '../query-collection/query-collection.service';
+
+describe('FilesService', () => {
+  let service: FilesService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        {
+          provide: WindowService,
+          useValue: MockService(WindowService),
+        },
+        {
+          provide: GqlService,
+          useValue: MockService(GqlService),
+        },
+        {
+          provide: NotifyService,
+          useValue: MockService(NotifyService),
+        },
+        {
+          provide: EnvironmentService,
+          useValue: MockService(EnvironmentService),
+        },
+        {
+          provide: QueryCollectionService,
+          useValue: MockService(QueryCollectionService),
+        },
+      ],
+    });
+    service = TestBed.inject(FilesService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/packages/altair-app/src/app/modules/altair/services/files/files.service.ts b/packages/altair-app/src/app/modules/altair/services/files/files.service.ts
new file mode 100644
index 0000000000..b0d5b9811e
--- /dev/null
+++ b/packages/altair-app/src/app/modules/altair/services/files/files.service.ts
@@ -0,0 +1,132 @@
+import { Injectable } from '@angular/core';
+import { WindowService } from '../window.service';
+import { QueryCollectionService } from '../query-collection/query-collection.service';
+import { ExportWindowState } from 'altair-graphql-core/build/types/state/window.interfaces';
+import { getFileStr } from '../../utils';
+import { NotifyService } from '../notify/notify.service';
+import { GqlService } from '../gql/gql.service';
+import { debug } from '../../utils/logger';
+import { EnvironmentService } from '../environment/environment.service';
+import { AltairFile } from './types';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class FilesService {
+  constructor(
+    private windowService: WindowService,
+    private collectionService: QueryCollectionService,
+    private gqlService: GqlService,
+    private environmentService: EnvironmentService,
+    private notifyService: NotifyService
+  ) {}
+
+  async handleImportedFile(file: File) {
+    const dataStr = await getFileStr(file);
+
+    try {
+      const parsed = this.parseAsJson(dataStr);
+
+      switch (parsed.type) {
+        case 'window':
+          if (parsed.version === 1) {
+            return this.windowService.importWindowData(parsed, {
+              fixedTitle: true,
+            });
+          }
+          throw new Error('Invalid Altair window file.');
+        case 'collection':
+          if (parsed.version === 1) {
+            return this.collectionService.importCollectionData(parsed);
+          }
+          throw new Error('Invalid Altair collection file.');
+        case 'environment':
+          if (parsed.version === 1) {
+            return this.environmentService.importEnvironmentData(parsed);
+          }
+          throw new Error('Invalid Altair environment file.');
+        default:
+          throw new Error('Invalid Altair file.');
+      }
+    } catch (err) {
+      // If not JSON, try other formats..
+      if (this.trySdlImport(dataStr)) {
+        return;
+      }
+      if (this.tryQueryImport(dataStr)) {
+        return;
+      }
+      debug.log('Invalid Altair window file.', err);
+      this.notifyService.error('Invalid Altair file.');
+      throw err;
+    }
+  }
+
+  private parseAsJson(dataStr: string): AltairFile {
+    try {
+      return JSON.parse(dataStr) as AltairFile;
+    } catch (err) {
+      return JSON.parse(decodeURIComponent(dataStr)) as AltairFile;
+    }
+  }
+
+  private trySdlImport(dataStr: string): boolean {
+    const emptyWindowData: ExportWindowState = {
+      version: 1,
+      type: 'window',
+      apiUrl: '',
+      headers: [],
+      preRequestScript: '',
+      preRequestScriptEnabled: false,
+      query: '',
+      subscriptionUrl: '',
+      subscriptionConnectionParams: '',
+      variables: '{}',
+      windowName: '',
+    };
+    try {
+      const schema = this.gqlService.sdlToSchema(dataStr);
+      // Import only schema
+      this.windowService.importWindowData({
+        ...emptyWindowData,
+        version: 1,
+        type: 'window',
+        gqlSchema: schema,
+      });
+      this.notifyService.success(
+        'Successfully imported GraphQL schema. Open the docs section to view it.'
+      );
+      return true;
+    } catch (sdlError) {
+      return false;
+    }
+  }
+
+  private tryQueryImport(dataStr: string): boolean {
+    const emptyWindowData: ExportWindowState = {
+      version: 1,
+      type: 'window',
+      apiUrl: '',
+      headers: [],
+      preRequestScript: '',
+      preRequestScriptEnabled: false,
+      query: '',
+      subscriptionUrl: '',
+      subscriptionConnectionParams: '',
+      variables: '{}',
+      windowName: '',
+    };
+    const operations = this.gqlService.getOperations(dataStr);
+    if (operations && operations.length) {
+      // Import only query
+      this.windowService.importWindowData({
+        ...emptyWindowData,
+        version: 1,
+        type: 'window',
+        query: dataStr,
+      });
+      return true;
+    }
+    return false;
+  }
+}
diff --git a/packages/altair-app/src/app/modules/altair/services/files/types.ts b/packages/altair-app/src/app/modules/altair/services/files/types.ts
new file mode 100644
index 0000000000..adef195b72
--- /dev/null
+++ b/packages/altair-app/src/app/modules/altair/services/files/types.ts
@@ -0,0 +1,23 @@
+import { ExportCollectionState } from 'altair-graphql-core/build/types/state/collection.interfaces';
+import { ExportEnvironmentState } from 'altair-graphql-core/build/types/state/environments.interfaces';
+import { ExportWindowState } from 'altair-graphql-core/build/types/state/window.interfaces';
+
+export type AltairFile =
+  | ExportWindowState
+  | ExportCollectionState
+  | ExportEnvironmentState;
+
+export const ALTAIR_FILE_EXTENSIONS = {
+  QUERY: 'agq',
+  COLLECTION: 'agc',
+  ENVIRONMENT: 'agx',
+  BACKUP: 'agbkp',
+} as const;
+
+export type AltairFileExtension =
+  typeof ALTAIR_FILE_EXTENSIONS[keyof typeof ALTAIR_FILE_EXTENSIONS];
+export type SupportedFileExtensions =
+  | AltairFileExtension
+  | 'json'
+  | 'txt'
+  | 'gql';
diff --git a/packages/altair-app/src/app/modules/altair/services/index.ts b/packages/altair-app/src/app/modules/altair/services/index.ts
index 717ca2e991..1b70c3f110 100644
--- a/packages/altair-app/src/app/modules/altair/services/index.ts
+++ b/packages/altair-app/src/app/modules/altair/services/index.ts
@@ -18,3 +18,4 @@ export { PluginContextService } from './plugin/context/plugin-context.service';
 export { QueryService } from './query/query.service';
 export { AccountService } from './account/account.service';
 export { SharingService } from './sharing/sharing.service';
+export { FilesService } from './files/files.service';
diff --git a/packages/altair-app/src/app/modules/altair/services/window.service.ts b/packages/altair-app/src/app/modules/altair/services/window.service.ts
index 025e3dcdd1..d47f5ef633 100644
--- a/packages/altair-app/src/app/modules/altair/services/window.service.ts
+++ b/packages/altair-app/src/app/modules/altair/services/window.service.ts
@@ -37,6 +37,8 @@ interface ImportWindowDataOptions {
   fixedTitle?: boolean;
 }
 
+type AltairFile = ExportWindowState;
+
 @Injectable()
 export class WindowService {
   constructor(
diff --git a/packages/altair-app/src/app/modules/altair/store/environments/environments.action.ts b/packages/altair-app/src/app/modules/altair/store/environments/environments.action.ts
index 8e4419ccf1..cf7e7bb748 100644
--- a/packages/altair-app/src/app/modules/altair/store/environments/environments.action.ts
+++ b/packages/altair-app/src/app/modules/altair/store/environments/environments.action.ts
@@ -1,4 +1,6 @@
 import { Action as NGRXAction } from '@ngrx/store';
+import { WithRequired } from '../../interfaces/shared';
+import { InitialEnvironmentState } from 'altair-graphql-core/build/types/state/environments.interfaces';
 
 export const ADD_SUB_ENVIRONMENT = 'ADD_SUB_ENVIRONMENT';
 export const DELETE_SUB_ENVIRONMENT = 'DELETE_SUB_ENVIRONMENT';
@@ -13,7 +15,9 @@ export const REPOSITION_SUB_ENVIRONMENT = 'REPOSITION_SUB_ENVIRONMENT';
 export class AddSubEnvironmentAction implements NGRXAction {
   readonly type = ADD_SUB_ENVIRONMENT;
 
-  constructor(public payload: { id: string }) {}
+  constructor(
+    public payload: WithRequired<Partial<InitialEnvironmentState>, 'id'>
+  ) {}
 }
 
 export class DeleteSubEnvironmentAction implements NGRXAction {
diff --git a/packages/altair-app/src/app/modules/altair/store/environments/environments.reducer.ts b/packages/altair-app/src/app/modules/altair/store/environments/environments.reducer.ts
index d82d2c6bd0..35ea1f5b4f 100644
--- a/packages/altair-app/src/app/modules/altair/store/environments/environments.reducer.ts
+++ b/packages/altair-app/src/app/modules/altair/store/environments/environments.reducer.ts
@@ -54,7 +54,14 @@ export function environmentsReducer(
           {
             ...getInitialEnvironmentState(),
             id: action.payload.id,
-            title: `Environment ${state.subEnvironments.length + 1}`,
+            title:
+              action.payload.title ??
+              `Environment ${state.subEnvironments.length + 1}`,
+            variablesJson: JSON.stringify(
+              action.payload.variables ?? {},
+              null,
+              2
+            ),
           },
         ],
       };
diff --git a/packages/altair-app/src/app/modules/altair/utils/index.ts b/packages/altair-app/src/app/modules/altair/utils/index.ts
index 4943083cda..7546e85daa 100644
--- a/packages/altair-app/src/app/modules/altair/utils/index.ts
+++ b/packages/altair-app/src/app/modules/altair/utils/index.ts
@@ -9,11 +9,12 @@ import { commentRegex } from './comment-regex';
 import { from } from 'rxjs';
 import { take } from 'rxjs/operators';
 import { electronApiKey } from '@altairgraphql/electron-interop/build/constants';
+import { SupportedFileExtensions } from '../services/files/types';
 
 interface DownloadDataOptions {
   mimeType?: string;
   dataUriAttr?: string;
-  fileType?: string;
+  fileType?: SupportedFileExtensions;
 }
 
 /**
@@ -47,7 +48,7 @@ export const downloadJson = (
   fileName = 'response',
   opts?: DownloadDataOptions
 ) => {
-  let _opts = {
+  let _opts: DownloadDataOptions = {
     mimeType: 'text/json',
     dataUriAttr: 'text/json;charset=utf-8',
     fileType: 'json',
diff --git a/packages/altair-app/src/assets/i18n/default.json b/packages/altair-app/src/assets/i18n/default.json
index 7dac901f0f..ca1f332b2d 100644
--- a/packages/altair-app/src/assets/i18n/default.json
+++ b/packages/altair-app/src/assets/i18n/default.json
@@ -20,6 +20,7 @@
   "ADD_NEW_WINDOW_TEXT": "+ Add new",
   "RESTART_TEXT": "Restart",
   "DELETE_TEXT": "Delete",
+  "EXPORT_TEXT": "Export",
   "SEND_BATCHED_REQUEST": "Send batched request",
 
   "DOCS_GO_BACK_TEXT": "Back",
diff --git a/packages/altair-app/src/scss/_buttons.scss b/packages/altair-app/src/scss/_buttons.scss
index 471dd4f13d..158d8d80ad 100644
--- a/packages/altair-app/src/scss/_buttons.scss
+++ b/packages/altair-app/src/scss/_buttons.scss
@@ -19,6 +19,10 @@ button {
 }
 
 .app-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
   font-size: fontsize(14);
   border: 0;
   padding: 0 20px;
diff --git a/packages/altair-core/src/types/state/environments.interfaces.ts b/packages/altair-core/src/types/state/environments.interfaces.ts
index cc612ed135..85ee96950d 100644
--- a/packages/altair-core/src/types/state/environments.interfaces.ts
+++ b/packages/altair-core/src/types/state/environments.interfaces.ts
@@ -1,6 +1,6 @@
 import { IDictionary } from '../shared';
 
-interface InitialEnvironmentState {
+export interface InitialEnvironmentState {
   id?: string;
   title?: string;
   variables?: IDictionary;
@@ -17,6 +17,10 @@ export interface EnvironmentState {
   title: string;
   variablesJson: string;
 }
+export interface ExportEnvironmentState extends InitialEnvironmentState {
+  version: 1;
+  type: 'environment';
+}
 
 export interface EnvironmentsState {
   base: EnvironmentState;
diff --git a/packages/altair-electron/electron-builder.yml b/packages/altair-electron/electron-builder.yml
index 55267bd23f..643597a2f1 100644
--- a/packages/altair-electron/electron-builder.yml
+++ b/packages/altair-electron/electron-builder.yml
@@ -75,3 +75,6 @@ fileAssociations:
   - ext: agbkp
     description: Altair GraphQL Backup
     role: Viewer
+  - ext: agx
+    description: Altair GraphQL File
+    role: Viewer