From 5e5cf639d6229eb6d7eed4c1e0f5886c68f5de24 Mon Sep 17 00:00:00 2001
From: sg00dwin <sgoodwin@redhat.com>
Date: Thu, 5 Oct 2017 15:35:28 -0400
Subject: [PATCH] Implement truncate-long-text for service class description
 and long description Fixes
 https://github.com/openshift/origin-web-console/issues/2072

---
 app/styles/_components.less                   |  4 ++++
 app/views/browse/service-instance.html        | 16 ++++++++++++++--
 app/views/overview/_service-instance-row.html | 16 +++++++++++-----
 dist/scripts/templates.js                     | 17 ++++++++++-------
 dist/styles/main.css                          |  1 +
 5 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/app/styles/_components.less b/app/styles/_components.less
index e010fd6f06..e6ffc8c85c 100644
--- a/app/styles/_components.less
+++ b/app/styles/_components.less
@@ -209,3 +209,7 @@ code.command {
     }
   }
 }
+
+.service-description .truncated-content {
+  white-space: pre-wrap;
+}
diff --git a/app/views/browse/service-instance.html b/app/views/browse/service-instance.html
index 66542f6298..b308d888bc 100644
--- a/app/views/browse/service-instance.html
+++ b/app/views/browse/service-instance.html
@@ -69,8 +69,20 @@ <h1 class="contains-actions">
                           </dd>
                           <dt ng-if-start="serviceClass.spec.description || serviceClass.spec.externalMetadata.longDescription">Description:</dt>
                           <dd ng-if-end>
-                            <p class="pre-wrap" ng-bind-html="serviceClass.spec.description | linkify : '_blank'"></p>
-                            <p class="pre-wrap" ng-bind-html="serviceClass.spec.externalMetadata.longDescription | linkify : '_blank'"></p>
+                            <p class="service-description"><truncate-long-text
+                                limit="500"
+                                content="serviceClass.description"
+                                use-word-boundary="true"
+                                expandable="true"
+                                linkify="true">
+                              </truncate-long-text></p>
+                            <p class="service-description"><truncate-long-text
+                                limit="500"
+                                content="serviceClass.externalMetadata.longDescription"
+                                use-word-boundary="true"
+                                expandable="true"
+                                linkify="true">
+                              </truncate-long-text></p>
                           </dd>
                         </dl>
                       </div>
diff --git a/app/views/overview/_service-instance-row.html b/app/views/overview/_service-instance-row.html
index f9349b21db..8ca6c370f8 100644
--- a/app/views/overview/_service-instance-row.html
+++ b/app/views/overview/_service-instance-row.html
@@ -135,11 +135,17 @@ <h3>
         </div>
         <div>
           <div class="row">
-            <div class="col-sm-12" ng-if="row.serviceClass.spec.description">
-              <p class="pre-wrap" ng-bind-html="row.serviceClass.spec.description | linky"></p>
-              <div ng-if="row.serviceClass.spec.externalMetadata.documentationUrl || row.serviceClass.spec.externalMetadata.supportUrl">
-                <a ng-if="row.serviceClass.spec.externalMetadata.documentationUrl" ng-href="{{row.serviceClass.spec.externalMetadata.documentationUrl}}" target="_blank" class="learn-more-link">View Documentation <i class="fa fa-external-link" aria-hidden="true"></i></a>
-                <a ng-if="row.serviceClass.spec.externalMetadata.supportUrl" ng-href="{{row.serviceClass.spec.externalMetadata.supportUrl}}" target="_blank" class="learn-more-link">Get Support <i class="fa fa-external-link" aria-hidden="true"></i></a>
+            <div class="col-sm-12" ng-if="row.serviceClass.description">
+              <p class="service-description"><truncate-long-text
+                  limit="500"
+                  content="row.serviceClass.description"
+                  use-word-boundary="true"
+                  expandable="true"
+                  linkify="true">
+                </truncate-long-text></p>
+              <div ng-if="row.serviceClass.externalMetadata.documentationUrl || row.serviceClass.externalMetadata.supportUrl">
+                <a ng-if="row.serviceClass.externalMetadata.documentationUrl" ng-href="{{row.serviceClass.externalMetadata.documentationUrl}}" target="_blank" class="learn-more-link">View Documentation <i class="fa fa-external-link" aria-hidden="true"></i></a>
+                <a ng-if="row.serviceClass.externalMetadata.supportUrl" ng-href="{{row.serviceClass.externalMetadata.supportUrl}}" target="_blank" class="learn-more-link">Get Support <i class="fa fa-external-link" aria-hidden="true"></i></a>
               </div>
             </div>
           </div>
diff --git a/dist/scripts/templates.js b/dist/scripts/templates.js
index be47d8e418..9ab3cf9404 100644
--- a/dist/scripts/templates.js
+++ b/dist/scripts/templates.js
@@ -3699,8 +3699,10 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</dd>\n" +
     "<dt ng-if-start=\"serviceClass.spec.description || serviceClass.spec.externalMetadata.longDescription\">Description:</dt>\n" +
     "<dd ng-if-end>\n" +
-    "<p class=\"pre-wrap\" ng-bind-html=\"serviceClass.spec.description | linkify : '_blank'\"></p>\n" +
-    "<p class=\"pre-wrap\" ng-bind-html=\"serviceClass.spec.externalMetadata.longDescription | linkify : '_blank'\"></p>\n" +
+    "<p class=\"service-description\"><truncate-long-text limit=\"500\" content=\"serviceClass.description\" use-word-boundary=\"true\" expandable=\"true\" linkify=\"true\">\n" +
+    "</truncate-long-text></p>\n" +
+    "<p class=\"service-description\"><truncate-long-text limit=\"500\" content=\"serviceClass.externalMetadata.longDescription\" use-word-boundary=\"true\" expandable=\"true\" linkify=\"true\">\n" +
+    "</truncate-long-text></p>\n" +
     "</dd>\n" +
     "</dl>\n" +
     "</div>\n" +
@@ -12439,11 +12441,12 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "<div>\n" +
     "<div class=\"row\">\n" +
-    "<div class=\"col-sm-12\" ng-if=\"row.serviceClass.spec.description\">\n" +
-    "<p class=\"pre-wrap\" ng-bind-html=\"row.serviceClass.spec.description | linky\"></p>\n" +
-    "<div ng-if=\"row.serviceClass.spec.externalMetadata.documentationUrl || row.serviceClass.spec.externalMetadata.supportUrl\">\n" +
-    "<a ng-if=\"row.serviceClass.spec.externalMetadata.documentationUrl\" ng-href=\"{{row.serviceClass.spec.externalMetadata.documentationUrl}}\" target=\"_blank\" class=\"learn-more-link\">View Documentation <i class=\"fa fa-external-link\" aria-hidden=\"true\"></i></a>\n" +
-    "<a ng-if=\"row.serviceClass.spec.externalMetadata.supportUrl\" ng-href=\"{{row.serviceClass.spec.externalMetadata.supportUrl}}\" target=\"_blank\" class=\"learn-more-link\">Get Support <i class=\"fa fa-external-link\" aria-hidden=\"true\"></i></a>\n" +
+    "<div class=\"col-sm-12\" ng-if=\"row.serviceClass.description\">\n" +
+    "<p class=\"service-description\"><truncate-long-text limit=\"500\" content=\"row.serviceClass.description\" use-word-boundary=\"true\" expandable=\"true\" linkify=\"true\">\n" +
+    "</truncate-long-text></p>\n" +
+    "<div ng-if=\"row.serviceClass.externalMetadata.documentationUrl || row.serviceClass.externalMetadata.supportUrl\">\n" +
+    "<a ng-if=\"row.serviceClass.externalMetadata.documentationUrl\" ng-href=\"{{row.serviceClass.externalMetadata.documentationUrl}}\" target=\"_blank\" class=\"learn-more-link\">View Documentation <i class=\"fa fa-external-link\" aria-hidden=\"true\"></i></a>\n" +
+    "<a ng-if=\"row.serviceClass.externalMetadata.supportUrl\" ng-href=\"{{row.serviceClass.externalMetadata.supportUrl}}\" target=\"_blank\" class=\"learn-more-link\">Get Support <i class=\"fa fa-external-link\" aria-hidden=\"true\"></i></a>\n" +
     "</div>\n" +
     "</div>\n" +
     "</div>\n" +
diff --git a/dist/styles/main.css b/dist/styles/main.css
index 9bec10e13a..de9526f7a6 100644
--- a/dist/styles/main.css
+++ b/dist/styles/main.css
@@ -4499,6 +4499,7 @@ code.command{display:inline-block;line-height:1.3;margin-right:2px}
 .service-binding-actions{font-size:13px;font-weight:400}
 .service-binding-actions>a{border-left:1px solid #d1d1d1;padding:0 10px}
 .service-binding-actions>a:first-of-type{border-left:0;padding-left:0}
+.service-description .truncated-content{white-space:pre-wrap}
 .ng-cloak,.x-ng-cloak,[data-ng-cloak],[ng-cloak],[ng\:cloak],[x-ng-cloak]{display:none!important}
 @media only screen and (max-device-width:736px) and (-webkit-min-device-pixel-ratio:0){.console-os .ace_editor,input[type=text],input[type=url],input[type=number],input[type=search],select,select.form-control,textarea,textarea.form-control{font-size:16px}
 body{padding-right:0px!important}