RED-8882 - Help Mode design improvements

src/lib/empty-state/empty-state.component.ts

@@ -3,7 +3,6 @@ import { IconButtonComponent, IconButtonTypes } from '../buttons';
 import { randomString } from '../utils';
 import { NgIf, NgStyle } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
-import { IqserHelpModeModule } from '../help-mode';
 
 @Component({
     selector: 'iqser-empty-state [text]',
@@ -11,7 +10,7 @@ import { IqserHelpModeModule } from '../help-mode';
     styleUrls: ['./empty-state.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [NgStyle, MatIconModule, NgIf, IconButtonComponent, IqserHelpModeModule],
+    imports: [NgStyle, MatIconModule, NgIf, IconButtonComponent],
 })
 export class EmptyStateComponent implements OnInit {
     readonly iconButtonTypes = IconButtonTypes;

src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.html

@@ -7,5 +7,5 @@
             {{ 'help-mode.options.do-not-show-again' | translate }}
         </mat-checkbox>
     </div>
-    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
+    <iqser-circle-button class="dialog-close" icon="iqser:close" (action)="close()"></iqser-circle-button>
 </section>

src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.ts

@@ -1,40 +1,43 @@
 import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
-import { IqserDialogComponent } from '../../dialog';
+import { BaseDialogComponent } from '../../dialog';
+import { MatDialogRef } from '@angular/material/dialog';
 
 const HIGHER_CDK_OVERLAY_CONTAINER_ZINDEX = '1200';
 const DEFAULT_CDK_OVERLAY_CONTAINER_ZINDEX = '800';
 
-interface HelpModeDialogData {}
-interface HelpModeDialogResult {}
-
 @Component({
     templateUrl: './help-mode-dialog.component.html',
     styleUrls: ['./help-mode-dialog.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HelpModeDialogComponent
+export class HelpModeDialogComponent extends BaseDialogComponent implements OnInit, OnDestroy {
-    extends IqserDialogComponent<HelpModeDialogComponent, HelpModeDialogData, HelpModeDialogResult>
-    implements OnInit, OnDestroy
-{
     protected doNotShowAgainOption = false;
 
-    constructor() {
+    constructor(protected readonly _dialogRef: MatDialogRef<HelpModeDialogComponent>) {
-        super();
+        super(_dialogRef);
     }
 
     ngOnInit(): void {
-        this.#setCdkOverlayContainerZIndex(HIGHER_CDK_OVERLAY_CONTAINER_ZINDEX);
+        this._setCdkOverlayContainerZIndex(HIGHER_CDK_OVERLAY_CONTAINER_ZINDEX);
     }
 
     ngOnDestroy(): void {
-        this.#setCdkOverlayContainerZIndex(DEFAULT_CDK_OVERLAY_CONTAINER_ZINDEX);
+        this._setCdkOverlayContainerZIndex(DEFAULT_CDK_OVERLAY_CONTAINER_ZINDEX);
     }
 
     setDoNotShowAgainOption(checked: boolean): void {
         this.doNotShowAgainOption = checked;
     }
 
-    #setCdkOverlayContainerZIndex(zIndex: string): void {
+    save() {
+        this.close();
+    }
+
+    close() {
+        return this._dialogRef.close(this.doNotShowAgainOption);
+    }
+
+    private _setCdkOverlayContainerZIndex(zIndex: string): void {
         const cdkOverlayContainer = document.querySelector<HTMLElement>('.cdk-overlay-container');
         if (cdkOverlayContainer) {
             cdkOverlayContainer.style.zIndex = zIndex;

src/lib/help-mode/help-mode.module.ts

@@ -1,22 +1,22 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
-import { HelpModeDialogComponent } from './help-mode-dialog/help-mode-dialog.component';
 import { HelpModeComponent } from './help-mode/help-mode.component';
 import { HelpButtonComponent } from './help-button/help-button.component';
 import { HelpModeKey, HelpModeService } from './help-mode.service';
-import { MatDialogModule } from '@angular/material/dialog';
 import { CircleButtonComponent } from '../buttons';
 import { HELP_MODE_KEYS } from './tokens';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
 import { MatIcon } from '@angular/material/icon';
 import { MatCheckbox } from '@angular/material/checkbox';
+import { HelpModeDialogComponent } from './help-mode-dialog/help-mode-dialog.component';
+import { MatDialogClose } from '@angular/material/dialog';
 
-const components = [HelpModeComponent, HelpModeDialogComponent, HelpButtonComponent];
+const components = [HelpModeComponent, HelpButtonComponent, HelpModeDialogComponent];
 
 @NgModule({
     declarations: [...components],
-    imports: [CommonModule, MatDialogModule, TranslateModule, CircleButtonComponent, MatSlideToggle, MatIcon, MatCheckbox],
+    imports: [CommonModule, TranslateModule, CircleButtonComponent, MatSlideToggle, MatIcon, MatCheckbox, MatDialogClose],
     exports: [...components],
 })
 export class IqserHelpModeModule {

src/lib/help-mode/help-mode.service.ts

@@ -1,5 +1,4 @@
 import { Inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
-import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { TranslateService } from '@ngx-translate/core';
 import { BehaviorSubject, firstValueFrom } from 'rxjs';
 import { HelpModeDialogComponent } from './help-mode-dialog/help-mode-dialog.component';
@@ -18,7 +17,8 @@ import {
     WEB_VIEWER_ELEMENTS,
 } from './utils/constants';
 import { getConfig } from '../services';
-import { IqserDialog } from '../dialog';
+import { UserPreferenceService } from '../../../../../apps/red-ui/src/app/users/user-preference.service';
+import { MatDialog } from '@angular/material/dialog';
 
 export interface Helper {
     readonly element: HTMLElement;
@@ -51,9 +51,10 @@ export class HelpModeService {
     constructor(
         @Inject(HELP_MODE_KEYS) private readonly _keys: HelpModeKey[],
         @Inject(MANUAL_BASE_URL) private readonly _manualBaseURL: string,
-        private readonly _iqserDialog: IqserDialog,
+        private readonly _dialog: MatDialog,
         private readonly _rendererFactory: RendererFactory2,
         private readonly _translateService: TranslateService,
+        private readonly _userPreferencesService: UserPreferenceService,
     ) {
         this.#renderer = this._rendererFactory.createRenderer(null, null);
     }
@@ -66,16 +67,21 @@ export class HelpModeService {
         return this.#helpModeDialogIsOpened$.getValue();
     }
 
-    openHelpModeDialog() {
+    async openHelpModeDialog() {
-        this.#helpModeDialogIsOpened$.next(true);
+        if (!this._userPreferencesService.getHelpModeDialog()) {
+            this.#helpModeDialogIsOpened$.next(true);
 
-        this._iqserDialog.open(HelpModeDialogComponent, {
+            const ref = this._dialog.open(HelpModeDialogComponent, {
-            width: '600px',
+                width: '600px',
-        });
+            });
 
-        // firstValueFrom(ref.afterClosed()).then(() => {
+            firstValueFrom(ref.afterClosed()).then(result => {
-        //     this.#helpModeDialogIsOpened$.next(false);
+                this.#helpModeDialogIsOpened$.next(false);
-        // });
+                if (result) {
+                    this._userPreferencesService.toggleHelpModeDialog();
+                }
+            });
+        }
     }
 
     activateHelpMode(dialogMode: boolean = false): void {