RANGER-4010: updated react UI to support multiple resource-sets in po…

…licies Signed-off-by: Madhan Neethiraj <madhan@apache.org>
apache · Oct 26, 2023 · d29c2a4 · d29c2a4
1 parent 105f6f5
commit d29c2a4
Show file tree

Hide file tree

Showing 14 changed files with 571 additions and 303 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
@@ -57,7 +57,7 @@ const CheckboxComp = (props) => {
     setVal(val);
   };
 
-  const handleAllChekced = (e) => {
+  const handleAllChecked = (e) => {
     let val = [];
     if (e.target.checked) {
       val = [...options];
@@ -92,7 +92,7 @@ const CheckboxComp = (props) => {
             checked={isAllChecked()}
             type="checkbox"
             label={selectAllLabel}
-            onChange={(e) => handleAllChekced(e)}
+            onChange={(e) => handleAllChecked(e)}
           />
         </Form.Group>
       )}
@@ -126,7 +126,7 @@ const RadioBtnComp = (props) => {
   ));
 };
 
-const InputboxComp = (props) => {
+const InputBoxComp = (props) => {
   const { value = "", valRef } = props;
   const [selectedInputVal, setInputVal] = useState(value);
   const handleChange = (e) => {
@@ -160,7 +160,7 @@ const CustomCondition = (props) => {
   return (
     <>
       {conditionDefVal?.length > 0 &&
-        conditionDefVal.map((m) => {
+        conditionDefVal.map((m, index) => {
           let uiHintAttb =
             m.uiHint != undefined && m.uiHint != "" ? JSON.parse(m.uiHint) : "";
           if (uiHintAttb != "") {
@@ -249,7 +249,7 @@ const CustomCondition = (props) => {
                           position="right"
                           message={
                             <p className="pd-10">
-                              {RegexMessage.MESSAGE.policyconditioninfoicon}
+                              {RegexMessage.MESSAGE.policyConditionInfoIcon}
                             </p>
                           }
                         />
@@ -312,7 +312,7 @@ const CustomCondition = (props) => {
   );
 };
 
-const innitialState = (props) => {
+const initialState = (props) => {
   const { type, selectProps, value } = props;
   let val = value;
   if (!val) {
@@ -369,7 +369,7 @@ const Editable = (props) => {
     state: false,
     errorMSG: ""
   });
-  const [state, dispatch] = useReducer(reducer, props, innitialState);
+  const [state, dispatch] = useReducer(reducer, props, initialState);
   const { show, value, target } = state;
   let isListenerAttached = false;
 
@@ -714,7 +714,7 @@ const Editable = (props) => {
         ) : type === TYPE_RADIO ? (
           <RadioBtnComp value={value} options={options} valRef={selectValRef} />
         ) : type === TYPE_INPUT ? (
-          <InputboxComp value={value} valRef={selectValRef} />
+          <InputBoxComp value={value} valRef={selectValRef} />
         ) : type === TYPE_CUSTOM ? (
           <CustomCondition
             value={value}

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
@@ -2554,3 +2554,8 @@ li.list-group-item:hover {
 .text-word-break {
   word-break: break-all;
 }
+.resource-block {
+  padding: 0.5rem 0;
+  border-bottom: 1px solid #dddddd;
+  margin:1rem 2rem;
+}
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
@@ -21,7 +21,7 @@ import React from "react";
 
 export const RegexMessage = {
   MESSAGE: {
-    policynameinfoiconmessage:
+    policyNameInfoIconMessage:
       "Please avoid these characters (&, <, >, ', \", `) for policy name.",
     userNameValidationMsg: (
       <>
@@ -49,7 +49,7 @@ export const RegexMessage = {
         </p>
       </>
     ),
-    policyconditioninfoicon:
+    policyConditionInfoIcon:
       "1. JavaScript Condition Examples :\
                       country_code == 'USA', time_range >= 900 time_range <= 1800 etc.\
                       2. Dragging bottom-right corner of javascript condition editor(Textarea) can resizable",

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
@@ -19,7 +19,13 @@
 
 import React, { useState } from "react";
 import { getUserProfile } from "Utils/appState";
-import { UserRoles, PathAssociateWithModule, QueryParams } from "Utils/XAEnums";
+import {
+  UserRoles,
+  PathAssociateWithModule,
+  QueryParams,
+  RangerPolicyType,
+  ServiceType
+} from "Utils/XAEnums";
 import {
   filter,
   find,
@@ -34,7 +40,8 @@ import {
   isUndefined,
   isNull,
   some,
-  has
+  has,
+  sortBy
 } from "lodash";
 import { matchRoutes } from "react-router-dom";
 import dateFormat from "dateformat";
@@ -43,7 +50,6 @@ import CustomBreadcrumb from "../views/CustomBreadcrumb";
 import { CustomTooltip } from "../components/CommonComponents";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { toast } from "react-toastify";
-import { RangerPolicyType, ServiceType } from "./XAEnums";
 import { policyInfoMessage } from "./XAMessages";
 import { fetchApi } from "Utils/fetchAPI";
 
@@ -1436,3 +1442,19 @@ export const policyConditionUpdatedJSON = (policyCond) => {
   });
   return newPolicyConditionJSON;
 };
+
+// Get resources with help of policy type
+
+export const getResourcesDefVal = (serviceDef, policyType) => {
+  let resources = [];
+  if (RangerPolicyType.RANGER_MASKING_POLICY_TYPE.value == policyType) {
+    resources = sortBy(serviceDef.dataMaskDef.resources, "itemId");
+  } else if (
+    RangerPolicyType.RANGER_ROW_FILTER_POLICY_TYPE.value == policyType
+  ) {
+    resources = sortBy(serviceDef.rowFilterDef.resources, "itemId");
+  } else {
+    resources = sortBy(serviceDef.resources, "itemId");
+  }
+  return resources;
+};