From ffaf67301db62f14b7b1bf94a1141bdbe527d695 Mon Sep 17 00:00:00 2001
From: shuhaib s <95394061+shuhaib-aot@users.noreply.github.com>
Date: Wed, 30 Oct 2024 13:52:18 +0530
Subject: [PATCH] FWF-3818 [bugifx] fixed modal issues (#2317)
* FWF-3818 [bugifx] fixed modal issues
* Changed function name
* used data instead of res.data
---
.../apiManager/services/processServices.js | 13 ++-
.../CustomComponents/MultiSelect.js | 3 +-
.../src/components/Form/EditForm/FlowEdit.js | 17 +---
.../components/Form/EditForm/FormSettings.js | 96 +++++++------------
4 files changed, 53 insertions(+), 76 deletions(-)
diff --git a/forms-flow-web/src/apiManager/services/processServices.js b/forms-flow-web/src/apiManager/services/processServices.js
index 5df1767ec6..4d2b9994db 100644
--- a/forms-flow-web/src/apiManager/services/processServices.js
+++ b/forms-flow-web/src/apiManager/services/processServices.js
@@ -28,6 +28,7 @@ import { StorageService } from "@formsflow/service";
import { toast } from "react-toastify";
import { Translation } from "react-i18next";
import { setFormStatusLoading } from "../../actions/processActions";
+import { setFormAuthorizationDetails } from "../../actions/formActions";
export const getProcessStatusList = (processId, taskId) => {
return (dispatch) => {
dispatch(setProcessStatusLoading(true));
@@ -418,10 +419,14 @@ export const saveFormProcessMapperPut = (data, ...rest) => {
RequestService.httpPUTRequest(`${API.FORM}/${data.mapper.id}`, data)
.then(async (res) => {
if (res.data) {
- dispatch(getApplicationCount(res.data.mapper.id));
- dispatch(setFormPreviosData(res.data.mapper));
- dispatch(setFormProcessesData(res.data.mapper));
- done(null, res.data);
+ const {data} = res;
+ dispatch(getApplicationCount(data.mapper.id));
+ dispatch(setFormPreviosData(data.mapper));
+ dispatch(setFormProcessesData(data.mapper));
+ if(data.authorizations){
+ dispatch(setFormAuthorizationDetails(data.authorizations));
+ }
+ done(null, data);
} else {
dispatch(setFormProcessesData([]));
dispatch(setFormPreviosData([]));
diff --git a/forms-flow-web/src/components/CustomComponents/MultiSelect.js b/forms-flow-web/src/components/CustomComponents/MultiSelect.js
index 549b50c8cc..6a2e610272 100644
--- a/forms-flow-web/src/components/CustomComponents/MultiSelect.js
+++ b/forms-flow-web/src/components/CustomComponents/MultiSelect.js
@@ -3,7 +3,7 @@ import { ListGroup } from "react-bootstrap";
import { CustomPill } from "@formsflow/components";
import PropTypes from 'prop-types';
-const RoleSelector = ({ allRoles = [], selectedRoles = [], setSelectedRoles }) => {
+const RoleSelector = ({ allRoles = [], selectedRoles = [], setSelectedRoles }) => {
const [roleInput, setRoleInput] = useState("");
const [filteredRoles, setFilteredRoles] = useState([]);
const [isDropdownOpen, setIsDropdownOpen] = useState(false); // To control dropdown visibility
@@ -82,6 +82,7 @@ const RoleSelector = ({ allRoles = [], selectedRoles = [], setSelectedRoles }) =
<ListGroup>
{filteredRoles.map((role, index) => (
<ListGroup.Item
+ action={true}
key={role + index}
onClick={() => handleRoleSelect(role)}
>
diff --git a/forms-flow-web/src/components/Form/EditForm/FlowEdit.js b/forms-flow-web/src/components/Form/EditForm/FlowEdit.js
index 1adc834119..2217c05a02 100644
--- a/forms-flow-web/src/components/Form/EditForm/FlowEdit.js
+++ b/forms-flow-web/src/components/Form/EditForm/FlowEdit.js
@@ -21,10 +21,7 @@ const FlowEdit = forwardRef(({isPublished = false}, ref) => {
const [showDiscardModal, setShowDiscardModal] = useState(false);
// handle history modal
const handleHistoryModal = () => setHistoryModalShow(!historyModalShow);
- const handleHanldeDisacardModal = () => setShowDiscardModal(!showDiscardModal);
-
-
-
+ const handleDiscardModal = () => setShowDiscardModal(!showDiscardModal);
const saveFlow = async () => {
try{
@@ -56,18 +53,14 @@ const FlowEdit = forwardRef(({isPublished = false}, ref) => {
if(bpmnRef.current){
//import the existing process data to bpmn
bpmnRef.current?.handleImport(processData?.processData);
- handleHanldeDisacardModal();
+ handleDiscardModal();
}
};
-
-
useImperativeHandle(ref, () => ({
saveFlow,
}));
-
-
return (
<Card>
<ConfirmModal
@@ -76,10 +69,10 @@ const FlowEdit = forwardRef(({isPublished = false}, ref) => {
message={t("Are you sure you want to discard all the changes of the Flow?")}
messageSecondary={t("This action cannot be undone.")}
primaryBtnAction={handleDiscardConfirm}
- onClose={handleHanldeDisacardModal}
+ onClose={handleDiscardModal}
primaryBtnText={t("Discard Changes")}
secondaryBtnText={t("Cancel")}
- secondayBtnAction={handleHanldeDisacardModal}
+ secondayBtnAction={handleDiscardModal}
size="sm"
/>
<Card.Header>
@@ -124,7 +117,7 @@ const FlowEdit = forwardRef(({isPublished = false}, ref) => {
variant="secondary"
size="md"
label={t("Discard Changes")}
- onClick={handleHanldeDisacardModal}
+ onClick={handleDiscardModal}
dataTestid="discard-flow-changes-testid"
ariaLabel={t("Discard Flow Changes")}
/>
diff --git a/forms-flow-web/src/components/Form/EditForm/FormSettings.js b/forms-flow-web/src/components/Form/EditForm/FormSettings.js
index fd4f06640b..f884726558 100644
--- a/forms-flow-web/src/components/Form/EditForm/FormSettings.js
+++ b/forms-flow-web/src/components/Form/EditForm/FormSettings.js
@@ -45,17 +45,14 @@ const FormSettings = forwardRef((props, ref) => {
/* --------------------------- useState Variables --------------------------- */
const [userRoles, setUserRoles] = useState([]);
- const [copied, setCopied] = useState(false);
- const [editIndexValue, setEditIndexValue] = useState(0);
- const [createIndexValue, setCreateIndexValue] = useState(0);
- const [viewIndexValue, setViewIndexValue] = useState(0);
+ const [copied, setCopied] = useState(false);
const [formDetails, setFormDetails] = useState({
title: processListData.formName,
path: path,
description: processListData.description,
display: display,
});
- const [isAnonymous, setIsAnonymous] = useState(processListData.anonymous);
+ const [isAnonymous, setIsAnonymous] = useState(processListData.anonymous || false);
const [errors, setErrors] = useState({
name: "",
path: "",
@@ -66,22 +63,22 @@ const FormSettings = forwardRef((props, ref) => {
);
const publicUrlPath = `${window.location.origin}/public/form/`;
-
+ const setSelectedOption = (roles, option)=> roles.length ? "specifiedRoles" : option;
/* ------------------------- authorization variables ------------------------ */
const [rolesState, setRolesState] = useState({
DESIGN: {
selectedRoles: formAuthorization.DESIGNER?.roles,
- selectedOption: "onlyYou",
+ selectedOption: setSelectedOption(formAuthorization.DESIGNER?.roles,"onlyYou"),
},
FORM: {
roleInput: "",
selectedRoles: formAuthorization.FORM?.roles,
- selectedOption: "registeredUsers",
+ selectedOption: setSelectedOption(formAuthorization.FORM?.roles,"registeredUsers"),
},
APPLICATION: {
roleInput: "",
selectedRoles: formAuthorization.APPLICATION?.roles,
- selectedOption: "submitter",
+ selectedOption: setSelectedOption(formAuthorization.APPLICATION?.roles, "submitter"),
},
});
@@ -238,7 +235,7 @@ const FormSettings = forwardRef((props, ref) => {
<Form.Check
data-testid="form-edit-wizard-display"
type="checkbox"
- id="createCheckbox"
+ id="formDisplaychange"
label={t("Allow adding multiple pages in this form")}
checked={formDetails.display === "wizard"}
name="display"
@@ -259,26 +256,22 @@ const FormSettings = forwardRef((props, ref) => {
items={[
{
label: t("Only You"),
- onClick: () => {
- handleRoleStateChange(DESIGN, "selectedOption", "onlyYou");
- setEditIndexValue(0);
- },
+ value:"onlyYou",
},
{
label: t("You and specified roles"),
- onClick: () => {
- handleRoleStateChange(
- DESIGN,
- "selectedOption",
- "specifiedRoles"
- );
- setEditIndexValue(1);
- },
+ value: "specifiedRoles",
},
]}
- dataTestid="edit-submission-role"
- ariaLabel={t("Edit Submission Role")}
- indexValue={editIndexValue}
+ onChange={
+ (value) => {
+ handleRoleStateChange(DESIGN, "selectedOption", value);
+ }
+ }
+ dataTestid="who-can-edit-this-form"
+ id="who-can-edit-this-form"
+ ariaLabel={t("Edit Submission Role")}
+ selectedValue={rolesState.DESIGN.selectedOption}
/>
{rolesState.DESIGN.selectedOption === "onlyYou" && (
@@ -299,7 +292,7 @@ const FormSettings = forwardRef((props, ref) => {
</Form.Label>
<Form.Check
type="checkbox"
- id="createCheckbox"
+ id="anonymouseCheckbox"
label={t("Anonymous users")}
checked={isAnonymous}
onChange={() => {
@@ -312,28 +305,22 @@ const FormSettings = forwardRef((props, ref) => {
items={[
{
label: t("Registered users"),
- onClick: () => {
- handleRoleStateChange(
- FORM,
- "selectedOption",
- "registeredUsers"
- );
-
- setCreateIndexValue(0);
- // Set index value for Registered users
- },
+ value:"registeredUsers",
},
{
label: t("Specific roles"),
- onClick: () => {
- handleRoleStateChange(FORM, "selectedOption", "specifiedRoles");
- setCreateIndexValue(1); // Set index value for Specific roles
- },
+ value:"specifiedRoles"
},
]}
+ id="who-can-create-submission"
dataTestid="create-submission-role"
ariaLabel={t("Create Submission Role")}
- indexValue={createIndexValue}
+ onChange={
+ (value) => {
+ handleRoleStateChange(FORM, "selectedOption", value);
+ }
+ }
+ selectedValue={rolesState.FORM.selectedOption}
/>
{rolesState.FORM.selectedOption === "registeredUsers" && (
<FormInput disabled={true} />
@@ -355,31 +342,22 @@ const FormSettings = forwardRef((props, ref) => {
items={[
{
label: t("Submitter"),
- onClick: () => {
- handleRoleStateChange(
- APPLICATION,
- "selectedOption",
- "submitter"
- );
-
- setViewIndexValue(0); // Set index value for Submitter
- },
+ value:"submitter"
},
{
label: t("Submitter and specified roles"),
- onClick: () => {
- handleRoleStateChange(
- APPLICATION,
- "selectedOption",
- "specifiedRoles"
- );
- setViewIndexValue(0);
- },
+ value:"specifiedRoles"
},
]}
+ id="who-can-view-submission"
dataTestid="view-submission-role"
ariaLabel={t("View Submission Role")}
- indexValue={viewIndexValue}
+ onChange={
+ (value) => {
+ handleRoleStateChange(APPLICATION, "selectedOption", value);
+ }
+ }
+ selectedValue={rolesState.APPLICATION.selectedOption}
/>
{rolesState.APPLICATION.selectedOption === "submitter" && (