fix(sidebar-actions): Sidebar does not close if an entity(account/vol… (

#709)

* fix(sidebar-actions): Sidebar does not close if an entity(account/volume) is deleted from sidebar actions

* fix(sidebar-actions): Sidebar does not close if an entity(account/volume) is deleted from sidebar actions

* fix(sidebar-actions): Sidebar does not close if an entity(account/volume) is deleted from sidebar actions - fixes

* Code review changes

src/app/reducers/accounts/redux/accounts.actions.ts

@@ -1,5 +1,6 @@
 import { Action } from '@ngrx/store';
 import { AccountUser } from '../../../shared/models/account-user.model';
+import { Account } from '../../../shared/models/account.model';
 
 export const LOAD_ACCOUNTS_REQUEST = '[ACCOUNTS] LOAD_ACCOUNTS_REQUEST';
 export const LOAD_ACCOUNTS_RESPONSE = '[ACCOUNTS] LOAD_ACCOUNTS_RESPONSE';
@@ -94,35 +95,35 @@ export class AccountUpdateError implements Action {
 export class EnableAccountRequest implements Action {
   readonly type = ENABLE_ACCOUNT;
 
-  constructor(public payload: any) {
+  constructor(public payload: Account) {
   }
 }
 
 export class DisableAccountRequest implements Action {
   readonly type = DISABLE_ACCOUNT;
 
-  constructor(public payload: any) {
+  constructor(public payload: Account) {
   }
 }
 
 export class LockAccountRequest implements Action {
   readonly type = LOCK_ACCOUNT;
 
-  constructor(public payload: any) {
+  constructor(public payload: Account) {
   }
 }
 
 export class DeleteAccountRequest implements Action {
   readonly type = DELETE_ACCOUNT;
 
-  constructor(public payload: any) {
+  constructor(public payload: Account) {
   }
 }
 
 export class DeleteSuccess implements Action {
   readonly type = ACCOUNT_DELETE_SUCCESS;
 
-  constructor(public payload: any) {
+  constructor(public payload: Account) {
   }
 }
 

src/app/reducers/accounts/redux/accounts.effects.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
 import { Actions, Effect } from '@ngrx/effects';
 import { Observable } from 'rxjs/Observable';
 import { Action } from '@ngrx/store';
@@ -90,6 +91,20 @@ export class AccountsEffects {
         });
     });
 
+  @Effect({ dispatch: false })
+  deleteSuccessNavigate$: Observable<Account> = this.actions$
+    .ofType(accountActions.ACCOUNT_DELETE_SUCCESS)
+    .map((action: accountActions.DeleteSuccess) => action.payload)
+    .filter((account: Account) => {
+      return this.router.isActive(`/accounts/${account.id}`, false);
+    })
+    .do(() => {
+      this.router.navigate(['./accounts'], {
+        queryParamsHandling: 'preserve'
+      });
+    });
+
+
   @Effect({ dispatch: false })
   createError$: Observable<Action> = this.actions$
     .ofType(accountActions.ACCOUNT_CREATE_ERROR)
@@ -173,7 +188,8 @@ export class AccountsEffects {
     private accountUserService: AccountUserService,
     private asyncJobService: AsyncJobService,
     private dialogService: DialogService,
-    private notificationService: NotificationService
+    private notificationService: NotificationService,
+    private router: Router
   ) {
   }
 

src/app/reducers/security-groups/redux/sg.effects.ts

@@ -58,6 +58,19 @@ export class SecurityGroupEffects {
         .catch(error => Observable.of(new securityGroup.DeleteSecurityGroupError(error)));
     });
 
+  @Effect({ dispatch: false })
+  deleteSecurityGroupSuccessNavigate$: Observable<Action> = this.actions$
+    .ofType(securityGroup.DELETE_SECURITY_GROUP_SUCCESS)
+    .map((action: securityGroup.DeleteSecurityGroupSuccess) => action.payload)
+    .filter((sg: SecurityGroup) => {
+      return this.router.isActive(`/security-group/${sg.id}`, false);
+    })
+    .do(() => {
+      this.router.navigate(['./security-group'], {
+        queryParamsHandling: 'preserve'
+      });
+    });
+
   @Effect({ dispatch: false })
   deleteSecurityGroupError$: Observable<Action> = this.actions$
     .ofType(securityGroup.DELETE_SECURITY_GROUP_ERROR)

src/app/reducers/volumes/redux/volumes.actions.ts

@@ -59,7 +59,7 @@ export class CreateVolume implements Action {
 export class DeleteVolume implements Action {
   readonly type = DELETE_VOLUME;
 
-  constructor(public payload: any) {
+  constructor(public payload: Volume) {
   }
 }
 
@@ -101,7 +101,7 @@ export class CreateSuccess implements Action {
 export class DeleteSuccess implements Action {
   readonly type = VOLUME_DELETE_SUCCESS;
 
-  constructor(public payload: any) {
+  constructor(public payload: Volume) {
   }
 }
 

src/app/reducers/volumes/redux/volumes.effects.ts

@@ -3,13 +3,15 @@ import {
   Actions,
   Effect
 } from '@ngrx/effects';
+import { Router } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
 import * as volumeActions from './volumes.actions';
 import { Action } from '@ngrx/store';
 import { VolumeService } from '../../../shared/services/volume.service';
 import { Volume } from '../../../shared/models/volume.model';
 import { DialogService } from '../../../dialog/dialog-service/dialog.service';
 import { VolumeTagService } from '../../../shared/services/tags/volume-tag.service';
+import { Utils } from '../../../shared/services/utils/utils.service';
 
 @Injectable()
 export class VolumesEffects {
@@ -104,6 +106,19 @@ export class VolumesEffects {
         });
     });
 
+  @Effect({ dispatch: false })
+  deleteVolumeSuccessNavigate$: Observable<Volume> = this.actions$
+    .ofType(volumeActions.VOLUME_DELETE_SUCCESS)
+    .map((action: volumeActions.DeleteSuccess) => action.payload)
+    .filter((volume: Volume) => {
+      return this.router.isActive(`/storage/${volume.id}`, false);
+    })
+    .do(() => {
+      this.router.navigate(['./storage'], {
+        queryParamsHandling: 'preserve'
+      });
+    });
+
   @Effect({ dispatch: false })
   createError$: Observable<Action> = this.actions$
     .ofType(volumeActions.VOLUME_CREATE_ERROR)
@@ -122,7 +137,8 @@ export class VolumesEffects {
     private actions$: Actions,
     private dialogService: DialogService,
     private volumeService: VolumeService,
-    private volumeTagService: VolumeTagService
+    private volumeTagService: VolumeTagService,
+    private router: Router
   ) {
   }
 

src/app/shared/actions/volume-actions/volume-actions.container.ts

@@ -30,7 +30,7 @@ export class VolumeActionsContainerComponent extends WithUnsubscribe() {
   constructor(
     public dialogService: DialogService,
     public authService: AuthService,
-    private store: Store<State>,
+    private store: Store<State>
   ) {
     super();
   }

src/app/ssh-keys/containers/ssh-key-page/ssh-key-page.container.ts

@@ -30,9 +30,15 @@ const getGroupName = (sshKey: SSHKeyPair) => {
 
 @Component({
   selector: 'cs-ssh-key-page-container',
-  templateUrl: 'ssh-key-page.container.html'
+  template: `<cs-ssh-keys-page
+    [sshKeyList]="sshKeyList$ | async"
+    [isLoading]="isLoading$ | async"
+    [selectedGroupings]="selectedGroupings$ | async"
+    (onKeyRemove)="removeSshKeyPair($event)"
+  ></cs-ssh-keys-page>`
 })
 export class SshKeyPageContainerComponent implements OnInit, AfterViewInit {
+  readonly isLoading$ = this.store.select(fromSshKeys.isLoading);
   readonly sshKeyList$ = this.store.select(fromSshKeys.selectFilteredSshKeys);
   readonly selectedGroupings$ = this.store.select(fromSshKeys.filterSelectedGroupings);
 

src/app/ssh-keys/redux/ssh-key.actions.ts

@@ -35,17 +35,18 @@ export class SshKeyFilterUpdate implements Action {
 export class RemoveSshKeyPair implements Action {
   readonly type = SSH_KEY_PAIR_REMOVE;
 
-  constructor(public payload: any) {
+  constructor(public payload: SSHKeyPair) {
   }
 }
 
 export class RemoveSshKeyPairSuccessAction implements Action {
   readonly type = SSH_KEY_PAIR_REMOVE_SUCCESS;
 
-  constructor(public payload?: any) {
+  constructor(public payload: SSHKeyPair) {
   }
 }
 
+
 export class RemoveSshKeyPairErrorAction implements Action {
   readonly type = SSH_KEY_PAIR_REMOVE_ERROR;
 

src/app/ssh-keys/redux/ssh-key.effects.ts

@@ -7,9 +7,10 @@ import { SSHKeyPair } from '../../shared/models/ssh-keypair.model';
 import { SshPrivateKeyDialogComponent } from '../ssh-key-creation/ssh-private-key-dialog.component';
 import { MatDialog } from '@angular/material';
 import { DialogService } from '../../dialog/dialog-service/dialog.service';
+import { Router } from '@angular/router';
 
 import * as sshKey from './ssh-key.actions';
-import { sshKeyId } from './ssh-key.reducers';
+
 
 @Injectable()
 export class SshKeyEffects {
@@ -27,19 +28,36 @@ export class SshKeyEffects {
   removeSshKeyPair$: Observable<Action> = this.actions$
     .ofType(sshKey.SSH_KEY_PAIR_REMOVE)
     .switchMap((action: sshKey.RemoveSshKeyPair) => {
-      return this.sshKeyService.remove({
-        name: action.payload.name,
-        account: action.payload.account,
-        domainid: action.payload.domainid
-      })
-        .map(() => {
-          return new sshKey.RemoveSshKeyPairSuccessAction(sshKeyId(action.payload));
-        })
-        .catch((error: Error) => {
-          return Observable.of(new sshKey.RemoveSshKeyPairErrorAction(error));
+      return this.dialogService.confirm({ message: 'SSH_KEYS.REMOVE_THIS_KEY' })
+        .onErrorResumeNext()
+        .filter(res => !!res)
+        .switchMap(() => {
+          return this.sshKeyService.remove({
+            name: action.payload.name,
+            account: action.payload.account,
+            domainid: action.payload.domainid
+          })
+            .map(() => new sshKey.RemoveSshKeyPairSuccessAction(action.payload))
+            .catch((error: Error) => {
+              return Observable.of(new sshKey.RemoveSshKeyPairErrorAction(error));
+            });
         });
     });
 
+  @Effect({ dispatch: false })
+  removeSshKeyPairSuccessNavigate$: Observable<SSHKeyPair> = this.actions$
+    .ofType(sshKey.SSH_KEY_PAIR_REMOVE_SUCCESS)
+    .map((action: sshKey.RemoveSshKeyPairSuccessAction) => action.payload)
+    .filter((sshKey: SSHKeyPair) => {
+      return this.router.isActive(`/ssh-keys/view/${sshKey.name}`, false)
+        && this.router.routerState.root.snapshot.queryParams.account === sshKey.account;
+    })
+    .do(() => {
+      this.router.navigate(['./ssh-keys'], {
+        queryParamsHandling: 'preserve'
+      });
+    });
+
   @Effect()
   createSshKeyPair$: Observable<Action> = this.actions$
     .ofType(sshKey.SSH_KEY_PAIR_CREATE)
@@ -79,7 +97,8 @@ export class SshKeyEffects {
     private actions$: Actions,
     private sshKeyService: SSHKeyPairService,
     private dialog: MatDialog,
-    private dialogService: DialogService
+    private dialogService: DialogService,
+    private router: Router
   ) {
   }
 

src/app/ssh-keys/redux/ssh-key.reducers.ts

@@ -19,6 +19,7 @@ export interface State {
 }
 
 export interface ListState extends EntityState<SSHKeyPair> {
+  loading: boolean,
   filters: {
     selectedGroupings: any[],
     selectedAccountIds: string[]
@@ -40,6 +41,7 @@ export const adapter: EntityAdapter<SSHKeyPair> = createEntityAdapter<SSHKeyPair
 });
 
 const initialListState: ListState = adapter.getInitialState({
+  loading: false,
   filters: {
     selectedAccountIds: [],
     selectedGroupings: []
@@ -73,7 +75,8 @@ export function listReducer(state = initialListState, action: sshKey.Actions): L
   switch (action.type) {
     case sshKey.LOAD_SSH_KEYS_REQUEST: {
       return {
-        ...state
+        ...state,
+        loading: true,
       };
     }
     case sshKey.SSH_KEY_FILTER_UPDATE: {
@@ -95,6 +98,7 @@ export function listReducer(state = initialListState, action: sshKey.Actions): L
          * sort each record upon entry into the sorted array.
          */
         ...adapter.addAll([...action.payload], state),
+        loading: false
       };
     }
 
@@ -105,7 +109,7 @@ export function listReducer(state = initialListState, action: sshKey.Actions): L
       };
     }
     case sshKey.SSH_KEY_PAIR_REMOVE_SUCCESS: {
-      return adapter.removeOne(action.payload, state);
+      return adapter.removeOne(sshKeyId(action.payload), state);
     }
     default: {
       return state;
@@ -178,6 +182,11 @@ export const filters = createSelector(
 );
 
 export const isLoading = createSelector(
+  getSshKeysEntitiesState,
+  state => state.loading
+);
+
+export const isFormLoading = createSelector(
   getSshKeysFormState,
   state => state.loading
 );

src/app/ssh-keys/ssh-key-creation/containers/ssh-key-creation-dialog.container.ts

@@ -17,7 +17,7 @@ import * as fromSshKeys from '../../redux/ssh-key.reducers';
     </cs-ssh-key-creation>`,
 })
 export class SShKeyCreationDialogContainerComponent {
-  public loading$ = this.store.select(fromSshKeys.isLoading);
+  public loading$ = this.store.select(fromSshKeys.isFormLoading);
 
   constructor(
     public dialogService: DialogService,

src/app/ssh-keys/ssh-key-sidebar/ssh-key-sidebar.component.html

@@ -1,6 +1,11 @@
 <div *ngIf="entity">
   <div class="title-container">
     <h4 class="details-header">{{ entity?.name }}</h4>
+    <button mat-icon-button
+            [matMenuTriggerFor]="actionsMenu"
+    >
+      <mat-icon>more_vert</mat-icon>
+    </button>
   </div>
 
   <cs-description
@@ -11,6 +16,13 @@ <h4 class="details-header">{{ entity?.name }}</h4>
   <cs-ssh-key-fingerprint [sshKeyPair]="entity"></cs-ssh-key-fingerprint>
 </div>
 
+<mat-menu #actionsMenu="matMenu">
+  <button mat-menu-item (click)="onRemoveClicked(entity)">
+    <mat-icon>delete</mat-icon>
+    <span>{{ 'COMMON.DELETE' | translate }}</span>
+  </button>
+</mat-menu>
+
 <router-outlet></router-outlet>
 
 <cs-no-results *ngIf="notFound" [text]="'SSH_KEYS.SSH_KEY_PAIR_NOT_FOUND' | translate"></cs-no-results>