Show included changesets in Named version table

common/changes/@itwin/manage-versions-react/Pooja-show-included-changeset-in-named-versions-table_2023-11-06-12-10.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/manage-versions-react",
+      "comment": "Show included changesets in Named versions table on expand rows",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@itwin/manage-versions-react"
+}

packages/modules/manage-versions/src/clients/urlBuilder.ts

@@ -7,10 +7,13 @@ export class UrlBuilder {
     skip?: number;
     top?: number;
     orderBy?: string;
+    lastIndex?: number;
   }) => {
     const query = Object.entries(params)
       .filter(([key, value]) => !!value)
-      .map(([key, value]) => `$${key}=${value}`)
+      .map(([key, value]) =>
+        key === "lastIndex" ? `${key}=${value}` : `$${key}=${value}`
+      )
       .join("&");
     return query ? `?${query}` : "";
   };

packages/modules/manage-versions/src/components/ManageVersions/ManageVersions.test.tsx

@@ -71,6 +71,7 @@ describe("ManageVersions", () => {
       expect(cells.length).toBe(5);
       expect(cells[0].textContent).toContain(MockedVersion(index).name);
       expect(cells[1].textContent).toContain(MockedVersion(index).description);
+
       expect(cells[2].textContent).toContain(MockedVersion(index).createdBy);
       expect(cells[3].textContent).toContain(
         new Date(MockedVersion(index).createdDateTime).toLocaleString()
@@ -135,9 +136,6 @@ describe("ManageVersions", () => {
     );
 
     screen.getByText(defaultStrings.changes).click();
-    await waitForElementToBeRemoved(() =>
-      container.querySelector(".iui-progress-indicator-radial")
-    );
 
     expect(mockGetVersions).toHaveBeenCalledTimes(1);
     expect(mockGetChangesets).toHaveBeenCalledTimes(1);
@@ -237,9 +235,6 @@ describe("ManageVersions", () => {
     expect(mockCreateVersion).toHaveBeenCalled();
 
     screen.getByText(defaultStrings.changes).click();
-    await waitForElementToBeRemoved(() =>
-      container.querySelector(".iui-progress-indicator-radial")
-    );
 
     expect(mockGetChangesets).toHaveBeenCalledTimes(2);
   });

packages/modules/manage-versions/src/components/ManageVersions/ManageVersions.tsx

@@ -12,6 +12,7 @@ import {
   Changeset,
   informationPanelDefaultStrings,
   NamedVersion,
+  VersionTableData,
 } from "../../models";
 import ChangesTab from "./ChangesTab/ChangesTab";
 import {
@@ -87,6 +88,62 @@ export enum ManageVersionsTabs {
 const NAMED_VERSION_TOP = 100;
 const CHANGESET_TOP = 100;
 
+const initialChangeset: Changeset = {
+  id: "",
+  index: 0,
+  displayName: "",
+  description: "",
+  pushDateTime: "",
+  synchronizationInfo: { changedFiles: [] },
+  _links: {},
+  creatorId: "",
+  createdBy: "",
+  application: { id: "", name: "" },
+};
+
+const initializeVersionTableData = (
+  versions: NamedVersion[],
+  versionTableData?: VersionTableData[]
+): VersionTableData[] => {
+  return (versions ?? []).map((version, index) => {
+    const existingData = versionTableData?.[index];
+    const defaultSubRows = existingData?.subRows ?? [initialChangeset];
+    const subRowsLoaded = existingData?.subRowsLoaded ?? false;
+    return { version, subRows: defaultSubRows, subRowsLoaded };
+  });
+};
+
+const updateNamedVersionsProperties = (
+  versionsToUpdate: NamedVersion[],
+  users: { [key: string]: string } | undefined
+) => {
+  if (!versionsToUpdate.length) {
+    return;
+  }
+  return versionsToUpdate.map((newVersion) => {
+    const creatorId = newVersion._links.creator.href.substring(
+      newVersion._links.creator.href.lastIndexOf("/") + 1
+    );
+    return {
+      ...newVersion,
+      createdBy: users?.[creatorId] ?? "",
+    };
+  });
+};
+
+const updateChangesetsProperties = (
+  changesetsToUpdate: Changeset[],
+  users: { [key: string]: string } | undefined
+) => {
+  if (!changesetsToUpdate.length) {
+    return;
+  }
+  return changesetsToUpdate.map((changeSet) => ({
+    ...changeSet,
+    createdBy: users?.[changeSet.creatorId] ?? "",
+  }));
+};
+
 export const ManageVersions = (props: ManageVersionsProps) => {
   const {
     accessToken,
@@ -134,13 +191,14 @@ export const ManageVersions = (props: ManageVersionsProps) => {
       return acc;
     }, {} as { [key: string]: string });
     usersRef.current = userMapData;
-  }, []);
+  }, [changesetClient, imodelId]);
 
   React.useEffect(() => {
     setCurrentTab(currentTab);
   }, [currentTab]);
 
-  const [versions, setVersions] = React.useState<NamedVersion[]>();
+  const [versionsTableData, setVersionsTableData] =
+    React.useState<VersionTableData[]>();
   const [versionStatus, setVersionStatus] = React.useState(
     RequestStatus.NotStarted
   );
@@ -167,63 +225,56 @@ export const ManageVersions = (props: ManageVersionsProps) => {
           skip,
         })
         .then((newVersions) => {
-          setVersionStatus(RequestStatus.Finished);
-          setVersions((oldVersions) => [
-            ...(oldVersions ?? []),
-            ...newVersions,
+          const updateVersions = updateNamedVersionsProperties(
+            newVersions,
+            usersRef.current
+          );
+          setVersionsTableData((oldVersions) => [
+            ...initializeVersionTableData(updateVersions ?? [], oldVersions),
           ]);
-          updateNamedVersionsProperties(newVersions);
+          setVersionStatus(RequestStatus.Finished);
         })
         .catch(() => setVersionStatus(RequestStatus.Failed));
     },
     [imodelId, versionClient]
   );
 
   const getMoreVersions = React.useCallback(() => {
-    if (versions && versions.length % NAMED_VERSION_TOP !== 0) {
+    if (
+      versionsTableData &&
+      versionsTableData.length % NAMED_VERSION_TOP !== 0
+    ) {
       return;
     }
 
-    getVersions(versions?.length);
-  }, [getVersions, versions]);
-
-  const refreshVersions = React.useCallback(() => {
-    setVersions(undefined);
-    getVersions();
-  }, [getVersions]);
+    getVersions(versionsTableData?.length);
+  }, [getVersions, versionsTableData]);
 
-  const updateNamedVersionsProperties = (versionsToUpdate: NamedVersion[]) => {
-    if (!versionsToUpdate.length) {
+  const getChangesets = React.useCallback(() => {
+    if (changesets && changesets.length % CHANGESET_TOP !== 0) {
       return;
     }
-    const updatedNamedVersion = versionsToUpdate.map((newVersion) => {
-      const creatorId = newVersion._links.creator.href.substring(
-        newVersion._links.creator.href.lastIndexOf("/") + 1
-      );
-      return {
-        ...newVersion,
-        createdBy: usersRef.current?.[creatorId] ?? "",
-      };
-    });
-    setVersions(updatedNamedVersion);
-  };
 
-  const updateChangesetsProperties = (changesetsToUpdate: Changeset[]) => {
-    if (!changesetsToUpdate.length) {
-      return;
-    }
-    const updatedChangeset = changesetsToUpdate.map((changeSet) => ({
-      ...changeSet,
-      createdBy: usersRef.current?.[changeSet.creatorId] ?? "",
-    }));
-    setChangesets(updatedChangeset);
-  };
+    setChangesetStatus(RequestStatus.InProgress);
+    changesetClient
+      .get(imodelId, {
+        top: CHANGESET_TOP,
+        skip: changesets?.length,
+      })
+      .then((newChangesets) => {
+        setChangesets([
+          ...(changesets ?? []),
+          ...(updateChangesetsProperties(newChangesets, usersRef.current) ??
+            []),
+        ]);
+        setChangesetStatus(RequestStatus.Finished);
+      })
+      .catch(() => setChangesetStatus(RequestStatus.Failed));
+  }, [changesets, changesetClient, imodelId]);
 
-  React.useEffect(() => {
-    if (versionStatus === RequestStatus.NotStarted) {
-      getVersions();
-    }
-  }, [getVersions, versionStatus]);
+  const refreshVersions = React.useCallback(() => {
+    getVersions();
+  }, [getVersions]);
 
   React.useEffect(() => {
     const loadUsers = async () => {
@@ -232,33 +283,37 @@ export const ManageVersions = (props: ManageVersionsProps) => {
     if (!usersRef.current) {
       loadUsers()
         .then(() => {
-          updateNamedVersionsProperties(versions ?? []);
-          updateChangesetsProperties(changesets ?? []);
+          const updatedVersionsTableData = versionsTableData?.map((td) => {
+            const updatedVersion = updateNamedVersionsProperties(
+              [td.version] ?? [],
+              usersRef.current
+            );
+            return {
+              ...td,
+              version: updatedVersion ? updatedVersion[0] : td.version,
+            };
+          });
+          setVersionsTableData(updatedVersionsTableData);
+          setChangesets((prevChangesets) => [
+            ...(updateChangesetsProperties(
+              changesets ?? [],
+              usersRef.current
+            ) ??
+              prevChangesets ??
+              []),
+          ]);
         })
         .catch(() => {
-          console.error("unable to fetch users data");
+          console.error("Unable to fetch users data");
         });
     }
-  }, [changesets, getUsers, versions]);
+  }, [changesets, getUsers, versionsTableData]);
 
-  const getChangesets = React.useCallback(() => {
-    if (changesets && changesets.length % CHANGESET_TOP !== 0) {
-      return;
+  React.useEffect(() => {
+    if (versionStatus === RequestStatus.NotStarted) {
+      getVersions();
     }
-
-    setChangesetStatus(RequestStatus.InProgress);
-    changesetClient
-      .get(imodelId, {
-        top: CHANGESET_TOP,
-        skip: changesets?.length,
-      })
-      .then((newChangesets) => {
-        setChangesetStatus(RequestStatus.Finished);
-        setChangesets([...(changesets ?? []), ...newChangesets]);
-        updateChangesetsProperties(newChangesets);
-      })
-      .catch(() => setChangesetStatus(RequestStatus.Failed));
-  }, [changesetClient, changesets, imodelId]);
+  }, [getVersions, versionStatus]);
 
   React.useEffect(() => {
     if (
@@ -278,15 +333,28 @@ export const ManageVersions = (props: ManageVersionsProps) => {
 
   const latestVersion = React.useMemo(
     () =>
-      [...(versions ?? [])].sort((v1, v2) =>
-        new Date(v1.createdDateTime).valueOf() <
-        new Date(v2.createdDateTime).valueOf()
+      [...(versionsTableData ?? [])].sort((v1, v2) =>
+        new Date(v1.version.createdDateTime).valueOf() <
+        new Date(v2.version.createdDateTime).valueOf()
           ? 1
           : -1
       )[0],
-    [versions]
+    [versionsTableData]
   );
 
+  const setRelatedChangesets = (versionId: string, changesets: Changeset[]) => {
+    const updateChangesets =
+      updateChangesetsProperties(changesets, usersRef.current) ?? [];
+    setVersionsTableData((prevVersionsTableData) => {
+      const updatedVersions = prevVersionsTableData?.map((version) =>
+        version.version.id === versionId
+          ? { ...version, subRows: updateChangesets, subRowsLoaded: true }
+          : version
+      );
+      return updatedVersions ?? prevVersionsTableData;
+    });
+  };
+
   return (
     <ThemeProvider theme="inherit">
       <ConfigProvider
@@ -305,11 +373,13 @@ export const ManageVersions = (props: ManageVersionsProps) => {
           />
           {_currentTab === ManageVersionsTabs.Versions && (
             <VersionsTab
-              versions={versions ?? []}
               status={versionStatus}
               onVersionUpdated={refreshVersions}
               loadMoreVersions={getMoreVersions}
               onViewClick={onViewClick}
+              tableData={versionsTableData ?? []}
+              changesetClient={changesetClient}
+              setRelatedChangesets={setRelatedChangesets}
             />
           )}
           {_currentTab === ManageVersionsTabs.Changes && (
@@ -318,7 +388,7 @@ export const ManageVersions = (props: ManageVersionsProps) => {
               status={changesetStatus}
               loadMoreChanges={getChangesets}
               onVersionCreated={onVersionCreated}
-              latestVersion={latestVersion}
+              latestVersion={latestVersion?.version}
             />
           )}
         </div>

packages/modules/manage-versions/src/components/ManageVersions/VersionsTab/VersionsTab.scss

@@ -7,4 +7,4 @@
   .iui-table-body .iui-table-cell {
     word-break: break-word;
   }
-}
+}