Open new window with deep linking

packages/altair-api-utils/src/client.ts

@@ -22,7 +22,7 @@ import {
 import { AltairConfig } from 'altair-graphql-core/build/config';
 import { IPlan, IPlanInfo, IUserProfile, IUserStats } from './user';
 import { ICreateTeamDto, ICreateTeamMembershipDto, IUpdateTeamDto } from './team';
-import { from, Observable, Subject } from 'rxjs';
+import { firstValueFrom, from, Observable, Subject } from 'rxjs';
 import { map, switchMap, take } from 'rxjs/operators';
 import { ReturnedWorkspace } from './workspace';
 import { ConfigEnvironment } from 'altair-graphql-core/build/config/environment';
@@ -142,7 +142,7 @@ export class APIClient {
   }
 
   async getUser() {
-    return this.observeUser().pipe(take(1)).toPromise();
+    return firstValueFrom(this.observeUser().pipe(take(1)));
   }
   async signInWithCustomToken(token: string) {
     this.authToken = token;

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

@@ -79,6 +79,7 @@ import {
 import { getWorkspaces, WorkspaceOption } from '../../store';
 import { CollectionsMetaState } from 'altair-graphql-core/build/types/state/collections-meta.interfaces';
 import { QueryItemRevision } from '@altairgraphql/db';
+import { consumeQueryParam } from '../../utils/url';
 
 @UntilDestroy({ checkProperties: true })
 @Component({
@@ -309,7 +310,23 @@ export class AltairComponent {
           this.removeWindow(this.activeWindowId);
         }
       },
-      openUrl: (url) => this.sharingService.checkForShareUrl(url),
+      openUrl: (url) => {
+        const u = new URL(url);
+        switch (u.pathname) {
+          case '/share':
+            return this.sharingService.checkForShareUrl(url);
+          case '/new': {
+            const endpoint = consumeQueryParam('endpoint', url);
+            if (!endpoint) {
+              debug.error('No endpoint specified in the url', url);
+              return;
+            }
+            return this.windowService.newWindow({ url: endpoint }).subscribe();
+          }
+          default:
+            debug.error('Unknown url', url);
+        }
+      },
     });
     this.keybinder.connect();
 

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

@@ -5,6 +5,7 @@ import { NotifyService } from '../notify/notify.service';
 import { debug } from '../../utils/logger';
 import { AccountService } from '../account/account.service';
 import { copyToClipboard } from '../../utils';
+import { consumeQueryParam } from '../../utils/url';
 
 interface ShareDetails {
   queryId: string;
@@ -25,14 +26,14 @@ export class SharingService {
    */
   checkForShareUrl(url = window.location.href) {
     debug.log('Checking for shared url', url);
+    const shareDetails = this.getShareDetailsFromUrl(url);
+    if (!shareDetails) {
+      return;
+    }
     this.accountService.observeUser().subscribe((user) => {
       if (!user) {
         return;
       }
-      const shareDetails = this.getShareDetailsFromUrl(url);
-      if (!shareDetails) {
-        return;
-      }
       this.handleShareDetails(shareDetails);
     });
   }
@@ -43,17 +44,12 @@ export class SharingService {
   }
 
   private getShareDetailsFromUrl(url: string) {
-    const u = new URL(url);
-    const urlParams = new URLSearchParams(u.search);
-    const queryId = urlParams.get('q');
+    const queryId = consumeQueryParam('q', url);
     if (!queryId) {
       // no shared link
       return;
     }
 
-    //  Clear query parameter
-    window.history.replaceState({}, document.title, window.location.pathname);
-
     return { queryId };
   }
 

packages/altair-app/src/app/modules/altair/utils/url.ts

@@ -1,8 +1,8 @@
 import { debug } from './logger';
 
-export const consumeQueryParam = (key: string) => {
+export const consumeQueryParam = (key: string, url = window.location.href) => {
   try {
-    const u = new URL(window.location.href);
+    const u = new URL(url);
     const value = u.searchParams.get(key);
     if (!value) {
       return;

packages/altair-docs/docs/features/multiple-windows.md

@@ -7,3 +7,13 @@ parent: Features
 Altair provides the option to open multiple windows each with a distinct state that is preserved across browser sessions. In addition, you can give each window a custom name. Each window can be used to work on different queries or projects, with distinct endpoints, headers, etc. You don't have to be limited to working on a single query at a time!
 
 ![multiple windows](/assets/img/docs/window-management-window-tabs.png)
+
+## Creating a new window
+
+To create a new window, click on the `+ Add New` button on the top right corner of the window. This will open a new window with the same URL as the current window.
+
+## Desktop app deep linking
+
+If you are using the desktop app, you can use deep linking to open a new window with a specific URL. To do this, you can use `altair://new` with the URL you want to open. For example, `altair://new?endpoint=https://api.example.com/graphql`. This will open a new window with the specified URL in the desktop app.
+
+Another deep linking option is for sharing a query with a team member. You can use `altair://share` with the query you want to share. For example, `altair://share?q=<query-id>`. This will open a new window with the shared query in the desktop app.