Implement truncate-long-text for service class description and long description

Fixes openshift#2072

Author: sg00dwin

app/styles/_components.less

@@ -209,3 +209,7 @@ code.command {
     }
   }
 }
+
+.service-description .truncated-content {
+  white-space: pre-wrap;
+}

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>

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>

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" +