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 3cca69231 RANGER-5330 : Disable tab selection in Ranger UI form fields
(#773)
3cca69231 is described below
commit 3cca69231bfe9920c0d432a25d10aa79574ef3b0
Author: Dhaval Rajpara <[email protected]>
AuthorDate: Thu Jan 29 21:29:46 2026 +0530
RANGER-5330 : Disable tab selection in Ranger UI form fields (#773)
Co-authored-by: Dhaval Rajpara <[email protected]>
---
.../src/main/webapp/react-webapp/src/utils/XAUtils.js | 2 +-
.../src/views/PermissionsModule/EditPermission.jsx | 8 +++++---
.../src/views/PolicyListing/AddUpdatePolicyForm.jsx | 19 +++++++++++++++++++
.../src/views/PolicyListing/PolicyPermissionItem.jsx | 6 ++++++
.../src/views/PolicyListing/TagBasePermissionItem.jsx | 1 +
.../src/views/Reports/UserAccessLayout.jsx | 6 ++++++
.../react-webapp/src/views/Resources/ResourceComp.jsx | 1 +
.../src/views/Resources/ResourceSelectComp.jsx | 14 ++++++++++++++
.../src/views/SecurityZone/SecurityZoneForm.jsx | 8 ++++++++
.../src/views/ServiceManager/ServiceAuditFilter.jsx | 3 +++
.../src/views/ServiceManager/ServiceDefinitions.jsx | 1 +
.../src/views/ServiceManager/ServiceForm.jsx | 8 ++------
.../react-webapp/src/views/SideBar/TopNavBar.jsx | 2 ++
.../UserGroupRoleListing/role_details/RoleForm.jsx | 6 ++++++
.../UserGroupRoleListing/users_details/UserForm.jsx | 3 +++
15 files changed, 78 insertions(+), 10 deletions(-)
diff --git a/security-admin/src/main/webapp/react-webapp/src/utils/XAUtils.js
b/security-admin/src/main/webapp/react-webapp/src/utils/XAUtils.js
index 21a163531..0f9f66b58 100644
--- a/security-admin/src/main/webapp/react-webapp/src/utils/XAUtils.js
+++ b/security-admin/src/main/webapp/react-webapp/src/utils/XAUtils.js
@@ -1082,7 +1082,7 @@ export const InfoIcon = (props) => {
};
/* Edit Permission Module Infinite Scroll */
-export const CustomInfinteScroll = (props) => {
+export const CustomInfiniteScroll = (props) => {
const { data, removeUsrGrp, scrollableDiv } = props;
const [count, setCount] = useState({
startIndex: 0,
diff --git
a/security-admin/src/main/webapp/react-webapp/src/views/PermissionsModule/EditPermission.jsx
b/security-admin/src/main/webapp/react-webapp/src/views/PermissionsModule/EditPermission.jsx
index c482363a1..e2d422130 100755
---
a/security-admin/src/main/webapp/react-webapp/src/views/PermissionsModule/EditPermission.jsx
+++
b/security-admin/src/main/webapp/react-webapp/src/views/PermissionsModule/EditPermission.jsx
@@ -39,7 +39,7 @@ import { toast } from "react-toastify";
import { cloneDeep, find, findIndex, isEmpty, map, reverse } from "lodash";
import { AccessResult } from "Utils/XAEnums";
import {
- CustomInfinteScroll,
+ CustomInfiniteScroll,
commonBreadcrumb,
serverError
} from "Utils/XAUtils";
@@ -414,6 +414,7 @@ const EditPermission = () => {
placeholder="Select Groups"
isMulti
styles={selectInputCustomStyles}
+ tabSelectsValue={false}
/>
<Button
size="sm"
@@ -461,6 +462,7 @@ const EditPermission = () => {
placeholder="Select Users"
isMulti
styles={selectInputCustomStyles}
+ tabSelectsValue={false}
/>
<Button
@@ -502,7 +504,7 @@ const EditPermission = () => {
></Spinner>
</div>
) : (
- <CustomInfinteScroll
+ <CustomInfiniteScroll
data={selectedGrp}
removeUsrGrp={handleRemoveGrp}
scrollableDiv="scrollableGrpDiv"
@@ -528,7 +530,7 @@ const EditPermission = () => {
></Spinner>
</div>
) : (
- <CustomInfinteScroll
+ <CustomInfiniteScroll
data={selectedUsr}
removeUsrGrp={handleRemoveUsr}
scrollableDiv="scrollableUsrDiv"
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 515c2b0d0..2981b74f9 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
@@ -1393,6 +1393,25 @@ export default function AddUpdatePolicyForm() {
}}
defaultOptions={defaultPolicyLabelOptions}
styles={selectInputCustomStyles}
+ // Add this prop to trim the visual "Create"
label
+ formatCreateLabel={(inputValue) =>
+ `Create "${inputValue.trim()}"`
+ }
+ // Add this prop to trim the value when a
tag is created
+ onCreateOption={(inputValue) => {
+ const policyLabelVal = inputValue.trim();
+ if (policyLabelVal) {
+ input.onChange([
+ ...input.value,
+ {
+ label: policyLabelVal,
+ value: policyLabelVal
+ }
+ ]);
+ }
+ }}
+ tabSelectsValue={false}
+ placeholder="Add Policy Labels"
/>
</Col>
</FormB.Group>
diff --git
a/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/PolicyPermissionItem.jsx
b/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/PolicyPermissionItem.jsx
index 4496f7541..69325c2dd 100644
---
a/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/PolicyPermissionItem.jsx
+++
b/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/PolicyPermissionItem.jsx
@@ -371,6 +371,8 @@ export default function PolicyPermissionItem(props) {
styles={customStyles}
cacheOptions
isMulti
+ tabSelectsValue={false}
+ placeholder="Select Roles"
/>
</div>
)}
@@ -402,6 +404,8 @@ export default function PolicyPermissionItem(props) {
styles={customStyles}
cacheOptions
isMulti
+ tabSelectsValue={false}
+ placeholder="Select Groups"
/>
</div>
)}
@@ -433,6 +437,8 @@ export default function PolicyPermissionItem(props) {
styles={customStyles}
cacheOptions
isMulti
+ tabSelectsValue={false}
+ placeholder="Select Users"
/>
</div>
)}
diff --git
a/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/TagBasePermissionItem.jsx
b/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/TagBasePermissionItem.jsx
index 083bba71c..7d164dedc 100644
---
a/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/TagBasePermissionItem.jsx
+++
b/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/TagBasePermissionItem.jsx
@@ -373,6 +373,7 @@ export default function TagBasePermissionItem(props) {
isClearable={false}
isSearchable={true}
placeholder="Select Service Name"
+ tabSelectsValue={false}
/>
</FormB.Group>
)}
diff --git
a/security-admin/src/main/webapp/react-webapp/src/views/Reports/UserAccessLayout.jsx
b/security-admin/src/main/webapp/react-webapp/src/views/Reports/UserAccessLayout.jsx
index 2d30c3c22..5dc1c6914 100644
---
a/security-admin/src/main/webapp/react-webapp/src/views/Reports/UserAccessLayout.jsx
+++
b/security-admin/src/main/webapp/react-webapp/src/views/Reports/UserAccessLayout.jsx
@@ -538,6 +538,7 @@ function UserAccessLayout() {
]}
menuPlacement="auto"
placeholder="Select Policy Type"
+ tabSelectsValue={false}
/>
)}
</Field>
@@ -558,6 +559,7 @@ function UserAccessLayout() {
menuPlacement="auto"
placeholder="Select Component Type"
styles={selectInputCustomStyles}
+ tabSelectsValue={false}
/>
)}
</Field>
@@ -596,6 +598,7 @@ function UserAccessLayout() {
loadOptions={fetchPolicyLabels}
placeholder="Select Policy Label"
styles={selectInputCustomStyles}
+ tabSelectsValue={false}
/>
)}
</Field>
@@ -617,6 +620,7 @@ function UserAccessLayout() {
menuPlacement="auto"
placeholder="Select Zone Name"
styles={selectInputCustomStyles}
+ tabSelectsValue={false}
/>
)}
</Field>
@@ -654,6 +658,7 @@ function UserAccessLayout() {
onChange={(e) =>
onChangeSearchBy(e, input, values)
}
+ tabSelectsValue={false}
/>
)}
</Field>
@@ -814,6 +819,7 @@ function SearchByAsyncSelect(props) {
DropdownIndicator: () => null,
IndicatorSeparator: () => null
}}
+ tabSelectsValue={false}
/>
)}
</Field>
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 661e8237d..b71448dbc 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
@@ -209,6 +209,7 @@ export default function ResourceComp(props) {
}
isSearchable={false}
styles={selectInputCustomStyles}
+ tabSelectsValue={false}
/>
</span>
<RenderValidateField name={`resourceName-${levelKey}`} />
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 128796f55..d1b676b5c 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
@@ -216,6 +216,20 @@ export default function ResourceSelectComp(props) {
filterOption={customFilterOptions}
isLoading={isLoading}
styles={selectInputCustomStyles}
+ formatCreateLabel={(inputValue) => `Create "${inputValue.trim()}"`}
+ onCreateOption={(inputValue) => {
+ const trimmedValue = inputValue.trim();
+ if (trimmedValue) {
+ const newOption = { label: trimmedValue, value: trimmedValue };
+ const currentValue = input.value || [];
+ const newValue = isArray(currentValue)
+ ? [...currentValue, newOption]
+ : [newOption];
+ input.onChange(newValue);
+ }
+ }}
+ tabSelectsValue={false}
+ placeholder="Add policy Resources"
/>
{formValues &&
formValues[`resourceName-${levelKey}`]?.mandatory &&
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 12a376458..d3a26b1cd 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
@@ -874,6 +874,7 @@ const SecurityZoneForm = () => {
}}
isClearable={true}
placeholder="Select Users"
+ tabSelectsValue={false}
/>
</Col>
</Row>
@@ -918,6 +919,7 @@ const SecurityZoneForm = () => {
}}
isClearable={true}
placeholder="Select Groups"
+ tabSelectsValue={false}
/>
</Col>
</Row>
@@ -962,6 +964,7 @@ const SecurityZoneForm = () => {
}}
isClearable={true}
placeholder="Select Roles"
+ tabSelectsValue={false}
/>
{meta.touched && meta.error && (
<span className="invalid-field">
@@ -1011,6 +1014,7 @@ const SecurityZoneForm = () => {
}}
isClearable={true}
placeholder="Select Users"
+ tabSelectsValue={false}
/>
</Col>
</Row>
@@ -1055,6 +1059,7 @@ const SecurityZoneForm = () => {
}}
isClearable={true}
placeholder="Select Groups"
+ tabSelectsValue={false}
/>
</Col>
</Row>
@@ -1099,6 +1104,7 @@ const SecurityZoneForm = () => {
}}
isClearable={true}
placeholder="Select Roles"
+ tabSelectsValue={false}
/>
{meta.error && meta.touched && (
<span className="invalid-field">
@@ -1140,6 +1146,7 @@ const SecurityZoneForm = () => {
isClearable={true}
placeholder="Select Tag Services"
styles={selectInputCustomStyles}
+ tabSelectsValue={false}
/>
</Col>
</Row>
@@ -1177,6 +1184,7 @@ const SecurityZoneForm = () => {
isSearchable={true}
placeholder="Select Resource Services"
styles={selectInputCustomStyles}
+ tabSelectsValue={false}
/>
</Col>
</Row>
diff --git
a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceAuditFilter.jsx
b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceAuditFilter.jsx
index 36d0d6aa1..9468bef96 100644
---
a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceAuditFilter.jsx
+++
b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceAuditFilter.jsx
@@ -429,6 +429,7 @@ export default function ServiceAuditFilter(props) {
isMulti
styles={selectInputCustomStyles}
placeholder="Select Roles"
+ tabSelectsValue={false}
/>
</div>
)}
@@ -469,6 +470,7 @@ export default function ServiceAuditFilter(props) {
isMulti
styles={selectInputCustomStyles}
placeholder="Select Groups"
+ tabSelectsValue={false}
/>
</div>
)}
@@ -509,6 +511,7 @@ export default function ServiceAuditFilter(props) {
isMulti
styles={selectInputCustomStyles}
placeholder="Select Users"
+ tabSelectsValue={false}
/>
</div>
)}
diff --git
a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceDefinitions.jsx
b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceDefinitions.jsx
index c3d0a2b67..d1fb1de58 100644
---
a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceDefinitions.jsx
+++
b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceDefinitions.jsx
@@ -409,6 +409,7 @@ class ServiceDefinitions extends Component {
})}
menuPlacement="auto"
placeholder="Select Zone Name"
+ tabSelectsValue={false}
/>
</div>
)}
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 40d871904..c710ae44b 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
@@ -984,16 +984,12 @@ class ServiceForm extends Component {
undefined
);
- SelectField = ({ input, ...rest }) => (
- <Select {...input} {...rest} searchable />
- );
-
AsyncSelectField = ({ input, ...rest }) => (
- <AsyncSelect {...input} {...rest} cacheOptions />
+ <AsyncSelect {...input} {...rest} cacheOptions tabSelectsValue={false} />
);
AsyncCreatableSelectField = ({ input, ...rest }) => (
- <AsyncCreatableSelect {...input} {...rest} />
+ <AsyncCreatableSelect {...input} {...rest} tabSelectsValue={false} />
);
fetchUsers = async (inputValue) => {
diff --git
a/security-admin/src/main/webapp/react-webapp/src/views/SideBar/TopNavBar.jsx
b/security-admin/src/main/webapp/react-webapp/src/views/SideBar/TopNavBar.jsx
index 8e7aa43e7..764591b8e 100644
---
a/security-admin/src/main/webapp/react-webapp/src/views/SideBar/TopNavBar.jsx
+++
b/security-admin/src/main/webapp/react-webapp/src/views/SideBar/TopNavBar.jsx
@@ -206,6 +206,7 @@ export const TopNavBar = (props) => {
menuPlacement="auto"
placeholder="Select Service Name"
hideSelectedOptions
+ tabSelectsValue={false}
/>
{!isKMSRole && (
<React.Fragment>
@@ -223,6 +224,7 @@ export const TopNavBar = (props) => {
placeholder="Select Zone Name"
isClearable
hideSelectedOptions
+ tabSelectsValue={false}
/>
</React.Fragment>
)}
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 222d901f5..2f82f1a05 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
@@ -634,6 +634,8 @@ function RoleForm() {
data-name="usersSelect"
data-cy="usersSelect"
styles={selectInputCustomStyles}
+ tabSelectsValue={false}
+ placeholder="Select Users"
/>
</div>
<div className="col-sm-3">
@@ -741,6 +743,8 @@ function RoleForm() {
data-name="groupsSelect"
data-cy="groupsSelect"
styles={selectInputCustomStyles}
+ tabSelectsValue={false}
+ placeholder="Select Groups"
/>
</div>
<div className="col-sm-3">
@@ -848,6 +852,8 @@ function RoleForm() {
data-name="rolesSelect"
data-cy="rolesSelect"
styles={selectInputCustomStyles}
+ tabSelectsValue={false}
+ placeholder="Select Roles"
/>
</div>
<div className="col-sm-3">
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 2eb9e5a85..aa47e137e 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
@@ -241,6 +241,8 @@ function UserForm(props) {
isEditView && userInfo && isExternalOrFederatedUser ? true : false
}
styles={selectInputCustomStyles}
+ tabSelectsValue={false}
+ placeholder="Select Groups"
/>
);
};
@@ -710,6 +712,7 @@ function UserForm(props) {
options={userRoleListData()}
onChange={(e) => getUserRole(e, input)}
isDisabled={disabledUserRoleField()}
+ tabSelectsValue={false}
></Select>
)}
></Field>
