Naron/nv table loading

.changeset/eighty-apples-care.md

@@ -0,0 +1,5 @@
+---
+"@itwin/changed-elements-react": patch
+---
+
+Nvtable persists when loading comparison

.gitignore

@@ -13,3 +13,4 @@ pnpm-debug.log*
 .env.*
 
 packages/test-app-frontend/dist/
+.DS_Store

packages/changed-elements-react/src/NamedVersionSelector/NamedVersionSelector.tsx

@@ -26,7 +26,7 @@ import {
   runManagerStartComparisonV2
 } from "../widgets/comparisonJobWidget/common/versionCompareV2WidgetUtils.js";
 import { IconEx } from "./IconEx.js";
-import { namedVersionSelectorContext } from "./NamedVersionSelectorContext.js";
+import { NamedVersionSelectorContentContext, NamedVersionSelectorContentProps, namedVersionSelectorContext } from "./NamedVersionSelectorContext.js";
 import { Sticky } from "./Sticky.js";
 import { TextEx } from "./TextEx.js";
 import { useComparisonJobs } from "./useComparisonJobs.js";
@@ -61,8 +61,10 @@ export function NamedVersionSelectorWidget(props: Readonly<NamedVersionSelectorW
 
   const { iModel, emptyState, manageVersions, feedbackUrl } = props;
 
+  const [targetgVersion, setTargetVersion] = useState<NamedVersion>();
   const [isComparing, setIsComparing] = useState(manager.isComparing);
   const [isComparisonStarted, setIsComparisonStarted] = useState(manager.isComparisonReady);
+
   useEffect(
     () => {
       const cleanup = [
@@ -86,20 +88,51 @@ export function NamedVersionSelectorWidget(props: Readonly<NamedVersionSelectorW
     [manager],
   );
 
+  const { iModelsClient, comparisonJobClient } = useVersionCompare();
+  if (!comparisonJobClient) {
+    throw new Error("V2 Client is not initialized in given context.");
+  }
+
+  const iTwinId = iModel.iTwinId as string;
+  const iModelId = iModel.iModelId as string;
+  const currentChangesetId = iModel.changeset.id;
+
+  const { isLoading, currentNamedVersion, entries, updateJobStatus } = useNamedVersionsList({
+    iTwinId,
+    iModelId,
+    currentChangesetId,
+  });
+
   const widgetRef = useRef<ChangedElementsWidget>(null);
 
-  if (!isComparing) {
-    return (
-      <NamedVersionSelector
-        iModel={iModel}
-        manager={manager}
-        emptyState={emptyState}
-        manageVersions={manageVersions}
-        feedbackUrl={feedbackUrl}
-        documentationHref = {props.documentationHref}
-      />
-    );
-  }
+  const onNamedVersionOpened = async (targetVersion?: NamedVersionEntry) => {
+    setTargetVersion(targetVersion?.namedVersion);
+    if (!targetVersion || !currentNamedVersion || targetVersion.job?.status !== "Completed") {
+      return;
+    }
+
+    await runManagerStartComparisonV2({
+      comparisonJob: {
+        comparisonJob: {
+          status: "Completed",
+          jobId: targetVersion.job.jobId,
+          iTwinId,
+          iModelId,
+          startChangesetId: currentChangesetId,
+          endChangesetId: targetVersion.namedVersion.targetChangesetId ?? "",
+          comparison: {
+            href: targetVersion.job.comparisonUrl,
+          },
+        },
+      },
+      comparisonJobClient,
+      iModelConnection: iModel,
+      targetVersion: targetVersion.namedVersion,
+      currentVersion: currentNamedVersion,
+      getToastsEnabled: () => true,
+      iModelsClient,
+    });
+  };
 
   return (
     <Widget>
@@ -110,6 +143,13 @@ export function NamedVersionSelectorWidget(props: Readonly<NamedVersionSelectorW
         <TextEx variant="title">
           {t("VersionCompare:versionCompare.versionPickerTitle")}
         </TextEx>
+
+        {
+          !isComparisonStarted &&
+          <ChangedElementsHeaderButtons documentationHref={props.documentationHref} onlyInfo />
+        }
+
+        {isComparisonStarted &&
         <div>
           <ChangedElementsHeaderButtons
             useNewNamedVersionSelector
@@ -122,22 +162,52 @@ export function NamedVersionSelectorWidget(props: Readonly<NamedVersionSelectorW
             }
             documentationHref={props.documentationHref}
           />
-        </div>
+        </div>}
+
       </Widget.Header>
-      <namedVersionSelectorContext.Consumer>
-        {(value) => (
-          <namedVersionSelectorContext.Provider value={{ ...value, contextExists: true }}>
-            {props.manager?.currentVersion && isComparisonStarted &&
-              <ActiveVersionsBox current={props.manager?.currentVersion} selected={props.manager?.targetVersion}></ActiveVersionsBox>}
-            <ChangedElementsWidget
-              ref={widgetRef}
-              iModelConnection={iModel}
-              manager={manager}
-              usingExperimentalSelector
-            />
-          </namedVersionSelectorContext.Provider>
-        )}
-      </namedVersionSelectorContext.Consumer>
+      {
+        currentNamedVersion &&
+        <ActiveVersionsBox current={currentNamedVersion} selected={targetgVersion}></ActiveVersionsBox>
+      }
+
+      {
+        !isComparing &&
+        <NamedVersionSelectorContentContext.Provider
+          value={{
+            iTwinId,
+            iModelId,
+            isLoading,
+            currentNamedVersion,
+            entries,
+            updateJobStatus,
+            onNamedVersionOpened,
+            emptyState,
+            manageVersions,
+          }}
+        >
+            <NamedVersionSelectorContent />
+            <div className="_cer_v1_feedback_btn_container">
+              {feedbackUrl && <FeedbackButton feedbackUrl={feedbackUrl} />}
+            </div>
+        </NamedVersionSelectorContentContext.Provider>
+      }
+
+      {
+        isComparing &&
+        <namedVersionSelectorContext.Consumer>
+          {(value) => (
+            <namedVersionSelectorContext.Provider value={{ ...value, contextExists: true }}>
+              <ChangedElementsWidget
+                ref={widgetRef}
+                iModelConnection={iModel}
+                manager={manager}
+                usingExperimentalSelector
+              />
+            </namedVersionSelectorContext.Provider>
+          )}
+        </namedVersionSelectorContext.Consumer>
+      }
+
     </Widget>
   );
 }
@@ -160,137 +230,24 @@ function LoadingState(): ReactElement {
   );
 }
 
-
-type LoadedStateProps = Omit<NamedVersionSelectorContentProps, "isLoading" | "currentNamedVersion"> & { currentNamedVersion: NamedVersion; };
-
-function LoadedState(props: Readonly<LoadedStateProps>): ReactElement {
-  return (
-    <NamedVersionSelectorLoaded
-      {...props}
-    />
-  );
-}
-
-type NamedVersionSelectorContentProps = {
-  isLoading: boolean;
-  entries: NamedVersionEntry[];
-  currentNamedVersion: NamedVersion | undefined;
-  iTwinId: string;
-  iModelId: string;
-  onNamedVersionOpened: (version: NamedVersionEntry) => void;
-  updateJobStatus: ReturnType<typeof useNamedVersionsList>["updateJobStatus"];
-  emptyState?: ReactNode;
-  manageVersions?: ReactNode;
-};
-
-function NamedVersionSelectorContent(
-  props: Readonly<NamedVersionSelectorContentProps>,
-): ReactElement {
-  if (!props.isLoading && props.entries.length === 0) {
+function NamedVersionSelectorContent(): ReactElement {
+  const { isLoading, currentNamedVersion, ...restProps } = useContext(NamedVersionSelectorContentContext);
+  if (!isLoading && restProps.entries.length === 0) {
     return <EmptyState />;
   }
 
-  if (!props.currentNamedVersion || (props.isLoading && props.entries.length === 0)) {
+  if (!currentNamedVersion || (isLoading && restProps.entries.length === 0)) {
     return <LoadingState />;
   }
 
   return (
-    <LoadedState
-      {...{ ...props, currentNamedVersion: props.currentNamedVersion }}
+   <NamedVersionSelectorLoaded
+    {...restProps}
+    currentNamedVersion={currentNamedVersion}
     />
   );
 }
 
-interface NamedVersionSelectorProps {
-  iModel: IModelConnection;
-  manager: VersionCompareManager;
-  emptyState?: ReactNode;
-  manageVersions?: ReactNode;
-  feedbackUrl?: string;
-  documentationHref?: string;
-}
-
-function NamedVersionSelector(props: Readonly<NamedVersionSelectorProps>): ReactElement {
-  const { iModelsClient, comparisonJobClient } = useVersionCompare();
-  if (!comparisonJobClient) {
-    throw new Error("V2 Client is not initialized in given context.");
-  }
-
-  const { iModel, manager, emptyState, manageVersions, feedbackUrl } = props;
-
-  const iTwinId = iModel.iTwinId as string;
-  const iModelId = iModel.iModelId as string;
-  const currentChangesetId = iModel.changeset.id;
-
-  const { isLoading, currentNamedVersion, entries, updateJobStatus } = useNamedVersionsList({
-    iTwinId,
-    iModelId,
-    currentChangesetId,
-  });
-
-  const [openedVersion, setOpenedVersion] = useState(manager.targetVersion);
-  const onNamedVersionOpened = async (targetVersion?: NamedVersionEntry) => {
-    setOpenedVersion(targetVersion?.namedVersion);
-    if (!targetVersion || !currentNamedVersion || targetVersion.job?.status !== "Completed") {
-      return;
-    }
-
-    await runManagerStartComparisonV2({
-      comparisonJob: {
-        comparisonJob: {
-          status: "Completed",
-          jobId: targetVersion.job.jobId,
-          iTwinId,
-          iModelId,
-          startChangesetId: currentChangesetId,
-          endChangesetId: targetVersion.namedVersion.targetChangesetId ?? "",
-          comparison: {
-            href: targetVersion.job.comparisonUrl,
-          },
-        },
-      },
-      comparisonJobClient,
-      iModelConnection: iModel,
-      targetVersion: targetVersion.namedVersion,
-      currentVersion: currentNamedVersion,
-      getToastsEnabled: () => true,
-      iModelsClient,
-    });
-    manager.versionCompareStopped.addOnce(() => setOpenedVersion(undefined));
-  };
-
-  const namedVersionSelectorProps: Readonly<NamedVersionSelectorContentProps> = {
-    isLoading,
-    currentNamedVersion,
-    entries,
-    iTwinId,
-    iModelId,
-    onNamedVersionOpened,
-    updateJobStatus,
-    emptyState,
-    manageVersions,
-  };
-
-  return (
-    <Widget>
-      <Widget.Header>
-        <TextEx variant="title">
-          {t("VersionCompare:versionCompare.versionPickerTitle")}
-        </TextEx>
-        {currentNamedVersion && <ChangedElementsHeaderButtons documentationHref={props.documentationHref} onlyInfo />}
-      </Widget.Header>
-      {
-        currentNamedVersion &&
-        <ActiveVersionsBox current={currentNamedVersion} selected={openedVersion} />
-      }
-      <NamedVersionSelectorContent {...namedVersionSelectorProps} />
-      <div className="_cer_v1_feedback_btn_container">
-        {feedbackUrl && <FeedbackButton feedbackUrl={feedbackUrl} />}
-      </div>
-    </Widget>
-  );
-}
-
 interface WidgetProps {
   children?: ReactNode;
 }
@@ -394,18 +351,9 @@ function PlaceholderNamedVersionInfo(): ReactElement {
   );
 }
 
-interface NamedVersionSelectorLoadedProps {
-  iTwinId: string;
-  iModelId: string;
-  currentNamedVersion: NamedVersion;
-  entries: NamedVersionEntry[];
-  updateJobStatus: ReturnType<typeof useNamedVersionsList>["updateJobStatus"];
-  onNamedVersionOpened: (version: NamedVersionEntry) => void;
-  emptyState?: ReactNode;
-  manageVersions?: ReactNode;
-}
+type LoadedStateProps = Omit<NamedVersionSelectorContentProps, "isLoading" | "currentNamedVersion"> & { currentNamedVersion: NamedVersion; };
 
-function NamedVersionSelectorLoaded(props: Readonly<NamedVersionSelectorLoadedProps>): ReactElement {
+function NamedVersionSelectorLoaded(props: LoadedStateProps): ReactElement {
   const {
     iTwinId,
     iModelId,
@@ -518,7 +466,7 @@ function NamedVersionSelectorLoaded(props: Readonly<NamedVersionSelectorLoadedPr
         value={{ processResults, viewResults, initialLoad, checkStatus }}
       >
         {
-          props.entries.map((entry) => (
+          entries.map((entry) => (
             <NamedVersionListEntry key={entry.namedVersion.id} entry={entry} />
           ))
         }

packages/changed-elements-react/src/NamedVersionSelector/NamedVersionSelectorContext.tsx

@@ -2,9 +2,10 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-import { createContext } from "react";
+import { createContext, ReactNode } from "react";
 
-import type { NamedVersionEntry } from "./useNamedVersionsList.js";
+import type { NamedVersionEntry, useNamedVersionsList } from "./useNamedVersionsList.js";
+import { NamedVersion } from "../clients/iModelsClient.js";
 
 export interface NamedVersionSelectorContextValue {
   /** Invoked when users request Named Version processinig. */
@@ -42,3 +43,19 @@ export const namedVersionSelectorContext = createContext<NamedVersionSelectorCon
   checkStatus: () => ({ cancel: () => { } }),
   contextExists: false,
 });
+
+export type NamedVersionSelectorContentProps = {
+  isLoading: boolean;
+  entries: NamedVersionEntry[];
+  currentNamedVersion: NamedVersion | undefined;
+  iTwinId: string;
+  iModelId: string;
+  onNamedVersionOpened: (version: NamedVersionEntry) => void;
+  updateJobStatus: ReturnType<typeof useNamedVersionsList>["updateJobStatus"];
+  emptyState?: ReactNode;
+  manageVersions?: ReactNode;
+};
+
+export const NamedVersionSelectorContentContext = createContext<NamedVersionSelectorContentProps>(
+  {} as NamedVersionSelectorContentProps,
+)

packages/changed-elements-react/src/VersionCompareContext.tsx

@@ -57,3 +57,4 @@ export interface VersionCompareContextValue {
 }
 
 const versionCompareContext = createContext<VersionCompareContextValue | undefined>(undefined);
+