improvement: operation path + summary overflow styling (via swagger-a…

…pi#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`
deepjia · Feb 25, 2019 · 3a15120 · 3a15120
1 parent efe7b96
commit 3a15120
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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")