Bug fixes on manage-version

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))
     );
   });
 

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) {
         <Label>Latest included change</Label>
         <div className="iac-additional-info">
           <span>#{changeset.index}</span>
-          <span>{new Date(changeset.pushDateTime).toLocaleString()}</span>
+          <span>
+            {localeDateWithTimeFormat(new Date(changeset.pushDateTime))}
+          </span>
         </div>
       </InputGrid>
       {latestVersion && (
@@ -106,7 +114,9 @@ function ThemeWrappedCreateVersionModal(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>
         </InputGrid>

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 (
     <>
       <Modal
@@ -78,7 +82,7 @@ export const VersionModal = (props: VersionModalProps) => {
         className="iac-version-modal"
       >
         <LabeledInput
-          ref={(inputRef) => inputRef?.focus()}
+          ref={focusName}
           name="name"
           label={stringsOverrides.name}
           onChange={onChange}

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);
 

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>
               );
             },

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"]'
     );