[ACA-2350] fix ellipsis on DL and the context-menu issue (#1070)

* add adf-no-grow-cell & min-width on columns

* [ACA-2350] fix ellipsis on DL and the context-menu issue

- issues were caused by nested items with the same classname: 'adf-datatable-cell'

* [ACA-2350] fix unit test

* [ACA-2350] remove deprecated classname

- mention 'adf-datatable-cell--text' example container class for elements that have context menu

* [ACA-2350] small fixes on search-results display

* [ACA-2350] fix location check

* [ACA-2350] should clean-up code once [ADF-4401] issue is fixed

* [ACA-2350] change e2e expect to check match

* [plint] fix code formatting

* [plint] fix code formatting

src/app/components/common/location-link/location-link.component.ts

@@ -43,13 +43,18 @@ import { TranslationService } from '@alfresco/adf-core';
 @Component({
   selector: 'aca-location-link',
   template: `
-    <a href="" [title]="nodeLocation$ | async" (click)="goToLocation()">
+    <a
+      href=""
+      [title]="nodeLocation$ | async"
+      (click)="goToLocation()"
+      class="adf-datatable-cell-value"
+    >
       {{ displayText | async | translate }}
     </a>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
-  host: { class: 'aca-location-link adf-location-cell' }
+  host: { class: 'aca-location-link adf-location-cell aca-column-content' }
 })
 export class LocationLinkComponent implements OnInit {
   private _path: PathInfo;

src/app/components/context-menu/context-menu.directive.ts

@@ -100,7 +100,8 @@ export class ContextActionsDirective implements OnInit, OnDestroy {
   }
 
   private getTarget(event: MouseEvent): Element {
-    return this.findAncestor(<Element>event.target, 'adf-datatable-cell');
+    // change back to 'adf-datatable-cell' once the [ADF-4401] issue is fixed
+    return this.findAncestor(<Element>event.target, 'adf-datatable-cell--');
   }
 
   private isSelected(target: Element): boolean {
@@ -113,12 +114,15 @@ export class ContextActionsDirective implements OnInit, OnDestroy {
     );
   }
 
-  private findAncestor(el: Element, className: string): Element {
-    if (el.classList.contains(className)) {
+  private findAncestor(el: Element, classNameString: string): Element {
+    if (el.classList.value.includes(classNameString)) {
       return el;
     }
     // tslint:disable-next-line:curly
-    while ((el = el.parentElement) && !el.classList.contains(className));
+    while (
+      (el = el.parentElement) &&
+      !el.classList.value.includes(classNameString)
+    );
     return el;
   }
 }

src/app/components/context-menu/context-menu.directives.spec.ts

@@ -45,7 +45,8 @@ describe('ContextActionsDirective', () => {
 
   it('should call service to render context menu', fakeAsync(() => {
     const el = document.createElement('div');
-    el.className = 'adf-data-table-cell adf-datatable-cell adf-datatable-row';
+    el.className =
+      'adf-datatable-cell adf-datatable-cell--text adf-datatable-row';
 
     const fragment = document.createDocumentFragment();
     fragment.appendChild(el);

src/app/components/dl-custom-components/name-column/name-column.component.scss

@@ -1,8 +1,8 @@
 .aca-name-column-container {
   aca-locked-by {
     position: absolute;
-    top: 35px;
-    left: 13px;
+    top: 17px;
+    left: 7px;
     display: flex;
     align-items: center;
     color: rgba(0, 0, 0, 0.54);

src/app/components/dl-custom-components/name-column/name-column.component.ts

@@ -36,7 +36,7 @@ import { isLocked } from '../../../utils/node.utils';
   templateUrl: './name-column.component.html',
   styleUrls: ['name-column.component.scss'],
   encapsulation: ViewEncapsulation.None,
-  host: { class: 'adf-datatable-cell adf-datatable-link adf-name-column' }
+  host: { class: ' aca-column-content adf-datatable-link adf-name-column' }
 })
 export class CustomNameColumnComponent extends NameColumnComponent
   implements OnInit, OnDestroy {

src/app/components/search/search-results/search-results.component.scss

@@ -31,6 +31,7 @@
 
   .adf-search-filter {
     min-width: 260px;
+    max-width: 320px;
     padding: 5px;
     height: 100%;
     overflow: scroll;