[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
2025-07-24 17:31:52 +00:00 · 2019-04-17 12:01:43 +03:00
parent b2b234c3cb
commit 91eaa3c305
9 changed files with 174 additions and 58 deletions
--- a/e2e/suites/search/search-results-files-folders.test.ts
+++ b/e2e/suites/search/search-results-files-folders.test.ts
@@ -31,14 +31,17 @@ import * as moment from 'moment';
 describe('Search results - files and folders', () => {
  const username = `user-${Utils.random()}`;

-  const file = `test-file-${Utils.random()}.txt`; let fileId;
+  const file = `test-file-${Utils.random()}.txt`;
+  let fileId;
  const fileTitle = 'file title';
  const fileDescription = 'file description';

  /* cspell:disable-next-line */
-  const fileRussian = `любимый-сайт-${Utils.random()}`; let fileRussianId;
+  const fileRussian = `любимый-сайт-${Utils.random()}`;
+  let fileRussianId;

-  const folder = `test-folder-${Utils.random()}`; let folderId;
+  const folder = `test-folder-${Utils.random()}`;
+  let folderId;
  const folderTitle = 'folder title';
  const folderDescription = 'folder description';

@@ -54,12 +57,22 @@ describe('Search results - files and folders', () => {
  const { searchInput } = page.header;
  const { dataTable, breadcrumb } = page;

-  beforeAll(async (done) => {
+  beforeAll(async done => {
    await apis.admin.people.createUser({ username });

-    fileId = (await apis.user.nodes.createFile(file, '-my-', fileTitle, fileDescription)).entry.id;
+    fileId = (await apis.user.nodes.createFile(
+      file,
+      '-my-',
+      fileTitle,
+      fileDescription
+    )).entry.id;
    await apis.user.nodes.editNodeContent(fileId, 'edited by user');
-    folderId = (await apis.user.nodes.createFolder(folder, '-my-', folderTitle, folderDescription)).entry.id;
+    folderId = (await apis.user.nodes.createFolder(
+      folder,
+      '-my-',
+      folderTitle,
+      folderDescription
+    )).entry.id;
    fileRussianId = (await apis.user.nodes.createFile(fileRussian)).entry.id;
    await apis.user.sites.createSite(site);

@@ -70,7 +83,7 @@ describe('Search results - files and folders', () => {
    done();
  });

-  afterAll(async (done) => {
+  afterAll(async done => {
    await Promise.all([
      apis.user.nodes.deleteNodeById(fileId),
      apis.user.nodes.deleteNodeById(fileRussianId),
@@ -80,7 +93,7 @@ describe('Search results - files and folders', () => {
    done();
  });

-  beforeEach(async (done) => {
+  beforeEach(async done => {
    await page.refresh();
    done();
  });
@@ -91,7 +104,9 @@ describe('Search results - files and folders', () => {
    await searchInput.searchFor('test-');
    await dataTable.waitForBody();

-    expect(await page.breadcrumb.getCurrentItemName()).toEqual('Search Results');
+    expect(await page.breadcrumb.getCurrentItemName()).toEqual(
+      'Search Results'
+    );
  });

  it('File information - [C279183]', async () => {
@@ -101,19 +116,38 @@ describe('Search results - files and folders', () => {
    await dataTable.waitForBody();

    const fileEntry = await apis.user.nodes.getNodeById(fileId);
-    const modifiedDate = moment(fileEntry.entry.modifiedAt).format("MMM D, YYYY, h:mm:ss A");
+    const modifiedDate = moment(fileEntry.entry.modifiedAt).format(
+      'MMM D, YYYY, h:mm:ss A'
+    );
    const modifiedBy = fileEntry.entry.modifiedByUser.displayName;
    const size = fileEntry.entry.content.sizeInBytes;

-    expect(await dataTable.isItemPresent(file)).toBe(true, `${file} is not displayed`);
+    expect(await dataTable.isItemPresent(file)).toBe(
+      true,
+      `${file} is not displayed`
+    );

-    expect(await dataTable.getRowCellsCount(file)).toEqual(2, 'incorrect number of columns');
+    expect(await dataTable.getRowCellsCount(file)).toEqual(
+      2,
+      'incorrect number of columns'
+    );

-    expect(await dataTable.getSearchResultLinesCount(file)).toEqual(4, 'incorrect number of lines for search result');
-    expect(await dataTable.getSearchResultNameAndTitle(file)).toBe(`${file} ( ${fileTitle} )`);
-    expect(await dataTable.getSearchResultDescription(file)).toBe(fileDescription);
-    expect(await dataTable.getSearchResultModified(file)).toBe(`Modified: ${modifiedDate} by ${modifiedBy} | Size: ${size} Bytes`);
-    expect(await dataTable.getSearchResultLocation(file)).toBe('Location: Personal Files');
+    expect(await dataTable.getSearchResultLinesCount(file)).toEqual(
+      4,
+      'incorrect number of lines for search result'
+    );
+    expect(await dataTable.getSearchResultNameAndTitle(file)).toBe(
+      `${file} ( ${fileTitle} )`
+    );
+    expect(await dataTable.getSearchResultDescription(file)).toBe(
+      fileDescription
+    );
+    expect(await dataTable.getSearchResultModified(file)).toBe(
+      `Modified: ${modifiedDate} by ${modifiedBy} | Size: ${size} Bytes`
+    );
+    expect(await dataTable.getSearchResultLocation(file)).toMatch(
+      /Location:\s+Personal Files/
+    );
  });

  it('Folder information - [C306867]', async () => {
@@ -123,18 +157,37 @@ describe('Search results - files and folders', () => {
    await dataTable.waitForBody();

    const folderEntry = await apis.user.nodes.getNodeById(folderId);
-    const modifiedDate = moment(folderEntry.entry.modifiedAt).format("MMM D, YYYY, h:mm:ss A");
+    const modifiedDate = moment(folderEntry.entry.modifiedAt).format(
+      'MMM D, YYYY, h:mm:ss A'
+    );
    const modifiedBy = folderEntry.entry.modifiedByUser.displayName;

-    expect(await dataTable.isItemPresent(folder)).toBe(true, `${folder} is not displayed`);
+    expect(await dataTable.isItemPresent(folder)).toBe(
+      true,
+      `${folder} is not displayed`
+    );

-    expect(await dataTable.getRowCellsCount(folder)).toEqual(2, 'incorrect number of columns');
+    expect(await dataTable.getRowCellsCount(folder)).toEqual(
+      2,
+      'incorrect number of columns'
+    );

-    expect(await dataTable.getSearchResultLinesCount(folder)).toEqual(4, 'incorrect number of lines for search result');
-    expect(await dataTable.getSearchResultNameAndTitle(folder)).toBe(`${folder} ( ${folderTitle} )`);
-    expect(await dataTable.getSearchResultDescription(folder)).toBe(folderDescription);
-    expect(await dataTable.getSearchResultModified(folder)).toBe(`Modified: ${modifiedDate} by ${modifiedBy}`);
-    expect(await dataTable.getSearchResultLocation(folder)).toBe('Location: Personal Files');
+    expect(await dataTable.getSearchResultLinesCount(folder)).toEqual(
+      4,
+      'incorrect number of lines for search result'
+    );
+    expect(await dataTable.getSearchResultNameAndTitle(folder)).toBe(
+      `${folder} ( ${folderTitle} )`
+    );
+    expect(await dataTable.getSearchResultDescription(folder)).toBe(
+      folderDescription
+    );
+    expect(await dataTable.getSearchResultModified(folder)).toBe(
+      `Modified: ${modifiedDate} by ${modifiedBy}`
+    );
+    expect(await dataTable.getSearchResultLocation(folder)).toMatch(
+      /Location:\s+Personal Files/
+    );
  });

  it('Search file with special characters - [C290029]', async () => {
@@ -143,7 +196,10 @@ describe('Search results - files and folders', () => {
    await searchInput.searchFor(fileRussian);
    await dataTable.waitForBody();

-    expect(await dataTable.isItemPresent(fileRussian)).toBe(true, `${fileRussian} is not displayed`);
+    expect(await dataTable.isItemPresent(fileRussian)).toBe(
+      true,
+      `${fileRussian} is not displayed`
+    );
  });

  it('Location column redirect - file in user Home - [C279177]', async () => {
--- a/src/app/components/common/location-link/location-link.component.ts
+++ b/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;
--- a/src/app/components/context-menu/context-menu.directive.ts
+++ b/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;
  }
 }
--- a/src/app/components/context-menu/context-menu.directives.spec.ts
+++ b/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);
--- a/src/app/components/dl-custom-components/name-column/name-column.component.scss
+++ b/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);
--- a/src/app/components/dl-custom-components/name-column/name-column.component.ts
+++ b/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 {
--- a/src/app/components/search/search-results/search-results.component.scss
+++ b/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;
--- a/src/app/ui/overrides/adf-document-list.theme.scss
+++ b/src/app/ui/overrides/adf-document-list.theme.scss
@@ -15,23 +15,42 @@
  .adf-datatable-list {
    border: none;

-    .adf-datatable-link {
-      &.adf-name-column,
-      &.adf-library-name-column {
+    .adf-datatable-cell-container {
+      .aca-column-content,
+      .adf-name-column,
+      .adf-library-name-column,
+      .adf-trashcan-name-column {
+        position: absolute;
+        max-width: calc(100% - 0px);
+
+        // remove this style once the [ADF-4401] issue is fixed:
+        &.adf-datatable-cell {
+          .adf-datatable-cell-value {
+            position: static;
+            width: auto;
+          }
+        }
+      }
+
+      .adf-library-name-column {
+        // same as on top comment
+        &.adf-datatable-cell {
          color: $document-list-name-text-color;

          &:hover {
            color: $document-list-selection-color;
          }
+        }
+      }
+    }

    .adf-datatable-cell-value {
-          position: static;
-          max-width: 35vw;
-        }
-      }
+      display: block;
    }

    .adf-datatable-cell--image {
+      min-width: $document-list-thumbnail-width;
+      width: $document-list-thumbnail-width;
      max-width: $document-list-thumbnail-width;
    }
  }
@@ -53,14 +72,19 @@
    .adf-datatable-cell {
      padding: 0 2px;
      box-sizing: border-box;
+      min-width: 100px;
+
+      &.adf-no-grow-cell {
+        min-width: 120px;
+      }
+
+      &:first-child {
+        min-width: $document-list-thumbnail-width;
+      }

      &:focus {
        outline: none !important;
      }
-
-      .adf-datatable-cell-value {
-        width: 100% !important;
-      }
    }

    .adf-datatable-cell {
@@ -88,4 +112,9 @@
      }
    }
  }
+
+  .adf-search-results .adf-datatable .adf-datatable-cell {
+    padding-top: 12px;
+    padding-bottom: 12px;
+  }
 }
--- a/src/assets/app.extensions.json
+++ b/src/assets/app.extensions.json
@@ -1080,6 +1080,7 @@
          "key": "content.sizeInBytes",
          "title": "APP.DOCUMENT_LIST.COLUMNS.SIZE",
          "type": "fileSize",
+          "class": "adf-no-grow-cell",
          "sortable": true,
          "desktopOnly": true
        },
@@ -1089,6 +1090,7 @@
          "title": "APP.DOCUMENT_LIST.COLUMNS.MODIFIED_ON",
          "type": "date",
          "format": "timeAgo",
+          "class": "adf-ellipsis-cell adf-no-grow-cell",
          "sortable": true,
          "desktopOnly": true
        },
@@ -1097,7 +1099,7 @@
          "key": "modifiedByUser.displayName",
          "title": "APP.DOCUMENT_LIST.COLUMNS.MODIFIED_BY",
          "type": "text",
-          "class": "adf-ellipsis-cell",
+          "class": "adf-ellipsis-cell adf-no-grow-cell",
          "sortable": true,
          "desktopOnly": true
        }
@@ -1125,6 +1127,7 @@
          "key": "role",
          "title": "APP.DOCUMENT_LIST.COLUMNS.ROLE",
          "type": "text",
+          "class": "adf-no-grow-cell",
          "sortable": true,
          "template": "app.columns.libraryRole",
          "desktopOnly": false
@@ -1134,6 +1137,7 @@
          "key": "visibility",
          "title": "APP.DOCUMENT_LIST.COLUMNS.VISIBILITY",
          "type": "text",
+          "class": "adf-no-grow-cell",
          "sortable": true,
          "template": "app.columns.libraryStatus",
          "desktopOnly": true
@@ -1162,6 +1166,7 @@
          "key": "role",
          "title": "APP.DOCUMENT_LIST.COLUMNS.ROLE",
          "type": "text",
+          "class": "adf-no-grow-cell",
          "sortable": true,
          "template": "app.columns.libraryRole",
          "desktopOnly": false
@@ -1171,6 +1176,7 @@
          "key": "visibility",
          "title": "APP.DOCUMENT_LIST.COLUMNS.VISIBILITY",
          "type": "text",
+          "class": "adf-no-grow-cell",
          "sortable": true,
          "template": "app.columns.libraryStatus",
          "desktopOnly": true
@@ -1199,6 +1205,7 @@
          "key": "path.name",
          "title": "APP.DOCUMENT_LIST.COLUMNS.LOCATION",
          "type": "text",
+          "class": "adf-ellipsis-cell adf-no-grow-cell",
          "sortable": true,
          "template": "app.columns.location",
          "desktopOnly": true
@@ -1208,6 +1215,7 @@
          "key": "content.sizeInBytes",
          "title": "APP.DOCUMENT_LIST.COLUMNS.SIZE",
          "type": "fileSize",
+          "class": "adf-no-grow-cell",
          "sortable": true,
          "desktopOnly": true
        },
@@ -1216,6 +1224,7 @@
          "key": "modifiedAt",
          "title": "APP.DOCUMENT_LIST.COLUMNS.MODIFIED_ON",
          "type": "date",
+          "class": "adf-ellipsis-cell adf-no-grow-cell",
          "format": "timeAgo",
          "sortable": true,
          "desktopOnly": true
@@ -1225,7 +1234,7 @@
          "key": "modifiedByUser.displayName",
          "title": "APP.DOCUMENT_LIST.COLUMNS.MODIFIED_BY",
          "type": "text",
-          "class": "adf-ellipsis-cell",
+          "class": "adf-ellipsis-cell adf-no-grow-cell",
          "sortable": true,
          "desktopOnly": true
        },
@@ -1234,7 +1243,7 @@
          "key": "sharedByUser.displayName",
          "title": "APP.DOCUMENT_LIST.COLUMNS.SHARED_BY",
          "type": "text",
-          "class": "adf-ellipsis-cell",
+          "class": "adf-ellipsis-cell adf-no-grow-cell",
          "sortable": true,
          "desktopOnly": true
        }
@@ -1262,6 +1271,7 @@
          "key": "path.name",
          "title": "APP.DOCUMENT_LIST.COLUMNS.LOCATION",
          "type": "text",
+          "class": "adf-ellipsis-cell adf-no-grow-cell",
          "sortable": true,
          "template": "app.columns.location",
          "desktopOnly": true
@@ -1271,6 +1281,7 @@
          "key": "content.sizeInBytes",
          "title": "APP.DOCUMENT_LIST.COLUMNS.SIZE",
          "type": "fileSize",
+          "class": "adf-no-grow-cell",
          "sortable": true,
          "desktopOnly": true
        },
@@ -1280,6 +1291,7 @@
          "title": "APP.DOCUMENT_LIST.COLUMNS.MODIFIED_ON",
          "type": "date",
          "format": "timeAgo",
+          "class": "adf-ellipsis-cell adf-no-grow-cell",
          "sortable": true,
          "desktopOnly": true
        }
@@ -1307,6 +1319,7 @@
          "key": "path.name",
          "title": "APP.DOCUMENT_LIST.COLUMNS.LOCATION",
          "type": "text",
+          "class": "adf-ellipsis-cell adf-no-grow-cell",
          "sortable": true,
          "template": "app.columns.location",
          "desktopOnly": true
@@ -1316,6 +1329,7 @@
          "key": "sizeInBytes",
          "title": "APP.DOCUMENT_LIST.COLUMNS.SIZE",
          "type": "fileSize",
+          "class": "adf-no-grow-cell",
          "sortable": true,
          "desktopOnly": true
        },
@@ -1325,6 +1339,7 @@
          "title": "APP.DOCUMENT_LIST.COLUMNS.MODIFIED_ON",
          "type": "date",
          "format": "timeAgo",
+          "class": "adf-ellipsis-cell adf-no-grow-cell",
          "sortable": true,
          "desktopOnly": true
        },
@@ -1333,7 +1348,7 @@
          "key": "modifiedByUser.displayName",
          "title": "APP.DOCUMENT_LIST.COLUMNS.MODIFIED_BY",
          "type": "text",
-          "class": "adf-ellipsis-cell",
+          "class": "adf-ellipsis-cell adf-no-grow-cell",
          "sortable": true,
          "desktopOnly": true
        }
@@ -1361,6 +1376,7 @@
          "key": "path.name",
          "title": "APP.DOCUMENT_LIST.COLUMNS.LOCATION",
          "type": "text",
+          "class": "adf-ellipsis-cell adf-no-grow-cell",
          "sortable": true,
          "template": "app.columns.location",
          "desktopOnly": true
@@ -1370,6 +1386,7 @@
          "key": "content.sizeInBytes",
          "title": "APP.DOCUMENT_LIST.COLUMNS.SIZE",
          "type": "fileSize",
+          "class": "adf-no-grow-cell",
          "sortable": true,
          "desktopOnly": true
        },
@@ -1379,6 +1396,7 @@
          "title": "APP.DOCUMENT_LIST.COLUMNS.DELETED_ON",
          "type": "date",
          "format": "timeAgo",
+          "class": "adf-ellipsis-cell adf-no-grow-cell",
          "sortable": true,
          "desktopOnly": true
        }
@@ -1406,6 +1424,7 @@
          "key": "role",
          "title": "APP.DOCUMENT_LIST.COLUMNS.ROLE",
          "type": "text",
+          "class": "adf-no-grow-cell",
          "sortable": true,
          "template": "app.columns.libraryRole",
          "desktopOnly": false
@@ -1415,6 +1434,7 @@
          "key": "visibility",
          "title": "APP.DOCUMENT_LIST.COLUMNS.VISIBILITY",
          "type": "text",
+          "class": "adf-no-grow-cell",
          "sortable": true,
          "template": "app.columns.libraryStatus",
          "desktopOnly": true