From 8d4f0ca65f09cf6e9182a118a56476a0a9d648dc Mon Sep 17 00:00:00 2001 From: Pooja17-bentley <148448690+Pooja17-bentley@users.noreply.github.com> Date: Fri, 15 Dec 2023 17:06:14 +0530 Subject: [PATCH] Bug fixes on manage-version 1.3.0 --- .../CreateVersionModal.test.tsx | 10 ++- .../CreateVersionModal/CreateVersionModal.tsx | 16 ++++- .../CreateUpdateVersion/VersionModal.tsx | 6 +- .../ChangesTab/ChangesTab.test.tsx | 8 +-- .../ManageVersions/ChangesTab/ChangesTab.tsx | 10 ++- .../ManageVersions/ManageVersions.test.tsx | 67 ++++++++++++------- .../ManageVersions/ManageVersions.tsx | 44 ++++++++---- .../VersionsTab/VersionsTab.test.tsx | 10 +-- .../VersionsTab/VersionsTab.tsx | 11 ++- packages/modules/manage-versions/src/mocks.ts | 6 +- 10 files changed, 127 insertions(+), 61 deletions(-) diff --git a/packages/modules/manage-versions/src/components/CreateUpdateVersion/CreateVersionModal/CreateVersionModal.test.tsx b/packages/modules/manage-versions/src/components/CreateUpdateVersion/CreateVersionModal/CreateVersionModal.test.tsx index 27937472..65c4af79 100644 --- a/packages/modules/manage-versions/src/components/CreateUpdateVersion/CreateVersionModal/CreateVersionModal.test.tsx +++ b/packages/modules/manage-versions/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, @@ -74,14 +78,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/packages/modules/manage-versions/src/components/CreateUpdateVersion/CreateVersionModal/CreateVersionModal.tsx b/packages/modules/manage-versions/src/components/CreateUpdateVersion/CreateVersionModal/CreateVersionModal.tsx index 373b1c98..61fafb33 100644 --- a/packages/modules/manage-versions/src/components/CreateUpdateVersion/CreateVersionModal/CreateVersionModal.tsx +++ b/packages/modules/manage-versions/src/components/CreateUpdateVersion/CreateVersionModal/CreateVersionModal.tsx @@ -14,7 +14,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 = { @@ -97,7 +103,9 @@ function ThemeWrappedCreateVersionModal(props: CreateVersionModalProps) {
#{changeset.index} - {new Date(changeset.pushDateTime).toLocaleString()} + + {localeDateWithTimeFormat(new Date(changeset.pushDateTime))} +
{latestVersion && ( @@ -106,7 +114,9 @@ function ThemeWrappedCreateVersionModal(props: CreateVersionModalProps) {
{latestVersion.name} - {new Date(latestVersion.createdDateTime).toLocaleString()} + {localeDateWithTimeFormat( + new Date(latestVersion.createdDateTime) + )}
diff --git a/packages/modules/manage-versions/src/components/CreateUpdateVersion/VersionModal.tsx b/packages/modules/manage-versions/src/components/CreateUpdateVersion/VersionModal.tsx index 0e586a19..2905aeaf 100644 --- a/packages/modules/manage-versions/src/components/CreateUpdateVersion/VersionModal.tsx +++ b/packages/modules/manage-versions/src/components/CreateUpdateVersion/VersionModal.tsx @@ -69,6 +69,10 @@ export const VersionModal = (props: VersionModalProps) => { return value.length <= MAX_LENGTH; }; + const focusName = React.useCallback((inputRef: HTMLInputElement | null) => { + inputRef?.focus(); + }, []); + return ( <> { className="iac-version-modal" > inputRef?.focus()} + ref={focusName} name="name" label={stringsOverrides.name} onChange={onChange} diff --git a/packages/modules/manage-versions/src/components/ManageVersions/ChangesTab/ChangesTab.test.tsx b/packages/modules/manage-versions/src/components/ManageVersions/ChangesTab/ChangesTab.test.tsx index 587cc73c..f8c24b6f 100644 --- a/packages/modules/manage-versions/src/components/ManageVersions/ChangesTab/ChangesTab.test.tsx +++ b/packages/modules/manage-versions/src/components/ManageVersions/ChangesTab/ChangesTab.test.tsx @@ -35,12 +35,12 @@ describe("ChangesTab", () => { it("should show data in versions table", () => { const { container } = renderComponent(); const rows = container.querySelectorAll( - "._iui3-table-body ._iui3-table-row" + "div[role='rowgroup'] > div[role='row']" ); expect(rows.length).toBe(3); rows.forEach((row, index) => { - const cells = row.querySelectorAll("._iui3-table-cell"); + const cells = row.querySelectorAll("div[role='cell']"); expect(cells.length).toBe(6); expect(cells[0].textContent).toContain( MockedChangeset(index).index.toString() @@ -53,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 @@ -91,7 +91,7 @@ describe("ChangesTab", () => { ], }); const rows = container.querySelectorAll( - "._iui3-table-body ._iui3-table-row" + "div[role='rowgroup'] > div[role='row']" ); expect(rows.length).toBe(1); diff --git a/packages/modules/manage-versions/src/components/ManageVersions/ChangesTab/ChangesTab.tsx b/packages/modules/manage-versions/src/components/ManageVersions/ChangesTab/ChangesTab.tsx index 5199989e..4cb47f9f 100644 --- 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) => { return ( - {new Date(props.row.original.pushDateTime).toLocaleString()} + {localeDateWithTimeFormat( + new Date(props.row.original.pushDateTime) + )} ); }, diff --git a/packages/modules/manage-versions/src/components/ManageVersions/ManageVersions.test.tsx b/packages/modules/manage-versions/src/components/ManageVersions/ManageVersions.test.tsx index e694e957..528ab2f1 100644 --- 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()); @@ -64,20 +69,19 @@ describe("ManageVersions", () => { ) ); const versionRows = container.querySelectorAll( - ".iac-versions-table ._iui3-table-body ._iui3-table-row" + ".iac-versions-table div[role='rowgroup'] > div[role='row']" ); expect(versionRows.length).toBe(3); versionRows.forEach((row, index) => { - const cells = row.querySelectorAll("._iui3-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 ); @@ -99,12 +103,12 @@ describe("ManageVersions", () => { ) ); const changesetRows = container.querySelectorAll( - ".iac-changes-table ._iui3-table-body ._iui3-table-row" + ".iac-changes-table div[role='rowgroup'] > div[role='row']" ); expect(changesetRows.length).toBe(3); changesetRows.forEach((row, index) => { - const cells = row.querySelectorAll("._iui3-table-cell"); + const cells = row.querySelectorAll("div[role='cell']"); expect(cells.length).toBe(6); expect(cells[0].textContent).toContain( MockedChangeset(index).index.toString() @@ -117,7 +121,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"]' @@ -229,7 +233,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; @@ -242,7 +246,7 @@ describe("ManageVersions", () => { ); const versionCells = container.querySelectorAll( - ".iac-versions-table ._iui3-table-body ._iui3-table-row:first-child ._iui3-table-cell" + ".iac-versions-table div[role='rowgroup'] > div[role='row']:first-child div[role='cell']" ); expect(versionCells.length).toBe(5); expect(versionCells[0].textContent).toEqual("test name"); @@ -284,25 +288,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(); + expect(mockUpdateVersion).toHaveBeenCalledWith( + MOCKED_IMODEL_ID, + MockedVersion(2).id, + { + name: "test name", + description: "test description", + } + ); + await waitForElementToBeRemoved(() => + document.querySelector(".iui-progress-indicator-overlay") + ); const versionCells = container.querySelectorAll( - ".iac-versions-table ._iui3-table-body ._iui3-table-row:first-child ._iui3-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(); }); }); @@ -318,12 +339,12 @@ it("should render with changesets tab opened", async () => { ) ); const changesetRows = container.querySelectorAll( - ".iac-changes-table ._iui3-table-body ._iui3-table-row" + ".iac-changes-table div[role='rowgroup'] > div[role='row']" ); expect(changesetRows.length).toBe(3); changesetRows.forEach((row, index) => { - const cells = row.querySelectorAll("._iui3-table-cell"); + const cells = row.querySelectorAll("div[role='cell']"); expect(cells.length).toBe(6); expect(cells[0].textContent).toContain( MockedChangeset(index).index.toString() @@ -333,9 +354,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 index 6059b191..0be3259f 100644 --- 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,7 +222,7 @@ export const ManageVersions = (props: ManageVersionsProps) => { ); const getVersions = React.useCallback( - (skip?: number) => { + (skip?: number, reloadSubrows?: boolean) => { setVersionStatus(RequestStatus.InProgress); versionClient .get(imodelId, { @@ -225,12 +230,17 @@ export const ManageVersions = (props: ManageVersionsProps) => { 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]); @@ -369,6 +385,7 @@ export const ManageVersions = (props: ManageVersionsProps) => { orientation="horizontal" type="borderless" onValueChange={(value) => changeTab(Number(value))} + value={_currentTab.toString()} > { /> - + { expect(cells[0].textContent).toContain(MockedVersion().name); expect(cells[1].textContent).toContain(MockedVersion().description); expect(cells[2].textContent).toContain(MockedVersion().createdBy); - expect(cells[3].textContent).toContain( - new Date(MockedVersion().createdDateTime).toLocaleString() - ); + expect(cells[3].textContent).toContain(MockedVersion().createdDateTime); expect(cells[4].textContent).toContain(defaultStrings.view); const viewSpan = screen.getByText("View"); fireEvent.click(viewSpan); @@ -123,9 +121,7 @@ describe("VersionsTab", () => { expect(cells[0].textContent).toContain(MockedVersion().name); expect(cells[1].textContent).toContain(MockedVersion().description); expect(cells[2].textContent).toContain(MockedVersion().createdBy); - expect(cells[3].textContent).toContain( - new Date(MockedVersion().createdDateTime).toLocaleString() - ); + expect(cells[3].textContent).toContain(MockedVersion().createdDateTime); expect(cells[4].textContent).toContain(defaultStrings.view); const viewSpan = screen.getByText("View"); fireEvent.click(viewSpan); @@ -145,7 +141,7 @@ describe("VersionsTab", () => { MockedChangeset(index).createdBy ); expect(cells[3].textContent).toContain( - new Date(MockedChangeset(index).pushDateTime).toLocaleString() + MockedChangeset(index).pushDateTime ); expect(cells[4].textContent).not.toContain(defaultStrings.view); const updateNamedVersionButton = within( diff --git a/packages/modules/manage-versions/src/components/ManageVersions/VersionsTab/VersionsTab.tsx b/packages/modules/manage-versions/src/components/ManageVersions/VersionsTab/VersionsTab.tsx index a46d77d5..ec25d884 100644 --- a/packages/modules/manage-versions/src/components/ManageVersions/VersionsTab/VersionsTab.tsx +++ b/packages/modules/manage-versions/src/components/ManageVersions/VersionsTab/VersionsTab.tsx @@ -11,7 +11,12 @@ import { CellProps } from "react-table"; import { ChangesetClient } from "../../../clients/changesetClient"; import { useConfig } from "../../../common/configContext"; -import { Changeset, NamedVersion, VersionTableData } from "../../../models"; +import { + Changeset, + localeDateWithTimeFormat, + NamedVersion, + VersionTableData, +} from "../../../models"; import { UpdateVersionModal } from "../../CreateUpdateVersion/UpdateVersionModal/UpdateVersionModal"; import { RequestStatus } from "../types"; @@ -66,13 +71,13 @@ const VersionsTab = (props: VersionsTabProps) => { if (isNamedVersion(row)) { return ( - {new Date(row.version["createdDateTime"]).toLocaleString()} + {localeDateWithTimeFormat(new Date(row.version["createdDateTime"]))} ); } else { const content = row["pushDateTime"]; return content !== "" ? ( - {new Date(row["pushDateTime"]).toLocaleString()} + {localeDateWithTimeFormat(new Date(row["pushDateTime"]))} ) : ( Loading Date ); diff --git a/packages/modules/manage-versions/src/mocks.ts b/packages/modules/manage-versions/src/mocks.ts index 29ecacc2..b062ab9f 100644 --- a/packages/modules/manage-versions/src/mocks.ts +++ b/packages/modules/manage-versions/src/mocks.ts @@ -4,9 +4,11 @@ *--------------------------------------------------------------------------------------------*/ import { ConfigProviderProps } from "./common/configContext"; import { defaultStrings } from "./components/ManageVersions/ManageVersions"; -import { Changeset, NamedVersion } from "./models"; +import { Changeset, localeDateWithTimeFormat, NamedVersion } from "./models"; -export const MOCKED_DATE = new Date(2019, 8, 9).toISOString(); +export const MOCKED_DATE = localeDateWithTimeFormat( + new Date("2023-12-07T06:14:54.1870000Z") +); export const MOCKED_IMODEL_ID = "80abe4ef-e2cc-4ade-8fad-14546af23fbd"; export const MOCKED_CONFIG_PROPS = {