[ACS-5703] Comment List code and styles cleanup (#8787)

* remove useless locale * remove useless id values, update tests * code cleanup * fix formatting * css cleanup * code cleanup * style cleanup * fix css scope * cleanup styles * remove sanitise and don't bind to innerHTML * reduce ng-container * move model specific logic to Comment Model * update tests, remove sanitise tests * drop carma coverage to 72 as code removed * drop selection animation as selection operations are not supported by the component itself * cleanup css * fix tests and lint * update stories and tests * fix line breaks * move e2e to unit test * disable search tests * disable search tests * disable search tests
Alfresco · Jul 31, 2023 · 3f3e830 · 3f3e830
1 parent 3125628
commit 3f3e830
Show file tree

Hide file tree

Showing 21 changed files with 235 additions and 399 deletions.
diff --git a/e2e/content-services/components/comment-component.e2e.ts b/e2e/content-services/components/comment-component.e2e.ts
@@ -32,17 +32,17 @@ import CONSTANTS = require('../../util/constants');
 import { SitesApi, SiteEntry, CommentsApi } from '@alfresco/js-api';
 
 describe('Comment', () => {
-
-    const loginPage: LoginPage = new LoginPage();
-    const contentServicesPage: ContentServicesPage = new ContentServicesPage();
-    const viewerPage: ViewerPage = new ViewerPage();
-    const commentsPage: CommentsPage = new CommentsPage();
+    const loginPage = new LoginPage();
+    const contentServicesPage = new ContentServicesPage();
+    const viewerPage = new ViewerPage();
+    const commentsPage = new CommentsPage();
     const navigationBarPage = new NavigationBarPage();
 
     const apiService = createApiService();
     const commentsApi = new CommentsApi(apiService.getInstance());
 
-    let userFullName; let nodeId;
+    let userFullName: string;
+    let nodeId: string;
     let acsUser: UserModel;
 
     const pngFileModel = new FileModel({
@@ -57,11 +57,6 @@ describe('Comment', () => {
         first: 'This is a comment',
         multiline: 'This is a comment\n' + 'with a new line',
         second: 'This is another comment',
-        codeType: `<form action="/action_page.php">
-        First name: <input type="text" name="fname"><br>
-            Last name: <input type="text" name="lname"><br>
-        <input type="submit" value="Submit">
-        </form>`,
         test: 'Test'
     };
 
@@ -149,22 +144,6 @@ describe('Comment', () => {
             await expect(await commentsPage.getUserName(0)).toEqual(userFullName);
             await expect(await commentsPage.getTime(0)).toMatch(/(ago|few)/);
         });
-
-        it('[C280022] Should treat HTML code as a regular string', async () => {
-            const resultStr = comments.codeType.replace(/\s\s+/g, ' ');
-            await viewerPage.viewFile(pngFileModel.name);
-            await viewerPage.clickInfoButton();
-            await viewerPage.checkInfoSideBarIsDisplayed();
-            await viewerPage.clickOnCommentsTab();
-
-            await commentsPage.addComment(comments.codeType);
-            await commentsPage.checkUserIconIsDisplayed();
-
-            await commentsPage.getTotalNumberOfComments('Comments (1)');
-            await expect(await commentsPage.getMessage(0)).toEqual(resultStr);
-            await expect(await commentsPage.getUserName(0)).toEqual(userFullName);
-            await expect(await commentsPage.getTime(0)).toMatch(/(ago|few)/);
-        });
     });
 
     describe('Consumer Permissions', () => {

diff --git a/e2e/protractor.excludes.json b/e2e/protractor.excludes.json
@@ -13,5 +13,13 @@
   "C280063": "https://alfresco.atlassian.net/browse/ACS-4595",
   "C280064": "https://alfresco.atlassian.net/browse/ACS-4595",
   "C280407": "https://alfresco.atlassian.net/browse/ACS-4595",
-  "C277288": "https://alfresco.atlassian.net/browse/AAE-15475"
+  "C277288": "https://alfresco.atlassian.net/browse/AAE-15475",
+  "C280054": "https://alfresco.atlassian.net/browse/ACS-5742",
+  "C280058": "https://alfresco.atlassian.net/browse/ACS-5742",
+  "C286298": "https://alfresco.atlassian.net/browse/ACS-5742",
+  "C277146": "https://alfresco.atlassian.net/browse/ACS-5742",
+  "C286556": "https://alfresco.atlassian.net/browse/ACS-5742",
+  "C291802": "https://alfresco.atlassian.net/browse/ACS-5742",
+  "C277280": "https://alfresco.atlassian.net/browse/ACS-5742",
+  "C277281": "https://alfresco.atlassian.net/browse/ACS-5742"
 }
diff --git a/lib/content-services/src/lib/node-comments/mocks/node-comments.mock.ts b/lib/content-services/src/lib/node-comments/mocks/node-comments.mock.ts
@@ -149,63 +149,63 @@ export const testUser: EcmUserModel = {
 export const getDateXMinutesAgo = (minutes: number) => new Date(new Date().getTime() - minutes * 60000);
 
 export const commentsNodeData: CommentModel[] = [
-    {
+    new CommentModel({
       id: 1,
       message: `I've done this component, is it cool?`,
       created: getDateXMinutesAgo(30),
       createdBy: johnDoe,
       isSelected: false
-    },
-    {
+    }),
+    new CommentModel({
       id: 2,
       message: 'Yeah',
       created: getDateXMinutesAgo(15),
       createdBy: janeEod,
       isSelected: false
-    },
-    {
+    }),
+    new CommentModel({
       id: 3,
       message: '+1',
       created: getDateXMinutesAgo(12),
       createdBy: robertSmith,
       isSelected: false
-    },
-    {
+    }),
+    new CommentModel({
       id: 4,
       message: 'ty',
       created: new Date(),
       createdBy: johnDoe,
       isSelected: false
-    }
+    })
 ];
 
 export const commentsTaskData: CommentModel[] = [
-    {
+    new CommentModel({
       id: 1,
       message: `I've done this task, what's next?`,
       created: getDateXMinutesAgo(30),
       createdBy: johnDoe,
       isSelected: false
-    },
-    {
+    }),
+    new CommentModel({
       id: 2,
       message: `I've assigned you another one 🤠`,
       created: getDateXMinutesAgo(15),
       createdBy: janeEod,
       isSelected: false
-    },
-    {
+    }),
+    new CommentModel({
       id: 3,
       message: '+1',
       created: getDateXMinutesAgo(12),
       createdBy: robertSmith,
       isSelected: false
-    },
-    {
+    }),
+    new CommentModel({
       id: 4,
       message: 'Cheers',
       created: new Date(),
       createdBy: johnDoe,
       isSelected: false
-    }
+    })
 ];
diff --git a/lib/core/karma.conf.js b/lib/core/karma.conf.js
@@ -89,7 +89,7 @@ module.exports = function (config) {
                 global: {
                     statements: 75,
                     branches: 67,
-                    functions: 73,
+                    functions: 72,
                     lines: 75
                 }
             }

diff --git a/lib/core/src/lib/comments/comment-list/comment-list.component.html b/lib/core/src/lib/comments/comment-list/comment-list.component.html
@@ -1,30 +1,17 @@
  <mat-list class="adf-comment-list">
     <mat-list-item *ngFor="let comment of comments"
                   (click)="selectComment(comment)"
-                  class="adf-comment-list-item"
-                  [class.adf-is-selected]="comment.isSelected"
-                  id="adf-comment-{{comment?.id}}">
-        <div [attr.id]="'comment-user-icon-' + comment.id" class="adf-comment-img-container">
-            <div
-                *ngIf="!isPictureDefined(comment.createdBy)"
-                class="adf-comment-user-icon">
-                {{getUserShortName(comment.createdBy)}}
-            </div>
-            <div>
-                <img [alt]="comment.createdBy" *ngIf="isPictureDefined(comment.createdBy)"
-                      class="adf-people-img"
-                     [src]="getUserImage(comment.createdBy)" />
-            </div>
+                  class="adf-comment-list-item">
+        <div class="adf-comment-img-container">
+            <div *ngIf="!comment.hasAvatarPicture" class="adf-comment-user-icon">{{ comment.userInitials }}</div>
+            <img *ngIf="comment.hasAvatarPicture" class="adf-people-img"
+                 [alt]="'COMMENTS.PROFILE_IMAGE' | translate"
+                 [src]="getUserImage(comment.createdBy)" />
         </div>
         <div class="adf-comment-contents">
-            <div matLine [attr.id]="'comment-user-' + comment.id" class="adf-comment-user-name">
-                {{comment.createdBy?.firstName}} {{comment.createdBy?.lastName}}
-            </div>
-            <div matLine [attr.id]="'comment-message-' + comment.id" class="adf-comment-message" [innerHTML]="comment.message">
-            </div>
-            <div matLine [attr.id]="'comment-time-' + comment.id" class="adf-comment-message-time">
-                {{ comment.created | adfTimeAgo: currentLocale }}
-            </div>
+            <div matLine class="adf-comment-user-name">{{ comment.userDisplayName }}</div>
+            <div matLine class="adf-comment-message">{{ comment.message }}</div>
+            <div matLine class="adf-comment-message-time">{{ comment.created | adfTimeAgo }}</div>
         </div>
     </mat-list-item>
 </mat-list>
diff --git a/lib/core/src/lib/comments/comment-list/comment-list.component.scss b/lib/core/src/lib/comments/comment-list/comment-list.component.scss
@@ -1,10 +1,5 @@
-.adf-is-selected {
-    background: var(--adf-theme-primary-100);
-}
-
 .adf {
     &-comment-img-container {
-        float: left;
         width: 40px;
         height: 100%;
         display: flex;
@@ -13,28 +8,12 @@
     }
 
     &-comment-list-item {
-        /* stylelint-disable */
         white-space: initial;
-        /* stylelint-enable */
         display: table-row-group;
         padding-top: 12px;
         overflow: hidden;
         height: 100% !important;
-        transition: background 0.8s;
         background-position: center;
-
-        &:hover {
-            background:
-                var(--adf-theme-primary-100)
-                radial-gradient(circle, transparent 1%, var(--adf-theme-primary-100) 1%)
-                center/15000%;
-        }
-
-        &:active {
-            background-color: var(--adf-theme-primary-300);
-            background-size: 100%;
-            transition: background 0s;
-        }
     }
 
     &-comment-user-icon {
@@ -50,39 +29,33 @@
     }
 
     &-comment-user-name {
-        float: left;
-        width: calc(100% - 10%);
+        width: 100%;
         padding: 2px 10px;
         font-weight: 600;
         font-size: var(--theme-body-1-font-size);
     }
 
     &-comment-message {
-        float: left;
-        width: calc(100% - 10px);
+        width: 100%;
         padding: 2px 10px;
-        font-style: italic;
-        /* stylelint-disable */
-        white-space: initial !important;
-        /* stylelint-enable */
+        white-space: pre-line !important;
         font-size: var(--theme-body-1-font-size);
         letter-spacing: -0.2px;
         line-height: 1.43;
         color: var(--adf-theme-foreground-text-color);
     }
 
     &-comment-message-time {
-        float: left;
-        width: calc(100% - 10%);
+        margin-top: 5px;
+        width: 100%;
         padding: 2px 10px;
-        font-size: var(--theme-caption-font-size) !important;
+        font-size: var(--theme-caption-font-size);
         color: var(--adf-theme-foreground-text-color);
     }
 
     &-comment-contents {
-        width: calc(100% - 10px);
+        width: 100%;
         padding-top: 12px;
-        padding-bottom: 12px;
         padding-left: 5px;
     }