fix certificate display list issue (#2815)

* fix cert list display

* update model-list-view

---------

Co-authored-by: hoppe <hoppewang@microsoft.com>

Author: wanghoppe

packages/react/src/components/certificate/certificate-list.tsx

@@ -29,6 +29,7 @@ export const CertificateList = observer((props: CertificateListProps) => {
                 { prop: "stateTransitionTime", label: "Last Updated" },
             ]}
             items={view.items}
+            hasMore={view.loading}
         />
     );
 });

packages/react/src/components/certificate/certificate-page.tsx

@@ -19,6 +19,14 @@ export const CertificatePage = observer(() => {
         new CertificateListView(new CertificateService())
     );
 
+    const onCertificateSelected = React.useCallback(
+        (_, index) => {
+            certListView.clearSelection();
+            certListView.selectByIndex(index);
+        },
+        [certListView]
+    );
+
     useAsyncEffect(async () => {
         await certListView.load();
     }, [certListView]);
@@ -27,10 +35,7 @@ export const CertificatePage = observer(() => {
         <Stack tokens={{ childrenGap: 16 }}>
             <CertificateList
                 view={certListView}
-                onCertificateSelected={(_, index) => {
-                    certListView.clearSelection();
-                    certListView.selectByIndex(index);
-                }}
+                onCertificateSelected={onCertificateSelected}
             />
             <DisplayPane
                 title="Certificates"

packages/service/src/certificate/certificate-list-view.ts

@@ -1,6 +1,6 @@
 import { DependencyName, getEnvironment, getLogger } from "@azure/bonito-core";
 import { MockHttpClient, MockHttpResponse } from "@azure/bonito-core/lib/http";
-import { action, IObservableArray, makeObservable, observable } from "mobx";
+import { action, makeObservable, observable, runInAction } from "mobx";
 import { AbstractModelListView, SelectableListView } from "../view";
 import { Certificate } from "./certificate-models";
 import type { CertificateService } from "./certificate-service";
@@ -12,27 +12,18 @@ export class CertificateListView
     extends AbstractModelListView<CertificateService, Certificate>
     implements SelectableListView<Certificate>
 {
-    @observable selectedItems: IObservableArray<Certificate>;
+    @observable selectedItems: Certificate[] = [];
     @observable batchAccount: string;
 
     private _logger = getLogger("CertificateListView");
 
     constructor(service: CertificateService, models: Certificate[] = []) {
         super(service, models);
-        this.selectedItems = observable([]);
         // TODO: Get Batch account either from the URL or the context
         this.batchAccount = "prodtest1";
         makeObservable(this);
     }
 
-    @action
-    update(items: Certificate[]): void {
-        this.clear();
-        for (const cert of items) {
-            this.items.push(cert);
-        }
-    }
-
     firstSelection(): Certificate | null {
         if (this.selectedItems.length > 0) {
             return this.selectedItems[0];
@@ -51,13 +42,14 @@ export class CertificateListView
 
     @action
     clearSelection(): void {
-        this.selectedItems.clear();
+        this.selectedItems = [];
     }
 
     /**
      * Gets new models from the service and updates the model list
      */
     async load(): Promise<void> {
+        this.loading = true;
         // KLUDGE: Mock out the call to list certificates until HTTP auth is supported
         const httpClient: MockHttpClient = getEnvironment().getInjectable(
             DependencyName.HttpClient
@@ -100,8 +92,15 @@ export class CertificateListView
                 }),
             })
         );
-
-        const result = await this.service.listAll();
-        this.update(result.models);
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+        try {
+            const result = await this.service.listAll();
+            runInAction(() => {
+                this.loading = false;
+                this.items = result.models;
+            });
+        } finally {
+            this.loading = false;
+        }
     }
 }

packages/service/src/view/model-list-view.ts

@@ -1,15 +1,14 @@
-import { action, computed, IObservableArray, observable } from "mobx";
+import { action, computed, observable } from "mobx";
 import { View } from "./view";
 
 export interface ModelListView<S, T> extends View {
     readonly service: S;
-    readonly items: IObservableArray<T>;
+    readonly items: T[];
     length: number;
-    update(items: T[]): void;
 }
 
 export interface SelectableListView<T> {
-    readonly selectedItems: IObservableArray<T>;
+    readonly selectedItems: T[];
     selectByIndex(index: number): void;
     clearSelection(): void;
 }
@@ -19,8 +18,8 @@ export abstract class AbstractModelListView<S, T>
 {
     readonly service: S;
 
-    @observable items: IObservableArray<T>;
-    @observable loading: boolean;
+    @observable items: T[] = [];
+    @observable loading: boolean = false;
 
     @computed
     get length(): number {
@@ -29,15 +28,11 @@ export abstract class AbstractModelListView<S, T>
 
     constructor(service: S, items: T[] = []) {
         this.service = service;
-        this.items = observable([]);
-        this.loading = false;
-        this.update(items);
+        this.items = items;
     }
 
     @action
     clear(): void {
-        this.items.clear();
+        this.items = [];
     }
-
-    abstract update(items: T[]): void;
 }