Fix: Showing error overflow on list (#1249)

app/components/application/browse/application-list.component.ts

@@ -6,6 +6,7 @@ import { Observable, Subscription } from "rxjs";
 
 import { Filter, autobind } from "@batch-flask/core";
 import { ListBaseComponent } from "@batch-flask/core/list";
+import { LoadingStatus } from "@batch-flask/ui";
 import { ContextMenu, ContextMenuItem } from "@batch-flask/ui/context-menu";
 import { QuickListItemStatus } from "@batch-flask/ui/quick-list";
 import { SidebarManager } from "@batch-flask/ui/sidebar";
@@ -14,6 +15,8 @@ import { ApplicationListParams, ApplicationService, PinnedEntityService } from "
 import { ListView } from "app/services/core";
 import { ApplicationEditDialogComponent, DeleteApplicationDialogComponent } from "../action";
 
+import "./application-list.scss";
+
 @Component({
     selector: "bl-application-list",
     templateUrl: "application-list.html",
@@ -23,6 +26,8 @@ import { ApplicationEditDialogComponent, DeleteApplicationDialogComponent } from
     }],
 })
 export class ApplicationListComponent extends ListBaseComponent implements OnInit, OnDestroy {
+    public LoadingStatus = LoadingStatus;
+
     public data: ListView<BatchApplication, ApplicationListParams>;
     public applications: List<BatchApplication>;
     public displayedApplications: List<BatchApplication>;

app/components/application/browse/application-list.html

@@ -20,7 +20,7 @@
             <bl-column>Default Version</bl-column>
             <bl-column>Allow Updates</bl-column>
         </bl-thead>
-        <bl-row *ngFor="let application of displayedApplications;trackBy: trackByFn" [link]="['/applications/', application.id]"
+        <bl-row *ngFor="let application of displayedApplications;trackBy: trackByFn" [link]="['/applications', application.id]"
             [key]="application.id" [contextmenu]="contextmenu(application)">
             <bl-cell>{{application.id}}</bl-cell>
             <bl-cell>{{application.packages?.size}}</bl-cell>
@@ -29,6 +29,7 @@
         </bl-row>
     </bl-table>
 </bl-focus-section>
+<bl-server-error class="error-in-list" [error]="data.error | async" *ngIf="status === LoadingStatus.Error"></bl-server-error>
 
 <bl-no-item [itemCount]="displayedApplications.size" [filter]="filter" [status]="status">
     <i icon class="fa fa-file-archive-o small"></i>

app/components/application/browse/application-list.scss

@@ -0,0 +1,3 @@
+bl-application-list {
+    display: block;
+}

app/components/data/browse/data-container-list.component.ts

@@ -18,6 +18,8 @@ import { ComponentUtils } from "app/utils";
 import { Constants } from "common";
 import { DeleteContainerAction, DeleteContainerDialogComponent, FileGroupCreateFormComponent } from "../action";
 
+import "./data-container-list.scss";
+
 const defaultListOptions = {
     pageSize: Constants.ListPageSizes.default,
 };
@@ -77,6 +79,7 @@ export class DataContainerListComponent extends ListBaseComponent implements OnI
 
     public ngOnChanges(changes) {
         if (changes.storageAccountId && this.storageAccountId) {
+            this.containers = List([]);
             this.data.params = { storageAccountId: this.storageAccountId };
             this.data.fetchNext();
         }

app/components/data/browse/data-container-list.html

@@ -1,4 +1,4 @@
-<bl-focus-section *ngIf="storageAccountId">
+<bl-focus-section class="list" *ngIf="storageAccountId">
     <bl-quick-list *ngIf="quicklist" [status]="status" [(activeItem)]="activeItem" [(selection)]="selection" (scrollBottom)="onScrollToBottom()">
         <bl-quick-list-item *ngFor="let container of containers;trackBy: trackFileGroup" [link]="['/data/', dataSource, 'containers', container.id]"
             [key]="container.id" [contextmenu]="contextmenu(container)">
@@ -29,12 +29,12 @@
         </bl-row>
     </bl-table>
 </bl-focus-section>
-<bl-server-error class="error-in-list" [error]="data.error | async" *ngIf="status === LoadingStatus.Error"></bl-server-error>
 <bl-no-item [itemCount]="containers.size" [filter]="filter" [status]="status">
     <i icon class="fa fa-cloud-upload small"></i>
     <span no-filter>No {{entityType}}</span>
     <span with-filter>No {{entityType}} match this filter</span>
 </bl-no-item>
+<bl-server-error class="error-in-list" [error]="data.error | async" *ngIf="status === LoadingStatus.Error"></bl-server-error>
 <div *ngIf="!storageAccountId">
     No storage account picked
 </div>

app/components/data/browse/data-container-list.scss

@@ -0,0 +1,3 @@
+bl-data-container-list {
+    display: block;
+}

app/components/data/home/data-home.html

@@ -1,5 +1,3 @@
-<bl-storage-error-display [noClassic]="true"></bl-storage-error-display>
-
 <bl-browse-layout #layout [config]="layoutConfig">
     <div blBrowseLayoutTitle>
         Storage containers

app/services/index.ts

@@ -1,6 +1,6 @@
 export * from "./account.service";
 export * from "./authorization-http";
-export * from "./application-service";
+export * from "./application.service";
 export * from "./app-insights";
 export * from "./autoscale-formula.service";
 export * from "./azure-http.service";

app/services/quota.service.ts

@@ -5,7 +5,7 @@ import { FilterBuilder } from "@batch-flask/core";
 import { AccountResource, BatchQuotas, JobState, Pool } from "app/models";
 import { List } from "immutable";
 import { AccountService } from "./account.service";
-import { ApplicationService } from "./application-service";
+import { ApplicationService } from "./application.service";
 import { ComputeService } from "./compute.service";
 import { JobService } from "./job-service";
 import { PoolService } from "./pool.service";

src/@batch-flask/ui/browse-layout/browse-layout.scss

@@ -76,6 +76,7 @@ bl-browse-layout {
                 .bl-list-content {
                     flex: 1;
                     min-height: 100px;
+                    overflow-y: auto;
                     position: relative;
                 }
             }
@@ -93,6 +94,18 @@ bl-browse-layout {
                     overflow-y: auto;
                 }
             }
+
+            [blbrowselayoutlist] {
+                display: flex;
+                flex-direction: column;
+                height: 100%;
+
+                > .list {
+                    flex: 1 1 auto;
+                    min-height: 100px;
+                    overflow-y: auto;
+                }
+            }
         }
 
         > .content-view {