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

[AlexKarpov98]

Testing:
see ticket.

I used slots for presentational logic:

<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>
</div>

So in instances we need to define expected slots:

<ix-master-detail-view
  #masterDetailView="masterDetailViewContext"
>
  <ix-page-header header>
    <ix-all-instances-header></ix-all-instances-header>
  </ix-page-header>

  <ix-instance-list
    master
    [isMobileView]="masterDetailView.isMobileView()"
    [showMobileDetails]="masterDetailView.showMobileDetails()"
    (toggleShowMobileDetails)="masterDetailView.toggleShowMobileDetails($event)"
  ></ix-instance-list>

  <ng-container detail>
    @if (selectedInstance()) {
      <ix-instance-details
        [instance]="selectedInstance()"
        (onCloseMobileDetails)="masterDetailView.toggleShowMobileDetails(false)"
      ></ix-instance-details>
    }
  </ng-container>
</ix-master-detail-view>

Additional fixes/improvements:

❗
-- fixed [ixDetailsHeight] directive. (I noticed it was jumpy. Visually it was pretty glitchy because scrollbar was added to the main wrapper container and after a fraction of a second it was removed because details container received height which instead put the scrollbar on the details container itself)

-- Fixed Instances selection (previously we double clicked the table row to view instance details)

[bugclerk]

Jira URL: https://ixsystems.atlassian.net/browse/NAS-132667

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 82.34%. Comparing base (7ad0021) to head (1fd209c).
Report is 2 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master   #11096   +/-   ##
=======================================
  Coverage   82.34%   82.34%           
=======================================
  Files        1643     1644    +1     
  Lines       57484    57530   +46     
  Branches     5930     5936    +6     
=======================================
+ Hits        47333    47373   +40     
- Misses      10151    10157    +6     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[undsoft]

Looks nice and works well.

When I wrote about having a tag for a header, I meant the header in details view. The idea was to try to hide the whole mobile business, so that developer that consumes this component does not have to care about mobile back button.

E.g. something similar to this:

<ix-page-header header>
  <ix-all-instances-header></ix-all-instances-header>
</ix-page-header>

<ix-master-detail-view
  #masterDetailView="masterDetailViewContext"
>

  <ix-instance-list master></ix-instance-list>

  <ng-container detail>
    @if (selectedInstance()) {
      <div detailHeader>
        <!-- detailHeader renders mobile-back-button and wires communication with masterDetailView -->
        <!-- custom html is also possible for icons on Datasets page -->
        {{ 'Details for {name}' | translate: { name: selectedInstance().name } }}
      </div>

      <ix-instance-details
        [instance]="selectedInstance()"
      ></ix-instance-details>
    }
  </ng-container>
</ix-master-detail-view>

[undsoft]

I don't think page header needs to be part of this directive.

[AlexKarpov98]

ah, yeah, I got you.
Thanks, I'll fix that.

[bugclerk]

This PR has been merged and conversations have been locked.
If you would like to discuss more about this issue please use our forums or raise a Jira ticket.