Feature: Enhanced templating for filename format (#7836)

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

src-ui/src/app/components/manage/storage-path-list/storage-path-list.component.spec.ts

@@ -11,6 +11,8 @@ import { PageHeaderComponent } from '../../common/page-header/page-header.compon
 import { StoragePathListComponent } from './storage-path-list.component'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
+import { StoragePath } from 'src/app/data/storage-path'
 
 describe('StoragePathListComponent', () => {
   let component: StoragePathListComponent
@@ -24,6 +26,7 @@ describe('StoragePathListComponent', () => {
         SortableDirective,
         PageHeaderComponent,
         IfPermissionsDirective,
+        SafeHtmlPipe,
       ],
       imports: [
         NgbPaginationModule,
@@ -71,4 +74,15 @@ describe('StoragePathListComponent', () => {
       'Do you really want to delete the storage path "StoragePath1"?'
     )
   })
+
+  it('should truncate path if necessary', () => {
+    const path: StoragePath = {
+      id: 1,
+      name: 'StoragePath1',
+      path: 'a'.repeat(100),
+    }
+    expect(component.extraColumns[0].valueFn(path)).toEqual(
+      `<code>${'a'.repeat(49)}...</code>`
+    )
+  })
 })

src-ui/src/app/components/manage/storage-path-list/storage-path-list.component.ts

@@ -40,8 +40,10 @@ export class StoragePathListComponent extends ManagementListComponent<StoragePat
         {
           key: 'path',
           name: $localize`Path`,
+          rendersHtml: true,
+          hideOnMobile: true,
           valueFn: (c: StoragePath) => {
-            return c.path
+            return `<code>${c.path?.slice(0, 49)}${c.path?.length > 50 ? '...' : ''}</code>`
           },
         },
       ]