This is an automated email from the ASF dual-hosted git repository.
dhavalrajpara pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/ranger.git
The following commit(s) were added to refs/heads/master by this push:
new fe379d0a4 RANGER-5303 : Implement White-space Input Validation Across
Ranger UI Forms (#775)
fe379d0a4 is described below
commit fe379d0a40aa4ae93c978a2c4d3a77fc9df2fbbb
Author: Dhaval Rajpara <[email protected]>
AuthorDate: Thu Jan 29 21:31:59 2026 +0530
RANGER-5303 : Implement White-space Input Validation Across Ranger UI Forms
(#775)
Co-authored-by: Dhaval Rajpara <[email protected]>
---
.../src/components/CommonComponents.jsx | 9 ++++
.../react-webapp/src/components/CreatableField.jsx | 4 +-
.../react-webapp/src/components/Editable.jsx | 35 ++++++++++--
.../main/webapp/react-webapp/src/utils/XAEnums.js | 4 +-
.../webapp/react-webapp/src/utils/XAMessages.js | 6 +--
.../src/views/Encryption/KeyCreate.jsx | 47 ++++++++++------
.../views/PolicyListing/AddUpdatePolicyForm.jsx | 27 +++++-----
.../views/PolicyListing/PolicyConditionsComp.jsx | 32 ++++++++++-
.../src/views/Resources/ResourceComp.jsx | 6 +--
.../src/views/Resources/ResourceSelectComp.jsx | 2 +-
.../src/views/SecurityZone/SecurityZoneForm.jsx | 47 ++++++++--------
.../src/views/ServiceManager/ServiceForm.jsx | 62 ++++++++++++++--------
.../groups_details/GroupForm.jsx | 9 ++--
.../UserGroupRoleListing/role_details/RoleForm.jsx | 17 +++---
.../users_details/UserForm.jsx | 39 +++++++-------
.../webapp/react-webapp/src/views/UserProfile.jsx | 16 ++++--
16 files changed, 239 insertions(+), 123 deletions(-)
diff --git
a/security-admin/src/main/webapp/react-webapp/src/components/CommonComponents.jsx
b/security-admin/src/main/webapp/react-webapp/src/components/CommonComponents.jsx
index 15b8569f8..053ced0e2 100644
---
a/security-admin/src/main/webapp/react-webapp/src/components/CommonComponents.jsx
+++
b/security-admin/src/main/webapp/react-webapp/src/components/CommonComponents.jsx
@@ -568,3 +568,12 @@ export const ModalLoader = () => {
</h4>
);
};
+
+export const trimInputValue = (e, input) => {
+ const value = e.target.value;
+ const trimmed = value.trim();
+ if (value !== trimmed) {
+ input.onChange(trimmed);
+ }
+ input.onBlur(e); // Always call onBlur to trigger validation
+};
diff --git
a/security-admin/src/main/webapp/react-webapp/src/components/CreatableField.jsx
b/security-admin/src/main/webapp/react-webapp/src/components/CreatableField.jsx
index 443304430..f9974ae88 100644
---
a/security-admin/src/main/webapp/react-webapp/src/components/CreatableField.jsx
+++
b/security-admin/src/main/webapp/react-webapp/src/components/CreatableField.jsx
@@ -52,8 +52,8 @@ const CreatableField = (props) => {
};
const createOption = (label) => ({
- value: label,
- label: label
+ value: label.trim(),
+ label: label.trim()
});
const handleInputChange = (value) => {
diff --git
a/security-admin/src/main/webapp/react-webapp/src/components/Editable.jsx
b/security-admin/src/main/webapp/react-webapp/src/components/Editable.jsx
index 9d1234d2b..c5754ac95 100644
--- a/security-admin/src/main/webapp/react-webapp/src/components/Editable.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/components/Editable.jsx
@@ -231,7 +231,7 @@ const CustomCondition = (props) => {
const expressionVal = (val) => {
let value = null;
if (val != "" && typeof val != "object") {
- valRef.current[m.name] = val;
+ valRef.current[m.name] = val.trim();
return (value = val);
}
return value !== null ? value : "";
@@ -264,6 +264,12 @@ const CustomCondition = (props) => {
key={m.name}
value={expressionVal(selectedJSCondVal)}
onChange={(e) => textAreaHandleChange(e, m.name)}
+ onBlur={(e) => {
+ textAreaHandleChange(
+ { target: { value: e.target.value.trim() } },
+ m.name
+ );
+ }}
isInvalid={validExpression.state}
/>
{validExpression.state && (
@@ -295,14 +301,33 @@ const CustomCondition = (props) => {
<b>{m.label}:</b>
<CreatableSelect
{...selectProps}
- defaultValue={
- selectedInputVal == "" ? null : selectedInputVal
- }
- onChange={(e) => handleChange(e, m.name)}
+ value={selectedInputVal || null}
+ onChange={(e) => {
+ setSelectVal(e);
+ handleChange(e, m.name);
+ }}
placeholder=""
width="500px"
isClearable={false}
styles={selectInputCustomStyles}
+ formatCreateLabel={(inputValue) =>
+ `Create "${inputValue.trim()}"`
+ }
+ onCreateOption={(inputValue) => {
+ const trimmedValue = inputValue.trim();
+ if (trimmedValue) {
+ const newOption = {
+ label: trimmedValue,
+ value: trimmedValue
+ };
+ const currentValues = selectedInputVal || [];
+ const newValues = Array.isArray(currentValues)
+ ? [...currentValues, newOption]
+ : [newOption];
+ setSelectVal(newValues);
+ tagAccessData(newValues, m.name);
+ }
+ }}
/>
</Form.Group>
</div>
diff --git a/security-admin/src/main/webapp/react-webapp/src/utils/XAEnums.js
b/security-admin/src/main/webapp/react-webapp/src/utils/XAEnums.js
index ac9bdfb30..4e08f3a06 100755
--- a/security-admin/src/main/webapp/react-webapp/src/utils/XAEnums.js
+++ b/security-admin/src/main/webapp/react-webapp/src/utils/XAEnums.js
@@ -586,7 +586,7 @@ export const RegexValidation = {
/^([A-Za-z0-9_]|[\u00C0-\u017F])([a-z0-9,._\-+/@= ]|[\u00C0-\u017F])+$/i,
regexExpressionForFirstAndLastName:
/^([A-Za-z0-9_]|[\u00C0-\u017F])([a-zA-Z0-9\s_. -@]|[\u00C0-\u017F])+$/i,
- regexforNameValidation: /^[a-zA-Z0-9_-][a-zA-Z0-9\s_-]{0,254}$/,
+ regexForNameValidation: /^[a-zA-Z0-9_-][a-zA-Z0-9\s_-]{0,254}$/,
regexExpressionForSecondaryName:
/^([A-Za-z0-9_]|[\u00C0-\u017F])([a-zA-Z0-9\s_. -@]|[\u00C0-\u017F])+$/i,
regexforServiceNameValidation: /^[a-zA-Z0-9_-][a-zA-Z0-9_-]{0,254}$/,
@@ -601,7 +601,7 @@ export const RegexValidation = {
3. Name length should be greater than one."
</>
),
- regexforNameValidationMessage:
+ regexForNameValidationMessage:
"Name should not start with space, it should be less than 256 characters
and special characters are not allowed(except _ - and space).",
secondaryNameValidationMessage: (
<>
diff --git
a/security-admin/src/main/webapp/react-webapp/src/utils/XAMessages.js
b/security-admin/src/main/webapp/react-webapp/src/utils/XAMessages.js
index ee7b010ea..75b064758 100644
--- a/security-admin/src/main/webapp/react-webapp/src/utils/XAMessages.js
+++ b/security-admin/src/main/webapp/react-webapp/src/utils/XAMessages.js
@@ -36,9 +36,9 @@ export const RegexMessage = {
</p>
</>
),
- passwordvalidationinfomessage:
- "Password should be minimum 8 characters ,atleast one uppercase letter,
one lowercase letter and one numeric. For FIPS environment password should be
minimum 14 characters with atleast one uppercase letter, one special
characters, one lowercase letter and one numeric.",
- emailvalidationinfomessage: (
+ passwordValidationInfoMessage:
+ "Password should be minimum 8 characters ,at least one uppercase letter,
one lowercase letter and one numeric. For FIPS environment password should be
minimum 14 characters with atleast one uppercase letter, one special
characters, one lowercase letter and one numeric.",
+ emailValidationInfoMessage: (
<>
<p className="pd-10 mb-0" style={{ fontSize: "small" }}>
1. Email address should be start with alphabet / numeric / underscore
diff --git
a/security-admin/src/main/webapp/react-webapp/src/views/Encryption/KeyCreate.jsx
b/security-admin/src/main/webapp/react-webapp/src/views/Encryption/KeyCreate.jsx
index fcb8a9552..6ad534365 100644
---
a/security-admin/src/main/webapp/react-webapp/src/views/Encryption/KeyCreate.jsx
+++
b/security-admin/src/main/webapp/react-webapp/src/views/Encryption/KeyCreate.jsx
@@ -24,7 +24,12 @@ import { toast } from "react-toastify";
import { FieldArray } from "react-final-form-arrays";
import arrayMutators from "final-form-arrays";
import { fetchApi } from "Utils/fetchAPI";
-import { BlockUi, Loader, scrollToError } from "Components/CommonComponents";
+import {
+ BlockUi,
+ Loader,
+ scrollToError,
+ trimInputValue
+} from "Components/CommonComponents";
import { commonBreadcrumb, serverError } from "Utils/XAUtils";
import { cloneDeep, find, isEmpty, values } from "lodash";
import withRouter from "Hooks/withRouter";
@@ -69,7 +74,7 @@ const reducer = (state, action) => {
}
};
-const PromtDialog = (props) => {
+const PromptDialog = (props) => {
const { isDirtyField, isUnblock } = props;
usePrompt("Are you sure you want to leave", isDirtyField && !isUnblock);
return null;
@@ -120,7 +125,7 @@ function KeyCreate(props) {
serviceJson.name = values.name;
serviceJson.cipher = values.cipher;
serviceJson.length = values.length;
- serviceJson.description = values.description;
+ serviceJson.description = values?.description?.trim();
serviceJson.attributes = {};
for (let key of Object.keys(values.attributes)) {
@@ -128,8 +133,8 @@ function KeyCreate(props) {
!isEmpty(values?.attributes[key]?.name) &&
!isEmpty(values?.attributes[key]?.value)
) {
- serviceJson.attributes[values.attributes[key].name] =
- values.attributes[key].value;
+ serviceJson.attributes[values.attributes[key].name.trim()] =
+ values.attributes[key].value.trim();
}
}
@@ -251,7 +256,7 @@ function KeyCreate(props) {
}
}) => (
<div className="wrap">
- <PromtDialog isDirtyField={dirty} isUnblock={preventUnBlock} />
+ <PromptDialog isDirtyField={dirty} isUnblock={preventUnBlock} />
<form
onSubmit={(event) => {
handleSubmit(event);
@@ -268,6 +273,7 @@ function KeyCreate(props) {
{...input}
name="name"
type="text"
+ onBlur={(e) => trimInputValue(e, input)}
id={meta.error && meta.touched ? "isError" : "name"}
className={
meta.error && meta.touched
@@ -335,6 +341,7 @@ function KeyCreate(props) {
{...input}
className="form-control"
data-cy="description"
+ onBlur={(e) => trimInputValue(e, input)}
/>
</Col>
</Row>
@@ -361,18 +368,26 @@ function KeyCreate(props) {
fields.map((name, index) => (
<tr key={name}>
<td className="text-center">
- <Field
- name={`${name}.name`}
- component="input"
- className="form-control"
- />
+ <Field name={`${name}.name`}>
+ {({ input }) => (
+ <input
+ {...input}
+ className="form-control"
+ onBlur={(e) => trimInputValue(e, input)}
+ />
+ )}
+ </Field>
</td>
<td className="text-center">
- <Field
- name={`${name}.value`}
- component="input"
- className="form-control"
- />
+ <Field name={`${name}.value`}>
+ {({ input }) => (
+ <input
+ {...input}
+ className="form-control"
+ onBlur={(e) => trimInputValue(e, input)}
+ />
+ )}
+ </Field>
</td>
<td className="text-center">
<Button
diff --git
a/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/AddUpdatePolicyForm.jsx
b/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/AddUpdatePolicyForm.jsx
index 2981b74f9..98d7d3150 100644
---
a/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/AddUpdatePolicyForm.jsx
+++
b/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/AddUpdatePolicyForm.jsx
@@ -53,7 +53,8 @@ import {
BlockUi,
Loader,
scrollToError,
- selectInputCustomStyles
+ selectInputCustomStyles,
+ trimInputValue
} from "Components/CommonComponents";
import { fetchApi } from "Utils/fetchAPI";
import { RangerPolicyType, getEnumElementByValue } from "Utils/XAEnums";
@@ -291,7 +292,7 @@ export default function AddUpdatePolicyForm() {
const fetchPolicyLabel = async (inputValue) => {
let params = {};
if (inputValue) {
- params["policyLabel"] = inputValue || "";
+ params["policyLabel"] = inputValue.trim() || "";
}
const policyLabelResp = await fetchApi({
url: "plugins/policyLabels",
@@ -299,8 +300,8 @@ export default function AddUpdatePolicyForm() {
});
return policyLabelResp.data.map((name) => ({
- label: name,
- value: name
+ label: name.trim(),
+ value: name.trim()
}));
};
@@ -391,12 +392,12 @@ export default function AddUpdatePolicyForm() {
data.policyName = policyData?.name;
data.isEnabled = policyData?.isEnabled;
data.policyPriority = policyData?.policyPriority == 0 ? false : true;
- data.description = policyData?.description;
+ data.description = policyData?.description?.trim();
data.isAuditEnabled = policyData?.isAuditEnabled;
data.policyLabel =
policyData &&
policyData?.policyLabels?.map((val) => {
- return { label: val, value: val };
+ return { label: val?.trim(), value: val?.trim() };
});
if (policyData?.resources) {
if (!isMultiResources) {
@@ -405,7 +406,7 @@ export default function AddUpdatePolicyForm() {
let setResources = find(serviceCompResourcesDetails, ["name",
key]);
data[`resourceName-${setResources?.level}`] = setResources;
data[`value-${setResources?.level}`] = value.values.map((m) => {
- return { label: m, value: m };
+ return { label: m?.trim(), value: m?.trim() };
});
if (setResources?.excludesSupported) {
data[`isExcludesSupport-${setResources?.level}`] =
@@ -450,7 +451,7 @@ export default function AddUpdatePolicyForm() {
setResources;
additionalResourcesObj[`value-${setResources?.level}`] =
value.values.map((m) => {
- return { label: m, value: m };
+ return { label: m?.trim(), value: m?.trim() };
});
if (setResources?.excludesSupported) {
additionalResourcesObj[
@@ -521,7 +522,7 @@ export default function AddUpdatePolicyForm() {
data.conditions[val?.type] = JSON.parse(conditionObj.uiHint)
.isMultiValue
? val?.values
- : val?.values.toString();
+ : val?.values.toString().trim();
}
}
}
@@ -711,9 +712,9 @@ export default function AddUpdatePolicyForm() {
obj.conditions[data?.type] = JSON.parse(conditionObj.uiHint)
.isMultiValue
? data?.values.map((m) => {
- return { value: m, label: m };
+ return { value: m.trim(), label: m.trim() };
})
- : data?.values.toString();
+ : data?.values.toString().trim();
}
}
}
@@ -889,7 +890,7 @@ export default function AddUpdatePolicyForm() {
data["conditions"] = [];
}
- /* For create zoen policy*/
+ /* For create zone policy*/
if (localStorage.getItem("zoneDetails") != null) {
data["zoneName"] = JSON.parse(localStorage.getItem("zoneDetails")).label;
}
@@ -1303,6 +1304,7 @@ export default function AddUpdatePolicyForm() {
: "form-control"
}
data-cy="policyName"
+ onBlur={(e) => trimInputValue(e, input)}
/>
<InfoIcon
css="input-box-info-icon"
@@ -1444,6 +1446,7 @@ export default function AddUpdatePolicyForm() {
as="textarea"
rows={3}
data-cy="description"
+ onBlur={(e) => trimInputValue(e, input)}
/>
</Col>
</FormB.Group>
diff --git
a/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/PolicyConditionsComp.jsx
b/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/PolicyConditionsComp.jsx
index 7c8aba953..8b2240e2e 100644
---
a/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/PolicyConditionsComp.jsx
+++
b/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/PolicyConditionsComp.jsx
@@ -25,7 +25,10 @@ import CreatableSelect from "react-select/creatable";
import { find, isEmpty } from "lodash";
import { InfoIcon } from "Utils/XAUtils";
import { RegexMessage } from "Utils/XAMessages";
-import { selectInputCustomStyles } from "Components/CommonComponents";
+import {
+ selectInputCustomStyles,
+ trimInputValue
+} from "Components/CommonComponents";
const esprima = require("esprima");
export default function PolicyConditionsComp(props) {
@@ -90,7 +93,11 @@ export default function PolicyConditionsComp(props) {
const ipRangeVal = (val) => {
let value = [];
if (!isEmpty(val)) {
- value = val.map((m) => ({ label: m, value: m }));
+ // Trim existing values when displaying
+ value = val.map((m) => ({
+ label: m.trim(),
+ value: m.trim()
+ }));
}
return value;
};
@@ -193,6 +200,9 @@ export default function PolicyConditionsComp(props) {
}
as="textarea"
rows={3}
+ onBlur={(e) =>
+ trimInputValue(e, input)
+ }
/>
{meta.error && (
<span className="invalid-field">
@@ -227,6 +237,24 @@ export default function PolicyConditionsComp(props) {
value={ipRangeVal(input.value)}
onChange={(e) => handleChange(e, input)}
styles={selectInputCustomStyles}
+ formatCreateLabel={(inputValue) =>
+ `Create "${inputValue.trim()}"`
+ }
+ onCreateOption={(inputValue) => {
+ const trimmedValue = inputValue.trim();
+ if (trimmedValue) {
+ const newOption = {
+ label: trimmedValue,
+ value: trimmedValue
+ };
+ const currentValues = input.value ||
[];
+ const newValues = [
+ ...currentValues,
+ trimmedValue
+ ];
+ input.onChange(newValues);
+ }
+ }}
/>
)}
/>
diff --git
a/security-admin/src/main/webapp/react-webapp/src/views/Resources/ResourceComp.jsx
b/security-admin/src/main/webapp/react-webapp/src/views/Resources/ResourceComp.jsx
index b71448dbc..5d3006780 100644
---
a/security-admin/src/main/webapp/react-webapp/src/views/Resources/ResourceComp.jsx
+++
b/security-admin/src/main/webapp/react-webapp/src/views/Resources/ResourceComp.jsx
@@ -134,17 +134,17 @@ export default function ResourceComp(props) {
delete formValues[`isRecursiveSupport-${levelKey}`];
}
delete formValues[`value-${grpResourcesKeys[index]}`];
- let CurrentSelectedResourcs = selectedVal.name;
+ let currentSelectedResources = selectedVal.name;
for (let j = index + 1; j < grpResourcesKeys.length; j++) {
let level = grpResourcesKeys[j];
let nextResource = resources.find((m) => {
if (m?.parent) {
- return m.parent === CurrentSelectedResourcs;
+ return m.parent === currentSelectedResources;
}
});
if (nextResource) {
formValues[`resourceName-${level}`] = nextResource;
- CurrentSelectedResourcs = nextResource.name;
+ currentSelectedResources = nextResource.name;
}
}
diff --git
a/security-admin/src/main/webapp/react-webapp/src/views/Resources/ResourceSelectComp.jsx
b/security-admin/src/main/webapp/react-webapp/src/views/Resources/ResourceSelectComp.jsx
index d1b676b5c..52d2c919a 100644
---
a/security-admin/src/main/webapp/react-webapp/src/views/Resources/ResourceSelectComp.jsx
+++
b/security-admin/src/main/webapp/react-webapp/src/views/Resources/ResourceSelectComp.jsx
@@ -93,7 +93,7 @@ export default function ResourceSelectComp(props) {
toastId.current = toast.error(error.response.data.msgDesc);
} else {
toastId.current = toast.error(
- "Resouce lookup failed for current resource"
+ "Resource lookup failed for current resource"
);
}
}
diff --git
a/security-admin/src/main/webapp/react-webapp/src/views/SecurityZone/SecurityZoneForm.jsx
b/security-admin/src/main/webapp/react-webapp/src/views/SecurityZone/SecurityZoneForm.jsx
index d3a26b1cd..7d9ad9d31 100644
---
a/security-admin/src/main/webapp/react-webapp/src/views/SecurityZone/SecurityZoneForm.jsx
+++
b/security-admin/src/main/webapp/react-webapp/src/views/SecurityZone/SecurityZoneForm.jsx
@@ -48,7 +48,8 @@ import {
Loader,
scrollToError,
selectInputCustomStyles,
- selectInputCustomErrorStyles
+ selectInputCustomErrorStyles,
+ trimInputValue
} from "Components/CommonComponents";
import usePrompt from "Hooks/usePrompt";
import { getServiceDef } from "Utils/appState";
@@ -58,7 +59,7 @@ const noneOptions = {
value: "none"
};
-const PromtDialog = (props) => {
+const PromptDialog = (props) => {
const { isDirtyField, isUnblock } = props;
usePrompt("Are you sure you want to leave", isDirtyField && !isUnblock);
return null;
@@ -75,10 +76,10 @@ const SecurityZoneForm = () => {
const [resourceService, setResourceService] = useState({});
const [resourceServicesOpt, setResourceServicesOpt] = useState([]);
const [loader, setLoader] = useState(true);
- const [modelState, setModalstate] = useState({
+ const [modelState, setModalState] = useState({
showModalResource: false,
data: null,
- inputval: null,
+ inputVal: null,
index: 0
});
const [preventUnBlock, setPreventUnblock] = useState(false);
@@ -93,7 +94,7 @@ const SecurityZoneForm = () => {
const [defaultTagServiceOptions, setDefaultTagServiceOptions] = useState([]);
useEffect(() => {
- fetchInitalData();
+ fetchInitialData();
}, [params.zoneId]);
const validate = (values) => {
@@ -105,12 +106,12 @@ const SecurityZoneForm = () => {
};
} else {
if (
- !RegexValidation.NAME_VALIDATION.regexforNameValidation.test(
+ !RegexValidation.NAME_VALIDATION.regexForNameValidation.test(
values.name
)
) {
errors.name = {
- text: RegexValidation.NAME_VALIDATION.regexforNameValidationMessage
+ text: RegexValidation.NAME_VALIDATION.regexForNameValidationMessage
};
}
}
@@ -122,7 +123,7 @@ const SecurityZoneForm = () => {
) {
errors.adminRoles = {
required: true,
- text: "Please provide atleast one admin user or group or role !"
+ text: "Please provide at least one admin user or group or role !"
};
errors.adminUserGroups = {
required: true,
@@ -156,15 +157,15 @@ const SecurityZoneForm = () => {
};
const handleClose = () => {
- setModalstate({
+ setModalState({
showModalResource: false,
data: null,
- inputval: null,
+ inputVal: null,
index: 0
});
};
- const fetchInitalData = async () => {
+ const fetchInitialData = async () => {
await fetchResourceServices();
await fetchZones();
};
@@ -236,10 +237,10 @@ const SecurityZoneForm = () => {
}
}
- setModalstate({
+ setModalState({
showModalResource: true,
data: {},
- inputval: resourceInput,
+ inputVal: resourceInput,
index: -1
});
@@ -263,10 +264,10 @@ const SecurityZoneForm = () => {
}
}
- setModalstate({
+ setModalState({
showModalResource: true,
data: editData,
- inputval: resourceInput,
+ inputVal: resourceInput,
index: resourceIndex
});
@@ -407,8 +408,8 @@ const SecurityZoneForm = () => {
const EditFormData = () => {
const zoneData = {};
- zoneData.name = zone.name;
- zoneData.description = zone.description;
+ zoneData.name = zone?.name?.trim();
+ zoneData.description = zone?.description?.trim();
zoneData.adminUserGroups = [];
if (zone.adminUserGroups) {
@@ -633,14 +634,14 @@ const SecurityZoneForm = () => {
const handleSave = () => {
if (modelState.index === -1) {
let add = [];
- add = modelState.inputval.input.value;
+ add = modelState.inputVal.input.value;
add.push(modelState.data);
- modelState.inputval.input.onChange(add);
+ modelState.inputVal.input.onChange(add);
handleClose();
} else {
- let edit = modelState.inputval.input.value;
+ let edit = modelState.inputVal.input.value;
edit[modelState.index] = modelState.data;
- modelState.inputval.input.onChange(edit);
+ modelState.inputVal.input.onChange(edit);
handleClose();
}
};
@@ -776,7 +777,7 @@ const SecurityZoneForm = () => {
submitting
}) => (
<Row>
- <PromtDialog isDirtyField={dirty} isUnblock={preventUnBlock} />
+ <PromptDialog isDirtyField={dirty} isUnblock={preventUnBlock}
/>
<Col sm={12}>
<form
onSubmit={(event) => {
@@ -805,6 +806,7 @@ const SecurityZoneForm = () => {
: "form-control"
}
data-cy="name"
+ onBlur={(e) => trimInputValue(e, input)}
/>
{meta.error && meta.touched && (
<span className="invalid-field">
@@ -829,6 +831,7 @@ const SecurityZoneForm = () => {
{...input}
className="form-control"
data-cy="description"
+ onBlur={(e) => trimInputValue(e, input)}
/>
</Col>
</Row>
diff --git
a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceForm.jsx
b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceForm.jsx
index c710ae44b..cb4d4e65f 100644
---
a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceForm.jsx
+++
b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceForm.jsx
@@ -23,7 +23,6 @@ import { Form, Field } from "react-final-form";
import { toast } from "react-toastify";
import arrayMutators from "final-form-arrays";
import { FieldArray } from "react-final-form-arrays";
-import Select from "react-select";
import AsyncSelect from "react-select/async";
import AsyncCreatableSelect from "react-select/async-creatable";
import { RegexValidation, additionalServiceConfigs } from "Utils/XAEnums";
@@ -42,7 +41,8 @@ import {
CustomPopover,
Loader,
scrollToError,
- selectInputCustomStyles
+ selectInputCustomStyles,
+ trimInputValue
} from "Components/CommonComponents";
import {
difference,
@@ -387,8 +387,8 @@ class ServiceForm extends Component {
const serviceJson = {};
serviceJson["name"] = serviceResp?.data?.name;
- serviceJson["displayName"] = serviceResp?.data?.displayName;
- serviceJson["description"] = serviceResp?.data?.description;
+ serviceJson["displayName"] = serviceResp?.data?.displayName?.trim();
+ serviceJson["description"] = serviceResp?.data?.description?.trim();
serviceJson["isEnabled"] = JSON.stringify(serviceResp?.data?.isEnabled);
serviceJson["tagService"] =
@@ -409,7 +409,7 @@ class ServiceForm extends Component {
serviceDefConfigs.map((config) => {
serviceJson["configs"][config.replaceAll(".", "_").replaceAll("-", "_")]
=
- serviceResp?.data?.configs?.[config];
+ serviceResp?.data?.configs?.[config]?.trim();
});
const additionalConfigs = intersection(
@@ -435,7 +435,10 @@ class ServiceForm extends Component {
let editCustomConfigs = sortBy(
difference(serviceCustomConfigs, additionalConfigs)?.map((config) => {
- return { name: config, value: serviceResp?.data?.configs[config] };
+ return {
+ name: config?.trim(),
+ value: serviceResp?.data?.configs[config]?.trim()
+ };
}),
"name"
);
@@ -762,6 +765,7 @@ class ServiceForm extends Component {
data-cy={
"configs." + this.configsJson[configParam.name]
}
+ onBlur={(e) => trimInputValue(e, input)}
/>
</Col>
{configInfo.length === 1 && (
@@ -972,8 +976,8 @@ class ServiceForm extends Component {
: undefined;
validateDisplayName = (value) =>
- !RegexValidation.NAME_VALIDATION.regexforNameValidation.test(value)
- ? RegexValidation.NAME_VALIDATION.regexforNameValidationMessage
+ !RegexValidation.NAME_VALIDATION.regexForNameValidation.test(value)
+ ? RegexValidation.NAME_VALIDATION.regexForNameValidationMessage
: undefined;
composeValidators =
@@ -1205,6 +1209,7 @@ class ServiceForm extends Component {
: "form-control"
}
data-cy="displayName"
+ onBlur={(e) => trimInputValue(e, input)}
/>
</Col>
{meta.error && meta.touched && (
@@ -1232,6 +1237,7 @@ class ServiceForm extends Component {
: "form-control"
}
data-cy="description"
+ onBlur={(e) => trimInputValue(e, input)}
/>
</Col>
{meta.error && meta.touched && (
@@ -1330,22 +1336,34 @@ class ServiceForm extends Component {
fields.map((name, index) => (
<tr key={name}>
<td className="text-center">
- <Field
- name={`${name}.name`}
- component="input"
- className="form-control"
- data-js="name"
- data-cy="name"
- />
+ <Field name={`${name}.name`}>
+ {({ input }) => (
+ <input
+ {...input}
+ className="form-control"
+ data-js="name"
+ data-cy="name"
+ onBlur={(e) =>
+ trimInputValue(e, input)
+ }
+ />
+ )}
+ </Field>
</td>
<td className="text-center">
- <Field
- name={`${name}.value`}
- component="input"
- className="form-control"
- data-js="value"
- data-cy="value"
- />
+ <Field name={`${name}.value`}>
+ {({ input }) => (
+ <input
+ {...input}
+ className="form-control"
+ data-js="value"
+ data-cy="value"
+ onBlur={(e) =>
+ trimInputValue(e, input)
+ }
+ />
+ )}
+ </Field>
</td>
<td className="text-center">
<Button
diff --git
a/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/groups_details/GroupForm.jsx
b/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/groups_details/GroupForm.jsx
index 3082873c9..a540249e0 100644
---
a/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/groups_details/GroupForm.jsx
+++
b/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/groups_details/GroupForm.jsx
@@ -27,6 +27,7 @@ import {
Loader,
scrollToError,
CustomTooltip,
+ trimInputValue,
BlockUi
} from "Components/CommonComponents";
import { useParams, useLocation, useNavigate } from "react-router-dom";
@@ -42,7 +43,7 @@ const INITIAL_STATE = {
blockUI: false
};
-const PromtDialog = (props) => {
+const PromptDialog = (props) => {
const { isDirtyField, isUnblock } = props;
usePrompt("Are you sure you want to leave", isDirtyField && !isUnblock);
return null;
@@ -210,7 +211,7 @@ function GroupForm() {
if (params?.groupID) {
if (Object.keys(groupInfo).length > 0) {
formValueObj.name = groupInfo.name;
- formValueObj.description = groupInfo.description;
+ formValueObj.description = groupInfo?.description?.trim();
}
}
return formValueObj;
@@ -263,7 +264,7 @@ function GroupForm() {
dirty
}) => (
<div className="wrap user-role-grp-form">
- <PromtDialog isDirtyField={dirty} isUnblock={preventUnBlock} />
+ <PromptDialog isDirtyField={dirty} isUnblock={preventUnBlock} />
<form
onSubmit={(event) => {
handleSubmit(event);
@@ -300,6 +301,7 @@ function GroupForm() {
: false
}
data-cy="name"
+ onBlur={(e) => trimInputValue(e, input)}
/>
<span className="input-box-info-icon">
<CustomTooltip
@@ -349,6 +351,7 @@ function GroupForm() {
}
id="description"
data-cy="description"
+ onBlur={(e) => trimInputValue(e, input)}
/>
</Col>
</Row>
diff --git
a/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/role_details/RoleForm.jsx
b/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/role_details/RoleForm.jsx
index 2f82f1a05..746ff55a6 100644
---
a/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/role_details/RoleForm.jsx
+++
b/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/role_details/RoleForm.jsx
@@ -25,7 +25,8 @@ import {
BlockUi,
Loader,
CustomTooltip,
- selectInputCustomStyles
+ selectInputCustomStyles,
+ trimInputValue
} from "Components/CommonComponents";
import { FieldArray } from "react-final-form-arrays";
import arrayMutators from "final-form-arrays";
@@ -48,7 +49,7 @@ const INITIAL_STATE = {
blockUI: false
};
-const PromtDialog = (props) => {
+const PromptDialog = (props) => {
const { isDirtyField, isUnblock } = props;
usePrompt("Are you sure you want to leave", isDirtyField && !isUnblock);
return null;
@@ -302,7 +303,7 @@ function RoleForm() {
const handleUserAdd = (push) => {
if (selectedUser.length == 0) {
toast.dismiss(toastId.current);
- toastId.current = toast.warning("Please select atleast one user!!");
+ toastId.current = toast.warning("Please select at least one user!!");
} else {
let usr = selectedUser.map(({ value }) => ({
name: value,
@@ -322,7 +323,7 @@ function RoleForm() {
const handleGroupAdd = (push) => {
if (selectedGroup.length == 0) {
toast.dismiss(toastId.current);
- toastId.current = toast.warning("Please select atleast one group!!");
+ toastId.current = toast.warning("Please select at least one group!!");
} else {
let grp = selectedGroup.map(({ value }) => ({
name: value,
@@ -362,7 +363,7 @@ function RoleForm() {
const handleRoleAdd = (push) => {
if (selectedRole.length == 0) {
toast.dismiss(toastId.current);
- toastId.current = toast.warning("Please select atleast one role!!");
+ toastId.current = toast.warning("Please select at least one role!!");
} else {
let rol = selectedRole.map(({ value }) => ({
name: value,
@@ -415,7 +416,7 @@ function RoleForm() {
if (params?.roleID) {
if (Object.keys(roleInfo).length > 0) {
formValueObj.name = roleInfo.name;
- formValueObj.description = roleInfo.description;
+ formValueObj.description = roleInfo?.description?.trim();
formValueObj.users = roleInfo.users;
formValueObj.groups = roleInfo.groups;
formValueObj.roles = roleInfo.roles;
@@ -473,7 +474,7 @@ function RoleForm() {
dirty
}) => (
<div className="wrap user-role-grp-form">
- <PromtDialog isDirtyField={dirty} isUnblock={preventUnBlock} />
+ <PromptDialog isDirtyField={dirty} isUnblock={preventUnBlock} />
<form
onSubmit={(event) => {
@@ -502,6 +503,7 @@ function RoleForm() {
}
disabled={params.roleID ? true : false}
data-cy="name"
+ onBlur={(e) => trimInputValue(e, input)}
/>
<span className="input-box-info-icon">
<CustomTooltip
@@ -543,6 +545,7 @@ function RoleForm() {
placeholder="Description"
className="form-control"
data-cy="description"
+ onBlur={(e) => trimInputValue(e, input)}
/>
</Col>
</Row>
diff --git
a/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/users_details/UserForm.jsx
b/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/users_details/UserForm.jsx
index aa47e137e..e00333e7d 100644
---
a/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/users_details/UserForm.jsx
+++
b/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/users_details/UserForm.jsx
@@ -23,7 +23,8 @@ import { Form, Field } from "react-final-form";
import {
BlockUi,
scrollToError,
- selectInputCustomStyles
+ selectInputCustomStyles,
+ trimInputValue
} from "Components/CommonComponents";
import AsyncSelect from "react-select/async";
import Select from "react-select";
@@ -48,7 +49,7 @@ const INITIAL_STATE = {
preventUnBlock: false
};
-const PromtDialog = (props) => {
+const PromptDialog = (props) => {
const { isDirtyField, isUnblock } = props;
usePrompt("Are you sure you want to leave", isDirtyField && !isUnblock);
return null;
@@ -249,13 +250,13 @@ function UserForm(props) {
const disabledUserRoleField = () => {
const userProps = getUserProfile();
- let disabledUserRolefield;
+ let disabledUserRoleField;
if (isEditView && userInfo) {
if (userInfo.userSource == UserTypes.USER_EXTERNAL.value) {
- disabledUserRolefield = true;
+ disabledUserRoleField = true;
}
if (userInfo.userSource == UserTypes.USER_FEDERATED.value) {
- return (disabledUserRolefield = true);
+ return (disabledUserRoleField = true);
}
if (userProps.loginId != "admin") {
if (userInfo.name != "admin") {
@@ -263,21 +264,21 @@ function UserForm(props) {
userProps.userRoleList[0] == "ROLE_SYS_ADMIN" ||
userProps.userRoleList[0] == "ROLE_KEY_ADMIN"
) {
- disabledUserRolefield = false;
+ disabledUserRoleField = false;
} else {
- disabledUserRolefield = true;
+ disabledUserRoleField = true;
}
} else {
- disabledUserRolefield = true;
+ disabledUserRoleField = true;
}
} else {
- disabledUserRolefield = false;
+ disabledUserRoleField = false;
}
if (userInfo.name == userProps.loginId) {
- disabledUserRolefield = true;
+ disabledUserRoleField = true;
}
}
- return disabledUserRolefield;
+ return disabledUserRoleField;
};
const userRoleListData = () => {
@@ -296,10 +297,9 @@ function UserForm(props) {
let formValueObj = {};
if (isEditView && userInfo) {
formValueObj.name = userInfo.name;
- formValueObj.firstName = userInfo.firstName;
- formValueObj.lastName = userInfo.lastName;
+ formValueObj.firstName = userInfo?.firstName?.trim();
+ formValueObj.lastName = userInfo?.lastName?.trim();
formValueObj.emailAddress = userInfo.emailAddress;
- formValueObj.firstName = userInfo.firstName;
}
if (userInfo && userInfo.userRoleList) {
formValueObj.userRoleList = {
@@ -429,7 +429,7 @@ function UserForm(props) {
dirty
}) => (
<div className="wrap user-role-grp-form">
- <PromtDialog isDirtyField={dirty} isUnblock={preventUnBlock} />
+ <PromptDialog isDirtyField={dirty} isUnblock={preventUnBlock} />
<form
onSubmit={(event) => {
handleSubmit(event);
@@ -457,6 +457,7 @@ function UserForm(props) {
}
disabled={isEditView ? true : false}
data-cy="name"
+ onBlur={(e) => trimInputValue(e, input)}
/>
<InfoIcon
css="input-box-info-icon"
@@ -507,7 +508,7 @@ function UserForm(props) {
>
{
RegexMessage.MESSAGE
- .passwordvalidationinfomessage
+ .passwordValidationInfoMessage
}
</p>
}
@@ -559,7 +560,7 @@ function UserForm(props) {
>
{
RegexMessage.MESSAGE
- .passwordvalidationinfomessage
+ .passwordValidationInfoMessage
}
</p>
}
@@ -600,6 +601,7 @@ function UserForm(props) {
: false
}
data-cy="firstName"
+ onBlur={(e) => trimInputValue(e, input)}
/>
<InfoIcon
css="input-box-info-icon"
@@ -637,6 +639,7 @@ function UserForm(props) {
: false
}
data-cy="lastName"
+ onBlur={(e) => trimInputValue(e, input)}
/>
<InfoIcon
css="input-box-info-icon"
@@ -685,7 +688,7 @@ function UserForm(props) {
css="input-box-info-icon"
position="right"
message={
- RegexMessage.MESSAGE.emailvalidationinfomessage
+ RegexMessage.MESSAGE.emailValidationInfoMessage
}
/>
diff --git
a/security-admin/src/main/webapp/react-webapp/src/views/UserProfile.jsx
b/security-admin/src/main/webapp/react-webapp/src/views/UserProfile.jsx
index a1c3df29a..ff8267271 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/UserProfile.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/UserProfile.jsx
@@ -23,7 +23,11 @@ import { Form, Field } from "react-final-form";
import { toast } from "react-toastify";
import { getUserProfile, setUserProfile } from "Utils/appState";
import { isSystemAdmin, isKeyAdmin, InfoIcon } from "Utils/XAUtils";
-import { BlockUi, scrollToError } from "../components/CommonComponents";
+import {
+ BlockUi,
+ scrollToError,
+ trimInputValue
+} from "Components/CommonComponents";
import withRouter from "Hooks/withRouter";
import { UserTypes, RegexValidation } from "Utils/XAEnums";
import { cloneDeep, has, isEmpty } from "lodash";
@@ -102,7 +106,7 @@ class UserProfile extends Component {
(error?.response?.data?.msgDesc == "serverMsg.userMgrOldPassword" ||
error?.response?.data?.msgDesc == "serverMsg.userMgrNewPassword")
) {
- toast.error("Error occured while updating user password!");
+ toast.error("Error occurred while updating user password!");
}
console.error(`Error occurred while updating user password! ${error}`);
}
@@ -218,8 +222,8 @@ class UserProfile extends Component {
onSubmit={this.updateUserInfo}
validate={this.validateUserForm}
initialValues={{
- firstName: userProps.firstName,
- lastName: userProps.lastName,
+ firstName: userProps?.firstName?.trim(),
+ lastName: userProps?.lastName?.trim(),
emailAddress: userProps.emailAddress,
userRoleList: userProps.userRoleList[0]
}}
@@ -263,6 +267,7 @@ class UserProfile extends Component {
}
disabled={isUserAllowed}
data-cy="firstName"
+ onBlur={(e) => trimInputValue(e, input)}
/>
<InfoIcon
css="input-box-info-icon"
@@ -306,6 +311,7 @@ class UserProfile extends Component {
}
disabled={isUserAllowed}
data-cy="lastName"
+ onBlur={(e) => trimInputValue(e, input)}
/>
<InfoIcon
css="input-box-info-icon"
@@ -355,7 +361,7 @@ class UserProfile extends Component {
position="right"
message={
RegexMessage.MESSAGE
- .emailvalidationinfomessage
+ .emailValidationInfoMessage
}
/>
{meta.error && meta.touched && (
