[Manage-version] Fixes named version order and date format in table +…

… reload subrows on create version (#112)
iTwin · Dec 15, 2023 · fefc155 · fefc155
1 parent 08af88b
commit fefc155
Show file tree

Hide file tree

Showing 10 changed files with 130 additions and 58 deletions.
diff --git a/...changes/@itwin/manage-versions-react/Pooja-manage-version-bug-fixes_2023-12-07-14-02.json b/...changes/@itwin/manage-versions-react/Pooja-manage-version-bug-fixes_2023-12-07-14-02.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/manage-versions-react",
+      "comment": "Fixes named version order and date format in table + reload subrows on create version",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@itwin/manage-versions-react"
+}
diff --git a/...ersions/src/components/CreateUpdateVersion/CreateVersionModal/CreateVersionModal.test.tsx b/...ersions/src/components/CreateUpdateVersion/CreateVersionModal/CreateVersionModal.test.tsx
@@ -19,7 +19,11 @@ import {
   MockedChangeset,
   MockedVersion,
 } from "../../../mocks";
-import { ApimCodes, ApimError } from "../../../models";
+import {
+  ApimCodes,
+  ApimError,
+  localeDateWithTimeFormat,
+} from "../../../models";
 import {
   CreateVersionModal,
   CreateVersionModalProps,
@@ -60,14 +64,14 @@ describe("CreateVersionModal", () => {
     expect(changesetInfo.length).toBe(2);
     expect(changesetInfo[0].textContent).toEqual(`#${MockedChangeset().index}`);
     expect(changesetInfo[1].textContent).toEqual(
-      new Date(MockedChangeset().pushDateTime).toLocaleString()
+      localeDateWithTimeFormat(new Date(MockedChangeset().pushDateTime))
     );
 
     const latestVersionInfo = additionalInfos[1].querySelectorAll("span");
     expect(latestVersionInfo.length).toBe(2);
     expect(latestVersionInfo[0].textContent).toEqual(MockedVersion().name);
     expect(latestVersionInfo[1].textContent).toEqual(
-      new Date(MockedVersion().createdDateTime).toLocaleString()
+      localeDateWithTimeFormat(new Date(MockedVersion().createdDateTime))
     );
   });
 

diff --git a/...age-versions/src/components/CreateUpdateVersion/CreateVersionModal/CreateVersionModal.tsx b/...age-versions/src/components/CreateUpdateVersion/CreateVersionModal/CreateVersionModal.tsx
@@ -9,7 +9,13 @@ import React from "react";
 
 import { NamedVersionClient } from "../../../clients/namedVersionClient";
 import { useConfig } from "../../../common/configContext";
-import { ApimCodes, ApimError, Changeset, NamedVersion } from "../../../models";
+import {
+  ApimCodes,
+  ApimError,
+  Changeset,
+  localeDateWithTimeFormat,
+  NamedVersion,
+} from "../../../models";
 import { VersionModal } from "../VersionModal";
 
 export type CreateVersionModalProps = {
@@ -83,7 +89,9 @@ export const CreateVersionModal = (props: CreateVersionModalProps) => {
         <div className="iui-label">Latest included change</div>
         <div className="iac-additional-info">
           <span>#{changeset.index}</span>
-          <span>{new Date(changeset.pushDateTime).toLocaleString()}</span>
+          <span>
+            {localeDateWithTimeFormat(new Date(changeset.pushDateTime))}
+          </span>
         </div>
       </div>
       {latestVersion && (
@@ -92,7 +100,9 @@ export const CreateVersionModal = (props: CreateVersionModalProps) => {
           <div className="iac-additional-info">
             <span className="iac-cell-ellipsis">{latestVersion.name}</span>
             <span>
-              {new Date(latestVersion.createdDateTime).toLocaleString()}
+              {localeDateWithTimeFormat(
+                new Date(latestVersion.createdDateTime)
+              )}
             </span>
           </div>
         </div>

diff --git a/...ages/modules/manage-versions/src/components/ManageVersions/ChangesTab/ChangesTab.test.tsx b/...ages/modules/manage-versions/src/components/ManageVersions/ChangesTab/ChangesTab.test.tsx
@@ -34,11 +34,13 @@ const renderComponent = (initialProps?: Partial<ChangesTabProps>) => {
 describe("ChangesTab", () => {
   it("should show data in versions table", () => {
     const { container } = renderComponent();
-    const rows = container.querySelectorAll(".iui-table-body .iui-table-row");
+    const rows = container.querySelectorAll(
+      "div[role='rowgroup'] > div[role='row']"
+    );
     expect(rows.length).toBe(3);
 
     rows.forEach((row, index) => {
-      const cells = row.querySelectorAll(".iui-table-cell");
+      const cells = row.querySelectorAll("div[role='cell']");
       expect(cells.length).toBe(6);
       expect(cells[0].textContent).toContain(
         MockedChangeset(index).index.toString()
@@ -51,7 +53,7 @@ describe("ChangesTab", () => {
         MockedChangeset(index).synchronizationInfo.changedFiles.join(", ")
       );
       expect(cells[4].textContent).toContain(
-        new Date(MockedChangeset(index).pushDateTime).toLocaleString()
+        MockedChangeset(index).pushDateTime
       );
       within(cells[5] as HTMLElement).getByTitle(
         defaultStrings.createNamedVersion
@@ -88,7 +90,9 @@ describe("ChangesTab", () => {
         }),
       ],
     });
-    const rows = container.querySelectorAll(".iui-table-body .iui-table-row");
+    const rows = container.querySelectorAll(
+      "div[role='rowgroup'] > div[role='row']"
+    );
     expect(rows.length).toBe(1);
 
     const createVersionIcon = queryByTitle(defaultStrings.createNamedVersion);

diff --git a/packages/modules/manage-versions/src/components/ManageVersions/ChangesTab/ChangesTab.tsx b/packages/modules/manage-versions/src/components/ManageVersions/ChangesTab/ChangesTab.tsx
@@ -13,7 +13,11 @@ import React from "react";
 import { CellProps } from "react-table";
 
 import { useConfig } from "../../../common/configContext";
-import { Changeset, NamedVersion } from "../../../models";
+import {
+  Changeset,
+  localeDateWithTimeFormat,
+  NamedVersion,
+} from "../../../models";
 import { CreateVersionModal } from "../../CreateUpdateVersion/CreateVersionModal/CreateVersionModal";
 import { ChangesetInformationPanel } from "../../InformationPanel/ChangesetInformationPanel";
 import { RequestStatus } from "../types";
@@ -101,7 +105,9 @@ const ChangesTab = (props: ChangesTabProps) => {
             Cell: (props: CellProps<Changeset>) => {
               return (
                 <span>
-                  {new Date(props.row.original.pushDateTime).toLocaleString()}
+                  {localeDateWithTimeFormat(
+                    new Date(props.row.original.pushDateTime)
+                  )}
                 </span>
               );
             },

diff --git a/packages/modules/manage-versions/src/components/ManageVersions/ManageVersions.test.tsx b/packages/modules/manage-versions/src/components/ManageVersions/ManageVersions.test.tsx
@@ -22,6 +22,7 @@ import {
   MockedVersion,
   MockedVersionList,
 } from "../../mocks";
+import { localeDateWithTimeFormat } from "../../models/utils";
 import {
   defaultStrings,
   ManageVersions,
@@ -44,6 +45,10 @@ describe("ManageVersions", () => {
   const mockUpdateVersion = jest.spyOn(NamedVersionClient.prototype, "update");
   const mockGetChangesets = jest.spyOn(ChangesetClient.prototype, "get");
   const mockGetUsers = jest.spyOn(ChangesetClient.prototype, "getUsers");
+  const mockScrollTo = jest.fn();
+  Object.defineProperty(HTMLElement.prototype, "scrollTo", {
+    value: mockScrollTo,
+  });
 
   const waitForSelectorToExist = async (selector: string) =>
     waitFor(() => expect(document.querySelector(selector)).not.toBeNull());
@@ -67,15 +72,14 @@ describe("ManageVersions", () => {
     expect(versionRows.length).toBe(3);
 
     versionRows.forEach((row, index) => {
-      const cells = row.querySelectorAll(".iui-table-cell");
+      const cells = row.querySelectorAll("div[role='cell']");
       expect(cells.length).toBe(5);
-      expect(cells[0].textContent).toContain(MockedVersion(index).name);
-      expect(cells[1].textContent).toContain(MockedVersion(index).description);
+      const mockedVersion = MockedVersion(versionRows.length - 1 - index);
+      expect(cells[0].textContent).toContain(mockedVersion.name);
+      expect(cells[1].textContent).toContain(mockedVersion.description);
 
-      expect(cells[2].textContent).toContain(MockedVersion(index).createdBy);
-      expect(cells[3].textContent).toContain(
-        new Date(MockedVersion(index).createdDateTime).toLocaleString()
-      );
+      expect(cells[2].textContent).toContain(mockedVersion.createdBy);
+      expect(cells[3].textContent).toContain(mockedVersion.createdDateTime);
       within(cells[4] as HTMLElement).getByTitle(
         defaultStrings.updateNamedVersion
       );
@@ -95,12 +99,12 @@ describe("ManageVersions", () => {
       container.querySelector(".iui-progress-indicator-radial")
     );
     const changesetRows = container.querySelectorAll(
-      ".iui-table-body .iui-table-row"
+      ".iac-changes-table div[role='rowgroup'] > div[role='row']"
     );
     expect(changesetRows.length).toBe(3);
 
     changesetRows.forEach((row, index) => {
-      const cells = row.querySelectorAll(".iui-table-cell");
+      const cells = row.querySelectorAll("div[role='cell']");
       expect(cells.length).toBe(6);
       expect(cells[0].textContent).toContain(
         MockedChangeset(index).index.toString()
@@ -113,7 +117,7 @@ describe("ManageVersions", () => {
         MockedChangeset(index).synchronizationInfo.changedFiles.join(", ")
       );
       expect(cells[4].textContent).toContain(
-        new Date(MockedChangeset(index).pushDateTime).toLocaleString()
+        MockedChangeset(index).pushDateTime
       );
       const actionButtons = (cells[5] as HTMLElement).querySelectorAll(
         '[type="button"]'
@@ -214,7 +218,7 @@ describe("ManageVersions", () => {
     expect(latestVersionInfo.length).toBe(2);
     expect(latestVersionInfo[0].textContent).toEqual(latestVersion.name);
     expect(latestVersionInfo[1].textContent).toEqual(
-      new Date(latestVersion.createdDateTime).toLocaleString()
+      localeDateWithTimeFormat(new Date(latestVersion.createdDateTime))
     );
 
     const nameInput = document.querySelector("input") as HTMLInputElement;
@@ -227,7 +231,7 @@ describe("ManageVersions", () => {
     );
 
     const versionCells = container.querySelectorAll(
-      ".iui-table-body .iui-table-row:first-child .iui-table-cell"
+      "div[role='rowgroup'] > div[role='row']:first-child div[role='cell']"
     );
     expect(versionCells.length).toBe(5);
     expect(versionCells[0].textContent).toEqual("test name");
@@ -262,25 +266,42 @@ describe("ManageVersions", () => {
 
     await waitForSelectorToExist("input");
     const nameInput = document.querySelector("input") as HTMLInputElement;
+    const descriptionInput = document.querySelector(
+      "textarea[name='description']"
+    ) as HTMLTextAreaElement;
     expect(nameInput).toBeTruthy();
     fireEvent.change(nameInput, { target: { value: "test name" } });
-
+    fireEvent.change(descriptionInput, {
+      target: { value: "test description" },
+    });
     screen.getByText("Update").click();
 
+    await waitForElementToBeRemoved(() =>
+      document.querySelector(".iui-progress-indicator-overlay")
+    );
+
+    expect(mockUpdateVersion).toHaveBeenCalledWith(
+      MOCKED_IMODEL_ID,
+      MockedVersion(2).id,
+      {
+        name: "test name",
+        description: "test description",
+      }
+    );
     const versionCells = container.querySelectorAll(
-      ".iui-table-body .iui-table-row:first-child .iui-table-cell"
+      "div[role='rowgroup'] > div[role='row']:first-child div[role='cell']"
     );
     expect(versionCells.length).toBe(5);
-    expect(versionCells[0].textContent).toEqual(MockedVersion(0).name);
-    expect(versionCells[1].textContent).toEqual(MockedVersion(0).description);
+    expect(versionCells[0].textContent).toEqual("test name");
+    expect(versionCells[1].textContent).toEqual("test description");
     expect(versionCells[2].textContent).toEqual(MockedVersion(0).createdBy);
     expect(versionCells[3].textContent).toEqual(
-      new Date(MockedVersion(0).createdDateTime).toLocaleString()
+      MockedVersion(0).createdDateTime
     );
     within(versionCells[4] as HTMLElement).getByTitle(
       defaultStrings.updateNamedVersion
     );
-    expect(mockGetVersions).toHaveBeenCalledTimes(1);
+    expect(mockGetVersions).toHaveBeenCalledTimes(2);
     expect(mockUpdateVersion).toHaveBeenCalled();
   });
 });
@@ -294,12 +315,12 @@ it("should render with changesets tab opened", async () => {
     container.querySelector(".iui-progress-indicator-radial")
   );
   const changesetRows = container.querySelectorAll(
-    ".iui-table-body .iui-table-row"
+    "div[role='rowgroup'] > div[role='row']"
   );
   expect(changesetRows.length).toBe(3);
 
   changesetRows.forEach((row, index) => {
-    const cells = row.querySelectorAll(".iui-table-cell");
+    const cells = row.querySelectorAll("div[role='cell']");
     expect(cells.length).toBe(6);
     expect(cells[0].textContent).toContain(
       MockedChangeset(index).index.toString()
@@ -309,9 +330,7 @@ it("should render with changesets tab opened", async () => {
     expect(cells[3].textContent).toContain(
       MockedChangeset(index).synchronizationInfo.changedFiles.join(", ")
     );
-    expect(cells[4].textContent).toContain(
-      new Date(MockedChangeset(index).pushDateTime).toLocaleString()
-    );
+    expect(cells[4].textContent).toContain(MockedChangeset(index).pushDateTime);
     const actionButtons = (cells[5] as HTMLElement).querySelectorAll(
       '[type="button"]'
     );

diff --git a/packages/modules/manage-versions/src/components/ManageVersions/ManageVersions.tsx b/packages/modules/manage-versions/src/components/ManageVersions/ManageVersions.tsx
@@ -103,12 +103,17 @@ const initialChangeset: Changeset = {
 
 const initializeVersionTableData = (
   versions: NamedVersion[],
-  versionTableData?: VersionTableData[]
+  versionTableData?: VersionTableData[],
+  reloadSubrows?: boolean
 ): VersionTableData[] => {
   return (versions ?? []).map((version, index) => {
     const existingData = versionTableData?.[index];
-    const defaultSubRows = existingData?.subRows ?? [initialChangeset];
-    const subRowsLoaded = existingData?.subRowsLoaded ?? false;
+    const defaultSubRows = reloadSubrows
+      ? [initialChangeset]
+      : existingData?.subRows ?? [initialChangeset];
+    const subRowsLoaded = reloadSubrows
+      ? false
+      : existingData?.subRowsLoaded ?? false;
     return { version, subRows: defaultSubRows, subRowsLoaded };
   });
 };
@@ -217,20 +222,25 @@ export const ManageVersions = (props: ManageVersionsProps) => {
   );
 
   const getVersions = React.useCallback(
-    (skip?: number) => {
+    (skip?: number, reloadSubrows?: boolean) => {
       setVersionStatus(RequestStatus.InProgress);
       versionClient
         .get(imodelId, {
           top: NAMED_VERSION_TOP,
           skip,
         })
         .then((newVersions) => {
+          newVersions.sort((v1, v2) => v2.changesetIndex - v1.changesetIndex);
           const updateVersions = updateNamedVersionsProperties(
             newVersions,
             usersRef.current
           );
           setVersionsTableData((oldVersions) => [
-            ...initializeVersionTableData(updateVersions ?? [], oldVersions),
+            ...initializeVersionTableData(
+              updateVersions ?? [],
+              oldVersions,
+              reloadSubrows
+            ),
           ]);
           setVersionStatus(RequestStatus.Finished);
         })
@@ -272,9 +282,12 @@ export const ManageVersions = (props: ManageVersionsProps) => {
       .catch(() => setChangesetStatus(RequestStatus.Failed));
   }, [changesets, changesetClient, imodelId]);
 
-  const refreshVersions = React.useCallback(() => {
-    getVersions();
-  }, [getVersions]);
+  const refreshVersions = React.useCallback(
+    (reloadSubrows?: boolean) => {
+      getVersions(undefined, reloadSubrows);
+    },
+    [getVersions]
+  );
 
   React.useEffect(() => {
     const loadUsers = async () => {
@@ -310,10 +323,13 @@ export const ManageVersions = (props: ManageVersionsProps) => {
   }, [changesets, getUsers, versionsTableData]);
 
   React.useEffect(() => {
-    if (versionStatus === RequestStatus.NotStarted) {
+    if (
+      _currentTab === ManageVersionsTabs.Versions &&
+      versionStatus === RequestStatus.NotStarted
+    ) {
       getVersions();
     }
-  }, [getVersions, versionStatus]);
+  }, [_currentTab, getVersions, versionStatus]);
 
   React.useEffect(() => {
     if (
@@ -326,7 +342,7 @@ export const ManageVersions = (props: ManageVersionsProps) => {
 
   const onVersionCreated = React.useCallback(() => {
     changeTab(ManageVersionsTabs.Versions);
-    refreshVersions();
+    refreshVersions(true);
     setChangesets(undefined);
     setChangesetStatus(RequestStatus.NotStarted);
   }, [changeTab, refreshVersions]);