feat(Global Environments): Introduce a new top level file type called global environments. (#7511)

* add new workspace type 'environment'

* new route for environments and set/get for them

* update environment picker UI

* update workspace environment modal ui to match env view

* global environment request rendering

* type checks

* ui overflow fix

* update e2e

* auto-lint issue

* type-checks

* Update aria label

* create env from project view

* changes

* save

* environment picker component

* update e2e

Author: gatzjames

packages/insomnia-smoke-test/tests/smoke/after-response-script-features.test.ts

@@ -46,7 +46,8 @@ test.describe('after-response script features tests', async () => {
         await expect(statusTag).toContainText('200 OK');
 
         // verify persisted environment
-        await page.getByLabel('Manage Environments').click();
+        await page.getByRole('button', { name: 'Manage Environments' }).click();
+        await page.getByRole('button', { name: 'Manage collection environments' }).click();
         const responseBody = page.getByRole('dialog').getByTestId('CodeEditor').locator('.CodeMirror-line');
         const rows = await responseBody.allInnerTexts();
         const bodyJson = JSON.parse(rows.join(' '));

packages/insomnia-smoke-test/tests/smoke/environment-editor-interactions.test.ts

@@ -17,14 +17,15 @@ test.describe('Environment Editor', async () => {
   test('create a new environment', async ({ page }) => {
     // Create the environment (which will become active on creation)
     // await page.getByLabel("Select an environment").click();
-    await page.getByLabel('Manage Environments').click();
+    await page.getByRole('button', { name: 'Manage Environments' }).click();
+    await page.getByRole('button', { name: 'Manage collection environments' }).click();
     await page.getByTestId('CreateEnvironmentDropdown').click();
     await page.getByRole('menuitemradio', { name: 'Shared Environment' }).press('Enter');
     await page.getByRole('row', { name: 'New Environment' }).click();
     await page.getByRole('button', { name: 'Close' }).click();
 
-    await page.getByRole('button', { name: 'Select an environment' }).press('Enter');
     await page.getByRole('option', { name: 'New Environment' }).press('Enter');
+    await page.getByRole('option', { name: 'New Environment' }).press('Escape');
 
     // Send a request check variables defaulted to base env since new env is empty
     await page.getByLabel('Request Collection').getByTestId('New Request').press('Enter');
@@ -37,15 +38,16 @@ test.describe('Environment Editor', async () => {
   // rename an existing environment
   test('Rename an existing environment', async ({ page }) => {
     // Rename the environment
-    await page.getByLabel('Manage Environments').click();
+    await page.getByRole('button', { name: 'Manage Environments' }).click();
+    await page.getByRole('button', { name: 'Manage collection environments' }).click();
     await page.getByRole('row', { name: 'ExampleB' }).getByRole('button', { name: 'name' }).dblclick();
     await page.getByRole('row', { name: 'ExampleB' }).locator('input').fill('Gandalf');
     await page.getByRole('row', { name: 'ExampleB' }).locator('input').press('Enter');
 
     await page.getByRole('button', { name: 'Close' }).click();
 
-    await page.getByRole('button', { name: 'Select an environment' }).press('Enter');
     await page.getByRole('option', { name: 'Gandalf' }).press('Enter');
+    await page.getByRole('option', { name: 'Gandalf' }).press('Escape');
 
     // Send a request check variables defaulted to base env since new env is empty
     await page.getByLabel('Request Collection').getByTestId('New Request').press('Enter');
@@ -58,7 +60,8 @@ test.describe('Environment Editor', async () => {
 
   test('Add new variables to an existing environment', async ({ page }) => {
     // Rename the environment
-    await page.getByLabel('Manage Environments').click();
+    await page.getByRole('button', { name: 'Manage Environments' }).click();
+    await page.getByRole('button', { name: 'Manage collection environments' }).click();
     // add a new string environment variable
     await page.locator('pre').filter({ hasText: '"exampleNumber": 1111,' }).click();
     await page.getByTestId('CodeEditor').getByRole('textbox').press('Enter');
@@ -70,6 +73,7 @@ test.describe('Environment Editor', async () => {
 
     // Open request
     await page.getByRole('button', { name: 'Close' }).click();
+    await page.getByLabel('Manage collection environments').press('Escape');
     await page.getByLabel('Request Collection').getByTestId('New Request').press('Enter');
 
     // Add number variable to request body

packages/insomnia-smoke-test/tests/smoke/pre-request-script-features.test.ts

@@ -421,7 +421,8 @@ test.describe('pre-request features tests', async () => {
         await expect(statusTag).toContainText('200 OK');
 
         // verify persisted environment
-        await page.getByLabel('Manage Environments').click();
+        await page.getByRole('button', { name: 'Manage Environments' }).click();
+        await page.getByRole('button', { name: 'Manage collection environments' }).click();
         const responseBody = page.getByRole('dialog').getByTestId('CodeEditor').locator('.CodeMirror-line');
         const rows = await responseBody.allInnerTexts();
         const bodyJson = JSON.parse(rows.join(' '));

packages/insomnia/src/common/render.ts

@@ -60,16 +60,38 @@ export async function buildRenderContext(
     ancestors,
     rootEnvironment,
     subEnvironment,
+    rootGlobalEnvironment,
+    subGlobalEnvironment,
     baseContext = {},
   }: {
     ancestors?: RenderContextAncestor[];
     rootEnvironment?: Environment;
     subEnvironment?: Environment;
+      rootGlobalEnvironment?: Environment | null;
+      subGlobalEnvironment?: Environment | null;
     baseContext?: Record<string, any>;
   },
 ) {
   const envObjects: Record<string, any>[] = [];
 
+  if (rootGlobalEnvironment) {
+    const ordered = orderedJSON.order(
+      rootGlobalEnvironment.data,
+      rootGlobalEnvironment.dataPropertyOrder,
+      JSON_ORDER_SEPARATOR,
+    );
+    envObjects.push(ordered);
+  }
+
+  if (subGlobalEnvironment) {
+    const ordered = orderedJSON.order(
+      subGlobalEnvironment.data,
+      subGlobalEnvironment.dataPropertyOrder,
+      JSON_ORDER_SEPARATOR,
+    );
+    envObjects.push(ordered);
+  }
+
   // Get root environment keys in correct order
   // Then get sub environment keys in correct order
   // Then get ancestor (folder) environment keys in correct order
@@ -300,6 +322,8 @@ interface RenderRequest<T extends Request | GrpcRequest | WebSocketRequest> {
 interface BaseRenderContextOptions {
   environment?: string | Environment;
   baseEnvironment?: Environment;
+  rootGlobalEnvironment?: Environment;
+  subGlobalEnvironment?: Environment;
   purpose?: RenderPurpose;
   extraInfo?: ExtraRenderInfo;
   ignoreUndefinedEnvVariable?: boolean;
@@ -326,6 +350,29 @@ export async function getRenderContext(
     throw new Error('Failed to render. Could not find workspace');
   }
 
+  const workspaceMeta = await models.workspaceMeta.getByParentId(workspace._id);
+
+  let rootGlobalEnvironment: Environment | null = null;
+  let subGlobalEnvironment: Environment | null = null;
+
+  if (workspaceMeta?.activeGlobalEnvironmentId) {
+    const activeGlobalEnvironment = await models.environment.getById(workspaceMeta.activeGlobalEnvironmentId);
+
+    if (activeGlobalEnvironment) {
+      if (activeGlobalEnvironment?.parentId.startsWith('wrk_')) {
+        rootGlobalEnvironment = activeGlobalEnvironment;
+      } else {
+        subGlobalEnvironment = activeGlobalEnvironment;
+
+        const baseGlobalEnvironment = await models.environment.getById(activeGlobalEnvironment.parentId);
+
+        if (baseGlobalEnvironment) {
+          rootGlobalEnvironment = baseGlobalEnvironment;
+        }
+      }
+    }
+  }
+
   const rootEnvironment = baseEnvironment || await models.environment.getOrCreateForParentId(
     workspace ? workspace._id : 'n/a',
   );
@@ -361,6 +408,15 @@ export async function getRenderContext(
   }
 
   const inKey = templating.NUNJUCKS_TEMPLATE_GLOBAL_PROPERTY_NAME;
+
+  if (rootGlobalEnvironment) {
+    getKeySource(rootGlobalEnvironment.data || {}, inKey, 'rootGlobal');
+  }
+
+  if (subGlobalEnvironment) {
+    getKeySource(subGlobalEnvironment.data || {}, inKey, 'subGlobal');
+  }
+
   // Get Keys from root environment
   getKeySource((rootEnvironment || {}).data, inKey, 'root');
 
@@ -408,7 +464,14 @@ export async function getRenderContext(
   };
 
   // Generate the context we need to render
-  return buildRenderContext({ ancestors, rootEnvironment, subEnvironment: subEnvironment || undefined, baseContext });
+  return buildRenderContext({
+    ancestors,
+    rootGlobalEnvironment,
+    subGlobalEnvironment,
+    rootEnvironment,
+    subEnvironment: subEnvironment || undefined,
+    baseContext,
+  });
 }
 interface BaseRenderContext {
   getMeta: () => {};

packages/insomnia/src/models/workspace-meta.ts

@@ -10,6 +10,7 @@ export const canSync = false;
 export interface BaseWorkspaceMeta {
   activeActivity: string | null;
   activeEnvironmentId: string | null;
+  activeGlobalEnvironmentId: string | null;
   activeRequestId: string | null;
   activeUnitTestSuiteId: string | null;
   cachedGitLastAuthor: string | null;
@@ -30,6 +31,7 @@ export function init(): BaseWorkspaceMeta {
   return {
     activeActivity: null,
     activeEnvironmentId: null,
+    activeGlobalEnvironmentId: null,
     activeRequestId: null,
     activeUnitTestSuiteId: null,
     cachedGitLastAuthor: null,

packages/insomnia/src/models/workspace.ts

@@ -17,7 +17,7 @@ export interface BaseWorkspace {
   name: string;
   description: string;
   certificates?: any; // deprecated
-  scope: 'design' | 'collection' | 'mock-server';
+  scope: 'design' | 'collection' | 'mock-server' | 'environment';
 }
 
 export type WorkspaceScope = BaseWorkspace['scope'];
@@ -26,6 +26,7 @@ export const WorkspaceScopeKeys = {
   design: 'design',
   collection: 'collection',
   mockServer: 'mock-server',
+  environment: 'environment',
 } as const;
 
 export type Workspace = BaseModel & BaseWorkspace;
@@ -46,6 +47,10 @@ export const isMockServer = (workspace: Pick<Workspace, 'scope'>) => (
   workspace.scope === WorkspaceScopeKeys.mockServer
 );
 
+export const isEnvironment = (workspace: Pick<Workspace, 'scope'>) => (
+  workspace.scope === WorkspaceScopeKeys.environment
+);
+
 export const init = (): BaseWorkspace => ({
   name: `New ${strings.collection.singular}`,
   description: '',
@@ -143,7 +148,8 @@ type MigrationWorkspace = Merge<Workspace, { scope: OldScopeTypes | Workspace['s
 function _migrateScope(workspace: MigrationWorkspace) {
   if (workspace.scope === WorkspaceScopeKeys.design
     || workspace.scope === WorkspaceScopeKeys.collection
-    || workspace.scope === WorkspaceScopeKeys.mockServer) {
+    || workspace.scope === WorkspaceScopeKeys.mockServer
+    || workspace.scope === WorkspaceScopeKeys.environment) {
     return workspace as Workspace;
   }
   // designer and spec => design, unset => collection
@@ -175,6 +181,8 @@ export const scopeToActivity = (scope: WorkspaceScope) => {
       return ACTIVITY_SPEC;
     case WorkspaceScopeKeys.mockServer:
       return 'mock-server';
+    case WorkspaceScopeKeys.environment:
+      return 'environment';
     default:
       return ACTIVITY_DEBUG;
   }