Visual Bug Fixes

ui/src/app/features/manage-app-users-dialog/manage-app-users.component.ts

@@ -25,6 +25,9 @@ import { UserData } from 'src/app/data/interfaces/user-data';
 import { BreadcrumbsFacade } from '../breadcrumbs/breadcrumbs.facade';
 import { DeleteDialogComponent } from '../delete-dialog/delete-dialog.component';
 import { InviteDialogComponent } from '../invite-dialog/invite-dialog.component';
+import { Router } from '@angular/router';
+import { Routes } from 'src/app/data/enums/routers-url.enum';
+import { ApplicationListFacade } from '../application-list/application-list-facade';
 
 @Component({
   selector: 'manage-app-users',
@@ -52,7 +55,9 @@ export class ManageAppUsersDialog implements OnInit {
     private readonly cdRef: ChangeDetectorRef,
     @Inject(MAT_DIALOG_DATA) public data: any,
     private breadcrumbsFacade: BreadcrumbsFacade,
-    private translate: TranslateService
+    private applicationListFacade: ApplicationListFacade,
+    private translate: TranslateService,
+    private router: Router
   ) {
     this.availableEmails$ = this.breadcrumbsFacade.availableEmails$;
     this.availableRoles$ = this.breadcrumbsFacade.availableRoles$;
@@ -122,6 +127,11 @@ export class ManageAppUsersDialog implements OnInit {
         filter(data => data),
         tap(() => {
           this.breadcrumbsFacade.deleteAppUsers(user.userId, this.data.currentApp.id);
+          if (this.data.currentUserId === user.userId) {
+            this.applicationListFacade.loadApplications();
+            this.router.navigate([Routes.Home]);
+            this.dialog.closeAll();
+          }
         })
       )
       .subscribe(() => dialogSubs.unsubscribe());

ui/src/app/features/manage-users-dialog/manage-users.component.scss

@@ -145,7 +145,7 @@ $select-width: 170px;
       }
 
       .options-container {
-        position: absolute;
+        position: fixed;
         border-radius: 9px;
         background: $select-bg;
         width: $select-width;

ui/src/app/features/model-list/model-list-facade.ts

@@ -13,7 +13,7 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import { Injectable } from '@angular/core';
+import { Injectable, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Observable, Subscription } from 'rxjs';
 import { Application } from 'src/app/data/interfaces/application';

ui/src/app/features/model-list/model-list.component.ts

@@ -17,7 +17,7 @@ import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/
 import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { filter, first, map, tap } from 'rxjs/operators';
 import { Role } from 'src/app/data/enums/role.enum';
 import { Model } from 'src/app/data/interfaces/model';
@@ -41,6 +41,7 @@ export class ModelListComponent implements OnInit, OnDestroy {
   userRole$: Observable<string>;
   tableConfig$: Observable<ITableConfig>;
   currentApp$: Observable<Application>;
+  roleSubscription: Subscription;
   models: Model[];
   roleEnum = Role;
   columns = [
@@ -64,6 +65,13 @@ export class ModelListComponent implements OnInit, OnDestroy {
     this.currentApp$ = this.modelListFacade.selectedApplication$;
     this.isLoading$ = this.modelListFacade.isLoading$;
     this.userRole$ = this.modelListFacade.userRole$;
+
+    this.roleSubscription = this.userRole$.subscribe(role => {
+      if (!role) {
+        this.router.navigate([Routes.Home]);
+      }
+    });
+
     this.tableConfig$ = this.modelListFacade.models$.pipe(
       tap(models => (this.models = models)),
       map(models => ({
@@ -171,6 +179,7 @@ export class ModelListComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
+    this.roleSubscription.unsubscribe();
     this.modelListFacade.unsubscribe();
   }
 }

ui/src/app/shared/tooltip-arrow-handler.directive.ts

@@ -25,7 +25,7 @@ export class TooltipArrowHandlerDirective {
 
         if (tooltipElement) {
           const tooltipPosition = tooltipElement.getBoundingClientRect();
-          if (tooltipPosition.bottom <= position.top) {
+          if (Math.floor(tooltipPosition.bottom) <= Math.floor(position.top)) {
             this.matTooltip.tooltipClass = 'bottom-arrow';
           } else {
             this.matTooltip.tooltipClass = 'top-arrow';