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

@@ -1,113 +1,113 @@
 .btn
 {
-    font-size: 14px;
+  font-size: 14px;
-    font-weight: bold;
+  font-weight: bold;
 
-    padding: 5px 23px;
+  padding: 5px 23px;
 
-    transition: all .3s;
+  transition: all .3s;
 
-    border: 2px solid $btn-border-color;
+  border: 2px solid $btn-border-color;
-    border-radius: 4px;
+  border-radius: 4px;
-    background: transparent;
+  background: transparent;
-    box-shadow: 0 1px 2px rgba($btn-box-shadow-color,.1);
+  box-shadow: 0 1px 2px rgba($btn-box-shadow-color,.1);
 
-    @include text_headline();
+  @include text_headline();
 
-    &.btn-sm
+  &.btn-sm
+  {
+    font-size: 12px;
+    padding: 4px 23px;
+  }
+
+  &[disabled]
+  {
+    cursor: not-allowed;
+
+    opacity: .3;
+  }
+
+  &:hover
+  {
+    box-shadow: 0 0 5px rgba($btn-box-shadow-color,.3);
+  }
+
+  &.cancel
+  {
+    border-color: $btn-cancel-border-color;
+    background-color: $btn-cancel-background-color;
+    @include text_headline($btn-cancel-font-color);
+  }
+
+  &.authorize
+  {
+    line-height: 1;
+
+    display: inline;
+
+    color: $btn-authorize-font-color;
+    border-color: $btn-authorize-border-color;
+    background-color: $btn-authorize-background-color;
+
+    span
     {
-        font-size: 12px;
+      float: left;
-        padding: 4px 23px;
+
+      padding: 4px 20px 0 0;
     }
 
-    &[disabled]
+    svg
     {
-        cursor: not-allowed;
+      fill: $btn-authorize-svg-fill-color;
-
-        opacity: .3;
     }
+  }
 
-    &:hover
+  &.execute
-    {
+  {
-        box-shadow: 0 0 5px rgba($btn-box-shadow-color,.3);
+    background-color: $btn-execute-background-color-alt;
-    }
+    color: $btn-execute-font-color;
-
+    border-color: $btn-execute-border-color;
-    &.cancel
+  }
-    {
-        border-color: $btn-cancel-border-color;
-        background-color: $btn-cancel-background-color;
-        @include text_headline($btn-cancel-font-color);
-    }
-
-    &.authorize
-    {
-        line-height: 1;
-
-        display: inline;
-
-        color: $btn-authorize-font-color;
-        border-color: $btn-authorize-border-color;
-        background-color: $btn-authorize-background-color;
-
-        span
-        {
-            float: left;
-
-            padding: 4px 20px 0 0;
-        }
-
-        svg
-        {
-            fill: $btn-authorize-svg-fill-color;
-        }
-    }
-
-    &.execute
-    {
-        background-color: $btn-execute-background-color-alt;
-        color: $btn-execute-font-color;
-        border-color: $btn-execute-border-color;
-    }
 }
 
 .btn-group
 {
-    display: flex;
+  display: flex;
 
-    padding: 30px;
+  padding: 30px;
 
-    .btn
+  .btn
+  {
+    flex: 1;
+
+    &:first-child
     {
-        flex: 1;
+      border-radius: 4px 0 0 4px;
-
-        &:first-child
-        {
-            border-radius: 4px 0 0 4px;
-        }
-
-        &:last-child
-        {
-            border-radius: 0 4px 4px 0;
-        }
     }
+
+    &:last-child
+    {
+      border-radius: 0 4px 4px 0;
+    }
+  }
 }
 
 .authorization__btn
 {
-    padding: 0 0 0 10px;
+  padding: 0 0 0 10px;
 
-    border: none;
+  border: none;
-    background: none;
+  background: none;
 
-    .locked
+  .locked
-    {
+  {
-        opacity: 1;
+    opacity: 1;
-    }
+  }
 
-    .unlocked
+  .unlocked
-    {
+  {
-        opacity: .4;
+    opacity: .4;
-    }
+  }
 }
 
 .opblock-summary-control,
@@ -128,44 +128,44 @@
 .expand-methods,
 .expand-operation
 {
-    border: none;
+  border: none;
-    background: none;
+  background: none;
 
-    svg
+  svg
-    {
+  {
-        width: 20px;
+    width: 20px;
-        height: 20px;
+    height: 20px;
-    }
+  }
 }
 
 .expand-methods
 {
-    padding: 0 10px;
+  padding: 0 10px;
-
-    &:hover
-    {
-        svg
-        {
-            fill: $expand-methods-svg-fill-color-hover;
-        }
-    }
 
+  &:hover
+  {
     svg
     {
-        transition: all .3s;
+      fill: $expand-methods-svg-fill-color-hover;
-
-        fill: $expand-methods-svg-fill-color;
     }
+  }
+
+  svg
+  {
+    transition: all .3s;
+
+    fill: $expand-methods-svg-fill-color;
+  }
 }
 
 button
 {
-    cursor: pointer;
+  cursor: pointer;
 
-    &.invalid
+  &.invalid
-    {
+  {
-        @include invalidFormElement();
+    @include invalidFormElement();
-    }
+  }
 }
 
 .copy-to-clipboard
@@ -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
 {
@@ -209,6 +221,6 @@ button
 // overrides for copy to clipboard button
 .opblock .opblock-summary .view-line-link.copy-to-clipboard
 {
-    height: 26px;
+  height: 26px;
-    position: unset;
+  position: unset;
 }

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")