fix incorrect initialQuery transform by replace

altair-graphql · Apr 26, 2024 · ec5da96 · ec5da96
1 parent a2ec8fd
commit ec5da96
Show file tree

Hide file tree

Showing 4 changed files with 193 additions and 25 deletions.
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
@@ -1,6 +1,6 @@
-import { EMPTY, from, Observable } from 'rxjs';
+import { EMPTY, from } from 'rxjs';
 
-import { first, tap, map, switchMap, take } from 'rxjs/operators';
+import { tap, map, switchMap, take } from 'rxjs/operators';
 import { Injectable } from '@angular/core';
 import { select, Store } from '@ngrx/store';
 
@@ -69,8 +69,7 @@ export class WindowService {
 
  const newWindow = {
  windowId: uuid(),
- title:
- opts.title || `Window ${Object.keys(state.windows).length + 1}`,
+ title: opts.title || `Window ${Object.keys(state.windows).length + 1}`,
  url,
  collectionId: opts.collectionId,
  windowIdInCollection: opts.windowIdInCollection,
@@ -217,10 +216,7 @@ export class WindowService {
  * Import the window represented by the provided data string
  * @param data window data string
  */
- importWindowData(
- data: ExportWindowState,
- options: ImportWindowDataOptions = {}
- ) {
+ importWindowData(data: ExportWindowState, options: ImportWindowDataOptions = {}) {
  try {
  // Verify file's content
  if (!data) {
@@ -277,16 +273,11 @@ export class WindowService {
  );
  }
  if (data.query) {
- this.store.dispatch(
- new queryActions.SetQueryAction(data.query, windowId)
- );
+ this.store.dispatch(new queryActions.SetQueryAction(data.query, windowId));
  }
  if (data.headers.length) {
  this.store.dispatch(
- new headerActions.SetHeadersAction(
- { headers: data.headers },
- windowId
- )
+ new headerActions.SetHeadersAction({ headers: data.headers }, windowId)
  );
  }
  if (data.variables) {
@@ -452,14 +443,11 @@ export class WindowService {
  select((state) => state.windows),
  take(1),
  switchMap((windows) => {
- const matchingOpenQueryWindowId = Object.keys(windows).find(
- (windowId) => {
- return (
- windows[windowId]?.layout.windowIdInCollection ===
- windowIdInCollection
- );
- }
- );
+ const matchingOpenQueryWindowId = Object.keys(windows).find((windowId) => {
+ return (
+ windows[windowId]?.layout.windowIdInCollection === windowIdInCollection
+ );
+ });
  if (matchingOpenQueryWindowId) {
  this.setActiveWindow(matchingOpenQueryWindowId);
  return EMPTY;

diff --git a/packages/altair-static/src/__snapshots__/index.test.ts.snap b/packages/altair-static/src/__snapshots__/index.test.ts.snap
@@ -64,6 +64,80 @@ initialVariables: \`{ variable: 1 }\`,
 "
 `;
 
+exports[`renderAltair should return expected string with $$ 1`] = `
+"<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8" />
+ <title>Altair</title>
+ <base href="/">
+ <meta name="viewport" content="width=device-width,initial-scale=1" />
+ <link rel="icon" type="image/x-icon" href="favicon.ico" />
+ <link href="[% STYLES_FILE %]" rel="stylesheet" />
+ </head>
+
+ <body>
+ <app-root>
+ <style>
+ .loading-screen {
+ /*Prevents the loading screen from showing until CSS is downloaded*/
+ display: none;
+ }
+ </style>
+ <div class="loading-screen styled">
+ <div class="loading-screen-inner">
+ <div class="loading-screen-logo-container">
+ <img src="assets/img/logo_350.svg" alt="Altair" />
+ </div>
+ <div class="loading-screen-loading-indicator">
+ <span class="loading-indicator-dot"></span>
+ <span class="loading-indicator-dot"></span>
+ <span class="loading-indicator-dot"></span>
+ </div>
+ </div>
+ </div>
+ </app-root>
+ <script
+ rel="preload"
+ as="script"
+ type="text/javascript"
+ src="[% RUNTIME_SCRIPT %]"
+ ></script>
+ <script
+ rel="preload"
+ as="script"
+ type="text/javascript"
+ src="[% POLYFILLS_SCRIPT %]"
+ ></script>
+ <script
+ rel="preload"
+ as="script"
+ type="text/javascript"
+ src="[% MAIN_SCRIPT %]"
+ ></script>
+ <script>
+ AltairGraphQL.init({
+initialQuery: \`{
+ MyDomains (
+ page: {start: 1, limit: 1000}
+ where: {AND: [{AND: [{myFilterA: {EQ: "$$"}} {myFilterB: {EQ: "2099-12-31T00:00:00Z"}}, {myFilterC: {EQ: "2024-04-23"}}]}]}
+ ) {
+ pages
+ total
+ select {
+ myField1
+ myField2 
+ }
+ }
+ }\`,
+endpointURL: \`https://example.com/graphql\`,
+initialVariables: \`{ variable: 1 }\`,
+});
+ </script></body>
+</html>
+"
+`;
+
 exports[`renderInitialOptions should return expected string 1`] = `
 "
  AltairGraphQL.init({
@@ -77,3 +151,27 @@ persistedSettings: {"theme":"light"},
 });
  "
 `;
+
+exports[`renderInitialOptions should return expected string with $$ 1`] = `
+"
+ AltairGraphQL.init({
+initialQuery: \`{
+ MyDomains (
+ page: {start: 1, limit: 1000}
+ where: {AND: [{AND: [{myFilterA: {EQ: "$$"}} {myFilterB: {EQ: "2099-12-31T00:00:00Z"}}, {myFilterC: {EQ: "2024-04-23"}}]}]}
+ ) {
+ pages
+ total
+ select {
+ myField1
+ myField2 
+ }
+ }
+ }\`,
+endpointURL: \`https://example.com/graphql\`,
+initialHeaders: {"X-GraphQL-Token":"asd7-237s-2bdk-nsdk4"},
+initialSettings: {"theme":"dark"},
+persistedSettings: {"theme":"light"},
+});
+ "
+`;
diff --git a/packages/altair-static/src/index.test.ts b/packages/altair-static/src/index.test.ts
@@ -50,6 +50,62 @@ describe('renderInitialOptions', () => {
 
  expect(result).toMatchSnapshot();
  });
+ it('should return expected string with $$', () => {
+ const result = renderInitialOptions({
+ baseURL: '/',
+ initialQuery: `{
+ MyDomains (
+ page: {start: 1, limit: 1000}
+ where: {AND: [{AND: [{myFilterA: {EQ: "$$"}} {myFilterB: {EQ: "2099-12-31T00:00:00Z"}}, {myFilterC: {EQ: "2024-04-23"}}]}]}
+ ) {
+ pages
+ total
+ select {
+ myField1
+ myField2 
+ }
+ }
+ }`,
+ endpointURL: 'https://example.com/graphql',
+ initialHeaders: {
+ 'X-GraphQL-Token': 'asd7-237s-2bdk-nsdk4',
+ },
+ initialSettings: {
+ theme: 'dark',
+ },
+ persistedSettings: {
+ theme: 'light',
+ },
+ });
+
+ expect(translateRenderedStrToObj(result)).toEqual({
+ initialQuery: `{
+ MyDomains (
+ page: {start: 1, limit: 1000}
+ where: {AND: [{AND: [{myFilterA: {EQ: "$$"}} {myFilterB: {EQ: "2099-12-31T00:00:00Z"}}, {myFilterC: {EQ: "2024-04-23"}}]}]}
+ ) {
+ pages
+ total
+ select {
+ myField1
+ myField2 
+ }
+ }
+ }`,
+ endpointURL: 'https://example.com/graphql',
+ initialHeaders: {
+ 'X-GraphQL-Token': 'asd7-237s-2bdk-nsdk4',
+ },
+ initialSettings: {
+ theme: 'dark',
+ },
+ persistedSettings: {
+ theme: 'light',
+ },
+ });
+
+ expect(result).toMatchSnapshot();
+ });
  it('should render boolean values correctly', () => {
  const result = renderInitialOptions({
  preserveState: false,
@@ -78,4 +134,30 @@ describe('renderAltair', () => {
  })
  ).toMatchSnapshot();
  });
+ it('should return expected string with $$', () => {
+ (getAltairHtml as any).default = jest.fn();
+ (getAltairHtml as any).default.mockReturnValue(
+ readFileSync(resolve(__dirname, 'index.html'), 'utf8')
+ );
+ expect(
+ renderAltair({
+ baseURL: '/',
+ initialQuery: `{
+ MyDomains (
+ page: {start: 1, limit: 1000}
+ where: {AND: [{AND: [{myFilterA: {EQ: "$$"}} {myFilterB: {EQ: "2099-12-31T00:00:00Z"}}, {myFilterC: {EQ: "2024-04-23"}}]}]}
+ ) {
+ pages
+ total
+ select {
+ myField1
+ myField2 
+ }
+ }
+ }`,
+ endpointURL: 'https://example.com/graphql',
+ initialVariables: '{ variable: 1 }',
+ })
+ ).toMatchSnapshot();
+ });
 });
diff --git a/packages/altair-static/src/index.ts b/packages/altair-static/src/index.ts
@@ -55,11 +55,11 @@ export const renderAltair = (options: RenderOptions = {}) => {
  if (options.serveInitialOptionsInSeperateRequest) {
  return altairHtml
  .replace(/<base.*>/, `<base href="${baseURL}">`)
- .replace('</body>', `<script src="initial_options.js"></script></body>`);
+ .replace('</body>', () => `<script src="initial_options.js"></script></body>`);
  } else {
  return altairHtml
  .replace(/<base.*>/, `<base href="${baseURL}">`)
- .replace('</body>', `<script>${initialOptions}</script></body>`);
+ .replace('</body>', () => `<script>${initialOptions}</script></body>`);
  }
 };