Merge branch 'develop' of https://github.com/Ajay-aot/forms-flow-ai-m…

…icro-front-ends into bugfix/FWF-3866-translation-fixes

CHANGELOG.md

@@ -2,6 +2,44 @@
 
 Mark items as `Added`, `Changed`, `Fixed`, `Modified`, `Removed`, `Untested Features`, `Upcoming Features`, `Known Issues`
 
+## 7.0.0 - 2025-01-10
+
+`Added`
+
+**forms-flow-admin**
+* Added permission selection option in role creation modal
+
+**forms-flow-theme**
+* Added new root variables to support the updated UI design
+* Added style changes to support new design
+
+**forms-flow-components**
+* New micro-frontend to include reusable UI components
+* Added new reusable components:
+  * Svg Icons
+  * Svg Images
+  * Custom components:
+    * Modals 
+    * Button 
+    * Form elements 
+    * Table elements
+<br><br>
+
+
+`Modified`
+
+**forms-flow-admin**
+* Renamed Admin menu as Manage and moved to sidebar
+
+**forms-flow-nav**
+* Modified Navbar to sidebar with updated design
+
+
+
+
+
+
+
 ## 6.0.2 - 2024-06-05
 
 `Generic Changes`

README.md

@@ -27,6 +27,10 @@ This module contains all the common functionalties used by micro front-ends. The
 
 This module contains the common style sheet shared by all micro-front-ends. This module supports theming by providing the option to use desired themes by modifying the css variables.
 
+5. forms-flow-components
+
+This module contains reusable UI components.
+
 All the modules are built with `single-spa`, a javascript router for micro front-end microsevices.
 
 ## Prerequisites

VERSION

@@ -1 +1 @@
-v7.0.0-alpha
+v7.1.0-alpha

forms-flow-admin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formsflow/admin",
-  "version": "7.0.0-alpha",
+  "version": "7.1.0-alpha",
   "scripts": {
     "start": "webpack serve",
     "start:standalone": "webpack serve --env standalone",

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

@@ -79,7 +79,6 @@ const Roles = React.memo((props: any) => {
     setDisabled(
       !(
         payload.name?.trim() &&
-        payload.description?.trim() &&
         payload.permissions.length !== 0
       )
     );
@@ -89,7 +88,6 @@ const Roles = React.memo((props: any) => {
     setDisabled(
       !(
         editCandidate.name?.trim() &&
-        editCandidate.description?.trim() &&
         editCandidate.permissions.length !== 0
       )
     );
@@ -181,7 +179,6 @@ const Roles = React.memo((props: any) => {
   const validateRolePayload = (payload) => {
     return !(
       payload.name === "" ||
-      payload.description === "" ||
       payload.permissions.length === 0
     );
   };
@@ -272,6 +269,7 @@ const Roles = React.memo((props: any) => {
       rowData.name,
       null,
       null,
+      null,
       (results) => {
         setUsers(results.data);
         setLoading(false);
@@ -424,7 +422,6 @@ const Roles = React.memo((props: any) => {
             <Form.Label htmlFor="role-description" className="mt-2">
               {t("Description")}
             </Form.Label>
-            <i className="text-danger">*</i>
             <Form.Control
               id="role-description"
               as="textarea"
@@ -514,7 +511,6 @@ const Roles = React.memo((props: any) => {
             <Form.Label htmlFor="edit-description" className="mt-2">
               {t("Description")}
             </Form.Label>
-            <i style={{ color: "#e00" }}>*</i>
             <Form.Control
               id="edit-description"
               as="textarea"

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

@@ -21,14 +21,16 @@ const UserManagement = React.memo((props: any) => {
   const [filter, setFilter] = React.useState(undefined);
   const [total, setTotal] = React.useState(undefined);
   const { t } = useTranslation();
-
+  const [sizePerPage, setSizePerPage] = React.useState(5);
+
   React.useEffect(() => {
     if (filter === undefined) return;
     setLoading(true);
     fetchUsers(
       filter,
       1,
       search,
+      sizePerPage,
       (results) => {
         setUsers(removeTenantIdFromUserRoles(results.data));
         setInvalidated(false);
@@ -54,6 +56,7 @@ const UserManagement = React.memo((props: any) => {
         filter,
         1,
         search,
+        sizePerPage,
         (results) => {
           setUsers(removeTenantIdFromUserRoles(results.data));
           setInvalidated(false);
@@ -80,6 +83,7 @@ const UserManagement = React.memo((props: any) => {
         filter,
         pageNo,
         search,
+        sizePerPage,
         (results) => {
           setUsers(removeTenantIdFromUserRoles(results.data));
           setTotal(results.count);
@@ -103,6 +107,7 @@ const UserManagement = React.memo((props: any) => {
       null,
       pageNo,
       null,
+      sizePerPage,
       (results) => {
 
         setUsers(removeTenantIdFromUserRoles(results.data));
@@ -122,7 +127,7 @@ const UserManagement = React.memo((props: any) => {
       setError(err);
       toast.error(t("Failed to fetch roles!"))
     });
-  }, []);
+  }, [sizePerPage]);
 
   const removeTenantIdFromUserRoles = (data)=>{
     let updatedUserData = []
@@ -151,6 +156,7 @@ const UserManagement = React.memo((props: any) => {
         setFilter={setFilter}
         total={total}
         error={error}
+        limit = {{sizePerPage , setSizePerPage}}
       />
     </>
   );

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

@@ -26,7 +26,6 @@ const Users = React.memo((props: any) => {
   const [error, setError] = React.useState(null); // Initialize error state with null instead of undefined
   const [loading, setLoading] = React.useState(false);
   const [activePage, setActivePage] = React.useState(1);
-  const [sizePerPage, setSizePerPage] = React.useState(5);
   const [selectedFilter, setSelectedFilter] = React.useState(null); // Initialize selectedFilter with null
   const [searchKey, setSearchKey] = React.useState("");
   const [showInviteModal, setShowInviteModal] = React.useState(false); // Add state for managing invite modal
@@ -113,7 +112,8 @@ const Users = React.memo((props: any) => {
   };
 
   const handleLimitChange = (newLimit: number) => {
-    setSizePerPage(newLimit);
+    props.limit?.setSizePerPage(newLimit);
+    props.page.setPageNo(1);
     setActivePage(1); 
   };
 
@@ -524,7 +524,7 @@ const Users = React.memo((props: any) => {
           <table className="table mt-3">
             <tfoot>
               <TableFooter
-                  limit={sizePerPage}
+                  limit={props?.limit?.sizePerPage}
                   activePage={activePage} 
                   totalCount={props.total}
                   handlePageChange={handlePageChange}

forms-flow-admin/src/index.tsx

@@ -62,6 +62,12 @@ const Admin = React.memo(({ props }: any) => {
     }
   }, []);
 
+  React.useEffect(()=>{
+    if(instance){
+      publish("FF_AUTH", instance);
+    }
+  },[instance])
+
   React.useEffect(()=>{
     if(!isAuth) return
     const locale = localStorage.getItem("i18nextLng")

forms-flow-admin/src/services/users/index.ts

@@ -6,14 +6,16 @@ export const fetchUsers = (
   group: string | null,
   pageNo: number | null,
   search: string | null,
+  sizePerPage : number | null ,
   callback: any,
   errorHandler: any,
   role = true,
   count = true
 ) => {
   let url = `${API.GET_USERS}?role=${role}&count=${count}`;
   if (group) url += `&memberOfGroup=${group}`;
-  if (pageNo) url += `&pageNo=${pageNo}&limit=5`;
+  if (pageNo) url += `&pageNo=${pageNo}`;
+  if(sizePerPage) url += `&limit=${sizePerPage}`;
   if (search) url += `&search=${search}`;
 
   RequestService.httpGETRequest(url)

forms-flow-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formsflow/components",
-  "version": "7.0.0-alpha",
+  "version": "7.1.0-alpha",
   "scripts": {
     "start": "webpack serve",
     "start:standalone": "webpack serve --env standalone",

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

@@ -1,4 +1,4 @@
-import React ,{ FC } from "react";
+import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { InfoIcon } from "../SvgIcons/index";
 
@@ -14,16 +14,24 @@ export const CustomInfo: FC<CustomInfoProps> = ( {
     content ,
     className ,
 }) => { 
-    const { t } = useTranslation();
-    return (
-        <div className={`info-panel ${className}`}>
-        <div className="d-flex align-items-center">
-          <InfoIcon />
-          <div className="field-label ms-2">{t(heading)}</div>
-        </div>
-        <div className="info-content">
-          {t(content)}
-        </div>
+  const { t } = useTranslation();
+
+   // Replace `\n` with <br /> tags and use the line itself as a key
+   const formattedContent = content.split("\n").map((line) => (
+    <React.Fragment key={line.trim().replace(/\s+/g, "-")}>
+      {t(line)}
+      <br />
+    </React.Fragment>
+  ));
+
+
+  return (
+    <div className={`info-panel ${className}`}>
+      <div className="d-flex align-items-center">
+        <InfoIcon />
+        <div className="field-label ms-2">{t(heading)}</div>
       </div>
-    )
+      <div className="info-content">{formattedContent}</div> {/* Render formatted content */}
+    </div>
+  );
 };

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

@@ -151,6 +151,7 @@ export const FormBuilderModal: React.FC<BuildFormModalProps> = React.memo(
               isInvalid={!!nameError}
               feedback={nameError}
               turnOnLoader={isFormNameValidating}
+              maxLength={200} 
             />
            <FormTextArea
               name="description"