From 142da018a977d4d354de033eb02c323f5be209b6 Mon Sep 17 00:00:00 2001
From: Kevma50287 <104021955+Kevma50287@users.noreply.github.com>
Date: Wed, 11 Sep 2024 10:28:57 -0400
Subject: [PATCH] Kev ma/appeals 55015 (#22764)

* Typo fix

* Added safe navigation operator

* Remove permissions from ruby view props

* Update component to save value to state instead of from props

* rename hash key

* updated var ref to state

* Update for code spacing

* Bugfix for sticky checkbox logic
---
 .../organizations/users_controller.rb         | 12 ++--
 client/app/queue/OrganizationPermissions.jsx  | 71 +++++++++----------
 client/app/queue/OrganizationUsers.jsx        | 14 ++--
 client/app/queue/QueueApp.jsx                 |  7 +-
 4 files changed, 47 insertions(+), 57 deletions(-)

diff --git a/app/controllers/organizations/users_controller.rb b/app/controllers/organizations/users_controller.rb
index 61c1beddfee..f70fb8ae866 100644
--- a/app/controllers/organizations/users_controller.rb
+++ b/app/controllers/organizations/users_controller.rb
@@ -2,12 +2,6 @@
 
 class Organizations::UsersController < OrganizationsController
   def index
-    @permissions = organization.organization_permissions.select(
-      :permission, :description, :enabled, :parent_permission_id, :default_for_admin, :id
-    )
-
-    @user_permissions = user_permissions
-
     respond_to do |format|
       format.html { render template: "queue/index" }
       format.json do
@@ -18,7 +12,11 @@ def index
           dvc_team: organization.type == DvcTeam.name,
           organization_users: json_administered_users(organization_users),
           membership_requests: pending_membership_requests,
-          isVhaOrg: vha_organization?
+          isVhaOrg: vha_organization?,
+          organization_permissions: organization.organization_permissions.select(
+            :permission, :description, :enabled, :parent_permission_id, :default_for_admin, :id
+          ),
+          organization_user_permissions: user_permissions
         }
       end
     end
diff --git a/client/app/queue/OrganizationPermissions.jsx b/client/app/queue/OrganizationPermissions.jsx
index 800f0ceff3c..caad13f18ae 100644
--- a/client/app/queue/OrganizationPermissions.jsx
+++ b/client/app/queue/OrganizationPermissions.jsx
@@ -67,7 +67,7 @@ const OrganizationPermissions = (props) => {
 
     let result = false;
     const parentPermission = props.permissions.find((permission) => permission.id === parentId);
-    const orgUserPermissions = props.orgnizationUserPermissions.find((x) =>
+    const orgUserPermissions = props.organizationUserPermissions.find((x) =>
       x.user_id === Number(userId)).organization_user_permissions;
 
     const checkboxInState = toggledCheckboxes.find((permission) =>
@@ -101,38 +101,36 @@ const OrganizationPermissions = (props) => {
         storedCheckbox.permissionName === permission.permission
     );
 
-    if (
-      toggledCheckboxes.find(
-        (checkboxInState) =>
-          checkboxInState.userId === user.id &&
-          checkboxInState.permissionName === permission.permission &&
-          checkboxInState.checked
-      )
-    ) {
-      isEnabled = true;
-    }
+    const isCheckboxEnabledInState = toggledCheckboxes.find(
+      (checkboxInState) =>
+        checkboxInState.userId === user.id &&
+        checkboxInState.permissionName === permission.permission &&
+        checkboxInState.checked
+    );
 
     // check if user is marked as admin to auto check the checkbox.
-    if (permission.default_for_admin && user.attributes.admin) {
-      isEnabled = true;
-    }
+    const isUserAdmin = permission.default_for_admin && user.attributes.admin;
 
-    if (typeof stateValue !== 'undefined') {
-      isEnabled = stateValue.checked;
-    }
+    const isCheckboxDefinedInState = typeof stateValue !== 'undefined';
 
     // default state that came in when page loads, used as final fallback.
-    const relevantPermissions = props.orgnizationUserPermissions.find(
-      (oup) => oup.user_id === Number(user.id)
-    ).organization_user_permissions;
+    const isCheckboxPermittedInDefaultState = () => {
+      const relevantPermissions = props.organizationUserPermissions.find(
+        (oup) => oup.user_id === Number(user.id)
+      ).organization_user_permissions;
 
-    if (
-      relevantPermissions.find(
+      return relevantPermissions.find(
         (perm) =>
           perm.organization_permission.permission === permission.permission &&
           perm.permitted
-      )
-    ) {
+      );
+    };
+
+    if (isCheckboxEnabledInState || isUserAdmin) {
+      isEnabled = true;
+    } else if (isCheckboxDefinedInState) {
+      isEnabled = stateValue.checked;
+    } else if (isCheckboxPermittedInDefaultState()) {
       isEnabled = true;
     }
 
@@ -185,17 +183,17 @@ const OrganizationPermissions = (props) => {
 
       return (parentPermissionChecked(user.id, permission.parent_permission_id) &&
       permissionAdminCheck(user, permission) &&
-       <Checkbox
-         name={`${user.id}-${permission.permission}`}
-         label={permission.description}
-         key={`${user.id}-${permission.permission}`}
-         styling={checkboxStyle}
-         onChange={modifyUserPermission(user.id, permission.permission)}
-         defaultValue={(userPermissions(user, permission.permission) ||
-           checkAdminPermission(user, permission.permission))}
-         disabled={checkAdminPermission(user, permission.permission)}
-         value={getCheckboxEnabled(user, props.orgUserData, permission)}
-       />);
+        <Checkbox
+          name={`${user.id}-${permission.permission}`}
+          label={permission.description}
+          key={`${user.id}-${permission.permission}`}
+          styling={checkboxStyle}
+          onChange={modifyUserPermission(user.id, permission.permission)}
+          defaultValue={(userPermissions(user, permission.permission) ||
+            checkAdminPermission(user, permission.permission))}
+          disabled={checkAdminPermission(user, permission.permission)}
+          value={getCheckboxEnabled(user, props.orgUserData, permission)}
+        />);
     });
   };
 
@@ -213,6 +211,5 @@ OrganizationPermissions.propTypes = {
   user: PropTypes.object,
   organization: PropTypes.string,
   orgUserData: PropTypes.object,
-  orgnizationUserPermissions: PropTypes.array
-
+  organizationUserPermissions: PropTypes.array
 };
diff --git a/client/app/queue/OrganizationUsers.jsx b/client/app/queue/OrganizationUsers.jsx
index e8bafffbc43..33cc6a3441c 100644
--- a/client/app/queue/OrganizationUsers.jsx
+++ b/client/app/queue/OrganizationUsers.jsx
@@ -55,7 +55,9 @@ export default class OrganizationUsers extends React.PureComponent {
         membershipRequests: response.body.membership_requests,
         remainingUsers: [],
         isVhaOrg: response.body.isVhaOrg,
-        loading: false
+        loading: false,
+        organizationPermissions: response.body.organization_permissions,
+        organizationUserPermissions: response.body.organization_user_permissions
       });
     }, (error) => {
       this.setState({
@@ -261,13 +263,13 @@ getFilteredUsers = () => {
 
             }
           </div>
-          {(this.props.organizationPermissions.length > 0) && <div className={['team-member-permission-toggles-container']}>
+          {(this.state.organizationPermissions?.length > 0) && <div className={['team-member-permission-toggles-container']}>
             <OrganizationPermissions
               organization={this.props.organization}
-              permissions={this.props.organizationPermissions}
+              permissions={this.state.organizationPermissions}
               user={user}
               orgUserData={this.state.organizationUsers.find((orgUser) => orgUser.id === user.id)}
-              orgnizationUserPermissions={this.props.orgnizationUserPermissions} />
+              organizationUserPermissions={this.state.organizationUserPermissions} />
           </div>}
         </div>
       </React.Fragment>;
@@ -409,7 +411,5 @@ getFilteredUsers = () => {
 }
 
 OrganizationUsers.propTypes = {
-  organization: PropTypes.string,
-  organizationPermissions: PropTypes.array,
-  orgnizationUserPermissions: PropTypes.array
+  organization: PropTypes.string
 };
diff --git a/client/app/queue/QueueApp.jsx b/client/app/queue/QueueApp.jsx
index 35bcbdb1600..bfad9c284e7 100644
--- a/client/app/queue/QueueApp.jsx
+++ b/client/app/queue/QueueApp.jsx
@@ -618,12 +618,7 @@ class QueueApp extends React.PureComponent {
     );
   };
 
-  routedOrganizationUsers = (props) => (
-    <OrganizationUsers {...props.match.params}
-      organizationPermissions={this.props.organizationPermissions}
-      orgnizationUserPermissions={this.props.userPermissions}
-    />
-  );
+  routedOrganizationUsers = (props) => <OrganizationUsers {...props.match.params} />;
 
   routedTeamManagement = (props) => <TeamManagement {...props.match.params} featureToggles={this.props.featureToggles} />;