From cee82e6a434f7bb83776a2102c72fff2cd09aea5 Mon Sep 17 00:00:00 2001
From: shuhaib s <95394061+shuhaib-aot@users.noreply.github.com>
Date: Tue, 14 Nov 2023 16:01:10 +0530
Subject: [PATCH 1/3] fixed drop down issue in form table and process tab
 pagination issues (#1715)

* button padding fix

* fixed drop down issue in form table and process tab pagination issues
---
 .../components/Form/Steps/PreviewStepper.js   |  19 ++--
 .../Form/Steps/TaskvariableCreate.js          |  11 +-
 .../components/Form/constants/FormTable.js    | 107 ++++++++----------
 .../Modeler/Editors/BpmnEditor/index.js       |  18 +--
 .../components/Modeler/constants/bpmnTable.js |  11 +-
 .../components/Modeler/constants/dmnTable.js  |  11 +-
 6 files changed, 88 insertions(+), 89 deletions(-)

diff --git a/forms-flow-web/src/components/Form/Steps/PreviewStepper.js b/forms-flow-web/src/components/Form/Steps/PreviewStepper.js
index dc476bc743..6fb3d23399 100644
--- a/forms-flow-web/src/components/Form/Steps/PreviewStepper.js
+++ b/forms-flow-web/src/components/Form/Steps/PreviewStepper.js
@@ -404,8 +404,9 @@ const Preview = React.memo(
                             </Popover>
                           )}
                         >
-                          <Button id="addDesigner" className="btn btn-primary btn-md form-btn pull-left btn-left">
-                            <Translation>{(t) => t("Add")}</Translation> <b>+</b>
+                          <Button id="addDesigner" className="btn btn-primary  btn-small">
+                          <i className="fa-solid fa-plus mr-2"></i>
+                            <Translation>{(t) => t("Add")}</Translation>
                           </Button>
                         </OverlayTrigger>
                       </div>
@@ -415,7 +416,7 @@ const Preview = React.memo(
                   </div>
                   <div>
                     <div>
-                      <hr className="mt-1" />
+                      <hr className="mt-3" />
                       <span
                         className="font-weight-bold"
                         title={t(
@@ -492,8 +493,9 @@ const Preview = React.memo(
                               </Popover>
                             )}
                           >
-                            <Button id="addClient" className="btn btn-primary btn-md form-btn pull-left btn-left">
-                              <Translation>{(t) => t("Add")}</Translation> <b>+</b>
+                            <Button id="addClient" className="btn btn-primary btn-small ">
+                            <i className="fa-solid fa-plus mr-2"></i>
+                              <Translation>{(t) => t("Add")}</Translation>
                             </Button>
                           </OverlayTrigger>
                         </div>
@@ -504,7 +506,7 @@ const Preview = React.memo(
 
                     <div>
                       <div>
-                        <hr className="mt-1" />
+                        <hr className="mt-3" />
                         <span
                           className="font-weight-bold"
                           title={t("Permission for submission tracking.")}
@@ -584,8 +586,9 @@ const Preview = React.memo(
                                 </Popover>
                               )}
                             >
-                              <Button id="addReviewer" className="btn btn-primary btn-md form-btn pull-left btn-left">
-                                <Translation>{(t) => t("Add")}</Translation> <b>+</b>
+                              <Button id="addReviewer" className="btn btn-primary  btn-small ">
+                              <i className="fa-solid fa-plus mr-2"></i>
+                                <Translation>{(t) => t("Add")}</Translation>
                               </Button>
                             </OverlayTrigger>
                           </div>
diff --git a/forms-flow-web/src/components/Form/Steps/TaskvariableCreate.js b/forms-flow-web/src/components/Form/Steps/TaskvariableCreate.js
index a42102f38e..e0afc8b479 100644
--- a/forms-flow-web/src/components/Form/Steps/TaskvariableCreate.js
+++ b/forms-flow-web/src/components/Form/Steps/TaskvariableCreate.js
@@ -52,7 +52,7 @@ const TaskvariableCreate = ({ options, addTaskVariable }) => {
             inputId="selectTaskVariable"
           />
         </Col>
-        <Col xs={12} md={2}>
+        <Col xs={12} md={3}>
           <label>{t("Label")}</label>
           <input
             type="text"
@@ -64,13 +64,14 @@ const TaskvariableCreate = ({ options, addTaskVariable }) => {
             placeholder={t("Enter Label")}
           />
         </Col>
-        <Col xs={12} md={2}>
+        <Col xs={12} md={3}>
 
           <Form.Group controlId="showInListCheckbox" style={{ marginTop: "34px" }}>
             <div className="d-flex align-items-center mt-3 mr-4">
               <Form.Label className="mr-2">{t("Show in list")}</Form.Label>
               <Form.Check
                 type="checkbox"
+
                 onChange={() => {
                   setShowInList(!showInList);
                 }}
@@ -79,15 +80,15 @@ const TaskvariableCreate = ({ options, addTaskVariable }) => {
           </Form.Group>
         </Col>
 
-        <Col xs={12} md={1}>
+        <Col xs={12} md={2}>
           <Button
-            style={{ marginTop: "30px" }}
+            style={{ marginTop: "25px" }}
             variant="outline-primary"
             onClick={() => {
               addTask();
             }}
           >
-            <i className="fa fa-check"></i> {t("Add")}
+            <i className="fa fa-check mr-2"></i> {t("Add")}
           </Button>
         </Col>
       </Row>
diff --git a/forms-flow-web/src/components/Form/constants/FormTable.js b/forms-flow-web/src/components/Form/constants/FormTable.js
index f48eb3622a..32a73c74e0 100644
--- a/forms-flow-web/src/components/Form/constants/FormTable.js
+++ b/forms-flow-web/src/components/Form/constants/FormTable.js
@@ -1,9 +1,8 @@
-/* eslint-disable */
+
 import React, { useState, useEffect } from "react";
 import {
   InputGroup,
   FormControl,
-  DropdownButton,
   Dropdown,
 } from "react-bootstrap";
 import { useDispatch, useSelector } from "react-redux";
@@ -14,8 +13,7 @@ import {
   setBPMFormListPage,
   setBPMFormListSort,
   setBpmFormSearch,
-  setFormDeleteStatus,
-  // setBpmFormType,
+  setFormDeleteStatus, 
 } from "../../../actions/formActions";
 import SelectFormForDownload from "../FileUpload/SelectFormForDownload";
 import LoadingOverlay from "react-loading-overlay";
@@ -28,7 +26,7 @@ import {
 import { useTranslation } from "react-i18next";
 import { Translation } from "react-i18next";
 import { getAllApplicationCount, getFormProcesses, resetFormProcessData } from "../../../apiManager/services/processServices";
-import { setIsApplicationCountLoading, setResetProcess } from "../../../actions/processActions";
+import { setIsApplicationCountLoading } from "../../../actions/processActions";
 import { HelperServices } from "@formsflow/service";
 import _ from "lodash";
 
@@ -52,18 +50,7 @@ function FormTable() {
   const searchText = useSelector((state) => state.bpmForms.searchText);
   const [search, setSearch] = useState(searchText || "");
   const redirectUrl = MULTITENANCY_ENABLED ? `/tenant/${tenantKey}/` : "/";
-
-  const [openIndex, setOpenIndex] = useState(-1); // -1 means no dropdown open
-
-  const toggleDropdown = (index) => {
-    if (openIndex === index) {
-      // Clicking on the currently open row should close it
-      setOpenIndex(-1);
-    } else {
-      // Clicking on a different row should open it and close the previous one
-      setOpenIndex(index);
-    }
-  };
+  const isApplicationCountLoading = useSelector((state) => state.process.isApplicationCountLoading);
 
   const pageOptions = [
     {
@@ -92,12 +79,7 @@ function FormTable() {
     dispatch(setBPMFormListSort(updatedSort));
     dispatch(setBPMFormListPage(1));
   };
-
-  // const handleTypeChange = (type) => {
-  //   dispatch(setBPMFormListPage(1));
-  //   dispatch(setBPMFormLimit(5));
-  //   dispatch(setBpmFormType(type));
-  // };
+ 
 
   useEffect(() => {
     setSearch(searchText);
@@ -116,13 +98,12 @@ function FormTable() {
 
   const viewOrEditForm = (formId) => {
     dispatch(resetFormProcessData());
-    dispatch(setResetProcess());
     dispatch(push(`${redirectUrl}formflow/${formId}/view-edit`));
   };
 
   const submitNewForm = (formId)=>{
     dispatch(push(`${redirectUrl}form/${formId}`));
-  }
+  };
 
   const handleClearSearch = () => {
     setSearch("");
@@ -147,16 +128,7 @@ function FormTable() {
     </button>
   );
 
-  const submitNew = (formData) => {
-    return (
-      <button
-        className="btn btn-link mt-2"
-        onClick={() => submitNewForm(formData._id)}
-      >
-        <Translation>{(t) => t("Submit New")}</Translation>
-      </button>
-    );
-  };
+ 
 
   const deleteForms = (formData) => {
     dispatch(setIsApplicationCountLoading(true));
@@ -183,6 +155,21 @@ function FormTable() {
       })
     );
   };
+
+  const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
+    <button
+      className="btn btn-link text-dark"
+      ref={ref}
+      onClick={(e) => {
+        e.preventDefault();
+        onClick(e);
+      }}
+    >
+      {children}
+    </button>
+  ));
+
+
   
   const noDataFound = () => {
     return (
@@ -203,7 +190,7 @@ function FormTable() {
   };
   return (
     <>
-      <LoadingOverlay active={searchFormLoading} spinner text="Loading...">
+      <LoadingOverlay active={searchFormLoading || isApplicationCountLoading} spinner text="Loading...">
         <div style={{ minHeight: "400px" }}>
           <table className="table custom-table table-responsive-sm">
             <thead>
@@ -301,38 +288,44 @@ function FormTable() {
                       <td>{e.anonymous ? t("Anonymous") : t("Private")}</td>
                       <td>
                         {" "}
-                        <button 
-                          className={`btn ${e.status === 'active' ? 'published-forms-label' : 'unpublished-forms-label'}`}
+                        <span 
+                          className={`badge rounded-pill px-3 py-2 ${e.status === 'active' ? 'published-forms-label' : 'unpublished-forms-label'}`}
                         >
                           {e.status === 'active' ? t("Published") : t("Unpublished")}
-                        </button>
+                        </span>
                       </td>
 
                       <td>
                         <span> {viewOrEdit(e)}</span>
                       </td>
                        
-                      <td style={{ position: "relative" }}>
-                        <div
-                          className="dots mb-2 mr-5"
-                          onClick={() => toggleDropdown(index)}
-                        >
-                          ...
-                        </div>
-                        {openIndex === index && (
-                          <Dropdown className="shadow position-absolute bg-white" style={{zIndex:99}}>
+                      <td>
+                    
+                            <Dropdown  >
+                          <Dropdown.Toggle
+                            as={CustomToggle} 
+                            id="dropdown-basic"
+                          >
+                            <i className="fa-solid fa-ellipsis"></i>
+                          </Dropdown.Toggle>
+                          <Dropdown.Menu className="shadow  bg-white">
+                            {userRoles.includes(STAFF_REVIEWER) ||
+                            userRoles.includes(CLIENT) ? (
+                              <Dropdown.Item
+                                onClick={() => {
+                                  submitNewForm(e?._id);
+                                }}
+                              >
+                                <i className="fa fa-pencil mr-2 text-primary" />
+                                {t("Submit New")}
+                              </Dropdown.Item>
+                            ) : null}
                             <Dropdown.Item onClick={() => deleteForms(e)}>
                               <i className="fa fa-trash mr-2 text-danger" />
                               {t("Delete")}
                             </Dropdown.Item>
-                           {(userRoles.includes(STAFF_REVIEWER) || userRoles.includes(CLIENT))?(
-                             <Dropdown.Item onClick={() => {console.log(e);submitNewForm(e?._id)}}>
-                             <i className="fa fa-pencil mr-2 text-primary" />
-                             {t("Submit New")}
-                           </Dropdown.Item>
-                           ) : null}
-                          </Dropdown>
-                        )}
+                          </Dropdown.Menu>
+                        </Dropdown>
                       </td>
                     </tr>
                   );
@@ -372,7 +365,7 @@ function FormTable() {
                 </Dropdown.Menu>
               </Dropdown>
             <span className="ml-2">
-              {t("Showing")} {limit * pageNo - (limit - 1)} {t("to")}{" "}
+              {t("Showing")} {(limit * pageNo) - (limit - 1)} {t("to")}{" "}
               {limit * pageNo > totalForms ? totalForms : limit * pageNo}{" "}
               {t("of")} {totalForms} {t("results")}
             </span>
diff --git a/forms-flow-web/src/components/Modeler/Editors/BpmnEditor/index.js b/forms-flow-web/src/components/Modeler/Editors/BpmnEditor/index.js
index 90578c874c..11efdb1c00 100644
--- a/forms-flow-web/src/components/Modeler/Editors/BpmnEditor/index.js
+++ b/forms-flow-web/src/components/Modeler/Editors/BpmnEditor/index.js
@@ -54,8 +54,8 @@ export default React.memo(
     const [lintErrors, setLintErrors] = useState([]);
     const [deploymentLoading, setDeploymentLoading] = useState(false);
     const redirectUrl = MULTITENANCY_ENABLED ? `/tenant/${tenantKey}/` : "/";
-    const [processName,setProcessName] = useState(true);
-    const bpmPropertyInput = document.getElementById("bio-properties-panel-name")?.value;
+    // const [processName,setProcessName] = useState(true);
+    // const bpmPropertyInput = document.getElementById("bio-properties-panel-name")?.value;
 
     const containerRef = useCallback((node) => {
       if (node !== null) {
@@ -63,11 +63,11 @@ export default React.memo(
       }
     }, []);
 
-    useEffect(() => {
-      if (bpmPropertyInput) {
-        setProcessName(false);
-      }
-  }, [!bpmPropertyInput]);
+  //   useEffect(() => {
+  //     if (bpmPropertyInput) {
+  //       setProcessName(false);
+  //     }
+  // }, [!bpmPropertyInput]);
 
     const cancel = () => {
       dispatch(push(`${redirectUrl}processes`));
@@ -326,14 +326,14 @@ export default React.memo(
               variant="outline-dark"
               className="ml-3"
               onClick={handleExport}
-              disabled={processName || !bpmPropertyInput}
+              // disabled={processName || !bpmPropertyInput}
             >
               {t("Export")}
             </Button>
             <Button
               className="ml-3"
               onClick={deployProcess}
-              disabled={processName || !bpmPropertyInput}
+              // disabled={processName || !bpmPropertyInput}
             >
               {t("Deploy")}
             </Button>
diff --git a/forms-flow-web/src/components/Modeler/constants/bpmnTable.js b/forms-flow-web/src/components/Modeler/constants/bpmnTable.js
index 3081c13bfc..e8f560aecb 100644
--- a/forms-flow-web/src/components/Modeler/constants/bpmnTable.js
+++ b/forms-flow-web/src/components/Modeler/constants/bpmnTable.js
@@ -46,7 +46,7 @@ function BpmnTable() {
       )
     );
     setCountLoading(true);
-    fetchAllBpmProcessesCount(tenantKey, search)
+    fetchAllBpmProcessesCount(tenantKey, searchText)
       .then((result) => {
         setTotalProcess(result.data?.count || 0);
       })
@@ -96,8 +96,8 @@ function BpmnTable() {
           <table className="table custom-table table-responsive-sm mt-2">
             <thead>
               <tr>
-                <th scope="col">{t("Key")}</th>
                 <th scope="col">{t("Workflow Name")}</th>
+                <th scope="col">{t("Key")}</th>
                 <th scope="col">{t("Type")}</th>
                 <th colSpan="2">
                 <InputGroup className="input-group">
@@ -140,7 +140,7 @@ function BpmnTable() {
                     style={{ height: "300px" }}
                     className="text-center"
                   >
-                    {t("No Process Found")}
+                     { isLoading ? null : t("No Process Found")}
                   </td>
                 </tr>
               </tbody>
@@ -148,13 +148,14 @@ function BpmnTable() {
               <tbody>
                 {process.map((processItem) => (
                   <tr key={processItem.id}>
-                    <td>{processItem.key}</td>
                     <td>{processItem.name}</td>
+                    <td>{processItem.key}</td>
                     <td>{t("BPMN")}</td>
-                    <td>
+                    <td className="d-flex justify-content-end w-100">
                       <Link
                         to={`${redirectUrl}processes/bpmn/${processItem.key}/edit`}
                       > 
+                      <i className="fas fa-edit mr-2"/>
                         {t("Edit Workflow")}
                       </Link>
                     </td>
diff --git a/forms-flow-web/src/components/Modeler/constants/dmnTable.js b/forms-flow-web/src/components/Modeler/constants/dmnTable.js
index 98b8651abb..2b7dcf2dad 100644
--- a/forms-flow-web/src/components/Modeler/constants/dmnTable.js
+++ b/forms-flow-web/src/components/Modeler/constants/dmnTable.js
@@ -48,7 +48,7 @@ function DmnTable() {
       )
     );
     setCountLoading(true);
-    fetchAllDmnProcessesCount(tenantKey, search)
+    fetchAllDmnProcessesCount(tenantKey, searchText)
       .then((result) => {
         setTotalProcess(result.data?.count || 0);
       })
@@ -97,8 +97,8 @@ function DmnTable() {
           <table className="table custom-table  table-responsive-sm mt-2">
             <thead>
               <tr>
-                <th scope="col">{t("Key")}</th>
                 <th scope="col">{t("Workflow Name")}</th>
+                <th scope="col">{t("Key")}</th>
                 <th scope="col">{t("Type")}</th>
                 <th colSpan="2">
                 <InputGroup className="input-group">
@@ -141,7 +141,7 @@ function DmnTable() {
                     style={{ height: "300px" }}
                     className="text-center"
                   >
-                    {t("No DMN Found")}
+                   { isLoading ? null : t("No Process Found")}
                   </td>
                 </tr>
               </tbody>
@@ -149,13 +149,14 @@ function DmnTable() {
               <tbody>
                 {dmn.map((processItem) => (
                   <tr key={processItem.id}>
-                    <td>{processItem.key}</td>
                     <td>{processItem.name}</td>
+                    <td>{processItem.key}</td>
                     <td>{t("DMN")}</td>
-                    <td>
+                    <td className="d-flex justify-content-end w-100">
                       <Link
                         to={`${redirectUrl}processes/dmn/${processItem.key}/edit`}
                       >
+                        <i className="fas fa-edit mr-2"/>
                         {t("Edit Workflow")}
                       </Link>
                     </td>

From fe3aad4808ea60729f69592314a474e99c05f4ce Mon Sep 17 00:00:00 2001
From: fahad-aot <99656326+fahad-aot@users.noreply.github.com>
Date: Tue, 14 Nov 2023 16:03:31 +0530
Subject: [PATCH 2/3] added dropdow for submission status & translation changes
 (#1714)

Co-authored-by: shuhaib s <95394061+shuhaib-aot@users.noreply.github.com>
---
 .../Application/ApplicationFilter.js          | 78 +++++++++++--------
 .../Application/ApplicationTable.js           |  4 +-
 forms-flow-web/src/components/Draft/Edit.js   |  4 +-
 .../src/components/Form/Item/Edit.js          |  4 +-
 .../src/components/Form/Item/View.js          |  4 +-
 .../components/Form/constants/FormTable.js    |  4 +-
 .../components/Modeler/constants/bpmnTable.js |  2 +-
 .../components/Modeler/constants/dmnTable.js  |  2 +-
 8 files changed, 61 insertions(+), 41 deletions(-)

diff --git a/forms-flow-web/src/components/Application/ApplicationFilter.js b/forms-flow-web/src/components/Application/ApplicationFilter.js
index 389bdcf2d3..22e472c632 100644
--- a/forms-flow-web/src/components/Application/ApplicationFilter.js
+++ b/forms-flow-web/src/components/Application/ApplicationFilter.js
@@ -5,13 +5,16 @@ import { useDispatch, useSelector } from "react-redux";
 import { getAllApplications } from "../../apiManager/services/applicationServices";
 import { useTranslation } from "react-i18next";
 
-const ApplicationFilter = ({ setDisplayFilter,filterParams,setFilterParams }) => {
+const ApplicationFilter = ({ setDisplayFilter, filterParams, setFilterParams }) => {
   const dispatch = useDispatch();
   const createSearchNode = useRef();
-  const [applicationId,setApplicationId] = useState(filterParams.id || "");
-  const [applicationName,setApplicationName] = useState(filterParams.applicationName || "");
-  const [applicationStatus,setApplicationStatus] = useState(filterParams.applicationStatus || "");
-  const [lastModified,setLastModified] = useState(filterParams.modified || null);
+  const [applicationId, setApplicationId] = useState(filterParams.id || "");
+  const [applicationName, setApplicationName] = useState(filterParams.applicationName || "");
+  const [applicationStatus, setApplicationStatus] = useState(filterParams.applicationStatus || "");
+  const [lastModified, setLastModified] = useState(filterParams.modified || null);
+  const applicationStatusOptions = useSelector(
+    (state) => state.applications.applicationStatus
+  );
   const pageNo = useSelector((state) => state.applications?.activePage);
   const limit = useSelector((state) => state.applications?.countPerPage);
   const { t } = useTranslation();
@@ -42,30 +45,37 @@ const ApplicationFilter = ({ setDisplayFilter,filterParams,setFilterParams }) =>
     setApplicationName("");
     setLastModified(null);
     setFilterParams({});
-    let filters =  {
-    applicationName:null,
-    id:null,
-    applicationStatus:null,
-    modified:null,
-    page:pageNo,
-    limit:limit,
+    let filters = {
+      applicationName: null,
+      id: null,
+      applicationStatus: null,
+      modified: null,
+      page: pageNo,
+      limit: limit,
     };
     dispatch(getAllApplications(filters));
   };
 
-  const applyFilters = ()=>{
+  const applyFilters = () => {
     let filterParams = {
-        applicationName:applicationName,
-        id:applicationId,
-        applicationStatus:applicationStatus,
-        modified:lastModified,
-        page:pageNo,
-        limit:limit,
+      applicationName: applicationName,
+      id: applicationId,
+      applicationStatus: applicationStatus,
+      modified: lastModified,
+      page: pageNo,
+      limit: limit,
     };
     setFilterParams(filterParams);
     dispatch(getAllApplications(filterParams));
   };
 
+  const getApplicationStatusOptions = (applicationStatusOptions) => {
+    const selectOptions = applicationStatusOptions.map((option) => {
+      return { value: option, label: option };
+    });
+    return selectOptions;
+  };
+
   return (
     <div
       className="Filter-listview "
@@ -87,7 +97,7 @@ const ApplicationFilter = ({ setDisplayFilter,filterParams,setFilterParams }) =>
       <div className="m-4 px-2">
         <Row className="mt-2">
           <Col>
-          <label>{t("Submission Id")}</label>
+            <label>{t("Submission Id")}</label>
             <input
               className="form-control"
               placeholder=""
@@ -96,7 +106,7 @@ const ApplicationFilter = ({ setDisplayFilter,filterParams,setFilterParams }) =>
             />
           </Col>
           <Col>
-          <label>{t("Form Title")}</label>
+            <label>{t("Form Title")}</label>
             <input
               className="form-control"
               placeholder=""
@@ -110,16 +120,22 @@ const ApplicationFilter = ({ setDisplayFilter,filterParams,setFilterParams }) =>
       <div className="m-4 px-2">
         <Row className="mt-2">
           <Col>
-          <label>{t("Submission Status")}</label>
-            <input
-              className="form-control"
-              placeholder=""
+            <label>{t("Submission Status")}</label>
+            <select
               value={applicationStatus}
               onChange={(e) => setApplicationStatus(e.target.value)}
-            />
+              className="form-control p-1"
+            >
+              <option value=""></option>
+              {getApplicationStatusOptions(applicationStatusOptions).map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
           </Col>
           <Col className="mr-2" >
-          <label>{t("Modified Date")}</label>
+            <label>{t("Modified Date")}</label>
             <DateRangePicker
               onChange={(selectedRange) => {
                 onSetDateRange(selectedRange);
@@ -144,7 +160,7 @@ const ApplicationFilter = ({ setDisplayFilter,filterParams,setFilterParams }) =>
             className="text-danger small "
             onClick={() => clearAllFilters()}
           >
-             {t("Clear All Filters")}
+            {t("Clear All Filters")}
           </span>
         </Col>
         <Col className="text-right">
@@ -152,11 +168,11 @@ const ApplicationFilter = ({ setDisplayFilter,filterParams,setFilterParams }) =>
             className="btn btn-light mr-1 "
             onClick={() => setDisplayFilter(false)}
           >
-           {t("Cancel")}
+            {t("Cancel")}
           </button>
           <button
             className="btn btn-dark"
-              onClick={() => applyFilters()}
+            onClick={() => applyFilters()}
           >
             {t("Show results")}
           </button>
@@ -166,4 +182,4 @@ const ApplicationFilter = ({ setDisplayFilter,filterParams,setFilterParams }) =>
   );
 };
 
-export default ApplicationFilter;
+export default ApplicationFilter;
\ No newline at end of file
diff --git a/forms-flow-web/src/components/Application/ApplicationTable.js b/forms-flow-web/src/components/Application/ApplicationTable.js
index cd68d6f70d..cd0262d337 100644
--- a/forms-flow-web/src/components/Application/ApplicationTable.js
+++ b/forms-flow-web/src/components/Application/ApplicationTable.js
@@ -122,9 +122,9 @@ const ApplicationTable = () => {
         <table className="table custom-table table-responsive-sm">
           <thead>
             <tr>
-              <th>{t("Id")}</th>
+              <th>{t("Submission Id")}</th>
               <th>{t("Form Title")}</th>
-              <th>{t("Status")}</th>
+              <th>{t("Submission Status")}</th>
               <th>{t("Last Modified")}</th>
               <th colSpan="4">
                 <div className="d-flex justify-content-end filter-sort-bar mt-1">
diff --git a/forms-flow-web/src/components/Draft/Edit.js b/forms-flow-web/src/components/Draft/Edit.js
index 63ae283ef6..113eddede5 100644
--- a/forms-flow-web/src/components/Draft/Edit.js
+++ b/forms-flow-web/src/components/Draft/Edit.js
@@ -436,7 +436,9 @@ const mapDispatchToProps = (dispatch, ownProps) => {
     onCustomEvent: (customEvent, redirectUrl) => {
       switch (customEvent.type) {
         case CUSTOM_EVENT_TYPE.CUSTOM_SUBMIT_DONE:
-          toast.success("Submission Saved.");
+          toast.success(
+            <Translation>{(t) => t("Submission Saved")}</Translation>
+          );
           dispatch(push(`${redirectUrl}draft`));
           break;
         case CUSTOM_EVENT_TYPE.CANCEL_SUBMISSION:
diff --git a/forms-flow-web/src/components/Form/Item/Edit.js b/forms-flow-web/src/components/Form/Item/Edit.js
index dff0cf8d1f..02eff935c0 100644
--- a/forms-flow-web/src/components/Form/Item/Edit.js
+++ b/forms-flow-web/src/components/Form/Item/Edit.js
@@ -510,7 +510,7 @@ const Edit = React.memo(() => {
  
             <i className="fa-solid fa-file-lines" aria-hidden="true" /> &nbsp;{" "}
             {formData.title}
-            <span className="text-success h5 ml-2">(Version {version})</span>
+          <span className="text-success h5 ml-2">({t("Version")} {version})</span>
           </h3>
           
         <div className="d-flex flex-md-row flex-column  align-items-md-center flex-wrap justify-content-end">
@@ -678,7 +678,7 @@ const Edit = React.memo(() => {
                 <div className="mt-3">
                   <div className="d-flex align-items-center cursor-pointer" onClick={handleToggle}>
                     <i className={`fa ${open ? 'fa-chevron-up' : 'fa-chevron-down'} mr-2`}></i>
-                    <span className="text-primary font-weight-bold mr-4">Advanced Options</span>
+                    <span className="text-primary font-weight-bold mr-4">{t("Advanced Options")}</span>
                     <hr className="flex-grow-1 ml-2 mr-2" />
                   </div>
                   <Collapse in={open} className="mt-3">
diff --git a/forms-flow-web/src/components/Form/Item/View.js b/forms-flow-web/src/components/Form/Item/View.js
index 1c5d597940..f5f41fc096 100644
--- a/forms-flow-web/src/components/Form/Item/View.js
+++ b/forms-flow-web/src/components/Form/Item/View.js
@@ -519,7 +519,9 @@ const mapDispatchToProps = (dispatch, ownProps) => {
     onCustomEvent: (customEvent, redirectUrl) => {
       switch (customEvent.type) {
         case CUSTOM_EVENT_TYPE.CUSTOM_SUBMIT_DONE:
-          toast.success("Submission Saved.");
+          toast.success(
+            <Translation>{(t) => t("Submission Saved")}</Translation>
+          );
           dispatch(push(`${redirectUrl}form`));
           break;
         case CUSTOM_EVENT_TYPE.CANCEL_SUBMISSION:
diff --git a/forms-flow-web/src/components/Form/constants/FormTable.js b/forms-flow-web/src/components/Form/constants/FormTable.js
index 32a73c74e0..7bd8fc1b80 100644
--- a/forms-flow-web/src/components/Form/constants/FormTable.js
+++ b/forms-flow-web/src/components/Form/constants/FormTable.js
@@ -190,7 +190,7 @@ function FormTable() {
   };
   return (
     <>
-      <LoadingOverlay active={searchFormLoading || isApplicationCountLoading} spinner text="Loading...">
+      <LoadingOverlay active={searchFormLoading || isApplicationCountLoading} spinner text={t("Loading...")}>
         <div style={{ minHeight: "400px" }}>
           <table className="table custom-table table-responsive-sm">
             <thead>
@@ -285,7 +285,7 @@ function FormTable() {
                       )}
                       <td>{HelperServices?.getLocaldate(e.created)}</td>
                       <td>{_.capitalize(e.formType)}</td>
-                      <td>{e.anonymous ? t("Anonymous") : t("Private")}</td>
+                      <td>{e.anonymous ? t("Public") : t("Private")}</td>
                       <td>
                         {" "}
                         <span 
diff --git a/forms-flow-web/src/components/Modeler/constants/bpmnTable.js b/forms-flow-web/src/components/Modeler/constants/bpmnTable.js
index e8f560aecb..5f75374b28 100644
--- a/forms-flow-web/src/components/Modeler/constants/bpmnTable.js
+++ b/forms-flow-web/src/components/Modeler/constants/bpmnTable.js
@@ -88,7 +88,7 @@ function BpmnTable() {
     <div className="mt-3">
       <LoadingOverlay
         spinner
-        text="Loading..."
+        text={t("Loading...")}
         active={isLoading || countLoading}
       >
         <div style={{ minHeight: "400px" }}>
diff --git a/forms-flow-web/src/components/Modeler/constants/dmnTable.js b/forms-flow-web/src/components/Modeler/constants/dmnTable.js
index 2b7dcf2dad..a40d95b416 100644
--- a/forms-flow-web/src/components/Modeler/constants/dmnTable.js
+++ b/forms-flow-web/src/components/Modeler/constants/dmnTable.js
@@ -90,7 +90,7 @@ function DmnTable() {
     <div className="mt-3">
       <LoadingOverlay
         spinner
-        text="Loading..."
+        text={t("Loading...")}
         active={isLoading || countLoading}
       >
         <div style={{ minHeight: "400px" }}>

From 8871a7e7b3cfe0b2afcb6bc25f59ca9f81175437 Mon Sep 17 00:00:00 2001
From: Bonymol Baby <88372115+Bonymol-aot@users.noreply.github.com>
Date: Wed, 15 Nov 2023 10:42:26 +0530
Subject: [PATCH 3/3] Updated delete message and button (#1718)

---
 forms-flow-web/src/components/Draft/Edit.js   | 32 ++++++++++++-------
 forms-flow-web/src/components/Draft/List.js   |  6 ++--
 .../components/Form/Item/Submission/List.js   |  2 +-
 forms-flow-web/src/components/Form/List.js    |  6 ++--
 forms-flow-web/src/containers/Confirm.js      |  7 ++--
 5 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/forms-flow-web/src/components/Draft/Edit.js b/forms-flow-web/src/components/Draft/Edit.js
index 113eddede5..500a5c569c 100644
--- a/forms-flow-web/src/components/Draft/Edit.js
+++ b/forms-flow-web/src/components/Draft/Edit.js
@@ -281,18 +281,26 @@ const View = React.memo((props) => {
         className="col-12 p-0"
       >
         <div className="mt-4">
-          <Confirm
-            modalOpen={draftDelete.modalOpen}
-            message={`${t("Are you sure you wish to delete the draft")} "${
-              textTruncate(14,12,draftDelete.draftName)
-            }" 
-            ${t("with ID")} "${draftDelete.draftId}"`}
-            onNo={() => onNo()}
-            onYes={(e) => {
-              exitType.current = "SUBMIT";
-              onYes(e);
-            }}
-          />
+        <Confirm
+  modalOpen={draftDelete.modalOpen}
+  message={
+    <>
+      {t("Are you sure to delete the draft")} 
+      <span style={{ fontWeight: "bold" }}>&nbsp;
+        {textTruncate(14, 12, draftDelete.draftName)}
+      </span>&nbsp;
+      {t("with ID")} 
+      <span style={{ fontWeight: "bold" }}>&nbsp;
+        {draftDelete.draftId}
+      </span> ?
+    </>
+  }
+  onNo={() => onNo()}
+  onYes={(e) => {
+    exitType.current = "SUBMIT";
+    onYes(e);
+  }}
+/>
           {processData?.status === "active" ? (
             <div className="form-view-wrapper">
               <Form
diff --git a/forms-flow-web/src/components/Draft/List.js b/forms-flow-web/src/components/Draft/List.js
index cd5044cdb5..48a4e17472 100644
--- a/forms-flow-web/src/components/Draft/List.js
+++ b/forms-flow-web/src/components/Draft/List.js
@@ -201,10 +201,10 @@ export const DraftList = React.memo(() => {
             message=
             {
             <div>
-            {t("Are you sure you wish to delete the draft")}
+            {t("Are you sure to delete the draft")}
             <span style={{ fontWeight: "bold" }} > {draftDelete.draftName.includes(' ') ? draftDelete.draftName : textTruncate(50,40,draftDelete.draftName)} </span>
-            {t("with ID")} 
-            <span style={{fontWeight: "bold"}}> {draftDelete.draftId}</span>?
+            {t("with ID")}
+            <span style={{fontWeight: "bold"}}> {draftDelete.draftId}</span> ?
             </div>
             }
             
diff --git a/forms-flow-web/src/components/Form/Item/Submission/List.js b/forms-flow-web/src/components/Form/Item/Submission/List.js
index 59cecb6ca4..8b011ffd45 100644
--- a/forms-flow-web/src/components/Form/Item/Submission/List.js
+++ b/forms-flow-web/src/components/Form/Item/Submission/List.js
@@ -103,7 +103,7 @@ const List = React.memo((props) => {
         modalOpen={props.modalOpen}
         message={
           <Translation>
-            {(t) => t("Are you sure you wish to delete this submission?")}
+            {(t) => t("Are you sure to delete this submission ?")}
           </Translation>
         }
         onNo={() => onNo()}
diff --git a/forms-flow-web/src/components/Form/List.js b/forms-flow-web/src/components/Form/List.js
index 828033cbb4..55a358de95 100644
--- a/forms-flow-web/src/components/Form/List.js
+++ b/forms-flow-web/src/components/Form/List.js
@@ -498,11 +498,11 @@ const List = React.memo((props) => {
                         ? props.formName
                         : textTruncate(50, 40, props.formName)}
                     </span>
-                    .{t("Are you sure you wish to delete the form?")}
+                    .<br />{t("Are you sure to delete the form ?")}
                   </div>
                 ) : (
                   <div>
-                    {`${t("Are you sure you wish to delete the form ")}`}
+                    {`${t("Are you sure to delete the form ")}`}
                     <span style={{ fontWeight: "bold" }}>
                       {textTruncate(60, 40, props.formName)}
                     </span>
@@ -511,7 +511,7 @@ const List = React.memo((props) => {
                 )
               ) : (
                 <div>
-                  {`${t("Are you sure you wish to delete the form ")} `}
+                  {`${t("Are you sure to delete the form ")} `}
                   <span style={{ fontWeight: "bold" }}>
                     {textTruncate(60, 40, props.formName)}
                   </span>
diff --git a/forms-flow-web/src/containers/Confirm.js b/forms-flow-web/src/containers/Confirm.js
index 3f34ea2c37..26ce36cde0 100644
--- a/forms-flow-web/src/containers/Confirm.js
+++ b/forms-flow-web/src/containers/Confirm.js
@@ -1,6 +1,5 @@
 import React from "react";
 import Modal from "react-bootstrap/Modal";
-import Button from "react-bootstrap/Button";
 import { useTranslation } from "react-i18next";
 
 const Confirm = React.memo((props) => {
@@ -10,7 +9,7 @@ const Confirm = React.memo((props) => {
     onYes,
     onNo,
     message,
-    yesText = t("Confirm"),
+    yesText = t("Delete"),
     noText = t("Cancel"),
   } = props;
   
@@ -28,9 +27,9 @@ const Confirm = React.memo((props) => {
             onClick={onNo}>
             {noText}</button>
 
-          <Button className="btn btn-default" onClick={onYes}>
+          <button className="btn btn-danger" onClick={onYes}>
             {yesText}
-          </Button>
+          </button>
 
         </Modal.Footer>
       </Modal>