[sc-15067] Added refresh button to resources page, improved layout of… (#2946)

* [sc-15067] Added refresh button to resources page, improved layout of homepage for large screens

* [sc-15067] Truncated long file names for contextbox view

Author: ykulynych

apps/dashboard/src/app/knowledge-box/knowledge-box-home/knowledge-box-home.component.scss

@@ -23,6 +23,12 @@
       max-width: calc(var(--width-small-column) * 2 + var(--gap-size));
       min-width: var(--width-small-column);
     }
+
+    @media (min-width: $size-viewport-wide-min) {
+      &.wide-column {
+        max-width: unset;
+      }
+    }
   }
   .row-container {
     display: flex;

apps/dashboard/src/app/knowledge-box/simple/resource-table/resource-table.component.html

@@ -11,7 +11,11 @@
   @for (row of rows | async; track row.title) {
     <pa-table-row>
       <pa-table-cell>
-        <span class="body-m">{{ row.title }}</span>
+        <span
+          class="body-m"
+          paEllipsisTooltip>
+          {{ row.title }}
+        </span>
       </pa-table-cell>
       <pa-table-cell>
         <span class="body-s">

apps/dashboard/src/app/knowledge-box/simple/resource-table/resource-table.component.scss

@@ -4,6 +4,10 @@
 pa-table {
   display: block;
   width: tokens.$content-width;
+
+  ::ng-deep .pa-table-grid--cell {
+    min-width: 0;
+  }
 }
 
 .extension {

apps/dashboard/src/app/knowledge-box/simple/simple-page.module.ts

@@ -13,6 +13,7 @@ import {
   PaPopupModule,
   PaTableModule,
   PaTextFieldModule,
+  PaTooltipModule,
 } from '@guillotinaweb/pastanaga-angular';
 
 import { SimplePageComponent } from './simple-page.component';
@@ -54,6 +55,7 @@ import { SimplePageRoutingModule } from './simple-page-routing.module';
     PaPopupModule,
     PaTableModule,
     PaTextFieldModule,
+    PaTooltipModule,
     SisProgressModule,
   ],
 })

libs/common/src/lib/resources/resource-list/resource-list.component.html

@@ -210,9 +210,22 @@
           }
         </div>
 
-        @if (isAdminOrContrib | async) {
-          <stf-upload-button></stf-upload-button>
-        }
+        <div class="header-actions">
+          @if (isMainView || isProcessedView) {
+            <pa-button
+              kind="secondary"
+              aspect="basic"
+              icon="refresh"
+              iconAndText
+              (click)="refresh()">
+              {{ 'generic.refresh' | translate }}
+            </pa-button>
+          }
+
+          @if (isAdminOrContrib | async) {
+            <stf-upload-button></stf-upload-button>
+          }
+        </div>
       </div>
 
       <div class="active-filters">

libs/common/src/lib/resources/resource-list/resource-list.component.scss

@@ -21,6 +21,13 @@
     gap: rhythm(2);
     justify-content: space-between;
     margin-bottom: rhythm(2);
+
+    .header-actions {
+      align-items: center;
+      display: flex;
+      flex-shrink: 0;
+      gap: rhythm(1);
+    }
   }
 
   .filters {

libs/common/src/lib/resources/resource-list/resource-list.component.ts

@@ -161,6 +161,20 @@ export class ResourceListComponent implements OnDestroy {
     this.resourceListService.search();
   }
 
+  refresh() {
+    this.resourceListService
+      .loadResources(true, true)
+      .pipe(
+        switchMap(() => {
+          if (this.isMainView || this.isProcessedView) {
+            return this.loadFilters();
+          }
+          return of(null);
+        }),
+      )
+      .subscribe();
+  }
+
   onSelectFilter(option: OptionModel, event: MouseEvent | KeyboardEvent) {
     if ((event.target as HTMLElement).tagName === 'LI') {
       option.selected = !option.selected;