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

…icro-front-ends into Bugfix/FWF-4101-admin-page-fixes
AOT-Technologies · Dec 17, 2024 · 000fae3 · 000fae3
2 parents ee8bc9d + cf4e3b1
commit 000fae3
Showing 13 changed files with 127 additions and 35 deletions.
diff --git a/forms-flow-admin/src/components/dashboard/dashboard.tsx b/forms-flow-admin/src/components/dashboard/dashboard.tsx
@@ -288,7 +288,7 @@ const InsightDashboard = React.memo((props: any) => {
               wrapperClasses="table-container-admin mb-3 px-4"
               rowStyle={{
                 color: "#09174A",
-                fontWeight: 600,
+                fontWeight: 400,
               }}
               noDataIndication={noData}
               data-testid="admin-dashboard-table"

diff --git a/forms-flow-admin/src/components/roles/roles.tsx b/forms-flow-admin/src/components/roles/roles.tsx
@@ -759,7 +759,7 @@ const Roles = React.memo((props: any) => {
             wrapperClasses="table-container px-4"
             rowStyle={{
               color: "#09174A",
-              fontWeight: 600,
+              fontWeight: 400,
             }}
             noDataIndication={noData}
             data-testid="admin-roles-table"

diff --git a/forms-flow-admin/src/components/users/users.scss b/forms-flow-admin/src/components/users/users.scss
@@ -32,7 +32,6 @@
 
 .user-table-container {
 
-
     background: $white;
     box-shadow: 0px 2px 8px rgba(66, 66, 66, 0.07);
     border-radius: 8px;

diff --git a/forms-flow-admin/src/components/users/users.tsx b/forms-flow-admin/src/components/users/users.tsx
@@ -515,7 +515,7 @@ const Users = React.memo((props: any) => {
             wrapperClasses="user-table-container px-4"
             rowStyle={{
               color: "#09174A",
-              fontWeight: 600,
+              fontWeight: 400,
             }}
             noDataIndication={noData}
             onTableChange={handleTableChange}

diff --git a/forms-flow-admin/src/index.tsx b/forms-flow-admin/src/index.tsx
@@ -142,15 +142,13 @@ const Admin = React.memo(({ props }: any) => {
           <div className="min-container-height ps-md-3" >
             <Accessdenied userRoles={userRoles} />
             </div> }
-          <Footer />
           </div>
         </div>
       ):<div className="main-container ">
          <div className="container mt-5">
          <div className="min-container-height ps-md-3" >
           <Accessdenied userRoles={userRoles} />
           </div>
-          <Footer />
           </div> 
         </div>}
     </>

diff --git a/forms-flow-components/src/components/CustomComponents/ReusableProcessTableRow.tsx b/forms-flow-components/src/components/CustomComponents/ReusableProcessTableRow.tsx
@@ -21,10 +21,10 @@ export const ReusableProcessTableRow: React.FC<ProcessTableRowProps> = ({ item,
 
   return (
     <tr>
-      <td className="w-25 text-ellipsis">
+      <td className="w-25 text-ellipsis text-nowrap">
         <span className="ms-4">{item.name}</span>
       </td>
-      <td className="w-20 text-ellipsis">
+      <td className="w-20 text-ellipsis text-nowrap">
         <span>{item.processKey}</span>
       </td>
       <td className="w-15">{HelperServices?.getLocaldate(item.modified)}</td>

diff --git a/forms-flow-components/src/components/CustomComponents/ShowPremiumIcon.tsx b/forms-flow-components/src/components/CustomComponents/ShowPremiumIcon.tsx
@@ -1,11 +1,16 @@
+// ShowPremiumIcons.tsx
 import React from 'react';
-import { SHOW_PREMIUM_ICON} from '../../constants/constants'
-import { StarPremiumIcon } from '../SvgIcons/index'
+import { SHOW_PREMIUM_ICON } from '../../constants/constants';
+import { StarPremiumIcon } from '../SvgIcons/index';
 
-export const ShowPremiumIcons: React.FC = () => {
+interface ShowPremiumIconsProps {
+  color: string;
+}
+
+export const ShowPremiumIcons: React.FC<ShowPremiumIconsProps> = ({ color }) => {
   return (
     <>
-    {SHOW_PREMIUM_ICON && <StarPremiumIcon />}
+      {SHOW_PREMIUM_ICON && <StarPremiumIcon color={color} />} 
     </>
   );
 };
diff --git a/forms-flow-nav/src/sidenav/MenuComponent.jsx b/forms-flow-nav/src/sidenav/MenuComponent.jsx
@@ -17,6 +17,7 @@ const MenuComponent = ({
   baseUrl
 }) => {
   const [tenant, setTenant] = React.useState({});
+  const [activeMenu, setActiveMenu] = React.useState(null); 
   const location = useLocation();
   const history = useHistory();
   const { t } = useTranslation();
@@ -32,6 +33,12 @@ const MenuComponent = ({
     });
   }, []);
 
+  React.useEffect(() => {
+    const activePath = subMenu.find((menu) => location.pathname.includes(menu.path));
+    setActiveMenu(activePath ? activePath.path : null);
+  }, [location, subMenu]);
+
+
   const handleHeaderClick = () => {
     if (noOptionsMenu) {
       subMenu?.map((item, index) => {
@@ -40,19 +47,22 @@ const MenuComponent = ({
     }
   };
 
-  const isActive = subMenu?.some(
-    (menu) =>
-      menu.matchExps &&
-      menu.matchExps.some((exp) => exp.test(location.pathname))
-  );
+  const isActive = (menuPath) => location.pathname.includes(menuPath);
+
+  const getIconColor = (menuPath) => {
+    return activeMenu === menuPath || isActive(menuPath) 
+      ? getComputedStyle(document.documentElement).getPropertyValue("--ff-white")
+      : getComputedStyle(document.documentElement).getPropertyValue("--ff-primary");
+  };
+
 
   return (
     <Accordion.Item eventKey={eventKey}>
       <Accordion.Header
         data-testid={`accordion-header-${eventKey}`}
         aria-label={`Accordion header for ${mainMenu}`}
         className={`${noOptionsMenu ? "no-arrow" : ""} ${
-          isActive ? "active-header" : ""
+          isActive(mainMenu) ? "active-header" : ""
         }`}
         onClick={noOptionsMenu ? handleHeaderClick : undefined}
       >
@@ -75,17 +85,15 @@ const MenuComponent = ({
               key={index}
               to={`${baseUrl}${menu.path}`}
               className={`accordion-link d-flex justify-content-between ${
-                menu.matchExps &&
-                menu.matchExps.some((exp) => exp.test(location.pathname))
-                  ? "active"
-                  : ""
-              } `}
+                isActive(menu.path) ? "active" : ""
+              }`}
               data-testid={`accordion-link-${index}`}
               aria-label={`Link to ${menu.name}`}
             >
-              {t(menu.name)} {(menu.name.toLowerCase() === "bundle" || menu.name.toLowerCase() === "integrations")  &&(
-        <ShowPremiumIcons />
-      )}
+              {t(menu.name)}
+              {(menu.name.toLowerCase() === "bundle" || menu.name.toLowerCase() === "integrations") && (
+                <ShowPremiumIcons color={getIconColor(menu.path)} /> 
+              )}
             </Link>
           ))}
         </Accordion.Body>

diff --git a/forms-flow-theme/scss/_card.scss b/forms-flow-theme/scss/_card.scss
@@ -186,6 +186,9 @@ $primary: var(--ff-primary);
     opacity: 1 !important;
     right: 0;
   }
+  .card-body {
+    padding-right: var(--spacer-025);
+  }
 }
 
 .info-panel {

diff --git a/forms-flow-theme/scss/_modal.scss b/forms-flow-theme/scss/_modal.scss
@@ -359,20 +359,17 @@ $secondary: var(--ff-secondary);
 }
 
 //action modal
+.action-modal-body {
+  padding: var(--spacer-250) var(--spacer-200) !important;
+}
 .custom-action-flex {
   gap: var(--spacer-100);
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
-}
-
-.custom-action-model-body {
-  padding: var(--spacer-200) var(--spacer-250);
-
 }
 
 .action-form {
-  padding: 1.875rem var(--spacer-125);
+  padding-block: 1.875rem var(--spacer-125);
 }
 
 .custom-modal-content {
@@ -492,12 +489,18 @@ $secondary: var(--ff-secondary);
   padding: 2rem 2.5rem !important;
   display: flex;
   flex-direction: column;
-  gap: var(--ff-spacer-150);
+  gap: var(--spacer-150);
   align-self: stretch;
 
   .form-check-input {
     border-color: $primary;
   }
+  .dashed-line {
+    flex-grow: 1;
+    border-top: 1px dashed gray;
+    margin: 0 10px;
+  }
+
 } 
 
 //no-code modals

diff --git a/forms-flow-theme/scss/_theme.scss b/forms-flow-theme/scss/_theme.scss
@@ -211,4 +211,33 @@ body {
   background-color: var(--ff-primary-600);
   border: var(--ff-primary-600);
   color: var(--ff-white) !important;
+}
+
+/* Custom Scrollbar Styles */
+.custom-scroll {
+  &::-webkit-scrollbar {
+    width: var(--spacer-100);
+    background-color: transparent;
+    display: block;
+    opacity: 0;
+  }
+
+  &:hover {
+    &::-webkit-scrollbar {
+      opacity: 1;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--ff-base-200);
+      border-radius: var(--radius-0125);
+      width: var(--spacer-050);
+      background-clip: padding-box;
+      border: var(--spacer-025) solid transparent;
+      opacity: 1;
+    }
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    box-shadow: inset 0 0 0 0.0625rem var(--ff-base-600);
+  }
 }
diff --git a/forms-flow-theme/scss/_variables.scss b/forms-flow-theme/scss/_variables.scss
@@ -212,6 +212,33 @@ hr {
   padding-left: 0.3rem !important;
 }
 
+.follow-up-to{
+  .react-datepicker__triangle {
+    left: 270px !important;
+  }
+  .react-datepicker-popper {
+    left: -190px !important;
+  }
+}
+
+.follow-up-from {
+  .react-datepicker-popper {
+    left: -140px !important;
+  }
+  .react-datepicker__triangle {
+    left: 190px !important;
+  }
+}
+
+.preview-list-group{
+  max-height: 45vh;
+  overflow-y: auto;
+}
+.scrollable-overview {
+  max-height: 80vh;
+  overflow-y: auto; 
+}
+
 @mixin generate-overflow($axis, $value) {
   .overflow-#{$axis}-#{$value} {
     overflow-#{$axis}: #{$value} !important;

diff --git a/forms-flow-theme/scss/external/formio.scss b/forms-flow-theme/scss/external/formio.scss
@@ -91,4 +91,24 @@ $secondary: var(--ff-secondary);
         }
       }
     }
-
+
+.formio-form {
+  .formio-component-tabs {
+    li {
+      .form-group {
+        margin-bottom: 0rem;
+      }
+      .editgrid-actions {
+        margin-top: 1rem;
+      }
+      .formio-component-textfield {
+        margin-bottom: 1rem;
+      }
+    }
+  }
+}
+
+.ace_scrollbar-h {
+  display: block;
+  scrollbar-width: thin;
+}