NAS-132667 / 25.04 / Come up with a reusable component for master-detail view

src/app/modules/master-detail-view/master-detail-view.component.html

@@ -1,16 +1,37 @@
-<ng-content select="[header]"></ng-content>
-
 <div class="container">
   <div class="table-container">
     <ng-content select="[master]"></ng-content>
   </div>
 
-  <div
-    ixDetailsHeight
-    class="details-container"
-    [class.details-container-mobile]="showMobileDetails()"
-  >
-    <ng-content select="[detail]"></ng-content>
+  <div>
+    @if (itemDetailName(); as detailName) {
+      <div class="header">
+        <h3 class="title">
+          <div class="mobile-prefix">
+            <ix-mobile-back-button
+              (onClose)="toggleShowMobileDetails(false)"
+            ></ix-mobile-back-button>
+            {{ 'Details for' | translate }}
+          </div>
+
+          <span class="prefix">
+            {{ 'Details for' | translate }}
+          </span>
+
+          <span class="name">
+            {{ detailName }}
+          </span>
+        </h3>
+      </div>
+    }
+
+    <div
+      ixDetailsHeight
+      class="details-container"
+      [class.details-container-mobile]="showMobileDetails()"
+    >
+      <ng-content select="[detail]"></ng-content>
+    </div>
   </div>
 </div>
 

src/app/modules/master-detail-view/master-detail-view.component.scss

@@ -1,8 +1,83 @@
 @import 'scss-imports/variables';
 @import 'mixins/layout';
+@import 'mixins/cards';
 
 :host {
   &::ng-deep {
     @include tree-node-with-details-container;
+
+    .cards {
+      @include details-cards();
+
+      @media (max-width: $breakpoint-tablet) {
+        overflow: hidden;
+      }
+
+      .card {
+        @include details-card();
+        margin: 0;
+      }
+    }
+  }
+}
+
+.header {
+  color: var(--fg1);
+
+  @media (max-width: calc($breakpoint-hidden - 1px)) {
+    border-bottom: solid 1px var(--lines);
+    margin: 0 16px 16px 0;
+  }
+}
+
+.title {
+  align-items: center;
+  color: var(--fg2);
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+  margin-top: 20px;
+  min-height: 36px;
+
+  @media (max-width: $breakpoint-tablet) {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: unset;
+    max-width: 100%;
+    width: 100%;
+  }
+
+  @media (max-width: calc($breakpoint-hidden - 1px)) {
+    margin-top: 0;
+  }
+
+  .mobile-prefix {
+    align-items: center;
+    display: none;
+
+    @media (max-width: $breakpoint-hidden) {
+      display: flex;
+      max-width: 50%;
+      opacity: 0.85;
+    }
+
+    @media (max-width: $breakpoint-tablet) {
+      max-width: 100%;
+      width: 100%;
+    }
+  }
+
+  .prefix {
+    display: inline;
+
+    @media (max-width: $breakpoint-hidden) {
+      display: none;
+    }
+  }
+
+  .name {
+    @media (max-width: $breakpoint-tablet) {
+      margin-left: 40px;
+    }
   }
 }

src/app/modules/master-detail-view/master-detail-view.component.ts

@@ -6,11 +6,14 @@ import {
   signal,
   ChangeDetectorRef,
   Inject,
+  input,
 } from '@angular/core';
 import { NavigationStart, Router } from '@angular/router';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { TranslateModule } from '@ngx-translate/core';
 import { filter } from 'rxjs';
 import { DetailsHeightDirective } from 'app/directives/details-height/details-height.directive';
+import { MobileBackButtonComponent } from 'app/modules/buttons/mobile-back-button/mobile-back-button.component';
 import { FocusService } from 'app/services/focus.service';
 
 @UntilDestroy()
@@ -22,10 +25,13 @@ import { FocusService } from 'app/services/focus.service';
   standalone: true,
   imports: [
     DetailsHeightDirective,
+    MobileBackButtonComponent,
+    TranslateModule,
   ],
   exportAs: 'masterDetailViewContext',
 })
 export class MasterDetailViewComponent implements AfterViewInit {
+  readonly itemDetailName = input<string>(null);
   readonly showMobileDetails = signal<boolean>(false);
   readonly isMobileView = signal<boolean>(false);
 

src/app/pages/virtualization/components/all-instances/all-instances.component.html

@@ -1,10 +1,11 @@
+<ix-page-header>
+  <ix-all-instances-header></ix-all-instances-header>
+</ix-page-header>
+
 <ix-master-detail-view
   #masterDetailView="masterDetailViewContext"
+  [itemDetailName]="selectedInstance()?.name"
 >
-  <ix-page-header header>
-    <ix-all-instances-header></ix-all-instances-header>
-  </ix-page-header>
-
   <ix-instance-list
     master
     [isMobileView]="masterDetailView.isMobileView()"

src/app/pages/virtualization/components/all-instances/instance-details/instance-details.component.html

@@ -1,22 +1,3 @@
-<div class="header">
-  <h3 class="title">
-    <div class="mobile-prefix">
-      <ix-mobile-back-button
-        (onClose)="onCloseMobileDetails.emit()"
-      ></ix-mobile-back-button>
-      {{ 'Details for' | translate }}
-    </div>
-
-    <span class="prefix">
-      {{ 'Details for' | translate }}
-    </span>
-
-    <span class="name">
-      {{ instance().name }}
-    </span>
-  </h3>
-</div>
-
 <div class="cards">
   <div class="scroll-window">
     <ix-instance-general-info [instance]="instance()"></ix-instance-general-info>

src/app/pages/virtualization/components/all-instances/instance-details/instance-details.component.ts

@@ -4,7 +4,6 @@ import {
 } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { VirtualizationInstance } from 'app/interfaces/virtualization.interface';
-import { MobileBackButtonComponent } from 'app/modules/buttons/mobile-back-button/mobile-back-button.component';
 import {
   InstanceDevicesComponent,
 } from 'app/pages/virtualization/components/all-instances/instance-details/instance-devices/instance-devices.component';
@@ -25,7 +24,6 @@ import {
 @Component({
   selector: 'ix-instance-details',
   templateUrl: './instance-details.component.html',
-  styleUrls: ['./instance-details.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
@@ -36,7 +34,6 @@ import {
     InstanceDisksComponent,
     InstanceToolsComponent,
     InstanceMetricsComponent,
-    MobileBackButtonComponent,
   ],
 })
 export class InstanceDetailsComponent {