diff --git a/pkg/dashboard/frontend/cypress/e2e/api-explorer.cy.ts b/pkg/dashboard/frontend/cypress/e2e/api-explorer.cy.ts index 186f529cb..a1995543f 100644 --- a/pkg/dashboard/frontend/cypress/e2e/api-explorer.cy.ts +++ b/pkg/dashboard/frontend/cypress/e2e/api-explorer.cy.ts @@ -105,11 +105,11 @@ describe('APIs spec', () => { cy.getTestEl('Headers-tab-btn').first().click() - cy.getTestEl('header-2-key').type('X-First-Header') - cy.getTestEl('header-2-value').type('the value') + cy.getTestEl('header-2-key').clear().type('X-First-Header') + cy.getTestEl('header-2-value').clear().type('the value') - cy.getTestEl('header-3-key').type('X-Second-Header') - cy.getTestEl('header-3-value').type('the second value') + cy.getTestEl('header-3-key').clear().type('X-Second-Header') + cy.getTestEl('header-3-value').clear().type('the second value') cy.getTestEl('generated-request-path').should( 'contain.text', diff --git a/pkg/dashboard/frontend/src/components/apis/APIExplorer.tsx b/pkg/dashboard/frontend/src/components/apis/APIExplorer.tsx index 4a67dde87..3b2a98687 100644 --- a/pkg/dashboard/frontend/src/components/apis/APIExplorer.tsx +++ b/pkg/dashboard/frontend/src/components/apis/APIExplorer.tsx @@ -84,11 +84,10 @@ const requestDefault = { ], } -const bodyTabs = [ - { - name: 'JSON', - }, - { name: 'Binary' }, +const reqBodyTypes = [ + { name: 'JSON', contentType: 'application/json' }, + { name: 'Text', contentType: 'text/plain' }, + { name: 'Binary', contentType: 'application/octet-stream' }, ] const APIExplorer = () => { @@ -99,6 +98,7 @@ const APIExplorer = () => { const [JSONBody, setJSONBody] = useState('') const [fileToUpload, setFileToUpload] = useState() + const [textBody, setTextBody] = useState('') const [request, setRequest] = useState(requestDefault) const [response, setResponse] = useState() @@ -244,8 +244,7 @@ const APIExplorer = () => { ] const currentTabName = tabs[currentTabIndex].name - - const currentBodyTabName = bodyTabs[bodyTabIndex].name + const currentBodyTab = reqBodyTypes[bodyTabIndex] const refreshPathParamErrors = () => { const newPathParamErrors: Record = {} @@ -309,6 +308,15 @@ const APIExplorer = () => { const { path, method, headers } = request const url = `http://${getHost()}/api/call` + path + + // Set a default content type if not set + if (!headers.find(({ key }) => key.toLowerCase() === 'content-type')) { + headers.push({ + key: 'Content-Type', + value: currentBodyTab.contentType, + }) + } + const requestOptions: RequestInit = { method, headers: fieldRowArrToHeaders([ @@ -322,10 +330,12 @@ const APIExplorer = () => { if (method !== 'GET' && method !== 'HEAD') { // handle body in request - if (currentBodyTabName === 'Binary' && fileToUpload) { + if (currentBodyTab.name === 'Binary' && fileToUpload) { requestOptions.body = fileToUpload - } else if (currentBodyTabName === 'JSON' && JSONBody.trim()) { + } else if (currentBodyTab.name === 'JSON' && JSONBody.trim()) { requestOptions.body = JSONBody + } else if (currentBodyTab.name === 'Text' && textBody) { + requestOptions.body = textBody } } const startTime = window.performance.now() @@ -582,15 +592,15 @@ const APIExplorer = () => { {currentTabName === 'Body' && (
- {currentBodyTabName === 'JSON' && ( + {currentBodyTab.name === 'JSON' && ( { @@ -598,7 +608,18 @@ const APIExplorer = () => { }} /> )} - {currentBodyTabName === 'Binary' && ( + {currentBodyTab.name === 'Text' && ( + { + setTextBody(value) + }} + /> + )} + {currentBodyTab.name === 'Binary' && (

Binary File