feat(environments): split variables and secrets into separate tabs (#8191)

This commit is contained in:
Pooja
2026-06-26 12:21:58 +05:30
committed by GitHub
parent 1ceea0797e
commit d6e17e1dab
32 changed files with 1129 additions and 307 deletions

View File

@@ -180,12 +180,16 @@ test.describe('DataType selector — new collection created via UI', () => {
await expect(page.locator('.request-tab').filter({ hasText: 'Environments' })).toBeVisible();
const envRows = locators.environment.varRows();
// Named rows added so far; the table always keeps one trailing empty stub,
// so after N adds the row count (including the stub) is N + 1.
let addedEnvVars = 0;
// Named rows added on the currently active tab; the table always keeps one
// trailing empty stub, so after N adds the visible row count is N + 1.
// Variables and secrets live on separate tabs, so the count is per-tab and
// resets when we switch tabs.
let tabRowCount = 0;
// Add one env var row: fill name + value, optionally mark it secret, then
// pick its dataType. Secrets render the DataTypeSelector too (value masks).
// Add one env var row on the active tab: fill name + value, then pick its
// dataType. A row is a secret by virtue of being added on the Secrets tab,
// so the caller switches tabs before adding secrets. Secrets render the
// DataTypeSelector too.
const addEnvVar = async (name: string, dataType: NonDefaultDataType, { secret = false } = {}) => {
await test.step(`add ${secret ? 'secret ' : ''}${dataType} env var "${name}"`, async () => {
const emptyRow = page.locator('tbody tr').last();
@@ -195,20 +199,14 @@ test.describe('DataType selector — new collection created via UI', () => {
// EnvironmentVariablesTable.handleNameChange appends a trailing empty
// row via setTimeout(0). If we click the value editor before that
// append re-renders, focus can be dropped — wait for the new row.
addedEnvVars++;
await expect(envRows).toHaveCount(addedEnvVars + 1);
tabRowCount++;
await expect(envRows).toHaveCount(tabRowCount + 1);
const valueEditor = namedRow.locator('.CodeMirror').first();
await valueEditor.click({ force: true });
await expect(valueEditor).toHaveClass(/CodeMirror-focused/);
await page.keyboard.insertText(VALUE_FOR_DATATYPE[dataType]);
if (secret) {
const secretCheckbox = locators.environment.varRowSecretCheckbox(name);
await secretCheckbox.check();
await expect(secretCheckbox).toBeChecked();
}
await locators.dataTypeSelector.typeLabel(namedRow).click();
await locators.dataTypeSelector.menuItem(dataType).click();
await expect(locators.dataTypeSelector.typeLabel(namedRow)).toHaveText(dataType);
@@ -219,22 +217,27 @@ test.describe('DataType selector — new collection created via UI', () => {
for (const dt of TYPED_DATATYPES) {
await addEnvVar(`env_${dt}`, dt);
}
// Secrets render the DataTypeSelector too — one secret per dataType.
// Secrets live on their own tab; switch over and add them there. The active
// tab is now Secrets, so each new row is created as a secret automatically.
await locators.environment.secretsTab().click();
tabRowCount = 0;
for (const dt of TYPED_DATATYPES) {
await addEnvVar(`env_secret_${dt}`, dt, { secret: true });
}
await locators.environment.saveButton().click();
// save-all persists both tabs at once (save-env is scoped to the active tab).
await locators.environment.saveAll().click();
await page.waitForTimeout(500);
// Re-assert after save (post-formik-reset).
// Re-assert after save (post-formik-reset). The Secrets tab is still active,
// so the secret rows render here; each keeps its dataType.
for (const dt of TYPED_DATATYPES) {
await expect(locators.dataTypeSelector.typeLabel(locators.environment.varRow(`env_secret_${dt}`))).toHaveText(dt);
}
// Switch back to the Variables tab to verify the non-secret rows.
await locators.environment.variablesTab().click();
for (const dt of TYPED_DATATYPES) {
await expect(locators.dataTypeSelector.typeLabel(locators.environment.varRow(`env_${dt}`))).toHaveText(dt);
}
// Each secret var keeps both its secret flag and its dataType after save.
for (const dt of TYPED_DATATYPES) {
await expect(locators.environment.varRowSecretCheckbox(`env_secret_${dt}`)).toBeChecked();
await expect(locators.dataTypeSelector.typeLabel(locators.environment.varRow(`env_secret_${dt}`))).toHaveText(dt);
}
});
});

View File

@@ -267,9 +267,15 @@ const openEnvironmentSettings = async (page: Page, type: 'collection' | 'global'
await expect(locators.tabs.activeRequestTab()).toContainText(tabTitle);
};
/** Assert the DataTypeSelector inside an env-var row reports the expected label. */
const expectEnvVarTypeLabel = async (page: Page, name: string, label: string) => {
/**
* Assert the DataTypeSelector inside an env-var row reports the expected label.
* Variables and secrets render on separate tabs in the env editor, so activate
* the tab that owns this var before asserting (pass `{ secret: true }` for
* secret rows, which live on the Secrets tab).
*/
const expectEnvVarTypeLabel = async (page: Page, name: string, label: string, { secret = false } = {}) => {
const { environment, dataTypeSelector } = buildCommonLocators(page);
await (secret ? environment.secretsTab() : environment.variablesTab()).click();
const row = environment.varRow(name);
await scrollVirtuosoRowIntoView(page, row);
await expect(dataTypeSelector.typeLabel(row)).toHaveText(label, { timeout: SLOW_RENDER_TIMEOUT_MS });
@@ -288,14 +294,14 @@ const runSecretDataTypeLabelAssertions = async (page: Page, collectionName: stri
await selectEnvironment(page, 'variables', 'global');
await openEnvironmentSettings(page, 'collection');
await expectEnvVarTypeLabel(page, 'env_secret_num', 'number');
await expectEnvVarTypeLabel(page, 'env_secret_bool', 'boolean');
await expectEnvVarTypeLabel(page, 'env_secret_obj', 'object');
await expectEnvVarTypeLabel(page, 'env_secret_num', 'number', { secret: true });
await expectEnvVarTypeLabel(page, 'env_secret_bool', 'boolean', { secret: true });
await expectEnvVarTypeLabel(page, 'env_secret_obj', 'object', { secret: true });
await openEnvironmentSettings(page, 'global');
await expectEnvVarTypeLabel(page, 'glob_secret_num', 'number');
await expectEnvVarTypeLabel(page, 'glob_secret_bool', 'boolean');
await expectEnvVarTypeLabel(page, 'glob_secret_obj', 'object');
await expectEnvVarTypeLabel(page, 'glob_secret_num', 'number', { secret: true });
await expectEnvVarTypeLabel(page, 'glob_secret_bool', 'boolean', { secret: true });
await expectEnvVarTypeLabel(page, 'glob_secret_obj', 'object', { secret: true });
};
/**
@@ -630,13 +636,13 @@ const runDataTypeSelectorTests = (
await expectEnvVarTypeLabel(page, 'env_untyped_num', 'string');
await expectEnvVarTypeLabel(page, 'env_untyped_bool', 'string');
await expectEnvVarTypeLabel(page, 'env_untyped_obj', 'string');
await expectEnvVarTypeLabel(page, 'env_secret_untyped', 'string');
await expectEnvVarTypeLabel(page, 'env_secret_untyped', 'string', { secret: true });
await openEnvironmentSettings(page, 'global');
await expectEnvVarTypeLabel(page, 'glob_untyped_num', 'string');
await expectEnvVarTypeLabel(page, 'glob_untyped_bool', 'string');
await expectEnvVarTypeLabel(page, 'glob_untyped_obj', 'string');
await expectEnvVarTypeLabel(page, 'glob_secret_untyped', 'string');
await expectEnvVarTypeLabel(page, 'glob_secret_untyped', 'string', { secret: true });
});
test('env editor: secret variables display their declared dataType label', async ({ pageWithUserData: page }) => {