[ACS-9619] Issues with trimming file's name in viewer (#10858)

lib/core/src/lib/viewer/components/viewer.component.html

@@ -49,8 +49,7 @@
                     <div class="adf-viewer__display-name"
                          id="adf-viewer-display-name"
                          [title]="fileName">
-                        <span class="adf-viewer__display-name-without-extension">{{ fileNameWithoutExtension }}</span>
+                        <span>{{ displayName }}</span>
-                        <span class="adf-viewer__display-name-extension">{{ fileExtension }}</span>
                     </div>
                     <button *ngIf="allowNavigate && canNavigateNext"
                             data-automation-id="adf-toolbar-next-file"

lib/core/src/lib/viewer/components/viewer.component.scss

@@ -55,23 +55,10 @@
 
     &__display-name {
         font-size: var(--theme-subheading-2-font-size);
-        opacity: 0.87;
         line-height: 1.5;
-        letter-spacing: -0.4px;
-        font-weight: normal;
-        font-style: normal;
-        font-stretch: normal;
         vertical-align: middle;
         color: var(--adf-theme-foreground-text-color);
-
+        white-space: nowrap;
-        &-without-extension {
-            display: inline-block;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            max-width: 400px;
-            white-space: nowrap;
-            vertical-align: bottom;
-        }
     }
 
     &-container {

lib/core/src/lib/viewer/components/viewer.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, SimpleChanges } from '@angular/core';
 import { ComponentFixture, discardPeriodicTasks, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
@@ -143,36 +143,61 @@ describe('ViewerComponent', () => {
         });
     });
 
-    describe('File Name Test', () => {
+    describe('File Name Display Tests', () => {
-        const getFileNameWithoutExtension = (): string =>
+        describe('displayFileName method', () => {
-            testingUtils.getByCSS('.adf-viewer__display-name-without-extension').nativeElement.textContent;
+            it('should return full filename when total length is 80 characters or less', () => {
-        const getExtension = (): string => testingUtils.getByCSS('.adf-viewer__display-name-extension').nativeElement.textContent;
+                const fileShortName = 'shortname.txt';
+                component.fileName = fileShortName;
+                fixture.detectChanges();
 
-        it('should fileName be set by urlFile input if the fileName is not provided as Input', () => {
+                expect(component.getDisplayFileName()).toBe(fileShortName);
-            component.fileName = '';
+                expect(getFileName()).toBe(fileShortName);
-            spyOn(viewUtilService, 'getFilenameFromUrl').and.returnValue('fakeFileName.jpeg');
+            });
-            const mockSimpleChanges: any = { urlFile: { currentValue: 'https://fakefile.url/fakeFileName.jpeg' } };
 
-            component.ngOnChanges(mockSimpleChanges);
+            it('should truncate filename when total length exceeds 80 characters', () => {
-            fixture.detectChanges();
+                const longName =
+                    'verylongfilenamethatexceedsmaximumlengthallowedverylongfilenamethatexceedsmaximumlengthallowed.verylongextensionnamethatistoolongverylongextensionnamethatistoolong';
 
-            expect(getFileName()).toEqual('fakeFileName.jpeg');
+                component.fileName = longName;
-            expect(getFileNameWithoutExtension()).toBe('fakeFileName.');
+                fixture.detectChanges();
-            expect(getExtension()).toBe('jpeg');
+
+                const result = component.getDisplayFileName();
+
+                expect(result).toContain('.....');
+                expect(result.length).toBe(50);
+            });
+
+            it('should handle empty filename', () => {
+                component.fileName = '';
+                fixture.detectChanges();
+
+                expect(component.getDisplayFileName()).toBe('');
+                expect(getFileName()).toBe('');
+            });
         });
 
-        it('should set fileName providing fileName input', () => {
+        describe('fileName setter integration', () => {
-            component.fileName = 'testFileName.jpg';
+            it('should fileName be set by urlFile input if the fileName is not provided as Input', () => {
-            spyOn(viewUtilService, 'getFilenameFromUrl').and.returnValue('fakeFileName.jpeg');
+                component.fileName = '';
-            const mockSimpleChanges: any = { urlFile: { currentValue: 'https://fakefile.url/fakeFileName.jpeg' } };
+                spyOn(viewUtilService, 'getFilenameFromUrl').and.returnValue('fakeFileName.jpeg');
+                const mockSimpleChanges = { urlFile: { currentValue: 'https://fakefile.url/fakeFileName.jpeg' } } as unknown as SimpleChanges;
 
-            component.ngOnChanges(mockSimpleChanges);
+                component.ngOnChanges(mockSimpleChanges);
-            fixture.detectChanges();
+                fixture.detectChanges();
-            fixture.detectChanges();
 
-            expect(getFileName()).toEqual('testFileName.jpg');
+                expect(getFileName()).toEqual('fakeFileName.jpeg');
-            expect(getFileNameWithoutExtension()).toBe('testFileName.');
+            });
-            expect(getExtension()).toBe('jpg');
+
+            it('should set fileName providing fileName input', () => {
+                component.fileName = 'testFileName.jpg';
+                spyOn(viewUtilService, 'getFilenameFromUrl').and.returnValue('fakeFileName.jpeg');
+                const mockSimpleChanges = { urlFile: { currentValue: 'https://fakefile.url/fakeFileName.jpeg' } } as unknown as SimpleChanges;
+
+                component.ngOnChanges(mockSimpleChanges);
+                fixture.detectChanges();
+
+                expect(getFileName()).toEqual('testFileName.jpg');
+            });
         });
     });
 

lib/core/src/lib/viewer/components/viewer.component.ts

@@ -297,6 +297,7 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
     private _fileNameWithoutExtension: string;
     private _fileExtension: string;
 
+    public displayName: string;
     public downloadPromptTimer: number;
     public downloadPromptReminderTimer: number;
     public mimeTypeIconUrl: string;
@@ -309,6 +310,7 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
         this._fileName = fileName;
         this._fileExtension = this.viewUtilsService.getFileExtension(this.fileName);
         this._fileNameWithoutExtension = this.fileName?.replace(new RegExp(`${this.fileExtension}$`), '') || '';
+        this.displayName = this.getDisplayFileName();
     }
 
     get fileName(): string {
@@ -462,6 +464,24 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
         this.clearDownloadPromptTimeouts();
     }
 
+    getDisplayFileName(): string {
+        const fullName = (this.fileNameWithoutExtension || '') + (this.fileExtension || '');
+        const maxLength = 50;
+
+        if (fullName.length <= maxLength) {
+            return fullName;
+        }
+
+        const amountOfTruncateDots = 5;
+        const availableSpace = maxLength - amountOfTruncateDots;
+        const endLength = 8;
+        const startLength = availableSpace - endLength;
+
+        const start = fullName.substring(0, startLength);
+        const end = fullName.substring(fullName.length - endLength);
+        return start + '.....' + end;
+    }
+
     private configureAndInitDownloadPrompt() {
         this.configureDownloadPromptProperties();
         if (this.enableDownloadPrompt) {