From 98558adc98b604e6ee6371a28eaebdb0cf4508f5 Mon Sep 17 00:00:00 2001
From: Brijesh Bhalala <brijeshbhalala2324@gmail.com>
Date: Thu, 23 Nov 2023 17:32:19 +0530
Subject: [PATCH] RANGER-4370: Select All permissions for all components
 checkbox missing in tag based policy permission popup

Signed-off-by: Dineshkumar Yadav <dineshkumar.yadav@outlook.com>
---
 .../webapp/react-webapp/src/styles/style.css  |  5 +-
 .../PolicyListing/TagBasePermissionItem.jsx   | 65 ++++++++++++++++---
 2 files changed, 59 insertions(+), 11 deletions(-)

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 46e8eeda1a..10f47923b6 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
@@ -2548,6 +2548,9 @@ li.list-group-item:hover {
 .Toastify__toast-icon {
   width: 16px;
 }
+.td-padding-modal {
+  padding: 0.5rem 0.75rem !important;
+}
 .manage-service .dropdown-toggle::after {
   vertical-align: 0.125em;
 }
@@ -2557,5 +2560,5 @@ li.list-group-item:hover {
 .resource-block {
   padding: 0.5rem 0;
   border-bottom: 1px solid #dddddd;
-  margin:1rem 2rem;
+  margin: 1rem 2rem;
 }
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 cda20700c3..38de7fdce2 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
@@ -31,7 +31,9 @@ import {
   isEmpty,
   includes,
   difference,
-  map
+  map,
+  every,
+  cloneDeep
 } from "lodash";
 import { RangerPolicyType } from "Utils/XAEnums";
 import { getServiceDef } from "../../utils/appState";
@@ -197,6 +199,15 @@ export default function TagBasePermissionItem(props) {
     );
   };
 
+  const isSelectAllChecked = (values) => {
+    let fieldValues = !isEmpty(values) ? [...values] : [];
+    return !isEmpty(fieldValues)
+      ? every(fieldValues, (p) => {
+          return p?.permission?.length == tagServicePerms[p.serviceName].length;
+        })
+      : false;
+  };
+
   const handleChange = (e, value, input) => {
     let val = [...input.value] || [];
     if (e.target.checked) {
@@ -217,7 +228,22 @@ export default function TagBasePermissionItem(props) {
     fieldVal.permission = val;
     fields.update(index, fieldVal);
   };
+  const selectAllPermissions = (e, values, form) => {
+    const { checked } = e.target;
+    const fieldValues = cloneDeep(values?.tableList);
+    if (!isEmpty(fieldValues)) {
+      fieldValues.filter((p) => {
+        let val = [];
+        val = tagServicePerms[p.serviceName].map(({ value }) => value);
+        p.permission = checked ? val : [];
+      });
 
+      form.batch(() => {
+        form.change("selectAll", checked);
+        form.change("tableList", fieldValues);
+      });
+    }
+  };
   const formInitialData = () => {
     let formData = {};
     if (inputVal?.value?.tableList?.length > 0) {
@@ -307,8 +333,7 @@ export default function TagBasePermissionItem(props) {
             form: {
               mutators: { push, remove }
             },
-            submitting,
-            pristine,
+            form,
             values
           }) => (
             <form onSubmit={handleSubmit}>
@@ -318,7 +343,7 @@ export default function TagBasePermissionItem(props) {
               <Modal.Body>
                 <Field
                   name="servicesDefType"
-                  render={({ input, meta }) => (
+                  render={({ input }) => (
                     <FormB.Group className="mb-3">
                       <b>Select Component:</b>
                       <Select
@@ -351,20 +376,40 @@ export default function TagBasePermissionItem(props) {
                 <Table striped bordered>
                   <thead>
                     <tr>
-                      <th className="bg-white text-dark  align-middle text-center">
-                        Component
+                      <th className="bg-white text-dark  align-middle">
+                        <FormB.Group className="d-flex align-items-center mb-0">
+                          <Field
+                            name="selectAll"
+                            type="checkbox"
+                            render={({ input }) => (
+                              <>
+                                <input
+                                  {...input}
+                                  className="mr-1"
+                                  checked={isSelectAllChecked(
+                                    values?.tableList
+                                  )}
+                                  onChange={(e) => {
+                                    selectAllPermissions(e, values, form);
+                                  }}
+                                />
+                                Component
+                              </>
+                            )}
+                          />
+                        </FormB.Group>
                       </th>
-                      <th className="bg-white text-dark align-middle text-center">
+                      <th className="bg-white text-dark align-middle">
                         Permission
                       </th>
                     </tr>
                   </thead>
                   <tbody>
                     <FieldArray name="tableList">
-                      {({ fields, value }) =>
+                      {({ fields }) =>
                         fields.map((name, index) => (
                           <tr className="bg-white" key={index}>
-                            <td className="align-middle">
+                            <td className="align-middle td-padding-modal">
                               <h6>
                                 <FormB.Group className="d-inline">
                                   <FormB.Check
@@ -393,7 +438,7 @@ export default function TagBasePermissionItem(props) {
                               <Field
                                 className="form-control"
                                 name={`${name}.permission`}
-                                render={({ input, meta }) => (
+                                render={({ input }) => (
                                   <div>
                                     {tagServicePerms[
                                       fields.value[index].serviceName