@if syntax refactorings

frontend/src/app/modules/core/components/ms-dialog/component/ms-dialog.component.html

@@ -16,7 +16,8 @@
 -->
 
 <div class="dialog-wrapper" [ngStyle]="data.width | dialogSizeStyles: data.height">
-	<div class="dialog-header" *ngIf="data.showHeader">
+	@if (data.showHeader) {
+	<div class="dialog-header">
 		<ng-container *ngTemplateOutlet="headerTemplate || defaultDialogHeader"></ng-container>
 		<ng-template #defaultDialogHeader>
 			<div class="dialog-header-wrapper">
@@ -29,12 +30,14 @@
 			</div>
 		</ng-template>
 	</div>
+	}
 
 	<div class="dialog-content">
 		<ng-content></ng-content>
 	</div>
 
-	<div class="dialog-actions" *ngIf="data.showFooter">
+	@if (data.showFooter) {
+	<div class="dialog-actions">
 		<ng-container *ngTemplateOutlet="actionsTemplate || defaultDialogActions"></ng-container>
 		<ng-template #defaultDialogActions>
 			<div class="actions-wrapper">
@@ -50,4 +53,5 @@
 			</div>
 		</ng-template>
 	</div>
+	}
 </div>

frontend/src/app/modules/shared/components/ms-terminal/components/ms-terminal-messages-history-dialog/ms-terminal-messages-history-dialog.component.html

@@ -22,14 +22,12 @@
 					<mat-label>Search</mat-label>
 					<mat-form-field subscriptSizing="dynamic">
 						<input matInput [formControl]="searchFormControl" placeholder="Search terminal messages" />
-						<mat-icon
-							matSuffix
-							*ngIf="searchFormControl.value"
-							(click)="disposeSearch()"
-							class="mat-error scale-on-hover"
-							>close</mat-icon
-						>
-						<mat-icon matSuffix *ngIf="!searchFormControl.value" class="mat-primary">search</mat-icon>
+
+						@if (searchFormControl.value) {
+						<mat-icon matSuffix (click)="disposeSearch()" class="mat-error scale-on-hover"> close </mat-icon>
+						} @else {
+						<mat-icon matSuffix class="mat-primary">search</mat-icon>
+						}
 					</mat-form-field>
 				</div>
 			</div>

frontend/src/app/modules/shared/directives/ms-tooltip-panel/component/ms-tooltip-panel.component.html

@@ -1,17 +1,34 @@
+<!-- Copyright 2024 Cisco Systems, Inc. and its affiliates
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+-->
+
 <div class="tooltip-container" [ngClass]="position" [@tooltipState]="state">
 	<div class="tooltip-arrow"></div>
 
 	<div class="tooltip-wrapper">
-		<ng-container *ngIf="contentTemplate">
-			<div class="tooltip-content">
-				<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
-			</div>
-		</ng-container>
-
-		<div *ngIf="showCloseButton" class="close-button">
+		@if (contentTemplate) {
+		<div class="tooltip-content">
+			<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
+		</div>
+		} @if (showCloseButton) {
+		<div class="close-button">
 			<button mat-icon-button (click)="triggerClose()">
 				<mat-icon fontSet="ms" fontIcon="icon-X" class="mat-error size-20"></mat-icon>
 			</button>
 		</div>
+		}
 	</div>
 </div>