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

Author: thierrydallacroce

src/core/components/live-response.jsx

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

src/core/components/operation-extensions.jsx

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

src/core/components/parameter-row.jsx

@@ -65,7 +65,7 @@ export default class ParameterRow extends Component {
   onChangeWrapper = (value, isXml = false) => {
     let { onChange, rawParam } = this.props
     let valueForUpstream
-    
+
     // Coerce empty strings and empty Immutable objects to null
     if(value === "" || (value && value.size === 0)) {
       valueForUpstream = null
@@ -126,7 +126,7 @@ export default class ParameterRow extends Component {
 
   getParamKey() {
     const { param } = this.props
-    
+
     if(!param) return null
 
     return `${param.get("name")}-${param.get("in")}`
@@ -214,7 +214,7 @@ export default class ParameterRow extends Component {
 
     return (
       <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"}>
             { param.get("name") }
             { !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} /> )}
         </td>
 
-        <td className="col parameters-col_description">
+        <td className="parameters-col_description">
           { param.get("description") ? <Markdown source={ param.get("description") }/> : null }
 
           { (bodyParam || !isExecute) && isDisplayParamEnum ?
@@ -291,12 +291,12 @@ export default class ParameterRow extends Component {
           }
 
           {
-            !bodyParam && isExecute ? 
+            !bodyParam && isExecute ?
             <ParameterIncludeEmpty
               onChange={this.onChangeIncludeEmpty}
               isIncluded={specSelectors.parameterInclusionSettingFor(pathMethod, param.get("name"), param.get("in"))}
               isDisabled={value && value.size !== 0}
-              param={param} /> 
+              param={param} />
             : null
           }
 

src/core/components/parameters/parameters.jsx

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

src/core/components/response.jsx

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

src/core/components/responses.jsx

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

src/core/plugins/oas3/components/request-body.jsx

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

test/e2e-cypress/tests/bugs/5452.js

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