Merge pull request ceph#60626 from ivoalmeida/carbon-version-update

mgr/dashboard: update carbon-components-angular

Reviewed-by: Afreen Misbah <[email protected]>

Author: nizamial09

src/pybind/mgr/dashboard/frontend/package-lock.json

@@ -64,7 +64,7 @@
     "@types/file-saver": "2.0.1",
     "async-mutex": "0.2.4",
     "bootstrap": "5.2.3",
-    "carbon-components-angular": "5.25.1",
+    "carbon-components-angular": "5.48.0",
     "chart.js": "4.4.0",
     "chartjs-adapter-moment": "1.0.1",
     "detect-browser": "5.2.0",

src/pybind/mgr/dashboard/frontend/package.json

@@ -1,4 +1,12 @@
-import { Component, Inject, OnDestroy, OnInit, Optional } from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  Inject,
+  OnDestroy,
+  OnInit,
+  Optional
+} from '@angular/core';
 import { UntypedFormControl, UntypedFormGroup, ValidatorFn, Validators } from '@angular/forms';
 
 import { BaseModal } from 'carbon-components-angular';
@@ -17,7 +25,9 @@ import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
   templateUrl: './bootstrap-create-modal.component.html',
   styleUrls: ['./bootstrap-create-modal.component.scss']
 })
-export class BootstrapCreateModalComponent extends BaseModal implements OnDestroy, OnInit {
+export class BootstrapCreateModalComponent
+  extends BaseModal
+  implements OnDestroy, OnInit, AfterViewInit {
   pools: any[] = [];
   token: string;
 
@@ -28,13 +38,18 @@ export class BootstrapCreateModalComponent extends BaseModal implements OnDestro
   constructor(
     private rbdMirroringService: RbdMirroringService,
     private taskWrapper: TaskWrapperService,
+    private changeDetectorRef: ChangeDetectorRef,
 
     @Inject('siteName') @Optional() public siteName?: string
   ) {
     super();
     this.createForm();
   }
 
+  ngAfterViewInit(): void {
+    this.changeDetectorRef.detectChanges();
+  }
+
   createForm() {
     this.createBootstrapForm = new CdFormGroup({
       siteName: new UntypedFormControl('', {

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/bootstrap-create-modal/bootstrap-create-modal.component.ts

@@ -1,4 +1,11 @@
-import { Component, Inject, OnInit, Optional } from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  Inject,
+  OnInit,
+  Optional
+} from '@angular/core';
 import { FormControl, Validators } from '@angular/forms';
 import { OperatorFunction, Observable, of } from 'rxjs';
 import { debounceTime, distinctUntilChanged, switchMap, catchError } from 'rxjs/operators';
@@ -19,7 +26,7 @@ const DEBOUNCE_TIMER = 300;
   templateUrl: './cephfs-auth-modal.component.html',
   styleUrls: ['./cephfs-auth-modal.component.scss']
 })
-export class CephfsAuthModalComponent extends CdForm implements OnInit {
+export class CephfsAuthModalComponent extends CdForm implements OnInit, AfterViewInit {
   subvolumeGroup: string;
   subvolume: string;
   isDefaultSubvolumeGroup = false;
@@ -58,6 +65,7 @@ export class CephfsAuthModalComponent extends CdForm implements OnInit {
     private cephfsService: CephfsService,
     private taskWrapper: TaskWrapperService,
     private modalService: ModalCdsService,
+    private changeDetectorRef: ChangeDetectorRef,
 
     @Optional() @Inject('fsName') public fsName: string,
     @Optional() @Inject('id') public id: number
@@ -67,6 +75,10 @@ export class CephfsAuthModalComponent extends CdForm implements OnInit {
     this.resource = $localize`access`;
   }
 
+  ngAfterViewInit(): void {
+    this.changeDetectorRef.detectChanges();
+  }
+
   ngOnInit() {
     this.directoryStore.loadDirectories(this.id, '/', 3);
     this.createForm();

src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-auth-modal/cephfs-auth-modal.component.ts

@@ -167,7 +167,7 @@ export class PoolFormComponent extends CdForm implements OnInit {
             CdValidators.custom(
               'required',
               (rule: CrushRule) =>
-                this.isReplicated && this.info.crush_rules_replicated.length > 0 && !rule
+                this.isReplicated && this.info?.crush_rules_replicated?.length > 0 && !rule
             )
           ]
         }),

src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.ts

@@ -1,6 +1,6 @@
 <div class="table-scroller">
   <cd-table #table
-            [data]="tableData"
+            [data]="tableData || []"
             [columns]="columns"
             columnMode="flex"
             [toolHeader]="false"

src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.html

@@ -897,7 +897,7 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr
 
     if (this.limit === 0) {
       this.model.currentPage = 1;
-      this.model.pageLength = filteredData.length;
+      this.model.pageLength = filteredData.length || 1;
       this._dataset.next(filteredData);
       return;
     }