Rename `Pagination` component to `ArrowPagination`

Signed-off-by: Mihaela Balutoiu <mbalutoiu@cloudbasesolutions.com>

src/components/modules/MinionModule/MinionPoolDetailsContent/MinionPoolEvents.spec.tsx

@@ -81,7 +81,7 @@ describe("MinionPoolEvents", () => {
     expect(filterDropdown).toBeTruthy();
   });
 
-  describe("Pagination", () => {
+  describe("ArrowPagination", () => {
     const showAllEvents = async () => {
       let showAllEvents: HTMLElement | null = null;
       TestUtils.selectAll("DropdownLink__Label").forEach(element => {
@@ -109,12 +109,12 @@ describe("MinionPoolEvents", () => {
       render(<MinionPoolEvents {...defaultProps} />);
 
       // pagination is not visible for 1 event
-      expect(TestUtils.select("Pagination__Wrapper")!).toBeFalsy();
+      expect(TestUtils.select("ArrowPagination__Wrapper")!).toBeFalsy();
 
       await showAllEvents();
 
       // pagination is visible for more than 1 event
-      expect(TestUtils.select("Pagination__Wrapper")!).toBeTruthy();
+      expect(TestUtils.select("ArrowPagination__Wrapper")!).toBeTruthy();
     });
 
     it("goes to next page and back", async () => {
@@ -123,28 +123,31 @@ describe("MinionPoolEvents", () => {
       await showAllEvents();
 
       expect(
-        TestUtils.select("Pagination__PagePrevious")!.hasAttribute("disabled"),
+        TestUtils.select("ArrowPagination__PagePrevious")!.hasAttribute(
+          "disabled",
+        ),
       ).toBeTruthy();
-      expect(TestUtils.select("Pagination__PageNumber")!.textContent).toBe(
+      expect(TestUtils.select("ArrowPagination__PageNumber")!.textContent).toBe(
         "1 of 3",
       );
 
       await act(async () => {
-        TestUtils.select("Pagination__PageNext")!.click();
+        TestUtils.select("ArrowPagination__PageNext")!.click();
       });
 
       expect(
-        TestUtils.select("Pagination__PagePrevious")!.hasAttribute("disabled"),
+        TestUtils.select("ArrowPagination__PagePrevious")!.hasAttribute(
+          "disabled",
+        ),
       ).toBeFalsy();
-      expect(TestUtils.select("Pagination__PageNumber")!.textContent).toBe(
+      expect(TestUtils.select("ArrowPagination__PageNumber")!.textContent).toBe(
         "2 of 3",
       );
 
       await act(async () => {
-        TestUtils.select("Pagination__PagePrevious")!.click();
+        TestUtils.select("ArrowPagination__PagePrevious")!.click();
       });
-
-      expect(TestUtils.select("Pagination__PageNumber")!.textContent).toBe(
+      expect(TestUtils.select("ArrowPagination__PageNumber")!.textContent).toBe(
         "1 of 3",
       );
     });

src/components/modules/MinionModule/MinionPoolDetailsContent/MinionPoolEvents.tsx

@@ -22,7 +22,7 @@ import {
 import { ThemePalette, ThemeProps } from "@src/components/Theme";
 import DropdownLink from "@src/components/ui/Dropdowns/DropdownLink";
 import InfoIcon from "@src/components/ui/InfoIcon";
-import Pagination from "@src/components/ui/Pagination";
+import ArrowPagination from "@src/components/ui/Pagination/ArrowPagination";
 import StatusIcon from "@src/components/ui/StatusComponents/StatusIcon";
 import configLoader from "@src/utils/Config";
 import DateUtils from "@src/utils/DateUtils";
@@ -255,7 +255,7 @@ class MinionPoolEvents extends React.Component<Props, State> {
         configLoader.config.maxMinionPoolEventsPerPage,
     );
     return (
-      <Pagination
+      <ArrowPagination
         previousDisabled={this.state.currentPage === 1}
         nextDisabled={this.state.currentPage === totalPages}
         onPreviousClick={() => {

src/components/modules/WizardModule/WizardInstances/WizardInstances.tsx

@@ -20,7 +20,7 @@ import { ThemePalette, ThemeProps } from "@src/components/Theme";
 import Button from "@src/components/ui/Button";
 import Checkbox from "@src/components/ui/Checkbox";
 import InfoIcon from "@src/components/ui/InfoIcon";
-import Pagination from "@src/components/ui/Pagination";
+import ArrowPagination from "@src/components/ui/Pagination/ArrowPagination";
 import ReloadButton from "@src/components/ui/ReloadButton";
 import SearchInput from "@src/components/ui/SearchInput";
 import StatusImage from "@src/components/ui/StatusComponents/StatusImage";
@@ -465,7 +465,7 @@ class WizardInstances extends React.Component<Props, State> {
     const isNextDisabled = !hasNextPage || areAllDisabled;
 
     return (
-      <Pagination
+      <ArrowPagination
         style={{ margin: "32px 0 16px 0" }}
         previousDisabled={isPreviousDisabled}
         onPreviousClick={() => {

src/components/ui/Pagination/Pagination.spec.tsx → src/components/ui/Pagination/ArrowPagination/ArrowPagination.spec.tsx

@@ -14,11 +14,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
 import { render } from "@testing-library/react";
-import Pagination from "@src/components/ui/Pagination";
+import ArrowPagination from "./ArrowPagination";
 import TestUtils from "@tests/TestUtils";
 
-const PaginationWithDefaultProps = (props: Partial<Pagination["props"]>) => (
-  <Pagination
+const ArrowPaginationWithDefaultProps = (
+  props: Partial<ArrowPagination["props"]>,
+) => (
+  <ArrowPagination
     currentPage={2}
     totalPages={10}
     onPreviousClick={props.onPreviousClick || (() => {})}
@@ -29,10 +31,10 @@ const PaginationWithDefaultProps = (props: Partial<Pagination["props"]>) => (
   />
 );
 
-describe("Pagination", () => {
+describe("ArrowPagination", () => {
   it("renders", () => {
-    render(<PaginationWithDefaultProps />);
-    expect(TestUtils.select("Pagination__PageNumber")?.textContent).toBe(
+    render(<ArrowPaginationWithDefaultProps />);
+    expect(TestUtils.select("ArrowPagination__PageNumber")?.textContent).toBe(
       "2 of 10",
     );
   });
@@ -41,14 +43,14 @@ describe("Pagination", () => {
     const onPreviousClick = jest.fn();
     const onNextClick = jest.fn();
     render(
-      <PaginationWithDefaultProps
+      <ArrowPaginationWithDefaultProps
         onPreviousClick={onPreviousClick}
         onNextClick={onNextClick}
       />,
     );
-    TestUtils.select("Pagination__PagePrevious")!.click();
+    TestUtils.select("ArrowPagination__PagePrevious")!.click();
     expect(onPreviousClick).toHaveBeenCalled();
-    TestUtils.select("Pagination__PageNext")!.click();
+    TestUtils.select("ArrowPagination__PageNext")!.click();
     expect(onNextClick).toHaveBeenCalled();
   });
 
@@ -56,37 +58,37 @@ describe("Pagination", () => {
     let onPreviousClick = jest.fn();
     let onNextClick = jest.fn();
     const { rerender } = render(
-      <PaginationWithDefaultProps
+      <ArrowPaginationWithDefaultProps
         onPreviousClick={onPreviousClick}
         previousDisabled
         onNextClick={onNextClick}
       />,
     );
-    TestUtils.select("Pagination__PagePrevious")!.click();
+    TestUtils.select("ArrowPagination__PagePrevious")!.click();
     expect(onPreviousClick).not.toHaveBeenCalled();
-    TestUtils.select("Pagination__PageNext")!.click();
+    TestUtils.select("ArrowPagination__PageNext")!.click();
     expect(onNextClick).toHaveBeenCalled();
 
     onPreviousClick = jest.fn();
     onNextClick = jest.fn();
     rerender(
-      <PaginationWithDefaultProps
+      <ArrowPaginationWithDefaultProps
         onPreviousClick={onPreviousClick}
         onNextClick={onNextClick}
         nextDisabled
       />,
     );
-    TestUtils.select("Pagination__PagePrevious")!.click();
+    TestUtils.select("ArrowPagination__PagePrevious")!.click();
     expect(onPreviousClick).toHaveBeenCalled();
-    TestUtils.select("Pagination__PageNext")!.click();
+    TestUtils.select("ArrowPagination__PageNext")!.click();
     expect(onNextClick).not.toHaveBeenCalled();
   });
 
   it("shows loading", () => {
-    const { rerender } = render(<PaginationWithDefaultProps />);
+    const { rerender } = render(<ArrowPaginationWithDefaultProps />);
     expect(TestUtils.select("HorizontalLoading__Wrapper")).toBeFalsy();
 
-    rerender(<PaginationWithDefaultProps loading />);
+    rerender(<ArrowPaginationWithDefaultProps loading />);
     expect(TestUtils.select("HorizontalLoading__Wrapper")).toBeTruthy();
   });
 });

src/components/ui/Pagination/Pagination.tsx → src/components/ui/Pagination/ArrowPagination/ArrowPagination.tsx

@@ -80,7 +80,7 @@ type Props = {
 };
 
 @observer
-class Pagination extends React.Component<Props> {
+class ArrowPagination extends React.Component<Props> {
   goTo(type: "previous" | "next") {
     if (type === "previous" && !this.props.previousDisabled) {
       this.props.onPreviousClick();
@@ -154,4 +154,4 @@ class Pagination extends React.Component<Props> {
   }
 }
 
-export default Pagination;
+export default ArrowPagination;

src/components/ui/Pagination/ArrowPagination/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "ArrowPagination",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./ArrowPagination.tsx"
+}

src/components/ui/Pagination/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "Pagination",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Pagination.tsx"
-}