NAS-132784: Get rid of appLet directive (#11123)

truenas · Dec 3, 2024 · fe3a66b · fe3a66b
1 parent a394d87
commit fe3a66b
Show file tree

Hide file tree

Showing 18 changed files with 80 additions and 142 deletions.
diff --git a/src/app/directives/app-let.directive.ts b/src/app/directives/app-let.directive.ts
diff --git a/src/app/modules/alerts/components/alerts-panel/alerts-panel.component.html b/src/app/modules/alerts/components/alerts-panel/alerts-panel.component.html
@@ -55,57 +55,57 @@ <h4 class="message">
       </h4>
     </div>
   }
-  <div *appLet="unreadAlerts$ | async as unreadAlerts">
-    @if (!unreadAlerts.length) {
-      <div class="no-alerts">
-        <ix-icon class="icon" name="info"></ix-icon>
-        <h4 class="message">{{ 'There are no alerts.' | translate }}</h4>
-      </div>
-    } @else {
-      <div class="alert-list unread-alerts">
-        @for (alert of unreadAlerts; track alert.id; let last = $last) {
-          <div
-            class="alert"
-            role="listitem"
-            [class.alert-last]="last"
-          >
-            <ix-alert [alert]="alert" [isHaLicensed]="isHaLicensed"></ix-alert>
-          </div>
-        }
-      </div>
-      <button
-        *ixRequiresRoles="requiredRoles"
-        matRipple
-        class="button-row"
-        ixTest="dismiss-all-alerts"
-        (click)="onDismissAll()"
-      >
-        {{ 'Dismiss All Alerts' | translate }}
-      </button>
-    }
-  </div>
-  <div *appLet="dismissedAlerts$ | async as dismissedAlerts">
-    @if (dismissedAlerts.length) {
-      <div class="alert-list dismissed-alerts">
-        @for (alert of dismissedAlerts; track alert.id; let last = $last) {
-          <div
-            class="alert"
-            role="listitem"
-            [class.alert-last]="last"
-          >
-            <ix-alert [alert]="alert" [isHaLicensed]="isHaLicensed"></ix-alert>
-          </div>
-        }
-      </div>
-      <button
-        *ixRequiresRoles="requiredRoles"
-        class="button-row"
-        matRipple
-        ixTest="reopen-all-alerts"
-        (click)="onReopenAll()"
-      >
-        {{ 'Re-Open All Alerts' | translate }}
-      </button>
-    }
-  </div>
+
+  @let unreadAlerts = unreadAlerts$ | async;
+  @if (!unreadAlerts.length) {
+    <div class="no-alerts">
+      <ix-icon class="icon" name="info"></ix-icon>
+      <h4 class="message">{{ 'There are no alerts.' | translate }}</h4>
+    </div>
+  } @else {
+    <div class="alert-list unread-alerts">
+      @for (alert of unreadAlerts; track alert.id; let last = $last) {
+        <div
+          class="alert"
+          role="listitem"
+          [class.alert-last]="last"
+        >
+          <ix-alert [alert]="alert" [isHaLicensed]="isHaLicensed"></ix-alert>
+        </div>
+      }
+    </div>
+    <button
+      *ixRequiresRoles="requiredRoles"
+      matRipple
+      class="button-row"
+      ixTest="dismiss-all-alerts"
+      (click)="onDismissAll()"
+    >
+      {{ 'Dismiss All Alerts' | translate }}
+    </button>
+  }
+
+  @let dismissedAlerts = dismissedAlerts$ | async;
+  @if (dismissedAlerts.length) {
+    <div class="alert-list dismissed-alerts">
+      @for (alert of dismissedAlerts; track alert.id; let last = $last) {
+        <div
+          class="alert"
+          role="listitem"
+          [class.alert-last]="last"
+        >
+          <ix-alert [alert]="alert" [isHaLicensed]="isHaLicensed"></ix-alert>
+        </div>
+      }
+    </div>
+    <button
+      *ixRequiresRoles="requiredRoles"
+      class="button-row"
+      matRipple
+      ixTest="reopen-all-alerts"
+      (click)="onReopenAll()"
+    >
+      {{ 'Re-Open All Alerts' | translate }}
+    </button>
+  }
 }
diff --git a/src/app/modules/alerts/components/alerts-panel/alerts-panel.component.spec.ts b/src/app/modules/alerts/components/alerts-panel/alerts-panel.component.spec.ts
@@ -5,7 +5,6 @@ import { MockComponent } from 'ng-mocks';
 import { MockApiService } from 'app/core/testing/classes/mock-api.service';
 import { mockCall, mockApi } from 'app/core/testing/utils/mock-api.utils';
 import { mockAuth } from 'app/core/testing/utils/mock-auth.utils';
-import { LetDirective } from 'app/directives/app-let.directive';
 import { NavigateAndInteractDirective } from 'app/directives/navigate-and-interact/navigate-and-interact.directive';
 import { AlertLevel } from 'app/enums/alert-level.enum';
 import { IncomingApiMessageType } from 'app/enums/api-message-type.enum';
@@ -77,7 +76,6 @@ describe('AlertsPanelComponent', () => {
       }),
       EffectsModule.forRoot([AlertEffects]),
       NavigateAndInteractDirective,
-      LetDirective,
     ],
     declarations: [
       MockComponent(AlertComponent),

diff --git a/src/app/modules/alerts/components/alerts-panel/alerts-panel.component.ts b/src/app/modules/alerts/components/alerts-panel/alerts-panel.component.ts
@@ -11,7 +11,6 @@ import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Store } from '@ngrx/store';
 import { TranslateModule } from '@ngx-translate/core';
 import { map } from 'rxjs/operators';
-import { LetDirective } from 'app/directives/app-let.directive';
 import { NavigateAndInteractDirective } from 'app/directives/navigate-and-interact/navigate-and-interact.directive';
 import { RequiresRolesDirective } from 'app/directives/requires-roles/requires-roles.directive';
 import { Role } from 'app/enums/role.enum';
@@ -48,7 +47,6 @@ import { selectIsHaLicensed } from 'app/store/ha-info/ha-info.selectors';
     MatMenuItem,
     NavigateAndInteractDirective,
     MatProgressBar,
-    LetDirective,
     AlertComponent,
     MatRipple,
     TranslateModule,

diff --git a/src/app/modules/dialog/components/update-dialog/update-dialog.component.html b/src/app/modules/dialog/components/update-dialog/update-dialog.component.html
@@ -6,7 +6,9 @@ <h3 mat-dialog-title class="dialog-title">
     <span [innerHTML]="contentText.message | translate"></span>
   </p>
 </div>
-<div *appLet="selectRunningJobs$ | async as jobs" class="jobs">
+
+@let jobs = selectRunningJobs$ | async;
+<div class="jobs">
   @if (jobs.length) {
     <div>
       @for (job of jobs; track job) {

diff --git a/src/app/modules/dialog/components/update-dialog/update-dialog.component.ts b/src/app/modules/dialog/components/update-dialog/update-dialog.component.ts
@@ -4,7 +4,6 @@ import { MatDialogContent, MatDialogTitle } from '@angular/material/dialog';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { Store } from '@ngrx/store';
 import { TranslateModule } from '@ngx-translate/core';
-import { LetDirective } from 'app/directives/app-let.directive';
 import { JobItemComponent } from 'app/modules/jobs/components/job-item/job-item.component';
 import { JobsState } from 'app/modules/jobs/store/job.reducer';
 import { selectUpdateJob } from 'app/modules/jobs/store/job.selectors';
@@ -21,7 +20,6 @@ import { selectUpdateJob } from 'app/modules/jobs/store/job.selectors';
     MatDialogTitle,
     TranslateModule,
     AsyncPipe,
-    LetDirective,
     JobItemComponent,
   ],
 })

diff --git a/src/app/modules/jobs/components/jobs-panel/jobs-panel.component.html b/src/app/modules/jobs/components/jobs-panel/jobs-panel.component.html
@@ -36,25 +36,24 @@ <h3>{{ 'Running Jobs' | translate }}</h3>
       ></mat-progress-bar>
     </div>
   } @else {
-    <div *appLet="availableJobs$ | async as jobs">
-      @if (jobs.length) {
-        <div class="jobs-list">
-          @for (job of jobs; track job.id) {
-            <ix-job-item
-              [job]="job"
-              [clickable]="true"
-              (aborted)="onAbort(job)"
-              (opened)="openJobDialog(job)"
-            ></ix-job-item>
-          }
-        </div>
-      } @else {
-        <div class="no-jobs">
-          <ix-icon name="info"></ix-icon>
-          <h4 class="message">{{ 'No jobs running.' | translate }}</h4>
-        </div>
-      }
-    </div>
+    @let jobs = availableJobs$ | async;
+    @if (jobs.length) {
+      <div class="jobs-list">
+        @for (job of jobs; track job.id) {
+          <ix-job-item
+            [job]="job"
+            [clickable]="true"
+            (aborted)="onAbort(job)"
+            (opened)="openJobDialog(job)"
+          ></ix-job-item>
+        }
+      </div>
+    } @else {
+      <div class="no-jobs">
+        <ix-icon name="info"></ix-icon>
+        <h4 class="message">{{ 'No jobs running.' | translate }}</h4>
+      </div>
+    }
   }
 
   @if (error$ | async; as error) {

diff --git a/src/app/modules/jobs/components/jobs-panel/jobs-panel.component.spec.ts b/src/app/modules/jobs/components/jobs-panel/jobs-panel.component.spec.ts
@@ -10,7 +10,6 @@ import { Store, StoreModule } from '@ngrx/store';
 import { of } from 'rxjs';
 import { FakeFormatDateTimePipe } from 'app/core/testing/classes/fake-format-datetime.pipe';
 import { mockCall, mockApi } from 'app/core/testing/utils/mock-api.utils';
-import { LetDirective } from 'app/directives/app-let.directive';
 import { JobState } from 'app/enums/job-state.enum';
 import { Job } from 'app/interfaces/job.interface';
 import { DialogService } from 'app/modules/dialog/dialog.service';
@@ -87,7 +86,6 @@ describe('JobsPanelComponent', () => {
         },
       }),
       EffectsModule.forRoot([JobEffects]),
-      LetDirective,
     ],
     declarations: [
       JobItemComponent,

diff --git a/src/app/modules/jobs/components/jobs-panel/jobs-panel.component.ts b/src/app/modules/jobs/components/jobs-panel/jobs-panel.component.ts
@@ -12,7 +12,6 @@ import { Store } from '@ngrx/store';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
-import { LetDirective } from 'app/directives/app-let.directive';
 import { ApiJobMethod, ApiJobResponse } from 'app/interfaces/api/api-job-directory.interface';
 import { Job } from 'app/interfaces/job.interface';
 import { DialogService } from 'app/modules/dialog/dialog.service';
@@ -43,7 +42,6 @@ import { ErrorHandlerService } from 'app/services/error-handler.service';
     MatTooltip,
     IxIconComponent,
     MatProgressBar,
-    LetDirective,
     JobItemComponent,
     MatDialogActions,
     MatButton,

diff --git a/src/app/modules/layout/topbar/jobs-indicator/jobs-indicator.component.html b/src/app/modules/layout/topbar/jobs-indicator/jobs-indicator.component.html
@@ -1,5 +1,5 @@
+@let jobBadgeCount = jobBadgeCount$ | async;
 <button
-  *appLet="jobBadgeCount$ | async as jobBadgeCount"
   matBadgeSize="small"
   matBadgeColor="warn"
   mat-icon-button

diff --git a/src/app/modules/layout/topbar/jobs-indicator/jobs-indicator.component.ts b/src/app/modules/layout/topbar/jobs-indicator/jobs-indicator.component.ts
@@ -8,7 +8,6 @@ import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Store } from '@ngrx/store';
 import { TranslateModule } from '@ngx-translate/core';
 import { filter } from 'rxjs/operators';
-import { LetDirective } from 'app/directives/app-let.directive';
 import { UiSearchDirective } from 'app/directives/ui-search.directive';
 import { helptextTopbar } from 'app/helptext/topbar';
 import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
@@ -34,7 +33,6 @@ import { jobIndicatorPressed } from 'app/store/topbar/topbar.actions';
     IxIconComponent,
     AsyncPipe,
     TranslateModule,
-    LetDirective,
     UiSearchDirective,
     TestDirective,
   ],

diff --git a/src/app/modules/layout/topbar/topbar.component.html b/src/app/modules/layout/topbar/topbar.component.html
@@ -71,8 +71,8 @@
         <ix-jobs-indicator></ix-jobs-indicator>
 
         <!-- Alert toggle button -->
+        @let alertBadgeCount = alertBadgeCount$ | async;
         <button
-          *appLet="alertBadgeCount$ | async as alertBadgeCount"
           matBadgeSize="small"
           matBadgeColor="warn"
           mat-icon-button

diff --git a/src/app/modules/layout/topbar/topbar.component.ts b/src/app/modules/layout/topbar/topbar.component.ts
@@ -14,7 +14,6 @@ import { TranslateModule } from '@ngx-translate/core';
 import {
   filter, Observable, Subscription, switchMap, tap,
 } from 'rxjs';
-import { LetDirective } from 'app/directives/app-let.directive';
 import { UiSearchDirective } from 'app/directives/ui-search.directive';
 import { JobState } from 'app/enums/job-state.enum';
 import { helptextTopbar } from 'app/helptext/topbar';
@@ -74,7 +73,6 @@ import { alertIndicatorPressed, sidenavIndicatorPressed } from 'app/store/topbar
     PowerMenuComponent,
     AsyncPipe,
     TranslateModule,
-    LetDirective,
     UiSearchDirective,
     TestDirective,
     TruecommandButtonComponent,

diff --git a/...app/pages/apps/components/installed-apps/app-bulk-upgrade/app-bulk-upgrade.component.html b/...app/pages/apps/components/installed-apps/app-bulk-upgrade/app-bulk-upgrade.component.html
@@ -36,7 +36,8 @@ <h1 matDialogTitle>{{ 'Upgrade' | translate }}</h1>
           </mat-panel-title>
         </mat-expansion-panel-header>
 
-        <div *appLet="upgradeSummaryMap.get(bulkItem.key) as summary" class="expansion-content">
+        @let summary = upgradeSummaryMap.get(bulkItem.key);
+        <div class="expansion-content">
           @if(isItemExpanded(bulkItem)) {
             <ix-select
               [formControlName]="bulkItem.key"

diff --git a/.../pages/apps/components/installed-apps/app-bulk-upgrade/app-bulk-upgrade.component.spec.ts b/.../pages/apps/components/installed-apps/app-bulk-upgrade/app-bulk-upgrade.component.spec.ts
@@ -9,7 +9,6 @@ import { FakeFormatDateTimePipe } from 'app/core/testing/classes/fake-format-dat
 import { fakeSuccessfulJob } from 'app/core/testing/utils/fake-job.utils';
 import { mockCall, mockJob, mockApi } from 'app/core/testing/utils/mock-api.utils';
 import { mockAuth } from 'app/core/testing/utils/mock-auth.utils';
-import { LetDirective } from 'app/directives/app-let.directive';
 import { AppState } from 'app/enums/app-state.enum';
 import { App } from 'app/interfaces/app.interface';
 import { AppUpgradeSummary } from 'app/interfaces/application.interface';
@@ -80,7 +79,6 @@ describe('AppBulkUpgradeComponent', () => {
     imports: [
       ReactiveFormsModule,
       ImgFallbackModule,
-      LetDirective,
       FakeProgressBarComponent,
     ],
     declarations: [

diff --git a/src/app/pages/apps/components/installed-apps/app-bulk-upgrade/app-bulk-upgrade.component.ts b/src/app/pages/apps/components/installed-apps/app-bulk-upgrade/app-bulk-upgrade.component.ts
@@ -22,7 +22,6 @@ import {
   filter, map, Observable, of, pairwise, startWith,
 } from 'rxjs';
 import { appImagePlaceholder } from 'app/constants/catalog.constants';
-import { LetDirective } from 'app/directives/app-let.directive';
 import { RequiresRolesDirective } from 'app/directives/requires-roles/requires-roles.directive';
 import { Role } from 'app/enums/role.enum';
 import { App, AppUpgradeParams } from 'app/interfaces/app.interface';
@@ -62,7 +61,6 @@ import { ApiService } from 'app/services/websocket/api.service';
     IxSelectComponent,
     RequiresRolesDirective,
     TestDirective,
-    LetDirective,
     MatButton,
   ],
 })

diff --git a/src/app/pages/storage/modules/devices/devices.component.html b/src/app/pages/storage/modules/devices/devices.component.html
@@ -10,10 +10,8 @@
   </a>
 </ix-page-header>
 
-<div
-  *appLet="selectedNode$ | async as selectedNode"
-  class="container"
->
+@let selectedNode = selectedNode$ | async;
+<div class="container">
   <div class="table-container">
     <ix-fake-progress-bar
       class="loader-bar"