From e1ca6f641bcd4889e31087c3dafe626257fb9b16 Mon Sep 17 00:00:00 2001
From: Dhaval Rajpara <dhavalrajpara1304@gmail.com>
Date: Mon, 9 Mar 2026 16:14:23 +0530
Subject: [PATCH 1/4] =?UTF-8?q?RANGER-5444=20:=20Policy=20Form=20Improveme?=
 =?UTF-8?q?nts=20=E2=80=93=20Label=20Corrections=20&=20Layout=20Updates?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../react-webapp/src/components/Editable.jsx  | 11 ++---
 .../webapp/react-webapp/src/styles/style.css  | 20 +++++++++
 .../react-webapp/src/utils/XAMessages.js      |  4 +-
 .../Admin/AdminLogs/PolicyViewDetails.jsx     | 18 ++++----
 .../GovernedData/Dataset/AccessGrantForm.jsx  |  1 +
 .../PolicyListing/AddUpdatePolicyForm.jsx     | 18 ++++----
 .../PolicyListing/PolicyPermissionItem.jsx    | 42 ++++++++++++-------
 .../src/views/Reports/SearchPolicyTable.jsx   | 26 +++++-------
 .../ServiceManager/ServiceAuditFilter.jsx     |  1 +
 9 files changed, 88 insertions(+), 53 deletions(-)

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 c5754ac958..1da09a165e 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
@@ -387,7 +387,8 @@ const Editable = (props) => {
     options = [],
     conditionDefVal,
     servicedefName,
-    isGDS
+    isGDS,
+    popOverheader
   } = props;
 
   const initialLoad = useRef(true);
@@ -451,7 +452,9 @@ const Editable = (props) => {
             <div
               key={property}
               className={`${
-                uiHintVal?.isMultiline ? "editable-label" : "badge bg-dark"
+                uiHintVal?.isMultiline
+                  ? "editable-label rule-condition-wrapper"
+                  : "badge bg-dark"
               }`}
             >
               {`${conditionObj.label}: ${
@@ -729,9 +732,7 @@ const Editable = (props) => {
         type === TYPE_CHECKBOX && "popover-maxHeight popover-minHeight"
       }`}
     >
-      <Popover.Header>
-        {type === TYPE_CHECKBOX ? "Select" : "Enter"}
-      </Popover.Header>
+      <Popover.Header>{popOverheader}</Popover.Header>
       <Popover.Body>
         {type === TYPE_CHECKBOX ? (
           <CheckboxComp
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 ea5f33e072..32fe8abe2d 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
@@ -579,6 +579,11 @@ h3.wrap-header {
   padding: 3px;
 }
 
+.rule-condition-wrapper {
+  white-space: normal;
+  word-break: break-all;
+}
+
 /* Service Manager */
 .select-zone-name {
   cursor: not-allowed;
@@ -676,6 +681,16 @@ table.no-bg-color thead tr th:first-child {
   padding: 8px;
 }
 
+.table-fixed table {
+  width: 100%;
+  table-layout: fixed;
+}
+
+.table-fixed .table thead th {
+  font-size: 13px;
+  padding: 8px;
+}
+
 .bt-1 {
   border-top: 1px solid #ddd;
 }
@@ -1654,6 +1669,11 @@ header {
   overflow-y: auto;
 }
 
+.permission-item {
+  max-height: 256px;
+  overflow-y: auto;
+}
+
 /* Form control */
 .form-control:disabled {
   cursor: not-allowed;
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 75b0647580..a9cf53944d 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
@@ -51,9 +51,9 @@ export const RegexMessage = {
       </>
     ),
     policyConditionInfoIcon:
-      "1. JavaScript Condition Examples :\
+      "1. Boolean expression Examples :\
                       country_code == 'USA', time_range >= 900 time_range <= 1800 etc.\
-                      2. Dragging bottom-right corner of javascript condition editor(Textarea) can resizable",
+                      2. Dragging bottom-right corner of condition editor(Textarea) can resizable",
     firstNameValidationMsg: (
       <>
         <p className="pd-10 mb-0" style={{ fontSize: "small" }}>
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/Admin/AdminLogs/PolicyViewDetails.jsx b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/Admin/AdminLogs/PolicyViewDetails.jsx
index 2c96e1559b..6e13cd94e1 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/Admin/AdminLogs/PolicyViewDetails.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/Admin/AdminLogs/PolicyViewDetails.jsx
@@ -377,7 +377,7 @@ export function PolicyViewDetails(props) {
             <th className="text-center text-nowrap">Select User</th>
             {!isEmpty(
               filterServiceDef && filterServiceDef.policyConditions
-            ) && <th className="text-center text-nowrap">Policy Conditions</th>}
+            ) && <th className="text-center text-nowrap">Rule Conditions</th>}
             <th className="text-center text-nowrap">
               {policyType == RangerPolicyType.RANGER_ACCESS_POLICY_TYPE.value
                 ? "Permissions"
@@ -682,14 +682,14 @@ export function PolicyViewDetails(props) {
       {getPolicyConditions(conditions, serviceDef)}
       {policyType == RangerPolicyType.RANGER_ACCESS_POLICY_TYPE.value && (
         <>
-          <p className="form-header">Allow Conditions :</p>
+          <p className="form-header">Allow Rules :</p>
           <div className="overflow-auto">
             <Table bordered size="sm" className="table-audit-filter-ready-only">
               {getFilterPolicy(
                 policyItems,
                 serviceDef,
                 serviceType,
-                ` No policy items of "Allow Conditions" are present`
+                ` No policy items of "Allow Rules" are present`
               )}
             </Table>
           </div>
@@ -700,7 +700,7 @@ export function PolicyViewDetails(props) {
       {policyType == RangerPolicyType.RANGER_ACCESS_POLICY_TYPE.value &&
         serviceDef?.options?.enableDenyAndExceptionsInPolicies == "true" && (
           <>
-            <p className="form-header">Exclude from Allow Conditions :</p>
+            <p className="form-header">Exclude from Allow Rules :</p>
             <div className="overflow-auto">
               <Table
                 bordered
@@ -711,7 +711,7 @@ export function PolicyViewDetails(props) {
                   allowExceptions,
                   serviceDef,
                   serviceType,
-                  `No policy items of "Exclude from Allow Conditions" are present`
+                  `No policy items of "Exclude from Allow Rules" are present`
                 )}
               </Table>
             </div>
@@ -742,7 +742,7 @@ export function PolicyViewDetails(props) {
         policyType == RangerPolicyType.RANGER_ACCESS_POLICY_TYPE.value &&
         serviceDef?.options?.enableDenyAndExceptionsInPolicies == "true" && (
           <>
-            <p className="form-header">Deny Conditions :</p>
+            <p className="form-header">Deny Rules :</p>
             <div className="overflow-auto">
               <Table
                 bordered
@@ -753,7 +753,7 @@ export function PolicyViewDetails(props) {
                   denyPolicyItems,
                   serviceDef,
                   serviceType,
-                  ` No policy items of "Deny Conditions" are present`
+                  ` No policy items of "Deny Rules" are present`
                 )}
               </Table>
             </div>
@@ -764,7 +764,7 @@ export function PolicyViewDetails(props) {
         policyType == RangerPolicyType.RANGER_ACCESS_POLICY_TYPE.value &&
         serviceDef?.options?.enableDenyAndExceptionsInPolicies == "true" && (
           <>
-            <p className="form-header">Exclude from Deny Conditions :</p>
+            <p className="form-header">Exclude from Deny Rules :</p>
             <div className="overflow-auto">
               <Table
                 bordered
@@ -775,7 +775,7 @@ export function PolicyViewDetails(props) {
                   denyExceptions,
                   serviceDef,
                   serviceType,
-                  `No policy items of "Exclude from Deny Conditions" are present`
+                  `No policy items of "Exclude from Deny Rules" are present`
                 )}
               </Table>
             </div>
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/AccessGrantForm.jsx b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/AccessGrantForm.jsx
index 2d20250ee4..36c804331b 100755
--- a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/AccessGrantForm.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/AccessGrantForm.jsx
@@ -608,6 +608,7 @@ function AccessGrantForm({
                                                       isMulti: true
                                                     }}
                                                     isGDS={true}
+                                                    popOverheader="Policy Conditions"
                                                   />
                                                 </div>
                                               )}
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 98d7d31507..f4820ee0e1 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
@@ -1589,7 +1589,11 @@ export default function AddUpdatePolicyForm() {
                     {isMultiResources && (
                       <>
                         <fieldset>
-                          <p className="formHeader">Resources :</p>
+                          <p className="formHeader">
+                            {serviceCompDetails.name == "tag"
+                              ? "Tags :"
+                              : "Resources :"}
+                          </p>
                         </fieldset>
                         <>
                           <FieldArray name="additionalResources">
@@ -1656,7 +1660,7 @@ export default function AddUpdatePolicyForm() {
                           <Accordion defaultActiveKey="0">
                             <>
                               <p className="formHeader">
-                                Allow Conditions:{" "}
+                                Allow Rules:{" "}
                                 <CustomToggle eventKey="0"></CustomToggle>
                               </p>
                               <Accordion.Collapse eventKey="0">
@@ -1684,7 +1688,7 @@ export default function AddUpdatePolicyForm() {
                                       <fieldset>
                                         <p className="wrap-header search-header">
                                           <i className="fa-fw fa fa-exclamation-triangle fa-fw fa fa-1 text-color-red"></i>
-                                          Exclude from Allow Conditions:
+                                          Exclude from Allow Rules:
                                         </p>
                                       </fieldset>
                                       <div className="wrap">
@@ -1750,7 +1754,7 @@ export default function AddUpdatePolicyForm() {
                                 <Accordion defaultActiveKey="0">
                                   <>
                                     <p className="formHeader">
-                                      Deny Conditions:
+                                      Deny Rules:
                                       <CustomToggle eventKey="0"></CustomToggle>
                                     </p>
                                     <Accordion.Collapse eventKey="0">
@@ -1776,7 +1780,7 @@ export default function AddUpdatePolicyForm() {
                                         <fieldset>
                                           <p className="wrap-header search-header">
                                             <i className="fa-fw fa fa-exclamation-triangle fa-fw fa fa-1 text-color-red"></i>
-                                            Exclude from Deny Conditions:
+                                            Exclude from Deny Rules:
                                           </p>
                                         </fieldset>
                                         <div className="wrap">
@@ -1811,7 +1815,7 @@ export default function AddUpdatePolicyForm() {
                         <Accordion defaultActiveKey="0">
                           <>
                             <p className="formHeader">
-                              Mask Conditions:
+                              Mask Rules:
                               <CustomToggle eventKey="0"></CustomToggle>
                             </p>
                             <Accordion.Collapse eventKey="0">
@@ -1843,7 +1847,7 @@ export default function AddUpdatePolicyForm() {
                           <Accordion defaultActiveKey="0">
                             <>
                               <p className="wrap-header search-header">
-                                Row Filter Conditions:
+                                Row Filter Rules:
                                 <CustomToggle eventKey="0"></CustomToggle>
                               </p>
                               <Accordion.Collapse eventKey="0">
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 69325c2dd3..7f6133789a 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
@@ -76,7 +76,7 @@ export default function PolicyPermissionItem(props) {
   const permList = ["Select Roles", "Select Groups", "Select Users"];
 
   if (serviceCompDetails?.policyConditions?.length > 0) {
-    permList.push("Policy Conditions");
+    permList.push("Rule Conditions");
   }
   permList.push("Permissions");
   if (
@@ -100,7 +100,14 @@ export default function PolicyPermissionItem(props) {
 
   const tableHeader = () => {
     return permList.map((data) => {
-      return <th key={data}>{data}</th>;
+      return (
+        <th
+          key={data}
+          style={data === "Delegate Admin" ? { width: "100px" } : {}}
+        >
+          {data}
+        </th>
+      );
     });
   };
 
@@ -244,10 +251,10 @@ export default function PolicyPermissionItem(props) {
       if ((users || grps || roles) && !accTypes) {
         if (delegateAdmin !== undefined && delegateAdmin === false) {
           error =
-            "Please select permision item for selected users/groups/roles";
+            "Please select permission item for selected users/groups/roles";
         } else if (delegateAdmin == undefined) {
           error =
-            "Please select permision item for selected users/groups/roles";
+            "Please select permission item for selected users/groups/roles";
         }
       }
       if (accTypes && !users && !grps && !roles) {
@@ -278,7 +285,7 @@ export default function PolicyPermissionItem(props) {
           !roles
         ) {
           error =
-            "Please select user/group/role for the entered policy condition";
+            "Please select user/group/role for the entered Rule Condition";
         }
       }
       return error;
@@ -289,7 +296,6 @@ export default function PolicyPermissionItem(props) {
     ...selectInputCustomStyles,
     control: (base) => ({
       ...base,
-      width: 200,
       whiteSpace: "nowrap"
     })
   };
@@ -321,7 +327,7 @@ export default function PolicyPermissionItem(props) {
   return (
     <div>
       <Col sm="12">
-        <div className="table-responsive">
+        <div className="table-fixed">
           <Table
             bordered
             className="policy-permission-table"
@@ -330,7 +336,7 @@ export default function PolicyPermissionItem(props) {
             <thead className="thead-light">
               <tr>
                 {tableHeader()}
-                <th></th>
+                <th width="64px"></th>
               </tr>
             </thead>
             <tbody className="drag-drop-wrap">
@@ -354,7 +360,7 @@ export default function PolicyPermissionItem(props) {
                                 className="form-control"
                                 name={`${name}.roles`}
                                 render={({ input }) => (
-                                  <div className="d-flex">
+                                  <div className="permission-item">
                                     <AsyncSelect
                                       {...input}
                                       menuPortalTarget={document.body}
@@ -387,7 +393,7 @@ export default function PolicyPermissionItem(props) {
                                 className="form-control"
                                 name={`${name}.groups`}
                                 render={({ input }) => (
-                                  <div>
+                                  <div className="permission-item">
                                     <AsyncSelect
                                       {...input}
                                       menuPortalTarget={document.body}
@@ -420,7 +426,7 @@ export default function PolicyPermissionItem(props) {
                                 className="form-control"
                                 name={`${name}.users`}
                                 render={({ input }) => (
-                                  <div>
+                                  <div className="permission-item">
                                     <AsyncSelect
                                       {...input}
                                       menuPortalTarget={document.body}
@@ -446,7 +452,7 @@ export default function PolicyPermissionItem(props) {
                             </td>
                           );
                         }
-                        if (colName == "Policy Conditions") {
+                        if (colName == "Rule Conditions") {
                           return (
                             serviceCompDetails?.policyConditions?.length >
                               0 && (
@@ -461,15 +467,16 @@ export default function PolicyPermissionItem(props) {
                                     )
                                   }
                                   render={({ input }) => (
-                                    <div className="table-editable">
+                                    <div className="table-editable permission-item">
                                       <Editable
                                         {...input}
-                                        placement="auto"
+                                        // placement="auto"
                                         type="custom"
                                         conditionDefVal={policyConditionUpdatedJSON(
                                           serviceCompDetails.policyConditions
                                         )}
                                         selectProps={{ isMulti: true }}
+                                        popOverheader="Rule Conditions"
                                       />
                                     </div>
                                   )}
@@ -548,6 +555,7 @@ export default function PolicyPermissionItem(props) {
                                           options={accessTypeOptions}
                                           showSelectAll={true}
                                           selectAllLabel="Select All"
+                                          popOverheader="Add/Edit Permissions"
                                         />
                                       </div>
                                     );
@@ -583,6 +591,7 @@ export default function PolicyPermissionItem(props) {
                                             fields?.value[index]?.accesses
                                               ?.tableList
                                           }
+                                          popOverheader="Select Masking Option"
                                         />
                                         {fields?.value[index]?.dataMaskInfo
                                           ?.label == "Custom" && (
@@ -650,6 +659,7 @@ export default function PolicyPermissionItem(props) {
                                         options={getMaskingAccessTypeOptions()}
                                         showSelectAll={false}
                                         selectAllLabel="Select All"
+                                        popOverheader="Select Masking Option"
                                       />
                                       {fields?.value[index]?.dataMaskInfo
                                         ?.label == "Custom" && (
@@ -694,6 +704,7 @@ export default function PolicyPermissionItem(props) {
                                       {...input}
                                       placement="auto"
                                       type="input"
+                                      popOverheader="Enter Filter Expression"
                                     />
                                     {meta.touched && meta.error && (
                                       <span>{meta.error}</span>
@@ -712,6 +723,7 @@ export default function PolicyPermissionItem(props) {
                             <td
                               key={`${name}-${index}`}
                               className="text-center align-middle"
+                              width="64px"
                             >
                               <div key={`${name}-${index}`}>
                                 <Field
@@ -739,7 +751,7 @@ export default function PolicyPermissionItem(props) {
                         }
                         return <td key={colName}>{colName}</td>;
                       })}
-                      <td className="align-middle">
+                      <td className="align-middle" width="64px">
                         <Button
                           variant="danger"
                           size="sm"
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/Reports/SearchPolicyTable.jsx b/security-admin/src/main/webapp/react-webapp/src/views/Reports/SearchPolicyTable.jsx
index a09d516dcb..c1728f04d9 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/Reports/SearchPolicyTable.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/Reports/SearchPolicyTable.jsx
@@ -515,7 +515,7 @@ function PolicyConditionData(props) {
     <React.Fragment>
       {props.policyData.policyType == 0 && (
         <>
-          <p className="form-header">Allow Conditions</p>
+          <p className="form-header">Allow Rules</p>
           <div className="overflow-x-auto">
             <Table
               bordered
@@ -528,9 +528,7 @@ function PolicyConditionData(props) {
                   <th>Groups</th>
                   <th>Users</th>
                   {!isEmpty(props?.serviceDef?.policyConditions) && (
-                    <th className="text-center text-nowrap">
-                      Policy Conditions
-                    </th>
+                    <th className="text-center text-nowrap">Rule Conditions</th>
                   )}
                   <th>Accesses</th>
                 </tr>
@@ -541,7 +539,7 @@ function PolicyConditionData(props) {
           {props.serviceDef?.options?.enableDenyAndExceptionsInPolicies ==
             "true" && (
             <>
-              <p className="form-header">Allow Exclude</p>
+              <p className="form-header">Allow Exclude Rules</p>
               <div className="overflow-x-auto">
                 <Table
                   bordered
@@ -555,7 +553,7 @@ function PolicyConditionData(props) {
                       <th>Users</th>
                       {!isEmpty(props?.serviceDef?.policyConditions) && (
                         <th className="text-center text-nowrap">
-                          Policy Conditions
+                          Rule Conditions
                         </th>
                       )}
                       <th>Accesses</th>
@@ -566,7 +564,7 @@ function PolicyConditionData(props) {
                   </tbody>
                 </Table>
               </div>
-              <p className="form-header">Deny Conditions</p>
+              <p className="form-header">Deny Rules</p>
               <div className="overflow-x-auto">
                 <Table
                   bordered
@@ -580,7 +578,7 @@ function PolicyConditionData(props) {
                       <th>Users</th>
                       {!isEmpty(props?.serviceDef?.policyConditions) && (
                         <th className="text-center text-nowrap">
-                          Policy Conditions
+                          Rule Conditions
                         </th>
                       )}
                       <th>Accesses</th>
@@ -591,7 +589,7 @@ function PolicyConditionData(props) {
                   </tbody>
                 </Table>
               </div>
-              <p className="form-header">Deny Exclude</p>
+              <p className="form-header">Deny Exclude Rules</p>
               <div className="overflow-x-auto">
                 <Table
                   bordered
@@ -605,7 +603,7 @@ function PolicyConditionData(props) {
                       <th>Users</th>
                       {!isEmpty(props?.serviceDef?.policyConditions) && (
                         <th className="text-center text-nowrap">
-                          Policy Conditions
+                          Rule Conditions
                         </th>
                       )}
                       <th>Accesses</th>
@@ -623,7 +621,7 @@ function PolicyConditionData(props) {
 
       {props.policyData.policyType == 1 && (
         <>
-          <p className="form-header ">Masking Conditions</p>
+          <p className="form-header ">Mask Rules</p>
           <div className="overflow-x-auto">
             <Table
               bordered
@@ -636,9 +634,7 @@ function PolicyConditionData(props) {
                   <th>Groups</th>
                   <th>Users</th>
                   {!isEmpty(props?.serviceDef?.policyConditions) && (
-                    <th className="text-center text-nowrap">
-                      Policy Conditions
-                    </th>
+                    <th className="text-center text-nowrap">Rule Conditions</th>
                   )}
                   <th>Accesses</th>
                   <th>Masking Condition</th>
@@ -654,7 +650,7 @@ function PolicyConditionData(props) {
 
       {props.policyData.policyType == 2 && (
         <>
-          <p className="form-header">Row Level Conditions</p>
+          <p className="form-header">Row Filter Rules</p>
           <div className="overflow-x-auto">
             <Table
               bordered
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 9468bef967..23c2e8a13c 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
@@ -388,6 +388,7 @@ export default function ServiceAuditFilter(props) {
                                     options={getAccessTypeOptions()}
                                     showSelectAll={true}
                                     selectAllLabel="Select All"
+                                    popOverheader="Add/Edit Permissions"
                                   />
                                 </div>
                               )}

From 591cc8e1edbb202855ff3e682995fa61875d2f87 Mon Sep 17 00:00:00 2001
From: Dhaval Rajpara <dhavalrajpara1304@gmail.com>
Date: Mon, 9 Mar 2026 16:28:24 +0530
Subject: [PATCH 2/4] RANGER-5446 : Ensure Policy Conditions modal size and
 appearance are consistent

---
 .../react-webapp/src/components/Editable.jsx  |   1 -
 .../webapp/react-webapp/src/utils/XAEnums.js  |   5 +
 .../webapp/react-webapp/src/utils/XAUtils.js  |  10 +-
 .../Admin/AdminLogs/PolicyViewDetails.jsx     |  22 ++--
 .../GovernedData/Dataset/AccessGrantForm.jsx  |   1 +
 .../Datashare/DatashareDetailLayout.jsx       |   1 +
 .../PolicyListing/AddUpdatePolicyForm.jsx     |   7 +-
 .../PolicyListing/PolicyConditionsComp.jsx    |  13 +-
 .../PolicyListing/PolicyPermissionItem.jsx    | 119 +++++++++++++++---
 .../src/views/Reports/SearchPolicyTable.jsx   |  13 +-
 10 files changed, 158 insertions(+), 34 deletions(-)

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 1da09a165e..09f8d24c7b 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
@@ -505,7 +505,6 @@ const Editable = (props) => {
                 variant="outline-dark"
                 size="sm"
                 type="button"
-                s
               >
                 <i className="fa-fw fa fa-plus"></i>
               </Button>
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 4e08f3a061..744f7bf822 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
@@ -986,3 +986,8 @@ export const additionalServiceConfigs = [
     type: "user"
   }
 ];
+export const policyConditionDisplayLabel = {
+  "Accessed after expiry_date (yes/no)?": "Accessed after expiry date",
+  "Enter boolean expression": "Boolean expression",
+  "IP Address Range": "IP Address Range"
+};
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 0f9f66b589..faeb514c75 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
@@ -24,7 +24,8 @@ import {
   PathAssociateWithModule,
   QueryParams,
   RangerPolicyType,
-  ServiceType
+  ServiceType,
+  policyConditionDisplayLabel
 } from "Utils/XAEnums";
 import {
   filter,
@@ -1585,3 +1586,10 @@ export const currentTimeZone = (timeZoneDate) => {
         .replace(/^.*GMT.*\(/, "")
         .replace(/\)$/, "");
 };
+
+// Common function to get display label for policy condition
+export const getPolicyConditionDisplayLbl = (lbl) => {
+  return policyConditionDisplayLabel.hasOwnProperty(lbl)
+    ? policyConditionDisplayLabel[lbl]
+    : lbl;
+};
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/Admin/AdminLogs/PolicyViewDetails.jsx b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/Admin/AdminLogs/PolicyViewDetails.jsx
index 6e13cd94e1..6feefb53cd 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/Admin/AdminLogs/PolicyViewDetails.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/Admin/AdminLogs/PolicyViewDetails.jsx
@@ -24,7 +24,11 @@ import { RangerPolicyType, DefStatus } from "Utils/XAEnums";
 import dateFormat from "dateformat";
 import { toast } from "react-toastify";
 import { cloneDeep, find, isEmpty, map, sortBy } from "lodash";
-import { getResourcesDefVal, serverError } from "Utils/XAUtils";
+import {
+  getResourcesDefVal,
+  serverError,
+  getPolicyConditionDisplayLbl
+} from "Utils/XAUtils";
 import { ModalLoader } from "Components/CommonComponents";
 import { getServiceDef } from "Utils/appState";
 
@@ -463,9 +467,9 @@ export function PolicyViewDetails(props) {
                                     bg="info"
                                     className="d-inline me-1"
                                     key={obj.values}
-                                  >{`${conditionObj.label}: ${obj.values.join(
-                                    ", "
-                                  )}`}</Badge>
+                                  >{`${getPolicyConditionDisplayLbl(
+                                    conditionObj.label
+                                  )}: ${obj.values.join(", ")}`}</Badge>
                                 </h6>
                               );
                             })
@@ -548,7 +552,9 @@ export function PolicyViewDetails(props) {
     const getConditionLabel = (label) => {
       let filterLabel = find(serviceDef.policyConditions, { name: label });
 
-      return filterLabel && filterLabel?.label ? filterLabel.label : "";
+      return filterLabel && filterLabel?.label
+        ? getPolicyConditionDisplayLbl(filterLabel.label)
+        : "";
     };
     return (
       !isEmpty(conditions) && (
@@ -783,14 +789,14 @@ export function PolicyViewDetails(props) {
         )}
       {policyType == RangerPolicyType.RANGER_ROW_FILTER_POLICY_TYPE.value && (
         <>
-          <p className="form-header">Row Level Conditions :</p>
+          <p className="form-header">Row Level Rules :</p>
           <div className="overflow-auto">
             <Table bordered size="sm" className="table-audit-filter-ready-only">
               {getFilterPolicy(
                 rowFilterPolicyItems,
                 serviceDef,
                 serviceType,
-                `No policy items of "Row Level Conditions" are present`
+                `No policy items of "Row Level Rules" are present`
               )}
             </Table>
           </div>
@@ -798,7 +804,7 @@ export function PolicyViewDetails(props) {
       )}
       {policyType == RangerPolicyType.RANGER_MASKING_POLICY_TYPE.value && (
         <>
-          <p className="form-header">Masking Conditions :</p>
+          <p className="form-header">Masking Rules :</p>
           <div className="overflow-auto">
             <Table bordered size="sm" className="table-audit-filter-ready-only">
               {getFilterPolicy(
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/AccessGrantForm.jsx b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/AccessGrantForm.jsx
index 36c804331b..6031de4747 100755
--- a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/AccessGrantForm.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/AccessGrantForm.jsx
@@ -729,6 +729,7 @@ function AccessGrantForm({
                               inputVal={input}
                               showModal={showModal}
                               handleCloseModal={policyConditionState}
+                              modalHeader="Policy Conditions"
                             />
                           )}
                         />
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/DatashareDetailLayout.jsx b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/DatashareDetailLayout.jsx
index dd0a0d6318..94a202cfb7 100755
--- a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/DatashareDetailLayout.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/DatashareDetailLayout.jsx
@@ -1393,6 +1393,7 @@ const DatashareDetailLayout = () => {
                                   inputVal={input}
                                   showModal={showModal}
                                   handleCloseModal={policyConditionState}
+                                  modalHeader="Policy Conditions"
                                 />
                               )}
                             />
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 f4820ee0e1..59113a9242 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
@@ -592,7 +592,7 @@ export default function AddUpdatePolicyForm() {
                 type: conditionKey,
                 values: isArray(conditionValue)
                   ? conditionValue.map((m) => {
-                      return m.value;
+                      return m;
                     })
                   : [conditionValue]
               });
@@ -711,9 +711,7 @@ export default function AddUpdatePolicyForm() {
           if (!isEmpty(conditionObj.uiHint)) {
             obj.conditions[data?.type] = JSON.parse(conditionObj.uiHint)
               .isMultiValue
-              ? data?.values.map((m) => {
-                  return { value: m.trim(), label: m.trim() };
-                })
+              ? data?.values
               : data?.values.toString().trim();
           }
         }
@@ -1509,6 +1507,7 @@ export default function AddUpdatePolicyForm() {
                                             handleCloseModal={
                                               policyConditionState
                                             }
+                                            modalHeader="Policy Conditions"
                                           />
                                         )}
                                       />
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 8b2240e2e0..ad925c9a3a 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
@@ -32,8 +32,13 @@ import {
 const esprima = require("esprima");
 
 export default function PolicyConditionsComp(props) {
-  const { policyConditionDetails, inputVal, showModal, handleCloseModal } =
-    props;
+  const {
+    policyConditionDetails,
+    inputVal,
+    showModal,
+    handleCloseModal,
+    modalHeader
+  } = props;
 
   const accessedOpt = [
     { value: "yes", label: "Yes" },
@@ -125,11 +130,11 @@ export default function PolicyConditionsComp(props) {
       >
         <Form
           onSubmit={handleSubmit}
-          initialValues={formInitialData}
+          initialValues={formInitialData()}
           render={({ handleSubmit }) => (
             <form onSubmit={handleSubmit}>
               <Modal.Header closeButton>
-                <Modal.Title>Policy Condition</Modal.Title>
+                <Modal.Title>{modalHeader}</Modal.Title>
               </Modal.Header>
               <Modal.Body>
                 {policyConditionDetails?.length > 0 &&
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 7f6133789a..e119f543da 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
@@ -42,9 +42,11 @@ import {
   dragEnter,
   drop,
   dragOver,
-  policyConditionUpdatedJSON
+  policyConditionUpdatedJSON,
+  getPolicyConditionDisplayLbl
 } from "Utils/XAUtils";
 import { selectInputCustomStyles } from "Components/CommonComponents";
+import PolicyConditionsComp from "./PolicyConditionsComp";
 
 const noneOptions = {
   label: "None",
@@ -72,6 +74,7 @@ export default function PolicyPermissionItem(props) {
   const [roleLoading, setRoleLoading] = useState(false);
   const [groupLoading, setGroupLoading] = useState(false);
   const [userLoading, setUserLoading] = useState(false);
+  const [activeConditionRow, setActiveConditionRow] = useState(null);
 
   const permList = ["Select Roles", "Select Groups", "Select Users"];
 
@@ -324,6 +327,44 @@ export default function PolicyPermissionItem(props) {
     });
   };
 
+  const policyConditionDisplayValue = (value) => {
+    const selectVal = value;
+    let ipRangVal, uiHintVal;
+    if (selectVal) {
+      return Object.keys(selectVal).map((property) => {
+        let conditionObj = find(
+          serviceCompDetails.policyConditions,
+          function (m) {
+            if (m.name == property) {
+              return m;
+            }
+          }
+        );
+        if (conditionObj?.uiHint && conditionObj?.uiHint != "") {
+          uiHintVal = JSON.parse(conditionObj.uiHint);
+        }
+        if (isArray(selectVal[property])) {
+          ipRangVal = (selectVal[property] || []).map((m) => m).join(", ");
+        }
+        return (
+          <h6 key={property}>
+            <div
+              className={`${
+                uiHintVal?.isMultiline
+                  ? "editable-label rule-condition-wrapper"
+                  : "badge bg-dark rule-condition-wrapper"
+              }`}
+            >
+              {`${getPolicyConditionDisplayLbl(conditionObj.label)}: ${
+                isArray(selectVal[property]) ? ipRangVal : selectVal[property]
+              }`}
+            </div>
+          </h6>
+        );
+      });
+    }
+  };
+
   return (
     <div>
       <Col sm="12">
@@ -466,20 +507,70 @@ export default function PolicyPermissionItem(props) {
                                       index
                                     )
                                   }
-                                  render={({ input }) => (
-                                    <div className="table-editable permission-item">
-                                      <Editable
-                                        {...input}
-                                        // placement="auto"
-                                        type="custom"
-                                        conditionDefVal={policyConditionUpdatedJSON(
-                                          serviceCompDetails.policyConditions
+                                  render={({ input }) => {
+                                    const showConditionsModal =
+                                      activeConditionRow === name;
+                                    const hasValue =
+                                      Object.keys(input?.value || {}).length !==
+                                      0;
+
+                                    return (
+                                      <>
+                                        {/* Only render modal for the clicked row */}
+                                        {showConditionsModal && (
+                                          <div>
+                                            <PolicyConditionsComp
+                                              policyConditionDetails={policyConditionUpdatedJSON(
+                                                serviceCompDetails.policyConditions
+                                              )}
+                                              inputVal={input}
+                                              showModal={true}
+                                              handleCloseModal={() =>
+                                                setActiveConditionRow(null)
+                                              }
+                                              modalHeader="Rule Conditions"
+                                            />
+                                          </div>
                                         )}
-                                        selectProps={{ isMulti: true }}
-                                        popOverheader="Rule Conditions"
-                                      />
-                                    </div>
-                                  )}
+
+                                        <div className="table-editable">
+                                          <div className="editable">
+                                            <div className="text-center">
+                                              {hasValue ? (
+                                                policyConditionDisplayValue(
+                                                  input.value
+                                                )
+                                              ) : (
+                                                <span className="editable-add-text">
+                                                  Add Conditions
+                                                </span>
+                                              )}
+
+                                              <Button
+                                                className="mg-10 mx-auto d-block btn-mini"
+                                                variant="outline-dark"
+                                                size="sm"
+                                                type="button"
+                                                onClick={() =>
+                                                  setActiveConditionRow(name)
+                                                }
+                                                data-js="customPolicyConditions"
+                                                data-cy="customPolicyConditions"
+                                              >
+                                                <i
+                                                  className={
+                                                    hasValue
+                                                      ? "fa-fw fa fa-pencil"
+                                                      : "fa-fw fa fa-plus"
+                                                  }
+                                                />
+                                              </Button>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </>
+                                    );
+                                  }}
                                 />
                               </td>
                             )
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/Reports/SearchPolicyTable.jsx b/security-admin/src/main/webapp/react-webapp/src/views/Reports/SearchPolicyTable.jsx
index c1728f04d9..b88f664fdf 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/Reports/SearchPolicyTable.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/Reports/SearchPolicyTable.jsx
@@ -33,7 +33,11 @@ import { MoreLess } from "Components/CommonComponents";
 import XATableLayout from "Components/XATableLayout";
 import { fetchApi } from "Utils/fetchAPI";
 import { Loader } from "Components/CommonComponents";
-import { isAuditor, isKMSAuditor } from "Utils/XAUtils";
+import {
+  isAuditor,
+  isKMSAuditor,
+  getPolicyConditionDisplayLbl
+} from "Utils/XAUtils";
 
 function SearchPolicyTable(props) {
   const [searchPoliciesData, setSearchPolicies] = useState([]);
@@ -329,13 +333,18 @@ function PolicyConditionData(props) {
               <td className="text-center">
                 {!isEmpty(items.conditions)
                   ? items.conditions.map((obj, index) => {
+                      let conditionObj = props.serviceDef.policyConditions.find(
+                        (condition) => condition.name === obj.type
+                      );
                       return (
                         <h6 className="d-inline me-1" key={index}>
                           <Badge
                             bg="info"
                             className="d-inline me-1"
                             key={obj.values}
-                          >{`${obj.type}: ${obj.values.join(", ")}`}</Badge>
+                          >{`${getPolicyConditionDisplayLbl(
+                            conditionObj.label
+                          )}: ${obj.values.join(", ")}`}</Badge>
                         </h6>
                       );
                     })

From 449119143ed79c1d4b8d32bd6698ecdb9927fd13 Mon Sep 17 00:00:00 2001
From: Dhaval Rajpara <dhavalrajpara1304@gmail.com>
Date: Mon, 9 Mar 2026 17:32:36 +0530
Subject: [PATCH 3/4] RANGER-5445 : Implement Confirmation Modal for
 Users/Groups/Roles Removal

---
 .../src/components/CommonComponents.jsx       | 64 +++++++++++++-
 .../webapp/react-webapp/src/styles/style.css  | 36 +++++++-
 .../react-webapp/src/utils/XAMessages.js      | 14 +++-
 .../webapp/react-webapp/src/utils/XAUtils.js  | 12 ++-
 .../Admin/AdminLogs/PolicyViewDetails.jsx     | 26 +++---
 .../PolicyListing/AddUpdatePolicyForm.jsx     | 23 +++--
 .../PolicyListing/PolicyConditionsComp.jsx    |  8 +-
 .../PolicyListing/PolicyPermissionItem.jsx    | 66 +++++++++++----
 .../src/views/Reports/SearchPolicyTable.jsx   | 83 ++++++++++++++-----
 .../src/views/Reports/UserAccessLayout.jsx    |  2 +-
 .../views/SecurityZone/SecurityZoneForm.jsx   | 27 ++++--
 .../ServiceManager/ServiceDefinition.jsx      |  2 +-
 .../src/views/ServiceManager/ServiceForm.jsx  |  9 +-
 .../role_details/RoleForm.jsx                 | 15 +++-
 .../users_details/UserForm.jsx                |  7 +-
 15 files changed, 308 insertions(+), 86 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 053ced0e21..b1b851ad1c 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
@@ -20,10 +20,18 @@
 import { isEmpty, isObject, lastIndexOf } from "lodash";
 import moment from "moment-timezone";
 import React, { Component, useEffect, useMemo, useState } from "react";
-import { Alert, Badge, Button, OverlayTrigger, Popover } from "react-bootstrap";
+import {
+  Alert,
+  Badge,
+  Button,
+  OverlayTrigger,
+  Popover,
+  Modal
+} from "react-bootstrap";
 import { Field } from "react-final-form";
 import { useLocation } from "react-router-dom";
 import blockLoading from "Images/blockLoading.gif";
+import { components as selectComponents } from "react-select";
 
 export const Loader = () => {
   return (
@@ -577,3 +585,57 @@ export const trimInputValue = (e, input) => {
   }
   input.onBlur(e); // Always call onBlur to trigger validation
 };
+
+export const ConfirmationClearIndicator = (props) => {
+  const [show, setShow] = useState(false);
+
+  const message = `Are you sure you want to remove all selected ${props?.selectProps?.clearConfirmMessage} from this field?`;
+
+  const open = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setShow(true);
+  };
+
+  const onNo = (e) => {
+    e.stopPropagation();
+    setShow(false);
+  };
+
+  const onYes = (e) => {
+    e.stopPropagation();
+    props.clearValue(); // clears all selected values (global clear)
+    props?.selectProps?.onClearConfirmed?.();
+    setShow(false);
+  };
+
+  // Remove react-select's default inner event handlers so clicks only on our icon trigger the modal
+  const { innerProps = {}, ...rest } = props;
+  const { onMouseDown, ...cleanInnerProps } = innerProps;
+
+  return (
+    <>
+      <selectComponents.ClearIndicator {...rest} innerProps={cleanInnerProps}>
+        <span
+          style={{ cursor: "pointer" }}
+          onMouseDown={open}
+          title="Clear all"
+        >
+          <i className="fa fa-times fa-2"></i>
+        </span>
+      </selectComponents.ClearIndicator>
+
+      <Modal show={show} onHide={() => setShow(false)}>
+        <Modal.Body>{message}</Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" size="sm" onMouseDown={onNo}>
+            No
+          </Button>
+          <Button variant="danger" size="sm" onMouseDown={onYes}>
+            Yes
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+};
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 32fe8abe2d..3055ee7d0e 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
@@ -574,9 +574,9 @@ h3.wrap-header {
   margin-top: 5px;
   margin-bottom: 5px;
   border-radius: 5px;
-  font-size: 70%;
-  font-weight: 700;
   padding: 3px;
+  font-size: 14px;
+  display: block;
 }
 
 .rule-condition-wrapper {
@@ -635,6 +635,7 @@ table.no-bg-color thead tr th:first-child {
   white-space: nowrap;
   vertical-align: sub;
   display: inline-block;
+  font-size: 14px;
 }
 
 .service-name,
@@ -1607,7 +1608,6 @@ header {
   display: inline-flex;
   flex-wrap: wrap;
   font-size: 1rem;
-  max-height: 100px;
   overflow-y: auto;
   width: 100%;
 }
@@ -1617,7 +1617,6 @@ header {
   flex-wrap: wrap;
   font-size: 1rem;
   overflow-y: auto;
-  max-height: 100px;
   width: 100%;
 }
 
@@ -3041,3 +3040,32 @@ table a {
 .switch[class*="btn-outline"] .switch-handle {
   background-color: #6c757d !important;
 }
+
+.line-clamp-3 {
+  --line-clamp: 3;
+}
+
+.line-clamp-5 {
+  --line-clamp: 5;
+}
+
+.line-clamp {
+  white-space: normal;
+  word-break: break-all;
+  width: 100%;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--line-clamp, 3);
+  overflow: auto;
+  line-height: 21px;
+}
+
+.condition-group-table td {
+  font-size: 14px;
+  color: rgb(33, 37, 41);
+}
+
+.condition-group-table th {
+  font-size: 15px !important;
+  color: #333;
+}
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 a9cf53944d..806a34cae7 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
@@ -50,10 +50,16 @@ export const RegexMessage = {
         </p>
       </>
     ),
-    policyConditionInfoIcon:
-      "1. Boolean expression Examples :\
-                      country_code == 'USA', time_range >= 900 time_range <= 1800 etc.\
-                      2. Dragging bottom-right corner of condition editor(Textarea) can resizable",
+    policyConditionInfoIcon:(
+      <>
+        <span className="mb-0" style={{ fontSize: "small" }}>
+          1. Boolean expression Examples:
+          <br />
+            country_code == 'USA', time_range &gt;= 900 time_range &lt;= 1800 etc.
+          <br />
+          2. The condition editor (textarea) can be resized by dragging its bottom-right corner.
+        </span>
+      </>),
     firstNameValidationMsg: (
       <>
         <p className="pd-10 mb-0" style={{ fontSize: "small" }}>
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 faeb514c75..c67b25c820 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
@@ -1589,7 +1589,17 @@ export const currentTimeZone = (timeZoneDate) => {
 
 // Common function to get display label for policy condition
 export const getPolicyConditionDisplayLbl = (lbl) => {
-  return policyConditionDisplayLabel.hasOwnProperty(lbl)
+  return has(policyConditionDisplayLabel, lbl)
     ? policyConditionDisplayLabel[lbl]
     : lbl;
 };
+
+// Common function to safeguard JSON parsing
+export const safeJsonParse = (value, fallback) => {
+  try {
+    return JSON.parse(value);
+  } catch (error) {
+    console.error("JSON Parsing Error:", error);
+    return fallback;
+  }
+};
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/Admin/AdminLogs/PolicyViewDetails.jsx b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/Admin/AdminLogs/PolicyViewDetails.jsx
index 6feefb53cd..2f011b6d40 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/Admin/AdminLogs/PolicyViewDetails.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/Admin/AdminLogs/PolicyViewDetails.jsx
@@ -454,7 +454,7 @@ export function PolicyViewDetails(props) {
                     {!isEmpty(
                       filterServiceDef && filterServiceDef.policyConditions
                     ) && (
-                      <td className="text-center">
+                      <td>
                         {!isEmpty(items.conditions)
                           ? items.conditions.map((obj, index) => {
                               let conditionObj =
@@ -462,15 +462,13 @@ export function PolicyViewDetails(props) {
                                   return e.name == obj.type;
                                 });
                               return (
-                                <h6 className="d-inline me-1" key={index}>
-                                  <Badge
-                                    bg="info"
-                                    className="d-inline me-1"
-                                    key={obj.values}
-                                  >{`${getPolicyConditionDisplayLbl(
-                                    conditionObj.label
-                                  )}: ${obj.values.join(", ")}`}</Badge>
-                                </h6>
+                                <Badge
+                                  bg="info"
+                                  className="me-1 line-clamp line-clamp-3 text-start"
+                                  key={obj.values}
+                                >{`${getPolicyConditionDisplayLbl(
+                                  conditionObj.label
+                                )}: ${obj.values.join(", ")}`}</Badge>
                               );
                             })
                           : "--"}
@@ -565,8 +563,12 @@ export function PolicyViewDetails(props) {
               <tbody>
                 {conditions.map((obj) => (
                   <tr key={obj.type} colSpan="2">
-                    <td width="40%">{getConditionLabel(obj.type)}</td>
-                    <td width="60% text-truncate">{obj.values.join(", ")}</td>
+                    <td width="30%">{getConditionLabel(obj.type)}</td>
+                    <td width="70%">
+                      <span className="line-clamp line-clamp-5 text-start">
+                        {obj.values.join(", ")}
+                      </span>
+                    </td>
                   </tr>
                 ))}
               </tbody>
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 59113a9242..791b25ab1e 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
@@ -71,7 +71,8 @@ import {
   getResourcesDefVal,
   getAllTimeZoneList,
   policyConditionUpdatedJSON,
-  policyInfo
+  policyInfo,
+  getPolicyConditionDisplayLbl
 } from "Utils/XAUtils";
 import { useAccordionButton } from "react-bootstrap/AccordionButton";
 import AccordionContext from "react-bootstrap/AccordionContext";
@@ -1546,23 +1547,25 @@ export default function AddUpdatePolicyForm() {
                                           return (
                                             <tr key={keyName}>
                                               <td>
-                                                <center>
-                                                  {conditionObj.label}
-                                                </center>
+                                                <span>
+                                                  {getPolicyConditionDisplayLbl(
+                                                    conditionObj.label
+                                                  )}
+                                                </span>
                                               </td>
                                               <td>
                                                 {isArray(
                                                   values?.conditions[keyName]
                                                 ) ? (
-                                                  <center>
+                                                  <span className="line-clamp line-clamp-3">
                                                     {values.conditions[
                                                       keyName
                                                     ].join(", ")}
-                                                  </center>
+                                                  </span>
                                                 ) : (
-                                                  <center>
+                                                  <span className="line-clamp line-clamp-3">
                                                     {values.conditions[keyName]}
-                                                  </center>
+                                                  </span>
                                                 )}
                                               </td>
                                             </tr>
@@ -1573,7 +1576,9 @@ export default function AddUpdatePolicyForm() {
                                   ) : (
                                     <tr>
                                       <td>
-                                        <center> No Conditions </center>
+                                        <center className="text-muted">
+                                          No Conditions
+                                        </center>
                                       </td>
                                     </tr>
                                   )}
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 ad925c9a3a..f39bbac8e4 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
@@ -60,7 +60,7 @@ export default function PolicyConditionsComp(props) {
   };
 
   const formInitialData = () => {
-    var conditions = {};
+    let conditions = {};
     if (inputVal && inputVal.value) {
       for (let val in inputVal.value) {
         conditions[val] = inputVal.value[val];
@@ -204,7 +204,7 @@ export default function PolicyConditionsComp(props) {
                                               : "form-control"
                                           }
                                           as="textarea"
-                                          rows={3}
+                                          rows={12}
                                           onBlur={(e) =>
                                             trimInputValue(e, input)
                                           }
@@ -248,10 +248,6 @@ export default function PolicyConditionsComp(props) {
                                     onCreateOption={(inputValue) => {
                                       const trimmedValue = inputValue.trim();
                                       if (trimmedValue) {
-                                        const newOption = {
-                                          label: trimmedValue,
-                                          value: trimmedValue
-                                        };
                                         const currentValues = input.value || [];
                                         const newValues = [
                                           ...currentValues,
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 e119f543da..33a85d4e63 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,9 +43,13 @@ import {
   drop,
   dragOver,
   policyConditionUpdatedJSON,
-  getPolicyConditionDisplayLbl
+  getPolicyConditionDisplayLbl,
+  safeJsonParse
 } from "Utils/XAUtils";
-import { selectInputCustomStyles } from "Components/CommonComponents";
+import {
+  selectInputCustomStyles,
+  ConfirmationClearIndicator
+} from "Components/CommonComponents";
 import PolicyConditionsComp from "./PolicyConditionsComp";
 
 const noneOptions = {
@@ -327,7 +331,7 @@ export default function PolicyPermissionItem(props) {
     });
   };
 
-  const policyConditionDisplayValue = (value) => {
+  const ruleConditionDisplayValue = (value) => {
     const selectVal = value;
     let ipRangVal, uiHintVal;
     if (selectVal) {
@@ -341,25 +345,27 @@ export default function PolicyPermissionItem(props) {
           }
         );
         if (conditionObj?.uiHint && conditionObj?.uiHint != "") {
-          uiHintVal = JSON.parse(conditionObj.uiHint);
+          uiHintVal = safeJsonParse(conditionObj.uiHint, {});
         }
         if (isArray(selectVal[property])) {
           ipRangVal = (selectVal[property] || []).map((m) => m).join(", ");
         }
         return (
-          <h6 key={property}>
-            <div
+          <div key={property}>
+            <span
               className={`${
                 uiHintVal?.isMultiline
                   ? "editable-label rule-condition-wrapper"
                   : "badge bg-dark rule-condition-wrapper"
               }`}
             >
-              {`${getPolicyConditionDisplayLbl(conditionObj.label)}: ${
-                isArray(selectVal[property]) ? ipRangVal : selectVal[property]
-              }`}
-            </div>
-          </h6>
+              <span className="line-clamp line-clamp-5 text-start">
+                {`${getPolicyConditionDisplayLbl(conditionObj.label)}: ${
+                  isArray(selectVal[property]) ? ipRangVal : selectVal[property]
+                }`}
+              </span>
+            </span>
+          </div>
         );
       });
     }
@@ -420,6 +426,11 @@ export default function PolicyPermissionItem(props) {
                                       isMulti
                                       tabSelectsValue={false}
                                       placeholder="Select Roles"
+                                      clearConfirmMessage="Roles"
+                                      components={{
+                                        ClearIndicator:
+                                          ConfirmationClearIndicator
+                                      }}
                                     />
                                   </div>
                                 )}
@@ -453,6 +464,11 @@ export default function PolicyPermissionItem(props) {
                                       isMulti
                                       tabSelectsValue={false}
                                       placeholder="Select Groups"
+                                      clearConfirmMessage="Groups"
+                                      components={{
+                                        ClearIndicator:
+                                          ConfirmationClearIndicator
+                                      }}
                                     />
                                   </div>
                                 )}
@@ -486,6 +502,11 @@ export default function PolicyPermissionItem(props) {
                                       isMulti
                                       tabSelectsValue={false}
                                       placeholder="Select Users"
+                                      clearConfirmMessage="Users"
+                                      components={{
+                                        ClearIndicator:
+                                          ConfirmationClearIndicator
+                                      }}
                                     />
                                   </div>
                                 )}
@@ -535,13 +556,24 @@ export default function PolicyPermissionItem(props) {
 
                                         <div className="table-editable">
                                           <div className="editable">
-                                            <div className="text-center">
+                                            <div>
                                               {hasValue ? (
-                                                policyConditionDisplayValue(
-                                                  input.value
-                                                )
+                                                <span
+                                                  onClick={() =>
+                                                    setActiveConditionRow(name)
+                                                  }
+                                                >
+                                                  {ruleConditionDisplayValue(
+                                                    input.value
+                                                  )}
+                                                </span>
                                               ) : (
-                                                <span className="editable-add-text">
+                                                <span
+                                                  className="editable-add-text text-center"
+                                                  onClick={() =>
+                                                    setActiveConditionRow(name)
+                                                  }
+                                                >
                                                   Add Conditions
                                                 </span>
                                               )}
@@ -710,7 +742,7 @@ export default function PolicyPermissionItem(props) {
                                         )}
                                       </div>
                                     ) : (
-                                      <div>
+                                      <div className="text-center">
                                         <span className="editable-add-text text-secondary">
                                           Select Masking Option
                                         </span>
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/Reports/SearchPolicyTable.jsx b/security-admin/src/main/webapp/react-webapp/src/views/Reports/SearchPolicyTable.jsx
index b88f664fdf..c8f581eb4f 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/Reports/SearchPolicyTable.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/Reports/SearchPolicyTable.jsx
@@ -280,7 +280,7 @@ function SearchPolicyTable(props) {
             </Accordion.Body>
           </Accordion.Item>
         </Accordion>
-        <Modal show={showModal} onHide={hidePolicyConditionModal} size="lg">
+        <Modal show={showModal} onHide={hidePolicyConditionModal} size="xl">
           <Modal.Header closeButton>
             <Modal.Title>Policy Condition Details</Modal.Title>
           </Modal.Header>
@@ -330,22 +330,20 @@ function PolicyConditionData(props) {
               )}
             </td>
             {!isEmpty(props?.serviceDef?.policyConditions) && (
-              <td className="text-center">
+              <td>
                 {!isEmpty(items.conditions)
                   ? items.conditions.map((obj, index) => {
                       let conditionObj = props.serviceDef.policyConditions.find(
                         (condition) => condition.name === obj.type
                       );
                       return (
-                        <h6 className="d-inline me-1" key={index}>
-                          <Badge
-                            bg="info"
-                            className="d-inline me-1"
-                            key={obj.values}
-                          >{`${getPolicyConditionDisplayLbl(
-                            conditionObj.label
-                          )}: ${obj.values.join(", ")}`}</Badge>
-                        </h6>
+                        <Badge
+                          bg="info"
+                          className="me-1 line-clamp line-clamp-3 text-start"
+                          key={index}
+                        >{`${getPolicyConditionDisplayLbl(
+                          conditionObj.label
+                        )}: ${obj.values.join(", ")}`}</Badge>
                       );
                     })
                   : "--"}
@@ -358,6 +356,15 @@ function PolicyConditionData(props) {
                 <div className="text-center">--</div>
               )}
             </td>
+            {props?.serviceDef?.name != "tag" && (
+              <td className="text-center">
+                <input
+                  type="checkbox"
+                  checked={items.delegateAdmin === false ? false : true}
+                  disabled="disabled"
+                />
+              </td>
+            )}
           </tr>
         );
       });
@@ -366,7 +373,7 @@ function PolicyConditionData(props) {
         <tr key="no-data">
           <td
             className="text-center"
-            colSpan={!isEmpty(props?.serviceDef?.policyConditions) ? "5" : "4"}
+            colSpan={!isEmpty(props?.serviceDef?.policyConditions) ? "6" : "5"}
           >
             <span className="text-muted">&quot;No data to show!!&quot;</span>
           </td>
@@ -406,17 +413,20 @@ function PolicyConditionData(props) {
               )}
             </td>
             {!isEmpty(props?.serviceDef?.policyConditions) && (
-              <td className="text-center">
+              <td>
                 {!isEmpty(items.conditions)
                   ? items.conditions.map((obj, index) => {
+                      let conditionObj = props.serviceDef.policyConditions.find(
+                        (condition) => condition.name === obj.type
+                      );
                       return (
-                        <h6 className="d-inline me-1" key={index}>
-                          <Badge
-                            bg="info"
-                            className="d-inline me-1"
-                            key={obj.values}
-                          >{`${obj.type}: ${obj.values.join(", ")}`}</Badge>
-                        </h6>
+                        <Badge
+                          bg="info"
+                          className="me-1 line-clamp line-clamp-3 text-start"
+                          key={index}
+                        >{`${getPolicyConditionDisplayLbl(
+                          conditionObj.label
+                        )}: ${obj.values.join(", ")}`}</Badge>
                       );
                     })
                   : "--"}
@@ -487,6 +497,26 @@ function PolicyConditionData(props) {
                 <div className="text-center">--</div>
               )}
             </td>
+            {!isEmpty(props?.serviceDef?.policyConditions) && (
+              <td>
+                {!isEmpty(items.conditions)
+                  ? items.conditions.map((obj, index) => {
+                      let conditionObj = props.serviceDef.policyConditions.find(
+                        (condition) => condition.name === obj.type
+                      );
+                      return (
+                        <Badge
+                          bg="info"
+                          className="me-1 line-clamp line-clamp-3 text-start"
+                          key={index}
+                        >{`${getPolicyConditionDisplayLbl(
+                          conditionObj.label
+                        )}: ${obj.values.join(", ")}`}</Badge>
+                      );
+                    })
+                  : "--"}
+              </td>
+            )}
             <td>
               {!isEmpty(access) ? (
                 <MoreLess data={access} />
@@ -540,6 +570,7 @@ function PolicyConditionData(props) {
                     <th className="text-center text-nowrap">Rule Conditions</th>
                   )}
                   <th>Accesses</th>
+                  {props?.serviceDef?.name != "tag" && <th>Delegate Admin</th>}
                 </tr>
               </thead>
               <tbody>{getPolicyData(props.policyData.policyItems)}</tbody>
@@ -566,6 +597,9 @@ function PolicyConditionData(props) {
                         </th>
                       )}
                       <th>Accesses</th>
+                      {props?.serviceDef?.name != "tag" && (
+                        <th>Delegate Admin</th>
+                      )}
                     </tr>
                   </thead>
                   <tbody>
@@ -591,6 +625,9 @@ function PolicyConditionData(props) {
                         </th>
                       )}
                       <th>Accesses</th>
+                      {props?.serviceDef?.name != "tag" && (
+                        <th>Delegate Admin</th>
+                      )}
                     </tr>
                   </thead>
                   <tbody>
@@ -616,6 +653,9 @@ function PolicyConditionData(props) {
                         </th>
                       )}
                       <th>Accesses</th>
+                      {props?.serviceDef?.name != "tag" && (
+                        <th>Delegate Admin</th>
+                      )}
                     </tr>
                   </thead>
                   <tbody>
@@ -671,6 +711,9 @@ function PolicyConditionData(props) {
                   <th>Roles</th>
                   <th>Groups</th>
                   <th>Users</th>
+                  {!isEmpty(props?.serviceDef?.policyConditions) && (
+                    <th className="text-center text-nowrap">Rule Conditions</th>
+                  )}
                   <th>Accesses</th>
                   <th>Row Level Filter</th>
                 </tr>
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 5dc1c6914d..f9fe792f99 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
@@ -494,7 +494,7 @@ function UserAccessLayout() {
                 <Accordion.Body>
                   <Form
                     onSubmit={onSubmit}
-                    initialValues={getInitialSearchParams}
+                    initialValues={getInitialSearchParams()}
                     render={({ handleSubmit, submitting, values }) => (
                       <form onSubmit={handleSubmit}>
                         <Row className="form-group">
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 7d9ad9d31d..817320331c 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
@@ -49,7 +49,8 @@ import {
   scrollToError,
   selectInputCustomStyles,
   selectInputCustomErrorStyles,
-  trimInputValue
+  trimInputValue,
+  ConfirmationClearIndicator
 } from "Components/CommonComponents";
 import usePrompt from "Hooks/usePrompt";
 import { getServiceDef } from "Utils/appState";
@@ -873,11 +874,13 @@ const SecurityZoneForm = () => {
                               isMulti
                               components={{
                                 DropdownIndicator: () => null,
-                                IndicatorSeparator: () => null
+                                IndicatorSeparator: () => null,
+                                ClearIndicator: ConfirmationClearIndicator
                               }}
                               isClearable={true}
                               placeholder="Select Users"
                               tabSelectsValue={false}
+                              clearConfirmMessage="Users"
                             />
                           </Col>
                         </Row>
@@ -918,11 +921,13 @@ const SecurityZoneForm = () => {
                               isMulti
                               components={{
                                 DropdownIndicator: () => null,
-                                IndicatorSeparator: () => null
+                                IndicatorSeparator: () => null,
+                                ClearIndicator: ConfirmationClearIndicator
                               }}
                               isClearable={true}
                               placeholder="Select Groups"
                               tabSelectsValue={false}
+                              clearConfirmMessage="Groups"
                             />
                           </Col>
                         </Row>
@@ -963,11 +968,13 @@ const SecurityZoneForm = () => {
                               isMulti
                               components={{
                                 DropdownIndicator: () => null,
-                                IndicatorSeparator: () => null
+                                IndicatorSeparator: () => null,
+                                ClearIndicator: ConfirmationClearIndicator
                               }}
                               isClearable={true}
                               placeholder="Select Roles"
                               tabSelectsValue={false}
+                              clearConfirmMessage="Roles"
                             />
                             {meta.touched && meta.error && (
                               <span className="invalid-field">
@@ -1013,11 +1020,13 @@ const SecurityZoneForm = () => {
                               isMulti
                               components={{
                                 DropdownIndicator: () => null,
-                                IndicatorSeparator: () => null
+                                IndicatorSeparator: () => null,
+                                ClearIndicator: ConfirmationClearIndicator
                               }}
                               isClearable={true}
                               placeholder="Select Users"
                               tabSelectsValue={false}
+                              clearConfirmMessage="Users"
                             />
                           </Col>
                         </Row>
@@ -1058,11 +1067,13 @@ const SecurityZoneForm = () => {
                               isMulti
                               components={{
                                 DropdownIndicator: () => null,
-                                IndicatorSeparator: () => null
+                                IndicatorSeparator: () => null,
+                                ClearIndicator: ConfirmationClearIndicator
                               }}
                               isClearable={true}
                               placeholder="Select Groups"
                               tabSelectsValue={false}
+                              clearConfirmMessage="Groups"
                             />
                           </Col>
                         </Row>
@@ -1103,11 +1114,13 @@ const SecurityZoneForm = () => {
                               isMulti
                               components={{
                                 DropdownIndicator: () => null,
-                                IndicatorSeparator: () => null
+                                IndicatorSeparator: () => null,
+                                ClearIndicator: ConfirmationClearIndicator
                               }}
                               isClearable={true}
                               placeholder="Select Roles"
                               tabSelectsValue={false}
+                              clearConfirmMessage="Roles"
                             />
                             {meta.error && meta.touched && (
                               <span className="invalid-field">
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceDefinition.jsx b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceDefinition.jsx
index cc60cd3054..0fb63700eb 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceDefinition.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceDefinition.jsx
@@ -178,7 +178,7 @@ class ServiceDefinition extends Component {
                             pathname: `/service/${s.id}/policies/${RangerPolicyType.RANGER_ACCESS_POLICY_TYPE.value}`,
                             detail: this.props.selectedZone
                           }}
-                          className="service-name text-info"
+                          className="service-name"
                         >
                           {s.displayName !== undefined ? s.displayName : s.name}
                         </Link>
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 cb4d4e65ff..6196cea375 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
@@ -42,7 +42,8 @@ import {
   Loader,
   scrollToError,
   selectInputCustomStyles,
-  trimInputValue
+  trimInputValue,
+  ConfirmationClearIndicator
 } from "Components/CommonComponents";
 import {
   difference,
@@ -706,6 +707,12 @@ class ServiceForm extends Component {
                 isClearable={true}
                 styles={selectInputCustomStyles}
                 isMulti
+                clearConfirmMessage={
+                  additionalConfig.type == "user" ? "Users" : "Groups"
+                }
+                components={{
+                  ClearIndicator: ConfirmationClearIndicator
+                }}
               />
             </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 746ff55a6a..e459c2f123 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
@@ -26,7 +26,8 @@ import {
   Loader,
   CustomTooltip,
   selectInputCustomStyles,
-  trimInputValue
+  trimInputValue,
+  ConfirmationClearIndicator
 } from "Components/CommonComponents";
 import { FieldArray } from "react-final-form-arrays";
 import arrayMutators from "final-form-arrays";
@@ -639,6 +640,10 @@ function RoleForm() {
                             styles={selectInputCustomStyles}
                             tabSelectsValue={false}
                             placeholder="Select Users"
+                            clearConfirmMessage="Users"
+                            components={{
+                              ClearIndicator: ConfirmationClearIndicator
+                            }}
                           />
                         </div>
                         <div className="col-sm-3">
@@ -748,6 +753,10 @@ function RoleForm() {
                             styles={selectInputCustomStyles}
                             tabSelectsValue={false}
                             placeholder="Select Groups"
+                            clearConfirmMessage="Groups"
+                            components={{
+                              ClearIndicator: ConfirmationClearIndicator
+                            }}
                           />
                         </div>
                         <div className="col-sm-3">
@@ -857,6 +866,10 @@ function RoleForm() {
                             styles={selectInputCustomStyles}
                             tabSelectsValue={false}
                             placeholder="Select Roles"
+                            clearConfirmMessage="Roles"
+                            components={{
+                              ClearIndicator: ConfirmationClearIndicator
+                            }}
                           />
                         </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 e00333e7d7..068475d0f8 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
@@ -24,7 +24,8 @@ import {
   BlockUi,
   scrollToError,
   selectInputCustomStyles,
-  trimInputValue
+  trimInputValue,
+  ConfirmationClearIndicator
 } from "Components/CommonComponents";
 import AsyncSelect from "react-select/async";
 import Select from "react-select";
@@ -244,6 +245,10 @@ function UserForm(props) {
         styles={selectInputCustomStyles}
         tabSelectsValue={false}
         placeholder="Select Groups"
+        clearConfirmMessage="Groups"
+        components={{
+          ClearIndicator: ConfirmationClearIndicator
+        }}
       />
     );
   };

From 5124ea522561aa3e9f58d6d2a604f628c1b77ff5 Mon Sep 17 00:00:00 2001
From: Dhaval Rajpara <dhavalrajpara1304@gmail.com>
Date: Wed, 11 Mar 2026 16:49:44 +0530
Subject: [PATCH 4/4] RANGER-5468 : Policy UI to list permissions in sorted
 order

---
 .../src/components/CommonComponents.jsx       |  4 +--
 .../react-webapp/src/components/Editable.jsx  |  2 +-
 .../webapp/react-webapp/src/utils/XAUtils.js  | 33 +++++++++++++++++++
 .../Admin/AdminLogs/PolicyViewDetails.jsx     | 13 +++++---
 .../PolicyListing/PolicyPermissionItem.jsx    | 11 ++++---
 .../PolicyListing/TagBasePermissionItem.jsx   |  5 +--
 .../src/views/Reports/SearchPolicyTable.jsx   | 31 ++++++++++++-----
 .../ServiceManager/ServiceAuditFilter.jsx     | 10 +++---
 .../ServiceManager/ServiceViewDetails.jsx     | 11 +++++--
 9 files changed, 89 insertions(+), 31 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 b1b851ad1c..52d84ca558 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
@@ -95,12 +95,12 @@ export class MoreLess extends Component {
     return (
       <>
         <div className={this.state.show ? "show-less" : "show-more"}>
-          {this?.state?.data?.map((key) => {
+          {this?.state?.data?.map((key, index) => {
             return (
               <Badge
                 bg="info"
                 title={key}
-                key={key}
+                key={index}
                 className="m-1 text-truncate more-less-width"
               >
                 {key}
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 09f8d24c7b..a7de99eb1a 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
@@ -516,7 +516,7 @@ const Editable = (props) => {
           selectVal && selectVal?.length > 0 ? (
             <>
               <span className="editable-edit-text">
-                {selectVal.map((op, index) => (
+                {sortBy(selectVal, "label").map((op, index) => (
                   <h6 className="d-inline me-1" key={index}>
                     <Badge bg="info">{op.label}</Badge>
                   </h6>
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 c67b25c820..10caa969ab 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
@@ -1603,3 +1603,36 @@ export const safeJsonParse = (value, fallback) => {
     return fallback;
   }
 };
+
+//CommonFunction to get display label for policy permission item
+export const getPolicyPermissionItemDisplayLbl = (
+  serviceDef,
+  policyType,
+  accessType
+) => {
+  let accessTypeDefVal = [];
+  const accesTypeKeys = map(accessType, (item) => {
+    return isObject(item) ? item.type : item;
+  });
+  if (RangerPolicyType.RANGER_MASKING_POLICY_TYPE.value == policyType) {
+    accessTypeDefVal = serviceDef.dataMaskDef.accessTypes;
+  } else if (
+    RangerPolicyType.RANGER_ROW_FILTER_POLICY_TYPE.value == policyType
+  ) {
+    accessTypeDefVal = serviceDef.rowFilterDef.accessTypes;
+  } else {
+    accessTypeDefVal = serviceDef.accessTypes;
+  }
+  if (serviceDef.name == "tag") {
+    return map(sortBy(accesTypeKeys), (val) => ({ label: val }));
+  } else {
+    if (accessType.length == accessTypeDefVal.length) {
+      return sortBy(accessTypeDefVal, "label");
+    } else {
+      const accessTypeDisplayLblObj = filter(accessTypeDefVal, (item) =>
+        includes(accesTypeKeys, { type: item.name })
+      );
+      return sortBy(accessTypeDisplayLblObj, "label");
+    }
+  }
+};
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/Admin/AdminLogs/PolicyViewDetails.jsx b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/Admin/AdminLogs/PolicyViewDetails.jsx
index 2f011b6d40..e683303a1b 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/Admin/AdminLogs/PolicyViewDetails.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/Admin/AdminLogs/PolicyViewDetails.jsx
@@ -27,7 +27,8 @@ import { cloneDeep, find, isEmpty, map, sortBy } from "lodash";
 import {
   getResourcesDefVal,
   serverError,
-  getPolicyConditionDisplayLbl
+  getPolicyConditionDisplayLbl,
+  getPolicyPermissionItemDisplayLbl
 } from "Utils/XAUtils";
 import { ModalLoader } from "Components/CommonComponents";
 import { getServiceDef } from "Utils/appState";
@@ -478,14 +479,18 @@ export function PolicyViewDetails(props) {
                     {!isEmpty(items.accesses) ? (
                       <td className="text-center d-flex flex-wrap policyview-permission-wrap">
                         {" "}
-                        {items.accesses.map((obj, index) => (
+                        {getPolicyPermissionItemDisplayLbl(
+                          filterServiceDef,
+                          policyType,
+                          items.accesses
+                        ).map((obj, index) => (
                           <h6 className="d-inline me-1" key={index}>
                             <Badge
                               bg="info"
                               className="d-inline me-1"
-                              key={obj.type}
+                              key={obj.label}
                             >
-                              {obj.type}
+                              {obj.label}
                             </Badge>
                           </h6>
                         ))}
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 33a85d4e63..92ef1fb3c9 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
@@ -31,7 +31,8 @@ import {
   map,
   filter,
   some,
-  isEqual
+  isEqual,
+  sortBy
 } from "lodash";
 import { toast } from "react-toastify";
 import Editable from "Components/Editable";
@@ -198,10 +199,10 @@ export default function PolicyPermissionItem(props) {
         }
       }
     }
-    return srcOp.map(({ label, name: value }) => ({
-      label,
-      value
-    }));
+    return sortBy(
+      srcOp.map(({ label, name: value }) => ({ label, value })),
+      serviceCompDetails?.name == "tag" ? "value" : "label"
+    );
   };
 
   const getMaskingAccessTypeOptions = (index) => {
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 7d164dedce..80fa4a8ae2 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
@@ -33,7 +33,8 @@ import {
   difference,
   map,
   every,
-  cloneDeep
+  cloneDeep,
+  sortBy
 } from "lodash";
 import { RangerPolicyType } from "Utils/XAEnums";
 import { getServiceDef } from "Utils/appState";
@@ -269,7 +270,7 @@ export default function TagBasePermissionItem(props) {
   };
 
   const tagAccessTypeDisplayVal = (val) => {
-    return val.map((m, index) => {
+    return sortBy(val, "serviceName").map((m, index) => {
       return (
         <h6 className="d-inline me-1 mb-1" key={index}>
           <Badge bg="info">{m.serviceName.toUpperCase()}</Badge>
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/Reports/SearchPolicyTable.jsx b/security-admin/src/main/webapp/react-webapp/src/views/Reports/SearchPolicyTable.jsx
index c8f581eb4f..39d96f2aed 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/Reports/SearchPolicyTable.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/Reports/SearchPolicyTable.jsx
@@ -38,6 +38,7 @@ import {
   isKMSAuditor,
   getPolicyConditionDisplayLbl
 } from "Utils/XAUtils";
+import { getPolicyPermissionItemDisplayLbl } from "../../utils/XAUtils";
 
 function SearchPolicyTable(props) {
   const [searchPoliciesData, setSearchPolicies] = useState([]);
@@ -305,7 +306,11 @@ function PolicyConditionData(props) {
 
     if (!isEmpty(policyItem)) {
       tableRow = policyItem?.map((items, index) => {
-        access = items.accesses?.map((obj) => obj.type);
+        access = getPolicyPermissionItemDisplayLbl(
+          props.serviceDef,
+          0,
+          items.accesses
+        )?.map((obj) => obj.label);
         return (
           <tr key={index}>
             <td>
@@ -388,7 +393,11 @@ function PolicyConditionData(props) {
     let access = [];
     if (!isEmpty(policyItem)) {
       tableRow = policyItem?.map((items, index) => {
-        access = items.accesses?.map((obj) => obj.type);
+        access = getPolicyPermissionItemDisplayLbl(
+          props.serviceDef,
+          1,
+          items.accesses
+        )?.map((obj) => obj.label);
         return (
           <tr key={index}>
             <td>
@@ -473,7 +482,11 @@ function PolicyConditionData(props) {
     let access = [];
     if (!isEmpty(policyItem)) {
       tableRow = policyItem?.map((items, index) => {
-        access = items.accesses?.map((obj) => obj.type);
+        access = getPolicyPermissionItemDisplayLbl(
+          props.serviceDef,
+          2,
+          items.accesses
+        )?.map((obj) => obj.label);
         return (
           <tr key={index}>
             <td>
@@ -569,7 +582,7 @@ function PolicyConditionData(props) {
                   {!isEmpty(props?.serviceDef?.policyConditions) && (
                     <th className="text-center text-nowrap">Rule Conditions</th>
                   )}
-                  <th>Accesses</th>
+                  <th>Permissions</th>
                   {props?.serviceDef?.name != "tag" && <th>Delegate Admin</th>}
                 </tr>
               </thead>
@@ -596,7 +609,7 @@ function PolicyConditionData(props) {
                           Rule Conditions
                         </th>
                       )}
-                      <th>Accesses</th>
+                      <th>Permissions</th>
                       {props?.serviceDef?.name != "tag" && (
                         <th>Delegate Admin</th>
                       )}
@@ -624,7 +637,7 @@ function PolicyConditionData(props) {
                           Rule Conditions
                         </th>
                       )}
-                      <th>Accesses</th>
+                      <th>Permissions</th>
                       {props?.serviceDef?.name != "tag" && (
                         <th>Delegate Admin</th>
                       )}
@@ -652,7 +665,7 @@ function PolicyConditionData(props) {
                           Rule Conditions
                         </th>
                       )}
-                      <th>Accesses</th>
+                      <th>Permissions</th>
                       {props?.serviceDef?.name != "tag" && (
                         <th>Delegate Admin</th>
                       )}
@@ -685,7 +698,7 @@ function PolicyConditionData(props) {
                   {!isEmpty(props?.serviceDef?.policyConditions) && (
                     <th className="text-center text-nowrap">Rule Conditions</th>
                   )}
-                  <th>Accesses</th>
+                  <th>Permissions</th>
                   <th>Masking Condition</th>
                 </tr>
               </thead>
@@ -714,7 +727,7 @@ function PolicyConditionData(props) {
                   {!isEmpty(props?.serviceDef?.policyConditions) && (
                     <th className="text-center text-nowrap">Rule Conditions</th>
                   )}
-                  <th>Accesses</th>
+                  <th>Permissions</th>
                   <th>Row Level Filter</th>
                 </tr>
               </thead>
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 23c2e8a13c..9ce5dfc378 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
@@ -26,7 +26,7 @@ import AsyncSelect from "react-select/async";
 import Editable from "Components/Editable";
 import CreatableField from "Components/CreatableField";
 import ModalResourceComp from "Views/Resources/ModalResourceComp";
-import { uniq, map, join, isEmpty, isArray } from "lodash";
+import { uniq, map, join, isEmpty, isArray, sortBy } from "lodash";
 import TagBasePermissionItem from "Views/PolicyListing/TagBasePermissionItem";
 import { dragStart, dragEnter, drop, dragOver } from "Utils/XAUtils";
 import { selectInputCustomStyles } from "Components/CommonComponents";
@@ -155,10 +155,10 @@ export default function ServiceAuditFilter(props) {
   const getAccessTypeOptions = () => {
     let srcOp = [];
     srcOp = serviceDefDetails?.accessTypes;
-    return srcOp?.map(({ label, name: value }) => ({
-      label,
-      value
-    }));
+    return sortBy(
+      srcOp?.map(({ label, name: value }) => ({ label, value })),
+      serviceDefDetails.name == "tag" ? "value" : "label"
+    );
   };
 
   const permList = [
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceViewDetails.jsx b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceViewDetails.jsx
index 8cb742c296..9f3afbe91e 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceViewDetails.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceViewDetails.jsx
@@ -33,6 +33,7 @@ import {
 } from "lodash";
 import { ModalLoader } from "Components/CommonComponents";
 import { additionalServiceConfigs } from "Utils/XAEnums";
+import { getPolicyPermissionItemDisplayLbl } from "Utils/XAUtils";
 
 export const ServiceViewDetails = (props) => {
   const { serviceData: service, serviceDefData } = props;
@@ -261,13 +262,17 @@ export const ServiceViewDetails = (props) => {
           </td>
           <td className="text-center">
             {a.accessTypes !== undefined && a.accessTypes.length > 0
-              ? a.accessTypes.map((accessType) => (
+              ? getPolicyPermissionItemDisplayLbl(
+                  serviceDefData,
+                  0,
+                  a.accessTypes
+                ).map((accessType) => (
                   <Badge
                     bg="info"
                     className="m-1 text-truncate"
-                    key={accessType}
+                    key={accessType.label}
                   >
-                    {accessType}
+                    {accessType.label}
                   </Badge>
                 ))
               : "--"}