feat(Admin System): Admin Panel Search Page and Edit Privileges #996

the-good-boy · 2023-06-13T12:37:23Z

Overview:

This PR adds the functionality which allows an Administrator to search for users and then change their privileges.

Components Added:

Privileges Dropdown: A privileges dropdown has been added in the NavBar, which will eventually contain options corresponding to the special privileges that a user has. Currently only the Admin Panel can be accessed using this dropdown. Ideally, this Admin Panel can be accessed only by users who have the Administrator priv. We'll later use middlewares to fix these.
Admin Panel Search Page: As the name implies, it allows us to search for users and makes use of two sub-components named: AdminPanelSearchField and AdminPanelSearchResults. The functionality of this is largely inspired from the Search Page, which we already have.
Privs Edit Modal: A modal which allows us to change privileges.
Privilege Badges: This component displays the titles of the privileges in the form of badges.

Icons:

I have taken some liberty and added some icons to differentiate users depending on the sets of privileges they have. They are used in the PrivEditModal and AdminPanelSearchResults components and brief outline of what they represent is as follows:

White shield: This is used to indicate a user with no privileges.
Grey shield: This is used to indicate a user with the Entity-Editor privilege (i.e., a normal editor without any special privilege)
Orange shield: This is used to indicate a user with some special privileges, but not the admin priv.
Orange shield with a tick: This is used to indicate that the user has the Admin priv.

anshg1214

I also found a couple of linting errors, try fixing those too.

src/client/components/pages/parts/privs-edit-modal.js

src/common/helpers/privileges-utils.ts

src/server/routes/editor.js

the-good-boy · 2023-06-23T14:11:28Z

I also found a couple of linting errors, try fixing those too.

About this, can you point me to a line where a linting error is arising? I have tried running linters on my local machine and all seems good.

anshg1214

Just a small change. Otherwise good to go

src/common/helpers/privileges-utils.ts

anshg1214 · 2023-06-24T05:50:12Z

I also found a couple of linting errors, try fixing those too.

About this, can you point me to a line where a linting error is arising? I have tried running linters on my local machine and all seems good.

It seems that they got fixed. Also there are a few linting warnings, if you can fix them as well.

…nz-site into adminPanel

the-good-boy · 2023-06-24T06:36:42Z

I also found a couple of linting errors, try fixing those too.

About this, can you point me to a line where a linting error is arising? I have tried running linters on my local machine and all seems good.

It seems that they got fixed. Also there are a few linting warnings, if you can fix them as well.

I was running npm run lint-errors. Hence, I didn't see the warnings. Thanks for pointing this out. I've now fixed the warnings.

anshg1214

🎉

MonkeyDo

Great work so far ! You've got a pretty clean interface, working smoothly, and the code is nice and readable. Well done !
I've deployed the PR to test.bookbrainz.org for testing.

I'm very late to the party, but I have some code suggestions below. None of them are super pressing, but I'd love to see them implemented in a follow-up PR.

Looking forward to seeing the continuation !

src/client/components/pages/admin-panel-search.tsx

MonkeyDo · 2023-06-26T11:26:04Z

src/client/components/pages/parts/admin-panel-search-results.tsx

+						</div>
+					)
+				}
+				<h3 style={{color: '#754e37'}}>


CSS classes instead of inlined styles, please :)
It's easier to reason about the CSS and keep it all synchronized when it is all in one place instead of scattered across the codebase.

Indeed. I have created a class named search-results-heading in this PR. Since this AdminPanelSearchResults component is largely inspired from the SearchResults component, I have made this change in that file as well. It was a small enough change to not warrant another PR, and so I took the liberty of including this change too.

MonkeyDo · 2023-06-26T11:30:38Z

src/client/components/pages/parts/admin-panel-search-results.tsx

+				>
+					<thead>
+						<tr>
+							<th className="col-md-5">Name</th>


Using bootstrap class names here does not work on Safari (we just fixed that same issue across the codebase in #987, it's fresh on my mind :) ).

You can use the width property (native to the <th> element) to the same effect. The value should be width="42%" which is what col-md-5 does, although I have found that the following values work well:

src/client/components/pages/parts/pager.js

MonkeyDo · 2023-06-26T11:45:43Z

src/client/components/pages/parts/pager.js

+	size: PropTypes.number,
+	updateResultsTrigger: PropTypes.number.isRequired


Same comment as above.

MonkeyDo · 2023-06-26T11:47:51Z

src/client/components/pages/parts/privs-edit-modal.js

+		}
+	}
+
+	/* eslint-disable no-bitwise */


You know, there's rarely a good use for disabling linting rules, but if I ever need a good example this will be the perfect one ! :D

MonkeyDo · 2023-06-26T11:50:41Z

src/client/components/pages/parts/privs-edit-modal.js

+				<Modal.Header closeButton>
+					<Modal.Title>
+						<img height="20" src={getPrivilegeShieldIcon(this.state.privs)}/> {' '}
+						<a href={link}>


I wonder if this should be a link to the user's profile. It might be clearer to have this be just text, and have a separate "visit profile" link in the modal body (perhaps opening in a new tab).
What do you think?

For now, I have removed the link to the user's profile in this follow up PR. I will, however, be sure to take care of this "Visit Profile" functionality in the next iteration of the PrivsModal.

MonkeyDo · 2023-06-26T11:52:13Z

src/client/containers/layout.js

+		const privilegesDropdownTitle = (
+			<span>
+				<FontAwesomeIcon icon={faShieldHalved}/>
+				{' Privileges'}


This doesn't need to be quoted and in a JSX block, it can just be the text content

MonkeyDo · 2023-06-26T11:52:38Z

src/client/containers/layout.js

+				>
+					<NavDropdown.Item href="/admin-panel">
+						<FontAwesomeIcon icon={faUserGear}/>
+						{' Admin Panel'}


Same as above, this can be just the text

MonkeyDo · 2023-06-26T12:08:40Z

src/client/components/pages/parts/admin-panel-search-results.tsx

+							<img height="18" src={getPrivilegeShieldIcon(result.privs)}/> {' '}
+							<FontAwesomeIcon icon={faPencilAlt}/>


I wonder about this; it seems to me that the shield icon only repeats the information we already have in the privileges column.

I think we only need an "Edit" button for now (in the future maybe "Block"/"Delete" buttons as well), for which I'd rather have a text button that the very small icon which is harder to click on.

What do you think?
Here it is with text, and some button classes (btn-sm for size and btn-success for style)

The shield icons were never really for any kind of additional information. They were just an aesthetic choice, one which I dont mind rescinding. One other reason I clubbed them with the pencil icon was so I can increase the hitbox of the click.

I did give some thoughts to how the edit button should look like and here's why I ditched this simple Edit button. The main reason is because I think these buttons, when iterated in a table look really out of place to me, mostly because these types of buttons have mostly been used throughout the site as singular action initiators(i made that up), basically you find them mostly in isolation (as a 'Submit' button in a page, or a 'Create a collection' button, etc). I find that they look a bit odd when iterated in a table:

This also reminds me that I've been in a similar dilemma before, in this old PR where I used a question mark as a clickable link. I do agree that it does not work very good as a call to action and I also agree that we can definitely look for a better alternative in that case too, but now you know why I went for it instead of a button.

I do realise that this can all be a very subjective discussion, and it is quite possible that I may be reading too much into this. I am okay with changing it to an 'Edit' button as suggested for now, but I think we should later go through some more ideas on what kind of buttons we'll use in a table.

The shield icons were never really for any kind of additional information.

I think they look neat, but in this case they should be used in another place if they repeat info from the previous column. Maybe they would be a good indicator in front of user names on the website? Possibly only showing admins and privileged users, and not showing the empty shield icon in front of every user's name.

For this table, if you were to add it, I would add it in front of the user name instead of the user icon (which currently doesn't add any info). Might be helpful when quickly reading through the table.

I get your thought process about the action column; the repeated buttons are perhaps not ideal, but IMO they are more usable that just the icon (as you mention the hitbox is small) even if the icons look better. The issue will compound once we have more actions.
I think it'll end up looking fine with multiple buttons, each having a different color will help prevent misclicks (when compared to standalone icons).
If you want to jazz them up, I have two suggestion:

we have outline style buttons which could reduce the repeating color block issue (i.e. btn-outline-success class etc. for -info, -danger, -warning etc.)

you can add the icon in the button too

feat(Admin System): Edit privileges

e9309b1

the-good-boy changed the base branch from master to administration-system June 13, 2023 12:38

fix grey shield icon

6b38f1d

MonkeyDo self-requested a review June 13, 2023 17:28

the-good-boy marked this pull request as ready for review June 13, 2023 17:52

anshg1214 requested changes Jun 17, 2023

View reviewed changes

src/client/components/pages/parts/privs-edit-modal.js Outdated Show resolved Hide resolved

src/common/helpers/privileges-utils.ts Outdated Show resolved Hide resolved

src/server/routes/editor.js Outdated Show resolved Hide resolved

update state of results list after privilege change

f3c7f7e

the-good-boy requested review from anshg1214 June 18, 2023 13:28

the-good-boy and others added 3 commits June 21, 2023 17:03

pull a new copy of results when privs updated

fe32c17

privilege-utils: store privileges information in objects

af41850

Merge branch 'administration-system' into adminPanel

a2d1f48

anshg1214 requested changes Jun 24, 2023

View reviewed changes

src/common/helpers/privileges-utils.ts Outdated Show resolved Hide resolved

the-good-boy added 2 commits June 24, 2023 11:52

fix typo and lint-warnings

89044cd

Merge branch 'adminPanel' of https://github.com/the-good-boy/bookbrai…

b38d114

…nz-site into adminPanel

anshg1214 approved these changes Jun 24, 2023

View reviewed changes

anshg1214 merged commit c55fcb6 into metabrainz:administration-system Jun 24, 2023
4 checks passed

MonkeyDo reviewed Jun 26, 2023

View reviewed changes

the-good-boy mentioned this pull request Jun 27, 2023

feat(Admin System): Add edit buttons instead of icons and use refs instead of updateResultsTrigger #998

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Admin System): Admin Panel Search Page and Edit Privileges #996

feat(Admin System): Admin Panel Search Page and Edit Privileges #996

the-good-boy commented Jun 13, 2023 •

edited

Loading

anshg1214 left a comment

the-good-boy commented Jun 23, 2023

anshg1214 left a comment

anshg1214 commented Jun 24, 2023

the-good-boy commented Jun 24, 2023

anshg1214 left a comment

MonkeyDo left a comment

MonkeyDo Jun 26, 2023

the-good-boy Jun 27, 2023

MonkeyDo Jun 26, 2023

MonkeyDo Jun 26, 2023

MonkeyDo Jun 26, 2023

MonkeyDo Jun 26, 2023

the-good-boy Jun 27, 2023

MonkeyDo Jun 26, 2023

MonkeyDo Jun 26, 2023

MonkeyDo Jun 26, 2023

the-good-boy Jun 27, 2023 •

edited

Loading

MonkeyDo Jun 27, 2023 •

edited

Loading

		size: PropTypes.number,
		updateResultsTrigger: PropTypes.number.isRequired

		<img height="18" src={getPrivilegeShieldIcon(result.privs)}/> {' '}
		<FontAwesomeIcon icon={faPencilAlt}/>

feat(Admin System): Admin Panel Search Page and Edit Privileges #996

feat(Admin System): Admin Panel Search Page and Edit Privileges #996

Conversation

the-good-boy commented Jun 13, 2023 • edited Loading

Overview:

Components Added:

Icons:

anshg1214 left a comment

Choose a reason for hiding this comment

the-good-boy commented Jun 23, 2023

anshg1214 left a comment

Choose a reason for hiding this comment

anshg1214 commented Jun 24, 2023

the-good-boy commented Jun 24, 2023

anshg1214 left a comment

Choose a reason for hiding this comment

MonkeyDo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

the-good-boy Jun 27, 2023 • edited Loading

Choose a reason for hiding this comment

MonkeyDo Jun 27, 2023 • edited Loading

Choose a reason for hiding this comment

the-good-boy commented Jun 13, 2023 •

edited

Loading

the-good-boy Jun 27, 2023 •

edited

Loading

MonkeyDo Jun 27, 2023 •

edited

Loading