Fix display of long URLs inside chips (#4878)

* Fix display of long URLs inside chips

* Remove ^

package-lock.json

@@ -3053,69 +3053,154 @@
       }
     },
     "@babel/preset-env": {
-      "version": "7.7.6",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.7.6.tgz",
-      "integrity": "sha512-k5hO17iF/Q7tR9Jv8PdNBZWYW6RofxhnxKjBMc0nG4JTaWvOTiPoO/RLFwAKcA4FpmuBFm6jkoqaRJLGi0zdaQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-module-imports": "^7.7.4",
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/plugin-proposal-async-generator-functions": "^7.7.4",
-        "@babel/plugin-proposal-dynamic-import": "^7.7.4",
-        "@babel/plugin-proposal-json-strings": "^7.7.4",
-        "@babel/plugin-proposal-object-rest-spread": "^7.7.4",
-        "@babel/plugin-proposal-optional-catch-binding": "^7.7.4",
-        "@babel/plugin-proposal-unicode-property-regex": "^7.7.4",
-        "@babel/plugin-syntax-async-generators": "^7.7.4",
-        "@babel/plugin-syntax-dynamic-import": "^7.7.4",
-        "@babel/plugin-syntax-json-strings": "^7.7.4",
-        "@babel/plugin-syntax-object-rest-spread": "^7.7.4",
-        "@babel/plugin-syntax-optional-catch-binding": "^7.7.4",
-        "@babel/plugin-syntax-top-level-await": "^7.7.4",
-        "@babel/plugin-transform-arrow-functions": "^7.7.4",
-        "@babel/plugin-transform-async-to-generator": "^7.7.4",
-        "@babel/plugin-transform-block-scoped-functions": "^7.7.4",
-        "@babel/plugin-transform-block-scoping": "^7.7.4",
-        "@babel/plugin-transform-classes": "^7.7.4",
-        "@babel/plugin-transform-computed-properties": "^7.7.4",
-        "@babel/plugin-transform-destructuring": "^7.7.4",
-        "@babel/plugin-transform-dotall-regex": "^7.7.4",
-        "@babel/plugin-transform-duplicate-keys": "^7.7.4",
-        "@babel/plugin-transform-exponentiation-operator": "^7.7.4",
-        "@babel/plugin-transform-for-of": "^7.7.4",
-        "@babel/plugin-transform-function-name": "^7.7.4",
-        "@babel/plugin-transform-literals": "^7.7.4",
-        "@babel/plugin-transform-member-expression-literals": "^7.7.4",
-        "@babel/plugin-transform-modules-amd": "^7.7.5",
-        "@babel/plugin-transform-modules-commonjs": "^7.7.5",
-        "@babel/plugin-transform-modules-systemjs": "^7.7.4",
-        "@babel/plugin-transform-modules-umd": "^7.7.4",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.7.4",
-        "@babel/plugin-transform-new-target": "^7.7.4",
-        "@babel/plugin-transform-object-super": "^7.7.4",
-        "@babel/plugin-transform-parameters": "^7.7.4",
-        "@babel/plugin-transform-property-literals": "^7.7.4",
-        "@babel/plugin-transform-regenerator": "^7.7.5",
-        "@babel/plugin-transform-reserved-words": "^7.7.4",
-        "@babel/plugin-transform-shorthand-properties": "^7.7.4",
-        "@babel/plugin-transform-spread": "^7.7.4",
-        "@babel/plugin-transform-sticky-regex": "^7.7.4",
-        "@babel/plugin-transform-template-literals": "^7.7.4",
-        "@babel/plugin-transform-typeof-symbol": "^7.7.4",
-        "@babel/plugin-transform-unicode-regex": "^7.7.4",
-        "@babel/types": "^7.7.4",
-        "browserslist": "^4.6.0",
-        "core-js-compat": "^3.4.7",
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.8.4.tgz",
+      "integrity": "sha512-HihCgpr45AnSOHRbS5cWNTINs0TwaR8BS8xIIH+QwiW8cKL0llV91njQMpeMReEPVs+1Ao0x3RLEBLtt1hOq4w==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "@babel/compat-data": "^7.8.4",
+        "@babel/helper-compilation-targets": "^7.8.4",
+        "@babel/helper-module-imports": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/plugin-proposal-async-generator-functions": "^7.8.3",
+        "@babel/plugin-proposal-dynamic-import": "^7.8.3",
+        "@babel/plugin-proposal-json-strings": "^7.8.3",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
+        "@babel/plugin-proposal-optional-catch-binding": "^7.8.3",
+        "@babel/plugin-proposal-optional-chaining": "^7.8.3",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.8.3",
+        "@babel/plugin-syntax-async-generators": "^7.8.0",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.0",
+        "@babel/plugin-syntax-json-strings": "^7.8.0",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.0",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.0",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.0",
+        "@babel/plugin-syntax-top-level-await": "^7.8.3",
+        "@babel/plugin-transform-arrow-functions": "^7.8.3",
+        "@babel/plugin-transform-async-to-generator": "^7.8.3",
+        "@babel/plugin-transform-block-scoped-functions": "^7.8.3",
+        "@babel/plugin-transform-block-scoping": "^7.8.3",
+        "@babel/plugin-transform-classes": "^7.8.3",
+        "@babel/plugin-transform-computed-properties": "^7.8.3",
+        "@babel/plugin-transform-destructuring": "^7.8.3",
+        "@babel/plugin-transform-dotall-regex": "^7.8.3",
+        "@babel/plugin-transform-duplicate-keys": "^7.8.3",
+        "@babel/plugin-transform-exponentiation-operator": "^7.8.3",
+        "@babel/plugin-transform-for-of": "^7.8.4",
+        "@babel/plugin-transform-function-name": "^7.8.3",
+        "@babel/plugin-transform-literals": "^7.8.3",
+        "@babel/plugin-transform-member-expression-literals": "^7.8.3",
+        "@babel/plugin-transform-modules-amd": "^7.8.3",
+        "@babel/plugin-transform-modules-commonjs": "^7.8.3",
+        "@babel/plugin-transform-modules-systemjs": "^7.8.3",
+        "@babel/plugin-transform-modules-umd": "^7.8.3",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.8.3",
+        "@babel/plugin-transform-new-target": "^7.8.3",
+        "@babel/plugin-transform-object-super": "^7.8.3",
+        "@babel/plugin-transform-parameters": "^7.8.4",
+        "@babel/plugin-transform-property-literals": "^7.8.3",
+        "@babel/plugin-transform-regenerator": "^7.8.3",
+        "@babel/plugin-transform-reserved-words": "^7.8.3",
+        "@babel/plugin-transform-shorthand-properties": "^7.8.3",
+        "@babel/plugin-transform-spread": "^7.8.3",
+        "@babel/plugin-transform-sticky-regex": "^7.8.3",
+        "@babel/plugin-transform-template-literals": "^7.8.3",
+        "@babel/plugin-transform-typeof-symbol": "^7.8.4",
+        "@babel/plugin-transform-unicode-regex": "^7.8.3",
+        "@babel/types": "^7.8.3",
+        "browserslist": "^4.8.5",
+        "core-js-compat": "^3.6.2",
         "invariant": "^2.2.2",
-        "js-levenshtein": "^1.1.3",
+        "levenary": "^1.1.1",
         "semver": "^5.5.0"
       },
       "dependencies": {
+        "@babel/plugin-transform-for-of": {
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.8.4.tgz",
+          "integrity": "sha512-iAXNlOWvcYUYoV8YIxwS7TxGRJcxyl8eQCfT+A5j8sKUzRFvJdcyjp97jL2IghWSRDaL2PU2O2tX8Cu9dTBq5A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.8.3"
+          }
+        },
+        "@babel/plugin-transform-parameters": {
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.8.4.tgz",
+          "integrity": "sha512-IsS3oTxeTsZlE5KqzTbcC2sV0P9pXdec53SU+Yxv7o/6dvGM5AkTotQKhoSffhNgZ/dftsSiOoxy7evCYJXzVA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "@babel/helper-call-delegate": "^7.8.3",
+            "@babel/helper-get-function-arity": "^7.8.3",
+            "@babel/helper-plugin-utils": "^7.8.3"
+          }
+        },
+        "@babel/plugin-transform-typeof-symbol": {
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.8.4.tgz",
+          "integrity": "sha512-2QKyfjGdvuNfHsb7qnBBlKclbD4CfshH2KvDabiijLMGXPHJXGxtDzwIF7bQP+T0ysw8fYTtxPafgfs/c1Lrqg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.8.3"
+          }
+        },
+        "browserslist": {
+          "version": "4.8.6",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.6.tgz",
+          "integrity": "sha512-ZHao85gf0eZ0ESxLfCp73GG9O/VTytYDIkIiZDlURppLTI9wErSM/5yAKEq6rcUdxBLjMELmrYUJGg5sxGKMHg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "caniuse-lite": "^1.0.30001023",
+            "electron-to-chromium": "^1.3.341",
+            "node-releases": "^1.1.47"
+          }
+        },
+        "caniuse-lite": {
+          "version": "1.0.30001025",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001025.tgz",
+          "integrity": "sha512-SKyFdHYfXUZf5V85+PJgLYyit27q4wgvZuf8QTOk1osbypcROihMBlx9GRar2/pIcKH2r4OehdlBr9x6PXetAQ==",
+          "dev": true,
+          "optional": true
+        },
+        "electron-to-chromium": {
+          "version": "1.3.345",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.345.tgz",
+          "integrity": "sha512-f8nx53+Z9Y+SPWGg3YdHrbYYfIJAtbUjpFfW4X1RwTZ94iUG7geg9tV8HqzAXX7XTNgyWgAFvce4yce8ZKxKmg==",
+          "dev": true,
+          "optional": true
+        },
+        "node-releases": {
+          "version": "1.1.48",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.48.tgz",
+          "integrity": "sha512-Hr8BbmUl1ujAST0K0snItzEA5zkJTQup8VNTKNfT6Zw8vTJkIiagUPNfxHmgDOyfFYNfKAul40sD0UEYTvwebw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "semver": "^6.3.0"
+          },
+          "dependencies": {
+            "semver": {
+              "version": "6.3.0",
+              "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+              "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+              "dev": true,
+              "optional": true
+            }
+          }
+        },
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
           "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -15326,12 +15411,6 @@
         "nopt": "~4.0.1"
       }
     },
-    "js-levenshtein": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
-      "integrity": "sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==",
-      "dev": true
-    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -23632,6 +23711,11 @@
         "glob": "^7.1.2"
       }
     },
+    "truncate-url": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/truncate-url/-/truncate-url-1.0.0.tgz",
+      "integrity": "sha1-hiGabDV12bch04aRvwjISqWtqkI="
+    },
     "ts-loader": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-6.2.1.tgz",

package.json

@@ -130,6 +130,7 @@
     "rxjs-compat": "6.5.4",
     "sockjs-client": "1.4.0",
     "systemjs": "6.2.0",
+    "truncate-url": "1.0.0",
     "tslib": "1.10.0",
     "web-animations-js": "2.3.2",
     "xterm": "3.14.5",

src/app/frontend/common/components/chips/component.ts

@@ -18,6 +18,8 @@ import {StringMap} from '@api/backendapi';
 
 import {ChipDialog} from './chipdialog/dialog';
 
+const truncateUrl = require('truncate-url');
+
 export interface Chip {
   key: string;
   value: string;
@@ -79,6 +81,10 @@ export class ChipsComponent implements OnInit {
     return value !== undefined && value.length > MAX_CHIP_VALUE_LENGTH;
   }
 
+  getTruncatedURL(url: string): string {
+    return truncateUrl(url, MAX_CHIP_VALUE_LENGTH);
+  }
+
   isHref(value: string): boolean {
     return URL_REGEXP.test(value.trim());
   }

src/app/frontend/common/components/chips/template.html

@@ -18,20 +18,20 @@ limitations under the License.
   <ng-container *ngFor="let key of keys; let i = index">
     <mat-chip *ngIf="isVisible(i)"
               [disableRipple]="true">
-      <ng-container *ngIf="isTooLong(map[key])">
+      <ng-container *ngIf="isTooLong(map[key]) && !isHref(map[key])">
         <a class="kd-clickable"
            (click)="openChipDialog(key, map[key])">{{key}}</a>
       </ng-container>
 
       <!-- beautify ignore:start -->
-      <ng-container *ngIf="!isTooLong(map[key])">
+      <ng-container *ngIf="!isTooLong(map[key]) || isHref(map[key])">
         {{key}}<ng-container *ngIf="map[key]">:&nbsp;</ng-container>
         <ng-container *ngIf="map[key]">
           <ng-container *ngIf="isHref(map[key])">
-            <a [routerLink]="map[key]"
-               queryParamsHandling="preserve"
+            <a [href]="map[key]"
                target="_blank">
-              {{map[key]}}
+              <span *ngIf="!isTooLong(map[key])">{{map[key]}}</span>
+              <span *ngIf="isTooLong(map[key])">{{getTruncatedURL(map[key])}}</span>
             </a>
           </ng-container>
           <ng-container *ngIf="!isHref(map[key])">{{map[key]}}</ng-container>