Several minor improvements to the app

packages/altair-app/src/app/modules/altair/components/header/header.component.html

@@ -1,7 +1,7 @@
 <div
   class="header__logo-wrapper"
-  [ngClass]="{ 'header__logo-wrapper--experimental': settings?.enableExperimental}"
-  >
+  [ngClass]="{ 'header__logo-wrapper--experimental': settings?.enableExperimental }"
+>
   <img src="assets/img/altair_logo.svg" alt="logo" class="header__logo" />
 </div>
 
@@ -11,6 +11,7 @@
   [activeWindowId]="activeWindowId"
   [closedWindows]="closedWindows"
   [isElectron]="isElectron"
+  [collections]="collections"
   [enableScrollbar]="settings?.enableTablistScrollbar"
   (newWindowChange)="newWindowChange.emit($event)"
   (activeWindowChange)="activeWindowChange.emit($event)"
@@ -31,7 +32,7 @@
         nzTooltipPlacement="bottom"
         class="header__menu-item"
         [ngClass]="{ 'header__menu-item--active': panel.isActive }"
-        >
+      >
         <app-icon name="cpu"></app-icon>
         <nz-modal
           [nzVisible]="panel.isActive"
@@ -40,7 +41,7 @@
           [nzContent]="modalContent"
           [nzFooter]="null"
           (nzOnCancel)="togglePanelActiveChange.emit(panel)"
-          >
+        >
           <ng-template #modalTitle>
             <div class="app-dialog-header">
               <div class="app-dialog-title">{{ panel.title }}</div>
@@ -58,7 +59,7 @@
       nzTrigger="click"
       [nzDropdownMenu]="environmentsMenu"
       class="header__menu-item"
-      >
+    >
       @if (activeEnvironment) {
         <span>
           <app-icon name="eye"></app-icon>
@@ -76,20 +77,18 @@
       <ul nz-menu class="environments-dropdown__list">
         @if (environments?.subEnvironments?.length) {
           @for (
-            environment of environments?.subEnvironments; track trackById($index,
-            environment)) {
+            environment of environments?.subEnvironments;
+            track trackById($index, environment)
+          ) {
             <li
               nz-menu-item
               (click)="selectActiveEnvironmentChange.emit(environment.id)"
               [ngClass]="{ active: environment.id === activeEnvironment?.id }"
-              >
+            >
               {{ environment.title }}
             </li>
           }
-          <li
-            nz-menu-item
-            (click)="selectActiveEnvironmentChange.emit(undefined)"
-            >
+          <li nz-menu-item (click)="selectActiveEnvironmentChange.emit(undefined)">
             {{ 'NO_ENVIRONMENT_TEXT' | translate }}
           </li>
           <li nz-menu-divider></li>
@@ -104,7 +103,7 @@
       nzTrigger="click"
       [nzDropdownMenu]="settingsMenu"
       class="header__menu-item"
-      >
+    >
       <app-icon name="settings"></app-icon>
     </li>
     <nz-dropdown-menu #settingsMenu="nzDropdownMenu">
@@ -121,7 +120,7 @@
         <li
           nz-menu-item
           (click)="openLink($event, 'https://github.com/altair-graphql/altair')"
-          >
+        >
           {{ 'STAR_ON_GITHUB_TEXT' | translate }}
         </li>
         <li
@@ -132,7 +131,7 @@
               'https://github.com/altair-graphql/altair/issues/new?template=Bug_report.md'
             )
           "
-          >
+        >
           {{ 'REPORT_BUG_TEXT' | translate }}
         </li>
         <li nz-menu-item (click)="exportBackupDataChange.emit()">

packages/altair-app/src/app/modules/altair/components/header/header.component.ts

@@ -8,6 +8,7 @@ import { PerWindowState } from 'altair-graphql-core/build/types/state/per-window
 import { SettingsState } from 'altair-graphql-core/build/types/state/settings.interfaces';
 import { WindowState } from 'altair-graphql-core/build/types/state/window.interfaces';
 import { externalLink } from '../../utils';
+import { IQueryCollection } from 'altair-graphql-core/build/types/state/collection.interfaces';
 
 @Component({
   selector: 'app-header',
@@ -21,6 +22,7 @@ export class HeaderComponent {
   @Input() activeWindowId = '';
   @Input() isElectron = false;
   @Input() headerPanels: AltairPanel[] = [];
+  @Input() collections: IQueryCollection[] = [];
   @Input() activeEnvironment?: EnvironmentState;
   @Input() environments?: EnvironmentsState;
   @Input() settings?: SettingsState;

packages/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.html

@@ -15,7 +15,7 @@
       (dblclick)="editWindowNameInput(windowId, wTitle)"
       (contextmenu)="contextMenu($event, tabContextMenu)"
     >
-      @if (windows[windowId]?.layout?.windowIdInCollection) {
+      @if (isWindowInCollection(windowId)) {
         <app-icon
           name="folder"
           nz-tooltip
@@ -27,14 +27,20 @@
         #wTitle
         class="window-switcher__input"
         [ngClass]="{
-          'window-switcher__input--editing': windowId === windowIdEditing
+          'window-switcher__input--editing': windowId === windowIdEditing,
         }"
         [attr.contenteditable]="windowId === windowIdEditing"
         (blur)="saveWindowName(windowId, wTitle.innerText)"
         (keydown.enter)="saveWindowName(windowId, wTitle.innerText)"
       >
         {{ windows[windowId]?.layout?.title || '' }}
       </div>
+      <span
+        class="window-switcher__unsaved-indicator"
+        *ngIf="windowHasUnsavedChanges(windowId)"
+      >
+        *
+      </span>
       @if (windowIds.length > 1) {
         <div
           track-id="close_window_tab"

packages/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.ts

@@ -1,11 +1,5 @@
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  HostBinding,
-} from '@angular/core';
+import { Component, Input, Output, EventEmitter, HostBinding } from '@angular/core';
 import { AltairConfig } from 'altair-graphql-core/build/config';
 import { PerWindowState } from 'altair-graphql-core/build/types/state/per-window.interfaces';
 import { WindowState } from 'altair-graphql-core/build/types/state/window.interfaces';
@@ -15,6 +9,8 @@ import {
 } from 'ng-zorro-antd/dropdown';
 
 import { debug } from '../../utils/logger';
+import { IQueryCollection } from 'altair-graphql-core/build/types/state/collection.interfaces';
+import { windowHasUnsavedChanges } from '../../store';
 
 @Component({
   selector: 'app-window-switcher',
@@ -25,6 +21,7 @@ export class WindowSwitcherComponent {
   @Input() windows: WindowState = {};
   @Input() windowIds: string[] = [];
   @Input() closedWindows: PerWindowState[] = [];
+  @Input() collections: IQueryCollection[] = [];
   @Input() activeWindowId = '';
   @Input() isElectron = false;
   @Input() enableScrollbar = false;
@@ -111,4 +108,34 @@ export class WindowSwitcherComponent {
   log(str: string) {
     debug.log(str);
   }
+
+  isWindowInCollection(windowId: string) {
+    const windowIdInCollection =
+      this.windows[windowId]?.layout?.windowIdInCollection;
+    const collectionId = this.windows[windowId]?.layout?.collectionId;
+    if (!windowIdInCollection || !collectionId) {
+      return false;
+    }
+
+    const collection = this.collections.find(
+      (collection) => collection.id === collectionId
+    );
+
+    if (!collection) {
+      return false;
+    }
+
+    return !!collection.queries.find((query) => query.id === windowIdInCollection);
+  }
+
+  windowHasUnsavedChanges(windowId: string) {
+    const window = this.windows[windowId];
+    if (!window) {
+      return false;
+    }
+    if (!this.isWindowInCollection(windowId)) {
+      return false;
+    }
+    return windowHasUnsavedChanges(window, this.collections);
+  }
 }

packages/altair-app/src/app/modules/altair/containers/altair/altair.component.html

@@ -31,6 +31,7 @@
       [activeEnvironment]="activeEnvironment$ | async"
       [environments]="environments$ | async"
       [settings]="settings$ | async"
+      [collections]="sortedCollections$ | async"
       (newWindowChange)="newWindow()"
       (activeWindowChange)="setActiveWindow($event)"
       (removeWindowChange)="removeWindow($event)"
@@ -258,7 +259,7 @@
                     attr.aria-label="{{ 'ACCOUNT_TITLE' | translate }}"
                     track-id="show_collections"
                     [ngClass]="{
-                      'side-menu-item--active': (account$ | async)?.loggedIn
+                      'side-menu-item--active': (account$ | async)?.loggedIn,
                     }"
                   >
                     <div class="side-menu-item-icon">

packages/altair-app/src/app/modules/altair/effects/query-collection.effect.ts

@@ -1,34 +1,29 @@
-import { EMPTY, Observable, of, zip, forkJoin, from, pipe } from 'rxjs';
+import { EMPTY, Observable, of, zip, forkJoin, from } from 'rxjs';
 
 import {
   map,
   withLatestFrom,
   switchMap,
   tap,
   catchError,
-  filter,
   repeat,
 } from 'rxjs/operators';
 import { Injectable } from '@angular/core';
 import { Store, Action } from '@ngrx/store';
 import { createEffect, Actions, ofType } from '@ngrx/effects';
 
-import * as fromRoot from '../store';
-
 import * as collectionActions from '../store/collection/collection.action';
 import * as accountActions from '../store/account/account.action';
-import * as dialogsActions from '../store/dialogs/dialogs.action';
 import * as windowsMetaActions from '../store/windows-meta/windows-meta.action';
 import * as windowsActions from '../store/windows/windows.action';
-import * as localActions from '../store/local/local.action';
 import * as layoutActions from '../store/layout/layout.action';
 import {
   QueryCollectionService,
   WindowService,
   NotifyService,
   ApiService,
 } from '../services';
-import { downloadJson, fromPromise, openFile, openFiles } from '../utils';
+import { downloadJson, fromPromise, openFiles } from '../utils';
 import { RootState } from 'altair-graphql-core/build/types/state/state.interfaces';
 import { IQuery } from 'altair-graphql-core/build/types/state/collection.interfaces';
 import { UnknownError } from '../interfaces/shared';
@@ -437,7 +432,7 @@ export class QueryCollectionEffects {
       switchMap(() => {
         return this.apiService.listenForCollectionChanges();
       }),
-      map((x) => {
+      map(() => {
         return new collectionActions.LoadCollectionsAction();
       }),
       catchError((error) => {

packages/altair-app/src/app/modules/altair/effects/windows.effect.ts

@@ -14,6 +14,7 @@ import { WindowService } from '../services/window.service';
 import { downloadJson, openFile } from '../utils';
 import { RootState } from 'altair-graphql-core/build/types/state/state.interfaces';
 import { debug } from '../utils/logger';
+import { windowHasUnsavedChanges } from '../store';
 
 @Injectable()
 export class WindowsEffects {
@@ -202,7 +203,7 @@ export class WindowsEffects {
               (q) => q.id === window.layout.windowIdInCollection
             );
 
-            if (payload) {
+            if (payload && !windowHasUnsavedChanges(window, data.collection.list)) {
               this.windowService
                 .updateWindowState(window.windowId, payload)
                 .catch((err) => {

packages/altair-app/src/app/modules/altair/services/window.service.ts

@@ -300,9 +300,6 @@ export class WindowService {
           this.store.dispatch(
             new variableActions.UpdateVariablesAction(data.variables, windowId)
           );
-          this.store.dispatch(
-            new dialogsActions.ToggleVariableDialogAction(windowId)
-          );
         }
         if (data.subscriptionUrl) {
           this.store.dispatch(
@@ -526,43 +523,6 @@ export class WindowService {
    * Carry out any necessary house cleaning tasks.
    */
   setupWindow(windowId: string) {
-    // Validate that query is ACTUALLY in an existing collection
-    this.getWindowState(windowId)
-      .pipe(
-        switchMap((data) => {
-          if (data?.layout.collectionId && data?.layout.windowIdInCollection) {
-            return from(
-              this.collectionService.getCollectionByID(data.layout.collectionId)
-            ).pipe(
-              catchError(() => {
-                // continue to evaluation logic in map() below if collection is not found
-                // (EMPTY would stop the observable chain)
-                return of(undefined);
-              }),
-              map((collection) => {
-                if (collection) {
-                  const query = collection.queries.find(
-                    (q) => q.id === data.layout.windowIdInCollection
-                  );
-                  return !!query;
-                }
-
-                return false;
-              })
-            );
-          }
-
-          return EMPTY;
-        })
-      )
-      .subscribe((isValidCollectionQuery) => {
-        if (!isValidCollectionQuery) {
-          this.store.dispatch(
-            new layoutActions.SetWindowIdInCollectionAction(windowId, {})
-          );
-        }
-      });
-
     this.store.dispatch(new streamActions.StopStreamClientAction(windowId));
     this.store.dispatch(new streamActions.StartStreamClientAction(windowId));
 

packages/altair-app/src/app/modules/altair/store/index.ts

@@ -36,7 +36,7 @@ import { asyncStorageSync } from './async-storage-sync';
 import { localStorageSyncConfig } from './local-storage-sync-config';
 import { RootState } from 'altair-graphql-core/build/types/state/state.interfaces';
 import { AllActions } from './action';
-import { selectWindowState } from './windows/selectors';
+import { selectWindowState, windowHasUnsavedChanges } from './windows/selectors';
 import { getQueryState } from './query/selectors';
 import { selectCollections } from './collection/selectors';
 import { str } from '../utils';
@@ -136,20 +136,7 @@ export const selectHasUnsavedChanges = (windowId: string) => {
     selectWindowState(windowId),
     selectCollections,
     (windowState, collections) => {
-      if (!windowState || !collections) {
-        return false;
-      }
-      const collection = collections.find(
-        (c) => str(c.id) === str(windowState.layout.collectionId)
-      );
-      const queryInCollection = collection?.queries.find(
-        (q) => str(q.id) === str(windowState.layout.windowIdInCollection ?? '')
-      );
-
-      return (
-        queryInCollection?.query !== windowState.query.query ||
-        queryInCollection?.variables !== windowState.variables.variables
-      );
+      return windowHasUnsavedChanges(windowState, collections);
     }
   );
 };