fix(ui): change copy to clipboard button location (#9111)

Refs #8465
Refs #8153
Refs #8131

src/core/components/operation-summary.jsx

@@ -83,11 +83,8 @@ export default class OperationSummary extends PureComponent {
           }
 
           {displayOperationId && (originalOperationId || operationId) ? <span className="opblock-summary-operation-id">{originalOperationId || operationId}</span> : null}
-
-          {isShown ? <ArrowUpIcon className="arrow" /> : <ArrowDownIcon className="arrow" />}
-          
         </button>
-
+        <CopyToClipboardBtn textToCopy={`${specPath.get(1)}`} />
         {
           allowAnonymous ? null :
             <AuthorizeOperationBtn
@@ -98,12 +95,16 @@ export default class OperationSummary extends PureComponent {
               }}
             />
         }
-        <CopyToClipboardBtn 
+        <button
-          textToCopy={`${specPath.get(1)}`} 
+          aria-label={`${method} ${path.replace(/\//g, "\u200b/")}`}
-        />
+          className="opblock-control-arrow"
+          aria-expanded={isShown}
+          tabIndex="-1"
+          onClick={toggleShown}>
+          {isShown ? <ArrowUpIcon className="arrow" /> : <ArrowDownIcon className="arrow" />}
+        </button>
         <JumpToPath path={specPath} />{/* TODO: use wrapComponents here, swagger-ui doesn't care about jumpToPath */}
       </div>
     )
-
   }
 }

src/style/_buttons.scss

@@ -192,6 +192,18 @@ button
   }
 }
 
+.copy-to-clipboard:active
+{
+  background: #5e626f;
+}
+
+.opblock-control-arrow
+{
+  border: none;
+  text-align: center;
+  background: none;
+}
+
 // overrides for smaller copy button for curl command
 .curl-command .copy-to-clipboard
 {

test/e2e-cypress/e2e/features/external-docs.cy.js

@@ -87,7 +87,7 @@ function ExternalDocsTest(baseUrl) {
   describe("for Operation", () => {
     it("should display link to external docs with description", () => {
       cy.visit(baseUrl)
-      .get("#operations-pet-updatePet button")
+      .get("#operations-pet-updatePet button.opblock-summary-control")
       .click()
       .get("#operations-pet-updatePet .opblock-external-docs-wrapper .opblock-external-docs__description")
       .should("contain.text", "More details about putting a pet")
@@ -97,7 +97,7 @@ function ExternalDocsTest(baseUrl) {
 
     it("should display link to external docs without description", () => {
       cy.visit(baseUrl)
-      .get("#operations-pet-addPet button")
+      .get("#operations-pet-addPet button.opblock-summary-control")
       .click()
       .get("#operations-pet-addPet .opblock-external-docs-wrapper .opblock-external-docs__description")
       .should("not.exist")