Permission Change Logs Table/Manage User Permission Modal Fixes and Feature Additions

[AnthonyWeathers]

Description

Permission Change Log Table had a column replaced and more permissions displayed that would include ones provided by a user's role instead of just permissions added/removed that were not originally apart of their role. Added condition checks to display text in Reason column based on how a user's permissions are being changed, whether by the managing their permissions or changing their role. Also, made individual's name be regular text when the user's role is changed/updated, which would be highlight in blue in the reason column. An individual's name would be bold when their permissions was modified, and the text would be bold red if permissions were modified for a Role.

In Manage User Permissions Modal, added a info modal next to Reset To Default that would list the selected user's role, and permissions that would be reset if Reset to Default is used. Added star icon that appears on same line of a permission that was changed from the default provided by the user's role, red for a deleted default permission and green for an added permission. A paragraph element that pops up when hovering over star icon, for quick understanding of what the star means. Fixed category add/delete button so it adds or delete all sub permissions of a category, or add all remaining unadded permissions of a category with a gray add button. For the reminder modal to save changes, on screen size of 395px or less, fixed styling of the buttons and its div element so they're same size and have consistent padding.

In User Profile, reset user's removedDefaultPermissions to empty and defaultPermissions to the permissions of their new role. Then added a call to the endpoint that saves permission changes and creates a user change log to be shown in the Permission Change Log Table. Will display "See default {role} role permissions" if there is no direct changes to a user's permission if they had no permissions to be changed, or their new role matches it (Example: if they had "Edit Header Message" added and "Edit Team" removed as a Manager, then was changed to Volunteer role, then their change log would show "See default Volunteer role permissions" under Permissions Added since Volunteer role does not have "Edit Team" by default, but would display "Edit Header Message" under Permissions Removed, as it's a permission Volunteers would not have by default). The text would prioritize listing the permissions being modified before displaying the generic text.

Related PRS (if any):

This backend PR is related to the PR#1447 backend PR.
To test this frontend PR properly you need to checkout the PR#1447 backend PR.
…

How to test:

1. check into current branch
2. do npm install and ... to run this PR locally
3. Clear site data/cache

##Permissions Management
4. log as owner user (to view Permission Change Logs Table), or can log as admin to test Manage User Permissions changes
5. go to dashboard→ Other Links → Permissions Management→…
6. verify if features work, screenshots will serve as reference for most fixes/features

##Testing Role Change
7. go to another user's profile to test (preferably a test account of yours, or you can use Anthony Test/Test2 if you need a test account)→Change the user's role then save it→ Return to Permissions Management
8. Verify there is a new change log for the user's role change (The text will depend if it was solely a role change, or display changed permissions if you added or removed permissions the new role has differently)

Screenshots or videos of changes:

(Owner Only)

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	b79b9ba
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69700632c58cf100082429fd
😎 Deploy Preview	https://deploy-preview-3600--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[TaariqMansurie]

Tested everything locally, the permission log table looks clean with proper widths, the new info modal works as expected, star indicators are helpful and show the right tooltips, and the category buttons behave correctly. Also checked on small screen sizes, styling looks good. All set from my side!

I have attached the following screenshots:

[nathanah]

I think there's room for some small optimizations, but mostly looks good.

[nathanah]

Suggested change

	const getAllPermissions = permissions => {
	if (!permissions) {
	return;
	}
	const permissionList = [];
	// eslint-disable-next-line no-restricted-syntax
	for (const permission of permissions) {
	if (permission?.subperms) {
	permissionList.push(...getAllPermissions(permission.subperms));
	} else {
	permissionList.push(permission);
	}
	}
	// eslint-disable-next-line consistent-return
	return permissionList;
	};
	const handleModalOpen = () => {
	if (userPermissions?.length > 0 || userRemovedDefaultPermissions?.length > 0) {
	const getPermissions = permissionsList.map(permission => permission.subperms).flat();
	const getAllSubIndividualPermissions = getAllPermissions(getPermissions);
	const changedPermission = new Set();
	const matchingPermissions = getAllSubIndividualPermissions.filter(permission => {
	if (
	// Removes duplicate display of See All Users in Dashboard and Leaderboard and Edit Team 4-Digit Codes
	changedPermission.has(permission.key) ||
	!(
	userPermissions.includes(permission.key) ||
	userRemovedDefaultPermissions.includes(permission.key)
	)
	)
	return false;
	changedPermission.add(permission.key);
	return true;
	});
	const permissionNames = matchingPermissions.map(permission => permission.label);
	import { permissionLabelKeyMappingObj, getAllPermissionKeys} from './PermissionsConst';
	const handleModalOpen = () => {
	if (userPermissions?.length > 0 || userRemovedDefaultPermissions?.length > 0) {
	const matchingPermissions = [...new Set(getAllPermissionKeys().filter(key =>
	userPermissions.includes(key) ||
	userRemovedDefaultPermissions.includes(key)
	))];
	const permissionNames = matchingPermissions.map(key => permissionLabelKeyMappingObj[key]);

This does the same thing but more condensed, right?

[AnthonyWeathers]

I tested it a bit and it does seem to accomplish the same task, so I applied it in the new push, thanks for pointing that out, I hadn't thought to take a look at those.

[nathanah]

Suggested change

	<button
	className={`changed-permission ${
	changedPermission(permission)
	? checkChangePermission(permission)
	? 'green'
	: 'red'
	: 'white'
	}`}
	aria-label={changedPermission(permission) ? 'Modified Permission' : ''}
	disabled
	type="button"
	>
	{' '}
	★{' '}
	</button>
	(changedPermission(permission) && <button
	className={`changed-permission ${
	checkChangePermission(permission)
	? 'green'
	: 'red'
	}`}
	aria-label={changedPermission(permission) ? 'Modified Permission' : ''}
	disabled
	type="button"
	>
	{' '}
	★{' '}
	</button>)

Could do a conditional render instead of white. From your screenshots, it looks like white blends in with the background on light mode, but it wouldn't on dark mode. The conditional render might mess up spacing/alignment stuff though, so up to you. Doesn't matter too much.

[AnthonyWeathers]

For this one, I decided to rework the styling some more, so I think the star icons should be fine now in both of the current setup for light and dark mode, though do let me know if it doesn't.

[nathanah]

Looks great. Thank you

[Venk-rgb]

Rendered the UI to test. There is just one observations:

• The reset to default tooltip is not working consistently even after clicking the info icon.

Other than that, everything else looks good.

[AnthonyWeathers]

Rendered the UI to test. There is just one observations:

• The reset to default tooltip is not working consistently even after clicking the info icon.

Other than that, everything else looks good.

Apologizes for being late, was working on other stuff and delegating some time to review this. I re-entered my branch, and will likely need to do a git merge due to styling now being out of order since I last checked. But the reset to default tooltip seems to be working fine, if you have the time, can you point out perhaps which permissions you're attempting to change with my Anthony Volunteer account, where the reset to default doesn't work properly with?

[sircarmart]

Everything looks good when I test using the google chrome browser.

Buttons seem to break using firefox browser. This problem does not occur on latest development branch.

The navbar timer buttons are also larger in your branch compared to development.

[AnthonyWeathers]

Everything looks good when I test using the google chrome browser.

Buttons seem to break using firefox browser. This problem does not occur on latest development branch.

The navbar timer buttons are also larger in your branch compared to development.

Hi there, super late, I've been focused on a different task but taking a look at the branch, and after merging with like roughly today's version of development, I've tested on 4 browsers but unsure if I may have missed something but otherwise it looks fine now, here is a full screenshot of the view on the browsers with me listing the browser name. Let me know if it's fine for your side as well.

Google:

Firefox:

Opera GX:

Microsoft Edge:

[aseemdeshmukh]

Navigated to /permissionsmanagement and logged in with the admin account.

• The permissions work well, along with the pop up window that displays to save the changes
• The star color changes to green or red depending on if the permission is added or removed

[sohamsharma08]

I tested the changes locally and confirmed that the permission log table renders correctly, the new info modal functions as intended, star indicators display accurate tooltips, and category buttons work as expected. I also verified the styling on smaller screens and in dark mode and everything looks consistent. Relevant screenshots are attached for reference.

[hemanthvenkat]

PR3600.mp4

i have tested given cases, all working as expected.

[aseemdeshmukh]

Navigated to /permissionsmanagement and logged in with the admin account.

1. The permissions work well, along with the pop up window that displays to save the changes
2. The star color changes to green or red depending on if the permission is added or removed

[Anusha-Gali]

Hi Anthony,

I have reviewed your PR locally and the permissions added reflect exactly the changes done.

[sonarqubecloud]

Quality Gate passed

Issues
26 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud