From 291e2c72518982917263780358b0a6549235c16f Mon Sep 17 00:00:00 2001
From: kyle <shockey@users.noreply.github.com>
Date: Fri, 15 Feb 2019 20:05:26 -0600
Subject: [PATCH] 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`
---
 .../components/operation-summary-path.jsx     | 22 +++++++++++++------
 src/style/_layout.scss                        |  7 +++---
 test/e2e-cypress/tests/bugs/4867.js           |  4 ++--
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/core/components/operation-summary-path.jsx b/src/core/components/operation-summary-path.jsx
index 90896334..0bdd521c 100644
--- a/src/core/components/operation-summary-path.jsx
+++ b/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" } >
-              <DeepLink
-                  enabled={isDeepLinkingEnabled}
-                  isShown={isShown}
-                  path={createDeepLinkPath(`${tag}/${operationId}`)}
-                  text={path} />
-              </span>
+      <span className={ deprecated ? "opblock-summary-path__deprecated" : "opblock-summary-path" } 
+        onCopyCapture={this.onCopyCapture}
+        data-path={path}>
+        <DeepLink
+            enabled={isDeepLinkingEnabled}
+            isShown={isShown}
+            path={createDeepLinkPath(`${tag}/${operationId}`)}
+            text={path.replace(/\//g, "\u200b/")} />
+      </span>
 
     )
   }
diff --git a/src/style/_layout.scss b/src/style/_layout.scss
index 1ca16bf6..474ef7a2 100644
--- a/src/style/_layout.scss
+++ b/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();
     }
diff --git a/test/e2e-cypress/tests/bugs/4867.js b/test/e2e-cypress/tests/bugs/4867.js
index 6d328236..2a4ae3f4 100644
--- a/test/e2e-cypress/tests/bugs/4867.js
+++ b/test/e2e-cypress/tests/bugs/4867.js
@@ -7,8 +7,8 @@ describe("#4867: callback parameter rendering", () => {
       .contains("Callbacks")
       .click()
 
-      .get(".callbacks-container")
-      .contains("http://$request.query.url")
+      .get(".callbacks-container .opblock-summary-path")
+      .should("have.attr", "data-path", "http://$request.query.url")
       .click()
 
       .get(".parameters-container")
-- 
GitLab