409764406: (feat) changes to show next tip step on first time user flow

modules/ui/src/app/app.component.html

@@ -233,7 +233,6 @@ <h1 class="main-heading">Testrun</h1>
   <div class="tips-container">
     <app-help-tip
       *ngIf="hasConnectionSettings === false"
-      [class.closed-tip]="isClosedTip"
       [data]="HelpTips.step1"
       [target]="settingTipTarget"
       (onCLoseTip)="onCLoseTip($event)"
@@ -246,7 +245,6 @@ <h1 class="main-heading">Testrun</h1>
           (!!calloutState.get('outdated_devices_callout') &&
             isAllDevicesOutdated))
       "
-      [class.closed-tip]="isClosedTip"
       [data]="HelpTips.step2"
       [target]="deviceTipTarget"
       (onCLoseTip)="onCLoseTip($event)"
@@ -261,7 +259,6 @@ <h1 class="main-heading">Testrun</h1>
         !reports.length &&
         !isAllDevicesOutdated
       "
-      [class.closed-tip]="isClosedTip"
       [data]="HelpTips.step3"
       [target]="testingTipTarget"
       (onCLoseTip)="onCLoseTip($event)"
@@ -274,7 +271,6 @@ <h1 class="main-heading">Testrun</h1>
         hasRiskProfiles === false &&
         systemStatus === StatusOfTestrun.InProgress
       "
-      [class.closed-tip]="isClosedTip"
       [data]="HelpTips.step4"
       [target]="riskAssessmentTipTarget"
       (onCLoseTip)="onCLoseTip($event)"

modules/ui/src/app/app.component.spec.ts

@@ -515,6 +515,34 @@ describe('AppComponent', () => {
           expect(router.url).toBe(Routes.Testing);
         }));
       });
+
+      it('should add "closed-tip" class to the tip on click "close" button on tip', fakeAsync(() => {
+        const helpTipEl = compiled.querySelector('app-help-tip') as HTMLElement;
+        const helpTipCloseBtn = compiled.querySelector(
+          'app-help-tip .close-button'
+        ) as HTMLButtonElement;
+
+        helpTipCloseBtn.click();
+        tick(100);
+
+        expect(helpTipEl.classList.contains('closed-tip')).toBeTrue();
+      }));
+
+      it('should remove "closed-tip" class from the tip on click toolbar "help tips" button', fakeAsync(() => {
+        const helpTipEl = compiled.querySelector('app-help-tip') as HTMLElement;
+        helpTipEl.classList.add('closed-tip');
+        const helpTipsBtn = compiled.querySelector(
+          '.app-toolbar-button-help-tips'
+        ) as HTMLButtonElement;
+
+        helpTipsBtn.click();
+        tick(100);
+
+        expect(
+          mockFocusManagerService.focusFirstElementInContainer
+        ).toHaveBeenCalledWith(helpTipEl);
+        expect(helpTipEl.classList.contains('closed-tip')).toBeFalse();
+      }));
     });
 
     describe('with devices set and systemStatus data', () => {

modules/ui/src/app/app.component.ts

@@ -136,6 +136,7 @@ export class AppComponent implements AfterViewInit {
   private cdr = inject(ChangeDetectorRef);
   appStore = inject(AppStore);
   private renderer = inject(Renderer2);
+  private el = inject(ElementRef);
 
   public readonly CalloutType = CalloutType;
   public readonly StatusOfTestrun = StatusOfTestrun;
@@ -298,11 +299,14 @@ export class AppComponent implements AfterViewInit {
     const helpTipButton = window.document.querySelector(
       '.app-toolbar-button-help-tips'
     ) as HTMLButtonElement;
-    const helpTipEl = window.document.querySelector('app-help-tip');
+    const helpTipEl = this.el.nativeElement.querySelector('app-help-tip');
+
     timer(100).subscribe(() => {
       if (isClosed) {
+        this.renderer.addClass(helpTipEl, 'closed-tip');
         helpTipButton.focus();
       } else {
+        this.renderer.removeClass(helpTipEl, 'closed-tip');
         this.focusManagerService.focusFirstElementInContainer(helpTipEl);
       }
     });