Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature/fwf-4313:Updated settings modal #2575

Merged
merged 3 commits into from
Feb 13, 2025
+99 −110
Merged

feature/fwf-4313:Updated settings modal #2575

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
17fcdfc
feature/fwf-4313:Updated settings modal
fahad-aot Feb 11, 2025
6d51acc
resolved comments
fahad-aot Feb 12, 2025
1d80b85
added data-test-id for whole component
fahad-aot Feb 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
209 changes: 100 additions & 109 deletions forms-flow-web/src/components/Form/components/FormSettings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ import { Form, FormControl, InputGroup } from "react-bootstrap";
import {
CopyIcon,
CustomInfo,
CustomRadioButton,
FormInput,
FormTextArea,
MultipleSelect
CustomTabs,
DropdownMultiSelect
} from "@formsflow/components";

import { MULTITENANCY_ENABLED } from "../../../constants/constants";
Expand Down Expand Up @@ -231,11 +231,13 @@ const FormSettings = forwardRef((props, ref) => {
const handleRoleSelectForApplication = (roles) =>
handleRoleStateChange(APPLICATION, "selectedRoles", roles);

return (
<>
{/* Section 1: Basic */}
<div className="section">
<h5 className="fw-bold">{t("Basic")}</h5>
const [key,setKey] = useState("Basic");
const tabs = [
{
eventKey: "Basic",
title: "Basic",
content: (
<div className="settings-sections">
<FormInput
required
value={formDetails.title}
Expand Down Expand Up @@ -273,18 +275,23 @@ const FormSettings = forwardRef((props, ref) => {
onChange={handleFormDetailsChange}
className="field-label"
/>
</div>

<div className="modal-hr" />

<div className="section">
<h5 className="fw-bold">{t("Permissions")}</h5>
</div>
),
},
{
eventKey: "Permissions",
title: "Permissions",
content: (
<div className="settings-sections">
<DropdownMultiSelect
dropdownLabel="Who Can View/Edit This Form"
enableMultiSelect= {
rolesState?.DESIGN?.selectedOption !== "onlyYou" &&
rolesState?.DESIGN?.selectedOption !== "Only You"
fahad-aot marked this conversation as resolved.
Show resolved Hide resolved

<Form.Label className="field-label">
{t("Who Can View/Edit This Form")}
</Form.Label>
<CustomRadioButton
items={[
}
inputDropDownSelectedValue={rolesState?.DESIGN?.selectedOption}
inputDropDownOptions={[
{
label: t("Only You"),
value:"onlyYou",
Expand All @@ -294,48 +301,27 @@ const FormSettings = forwardRef((props, ref) => {
value: "specifiedRoles",
},
]}
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" && (
<FormInput disabled={true} />
)}
{rolesState.DESIGN.selectedOption === "specifiedRoles" && (
<MultipleSelect
options={userRoles}
selectedValues={rolesState.DESIGN.selectedRoles}
onSelect={handleRoleSelectForDesign}
onRemove={handleRoleSelectForDesign}
displayValue={multiSelectOptionKey}
avoidHighlightFirstOption={true}
/>

)}

<Form.Label className="field-label mt-3">
{t("Who Can Create Submissions")}
</Form.Label>
<Form.Check
type="checkbox"
id="anonymouseCheckbox"
label={t("Anonymous users")}
checked={isAnonymous}
onChange={() => {
setIsAnonymous(!isAnonymous);
multiSelectedValues={rolesState?.DESIGN?.selectedRoles }
multiSelectOptions={userRoles || []}
onDropdownChange={(value) => {
handleRoleStateChange(DESIGN, "selectedOption", value);
}}
className="field-label"
onMultiSelectionChange={handleRoleSelectForDesign}
displayValue={multiSelectOptionKey}
ariaLabel="design-permission"
dataTestid="design-permission"

/>

<CustomRadioButton
items={[
<DropdownMultiSelect
dropdownLabel="Who Can Create Submissions"
enableMultiSelect={
rolesState?.FORM?.selectedOption !== "registeredUsers" &&
rolesState?.FORM?.selectedOption !== "Registered users"

}
inputDropDownSelectedValue={rolesState.FORM.selectedOption}
inputDropDownOptions={[
{
label: t("Registered users"),
value:"registeredUsers",
Expand All @@ -345,36 +331,40 @@ const FormSettings = forwardRef((props, ref) => {
value:"specifiedRoles"
},
]}
id="who-can-create-submission"
dataTestId="create-submission-role"
ariaLabel={t("Create Submission Role")}
onChange={
multiSelectedValues={rolesState.FORM.selectedRoles }
multiSelectOptions={userRoles}
onDropdownChange={
(value) => {
handleRoleStateChange(FORM, "selectedOption", value);
}
}
selectedValue={rolesState.FORM.selectedOption}
onMultiSelectionChange={handleRoleSelectForForm}
displayValue={multiSelectOptionKey}
ariaLabel="form-permission"
dataTestid="form-permission"

/>
<Form.Check
type="checkbox"
id="anonymouseCheckbox"
label={t("Also allow anonymous users to create submissions")}
checked={isAnonymous}
onChange={() => {
setIsAnonymous(!isAnonymous);
}}
className="field-label"
/>
{rolesState.FORM.selectedOption === "registeredUsers" && (
<FormInput disabled={true} />
)}
{rolesState.FORM.selectedOption === "specifiedRoles" && (
<MultipleSelect
options={userRoles} // Options to display in the dropdown
selectedValues={rolesState.FORM.selectedRoles} // Preselected value to persist in dropdown
onSelect={handleRoleSelectForForm} // Function will trigger on select event
onRemove={handleRoleSelectForForm} // Function will trigger on remove event
displayValue={multiSelectOptionKey} // Property name to display in the dropdown options
avoidHighlightFirstOption={true}
/>

)}

<Form.Label className="field-label mt-3">
{t("Who Can View Submissions")}
</Form.Label>
<CustomRadioButton
items={[


<DropdownMultiSelect
dropdownLabel="Who Can View Submissions"
enableMultiSelect={
rolesState?.APPLICATION?.selectedOption !== "submitter" &&
rolesState?.APPLICATION?.selectedOption !== "Submitter"

}
inputDropDownSelectedValue={rolesState.APPLICATION.selectedOption}
inputDropDownOptions={[
{
label: t("Submitter"),
value:"submitter"
Expand All @@ -384,37 +374,25 @@ const FormSettings = forwardRef((props, ref) => {
value:"specifiedRoles"
},
]}
id="who-can-view-submission"
dataTestId="view-submission-role"
ariaLabel={t("View Submission Role")}
onChange={
multiSelectedValues={rolesState.APPLICATION.selectedRoles }
multiSelectOptions={userRoles}
onDropdownChange={
(value) => {
handleRoleStateChange(APPLICATION, "selectedOption", value);
}
}
selectedValue={rolesState.APPLICATION.selectedOption}
onMultiSelectionChange={handleRoleSelectForApplication}
displayValue={multiSelectOptionKey}
/>

{rolesState.APPLICATION.selectedOption === "submitter" && (
<FormInput disabled={true} />
)}

{rolesState.APPLICATION.selectedOption === "specifiedRoles" && (
<MultipleSelect
options={userRoles} // Options to display in the dropdown
selectedValues={rolesState.APPLICATION.selectedRoles} // Preselected value to persist in dropdown
onSelect={handleRoleSelectForApplication} // Function will trigger on select event
onRemove={handleRoleSelectForApplication} // Function will trigger on remove event
displayValue={multiSelectOptionKey} // Property name to display in the dropdown options
avoidHighlightFirstOption={true}
/>

)}
</div>

<div className="modal-hr" />
<div className="section">
<h5 className="fw-bold">{t("Link for this form")}</h5>
</div>
),
},
{
eventKey :"Link",
title : "Link",
content : (
<div className="settings-sections">
<CustomInfo heading={t("Note")}
content={t("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">
Expand All @@ -438,8 +416,21 @@ const FormSettings = forwardRef((props, ref) => {
{errors.path && <div className="validation-text mt-2">{errors.path}</div>}

</Form.Group>
</div>
</>
</div>
)
}
];
return (
<div className="settings-tab-container">
<CustomTabs
defaultActiveKey={key}
onSelect={setKey}
tabs={tabs}
dataTestid="template-form-flow-tabs"
fahad-aot marked this conversation as resolved.
Show resolved Hide resolved
ariaLabel="Template forms flow tabs"
className="custom-tab"
/>
</div>
);
});

Expand Down
1 change: 1 addition & 0 deletions forms-flow-web/src/components/Modals/SettingsModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ const SettingsModal = ({ show, handleClose, handleConfirm, isSaving = false }) =
onHide={handleClose}
size="sm"
backdrop="static"
centered
>
<Modal.Header>
<Modal.Title>{t("Settings")}</Modal.Title>
Expand Down
Loading