Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: ability to edit user settings in bulk #597

Merged
merged 5 commits into from
Jan 25, 2021

Conversation

hmnd
Copy link
Contributor

@hmnd hmnd commented Jan 7, 2021

Description

Allow editing multiple users' settings at the same time in Users table.

Screenshot (if UI related)

35rf1Eii
tSfIds3l

Todos

  • Sucessfully builds yarn build
  • Translation Keys yarn i18n:extract

Issues Fixed or Closed by this PR

@hmnd
Copy link
Contributor Author

hmnd commented Jan 8, 2021

Btw not sure whether it's alright to change key names in the localization files due to refactoring a component out, so let me know if that's wrong.

@hmnd hmnd force-pushed the feature/batch-update-users branch from deab360 to 5f633b2 Compare January 8, 2021 09:07
@sct
Copy link
Owner

sct commented Jan 8, 2021

Btw not sure whether it's alright to change key names in the localization files due to refactoring a component out, so let me know if that's wrong.

It should be fine but weblate tends to get have issues with merge conflicts when this happens. Maybe just modify only the en.json file and let the translators migrate the translations over.

@sct
Copy link
Owner

sct commented Jan 8, 2021

@hmnd This PR is really fantastic! I have a few comments I will leave in the review but I also wanted to point out a design choice that I don't necessarily agree with.

Screen.Recording.2021-01-08.at.21.51.03.mov

I really don't like how the whole table shifts here when clicking on this button. It can easily cause misclicks? And the effect is really jarring. What about moving the button to the right side of the table above the normal actions? You can even get away I think with using buttonSize="sm" there to make it fit pretty nicely!

Screen Shot 2021-01-08 at 21 54 10

What do you think?

@@ -47,6 +47,49 @@ router.get<{ id: string }>('/:id', async (req, res, next) => {
}
});

const canMakePermissionsChange = (permissions: number, user?: User) =>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The name of this function is a little confusing. canMakePermissionsChange means that this should return true if the user can make a change, but it's actually the opposite. If we reverse the evaluations in the function to the opposite, the method name will make sense and then we can use it by checking if (!canMakePermissionChange) which would be a lot easier to understand.

@@ -175,6 +256,20 @@ const UserList: React.FC = () => {
<Table.TBody>
{data?.map((user) => (
<tr key={`user-list-${user.id}`}>
<Table.TD>
{user.id !== currentUser?.id && (
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think about not allowing modification of user id 1 here either? (And in the logic to select all users)

@hmnd
Copy link
Contributor Author

hmnd commented Jan 8, 2021

I really don't like how the whole table shifts here when clicking on this button. It can easily cause misclicks? And the effect is really jarring. What about moving the button to the right side of the table above the normal actions? You can even get away I think with using buttonSize="sm" there to make it fit pretty nicely!

Totally agree. I couldn't think of a better place to put it that wouldn't move everything, but I think your idea is great!

@hmnd
Copy link
Contributor Author

hmnd commented Jan 8, 2021

@sct Hmm how about one of these maybe? Neither causes any shift in the table.
I don't really love how the button looks in the table header on the right. Imo it doesn't align well with the bigger buttons below it and isn't noticeable unless you scroll over to the side on screen widths < ~1400px.
image
image

@Magikarplvl4
Copy link

@hmnd Maybe "Bulk Edit" instead of only "edit"?

@sct
Copy link
Owner

sct commented Jan 9, 2021

Screen Shot 2021-01-09 at 19 03 16

I think it looks fine on the right? It's also where all the other edit buttons are. Yes, at lower resolutions that area gets cut off but the expected place for the edit buttons remains the same.

Also, disabling the button instead of hiding it entirely makes sure the user knows its there even when they don't have anything checked:
Screen Shot 2021-01-09 at 20 09 59

@sct
Copy link
Owner

sct commented Jan 9, 2021

I do like @Magikarplvl4's idea of having it say Bulk Edit:
Screen Shot 2021-01-09 at 20 11 48

@hmnd
Copy link
Contributor Author

hmnd commented Jan 16, 2021

@sct Yeah I think that works well! The button disappearing and reappearing was what put me off, but it works much better disabled like that. Will make those changes soon. :)

@ankarhem
Copy link
Contributor

Are you still working on this?

@hmnd
Copy link
Contributor Author

hmnd commented Jan 24, 2021

@ankarhem yup, working on rebasing now :)

@hmnd hmnd force-pushed the feature/batch-update-users branch from 5f633b2 to f98f2eb Compare January 24, 2021 07:13
@hmnd
Copy link
Contributor Author

hmnd commented Jan 24, 2021

@sct should be ready for your review again! Sorry for the wait.

@sct sct merged commit 4b0241c into sct:develop Jan 25, 2021
Repository owner deleted a comment from allcontributors bot Jan 25, 2021
@github-actions
Copy link

🎉 This PR is included in version 1.18.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Bulk User Permisson Edit Button
4 participants