Merge pull request AOT-Technologies#2323 from fahad-aot/feature/FWF-3…

…765-Create-reusable-info-component feature/FWF:3765-Added info component
auslin-aot · Nov 1, 2024 · 7664fe7 · 7664fe7
2 parents cc93065 + a3e61b2
commit 7664fe7
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 54 deletions.
diff --git 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
@@ -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,16 @@ const List = React.memo((props) => {
       setFormSubmitted(false);
     });
   };
+  console.log(form,"form");
+
+  const onChangeCheckBox = () => {
+    const newWizardChecked = !wizardChecked;
+    setWizardChecked(newWizardChecked);
+    setForm(prevForm => ({
+      ...prevForm,
+      display: newWizardChecked ? "wizard" : "form"
+    }));
+  };
 
   return (
     <>
@@ -307,7 +318,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 +360,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
@@ -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
@@ -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
@@ -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(setDmnSearchText(""));
+    }
+  }, [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
@@ -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
@@ -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
@@ -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}
               />
             )}