feat(ux): add copy to clipboard to operation summary (#8094)

src/core/components/copy-to-clipboard-btn.jsx

@@ -0,0 +1,26 @@
+import React from "react"
+import { CopyToClipboard } from "react-copy-to-clipboard"
+import PropTypes from "prop-types"
+
+/**
+ * @param {{ textToCopy: string }} props
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default class CopyToClipboardBtn extends React.Component {
+  render() {
+    return (
+      <div className="view-line-link copy-to-clipboard" title="Copy to clipboard">
+        <CopyToClipboard text={this.props.textToCopy}>
+          <svg width="15" height="16">
+            <use href="#copy" xlinkHref="#copy" />
+          </svg>
+        </CopyToClipboard>
+      </div>
+    )
+  }
+
+  static propTypes = {
+    textToCopy: PropTypes.string.isRequired,
+  }
+}

src/core/components/operation-summary.jsx

@@ -58,6 +58,7 @@ export default class OperationSummary extends PureComponent {
     const OperationSummaryMethod = getComponent("OperationSummaryMethod")
     const OperationSummaryPath = getComponent("OperationSummaryPath")
     const JumpToPath = getComponent("JumpToPath", true)
+    const CopyToClipboardBtn = getComponent("CopyToClipboardBtn", true)
 
     const hasSecurity = security && !!security.count()
     const securityIsOptional = hasSecurity && security.size === 1 && security.first().isEmpty()
@@ -96,6 +97,7 @@ export default class OperationSummary extends PureComponent {
               }}
             />
         }
+        <CopyToClipboardBtn textToCopy={`${specPath.get(1)}`} />
         <JumpToPath path={specPath} />{/* TODO: use wrapComponents here, swagger-ui doesn't care about jumpToPath */}
       </div>
     )

src/core/components/svg-assets.jsx

@@ -35,6 +35,12 @@ const SvgAssets = () =>
           <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>
         </symbol>
 
+        <symbol viewBox="0 0 15 16" id="copy">
+          <g transform='translate(2, -1)'>
+            <path fill='#ffffff' fillRule='evenodd' d='M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z'></path>
+          </g>
+        </symbol>
+
       </defs>
     </svg>
   </div>

src/core/presets/base.js

@@ -63,6 +63,7 @@ import Info, {
 } from "core/components/info"
 import InfoContainer from "core/containers/info"
 import JumpToPath from "core/components/jump-to-path"
+import CopyToClipboardBtn from "core/components/copy-to-clipboard-btn"
 import Footer from "core/components/footer"
 import FilterContainer from "core/containers/filter"
 import ParamBody from "core/components/param-body"
@@ -113,6 +114,7 @@ export default function() {
       info: Info,
       InfoContainer,
       JumpToPath,
+      CopyToClipboardBtn,
       onlineValidatorBadge: OnlineValidatorBadge,
       operations: Operations,
       operation: Operation,

src/style/_buttons.scss

@@ -205,3 +205,10 @@ button
     height: 18px;
   }
 }
+
+// overrides for copy to clipboard button
+.opblock .opblock-summary .view-line-link.copy-to-clipboard
+{
+    height: 26px;
+    position: unset;
+}

src/style/_layout.scss

@@ -376,6 +376,10 @@
             {
                 width: 18px;
                 margin: 0 5px;
+
+                &.copy-to-clipboard {
+                    width: 24px;
+                }
             }
         }
     }