This is an automated email from the ASF dual-hosted git repository.
mugdha 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 014da9402 RANGER-5198 : Prevent selected long string values from
getting truncated in the react-select control
014da9402 is described below
commit 014da940226ec56fb792d6b0376e021740454813
Author: Mugdha Varadkar <[email protected]>
AuthorDate: Mon Apr 21 01:13:26 2025 +0530
RANGER-5198 : Prevent selected long string values from getting truncated in
the react-select control
---
.../src/components/CommonComponents.jsx | 25 +++++++++++++-
.../react-webapp/src/components/CreatableField.jsx | 6 ++--
.../react-webapp/src/components/Editable.jsx | 16 ++++-----
.../main/webapp/react-webapp/src/styles/style.css | 4 ---
.../src/views/PermissionsModule/EditPermission.jsx | 16 +++++----
.../views/PolicyListing/AddUpdatePolicyForm.jsx | 15 ++++++---
.../views/PolicyListing/PolicyConditionsComp.jsx | 10 +++---
.../views/PolicyListing/PolicyPermissionItem.jsx | 4 ++-
.../PolicyListing/PolicyValidityPeriodComp.jsx | 14 +++++---
.../views/PolicyListing/TagBasePermissionItem.jsx | 18 ++++++----
.../src/views/Reports/UserAccessLayout.jsx | 13 +++++---
.../src/views/Resources/ResourceComp.jsx | 4 ++-
.../src/views/Resources/ResourceSelectComp.jsx | 5 +--
.../src/views/SecurityZone/SecurityZoneForm.jsx | 39 ++++++++++++----------
.../src/views/ServiceManager/ExportPolicy.jsx | 9 +++--
.../src/views/ServiceManager/ImportPolicy.jsx | 6 +++-
.../views/ServiceManager/ServiceAuditFilter.jsx | 19 ++++++-----
.../src/views/ServiceManager/ServiceForm.jsx | 13 ++++----
.../UserGroupRoleListing/role_details/RoleForm.jsx | 17 +++++++---
.../users_details/UserFormComp.jsx | 15 +++++----
20 files changed, 167 insertions(+), 101 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 574a1ee74..85a361dd3 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
@@ -184,6 +184,7 @@ export class AccessMoreLess extends Component {
);
}
}
+
export const AuditFilterEntries = (props) => {
const { entries, refreshTable } = props;
const refreshTables = () => {
@@ -491,7 +492,29 @@ export const scrollToError = (selector) => {
);
};
-export const selectCustomStyles = {
+export const selectInputCustomStyles = {
+ option: (base) => ({
+ ...base,
+ textOverflow: "unset",
+ whiteSpace: "break-spaces",
+ wordBreak: "break-all"
+ }),
+ multiValueLabel: (base) => ({
+ ...base,
+ textOverflow: "unset",
+ whiteSpace: "break-spaces",
+ wordBreak: "break-all"
+ }),
+ singleValue: (base) => ({
+ ...base,
+ textOverflow: "unset",
+ whiteSpace: "break-spaces",
+ wordBreak: "break-all"
+ })
+};
+
+export const selectInputCustomErrorStyles = {
+ ...selectInputCustomStyles,
control: () => {
return {
border: "4px solid red",
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 dba0df762..0b2620d46 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
@@ -19,6 +19,7 @@
import React, { useState, useRef, useEffect } from "react";
import CreatableSelect from "react-select/creatable";
+import { selectInputCustomStyles } from "Components/CommonComponents";
const CreatableField = (props) => {
const { actionValues, creatableOnChange } = props;
@@ -33,12 +34,12 @@ const CreatableField = (props) => {
}
}, [actionValues]);
- const handleChange = (value, input) => {
+ const handleChange = (value) => {
setActionValue(value);
creatableOnChange(value);
};
- const handleKeyDown = (e, input) => {
+ const handleKeyDown = (e) => {
if (!actionInputValue) return;
switch (e.key) {
case "Enter":
@@ -73,6 +74,7 @@ const CreatableField = (props) => {
onChange={(actionValue) => handleChange(actionValue)}
onInputChange={handleInputChange}
onKeyDown={(e) => handleKeyDown(e)}
+ styles={selectInputCustomStyles}
/>
);
};
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 e7003c243..9d1234d2b 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
@@ -31,8 +31,9 @@ import { find, findIndex, isArray, isEmpty, sortBy } from
"lodash";
import { isObject } from "Utils/XAUtils";
import CreatableSelect from "react-select/creatable";
import Select from "react-select";
-import { InfoIcon } from "../utils/XAUtils";
-import { RegexMessage } from "../utils/XAMessages";
+import { InfoIcon } from "Utils/XAUtils";
+import { RegexMessage } from "Utils/XAMessages";
+import { selectInputCustomStyles } from "Components/CommonComponents";
const esprima = require("esprima");
const TYPE_SELECT = "select";
@@ -298,9 +299,10 @@ const CustomCondition = (props) => {
selectedInputVal == "" ? null : selectedInputVal
}
onChange={(e) => handleChange(e, m.name)}
- placeholder="enter expression"
+ placeholder=""
width="500px"
isClearable={false}
+ styles={selectInputCustomStyles}
/>
</Form.Group>
</div>
@@ -404,7 +406,7 @@ const Editable = (props) => {
const policyConditionDisplayValue = () => {
let ipRangVal, uiHintVal;
if (selectVal) {
- return sortBy(Object.keys(selectVal)).map((property, index) => {
+ return sortBy(Object.keys(selectVal)).map((property) => {
let conditionObj = find(conditionDefVal, function (m) {
if (m.name == property) {
return m;
@@ -647,7 +649,7 @@ const Editable = (props) => {
: (selectValRef.current = editableValue);
}, [editableValue]);
- const handleApply = (e) => {
+ const handleApply = () => {
let errors, uiHintVal;
if (selectValRef?.current) {
sortBy(Object.keys(selectValRef.current)).map((property) => {
@@ -664,9 +666,7 @@ const Editable = (props) => {
selectValRef.current[conditionObj.name] != undefined
) {
try {
- let t = esprima.parseScript(
- selectValRef.current[conditionObj.name]
- );
+ esprima.parseScript(selectValRef.current[conditionObj.name]);
} catch (e) {
errors = e.message;
}
diff --git a/security-admin/src/main/webapp/react-webapp/src/styles/style.css
b/security-admin/src/main/webapp/react-webapp/src/styles/style.css
index 40f28e75f..51bc0e071 100644
--- a/security-admin/src/main/webapp/react-webapp/src/styles/style.css
+++ b/security-admin/src/main/webapp/react-webapp/src/styles/style.css
@@ -713,10 +713,6 @@ header {
background-color: #e4e4e4;
margin: 3px 3px;
float: left;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- max-width: 200px;
}
.formHeader {
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 821390814..c482363a1 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
@@ -28,7 +28,11 @@ import {
} from "react-bootstrap";
import React, { useEffect, useReducer, useRef } from "react";
import { useParams, useNavigate } from "react-router-dom";
-import { Loader } from "Components/CommonComponents";
+import {
+ Loader,
+ BlockUi,
+ selectInputCustomStyles
+} from "Components/CommonComponents";
import { fetchApi } from "Utils/fetchAPI";
import AsyncSelect from "react-select/async";
import { toast } from "react-toastify";
@@ -38,8 +42,7 @@ import {
CustomInfinteScroll,
commonBreadcrumb,
serverError
-} from "../../utils/XAUtils";
-import { BlockUi } from "../../components/CommonComponents";
+} from "Utils/XAUtils";
const initialState = {
loader: true,
@@ -397,7 +400,6 @@ const EditPermission = () => {
name="selectGroups"
render={({ input }) => (
<div>
- {" "}
<AsyncSelect
{...input}
className="edit-perm-select"
@@ -410,8 +412,8 @@ const EditPermission = () => {
}}
isClearable={false}
placeholder="Select Groups"
- width="500px"
isMulti
+ styles={selectInputCustomStyles}
/>
<Button
size="sm"
@@ -451,14 +453,14 @@ const EditPermission = () => {
defaultOptions
filterOption={filterUsrOp}
loadOptions={fetchUsers}
- isMulti
- width="500px"
components={{
DropdownIndicator: () => null,
IndicatorSeparator: () => null
}}
isClearable={false}
placeholder="Select Users"
+ isMulti
+ styles={selectInputCustomStyles}
/>
<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 2cb72e815..c81d8d5c7 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
@@ -49,7 +49,12 @@ import {
cloneDeep
} from "lodash";
import { toast } from "react-toastify";
-import { Loader, scrollToError } from "Components/CommonComponents";
+import {
+ BlockUi,
+ Loader,
+ scrollToError,
+ selectInputCustomStyles
+} from "Components/CommonComponents";
import { fetchApi } from "Utils/fetchAPI";
import { RangerPolicyType, getEnumElementByValue } from "Utils/XAEnums";
import ResourceComp from "../Resources/ResourceComp";
@@ -64,14 +69,13 @@ import {
commonBreadcrumb,
isPolicyExpired,
getResourcesDefVal
-} from "../../utils/XAUtils";
+} from "Utils/XAUtils";
import { useAccordionButton } from "react-bootstrap/AccordionButton";
import AccordionContext from "react-bootstrap/AccordionContext";
import usePrompt from "Hooks/usePrompt";
-import { RegexMessage } from "../../utils/XAMessages";
+import { RegexMessage } from "Utils/XAMessages";
import { policyInfo } from "Utils/XAUtils";
-import { BlockUi } from "../../components/CommonComponents";
-import { getServiceDef } from "../../utils/appState";
+import { getServiceDef } from "Utils/appState";
import { FieldArray } from "react-final-form-arrays";
const noneOptions = {
@@ -1384,6 +1388,7 @@ export default function AddUpdatePolicyForm() {
onFocusPolicyLabel();
}}
defaultOptions={defaultPolicyLabelOptions}
+ styles={selectInputCustomStyles}
/>
</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 80b341d61..7c8aba953 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
@@ -23,8 +23,9 @@ import { Form, Field } from "react-final-form";
import Select from "react-select";
import CreatableSelect from "react-select/creatable";
import { find, isEmpty } from "lodash";
-import { InfoIcon } from "../../utils/XAUtils";
-import { RegexMessage } from "../../utils/XAMessages";
+import { InfoIcon } from "Utils/XAUtils";
+import { RegexMessage } from "Utils/XAMessages";
+import { selectInputCustomStyles } from "Components/CommonComponents";
const esprima = require("esprima");
export default function PolicyConditionsComp(props) {
@@ -98,7 +99,7 @@ export default function PolicyConditionsComp(props) {
let errors = "";
if (values) {
try {
- let t = esprima.parseScript(values);
+ esprima.parseScript(values);
} catch (e) {
errors = e.message;
}
@@ -221,10 +222,11 @@ export default function PolicyConditionsComp(props) {
{...input}
isMulti
isClearable
- placeholder="enter expression"
+ placeholder=""
width="500px"
value={ipRangeVal(input.value)}
onChange={(e) => handleChange(e, input)}
+ styles={selectInputCustomStyles}
/>
)}
/>
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 896c34cb0..4496f7541 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
@@ -43,7 +43,8 @@ import {
drop,
dragOver,
policyConditionUpdatedJSON
-} from "../../utils/XAUtils";
+} from "Utils/XAUtils";
+import { selectInputCustomStyles } from "Components/CommonComponents";
const noneOptions = {
label: "None",
@@ -285,6 +286,7 @@ export default function PolicyPermissionItem(props) {
};
const customStyles = {
+ ...selectInputCustomStyles,
control: (base) => ({
...base,
width: 200,
diff --git
a/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/PolicyValidityPeriodComp.jsx
b/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/PolicyValidityPeriodComp.jsx
index 8eb788a05..983308510 100644
---
a/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/PolicyValidityPeriodComp.jsx
+++
b/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/PolicyValidityPeriodComp.jsx
@@ -26,7 +26,10 @@ import Datetime from "react-datetime";
import { getAllTimeZoneList } from "Utils/XAUtils";
import { isEmpty } from "lodash";
import moment from "moment-timezone";
-import { CustomTooltip } from "../../components/CommonComponents";
+import {
+ CustomTooltip,
+ selectInputCustomStyles
+} from "Components/CommonComponents";
export default function PolicyValidityPeriodComp(props) {
const { addPolicyItem } = props;
@@ -46,7 +49,7 @@ export default function PolicyValidityPeriodComp(props) {
}
};
- const RenderInput = (props, openCalendar, closeCalendar) => {
+ const RenderInput = (props) => {
function clear() {
props.dateProps.onChange({ target: { value: "" } });
}
@@ -125,7 +128,7 @@ export default function PolicyValidityPeriodComp(props) {
</thead>
<tbody>
<FieldArray name="validitySchedules">
- {({ fields, ...arg }) =>
+ {({ fields }) =>
fields.map((name, index) => (
<tr key={name}>
<td className="text-center">
@@ -143,7 +146,7 @@ export default function PolicyValidityPeriodComp(props) {
dateFormat="MM-DD-YYYY"
timeFormat="HH:mm:ss"
closeOnSelect
- isValidDate={(currentDate, selectedDate) =>
+ isValidDate={(currentDate) =>
calEndDate(fields.value[index], currentDate)
}
/>
@@ -168,7 +171,7 @@ export default function PolicyValidityPeriodComp(props) {
dateFormat="MM-DD-YYYY"
timeFormat="HH:mm:ss"
closeOnSelect
- isValidDate={(currentDate, selectedDate) =>
+ isValidDate={(currentDate) =>
calStartDate(fields.value[index],
currentDate)
}
/>
@@ -197,6 +200,7 @@ export default function PolicyValidityPeriodComp(props) {
? true
: false
}
+ styles={selectInputCustomStyles}
/>
{meta.touched && meta.error && (
<span>{meta.error}</span>
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 7b9b43e80..083bba71c 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
@@ -36,7 +36,8 @@ import {
cloneDeep
} from "lodash";
import { RangerPolicyType } from "Utils/XAEnums";
-import { getServiceDef } from "../../utils/appState";
+import { getServiceDef } from "Utils/appState";
+import { selectInputCustomStyles } from "Components/CommonComponents";
export default function TagBasePermissionItem(props) {
const serviceDefs = cloneDeep(getServiceDef());
@@ -55,6 +56,14 @@ export default function TagBasePermissionItem(props) {
color: "black"
};
+ const customStyles = {
+ ...selectInputCustomStyles,
+ noOptionsMessage: (base) => ({
+ ...base,
+ ...msgStyles
+ })
+ };
+
const noOptionMsg = (inputValue) => {
if (
formValues?.policyType ==
@@ -356,12 +365,7 @@ export default function TagBasePermissionItem(props) {
noOptionsMessage={({ inputValue }) =>
noOptionMsg(inputValue)
}
- styles={{
- noOptionsMessage: (base) => ({
- ...base,
- ...msgStyles
- })
- }}
+ styles={customStyles}
components={{
DropdownIndicator: () => null,
IndicatorSeparator: () => null
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 72f516f77..29a739184 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
@@ -47,12 +47,12 @@ import {
} from "lodash";
import { toast } from "react-toastify";
import { fetchApi } from "Utils/fetchAPI";
-import { useQuery } from "../../components/CommonComponents";
+import { useQuery, selectInputCustomStyles } from
"Components/CommonComponents";
import SearchPolicyTable from "./SearchPolicyTable";
-import { isAuditor, isKeyAdmin, isKMSAuditor } from "../../utils/XAUtils";
-import CustomBreadcrumb from "../CustomBreadcrumb";
+import { isAuditor, isKeyAdmin, isKMSAuditor } from "Utils/XAUtils";
+import CustomBreadcrumb from "Views/CustomBreadcrumb";
import moment from "moment-timezone";
-import { getServiceDef } from "../../utils/appState";
+import { getServiceDef } from "Utils/appState";
function UserAccessLayout() {
const isKMSRole = isKeyAdmin() || isKMSAuditor();
@@ -557,8 +557,9 @@ function UserAccessLayout() {
isMulti
isClearable={false}
options={serviceDefOpts}
- placeholder="Select Component Type"
menuPlacement="auto"
+ placeholder="Select Component Type"
+ styles={selectInputCustomStyles}
/>
)}
</Field>
@@ -596,6 +597,7 @@ function UserAccessLayout() {
isClearable={true}
loadOptions={fetchPolicyLabels}
placeholder="Select Policy Label"
+ styles={selectInputCustomStyles}
/>
)}
</Field>
@@ -616,6 +618,7 @@ function UserAccessLayout() {
options={zoneNameOpts}
menuPlacement="auto"
placeholder="Select Zone Name"
+ styles={selectInputCustomStyles}
/>
)}
</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 fb17d3bd5..661e8237d 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
@@ -26,7 +26,8 @@ import { filter, groupBy, some } from "lodash";
import { toast } from "react-toastify";
import { udfResourceWarning } from "../../utils/XAMessages";
import ResourceSelectComp from "./ResourceSelectComp";
-import { getResourcesDefVal } from "../../utils/XAUtils";
+import { getResourcesDefVal } from "Utils/XAUtils";
+import { selectInputCustomStyles } from "Components/CommonComponents";
const noneOptions = {
label: "None",
@@ -207,6 +208,7 @@ export default function ResourceComp(props) {
handleResourceChange(value, input, index)
}
isSearchable={false}
+ styles={selectInputCustomStyles}
/>
</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 f43f447c2..128796f55 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
@@ -23,6 +23,7 @@ import CreatableSelect from "react-select/creatable";
import { debounce, isArray } from "lodash";
import { toast } from "react-toastify";
import { fetchApi } from "Utils/fetchAPI";
+import { selectInputCustomStyles } from "Components/CommonComponents";
const noneOptions = {
label: "None",
@@ -36,8 +37,7 @@ export default function ResourceSelectComp(props) {
levelKey,
serviceDetails,
name,
- isMultiResources,
- changePolicyItemPermissions
+ isMultiResources
} = props;
const [options, setOptions] = useState([]);
const [isLoading, setIsLoading] = useState(false);
@@ -215,6 +215,7 @@ export default function ResourceSelectComp(props) {
}}
filterOption={customFilterOptions}
isLoading={isLoading}
+ styles={selectInputCustomStyles}
/>
{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 41c0f56f0..854ef671f 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
@@ -38,18 +38,19 @@ import {
import { Table } from "react-bootstrap";
import { FieldArray } from "react-final-form-arrays";
import arrayMutators from "final-form-arrays";
-import ModalResourceComp from "../Resources/ModalResourceComp";
+import ModalResourceComp from "Views/Resources/ModalResourceComp";
import { RegexValidation } from "Utils/XAEnums";
import { toast } from "react-toastify";
-import { commonBreadcrumb, serverError } from "../../utils/XAUtils";
+import { commonBreadcrumb, serverError } from "Utils/XAUtils";
import {
BlockUi,
Loader,
scrollToError,
- selectCustomStyles
-} from "../../components/CommonComponents";
+ selectInputCustomStyles,
+ selectInputCustomErrorStyles
+} from "Components/CommonComponents";
import usePrompt from "Hooks/usePrompt";
-import { getServiceDef } from "../../utils/appState";
+import { getServiceDef } from "Utils/appState";
const noneOptions = {
label: "None",
@@ -847,8 +848,8 @@ const SecurityZoneForm = () => {
{...input}
styles={
meta.error && meta.touched
- ? selectCustomStyles
- : ""
+ ? selectInputCustomErrorStyles
+ : selectInputCustomStyles
}
id={
meta.error && meta.touched
@@ -888,17 +889,17 @@ const SecurityZoneForm = () => {
</Col>
<Col xs={4}>
<AsyncSelect
+ {...input}
styles={
meta.error && meta.touched
- ? selectCustomStyles
- : ""
+ ? selectInputCustomErrorStyles
+ : selectInputCustomStyles
}
id={
meta.error && meta.touched
? "isError"
: "adminUserGroups"
}
- {...input}
cacheOptions
loadOptions={fetchGroupsData}
onFocus={() => {
@@ -935,8 +936,8 @@ const SecurityZoneForm = () => {
{...input}
styles={
meta.error && meta.touched
- ? selectCustomStyles
- : ""
+ ? selectInputCustomErrorStyles
+ : selectInputCustomStyles
}
id={
meta.error && meta.touched
@@ -984,8 +985,8 @@ const SecurityZoneForm = () => {
{...input}
styles={
meta.error && meta.touched
- ? selectCustomStyles
- : ""
+ ? selectInputCustomErrorStyles
+ : selectInputCustomStyles
}
id={
meta.error && meta.touched
@@ -1028,8 +1029,8 @@ const SecurityZoneForm = () => {
{...input}
styles={
meta.error && meta.touched
- ? selectCustomStyles
- : ""
+ ? selectInputCustomErrorStyles
+ : selectInputCustomStyles
}
id={
meta.error && meta.touched
@@ -1072,8 +1073,8 @@ const SecurityZoneForm = () => {
{...input}
styles={
meta.error && meta.touched
- ? selectCustomStyles
- : ""
+ ? selectInputCustomErrorStyles
+ : selectInputCustomStyles
}
id={
meta.error && meta.touched
@@ -1136,6 +1137,7 @@ const SecurityZoneForm = () => {
}}
isClearable={true}
placeholder="Select Tag Services"
+ styles={selectInputCustomStyles}
/>
</Col>
</Row>
@@ -1172,6 +1174,7 @@ const SecurityZoneForm = () => {
isClearable={false}
isSearchable={true}
placeholder="Select Service Name"
+ styles={selectInputCustomStyles}
/>
</Col>
</Row>
diff --git
a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ExportPolicy.jsx
b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ExportPolicy.jsx
index d835bfad1..5685801bc 100644
---
a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ExportPolicy.jsx
+++
b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ExportPolicy.jsx
@@ -23,7 +23,8 @@ import Select from "react-select";
import { map, toString, isEmpty } from "lodash";
import { fetchApi } from "Utils/fetchAPI";
import { toast } from "react-toastify";
-import { getBaseUrl, serverError } from "../../utils/XAUtils";
+import { getBaseUrl, serverError } from "Utils/XAUtils";
+import { selectInputCustomStyles } from "Components/CommonComponents";
class ExportPolicy extends Component {
constructor(props) {
@@ -85,10 +86,6 @@ class ExportPolicy extends Component {
};
handleServiceChange = (value) => {
- let difference = this.state.selectedServices.filter(
- (service) => !value.includes(service)
- );
-
this.setState({ selectedServices: value });
};
@@ -185,6 +182,7 @@ class ExportPolicy extends Component {
defaultValue={this.serviceDefOptions}
menuPlacement="auto"
placeholder="Select Service Type"
+ styles={selectInputCustomStyles}
/>
</div>
)}
@@ -205,6 +203,7 @@ class ExportPolicy extends Component {
value={selectedServices}
menuPlacement="auto"
placeholder="Select Service Name"
+ styles={selectInputCustomStyles}
/>
</div>
</Modal.Body>
diff --git
a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ImportPolicy.jsx
b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ImportPolicy.jsx
index 75ae1bdab..d5a3335e1 100644
---
a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ImportPolicy.jsx
+++
b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ImportPolicy.jsx
@@ -35,7 +35,8 @@ import {
uniq
} from "lodash";
import { fetchApi } from "Utils/fetchAPI";
-import { serverError } from "../../utils/XAUtils";
+import { serverError } from "Utils/XAUtils";
+import { selectInputCustomStyles } from "Components/CommonComponents";
class ImportPolicy extends Component {
constructor(props) {
@@ -286,6 +287,7 @@ class ImportPolicy extends Component {
label: service.name
}));
};
+
Theme = (theme) => {
return {
...theme,
@@ -295,7 +297,9 @@ class ImportPolicy extends Component {
}
};
};
+
CustomStyles = {
+ ...selectInputCustomStyles,
option: (provided, state) => ({
...provided,
color: state.isSelected ? "white" : "black"
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 513a2c5c5..ee57fff2e 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
@@ -25,10 +25,11 @@ import Select from "react-select";
import AsyncSelect from "react-select/async";
import Editable from "Components/Editable";
import CreatableField from "Components/CreatableField";
-import ModalResourceComp from "../Resources/ModalResourceComp";
+import ModalResourceComp from "Views/Resources/ModalResourceComp";
import { uniq, map, join, isEmpty, isArray } from "lodash";
-import TagBasePermissionItem from "../PolicyListing/TagBasePermissionItem";
-import { dragStart, dragEnter, drop, dragOver } from "../../utils/XAUtils";
+import TagBasePermissionItem from "Views/PolicyListing/TagBasePermissionItem";
+import { dragStart, dragEnter, drop, dragOver } from "Utils/XAUtils";
+import { selectInputCustomStyles } from "Components/CommonComponents";
export default function ServiceAuditFilter(props) {
const {
@@ -265,7 +266,7 @@ export default function ServiceAuditFilter(props) {
name={`${name}.accessResult`}
>
{({ input }) => (
- <div style={{ minWidth: "195px" }}>
+ <div style={{ minWidth: "220px" }}>
<Select
{...input}
menuPortalTarget={document.body}
@@ -426,6 +427,7 @@ export default function ServiceAuditFilter(props) {
menuPlacement="auto"
cacheOptions
isMulti
+ styles={selectInputCustomStyles}
/>
</div>
)}
@@ -458,12 +460,13 @@ export default function ServiceAuditFilter(props) {
}}
defaultOptions={defaultGroupOptions}
isClearable={false}
- menuPlacement="auto"
noOptionsMessage={() =>
groupLoading ? "Loading..." : "No options"
}
+ menuPlacement="auto"
cacheOptions
isMulti
+ styles={selectInputCustomStyles}
/>
</div>
)}
@@ -486,7 +489,6 @@ export default function ServiceAuditFilter(props) {
>
<AsyncSelect
{...input}
- key={input.name}
menuPortalTarget={document.body}
components={{
IndicatorSeparator: () => null
@@ -497,12 +499,13 @@ export default function ServiceAuditFilter(props) {
}}
defaultOptions={defaultUserOptions}
isClearable={false}
- menuPlacement="auto"
- cacheOptions
noOptionsMessage={() =>
userLoading ? "Loading..." : "No options"
}
+ menuPlacement="auto"
+ cacheOptions
isMulti
+ styles={selectInputCustomStyles}
/>
</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 402193a73..44580c32a 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
@@ -34,14 +34,15 @@ import {
navigateTo,
serverError,
updateTagActive
-} from "../../utils/XAUtils";
+} from "Utils/XAUtils";
import {
BlockUi,
Condition,
CustomPopover,
Loader,
- scrollToError
-} from "../../components/CommonComponents";
+ scrollToError,
+ selectInputCustomStyles
+} from "Components/CommonComponents";
import {
difference,
flatMap,
@@ -57,12 +58,11 @@ import {
split,
without,
maxBy,
- isArray,
cloneDeep
} from "lodash";
import withRouter from "Hooks/withRouter";
-import { RangerPolicyType } from "../../utils/XAEnums";
-import { getServiceDef } from "../../utils/appState";
+import { RangerPolicyType } from "Utils/XAEnums";
+import { getServiceDef } from "Utils/appState";
class ServiceForm extends Component {
constructor(props) {
@@ -1178,6 +1178,7 @@ class ServiceForm extends Component {
isLoading={this.state.loadingOptions}
isClearable={true}
cacheOptions
+ styles={selectInputCustomStyles}
/>
</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 eb706e797..a58fb9c01 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
@@ -20,19 +20,23 @@
import React, { useEffect, useReducer } from "react";
import { Button, Form as BForm, Col, Row, Table } from "react-bootstrap";
import { Form, Field } from "react-final-form";
-import { scrollToError } from "Components/CommonComponents";
+import {
+ scrollToError,
+ BlockUi,
+ Loader,
+ CustomTooltip,
+ selectInputCustomStyles
+} from "Components/CommonComponents";
import { FieldArray } from "react-final-form-arrays";
import arrayMutators from "final-form-arrays";
import AsyncSelect from "react-select/async";
import { toast } from "react-toastify";
import { findIndex, isEmpty, filter } from "lodash";
-import { commonBreadcrumb, serverError } from "../../../utils/XAUtils";
-import { Loader, CustomTooltip } from "Components/CommonComponents";
+import { commonBreadcrumb, serverError } from "Utils/XAUtils";
import { useLocation, useParams, useNavigate } from "react-router-dom";
import { fetchApi } from "Utils/fetchAPI";
import usePrompt from "Hooks/usePrompt";
-import { RegexValidation } from "../../../utils/XAEnums";
-import { BlockUi } from "../../../components/CommonComponents";
+import { RegexValidation } from "Utils/XAEnums";
const initialState = {
loader: true,
@@ -617,6 +621,7 @@ function RoleForm() {
isMulti
data-name="usersSelect"
data-cy="usersSelect"
+ styles={selectInputCustomStyles}
/>
</div>
<div className="col-sm-3">
@@ -723,6 +728,7 @@ function RoleForm() {
isMulti
data-name="groupsSelect"
data-cy="groupsSelect"
+ styles={selectInputCustomStyles}
/>
</div>
<div className="col-sm-3">
@@ -829,6 +835,7 @@ function RoleForm() {
isMulti
data-name="rolesSelect"
data-cy="rolesSelect"
+ styles={selectInputCustomStyles}
/>
</div>
<div className="col-sm-3">
diff --git
a/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/users_details/UserFormComp.jsx
b/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/users_details/UserFormComp.jsx
index 9f5d642f2..0a7606556 100644
---
a/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/users_details/UserFormComp.jsx
+++
b/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/users_details/UserFormComp.jsx
@@ -20,7 +20,11 @@
import React, { useReducer, useState } from "react";
import { Button, Row, Col } from "react-bootstrap";
import { Form, Field } from "react-final-form";
-import { scrollToError } from "Components/CommonComponents";
+import {
+ BlockUi,
+ scrollToError,
+ selectInputCustomStyles
+} from "Components/CommonComponents";
import AsyncSelect from "react-select/async";
import Select from "react-select";
import { fetchApi } from "Utils/fetchAPI";
@@ -31,13 +35,11 @@ import {
UserTypes
} from "Utils/XAEnums";
import { toast } from "react-toastify";
-import { getUserAccessRoleList, serverError } from "Utils/XAUtils";
+import { InfoIcon, getUserAccessRoleList, serverError } from "Utils/XAUtils";
import { getUserProfile, setUserProfile } from "Utils/appState";
import { cloneDeep, has, isEmpty, isUndefined } from "lodash";
-import { SyncSourceDetails } from "../SyncSourceDetails";
-import { BlockUi } from "../../../components/CommonComponents";
-import { InfoIcon } from "../../../utils/XAUtils";
-import { RegexMessage, roleChngWarning } from "../../../utils/XAMessages";
+import { SyncSourceDetails } from
"Views/UserGroupRoleListing/SyncSourceDetails";
+import { RegexMessage, roleChngWarning } from "Utils/XAMessages";
import { useLocation, useNavigate } from "react-router-dom";
import usePrompt from "Hooks/usePrompt";
@@ -220,6 +222,7 @@ function UserFormComp(props) {
isDisabled={
isEditView && userInfo && isExternalOrFederatedUser ? true : false
}
+ styles={selectInputCustomStyles}
/>
);
};
