Improve css for accessories component (#16868)

Signed-off-by: AllForNothing <sshijun@vmware.com>

src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html

@@ -713,15 +713,18 @@
                         }}
                     </div>
                 </clr-dg-cell>
-                <sub-accessories
-                    (deleteAccessory)="deleteAccessory($event)"
-                    [projectName]="projectName"
-                    [repositoryName]="repoName"
-                    *ngIf="artifact?.accessories?.length"
-                    [total]="artifact?.accessoryNumber"
-                    [accessories]="artifact?.accessories"
-                    [clrIfExpanded]="false"
-                    ngProjectAs="clr-dg-row-detail"></sub-accessories>
+                <ng-container
+                    ngProjectAs="clr-dg-row-detail"
+                    *ngIf="artifact?.accessories?.length">
+                    <sub-accessories
+                        (deleteAccessory)="deleteAccessory($event)"
+                        [projectName]="projectName"
+                        [repositoryName]="repoName"
+                        [artifactDigest]="artifact?.digest"
+                        [total]="artifact?.accessoryNumber"
+                        [accessories]="artifact?.accessories"
+                        *clrIfExpanded></sub-accessories>
+                </ng-container>
             </clr-dg-row>
             <clr-dg-footer>
                 <clr-dg-pagination

src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.html

@@ -1,4 +1,8 @@
-<clr-datagrid class="ml-8" (clrDgRefresh)="clrLoad()" [clrDgLoading]="loading">
+<clr-datagrid
+    #datagrid
+    class="ml-8"
+    (clrDgRefresh)="clrLoad()"
+    [clrDgLoading]="loading">
     <clr-dg-column>{{ 'ACCESSORY.ACCESSORY' | translate }}</clr-dg-column>
     <clr-dg-column>{{ 'PROJECT.TYPE' | translate }}</clr-dg-column>
     <clr-dg-column>{{ 'REPOSITORY.SIZE' | translate }}</clr-dg-column>
@@ -14,7 +18,7 @@
         <clr-dg-cell class="relative">
             <hr
                 class="y-dash-line"
-                *ngIf="i === displayedAccessories?.length - 1"
+                *ngIf="i === displayedAccessories?.length - 1 && viewInit"
                 [style.height.px]="dashLineHeight" />
             <hr class="x-dash-line" />
             <div class="cell">

src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.spec.ts

@@ -85,7 +85,7 @@ describe('SubAccessoriesComponent', () => {
         component = fixture.componentInstance;
         component.accessories = mockedAccessories;
         component.total = 6;
-        fixture.detectChanges();
+        fixture.autoDetectChanges();
     });
     it('should create', () => {
         expect(component).toBeTruthy();

src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.ts

@@ -1,4 +1,11 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+    ViewChild,
+} from '@angular/core';
 import {
     clone,
     dbEncodeURIComponent,
@@ -16,6 +23,7 @@ import { finalize } from 'rxjs/operators';
 import { SafeUrl } from '@angular/platform-browser';
 import { ArtifactService } from '../../../../artifact.service';
 import { AccessoryQueryParams, artifactDefault } from '../../../../artifact';
+import { ClrDatagrid } from '@clr/angular';
 
 export const ACCESSORY_PAGE_SIZE: number = 5;
 
@@ -42,7 +50,9 @@ export class SubAccessoriesComponent implements OnInit {
     page: number = 1;
     displayedAccessories: Accessory[] = [];
     loading: boolean = false;
-
+    @ViewChild('datagrid')
+    datagrid: ClrDatagrid;
+    viewInit: boolean = false;
     constructor(
         private activatedRoute: ActivatedRoute,
         private router: Router,
@@ -53,8 +63,11 @@ export class SubAccessoriesComponent implements OnInit {
 
     ngOnInit(): void {
         this.displayedAccessories = clone(this.accessories);
+        // avoid ng checking error
+        setTimeout(() => {
+            this.viewInit = true;
+        });
     }
-
     size(size: number) {
         return formatSize(size.toString());
     }
@@ -104,7 +117,7 @@ export class SubAccessoriesComponent implements OnInit {
             projectName: this.projectName,
             repositoryName: dbEncodeURIComponent(this.repositoryName),
             reference: this.artifactDigest,
-            page: 1,
+            page: this.currentPage,
             pageSize: ACCESSORY_PAGE_SIZE,
         };
         this.newArtifactService
@@ -127,7 +140,13 @@ export class SubAccessoriesComponent implements OnInit {
     }
 
     get dashLineHeight() {
-        // fixed height 27 plus each row height 40
-        return 27 + this.displayedAccessories?.length * 40;
+        if (
+            this.datagrid &&
+            this.datagrid['el'] &&
+            this.datagrid['el']?.nativeElement?.offsetHeight
+        ) {
+            return this.datagrid['el'].nativeElement?.offsetHeight;
+        }
+        return 0;
     }
 }