improvement: operation path + summary overflow styling (via #5184)

* improvement: operation path + summary overflow styling

* inject zero-width spaces for better path breaking

* migrate 4867 regression test to tolerate new ZWSPs

* rm `dev-helpers/doc.yaml`

src/core/components/operation-summary-path.jsx

@@ -12,6 +12,12 @@ export default class OperationSummaryPath extends PureComponent{
     getComponent: PropTypes.func.isRequired,
   }
 
+  onCopyCapture = (e) => {
+    // strips injected zero-width spaces (`\u200b`) from copied content
+    e.clipboardData.setData("text/plain", this.props.operationProps.get("path"))
+    e.preventDefault()
+  }
+
   render(){
     let {
       getComponent,
@@ -31,13 +37,15 @@ export default class OperationSummaryPath extends PureComponent{
     const DeepLink = getComponent( "DeepLink" )
 
     return(
-      <span className={ deprecated ? "opblock-summary-path__deprecated" : "opblock-summary-path" } >
+      <span className={ deprecated ? "opblock-summary-path__deprecated" : "opblock-summary-path" } 
-              <DeepLink
+        onCopyCapture={this.onCopyCapture}
-                  enabled={isDeepLinkingEnabled}
+        data-path={path}>
-                  isShown={isShown}
+        <DeepLink
-                  path={createDeepLinkPath(`${tag}/${operationId}`)}
+            enabled={isDeepLinkingEnabled}
-                  text={path} />
+            isShown={isShown}
-              </span>
+            path={createDeepLinkPath(`${tag}/${operationId}`)}
+            text={path.replace(/\//g, "\u200b/")} />
+      </span>
 
     )
   }

src/style/_layout.scss

@@ -245,10 +245,9 @@
 
 
         display: flex;
-        flex: 0 3 auto;
         align-items: center;
 
-        word-break: break-all;
+        word-break: break-word;
 
         padding: 0 10px;
 
@@ -270,7 +269,9 @@
     {
         font-size: 13px;
 
-        flex: 1;
+        flex: 1 1 auto;
+
+        word-break: break-word;
 
         @include text_body();
     }

test/e2e-cypress/tests/bugs/4867.js

@@ -7,8 +7,8 @@ describe("#4867: callback parameter rendering", () => {
       .contains("Callbacks")
       .click()
 
-      .get(".callbacks-container")
+      .get(".callbacks-container .opblock-summary-path")
-      .contains("http://$request.query.url")
+      .should("have.attr", "data-path", "http://$request.query.url")
       .click()
 
       .get(".parameters-container")