NAS-133123: Deprecate slideInService (#11199)

src/app/directives/warn-about-unsaved-changes/warn-about-unsaved-changes.directive.spec.ts

@@ -4,7 +4,7 @@ import {
 } from '@ngneat/spectator/jest';
 import { of, Subject } from 'rxjs';
 import { DialogService } from 'app/modules/dialog/dialog.service';
-import { SlideInRef } from 'app/modules/slide-ins/slide-in-ref';
+import { OldSlideInRef } from 'app/modules/slide-ins/old-slide-in-ref';
 import { WarnAboutUnsavedChangesDirective } from './warn-about-unsaved-changes.directive';
 
 describe('WarnAboutUnsavedChangesDirective', () => {
@@ -18,7 +18,7 @@ describe('WarnAboutUnsavedChangesDirective', () => {
         confirm: jest.fn(() => of(true)),
       }),
       {
-        provide: SlideInRef,
+        provide: OldSlideInRef,
         useFactory: () => ({
           close: jest.fn(),
           slideInClosed$: new Subject<void>(),

src/app/directives/warn-about-unsaved-changes/warn-about-unsaved-changes.directive.ts

@@ -8,7 +8,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { Observable, of } from 'rxjs';
 import { filter, switchMap, tap } from 'rxjs/operators';
 import { DialogService } from 'app/modules/dialog/dialog.service';
-import { SlideInRef } from 'app/modules/slide-ins/slide-in-ref';
+import { OldSlideInRef } from 'app/modules/slide-ins/old-slide-in-ref';
 
 @UntilDestroy()
 @Directive({
@@ -23,7 +23,7 @@ export class WarnAboutUnsavedChangesDirective<T> implements OnInit {
   constructor(
     private translate: TranslateService,
     private dialogService: DialogService,
-    private slideInRef: SlideInRef<T>,
+    private slideInRef: OldSlideInRef<T>,
   ) {}
 
   ngOnInit(): void {

src/app/modules/forms/custom-selects/cloud-credentials-select/cloud-credentials-select.component.ts

@@ -10,8 +10,8 @@ import { Option } from 'app/interfaces/option.interface';
 import { IxSelectWithNewOption } from 'app/modules/forms/ix-forms/components/ix-select/ix-select-with-new-option.directive';
 import { IxSelectComponent, IxSelectValue } from 'app/modules/forms/ix-forms/components/ix-select/ix-select.component';
 import { CloudCredentialsFormComponent } from 'app/pages/credentials/backup-credentials/cloud-credentials-form/cloud-credentials-form.component';
-import { ChainedComponentResponse } from 'app/services/chained-slide-in.service';
 import { CloudCredentialService } from 'app/services/cloud-credential.service';
+import { SlideInResponse } from 'app/services/slide-in';
 
 @Component({
   selector: 'ix-cloud-credentials-select',
@@ -48,7 +48,7 @@ export class CloudCredentialsSelectComponent extends IxSelectWithNewOption {
     );
   }
 
-  getValueFromChainedResponse(result: ChainedComponentResponse<CloudSyncCredential>): IxSelectValue {
+  getValueFromSlideInResponse(result: SlideInResponse<CloudSyncCredential>): IxSelectValue {
     return result.response.id;
   }
 

src/app/modules/forms/custom-selects/ssh-credentials-select/ssh-credentials-select.component.ts

@@ -11,8 +11,8 @@ import { SshCredentials } from 'app/interfaces/ssh-credentials.interface';
 import { IxSelectWithNewOption } from 'app/modules/forms/ix-forms/components/ix-select/ix-select-with-new-option.directive';
 import { IxSelectComponent, IxSelectValue } from 'app/modules/forms/ix-forms/components/ix-select/ix-select.component';
 import { SshConnectionFormComponent } from 'app/pages/credentials/backup-credentials/ssh-connection-form/ssh-connection-form.component';
-import { ChainedComponentResponse } from 'app/services/chained-slide-in.service';
 import { KeychainCredentialService } from 'app/services/keychain-credential.service';
+import { SlideInResponse } from 'app/services/slide-in';
 
 @Component({
   selector: 'ix-ssh-credentials-select',
@@ -41,7 +41,7 @@ export class SshCredentialsSelectComponent extends IxSelectWithNewOption {
     );
   }
 
-  getValueFromChainedResponse(result: ChainedComponentResponse<SshCredentials>): IxSelectValue {
+  getValueFromSlideInResponse(result: SlideInResponse<SshCredentials>): IxSelectValue {
     return result.response.id;
   }
 

src/app/modules/forms/ix-forms/components/ix-select/ix-select-with-new-option.directive.ts

@@ -10,7 +10,7 @@ import {
 } from 'rxjs';
 import { Option } from 'app/interfaces/option.interface';
 import { IxSelectComponent, IxSelectValue } from 'app/modules/forms/ix-forms/components/ix-select/ix-select.component';
-import { ChainedComponentResponse, ChainedSlideInService } from 'app/services/chained-slide-in.service';
+import { SlideInResponse, SlideIn } from 'app/services/slide-in';
 
 export const addNewIxSelectValue = 'ADD_NEW';
 
@@ -23,7 +23,7 @@ export abstract class IxSelectWithNewOption implements OnInit, AfterViewInit {
 
   private options = new BehaviorSubject<Option[]>([]);
 
-  private chainedSlideIn = inject(ChainedSlideInService);
+  private slideIn = inject(SlideIn);
   private translateService = inject(TranslateService);
 
   ngOnInit(): void {
@@ -43,8 +43,8 @@ export abstract class IxSelectWithNewOption implements OnInit, AfterViewInit {
     });
   }
 
-  abstract getValueFromChainedResponse(
-    result: ChainedComponentResponse,
+  abstract getValueFromSlideInResponse(
+    result: SlideInResponse,
   ): IxSelectValue;
   abstract getFormComponentType(): ComponentType<unknown>;
   abstract fetchOptions(): Observable<Option[]>;
@@ -64,16 +64,16 @@ export abstract class IxSelectWithNewOption implements OnInit, AfterViewInit {
       filter(Boolean),
       filter((newValue: number | string) => newValue === addNewIxSelectValue),
       switchMap(() => {
-        return this.chainedSlideIn.open(
+        return this.slideIn.open(
           this.getFormComponentType(),
           this.formComponentIsWide,
           this.getFormInputData(),
         );
       }),
-      filter((response: ChainedComponentResponse) => !response.error),
+      filter((response: SlideInResponse) => !response.error),
       tap(
         (response) => this.ixSelect().controlDirective.control.setValue(
-          this.getValueFromChainedResponse(response),
+          this.getValueFromSlideInResponse(response),
         ),
       ),
       switchMap(() => this.fetchOptions()),

src/app/modules/global-search/components/global-search/global-search.component.spec.ts

@@ -20,8 +20,8 @@ import * as focusHelper from 'app/modules/global-search/helpers/focus-helper';
 import { GlobalSearchSectionsProvider } from 'app/modules/global-search/services/global-search-sections.service';
 import { UiSearchProvider } from 'app/modules/global-search/services/ui-search.service';
 import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
+import { OldSlideInService } from 'app/services/old-slide-in.service';
 import { SidenavService } from 'app/services/sidenav.service';
-import { SlideInService } from 'app/services/slide-in.service';
 import { SystemInfoState } from 'app/store/system-info/system-info.reducer';
 import { selectSystemInfoState } from 'app/store/system-info/system-info.selectors';
 
@@ -55,7 +55,7 @@ describe('GlobalSearchComponent', () => {
         search: jest.fn().mockReturnValue(of(mockedSearchResults)),
         selectionChanged$: of(),
       }),
-      mockProvider(SlideInService, {
+      mockProvider(OldSlideInService, {
         closeAll: jest.fn(),
       }),
       mockProvider(SidenavService, {
@@ -176,7 +176,7 @@ describe('GlobalSearchComponent', () => {
   }));
 
   it('should close all backdrops', () => {
-    const slideInService = spectator.inject(SlideInService);
+    const slideInService = spectator.inject(OldSlideInService);
     const sidenavService = spectator.inject(SidenavService);
     const dialogService = spectator.inject(DialogService);
 

src/app/modules/global-search/components/global-search/global-search.component.ts

@@ -28,10 +28,10 @@ import { UiSearchDirectivesService } from 'app/modules/global-search/services/ui
 import { UiSearchProvider } from 'app/modules/global-search/services/ui-search.service';
 import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
 import { TestDirective } from 'app/modules/test-id/test.directive';
-import { ChainedSlideInService } from 'app/services/chained-slide-in.service';
 import { FocusService } from 'app/services/focus.service';
+import { OldSlideInService } from 'app/services/old-slide-in.service';
 import { SidenavService } from 'app/services/sidenav.service';
-import { SlideInService } from 'app/services/slide-in.service';
+import { SlideIn } from 'app/services/slide-in';
 import { AppState } from 'app/store';
 import { waitForSystemInfo } from 'app/store/system-info/system-info.selectors';
 
@@ -73,8 +73,8 @@ export class GlobalSearchComponent implements OnInit, AfterViewInit, OnDestroy {
     private globalSearchSectionsProvider: GlobalSearchSectionsProvider,
     private cdr: ChangeDetectorRef,
     private store$: Store<AppState>,
-    private slideInService: SlideInService,
-    private chainedSlideInService: ChainedSlideInService,
+    private oldSlideInService: OldSlideInService,
+    private slideInService: SlideIn,
     private dialogService: DialogService,
     private focusService: FocusService,
     @Inject(DOCUMENT) private document: Document,
@@ -145,7 +145,7 @@ export class GlobalSearchComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   closeAllBackdrops(): void {
-    [this.slideInService, this.chainedSlideInService].forEach((service) => service.closeAll());
+    [this.oldSlideInService, this.slideInService].forEach((service) => service.closeAll());
 
     this.sidenavService.closeSecondaryMenu();
     this.dialogService.closeAllDialogs();

src/app/modules/layout/admin-layout/admin-layout.component.html

@@ -102,5 +102,5 @@
   </mat-sidenav>
 </mat-sidenav-container>
 
-<ix-slide-in id="ix-slide-in-form"></ix-slide-in>
-<ix-chained-slide-in id="ix-chained-slide-in-form"></ix-chained-slide-in>
+<ix-old-slide-in id="ix-slide-in-form"></ix-old-slide-in>
+<ix-slide-in-controller id="ix-slide-in-form"></ix-slide-in-controller>

src/app/modules/layout/admin-layout/admin-layout.component.ts

@@ -31,8 +31,8 @@ import { NavigationComponent } from 'app/modules/layout/navigation/navigation.co
 import { SecondaryMenuComponent } from 'app/modules/layout/secondary-menu/secondary-menu.component';
 import { TopbarComponent } from 'app/modules/layout/topbar/topbar.component';
 import { DefaultPageHeaderComponent } from 'app/modules/page-header/default-page-header/default-page-header.component';
-import { ChainedSlideInComponent } from 'app/modules/slide-ins/components/chained-slide-in/chained-slide-in.component';
-import { SlideInComponent } from 'app/modules/slide-ins/slide-in.component';
+import { SlideInControllerComponent } from 'app/modules/slide-ins/components/slide-in-controller/slide-in-controller.component';
+import { OldSlideInComponent } from 'app/modules/slide-ins/old-slide-in.component';
 import { TestDirective } from 'app/modules/test-id/test.directive';
 import { LanguageService } from 'app/services/language.service';
 import { SentryService } from 'app/services/sentry.service';
@@ -65,8 +65,8 @@ import { selectCopyrightText, selectIsEnterprise, waitForSystemInfo } from 'app/
     RouterOutlet,
     ConsoleFooterComponent,
     AlertsPanelComponent,
-    SlideInComponent,
-    ChainedSlideInComponent,
+    SlideInControllerComponent,
+    OldSlideInComponent,
     AsyncPipe,
     TranslateModule,
     TestDirective,

src/app/modules/slide-ins/components/modal-header/modal-header.component.html

@@ -1,21 +1,36 @@
-<div class="ix-slidein-title-bar">
-  <h3 class="ix-formtitle">
+<div
+  class="ix-slidein-title-bar"
+  [class.has-many-components]="componentsSize() > 1"
+>
+  @if (componentsSize() > 1 && !disableClose()) {
+    <button
+      mat-icon-button
+      id="ix-close-icon"
+      [ixTest]="['close-slide-in']"
+      [matTooltip]="tooltip"
+      [attr.aria-label]="'Close {formType} Form' | translate: { formType: title() }"
+      (click)="close()"
+    >
+      <ix-icon name="mdi-chevron-left" ></ix-icon>
+    </button>
+  }
+  <h3 class="ix-form-title">
     {{ title() | translate }}
-    @if (requiredRoles()?.length && !(hasRequiredRoles() | async)) {
+    @if (requiredRoles()?.length && !(hasRequiredRoles | async)) {
       <ix-readonly-badge></ix-readonly-badge>
     }
   </h3>
-
-  @if (!disableClose()) {
-    <ix-icon
-      tabindex="0"
-      name="cancel"
+  @if (componentsSize() <= 1 && !disableClose()) {
+    <button
+      mat-icon-button
       id="ix-close-icon"
-      type="button"
-      [attr.aria-label]="'Close {formType} Form' | translate: { formType: title }"
+      [ixTest]="['close-slide-in']"
+      [matTooltip]="tooltip"
+      [attr.aria-label]="'Close {formType} Form' | translate: { formType: title() }"
       (click)="close()"
-      (keydown.enter)="close()"
-    ></ix-icon>
+    >
+      <ix-icon name="cancel" (keydown.enter)="close()"></ix-icon>
+    </button>
   }
 </div>
 

src/app/modules/slide-ins/components/modal-header/modal-header.component.scss

@@ -7,17 +7,22 @@
 }
 
 .ix-slidein-title-bar {
+  align-content: center;
   align-items: center;
   background-color: var(--bg2);
   border-bottom: 2px solid var(--lines);
   display: flex;
   height: 75px;
+  justify-content: space-between;
   margin: 0 -20px;
-  padding: 0 30px;
-  place-content: center space-between;
+  padding: 30px;
+
+  &.has-many-components {
+    justify-content: flex-start;
+  }
 }
 
-.ix-formtitle {
+.ix-form-title {
   color: var(--fg1);
   word-break: break-all;
 }

src/app/modules/slide-ins/components/modal-header2/modal-header2.component.spec.ts → src/app/modules/slide-ins/components/modal-header/modal-header.component.spec.ts

@@ -6,29 +6,29 @@ import { MockComponent } from 'ng-mocks';
 import { Subject } from 'rxjs';
 import { mockAuth } from 'app/core/testing/utils/mock-auth.utils';
 import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
-import { ChainedRef } from 'app/modules/slide-ins/chained-component-ref';
-import { ModalHeader2Component } from 'app/modules/slide-ins/components/modal-header2/modal-header2.component';
+import { ModalHeaderComponent } from 'app/modules/slide-ins/components/modal-header/modal-header.component';
+import { SlideInRef } from 'app/modules/slide-ins/slide-in-ref';
 import { CloudBackupFormComponent } from 'app/pages/data-protection/cloud-backup/cloud-backup-form/cloud-backup-form.component';
 import { CloudSyncWizardComponent } from 'app/pages/data-protection/cloudsync/cloudsync-wizard/cloudsync-wizard.component';
-import { ChainedComponentResponse, ChainedComponentSerialized, ChainedSlideInService } from 'app/services/chained-slide-in.service';
+import { SlideInResponse, ComponentSerialized, SlideIn } from 'app/services/slide-in';
 
 describe('ModalHeader2Component', () => {
-  let spectator: Spectator<ModalHeader2Component>;
-  const components$ = new Subject<ChainedComponentSerialized[]>();
-  const closeSubject$ = new Subject<ChainedComponentResponse>();
-  const backSubject$ = new Subject<ChainedComponentResponse>();
+  let spectator: Spectator<ModalHeaderComponent>;
+  const components$ = new Subject<ComponentSerialized[]>();
+  const closeSubject$ = new Subject<SlideInResponse>();
+  const backSubject$ = new Subject<SlideInResponse>();
   let loader: HarnessLoader;
   const createComponent = createComponentFactory({
-    component: ModalHeader2Component,
+    component: ModalHeaderComponent,
     declarations: [
       MockComponent(CloudSyncWizardComponent),
     ],
     providers: [
       mockAuth(),
-      mockProvider(ChainedSlideInService, {
+      mockProvider(SlideIn, {
         components$,
       }),
-      mockProvider(ChainedRef, {
+      mockProvider(SlideInRef, {
         close: jest.fn(),
         getData: jest.fn(() => undefined),
         swap: jest.fn(),
@@ -54,7 +54,7 @@ describe('ModalHeader2Component', () => {
   it('shows a working close button when only 1 component is in the queue', async () => {
     const closeButton = await loader.getHarness(MatButtonHarness.with({ selector: '#ix-close-icon' }));
     await closeButton.click();
-    expect(spectator.inject(ChainedRef).close).toHaveBeenCalledWith({ response: false, error: null });
+    expect(spectator.inject(SlideInRef).close).toHaveBeenCalledWith({ response: false, error: null });
     const icon = spectator.query(IxIconComponent);
     expect(icon.name()).toBe('cancel');
   });
@@ -72,11 +72,11 @@ describe('ModalHeader2Component', () => {
       close$: backSubject$,
       data: undefined,
       wide: false,
-    }] as ChainedComponentSerialized[]);
+    }] as ComponentSerialized[]);
     spectator.detectChanges();
     const closeButton = await loader.getHarness(MatButtonHarness.with({ selector: '#ix-close-icon' }));
     await closeButton.click();
-    expect(spectator.inject(ChainedRef).close).toHaveBeenCalledWith({ response: false, error: null });
+    expect(spectator.inject(SlideInRef).close).toHaveBeenCalledWith({ response: false, error: null });
     const icon = spectator.query(IxIconComponent);
     expect(icon.name()).toBe('mdi-chevron-left');
   });