Shorten URL for link definitions (#4860)

* Shorten URL

* Add PR number

* Rename shortenURL to extractHostnameWithSubdomain

* Added a test

Author: compulim

CHANGELOG.md

@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Added
 
+-  Resolves [#4853](https://github.com/microsoft/BotFramework-WebChat/issues/4853). Shorten URLs in link definitions UI, by [@compulim](https://github.com/compulim), in PR [#4860](https://github.com/microsoft/BotFramework-WebChat/pull/4860)
 -  Resolves [#4840](https://github.com/microsoft/BotFramework-WebChat/issues/4840). Added feedback buttons in activity status, by [@compulim](https://github.com/compulim), in PR [#4846](https://github.com/microsoft/BotFramework-WebChat/pull/4846)
 -  Resolves [#4841](https://github.com/microsoft/BotFramework-WebChat/issues/4841). Added link definitions UI in Markdown, by [@compulim](https://github.com/compulim), in PR [#4846](https://github.com/microsoft/BotFramework-WebChat/pull/4846)
 -  Resolves [#4842](https://github.com/microsoft/BotFramework-WebChat/issues/4842). Added provenance in activity status, by [@compulim](https://github.com/compulim), in PR [#4846](https://github.com/microsoft/BotFramework-WebChat/pull/4846)

packages/component/src/Attachment/Text/private/URLItem.tsx

@@ -1,6 +1,6 @@
-import { onErrorResumeNext } from 'botframework-webchat-core';
 import React, { memo } from 'react';
 
+import extractHostnameWithSubdomain from './extractHostnameWithSubdomain';
 import ItemBody from './ItemBody';
 
 type Props = {
@@ -18,11 +18,7 @@ const URLItem = memo(({ identifier, title, url }: Props) => (
     rel="noopener noreferrer"
     target="_blank"
   >
-    <ItemBody
-      identifier={identifier}
-      isExternal={true}
-      title={title || onErrorResumeNext(() => new URL(url).host) || url}
-    />
+    <ItemBody identifier={identifier} isExternal={true} title={title || extractHostnameWithSubdomain(url)} />
   </a>
 ));
 

packages/component/src/Attachment/Text/private/extractHostnameWithSubdomain.spec.ts

@@ -0,0 +1,21 @@
+import extractHostnameWithSubdomain from './extractHostnameWithSubdomain';
+
+test.each([
+  ['https://www.example.com/', 'example.com'],
+  ['https://www.example.com/index.html', 'example.com'],
+  ['HTTPS://WWW.EXAMPLE.COM/index.html', 'example.com'],
+  ['https://www.example.co.jp/index.html', 'example.co.jp'],
+  ['https://www.example.com:443/index.html', 'example.com'],
+  ['http://www.example.com:80/index.html', 'example.com'],
+  ['https://www.support.example.com/index.html', 'support.example.com'],
+  ['https://www.microsoft/index.html', 'microsoft'],
+  ['https://www.例子.com/index.html', 'xn--fsqu00a.com'],
+  ['https://www.example.com:8443/index.html', 'www.example.com:8443'],
+  ['https://www.example.com:8080', 'www.example.com:8080'],
+  ['https://support.example.com/index.html', 'support.example.com'],
+  ['https://www2.example.com/index.html', 'www2.example.com'],
+  ['ftp://www.example.com/', 'ftp://www.example.com/'],
+  ['www/index.html', 'www/index.html']
+])('should extract %s into %s', (url, expected) => {
+  expect(extractHostnameWithSubdomain(url)).toBe(expected);
+});

packages/component/src/Attachment/Text/private/extractHostnameWithSubdomain.ts

@@ -0,0 +1,17 @@
+export default function extractHostnameWithSubdomain(urlString: string): string {
+  try {
+    const { host, port, protocol } = new URL(urlString);
+
+    if (protocol === 'http:' || protocol === 'https:') {
+      if (!port) {
+        return host.replace(/^www\./iu, '');
+      }
+
+      return host;
+    }
+  } catch (error) {
+    // Intentionally left blank, will return `urlString`.
+  }
+
+  return urlString;
+}