Bump react-aria (#9188)

* bumps

* remove underlay

* fix e2e tests

* fix tests

* fix more e2e tests

* use prompt button

* fix type checks

* locator
This commit is contained in:
Jack Kavanagh
2025-09-29 16:37:33 +00:00
committed by GitHub
parent d25412c93b
commit 1ac66dfdc0
25 changed files with 1004 additions and 1023 deletions
+2
View File
@@ -0,0 +1,2 @@
b30978e33b067c2d156886475966152d46202108 # run prettier against every file
b429feb2f2ec08975ca2ff45b3b5a556aa8d0e35 # eslint upgrade
+932 -931
View File
File diff suppressed because it is too large Load Diff
+1 -1
View File
@@ -20,7 +20,7 @@
"serve": "esr server/index.ts"
},
"devDependencies": {
"@playwright/test": "1.51.1",
"@playwright/test": "1.55.1",
"@ravanallc/grpc-server-reflection": "^0.1.6",
"@types/express": "^4.17.21",
"@types/oidc-provider": "^8.8.1",
@@ -32,7 +32,7 @@ testWithLegacyDatabase('Run data migration to version 8', async ({ page, userCon
await page.getByLabel('Local Collection').click();
await page.getByRole('button', { name: 'Manage Environments' }).click();
await page.getByLabel('Select a Collection').getByRole('option', { name: 'Mars' }).press('Enter');
await page.getByTestId('underlay').click();
await page.locator('body').click();
// The collection is moved to a local project
await page.getByLabel('Git Sync').isVisible();
await page.getByText('Get list of rockets').click();
@@ -96,14 +96,14 @@ test.describe('after-response script features tests', () => {
await page.getByRole('button', { name: 'Close', exact: true }).click();
// globals and baseGlobals can be persisted
await page.getByTestId('underlay').click();
await page.locator('body').click();
await page.getByLabel('Request Collection').getByTestId('persist global environment').press('Enter');
// activate global sub environment
await page.getByLabel('Manage Environments').click();
await page.getByPlaceholder('Choose a global environment').click();
await page.getByRole('option', { name: 'Script Environment' }).click();
await page.getByRole('option', { name: 'Sub Script Env' }).click();
await page.getByTestId('underlay').click();
await page.locator('body').click();
// send
await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
// check when activate global sub environment, globals refers to the selected while baseGlobals refers to the base env
@@ -85,7 +85,7 @@ test.describe('Dashboard', () => {
// Create new collection
await page.getByLabel('Create in project').click();
await page.getByText('Request collection').click();
await page.getByRole('button', { name: 'Create' }).click();
await page.getByRole('button', { name: 'Create', exact: true }).click();
await page.getByTestId('project').click();
// Rename collection
@@ -19,7 +19,7 @@ test.describe('Environment Editor', () => {
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('dialog').getByRole('button', { name: 'Close' }).click();
await page.getByRole('option', { name: 'New Environment' }).press('Enter');
await page.getByRole('option', { name: 'New Environment' }).press('Escape');
@@ -44,7 +44,7 @@ test.describe('Environment Editor', () => {
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: 'Close', exact: true }).click();
await page.getByRole('option', { name: 'Gandalf' }).press('Enter');
await page.getByRole('option', { name: 'Gandalf' }).press('Escape');
@@ -63,14 +63,15 @@ test.describe('Environment Editor', () => {
await page.getByRole('button', { name: 'Manage collection environments' }).click();
// add a new string environment variable
await page.locator('pre').filter({ hasText: '"exampleNumber": 2222,' }).click();
await page.getByTestId('CodeEditor').getByRole('textbox').press('Enter');
await page.getByTestId('CodeEditor').getByRole('textbox').fill('"testNumber":9000,');
await page.getByTestId('CodeEditor').getByRole('textbox').press('Enter');
await page.getByTestId('CodeEditor').getByRole('textbox').fill('"testString":"Gandalf",');
const dialog = page.getByRole('dialog');
await dialog.getByTestId('CodeEditor').getByRole('textbox').press('Enter');
await dialog.getByTestId('CodeEditor').getByRole('textbox').fill('"testNumber":9000,');
await dialog.getByTestId('CodeEditor').getByRole('textbox').press('Enter');
await dialog.getByTestId('CodeEditor').getByRole('textbox').fill('"testString":"Gandalf",');
// Open request
// Delay the click to let debounce finish
await page.getByRole('button', { name: 'Close' }).click({ delay: 200 });
await dialog.getByRole('button', { name: 'Close' }).click({ delay: 200 });
await page.getByLabel('Manage collection environments').press('Escape');
await page.getByLabel('Request Collection').getByTestId('New Request').press('Enter');
@@ -86,7 +87,7 @@ test.describe('Environment Editor', () => {
// check row has been disabled
await expect.soft(firstRow).toHaveCSS('opacity', '0.4');
// delete all items
await page.getByRole('button', { name: 'Delete All' }).dblclick();
await page.getByRole('dialog').getByRole('button', { name: 'Delete All' }).dblclick();
// check items have been deleted
await expect.soft(kvTable.getByRole('option').nth(2)).toBeHidden();
@@ -108,7 +109,7 @@ test.describe('Environment Editor', () => {
await secondRow.getByRole('button', { name: 'Edit JSON' }).click();
// wait for modal to show
await expect.soft(page.getByRole('dialog').getByTestId('CodeEditor')).toBeVisible();
const bodyEditor = page.getByTestId('CodeEditor').getByRole('textbox');
const bodyEditor = page.getByRole('dialog').getByTestId('CodeEditor').getByRole('textbox');
// move cursor right and input json string
await bodyEditor.focus();
await bodyEditor.press('ArrowRight');
@@ -117,7 +118,7 @@ test.describe('Environment Editor', () => {
await page.getByRole('button', { name: 'Modal Submit' }).click({ delay: 200 });
// Open request
await page.getByRole('button', { name: 'Close' }).click();
await page.getByRole('button', { name: 'Close', exact: true }).click();
await page.getByLabel('Manage collection environments').press('Escape');
await page.getByLabel('Request Collection').getByTestId('New Request').press('Enter');
await page.getByRole('button', { name: 'Send' }).click();
@@ -27,7 +27,7 @@ test('Setup external vault and used in request', async ({ app, page }) => {
await page.getByRole('radio', { name: 'Credential File' }).check();
await page.getByRole('textbox', { name: 'Section Name:' }).fill('aws-section-name');
await page.getByRole('textbox', { name: 'Region:' }).fill('aws-region');
await page.getByRole('button', { name: 'Create' }).click();
await page.getByRole('dialog').getByRole('button', { name: 'Create', exact: true }).click();
await expect.soft(page.getByRole('cell', { name: awsCredentialName })).toBeVisible();
// create gcp credential
const gcpCredentialName = 'smoke-test-gcp';
@@ -35,7 +35,7 @@ test('Setup external vault and used in request', async ({ app, page }) => {
await page.getByRole('menuitemradio', { name: 'GCP' }).click();
await page.getByRole('textbox', { name: 'Credential Name:' }).fill(gcpCredentialName);
await page.getByRole('textbox', { name: 'Input Service Account Key Path' }).fill('gcp-path');
await page.getByRole('button', { name: 'Create' }).click();
await page.getByRole('dialog').getByRole('button', { name: 'Create', exact: true }).click();
await expect.soft(page.getByRole('cell', { name: gcpCredentialName })).toBeVisible();
// create hashicorp credential
const hashicorpCredentialName = 'smoke-test-hashicorp';
@@ -45,7 +45,7 @@ test('Setup external vault and used in request', async ({ app, page }) => {
await page.getByRole('textbox', { name: 'Server Address:' }).fill('http://127.0.0.1');
await page.getByRole('textbox', { name: 'Role Id:' }).fill('role-id');
await page.getByRole('textbox', { name: 'Secret Id:' }).fill('secret-id');
await page.getByRole('button', { name: 'Create' }).click();
await page.getByRole('dialog').getByRole('button', { name: 'Create', exact: true }).click();
await expect.soft(page.getByRole('cell', { name: hashicorpCredentialName })).toBeVisible();
// close the settings
await page.locator('.app').press('Escape');
@@ -23,7 +23,7 @@ test.describe('Global Environments', () => {
await page.getByPlaceholder('Choose a global environment').click();
await page.getByRole('option', { name: 'global-environment' }).click();
await page.getByText('New Environment').click();
await page.getByTestId('underlay').click();
await page.locator('body').click();
await page.getByRole('button', { name: 'Send' }).click();
await page.getByRole('tab', { name: 'Console' }).click();
@@ -43,8 +43,8 @@ test('can send gRPC requests using mTLS requests (with reflection)', async ({ ap
await page.locator('[data-test-id="add-client-certificate-key-file-chooser"]').click();
await (await fileChooserPromise).setFiles(path.join(fixturePath, 'client.key'));
await page.getByRole('button', { name: 'Add certificate' }).click();
await page.getByRole('button', { name: 'Done' }).click();
await page.getByRole('dialog').getByRole('button', { name: 'Add certificate' }).click();
await page.getByRole('dialog').getByRole('button', { name: 'Done' }).click();
// initiates an mtls connection with the given certificates
await page.getByTestId('button-server-reflection').click();
@@ -20,7 +20,7 @@ test.describe('multiple-tab feature test', () => {
await page.getByTestId('project').click();
await page.getByLabel('Create in project').click();
await page.getByText('Request collection').click();
await page.getByRole('button', { name: 'Create' }).click();
await page.getByRole('dialog').getByRole('button', { name: 'Create' }).click();
await page.getByLabel('Create in collection').click();
await page.getByLabel('HTTP Request').click();
@@ -51,7 +51,7 @@ test.describe('multiple-tab feature test', () => {
await page.getByTestId('project').click();
await page.getByLabel('Create in project').click();
await page.getByText('Request collection').click();
await page.getByRole('button', { name: 'Create' }).click();
await page.getByRole('dialog').getByRole('button', { name: 'Create' }).click();
await page.getByLabel('Create in collection').click();
await page.getByLabel('HTTP Request').click();
await expect.soft(page.getByLabel('tab-New Request').getByLabel('Tab Tag')).toHaveText('GET');
@@ -64,7 +64,7 @@ test.describe('multiple-tab feature test', () => {
await page.getByTestId('project').click();
await page.getByLabel('Create in project').click();
await page.getByText('Request collection').click();
await page.getByRole('button', { name: 'Create' }).click();
await page.getByRole('dialog').getByRole('button', { name: 'Create' }).click();
await page.getByLabel('Tab Plus').click();
await page.getByRole('menuitem', { name: 'add request to current' }).click();
await page.getByTestId('New Request').click();
@@ -74,7 +74,7 @@ test.describe('multiple-tab feature test', () => {
await page.getByLabel('Create in project').click();
await page.getByLabel('Request collection', { exact: true }).click();
await page.getByPlaceholder('Enter a name for your Request Collection').fill('Test add tab collection');
await page.getByRole('button', { name: 'Create', exact: true }).click();
await page.getByRole('dialog').getByRole('button', { name: 'Create' }).click();
await page.getByLabel('Tab Plus').click();
await page.getByRole('menuitem', { name: 'add request to other' }).click();
await page.getByLabel('Select Workspace').selectOption({ label: 'My first collection' });
@@ -85,7 +85,7 @@ test.describe('multiple-tab feature test', () => {
await page.getByTestId('project').click();
await page.getByLabel('Create in project').click();
await page.getByText('Request collection').click();
await page.getByRole('button', { name: 'Create' }).click();
await page.getByRole('dialog').getByRole('button', { name: 'Create' }).click();
await page.getByLabel('Create in collection').click();
await page.getByLabel('HTTP Request').click();
await page.getByTestId('New Request').click();
@@ -41,8 +41,7 @@ test.describe('Vault key actions', () => {
await page.getByRole('button', { name: 'Unlock' }).click();
await modal.getByText("M2 didn't Check").click();
// test reset vault key
await page.getByText('Reset Vault Key').click();
await page.getByText('Yes').click();
await page.getByRole('dialog').getByText('Reset Vault Key').dblclick();
await expect.soft(modal).toBeVisible();
const vaultKeyValueInModal = await modal.getByTestId('VaultKeyDisplayPanel').innerText();
expect.soft(vaultKeyValueInModal.length).toBeGreaterThan(0);
@@ -60,8 +59,7 @@ test.describe('Vault key actions', () => {
await page.getByRole('button', { name: 'Scan' }).click();
await page.getByRole('dialog').getByRole('button', { name: 'Import' }).click();
await page.getByText('Global env with secret vault').click();
await page.getByText('Reset Vault Key').click();
await page.getByText('Yes').click();
await page.getByRole('dialog').getByText('Reset Vault Key').dblclick();
const vaultKeyValueInModal = await page.getByTestId('VaultKeyDisplayPanel').innerText();
expect.soft(vaultKeyValueInModal.length).toBeGreaterThan(0);
});
@@ -150,7 +148,7 @@ test.describe('Check vault used in environment', () => {
await page.getByRole('option', { name: 'New Global Vault Environment' }).click();
await page.getByRole('option', { name: 'New Environment' }).click();
await page.getByText('Base Environment1').click();
await page.getByTestId('underlay').click();
await page.locator('body').click();
// activate request and validate newly created vault env has been applied
await page.getByTestId('normal').getByLabel('GET normal', { exact: true }).click();
@@ -174,7 +172,7 @@ test.describe('Check vault used in environment', () => {
// activate legacy array vault environment
await page.getByText('legacy vault value array').click();
await page.getByTestId('underlay').click();
await page.locator('body').click();
// activate request
await page.getByTestId('legacy-array-vault').getByLabel('GET legacy-array-vault', { exact: true }).click();
// Wait for tab appear
@@ -190,7 +188,7 @@ test.describe('Check vault used in environment', () => {
// activate legacy object vault environment
await page.getByLabel('Manage Environments').click();
await page.getByText('legacy vault value object').click();
await page.getByTestId('underlay').click();
await page.locator('body').click();
// activate request
await page.getByTestId('legacy-object-vault').getByLabel('GET legacy-object-vault', { exact: true }).click();
await expect.soft(page.getByLabel('Insomnia Tabs').getByText('legacy-object-vault', { exact: true })).toBeVisible();
@@ -205,7 +203,7 @@ test.describe('Check vault used in environment', () => {
// activate invalid vault environment
await page.getByLabel('Manage Environments').click();
await page.getByText('base with vault').click();
await page.getByTestId('underlay').click();
await page.locator('body').click();
// activate request
await page.getByTestId('legacy-invalid-vault').getByLabel('GET legacy-invalid-vault', { exact: true }).click();
await expect
@@ -19,9 +19,8 @@ test('Can invite users in app', async ({ page }) => {
await organizationMembersSelector.getByRole('option').nth(i).click();
}
await page.getByText('Invite collaborators').click();
await page.getByRole('button', { name: 'Invite', exact: true }).click();
await page.locator('body').press('Escape');
await page.getByRole('dialog').getByRole('button', { name: 'Invite' }).click();
const invitationListLocator = page.getByLabel('Invitation list');
// Check that the new member is in the list
@@ -12,10 +12,10 @@ test('can use client certificate for mTLS', async ({ app, page }) => {
});
await page.getByTestId('settings-button').click();
await page.getByTestId('dataFolders').fill(getFixturePath(path.join("certificates", "client")));
await page.getByTestId('dataFolders').fill(getFixturePath(path.join('certificates', 'client')));
await page.getByTestId('dataFolders-btn').click();
await expect.soft(page.getByText('client')).toBeVisible();
await page.getByTestId('dataFolders').fill(getFixturePath(path.join("certificates", "rootCA.pem")));
await page.getByTestId('dataFolders').fill(getFixturePath(path.join('certificates', 'rootCA.pem')));
await page.getByTestId('dataFolders-btn').click();
await expect.soft(page.getByText('rootCA.pem')).toBeVisible();
await page.locator('.app').press('Escape');
@@ -60,7 +60,7 @@ test('can use client certificate for mTLS', async ({ app, page }) => {
await page.locator('[data-test-id="add-client-certificate-key-file-chooser"]').click();
await (await fileChooser).setFiles(path.join(fixturePath, 'client.key'));
await page.getByRole('button', { name: 'Add certificate' }).click();
await page.getByRole('dialog').getByRole('button', { name: 'Add certificate' }).click();
await page.getByRole('button', { name: 'Done' }).click();
await page.getByRole('button', { name: 'Send', exact: true }).click();
@@ -421,7 +421,7 @@ test.describe('pre-request features tests', () => {
await page.locator('text=Add PFX or PKCS12 file').click();
const fileChooser = await fileChooserPromise;
await fileChooser.setFiles(path.join(fixturePath, 'fake.pfx'));
await page.getByRole('button', { name: 'Add certificate' }).click();
await page.getByRole('dialog').getByRole('button', { name: 'Add certificate' }).click();
await page.getByRole('button', { name: 'Done' }).click();
await page
@@ -507,12 +507,9 @@ test.describe('pre-request features tests', () => {
},
});
// close modal and go back
await page.getByRole('dialog').getByRole('button', { name: 'Close' }).click();
await page
.locator('[data-icon="chevron-left"]')
.filter({ has: page.locator(':visible') })
.first()
.click();
await page.locator('body').press('Escape');
await page.locator('body').press('Escape');
await page.getByTestId('project').click();
// import global environment
const globalEnvText = await loadFixture('script-global-environment.yaml');
await app.evaluate(async ({ clipboard }, text) => clipboard.writeText(text), globalEnvText);
@@ -528,7 +525,7 @@ test.describe('pre-request features tests', () => {
await page.getByPlaceholder('Choose a global environment').click();
await page.getByRole('option', { name: 'Script Environment' }).click();
await page.getByRole('option', { name: 'Base Script Env' }).click();
await page.getByTestId('underlay').click();
await page.locator('body').click();
// send
await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
// check when activate global base environment, globals and baseGlobals refer to the same env
@@ -554,7 +551,7 @@ test.describe('pre-request features tests', () => {
// activate global sub environment
await page.getByLabel('Manage Environments').click();
await page.getByRole('option', { name: 'Sub Script Env' }).click();
await page.getByTestId('underlay').click();
await page.locator('body').click();
// send
await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
// check when activate global sub environment, globals refers to the selected while baseGlobals refers to the base env
@@ -582,8 +579,8 @@ test.describe('pre-request features tests', () => {
await page.getByLabel('Manage Environments').click();
await page.getByRole('button', { name: 'Manage collection environments' }).click();
await page.getByLabel('Table Edit').click();
await page.getByRole('button', { name: 'Close' }).click();
await page.getByTestId('underlay').click();
await page.getByRole('dialog').getByRole('button', { name: 'Close' }).click();
await page.locator('body').click();
// send request
await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
+3 -3
View File
@@ -122,12 +122,12 @@
"oauth-1.0a": "^2.2.6",
"objectpath": "^2.0.0",
"papaparse": "^5.5.2",
"react-aria-components": "^1.8.0",
"react-aria": "3.39.0",
"react-aria-components": "^1.12.2",
"react-aria": "3.43.2",
"react-dom": "^18.3.1",
"react-resizable-panels": "^2.1.7",
"react-router": "^7.7.0",
"react-stately": "3.37.0",
"react-stately": "3.41.0",
"react-use": "^17.6.0",
"react": "^18.3.1",
"shell-quote": "^1.8.2",
@@ -888,6 +888,7 @@ const Debug = () => {
className="aspect-square h-full"
selectedKey={sortOrder}
onSelectionChange={order =>
order &&
setSearchParams({
...Object.fromEntries(searchParams.entries()),
sortOrder: order.toString(),
@@ -109,7 +109,7 @@ const UnitTestItemView = ({ unitTest }: { unitTest: UnitTest; testsRunning: bool
className="flex-shrink-0"
aria-label="Request for test"
onSelectionChange={key => {
const requestId = key.toString();
invariant(key, 'Expected request id');
updateUnitTestFetcher.submit({
organizationId,
projectId,
@@ -117,7 +117,7 @@ const UnitTestItemView = ({ unitTest }: { unitTest: UnitTest; testsRunning: bool
testSuiteId: unitTestSuite._id,
testId: unitTest._id,
data: {
requestId,
requestId: key.toString(),
},
});
}}
@@ -172,9 +172,9 @@ export const ContentTypeDropdown: FC = () => {
onSelectionChange={mimeType => {
if (mimeType === 'no-body') {
handleChangeMimeType(EMPTY_MIME_TYPE);
} else {
handleChangeMimeType(mimeType.toString());
return;
}
mimeType && handleChangeMimeType(mimeType.toString());
}}
selectedKey={body.mimeType ?? 'no-body'}
>
@@ -79,7 +79,7 @@ export const GrpcMethodDropdown: FunctionComponent<Props> = ({ disabled, methods
aria-label="Select gRPC method"
name="method"
onSelectionChange={key => {
handleChange(key.toString());
key && handleChange(key.toString());
}}
className="h-full"
selectedKey={selectedPath}
@@ -29,7 +29,7 @@ export const WebSocketPreviewMode: FC<Props> = ({ previewMode, onSelect }) => {
aria-label="Change Body Type"
name="body-type"
onSelectionChange={contentType => {
onSelect(contentType.toString());
contentType && onSelect(contentType.toString());
}}
selectedKey={previewMode}
>
@@ -6,12 +6,10 @@ import { useRootLoaderData } from '~/root';
import { useResetVaultKeyFetcher } from '~/routes/auth.reset-vault-key';
import { useValidateVaultKeyActionFetcher } from '~/routes/auth.validate-vault-key';
import { useOrganizationLoaderData } from '~/routes/organization';
import { PromptButton } from '~/ui/components/base/prompt-button';
import { Icon } from '~/ui/components/icon';
import { VaultKeyDisplayInput } from '~/ui/components/settings/vault-key-panel';
import { showModal } from '.';
import { AskModal } from './ask-modal';
export interface InputVaultKeyModalProps {
onClose: (vaultKey?: string) => void;
allowClose?: boolean;
@@ -70,23 +68,6 @@ export const InputVaultKeyModal = (props: InputVaultKeyModalProps) => {
});
};
const resetVaultKey = () => {
showModal(AskModal, {
title: 'Reset Vault Key',
message:
'Are you sure you sure to reset vault key? This will clear all secrets in private environment among all devices.',
yesText: 'Yes',
noText: 'No',
onDone: async (yes: boolean) => {
if (yes) {
// clear all local secrets first
await removeAllSecrets(organizations.map(org => org.id));
resetVaultKeyFetcher.submit();
}
},
});
};
return (
<ModalOverlay
isOpen
@@ -134,12 +115,15 @@ export const InputVaultKeyModal = (props: InputVaultKeyModalProps) => {
<div className="mt-2 flex items-center justify-between">
<div>
<span className="faint text-sm">Forget Vault Key?</span>
<Button
<PromptButton
className="h-full px-4 py-1 text-sm text-[--color-info] underline transition-all"
onPress={resetVaultKey}
onClick={async () => {
await removeAllSecrets(organizations.map(org => org.id));
resetVaultKeyFetcher.submit();
}}
>
Reset Vault Key
</Button>
</PromptButton>
</div>
<Button
className="ml-4 flex items-center gap-2 rounded-sm border border-solid border-[--hl-md] bg-[--color-surprise] px-3 py-2 text-[--color-font-surprise] transition-colors hover:bg-opacity-90 hover:no-underline"
@@ -449,7 +449,7 @@ const UntrackedProject = ({
aria-label="Select an organization"
name="organizationId"
onSelectionChange={key => {
setSelectedOrganizationId(key.toString());
key && setSelectedOrganizationId(key.toString());
}}
selectedKey={selectedOrganizationId}
isDisabled={organizations.length === 0}
@@ -540,7 +540,7 @@ const UntrackedWorkspace = ({
aria-label="Select a project"
name="projectId"
onSelectionChange={key => {
setSelectedProjectId(key.toString());
key && setSelectedProjectId(key.toString());
}}
selectedKey={selectedProjectId}
isDisabled={projects.length === 0}
@@ -124,7 +124,7 @@ export const SocketIOBodyTabPane = ({ request, requestPayload, environmentId }:
<Select
aria-label="Change Body Type"
name="body-type"
onSelectionChange={value => handleContentTypeChange(value.toString())}
onSelectionChange={value => value && handleContentTypeChange(value.toString())}
selectedKey={contentType}
>
<Button className="flex min-w-[12ch] flex-1 items-center justify-between gap-2 rounded-sm px-4 py-1 text-sm font-bold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]">
@@ -155,7 +155,6 @@ export const WebSocketActionBar = forwardRef<WebSocketActionBarHandle, ActionBar
},
});
const isConnectingOrClosed = !readyState;
const getRequestLabel = () => {
let requestTypeLabel = '';
if (request.type === 'WebSocketRequest') {
@@ -179,7 +178,6 @@ export const WebSocketActionBar = forwardRef<WebSocketActionBarHandle, ActionBar
)}
<form
className="flex flex-1"
aria-disabled={isOpen}
onSubmit={event => {
event.preventDefault();
handleSubmit();
@@ -192,7 +190,7 @@ export const WebSocketActionBar = forwardRef<WebSocketActionBarHandle, ActionBar
onKeyDown={createKeybindingsHandler({
Enter: () => handleSubmit(),
})}
readOnly={readyState}
readOnly={isOpen}
placeholder="wss://example.com/chat"
defaultValue={defaultValue}
onChange={onChange}
@@ -200,15 +198,15 @@ export const WebSocketActionBar = forwardRef<WebSocketActionBarHandle, ActionBar
/>
</div>
<div className="flex p-1">
{isConnectingOrClosed ? (
{isOpen ? (
<DisconnectButton requestId={request._id} />
) : (
<button
className="rounded-sm bg-[--color-surprise] px-[--padding-md] text-center text-[--color-font-surprise] hover:brightness-75"
type="submit"
>
Connect
</button>
) : (
<DisconnectButton requestId={request._id} />
)}
</div>
</form>