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.