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

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_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>
           </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_header">Field</td>
-                <td className="col col_header">Value</td>
+                <td className="col_header">Value</td>
               </tr>
             </thead>
             <tbody>

src/core/components/parameter-row.jsx

@@ -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 ?

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_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>
               </thead>
               <tbody>

src/core/components/response.jsx

@@ -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_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 }
               </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")
     })
   })