From 239535d85d122b9c3ed5b65655193218c74a7af2 Mon Sep 17 00:00:00 2001
From: fahad-aot <fahad.k@aot-technologies.com>
Date: Fri, 1 Nov 2024 04:31:36 -0700
Subject: [PATCH 1/4] feature/FWF:3765-Added info component

---
 .../components/Form/EditForm/FormSettings.js  | 28 ++++--------------
 forms-flow-web/src/components/Form/List.js    | 13 ++++++++-
 .../src/components/Modals/ActionModal.js      | 13 ++++++---
 .../src/components/Modals/ImportModal.js      | 29 ++++---------------
 .../src/components/Modeler/DecisionTable.js   |  7 ++++-
 .../src/components/Modeler/SubFlowTable.js    |  6 ++++
 .../src/components/Modeler/index.js           |  2 +-
 .../src/components/PrivateRoute.jsx           |  2 +-
 8 files changed, 46 insertions(+), 54 deletions(-)

diff --git a/forms-flow-web/src/components/Form/EditForm/FormSettings.js b/forms-flow-web/src/components/Form/EditForm/FormSettings.js
index f884726558..7afa159289 100644
--- a/forms-flow-web/src/components/Form/EditForm/FormSettings.js
+++ b/forms-flow-web/src/components/Form/EditForm/FormSettings.js
@@ -8,7 +8,7 @@ import React, {
 import { Form, FormControl, InputGroup } from "react-bootstrap";
 import {
   CopyIcon,
-  InfoIcon,
+  CustomInfo,
   CustomRadioButton,
   FormInput,
   FormTextArea,
@@ -220,17 +220,8 @@ const FormSettings = forwardRef((props, ref) => {
           maxRows={3}
           minRows={3}
         />
-        <div className="info-panel">
-          <div className="d-flex align-items-center">
-            <InfoIcon />
-            <div className="field-label ms-2">{t("Note")}</div>
-          </div>
-          <div className="info-content">
-            {t(
-              "Allowing the addition of multiple pages in a single form will prevent you from using this form in a bundle later."
-            )}
-          </div>
-        </div>
+        <CustomInfo heading="Note" 
+        content="Allowing the addition of multiple pages in a single form will prevent you from using this form in a bundle later." />
 
         <Form.Check
           data-testid="form-edit-wizard-display"
@@ -378,17 +369,8 @@ const FormSettings = forwardRef((props, ref) => {
       <div className="modal-hr" />
       <div className="section">
         <h5 className="fw-bold">{t("Link for this form")}</h5>
-        <div className="info-panel">
-          <div className="d-flex align-items-center">
-            <InfoIcon />
-            <div className="field-label ms-2">{t("Note")}</div>
-          </div>
-          <div className="info-content">
-            {t(
-              "Making changes to your form URL will make your form inaccessible from your current URL."
-            )}
-          </div>
-        </div>
+        <CustomInfo heading="Note" 
+        content="Making changes to your form URL will make your form inaccessible from your current URL." />
         <Form.Group className="settings-input w-100" controlId="url-input">
           <Form.Label className="field-label">{t("URL Path")}</Form.Label>
           <InputGroup className="url-input">
diff --git a/forms-flow-web/src/components/Form/List.js b/forms-flow-web/src/components/Form/List.js
index 97690d0882..c0e25c57d0 100644
--- a/forms-flow-web/src/components/Form/List.js
+++ b/forms-flow-web/src/components/Form/List.js
@@ -50,6 +50,7 @@ const List = React.memo((props) => {
   const [importFormModal, setImportFormModal] = useState(false);
   const [importError, setImportError] = useState("");
   const [importLoader, setImportLoader] = useState(false);
+  const [wizardChecked,setWizardChecked] = useState(false);
   const ActionType = {
     BUILD: "BUILD",
     IMPORT: "IMPORT"
@@ -292,6 +293,14 @@ const List = React.memo((props) => {
       setFormSubmitted(false);
     });
   };
+  console.log(form,"form");
+  
+  const onChangeCheckBox = ()=>{
+    setWizardChecked(!wizardChecked);
+    if(wizardChecked){
+      setForm(prevForm=>({...prevForm,display:"wizard"}));
+    }
+  };
 
   return (
     <>
@@ -307,7 +316,6 @@ const List = React.memo((props) => {
             <>
               <div className="d-md-flex justify-content-between align-items-center pb-3 flex-wrap">
                 <div className="d-md-flex align-items-center p-0 search-box input-group input-group width-25">
-
                   <CustomSearch
                     search={search}
                     setSearch={setSearch}
@@ -350,6 +358,9 @@ const List = React.memo((props) => {
                     setNameError={setNameError}
                     nameValidationOnBlur={validateFormNameOnBlur}
                     nameError={nameError}
+                    buildForm={true}
+                    checked = {wizardChecked}
+                    setChecked={onChangeCheckBox}
                   />
                   <ImportModal
                     importLoader={importLoader}
diff --git a/forms-flow-web/src/components/Modals/ActionModal.js b/forms-flow-web/src/components/Modals/ActionModal.js
index fcdcda0d27..fe15d1e01f 100644
--- a/forms-flow-web/src/components/Modals/ActionModal.js
+++ b/forms-flow-web/src/components/Modals/ActionModal.js
@@ -1,7 +1,6 @@
 import React from "react";
 import Modal from "react-bootstrap/Modal";
-import { CustomButton } from "@formsflow/components";
-import { DuplicateIcon, ImportIcon, PencilIcon, SaveTemplateIcon, CloseIcon, TrashIcon } from "@formsflow/components";
+import { DuplicateIcon, ImportIcon, PencilIcon, SaveTemplateIcon, CloseIcon, TrashIcon, CustomInfo, CustomButton } from "@formsflow/components";
 
 const ActionModal = React.memo(({ newActionModal, onClose, CategoryType, onAction, published }) => {
       const handleAction = (actionType)=>{
@@ -20,9 +19,15 @@ const ActionModal = React.memo(({ newActionModal, onClose, CategoryType, onActio
                     <CloseIcon onClick={onClose} color="#253DF4" />
                     </div>
                 </Modal.Header>
-                <Modal.Body className="modal-body d-flex justify-content-around custom-modal-body">
+                <Modal.Body className="modal-body custom-modal-body">
+                    {published && 
+                    <CustomInfo 
+                    heading="Note"
+                    content="Importing and deleting is not available when the form is published.
+                     You must unpublish the form first if you wish to make any changes"
+                    />}
                     {CategoryType === "FORM" && (
-                        <div className="d-flex custom-action-flex action-form">
+                        <div className="custom-action-flex action-form">
 
                             <CustomButton
                                 variant="secondary"
diff --git a/forms-flow-web/src/components/Modals/ImportModal.js b/forms-flow-web/src/components/Modals/ImportModal.js
index 07dd3a0f29..d5308204d1 100644
--- a/forms-flow-web/src/components/Modals/ImportModal.js
+++ b/forms-flow-web/src/components/Modals/ImportModal.js
@@ -3,7 +3,7 @@ import Modal from "react-bootstrap/Modal";
 import ProgressBar from "react-bootstrap/ProgressBar";
 import Dropdown from 'react-bootstrap/Dropdown';
 import { Translation } from "react-i18next";
-import { CloseIcon, CustomButton, UploadIcon, SuccessIcon, FailedIcon, IButton, DropdownIcon } from "@formsflow/components";
+import { CloseIcon, CustomButton, UploadIcon, SuccessIcon, FailedIcon, CustomInfo, DropdownIcon } from "@formsflow/components";
 
 const ImportModal = React.memo(({ importFormModal, onClose, formSubmitted,
     uploadActionType, importError, importLoader, formName, description,
@@ -114,19 +114,10 @@ const ImportModal = React.memo(({ importFormModal, onClose, formSubmitted,
                             {importError && <span className="upload-status-error">{importError}</span>}
                         </div>
                         {importError && importError.includes("already exists") &&
-                            <div className="import-error-note">
-                                <div className="d-flex gap-2 align-items-center">
-                                    <IButton />
-                                    <Translation>{(t) => t("Note")}</Translation>
-                                </div>
-                                <div>
-                                    <Translation>
-                                        {(t) => t(`If you want to replace an existing form,
+                        <CustomInfo Heading="Note" Content='If you want to replace an existing form,
                                          open the form in the design menu that you want to 
-                                         update, click "Actions", and then click "Import".`
-                                        )}
-                                    </Translation></div>
-                            </div>}
+                                         update, click "Actions", and then click "Import".' />
+                            }
                         <div>
                             {importError && !importError.includes("already exists")
                                 && <span className="upload-status-error"><Translation>{(t) =>
@@ -137,17 +128,9 @@ const ImportModal = React.memo(({ importFormModal, onClose, formSubmitted,
                         item?.majorVersion != null || item?.minorVersion != null) && (
                             <div className="import-container">
                                 {/* First Row */}
-                                <div className="import-error-note d-block">
 
-                                    <div className="mx-2 d-flex align-items-center">
-                                        <IButton />
-                                        <span className="ms-2">
-                                            <Translation>
-                                                {(t) => t("Import will create a new version.")}
-                                            </Translation>
-                                        </span>
-                                    </div>
-                                </div>
+                                <CustomInfo heading="Import will create a new version." />
+
                                 <div className="import-details">
                                     <div className="file-item-header-text">Type</div>
                                     <div className="file-item-header-text">Import</div>
diff --git a/forms-flow-web/src/components/Modeler/DecisionTable.js b/forms-flow-web/src/components/Modeler/DecisionTable.js
index 9b82a0a090..0c225470ad 100644
--- a/forms-flow-web/src/components/Modeler/DecisionTable.js
+++ b/forms-flow-web/src/components/Modeler/DecisionTable.js
@@ -32,7 +32,12 @@ const DecisionTable = React.memo(() => {
   const [searchDmnLoading, setSearchDmnLoading] = useState(false);
   const redirectUrl = MULTITENANCY_ENABLED ? `/tenant/${tenantKey}/` : "/";
   const [search, setSearch] = useState(searchText || "");
-
+  
+  useEffect(() => {
+    if (!search?.trim()) {
+      dispatch(setBpmnSearchText(""));
+    }
+  }, [search]);
   useEffect(() => {
     setIsLoading(true);
     dispatch(
diff --git a/forms-flow-web/src/components/Modeler/SubFlowTable.js b/forms-flow-web/src/components/Modeler/SubFlowTable.js
index 843d3f071c..63316b0f70 100644
--- a/forms-flow-web/src/components/Modeler/SubFlowTable.js
+++ b/forms-flow-web/src/components/Modeler/SubFlowTable.js
@@ -34,6 +34,12 @@ const SubFlow = React.memo(() => {
     modified: { sortOrder: "asc" },
     status: { sortOrder: "asc" },
   });
+
+  useEffect(() => {
+    if (!search?.trim()) {
+      dispatch(setBpmnSearchText(""));
+    }
+  }, [search]);
   useEffect(() => {
     setIsLoading(true);
     dispatch(
diff --git a/forms-flow-web/src/components/Modeler/index.js b/forms-flow-web/src/components/Modeler/index.js
index 5bf7dc6a32..3998eac2d9 100644
--- a/forms-flow-web/src/components/Modeler/index.js
+++ b/forms-flow-web/src/components/Modeler/index.js
@@ -41,7 +41,7 @@ const Processes = () => {
     <div data-testid="Process-index">
       <Switch>
         <Route exact path={`${BASE_ROUTE}subflow`} component={SubFlowList} />
-        <Route exact path={`${BASE_ROUTE}descision-table`} component={descisiontable} />
+        <Route exact path={`${BASE_ROUTE}decision-table`} component={descisiontable} />
         <DesignerProcessRoute
           exact
           path={`${BASE_ROUTE}subflow/create`}
diff --git a/forms-flow-web/src/components/PrivateRoute.jsx b/forms-flow-web/src/components/PrivateRoute.jsx
index 715eef01be..f69ddaecbd 100644
--- a/forms-flow-web/src/components/PrivateRoute.jsx
+++ b/forms-flow-web/src/components/PrivateRoute.jsx
@@ -333,7 +333,7 @@ const PrivateRoute = React.memo((props) => {
             )}
             {ENABLE_PROCESSES_MODULE && (
               <DesignerRoute
-                path={`${BASE_ROUTE}descision-table`}
+                path={`${BASE_ROUTE}decision-table`}
                 component={Modeler}
               />
             )}

From e4160ac6946f72249ccfd7b4d1bdc2af453d7ecc Mon Sep 17 00:00:00 2001
From: fahad-aot <fahad.k@aot-technologies.com>
Date: Fri, 1 Nov 2024 04:47:30 -0700
Subject: [PATCH 2/4] Updated

---
 forms-flow-web/src/components/Form/List.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/forms-flow-web/src/components/Form/List.js b/forms-flow-web/src/components/Form/List.js
index c0e25c57d0..d7b8b71f16 100644
--- a/forms-flow-web/src/components/Form/List.js
+++ b/forms-flow-web/src/components/Form/List.js
@@ -295,11 +295,13 @@ const List = React.memo((props) => {
   };
   console.log(form,"form");
   
-  const onChangeCheckBox = ()=>{
-    setWizardChecked(!wizardChecked);
-    if(wizardChecked){
-      setForm(prevForm=>({...prevForm,display:"wizard"}));
-    }
+  const onChangeCheckBox = () => {
+    const newWizardChecked = !wizardChecked;
+    setWizardChecked(newWizardChecked);
+    setForm(prevForm => ({
+      ...prevForm,
+      display: newWizardChecked ? "wizard" : "form"
+    }));
   };
 
   return (

From 9fa2c433aa4e4859d247c1ce9af64de1671b0964 Mon Sep 17 00:00:00 2001
From: fahad-aot <fahad.k@aot-technologies.com>
Date: Fri, 1 Nov 2024 05:12:40 -0700
Subject: [PATCH 3/4] typo fix

---
 forms-flow-web/src/components/Modeler/DecisionTable.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/forms-flow-web/src/components/Modeler/DecisionTable.js b/forms-flow-web/src/components/Modeler/DecisionTable.js
index 0c225470ad..cd3ed36110 100644
--- a/forms-flow-web/src/components/Modeler/DecisionTable.js
+++ b/forms-flow-web/src/components/Modeler/DecisionTable.js
@@ -35,7 +35,7 @@ const DecisionTable = React.memo(() => {
   
   useEffect(() => {
     if (!search?.trim()) {
-      dispatch(setBpmnSearchText(""));
+      dispatch(setDmnSearchText(""));
     }
   }, [search]);
   useEffect(() => {

From a3e61b2a7fe5cd6e171304578c3d673931edfb8d Mon Sep 17 00:00:00 2001
From: fahad-aot <fahad.k@aot-technologies.com>
Date: Fri, 1 Nov 2024 05:17:57 -0700
Subject: [PATCH 4/4] Updated

---
 forms-flow-web/src/components/Modals/ImportModal.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/forms-flow-web/src/components/Modals/ImportModal.js b/forms-flow-web/src/components/Modals/ImportModal.js
index d5308204d1..41464f3e78 100644
--- a/forms-flow-web/src/components/Modals/ImportModal.js
+++ b/forms-flow-web/src/components/Modals/ImportModal.js
@@ -114,7 +114,7 @@ const ImportModal = React.memo(({ importFormModal, onClose, formSubmitted,
                             {importError && <span className="upload-status-error">{importError}</span>}
                         </div>
                         {importError && importError.includes("already exists") &&
-                        <CustomInfo Heading="Note" Content='If you want to replace an existing form,
+                        <CustomInfo heading="Note" content='If you want to replace an existing form,
                                          open the form in the design menu that you want to 
                                          update, click "Actions", and then click "Import".' />
                             }