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

Refs #8465 Refs #8153 Refs #8131
2023-08-16 16:43:31 +02:00
parent 75eecd4627
commit 377b54a998
3 changed files with 133 additions and 120 deletions
--- a/src/core/components/operation-summary.jsx
+++ b/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 
-          textToCopy={`${specPath.get(1)}`} 
-        />
+        <button
+          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>
    )
-
  }
 }
--- a/src/style/_buttons.scss
+++ b/src/style/_buttons.scss
@@ -1,113 +1,113 @@
 .btn
 {
-    font-size: 14px;
-    font-weight: bold;
+  font-size: 14px;
+  font-weight: bold;

-    padding: 5px 23px;
+  padding: 5px 23px;

-    transition: all .3s;
+  transition: all .3s;

-    border: 2px solid $btn-border-color;
-    border-radius: 4px;
-    background: transparent;
-    box-shadow: 0 1px 2px rgba($btn-box-shadow-color,.1);
+  border: 2px solid $btn-border-color;
+  border-radius: 4px;
+  background: transparent;
+  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;
-        padding: 4px 23px;
+      float: left;
+
+      padding: 4px 20px 0 0;
    }

-    &[disabled]
+    svg
    {
-        cursor: not-allowed;
-
-        opacity: .3;
+      fill: $btn-authorize-svg-fill-color;
    }
+  }

-    &: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
-        {
-            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;
-    }
+  &.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;
-
-        &:first-child
-        {
-            border-radius: 4px 0 0 4px;
-        }
-
-        &:last-child
-        {
-            border-radius: 0 4px 4px 0;
-        }
+      border-radius: 4px 0 0 4px;
    }
+
+    &:last-child
+    {
+      border-radius: 0 4px 4px 0;
+    }
+  }
 }

 .authorization__btn
 {
-    padding: 0 0 0 10px;
+  padding: 0 0 0 10px;

-    border: none;
-    background: none;
+  border: none;
+  background: none;

-    .locked
-    {
-        opacity: 1;
-    }
+  .locked
+  {
+    opacity: 1;
+  }

-    .unlocked
-    {
-        opacity: .4;
-    }
+  .unlocked
+  {
+    opacity: .4;
+  }
 }

 .opblock-summary-control,
@@ -128,44 +128,44 @@
 .expand-methods,
 .expand-operation
 {
-    border: none;
-    background: none;
+  border: none;
+  background: none;

-    svg
-    {
-        width: 20px;
-        height: 20px;
-    }
+  svg
+  {
+    width: 20px;
+    height: 20px;
+  }
 }

 .expand-methods
 {
-    padding: 0 10px;
-
-    &:hover
-    {
-        svg
-        {
-            fill: $expand-methods-svg-fill-color-hover;
-        }
-    }
+  padding: 0 10px;

+  &:hover
+  {
    svg
    {
-        transition: all .3s;
-
-        fill: $expand-methods-svg-fill-color;
+      fill: $expand-methods-svg-fill-color-hover;
    }
+  }
+
+  svg
+  {
+    transition: all .3s;
+
+    fill: $expand-methods-svg-fill-color;
+  }
 }

 button
 {
-    cursor: pointer;
+  cursor: pointer;

-    &.invalid
-    {
-        @include invalidFormElement();
-    }
+  &.invalid
+  {
+    @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;
-    position: unset;
-}
+  height: 26px;
+  position: unset;
+}
--- a/test/e2e-cypress/e2e/features/external-docs.cy.js
+++ b/test/e2e-cypress/e2e/features/external-docs.cy.js
@@ -35,7 +35,7 @@ function ExternalDocsTest(baseUrl) {
        .and("have.attr", "href", "http://swagger.io")
    })
  })
-  
+
  describe("for Tags", () => {
    it("should display link to external docs with description", () => {
      cy.visit(baseUrl)
@@ -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")