GDB-10926: TTYG View is Broken After Production Build (#1562)

## What
- All icons are not displayed;
- The readableTimestamp filter has issues (in production build only);
- All CSS links in TTYG templates are broken.

## Why
- We use the paid package "@awesome.me/kit-94ffd2fc4a" and have an authentication token. However, for some reason, the CSS classes are not imported into the output vendor.js file, despite adding the required configuration as explained [here](https://docs.fontawesome.com/web/setup/packages);
- The filter was not injected properly;
- All links are version-dependent, and the version string was not correctly replaced during the build process.

## How
- Copied the necessary files after installation and modified vendor.js to use them;
- Moved the functionality that transforms the date timestamp to a human-readable string into the main TTYG controller;
- Added a "replaceVersion" transformation to all TTYG templates during the build process.

.gitignore

@@ -14,3 +14,6 @@ cypress/
 test-cypress/logs/
 logs/
 .downloads
+
+# skip fonts as they are copied after the instalation of the @awesome.me packages.
+src/js/lib/awesome_me

package.json

@@ -10,6 +10,7 @@
         "less:watch": "less-watch-compiler --config=./less-watch-compiler.config.json",
         "less:preprocess": "less-watch-compiler --config=./less-compiler.config.json",
         "license-report": "license-checker --production --json --customPath license-checker-format.json --out dist/license-checker.json",
+        "postinstall": "copyfiles -u 4 'node_modules/@awesome.me/kit-94ffd2fc4a/icons/css/*.min.css' 'node_modules/@awesome.me/kit-94ffd2fc4a/icons/webfonts/**/*' src/js/lib/awesome_me/",
         "postbuild": "npm run license-report && copyfiles -V -f license-checker/license-checker-static.json dist/"
     },
     "files": [

src/js/angular/ttyg/directives/chat-list.directive.js

@@ -1,10 +1,8 @@
-import 'angular/core/filters/readableTimestamp';
 import 'angular/core/directives/inline-editable-text/inline-editable-text.directive';
 import {decodeHTML} from "../../../../app";
 import {TTYGEventName} from "../services/ttyg-context.service";
 
 const modules = [
-    'graphdb.framework.core.filters.readable_titmestamp',
     'graphdb.framework.core.directives.inline-editable-text'
 ];
 

src/js/angular/ttyg/templates/chat-list.html

@@ -2,7 +2,7 @@
 
 <div class="chat-list-component">
     <div ng-repeat="chatGroup in chatList.chatsByDay" class="chat-group">
-        <label>{{chatGroup.timestamp | readableTimestamp}}</label>
+        <label>{{getHumanReadableTimestamp(chatGroup.timestamp)}}</label>
         <ul>
             <li ng-repeat="chat in chatGroup.chats track by chat.hash" class="chat-item"
                 ng-class="{'selected': chat.id === selectedChat.id, 'edited': renamedChat && chat.id === renamedChat.id}">

src/vendor.js

@@ -2,9 +2,9 @@ import 'lib/bootstrap/bootstrap.min.css';
 import 'angular-toastr/dist/angular-toastr.min.css';
 // TODO: remove this if no issues are found
 import 'font-awesome/css/font-awesome.min.css';
-import '@awesome.me/kit-94ffd2fc4a/icons/css/fontawesome.min.css';
-import '@awesome.me/kit-94ffd2fc4a/icons/css/regular.min.css';
-import '@awesome.me/kit-94ffd2fc4a/icons/css/custom-icons.min.css';
+import 'lib/awesome_me/css/fontawesome.min.css';
+import 'lib/awesome_me/css/regular.min.css';
+import 'lib/awesome_me/css/custom-icons.min.css';
 import './css/lib/animate/animate.css';
 import 'shepherd.js/dist/css/shepherd.css';
 import './css/shepherd-custom.css';

webpack.config.common.js

@@ -115,7 +115,8 @@ module.exports = {
             },
             {
                 from: 'src/js/angular/ttyg/templates',
-                to: 'js/angular/ttyg/templates'
+                to: 'js/angular/ttyg/templates',
+                transform: replaceVersion
             },
             {
                 from: 'src/js/angular/clustermanagement/templates',