added functionality to share window data in URL

Author: imolorhe

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

@@ -281,20 +281,6 @@ export class AccountEffects {
     { dispatch: false }
   );
 
-  onAccountCheckedInit$ = createEffect(
-    () => {
-      return this.actions$.pipe(
-        ofType(accountActions.ACCOUNT_IS_LOGGED_IN),
-        switchMap((action) => {
-          // check for shared links
-          this.sharingService.checkForShareUrl();
-          return EMPTY;
-        })
-      );
-    },
-    { dispatch: false }
-  );
-
   constructor(
     private actions$: Actions,
     private store: Store<RootState>,

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

@@ -15,6 +15,8 @@ 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';
+import { APP_INIT_ACTION } from '../store/action';
+import { SharingService } from '../services';
 
 @Injectable()
 export class WindowsEffects {
@@ -218,9 +220,24 @@ export class WindowsEffects {
     { dispatch: false }
   );
 
+  checkShareUrls$ = createEffect(
+    () => {
+      return this.actions$.pipe(
+        ofType(APP_INIT_ACTION),
+        switchMap(() => {
+          // check for shared links
+          this.sharingService.checkForShareUrl();
+          return EMPTY;
+        })
+      );
+    },
+    { dispatch: false }
+  );
+
   constructor(
-    private actions$: Actions,
-    private store: Store<RootState>,
-    private windowService: WindowService
+    private readonly actions$: Actions,
+    private readonly store: Store<RootState>,
+    private readonly windowService: WindowService,
+    private readonly sharingService: SharingService
   ) {}
 }

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

@@ -7,9 +7,22 @@ import { AccountService } from '../account/account.service';
 import { copyToClipboard } from '../../utils';
 import { consumeQueryParam } from '../../utils/url';
 
-interface ShareDetails {
+// ?q=<queryId>
+interface SharedRemoteQuery {
+  type: 'remote-query';
   queryId: string;
 }
+
+// ?query=<query>&variables=<variables>&endpoint=<endpoint>
+interface SharedWindowData {
+  type: 'window-data';
+  endpoint: string | undefined;
+  query: string;
+  variables: string | undefined;
+}
+
+type SharedUrlInfo = SharedRemoteQuery | SharedWindowData;
+
 @Injectable({
   providedIn: 'root',
 })
@@ -30,43 +43,70 @@ export class SharingService {
     if (!shareDetails) {
       return;
     }
-    this.accountService.observeUser().subscribe((user) => {
-      if (!user) {
-        return;
-      }
-      this.handleShareDetails(shareDetails);
-    });
+
+    this.handleShareDetails(shareDetails);
   }
 
   copyQueryShareUrl(queryId: string) {
     copyToClipboard(this.apiService.getQueryShareUrl(queryId));
     this.notifyService.info(`Copied share url to clipboard`);
   }
 
-  private getShareDetailsFromUrl(url: string) {
+  private getShareDetailsFromUrl(url: string): SharedUrlInfo | undefined {
     const queryId = consumeQueryParam('q', url);
-    if (!queryId) {
-      // no shared link
-      return;
+    if (queryId) {
+      // shared remote query
+      return { type: 'remote-query', queryId };
+    }
+    const query = consumeQueryParam('query', url);
+    if (query) {
+      // shared window data
+      return {
+        type: 'window-data',
+        query,
+        variables: consumeQueryParam('variables', url),
+        endpoint: consumeQueryParam('endpoint', url),
+      };
     }
 
-    return { queryId };
+    return;
   }
 
-  private async handleShareDetails(shareDetails: ShareDetails) {
+  private async handleShareDetails(shareDetails: SharedUrlInfo) {
     try {
-      const res = await this.apiService.getQuery(shareDetails.queryId);
-      if (!res) {
-        throw new Error('Query not found');
+      switch (shareDetails.type) {
+        case 'window-data': {
+          const { query, variables, endpoint } = shareDetails;
+          return this.windowService.importWindowData({
+            version: 1,
+            type: 'window',
+            query,
+            variables: variables ?? '{}',
+            apiUrl: endpoint ?? '',
+            windowName: 'From url',
+            headers: [],
+            subscriptionUrl: '',
+          });
+        }
+        case 'remote-query': {
+          const user = await this.accountService.getUser();
+          if (!user) {
+            return;
+          }
+          const res = await this.apiService.getQuery(shareDetails.queryId);
+          if (!res) {
+            throw new Error('Query not found');
+          }
+          return this.windowService.loadQueryFromCollection(
+            res.query,
+            res.collectionId,
+            res.query.id ?? shareDetails.queryId
+          );
+        }
       }
-      await this.windowService.loadQueryFromCollection(
-        res.query,
-        res.collectionId,
-        res.query.id ?? shareDetails.queryId
-      );
     } catch (err) {
       debug.error(err);
-      this.notifyService.error(`Error loading shared query`);
+      this.notifyService.error(`Error loading shared details`);
     }
   }
 }

packages/altair-docs/.vitepress/config.mts

@@ -2,6 +2,8 @@ import { defineConfig } from 'vitepress';
 import { getConfig } from './plugins/sidebar-generation';
 import coreApiSidebar from '../api/core/typedoc-sidebar.json';
 import { dynamicFiles } from './plugins/dynamic-files';
+import { toString } from 'hast-util-to-string';
+import { openInAltairShikiPlugin } from './plugins/open-in-altair-shiki';
 
 const { sidebar: retrievedSidebar } = getConfig({
   filter: (meta) => meta.sidebar !== false,
@@ -139,4 +141,7 @@ export default defineConfig({
   vite: {
     plugins: [dynamicFiles()],
   },
+  markdown: {
+    codeTransformers: [openInAltairShikiPlugin()],
+  },
 });

packages/altair-docs/.vitepress/plugins/open-in-altair-shiki.ts

@@ -0,0 +1,37 @@
+import { toString } from 'hast-util-to-string';
+import { ShikijiTransformer } from 'shikiji';
+export function openInAltairShikiPlugin(): ShikijiTransformer {
+  return {
+    code(node) {
+      if (this.options.lang === 'graphql') {
+        node.children.push({
+          type: 'element',
+          tagName: 'button',
+          properties: {
+            type: 'button',
+            data: toString(node),
+            title: 'Open in Altair Web',
+            'aria-label': 'Open in Altair Web',
+            class: 'open-in-altair-btn',
+            'data-name': 'open-in-altair-button',
+            onclick: /* javascript */ `
+              const url = new window.URL('https://web.altairgraphql.dev/');
+              const params = new URLSearchParams();
+              params.set('query', this.attributes.data.value);
+              params.set('variables', JSON.stringify({}));     
+              url.search = params.toString();
+              
+              window.open(url.toString(), '_blank');
+            `.trim(),
+          },
+          children: [
+            {
+              type: 'text',
+              value: 'Open in Altair Web',
+            },
+          ],
+        });
+      }
+    },
+  };
+}

packages/altair-docs/.vitepress/theme/custom.css

@@ -45,3 +45,24 @@ p {
 .medium-zoom-image--opened {
   z-index: 31;
 }
+
+.open-in-altair-btn {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  font-size: 12px;
+  font-weight: 500;
+  font-family: var(--vp-font-family-base);
+  z-index: var(--vp-z-index-local-nav);
+  background-color: var(--vp-code-copy-code-bg);
+  color: var(--vp-code-copy-code-active-text);
+  border: 1px solid var(--vp-code-copy-code-border-color);
+  color: white;
+  padding: 5px 10px;
+  border-radius: 5px;
+  transition: all 0.3s ease;
+}
+.open-in-altair-btn:hover {
+  background-color: var(--vp-code-copy-code-hover-bg);
+  border: 1px solid var(--vp-code-copy-code-hover-border-color);
+}

packages/altair-docs/package.json

@@ -15,6 +15,7 @@
     "@types/lodash.sortby": "^4.7.9",
     "altair-graphql-core": "workspace:*",
     "glob": "^11.0.0",
+    "hast-util-to-string": "^3.0.1",
     "inflection": "^3.0.0",
     "lodash.escaperegexp": "^4.1.2",
     "lodash.sortby": "^4.7.0",
@@ -23,6 +24,7 @@
     "markdown-it-title": "^4.0.0",
     "node-cache": "^5.1.2",
     "parent-module": "^3.1.0",
+    "shikiji": "^0.10.2",
     "transliteration": "^2.3.5",
     "vitepress": "^1.0.0-rc.39",
     "vitepress-plugin-google-analytics": "^1.0.2",