fix: remove .col class that causes collision with Bootstrap (via #5541)

* improvement: address Bootstrap conflict by removing our .col class (#4574)

* use `.parameters-col_description` selector in Cypress tests
This commit is contained in:
thierrydallacroce
2019-08-20 19:51:45 -07:00
committed by kyle
parent 1793df64e8
commit 0b3489b52d
8 changed files with 29 additions and 29 deletions

View File

@@ -83,13 +83,13 @@ export default class LiveResponse extends React.Component {
<table className="responses-table live-responses-table"> <table className="responses-table live-responses-table">
<thead> <thead>
<tr className="responses-header"> <tr className="responses-header">
<td className="col col_header response-col_status">Code</td> <td className="col_header response-col_status">Code</td>
<td className="col col_header response-col_description">Details</td> <td className="col_header response-col_description">Details</td>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr className="response"> <tr className="response">
<td className="col response-col_status"> <td className="response-col_status">
{ status } { status }
{ {
notDocumented ? <div className="response-undocumented"> notDocumented ? <div className="response-undocumented">
@@ -98,7 +98,7 @@ export default class LiveResponse extends React.Component {
: null : null
} }
</td> </td>
<td className="col response-col_description"> <td className="response-col_description">
{ {
isError ? <span> isError ? <span>
{`${response.get("name")}: ${response.get("message")}`} {`${response.get("name")}: ${response.get("message")}`}

View File

@@ -13,8 +13,8 @@ export const OperationExt = ({ extensions, getComponent }) => {
<table> <table>
<thead> <thead>
<tr> <tr>
<td className="col col_header">Field</td> <td className="col_header">Field</td>
<td className="col col_header">Value</td> <td className="col_header">Value</td>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

View File

@@ -65,7 +65,7 @@ export default class ParameterRow extends Component {
onChangeWrapper = (value, isXml = false) => { onChangeWrapper = (value, isXml = false) => {
let { onChange, rawParam } = this.props let { onChange, rawParam } = this.props
let valueForUpstream let valueForUpstream
// Coerce empty strings and empty Immutable objects to null // Coerce empty strings and empty Immutable objects to null
if(value === "" || (value && value.size === 0)) { if(value === "" || (value && value.size === 0)) {
valueForUpstream = null valueForUpstream = null
@@ -126,7 +126,7 @@ export default class ParameterRow extends Component {
getParamKey() { getParamKey() {
const { param } = this.props const { param } = this.props
if(!param) return null if(!param) return null
return `${param.get("name")}-${param.get("in")}` return `${param.get("name")}-${param.get("in")}`
@@ -214,7 +214,7 @@ export default class ParameterRow extends Component {
return ( return (
<tr data-param-name={param.get("name")} data-param-in={param.get("in")}> <tr data-param-name={param.get("name")} data-param-in={param.get("in")}>
<td className="col parameters-col_name"> <td className="parameters-col_name">
<div className={required ? "parameter__name required" : "parameter__name"}> <div className={required ? "parameter__name required" : "parameter__name"}>
{ param.get("name") } { param.get("name") }
{ !required ? null : <span style={{color: "red"}}>&nbsp;*</span> } { !required ? null : <span style={{color: "red"}}>&nbsp;*</span> }
@@ -232,7 +232,7 @@ export default class ParameterRow extends Component {
{ !showExtensions || !extensions.size ? null : extensions.map((v, key) => <ParameterExt key={`${key}-${v}`} xKey={key} xVal={v} /> )} { !showExtensions || !extensions.size ? null : extensions.map((v, key) => <ParameterExt key={`${key}-${v}`} xKey={key} xVal={v} /> )}
</td> </td>
<td className="col parameters-col_description"> <td className="parameters-col_description">
{ param.get("description") ? <Markdown source={ param.get("description") }/> : null } { param.get("description") ? <Markdown source={ param.get("description") }/> : null }
{ (bodyParam || !isExecute) && isDisplayParamEnum ? { (bodyParam || !isExecute) && isDisplayParamEnum ?
@@ -291,12 +291,12 @@ export default class ParameterRow extends Component {
} }
{ {
!bodyParam && isExecute ? !bodyParam && isExecute ?
<ParameterIncludeEmpty <ParameterIncludeEmpty
onChange={this.onChangeIncludeEmpty} onChange={this.onChangeIncludeEmpty}
isIncluded={specSelectors.parameterInclusionSettingFor(pathMethod, param.get("name"), param.get("in"))} isIncluded={specSelectors.parameterInclusionSettingFor(pathMethod, param.get("name"), param.get("in"))}
isDisabled={value && value.size !== 0} isDisabled={value && value.size !== 0}
param={param} /> param={param} />
: null : null
} }

View File

@@ -139,8 +139,8 @@ export default class Parameters extends Component {
<table className="parameters"> <table className="parameters">
<thead> <thead>
<tr> <tr>
<th className="col col_header parameters-col_name">Name</th> <th className="col_header parameters-col_name">Name</th>
<th className="col col_header parameters-col_description">Description</th> <th className="col_header parameters-col_description">Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

View File

@@ -140,8 +140,8 @@ export default class Response extends React.Component {
sampleResponse = response.getIn(["examples", activeContentType]) sampleResponse = response.getIn(["examples", activeContentType])
} else { } else {
sampleResponse = schema ? getSampleSchema( sampleResponse = schema ? getSampleSchema(
schema.toJS(), schema.toJS(),
activeContentType, activeContentType,
{ {
includeReadOnly: true, includeReadOnly: true,
includeWriteOnly: true // writeOnly has no filtering effect in swagger 2.0 includeWriteOnly: true // writeOnly has no filtering effect in swagger 2.0
@@ -154,10 +154,10 @@ export default class Response extends React.Component {
return ( return (
<tr className={ "response " + ( className || "") } data-code={code}> <tr className={ "response " + ( className || "") } data-code={code}>
<td className="col response-col_status"> <td className="response-col_status">
{ code } { code }
</td> </td>
<td className="col response-col_description"> <td className="response-col_description">
<div className="response-col_description__inner"> <div className="response-col_description__inner">
<Markdown source={ response.get( "description" ) } /> <Markdown source={ response.get( "description" ) } />
@@ -237,7 +237,7 @@ export default class Response extends React.Component {
) : null} ) : null}
</td> </td>
{isOAS3 ? <td className="col response-col_links"> {isOAS3 ? <td className="response-col_links">
{ links ? { links ?
links.toSeq().map((link, key) => { links.toSeq().map((link, key) => {
return <OperationLink key={key} name={key} link={ link } getComponent={getComponent}/> return <OperationLink key={key} name={key} link={ link } getComponent={getComponent}/>

View File

@@ -117,8 +117,8 @@ export default class Responses extends React.Component {
<table className="responses-table"> <table className="responses-table">
<thead> <thead>
<tr className="responses-header"> <tr className="responses-header">
<td className="col col_header response-col_status">Code</td> <td className="col_header response-col_status">Code</td>
<td className="col col_header response-col_description">Description</td> <td className="col_header response-col_description">Description</td>
{ specSelectors.isOAS3() ? <td className="col col_header response-col_links">Links</td> : null } { specSelectors.isOAS3() ? <td className="col col_header response-col_links">Links</td> : null }
</tr> </tr>
</thead> </thead>

View File

@@ -139,7 +139,7 @@ const RequestBody = ({
const isFile = type === "string" && (format === "binary" || format === "base64") const isFile = type === "string" && (format === "binary" || format === "base64")
return <tr key={key} className="parameters" data-property-name={key}> return <tr key={key} className="parameters" data-property-name={key}>
<td className="col parameters-col_name"> <td className="parameters-col_name">
<div className={required ? "parameter__name required" : "parameter__name"}> <div className={required ? "parameter__name required" : "parameter__name"}>
{ key } { key }
{ !required ? null : <span style={{color: "red"}}>&nbsp;*</span> } { !required ? null : <span style={{color: "red"}}>&nbsp;*</span> }
@@ -153,7 +153,7 @@ const RequestBody = ({
{ prop.get("deprecated") ? "deprecated": null } { prop.get("deprecated") ? "deprecated": null }
</div> </div>
</td> </td>
<td className="col parameters-col_description"> <td className="parameters-col_description">
<Markdown source={ description }></Markdown> <Markdown source={ description }></Markdown>
{isExecute ? <div><JsonSchemaForm {isExecute ? <div><JsonSchemaForm
fn={fn} fn={fn}

View File

@@ -8,12 +8,12 @@ describe("#5452: <Select /> crashing in Parameters", function() {
cy.visit("http://localhost:3230/?url=/documents/bugs/5452/openapi.yaml") cy.visit("http://localhost:3230/?url=/documents/bugs/5452/openapi.yaml")
.get("#operations-default-get_endpoint") .get("#operations-default-get_endpoint")
.click() .click()
.get(".parameters > tbody > tr > .col > select") .get(".parameters > tbody > tr > .parameters-col_description > select")
.select("") .select("")
.get(".parameters > tbody > tr > .col > select") .get(".parameters > tbody > tr > .parameters-col_description > select")
.should("exist") .should("exist")
.select("fruit") .select("fruit")
.get(".parameters > tbody > tr > .col > select") .get(".parameters > tbody > tr > .parameters-col_description > select")
.should("exist") .should("exist")
}) })
}) })
@@ -22,12 +22,12 @@ describe("#5452: <Select /> crashing in Parameters", function() {
cy.visit("http://localhost:3230/?url=/documents/bugs/5452/swagger.yaml") cy.visit("http://localhost:3230/?url=/documents/bugs/5452/swagger.yaml")
.get("#operations-default-get_endpoint") .get("#operations-default-get_endpoint")
.click() .click()
.get(".parameters > tbody > tr > .col > select") .get(".parameters > tbody > tr > .parameters-col_description > select")
.select("") .select("")
.get(".parameters > tbody > tr > .col > select") .get(".parameters > tbody > tr > .parameters-col_description > select")
.should("exist") .should("exist")
.select("fruit") .select("fruit")
.get(".parameters > tbody > tr > .col > select") .get(".parameters > tbody > tr > .parameters-col_description > select")
.should("exist") .should("exist")
}) })
}) })