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

Fixes openshift#2072

Author: sg00dwin

Diff for: app/styles/_components.less

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

Diff for: app/views/browse/service-instance.html

@@ -67,8 +67,26 @@ <h1 class="contains-actions">
                           </dd>
                           <dt ng-if-start="serviceClass.description || serviceClass.externalMetadata.longDescription">Description:</dt>
                           <dd ng-if-end>
-                            <p class="pre-wrap" ng-bind-html="serviceClass.description | linkify : '_blank'"></p>
-                            <p class="pre-wrap" ng-bind-html="serviceClass.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>
+
+
+                            <!-- <p class="pre-wrap" ng-bind-html="serviceClass.description | linkify : '_blank'"></p> -->
+                            <!-- <p class="pre-wrap" ng-bind-html="serviceClass.externalMetadata.longDescription | linkify : '_blank'"></p> -->
                           </dd>
                         </dl>
                       </div>

Diff for: app/views/overview/_service-instance-row.html

@@ -136,7 +136,13 @@ <h3>
         <div>
           <div class="row">
             <div class="col-sm-12" ng-if="row.serviceClass.description">
-              <p class="pre-wrap" ng-bind-html="row.serviceClass.description | linky"></p>
+              <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>

Diff for: dist/scripts/templates.js

@@ -3697,8 +3697,12 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</dd>\n" +
     "<dt ng-if-start=\"serviceClass.description || serviceClass.externalMetadata.longDescription\">Description:</dt>\n" +
     "<dd ng-if-end>\n" +
-    "<p class=\"pre-wrap\" ng-bind-html=\"serviceClass.description | linkify : '_blank'\"></p>\n" +
-    "<p class=\"pre-wrap\" ng-bind-html=\"serviceClass.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" +
+    "\n" +
+    "\n" +
     "</dd>\n" +
     "</dl>\n" +
     "</div>\n" +
@@ -12429,7 +12433,8 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<div>\n" +
     "<div class=\"row\">\n" +
     "<div class=\"col-sm-12\" ng-if=\"row.serviceClass.description\">\n" +
-    "<p class=\"pre-wrap\" ng-bind-html=\"row.serviceClass.description | linky\"></p>\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" +