Merge pull request #2 from Bonymol-aot/pagination-import-fix

Pagination import fix

forms-flow-admin/src/components/roles/roles.tsx

@@ -3,7 +3,6 @@ import BootstrapTable from "react-bootstrap-table-next";
 import "./roles.scss";
 import { useParams } from "react-router-dom";
 import { Translation, useTranslation } from "react-i18next";
-import paginationFactory from "react-bootstrap-table2-paginator";
 import Form from "react-bootstrap/Form";
 import Button from "react-bootstrap/Button";
 import { fetchUsers } from "../../services/users";
@@ -595,31 +594,23 @@ const Roles = React.memo((props: any) => {
       <Translation>{(t) => t("results")}</Translation>
     </span>
   );
-  const getpageList = () => {
-    const list = [
-      {
-        text: "5",
-        value: 5,
-      },
-      {
-        text: "25",
-        value: 25,
-      },
-      {
-        text: "50",
-        value: 50,
-      },
-      {
-        text: "100",
-        value: 100,
-      },
-      {
-        text: t("All"),
-        value: roles.length,
-      },
-    ];
-    return list;
+  const getPageList = () => [
+    { text: '5', value: 5 },
+    { text: '25', value: 25 },
+    { text: '50', value: 50 },
+    { text: '100', value: 100 },
+    { text: 'All', value: roles.length },
+  ];
+  const paginatedRoles = roles.slice(
+    (activePage - 1) * sizePerPage, 
+    activePage * sizePerPage 
+  );
+
+  const handlePageChange = (page: number) => {
+    setActivePage(page);
   };
+
+
   const customDropUp = ({ options, currSizePerPage, onSizePerPageChange }) => {
     return (
       <DropdownButton
@@ -641,9 +632,9 @@ const Roles = React.memo((props: any) => {
     );
   };
 
-  const handleLimitChange = (sizePerPage, page) => {
-    setActivePage(page);
-    setSizePerPage(sizePerPage);
+  const handleLimitChange = (newLimit: number) => {
+    setSizePerPage(newLimit);
+    setActivePage(1); 
   };
 
 
@@ -773,7 +764,7 @@ const Roles = React.memo((props: any) => {
           <div>
           <BootstrapTable
             keyField="id"
-            data={roles}
+            data={paginatedRoles}
             columns={columns}
             bordered={false}
             wrapperClasses="table-container px-4"
@@ -787,6 +778,7 @@ const Roles = React.memo((props: any) => {
 
           <table className="table">
             <tfoot>
+
               <TableFooter
                 limit={sizePerPage}
                 activePage={activePage}

forms-flow-admin/src/components/users/users.tsx

@@ -7,7 +7,6 @@ import Loading from "../loading";
 import { AddUserRole, RemoveUserRole } from "../../services/users";
 import OverlayTrigger from "react-bootstrap/OverlayTrigger";
 import Popover from "react-bootstrap/Popover";
-import paginationFactory from "react-bootstrap-table2-paginator";
 import DropdownButton from "react-bootstrap/DropdownButton";
 import Dropdown from "react-bootstrap/Dropdown";
 import { toast } from "react-toastify";

forms-flow-components/src/components/CustomComponents/HistoryModal.tsx

@@ -23,6 +23,7 @@ interface HistoryModalProps {
   currentVersionId?:number|string;
   disabledData:{key:string,value:any}
   ignoreFirstEntryDisable?: boolean
+  disableAllRevertButton?: boolean
 }
 
 interface AllHistory {
@@ -113,7 +114,7 @@ export const HistoryModal: React.FC<HistoryModalProps> = React.memo(
     allHistory,
     categoryType,
     historyCount,
-    currentVersionId,
+    disableAllRevertButton = false,
     ignoreFirstEntryDisable = false,
     disabledData = {key:"", value:""} // we can pass the key and its value based on that we can disable revert button eg: key:"processKey",value:"bpmn" if the data[key] == value it will disable
   }) => {
@@ -232,7 +233,7 @@ export const HistoryModal: React.FC<HistoryModalProps> = React.memo(
           categoryType === "FORM" ? entry.changeLog.cloned_form_id : null;
         const process_id = categoryType === "WORKFLOW" ? entry.id : null;
         const isLastEntry = index === allHistory.length - 1;  
-        const revertButtonDisabled = entry[disabledData.key] == disabledData.value || (!ignoreFirstEntryDisable && index === 0);
+        const revertButtonDisabled = disableAllRevertButton || entry[disabledData.key] == disabledData.value || (!ignoreFirstEntryDisable && index === 0);
         const fields = [
             { id:1, heading: t("Last Edit On"), value: formatDate(entry.created) },
             { id:2, heading: t("Last Edit By"), value: entry.createdBy },

forms-flow-nav/src/sidenav/MenuComponent.jsx

@@ -5,14 +5,35 @@ import { Link, useLocation, useHistory } from "react-router-dom";
 import { ChevronIcon } from "@formsflow/components";
 import { MULTITENANCY_ENABLED } from "../constants/constants";
 import { useTranslation } from "react-i18next";
+import { StorageService } from "@formsflow/service";
+import PropTypes from "prop-types";
 
-const MenuComponent = ({ eventKey, mainMenu, subMenu, optionsCount }) => {
+const MenuComponent = ({
+  eventKey,
+  mainMenu,
+  subMenu,
+  optionsCount,
+  subscribe,
+}) => {
+  const [tenant, setTenant] = React.useState({});
   const location = useLocation();
   const history = useHistory();
+  const tenantKey = tenant?.tenantId;
   const baseUrl = MULTITENANCY_ENABLED ? `/tenant/${tenantKey}/` : "/";
   const { t } = useTranslation();
   const noOptionsMenu = optionsCount === "0";
 
+  React.useEffect(() => {
+    subscribe("ES_TENANT", (msg, data) => {
+      if (data) {
+        setTenant(data);
+        if (!JSON.parse(StorageService.get("TENANT_DATA"))?.name) {
+          StorageService.save("TENANT_DATA", JSON.stringify(data.tenantData));
+        }
+      }
+    });
+  }, []);
+
   const handleHeaderClick = () => {
     if (noOptionsMenu) {
       subMenu.map((item, index) => {
@@ -21,8 +42,10 @@ const MenuComponent = ({ eventKey, mainMenu, subMenu, optionsCount }) => {
     }
   };
 
-  const isActive = subMenu.some((menu) =>
-    menu.matchExps && menu.matchExps.some((exp) => exp.test(location.pathname))
+  const isActive = subMenu.some(
+    (menu) =>
+      menu.matchExps &&
+      menu.matchExps.some((exp) => exp.test(location.pathname))
   );
 
   return (
@@ -71,4 +94,18 @@ const MenuComponent = ({ eventKey, mainMenu, subMenu, optionsCount }) => {
   );
 };
 
+MenuComponent.propTypes = {
+  eventKey: PropTypes.string.isRequired,
+  mainMenu: PropTypes.string.isRequired,
+  subMenu: PropTypes.arrayOf(
+    PropTypes.shape({
+      path: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      matchExps: PropTypes.arrayOf(PropTypes.instanceOf(RegExp)),
+    })
+  ).isRequired,
+  optionsCount: PropTypes.string.isRequired,
+  subscribe: PropTypes.func.isRequired,
+};
+
 export default MenuComponent;

forms-flow-nav/src/sidenav/Sidebar.jsx

@@ -33,6 +33,7 @@ import { checkIntegrationEnabled } from "../services/integration";
 import MenuComponent from "./MenuComponent";
 // import Appname from "./formsflow.svg";
 import { ApplicationLogo } from "@formsflow/components";
+import PropTypes from 'prop-types';
 
 const Sidebar = React.memo(({ props }) => {
   const [tenantLogo, setTenantLogo] = React.useState("");
@@ -210,13 +211,14 @@ const Sidebar = React.memo(({ props }) => {
                       },
                     ] : [],
                   ]}
+                  subscribe={props.subscribe}
                 />
               )}
             {showApplications &&
               isViewSubmissions &&
               ENABLE_APPLICATIONS_MODULE && (
                 <MenuComponent
-                  eventKey="3"
+                  eventKey="1"
                   optionsCount="1"
                   mainMenu="Submit"
                   subMenu={[
@@ -229,11 +231,12 @@ const Sidebar = React.memo(({ props }) => {
                       ],
                     },
                   ]}
+                  subscribe={props.subscribe}
                 />
               )}
               {(isViewTask || isManageTask) && ENABLE_TASKS_MODULE && (
               <MenuComponent
-                eventKey="4"
+                eventKey="2"
                 optionsCount="1"
                 mainMenu="Review"
                 subMenu={[
@@ -243,11 +246,12 @@ const Sidebar = React.memo(({ props }) => {
                     matchExps: [createURLPathMatchExp("task", baseUrl)],
                   },
                 ]}
+                subscribe={props.subscribe}
               />
             )}
             {isViewDashboard && ENABLE_DASHBOARDS_MODULE && (
               <MenuComponent
-                eventKey="5"
+                eventKey="3"
                 optionsCount="2"
                 mainMenu="Analyze"
                 subMenu={[
@@ -266,11 +270,12 @@ const Sidebar = React.memo(({ props }) => {
                     ],
                   }
                 ]}
+                subscribe={props.subscribe}
               />
             )}
             {isAdmin && (
               <MenuComponent
-                eventKey="6"
+                eventKey="4"
                 optionsCount="3"
                 mainMenu="Manage"
                 subMenu={[
@@ -292,6 +297,7 @@ const Sidebar = React.memo(({ props }) => {
                     matchExps: [createURLPathMatchExp("admin/users", baseUrl)],
                   },
                 ]}
+                subscribe={props.subscribe}
               />
             )}
           </Accordion>
@@ -331,4 +337,11 @@ const Sidebar = React.memo(({ props }) => {
   );
 });
 
+Sidebar.propTypes = {
+  props: PropTypes.shape({
+    subscribe: PropTypes.func.isRequired, 
+    getKcInstance: PropTypes.func.isRequired, 
+  }).isRequired,
+};
+
 export default Sidebar;