Skip to content

RANGER-5303 : Implement White-space Input Validation Across Ranger UI Forms. #775

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

Open
dhavaljrajpara wants to merge 1 commit into
base: master
Choose a base branch
from
Open

RANGER-5303 : Implement White-space Input Validation Across Ranger UI Forms. #775

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
9 changes: 9 additions & 0 deletions security-admin/src/main/webapp/react-webapp/src/components/CommonComponents.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
};
4 changes: 2 additions & 2 deletions security-admin/src/main/webapp/react-webapp/src/components/CreatableField.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,8 @@ const CreatableField = (props) => {
};

const createOption = (label) => ({
value: label,
label: label
value: label.trim(),
label: label.trim()
});

const handleInputChange = (value) => {
Expand Down
35 changes: 30 additions & 5 deletions security-admin/src/main/webapp/react-webapp/src/components/Editable.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 : "";
Expand Down Expand Up @@ -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 && (
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions security-admin/src/main/webapp/react-webapp/src/utils/XAEnums.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}$/,
Expand All @@ -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: (
<>
Expand Down
6 changes: 3 additions & 3 deletions security-admin/src/main/webapp/react-webapp/src/utils/XAMessages.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
47 changes: 31 additions & 16 deletions security-admin/src/main/webapp/react-webapp/src/views/Encryption/KeyCreate.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -120,16 +125,16 @@ 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)) {
if (
!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();
}
}

Expand Down Expand Up @@ -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);
Expand All @@ -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
Expand Down Expand Up @@ -335,6 +341,7 @@ function KeyCreate(props) {
{...input}
className="form-control"
data-cy="description"
onBlur={(e) => trimInputValue(e, input)}
/>
</Col>
</Row>
Expand All @@ -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
Expand Down
27 changes: 15 additions & 12 deletions security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/AddUpdatePolicyForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -291,16 +292,16 @@ 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",
params: params
});

return policyLabelResp.data.map((name) => ({
label: name,
value: name
label: name.trim(),
value: name.trim()
}));
};

Expand Down Expand Up @@ -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) {
Expand All @@ -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}`] =
Expand Down Expand Up @@ -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[
Expand Down Expand Up @@ -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();
}
}
}
Expand Down Expand Up @@ -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();
}
}
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -1303,6 +1304,7 @@ export default function AddUpdatePolicyForm() {
: "form-control"
}
data-cy="policyName"
onBlur={(e) => trimInputValue(e, input)}
/>
<InfoIcon
css="input-box-info-icon"
Expand Down Expand Up @@ -1425,6 +1427,7 @@ export default function AddUpdatePolicyForm() {
as="textarea"
rows={3}
data-cy="description"
onBlur={(e) => trimInputValue(e, input)}
/>
</Col>
</FormB.Group>
Expand Down
32 changes: 30 additions & 2 deletions security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/PolicyConditionsComp.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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;
};
Expand Down Expand Up @@ -193,6 +200,9 @@ export default function PolicyConditionsComp(props) {
}
as="textarea"
rows={3}
onBlur={(e) =>
trimInputValue(e, input)
}
/>
{meta.error && (
<span className="invalid-field">
Expand Down Expand Up @@ -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);
}
}}
/>
)}
/>
Expand Down
Loading
Loading