feat(iot-hub): add unpublished preview badge to item detail dialog

ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-actions.service.ts

@@ -40,12 +40,12 @@ export class IotHubActionsService {
   ) {}
 
   openItemDetail(item: MpItemVersionView, installedItem?: IotHubInstalledItem, installedItemsCount?: number,
-                 mode?: IotHubItemDetailDialogMode, showCreator?: boolean): Observable<any> {
+                 mode?: IotHubItemDetailDialogMode, showCreator?: boolean, preview?: boolean): Observable<any> {
     return this.dialog.open(TbIotHubItemDetailDialogComponent, {
       panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
       disableClose: true,
       autoFocus: false,
-      data: { item, installedItem, installedItemsCount, mode, showCreator } as IotHubItemDetailDialogData
+      data: { item, installedItem, installedItemsCount, mode, showCreator, preview } as IotHubItemDetailDialogData
     }).afterClosed();
   }
 

ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.html

@@ -40,6 +40,13 @@
           <mat-icon class="dlg-subtitle-icon">update</mat-icon>
           <span>v {{ item.version }}</span>
         </span>
+        @if (preview) {
+          <span class="dlg-dot"></span>
+          <span class="dlg-subtitle-group tb-unpublished-preview-badge">
+            <mat-icon class="dlg-subtitle-icon">warning</mat-icon>
+            <span>{{ 'iot-hub.unpublished-preview' | translate }}</span>
+          </span>
+        }
         @if (item.publishedTime) {
           <span class="dlg-dot"></span>
           <span class="dlg-subtitle-group">

ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.scss

@@ -767,3 +767,12 @@
     padding-right: 48px;
   }
 }
+
+.dlg-subtitle-group.tb-unpublished-preview-badge {
+  color: #d32f2f;
+  font-weight: 600;
+
+  .dlg-subtitle-icon {
+    color: #d32f2f;
+  }
+}

ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.ts

@@ -39,6 +39,7 @@ export interface IotHubItemDetailDialogData {
   installedItemsCount?: number;
   mode?: IotHubItemDetailDialogMode;
   showCreator?: boolean;
+  preview?: boolean;
 }
 
 @Component({
@@ -53,6 +54,7 @@ export class TbIotHubItemDetailDialogComponent extends DialogComponent<TbIotHubI
   item: MpItemVersionView;
   mode: IotHubItemDetailDialogMode;
   showCreator: boolean;
+  preview: boolean;
   typeTranslations = itemTypeTranslations;
   readmeContent: string = '';
   installedItem?: IotHubInstalledItem;
@@ -74,6 +76,7 @@ export class TbIotHubItemDetailDialogComponent extends DialogComponent<TbIotHubI
     this.item = data.item;
     this.mode = data.mode || 'default';
     this.showCreator = data.showCreator !== false;
+    this.preview = data.preview === true;
     this.installedItem = data.installedItem;
     this.installedItemsCount = data.installedItemsCount || 0;
     this.buildCarouselImages();