add preflight script graphiql plugin

.github/workflows/tests-e2e.yaml

@@ -27,7 +27,7 @@ jobs:
       - name: setup environment
         uses: ./.github/actions/setup
         with:
-          codegen: false
+          codegen: true
           actor: test-e2e
           cacheTurbo: false
 
@@ -43,7 +43,7 @@ jobs:
         timeout-minutes: 10
         run: |
           docker compose \
-            --env-file docker/.end2end.env \
+            --env-file integration-tests/.env \
             -f docker/docker-compose.community.yml \
             -f docker/docker-compose.end2end.yml \
             up -d --wait
@@ -65,7 +65,7 @@ jobs:
           docker --version
           docker ps --format json | jq .
           docker compose \
-            --env-file docker/.end2end.env \
+            --env-file integration-tests/.env \
             -f docker/docker-compose.community.yml \
             -f docker/docker-compose.end2end.yml \
             logs

cypress.config.ts

@@ -1,19 +1,38 @@
+import * as fs from 'node:fs';
 // eslint-disable-next-line import/no-extraneous-dependencies -- cypress SHOULD be a dev dependency
-import fs from 'node:fs';
 import { defineConfig } from 'cypress';
+import { initSeed } from './integration-tests/testkit/seed';
+
+if (!process.env.RUN_AGAINST_LOCAL_SERVICES) {
+  const dotenv = await import('dotenv');
+  dotenv.config({ path: import.meta.dirname + '/integration-tests/.env' });
+}
 
 const isCI = Boolean(process.env.CI);
 
+export const seed = initSeed();
+
 export default defineConfig({
   video: isCI,
   screenshotOnRunFailure: isCI,
   defaultCommandTimeout: 15_000, // sometimes the app takes longer to load, especially in the CI
   retries: 2,
-  env: {
-    POSTGRES_URL: 'postgresql://postgres:postgres@localhost:5432/registry',
-  },
   e2e: {
     setupNodeEvents(on) {
+      on('task', {
+        async seedTarget() {
+          const owner = await seed.createOwner();
+          const org = await owner.createOrg();
+          const project = await org.createProject();
+          const slug = `${org.organization.slug}/${project.project.slug}/${project.target.slug}`;
+          return {
+            slug,
+            refreshToken: owner.ownerRefreshToken,
+            email: owner.ownerEmail,
+          };
+        },
+      });
+
       on('after:spec', (_, results) => {
         if (results && results.video) {
           // Do we have failures for any retry attempts?

cypress/e2e/preflight-script.cy.ts

@@ -0,0 +1,212 @@
+beforeEach(() => {
+  cy.clearLocalStorage().then(async () => {
+    cy.task('seedTarget').then(({ slug, refreshToken }: any) => {
+      cy.setCookie('sRefreshToken', refreshToken);
+
+      cy.visit(`/${slug}/laboratory`);
+      cy.get('[aria-label*="Preflight Script"]').click();
+    });
+  });
+});
+
+describe('Preflight Script', () => {
+  it('mini script editor should be read only', () => {
+    cy.dataCy('toggle-preflight-script').click();
+    // Wait loading disappears
+    cy.dataCy('preflight-script-editor-mini').should('not.contain', 'Loading');
+    // Click
+    cy.dataCy('preflight-script-editor-mini').click();
+    // And type
+    cy.dataCy('preflight-script-editor-mini').within(() => {
+      cy.get('textarea').type('🐝', { force: true });
+    });
+    cy.dataCy('preflight-script-editor-mini').should(
+      'have.text',
+      'Cannot edit in read-only editor',
+    );
+  });
+});
+
+describe('Preflight Script Modal', () => {
+  const script = 'console.log("Hello_world")';
+  const env = '{"foo":123}';
+
+  const writeScript = (script: string) => {
+    cy.dataCy('preflight-script-editor').within(() => {
+      cy.get('textarea').type(script, { delay: 0, force: true });
+    });
+  };
+
+  beforeEach(() => {
+    cy.dataCy('preflight-script-modal-button').click();
+    cy.dataCy('env-editor').within(() => {
+      cy.get('textarea').type(env, {
+        parseSpecialCharSequences: false,
+        force: true,
+      });
+    });
+  });
+
+  it('should save script and env variables when submitting', () => {
+    writeScript(script);
+    cy.dataCy('preflight-script-modal-submit').click();
+    cy.dataCy('env-editor-mini').should('have.text', env);
+    cy.dataCy('toggle-preflight-script').click();
+    cy.dataCy('preflight-script-editor-mini').should('have.text', script);
+    cy.reload();
+    cy.get('[aria-label*="Preflight Script"]').click();
+    cy.dataCy('env-editor-mini').should('have.text', env);
+    cy.dataCy('preflight-script-editor-mini').should('have.text', script);
+  });
+
+  it('should run script and show console/error output', () => {
+    writeScript(script);
+    cy.dataCy('run-preflight-script').click();
+    cy.dataCy('console-output').should('contain', 'Log: Hello_world (Line: 1, Column: 1)');
+
+    cy.dataCy('preflight-script-editor').within(() => {
+      cy.get('textarea').type('{CMD}{A}{Backspace}', { force: true });
+      cy.get('textarea').type(
+        `console.info(1)
+console.warn(true)
+console.error('Fatal')
+throw new TypeError('Test')`,
+        { force: true },
+      );
+    });
+    cy.dataCy('run-preflight-script').click();
+    // First log previous log message
+    cy.dataCy('console-output').should('contain', 'Log: Hello_world (Line: 1, Column: 1)');
+    // After the new logs
+    cy.dataCy('console-output').should(
+      'contain',
+      [
+        'Info: 1 (Line: 1, Column: 1)',
+        'Warn: true (Line: 2, Column: 1)',
+        'Error: Fatal (Line: 3, Column: 1)',
+        'TypeError: Test (Line: 4, Column: 7)',
+      ].join(''),
+    );
+  });
+
+  it('should run script and update env variables', () => {
+    cy.intercept('test.com', { body: '"Fixture"' });
+    cy.dataCy('preflight-script-editor').within(() => {
+      cy.get('textarea').type(
+        `const response = await fetch('test.com')
+const data = await response.json()
+console.log(response)
+console.info(data)
+lab.environment.set('my-test', data)`,
+        { force: true },
+      );
+    });
+
+    cy.dataCy('run-preflight-script').click();
+    cy.dataCy('console-output').should(
+      'contain',
+      ['Log: [object Response]', ' (Line: 3, Column: 1)', 'Info: Fixture'].join(''),
+    );
+    cy.dataCy('env-editor').should(
+      'include.text',
+      // replace space with  
+      '{  "foo": 123,  "my-test": "Fixture"}'.replaceAll(' ', '\xa0'),
+    );
+  });
+
+  it('`crypto-js` should works, since we removed `...Buffer` and `...Array` global variables', () => {
+    cy.dataCy('preflight-script-editor').within(() => {
+      cy.get('textarea').type('console.log(lab.CryptoJS.SHA256("🐝"))', { delay: 0, force: true });
+    });
+    cy.dataCy('run-preflight-script').click();
+    cy.dataCy('console-output').should('contain', 'Info: Using crypto-js version:');
+    cy.dataCy('console-output').should(
+      'contain',
+      'Log: d5b51e79e4be0c4f4d6b9a14e16ca864de96afe68459e60a794e80393a4809e8',
+    );
+  });
+
+  it('should disallow eval', () => {
+    cy.dataCy('preflight-script-editor').within(() => {
+      cy.get('textarea').type('eval()', { delay: 0, force: true });
+    });
+    cy.dataCy('preflight-script-modal-submit').click();
+    cy.get('body').contains('Usage of dangerous statement like eval() or Function("").');
+  });
+
+  it('should disallow invalid code', () => {
+    cy.dataCy('preflight-script-editor').within(() => {
+      cy.get('textarea').type('🐝', { delay: 0, force: true });
+    });
+    cy.dataCy('preflight-script-modal-submit').click();
+    cy.get('body').contains("[1:1]: Illegal character '}");
+  });
+});
+
+describe('Execution', () => {
+  it('should replace with env editor values', () => {
+    cy.dataCy('toggle-preflight-script').click();
+    cy.get('[data-name="headers"]').click();
+    cy.get('.graphiql-editor-tool .graphiql-editor:last-child textarea').type(
+      '{ "__test": "{{foo}} bar {{nonExist}}" }',
+      {
+        force: true,
+        parseSpecialCharSequences: false,
+      },
+    );
+    cy.dataCy('env-editor-mini').within(() => {
+      cy.get('textarea').type('{"foo":"injected"}', {
+        force: true,
+        parseSpecialCharSequences: false,
+      });
+    });
+    cy.intercept('/api/lab/foo/my-new-project/development', req => {
+      expect(req.headers.__test).to.equal('injected bar {{nonExist}}');
+    });
+    cy.get('body').type('{ctrl}{enter}');
+  });
+
+  it('should execute script, update env editor and replace headers', () => {
+    cy.dataCy('toggle-preflight-script').click();
+    cy.get('[data-name="headers"]').click();
+    cy.get('.graphiql-editor-tool .graphiql-editor:last-child textarea').type(
+      '{ "__test": "{{foo}}" }',
+      {
+        force: true,
+        parseSpecialCharSequences: false,
+      },
+    );
+    cy.dataCy('preflight-script-modal-button').click();
+    cy.dataCy('preflight-script-editor').within(() => {
+      cy.get('textarea').type(`lab.environment.set('foo', 92)`, { force: true });
+    });
+    cy.dataCy('preflight-script-modal-submit').click();
+    cy.intercept('/api/lab/foo/my-new-project/development', req => {
+      expect(req.headers.__test).to.equal('92');
+    });
+    cy.get('.graphiql-execute-button').click();
+  });
+
+  it('should not execute script if disabled', () => {
+    cy.get('[data-name="headers"]').click();
+    cy.get('.graphiql-editor-tool .graphiql-editor:last-child textarea').type(
+      '{ "__test": "{{foo}}" }',
+      {
+        force: true,
+        parseSpecialCharSequences: false,
+      },
+    );
+    cy.dataCy('preflight-script-modal-button').click();
+    cy.dataCy('preflight-script-editor').within(() => {
+      cy.get('textarea').type(`lab.environment.set('foo', 92)`, { force: true });
+    });
+    cy.dataCy('env-editor').within(() => {
+      cy.get('textarea').type(`{"foo":10}`, { force: true, parseSpecialCharSequences: false });
+    });
+    cy.dataCy('preflight-script-modal-submit').click();
+    cy.intercept('/api/lab/foo/my-new-project/development', req => {
+      expect(req.headers.__test).to.equal('10');
+    });
+    cy.get('.graphiql-execute-button').click();
+  });
+});

cypress/local.sh

@@ -25,7 +25,7 @@ cd ..
 docker buildx bake -f docker/docker.hcl build --load
 
 echo "⬆️ Running all local containers..."
-docker compose -f ./docker/docker-compose.community.yml -f ./docker/docker-compose.end2end.yml --env-file ./integration-tests/.env --env-file ./docker/.end2end.env up -d --wait
+docker compose -f ./docker/docker-compose.community.yml -f ./docker/docker-compose.end2end.yml --env-file ./integration-tests/.env up -d --wait
 
 echo "✅ E2E tests environment is ready. To run tests now, use:"
 echo ""

cypress/tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": ["es5", "dom"],
+    "target": "es2021",
+    "lib": ["es2021", "dom"],
     "types": ["node", "cypress"]
   },
-  "include": ["**/*.ts"]
+  "include": ["**/*.ts", "../integration-tests/testkit/**/*.ts"]
 }

deployment/index.ts

@@ -16,7 +16,7 @@ import { deployKafka } from './services/kafka';
 import { deployObservability } from './services/observability';
 import { deploySchemaPolicy } from './services/policy';
 import { deployPostgres } from './services/postgres';
-import { deployProxy } from './services/proxy';
+import { deployLabWorker, deployProxy } from './services/proxy';
 import { deployRateLimit } from './services/rate-limit';
 import { deployRedis } from './services/redis';
 import { deployS3, deployS3Mirror } from './services/s3';
@@ -313,6 +313,13 @@ const proxy = deployProxy({
   environment,
 });
 
+deployLabWorker({
+  reverseProxy: proxy,
+  app,
+  environment,
+  path: '/worker.js',
+});
+
 deployCloudFlareSecurityTransform({
   environment,
   // Paths used by 3rd-party software.
@@ -351,4 +358,4 @@ export const schemaApiServiceId = schema.service.id;
 export const webhooksApiServiceId = webhooks.service.id;
 
 export const appId = app.deployment.id;
-export const publicIp = proxy!.status.loadBalancer.ingress[0].ip;
+export const publicIp = proxy.get()!.status.loadBalancer.ingress[0].ip;

deployment/services/app.ts

@@ -1,3 +1,4 @@
+import { randomUUID } from 'crypto';
 import * as pulumi from '@pulumi/pulumi';
 import { serviceLocalEndpoint } from '../utils/local-endpoint';
 import { ServiceDeployment } from '../utils/service-deployment';
@@ -71,6 +72,7 @@ export function deployApp({
         AUTH_ORGANIZATION_OIDC: '1',
         MEMBER_ROLES_DEADLINE: appEnv.MEMBER_ROLES_DEADLINE,
         PORT: '3000',
+        LABORATORY_PREFLIGHT_WORKER_URL: `https://${environment.labWorkerDns}/worker.js?hash=${randomUUID()}`,
       },
       port: 3000,
     },

deployment/services/environment.ts

@@ -39,6 +39,7 @@ export function prepareEnvironment(input: {
     release: input.release,
     appDns,
     rootDns: input.rootDns,
+    labWorkerDns: `lab-worker.${input.rootDns}`,
   };
 }
 

deployment/services/proxy.ts

@@ -7,6 +7,30 @@ import { GraphQL } from './graphql';
 import { Observability } from './observability';
 import { Usage } from './usage';
 
+export function deployLabWorker({
+  reverseProxy,
+  app,
+  environment,
+  path,
+}: {
+  reverseProxy: Proxy;
+  app: App;
+  environment: Environment;
+  path: string;
+}) {
+  const dnsName = `lab-worker.${environment.rootDns}`;
+  reverseProxy.registerInternalProxy(dnsName, {
+    path,
+    service: app.service,
+    host: dnsName,
+    customRewrite: '/preflight-script-worker.js',
+  });
+
+  return {
+    workerUrl: `https://${dnsName}${path}`,
+  };
+}
+
 export function deployProxy({
   graphql,
   app,
@@ -100,6 +124,5 @@ export function deployProxy({
         service: usage.service,
         retriable: true,
       },
-    ])
-    .get();
+    ]);
 }