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.

Sign up for GitHub

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

Jump to bottom

GraphQL-powered Accounts page #276

Merged
merged 38 commits into from
Jun 10, 2020
Merged

GraphQL-powered Accounts page #276

merged 38 commits into from
Jun 10, 2020

Conversation

loan-laux
Copy link
Contributor

@loan-laux loan-laux commented May 2, 2020 •
edited
Loading

Resolves #230, resolves #283
Impact: critical
Type: feature|bugfix|performance|style|refactor

Test with:

All api-plugin-accounts PRs are available together on the outgrow-2.0.0-next branch.

Issue

The Accounts page was half-working and was running on pure Meteor. It needed to be ported over to GraphQL, with all the functionalities working and possibly some requested additions.

Solution

This PR proposes a new Accounts page that relies only on GraphQL and uses the new Catalyst design language. It revives some features that weren't working anymore for a long time, for example the ability to create new groups and to edit the permissions of existing ones. It also enables users to bulk-edit permissions for users.

With no specific directions for the design, I kind of freestyled my way into it. This is what it looks like:

Screen Shot 2020-05-02 at 23 56 50

Screen Shot 2020-05-02 at 23 57 00

Screen Shot 2020-05-02 at 23 57 14

Screen Shot 2020-05-03 at 00 04 16

Screen Shot 2020-05-03 at 01 30 16

Screen Shot 2020-05-08 at 15 39 36

Breaking changes

None.

Testing

  1. Go to the Accounts page with an owner account.
  2. Try to invite a new staff member.
  3. Sign up as this staff member on another, incognito tab.
  4. Back to your owner account, create a new group.
  5. Assign this new group to your new staff member.
  6. Confirm in the Accounts MongoDB collection that the changes take effect.
  7. Try to edit the name of this new group.
  8. Invite another user and try to bulk-edit group attributions.

@loan-laux
refactor: add withAccounts and withGroups HOCs
43ca389 
Signed-off-by: Loan Laux <[email protected]>
@loan-laux
feat: use loading spinner when necessary
02a9a1b 
Signed-off-by: Loan Laux <[email protected]>
@loan-laux
fix: wire fields to table
0a22a8e 
Signed-off-by: Loan Laux <[email protected]>
@loan-laux
chore: remove console.log usage
2c884e9 
Signed-off-by: Loan Laux <[email protected]>
@loan-laux
fix: use correct IDs for inviteShopMember input
5687672 
Signed-off-by: Loan Laux <[email protected]>
@loan-laux
fix: use correct IDs in accounts dashboard handlers
e674374 
Signed-off-by: Loan Laux <[email protected]>
@loan-laux
feat: use viewer query instead of MiniMongo
4399204 
Signed-off-by: Loan Laux <[email protected]>
@loan-laux
feat: fetch roles with GraphQL
786c34b 
Signed-off-by: Loan Laux <[email protected]>
@loan-laux
refactor: use hooks and stateless components for cards and tables
17ce629 
Signed-off-by: Loan Laux <[email protected]>
@loan-laux
feat: refactor getUserAvatar helper and use it in accounts table
9623c72 
Signed-off-by: Loan Laux <[email protected]>
@loan-laux
chore: set isFilterable to false on account tables
88599de 
Signed-off-by: Loan Laux <[email protected]>
@loan-laux
feat: introduce group selector modal
e8f4d38 
Signed-off-by: Loan Laux <[email protected]>
@loan-laux
fix: populate groups in GroupSelectorDialog
f0e9775 
Signed-off-by: Loan Laux <[email protected]>
@loan-laux
refactor: remove useless files
0381ea8 
Signed-off-by: Loan Laux <[email protected]>
@loan-laux
refactor: remove unused imports
fdf8f7f 
Signed-off-by: Loan Laux <[email protected]>
@loan-laux
feat: add group creation modal
a3d1359 
Signed-off-by: Loan Laux <[email protected]>
@loan-laux
fix: finish and clean up CreateGroupDialog
dd5f1fd 
Signed-off-by: Loan Laux <[email protected]>
@loan-laux
feat: add InviteShopMemberDialog
5eda819 
Signed-off-by: Loan Laux <[email protected]>
@loan-laux
fix: update schemas
ffda5a7 
Signed-off-by: Loan Laux <[email protected]>
@loan-laux
feat: add tabs for new views
d6d154a 
Signed-off-by: Loan Laux <[email protected]>
@loan-laux
chore: use startCase on group titles
c99219c 
Signed-off-by: Loan Laux <[email protected]>
@loan-laux
chore: add margins between elements
ccb074e 
Signed-off-by: Loan Laux <[email protected]>
@loan-laux
feat: make group cards expandable
b0c4a6d 
Signed-off-by: Loan Laux <[email protected]>
@loan-laux
feat: add edit group capabilities
60c9a17 
Signed-off-by: Loan Laux <[email protected]>
@loan-laux
chore: remove useless code
09461cf 
Signed-off-by: Loan Laux <[email protected]>
@loan-laux loan-laux changed the title Outgrow accounts page graphql GraphQL-powered Accounts page May 2, 2020
@loan-laux loan-laux mentioned this pull request May 2, 2020
Closed
@loan-laux loan-laux marked this pull request as ready for review May 8, 2020 13:51
@loan-laux loan-laux mentioned this pull request May 29, 2020
Closed
1 task
@loan-laux
Copy link
Contributor Author

@focusaurus @mikemurray — I can't assign reviewers here, but if you'd like to look at this and the PRs it depends on, that would be very much appreciated!

@rosshadden rosshadden self-requested a review June 8, 2020 16:52
rosshadden
rosshadden approved these changes Jun 8, 2020
View reviewed changes
Copy link
Contributor

@rosshadden rosshadden left a comment

Choose a reason for hiding this comment

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

Seems to run as expected. Thank you!

willopez
willopez requested changes Jun 9, 2020
View reviewed changes
Copy link
Member

@willopez willopez left a comment

Choose a reason for hiding this comment

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

Great job! some small typos, other than that looks good to me.

imports/plugins/core/accounts/client/components/Customers.js Outdated Show resolved Hide resolved
imports/plugins/core/accounts/client/components/Customers.js Outdated Show resolved Hide resolved
imports/plugins/core/accounts/client/components/GroupCards.js Outdated Show resolved Hide resolved
imports/plugins/core/accounts/client/components/GroupCards.js Outdated Show resolved Hide resolved
imports/plugins/core/accounts/client/components/Invitations.js Outdated Show resolved Hide resolved
imports/plugins/core/accounts/client/components/Invitations.js Outdated Show resolved Hide resolved
@loan-laux
refactor: fix JSDoc
e98bcce 
Signed-off-by: Loan Laux <[email protected]>
@loan-laux
Copy link
Contributor Author

Thanks @willopez! And sorry about the typos. I tend to duplicate files when working on pages that look alike... Which results in me forgetting to update the JSDoc.

@rosshadden rosshadden requested a review from willopez June 9, 2020 15:21
@focusaurus focusaurus removed their request for review June 9, 2020 15:42
willopez
willopez requested changes Jun 9, 2020
View reviewed changes
Copy link
Member

@willopez willopez left a comment

Choose a reason for hiding this comment

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

Small change needed. See comments in code.

imports/plugins/core/accounts/client/components/CreateOrEditGroupDialog.js Outdated Show resolved Hide resolved
imports/plugins/core/accounts/client/components/InviteShopMemberDialog.js Show resolved Hide resolved
willopez
willopez requested changes Jun 9, 2020
View reviewed changes
Copy link
Member

@willopez willopez left a comment

Choose a reason for hiding this comment

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

I've added suggestions on a couple of fixes. Also, there seems to be a missing translation string for the select seen below:
missing_translation

imports/plugins/core/accounts/client/components/GroupCards.js Show resolved Hide resolved
imports/plugins/core/accounts/client/components/CreateOrEditGroupDialog.js Outdated Show resolved Hide resolved
imports/plugins/core/accounts/client/components/CreateOrEditGroupDialog.js Outdated Show resolved Hide resolved
imports/plugins/core/accounts/client/components/GroupCardHeader.js Outdated Show resolved Hide resolved
imports/plugins/core/accounts/client/components/CreateOrEditGroupDialog.js Outdated Show resolved Hide resolved
imports/plugins/core/accounts/client/components/CreateOrEditGroupDialog.js Outdated Show resolved Hide resolved
@loan-laux
Copy link
Contributor Author

Thanks again for the feedback @willopez! The selects inside of the modals are working great now. I've also PR'd the missing i18n label right here.

@rosshadden rosshadden requested a review from willopez June 10, 2020 14:57
willopez
willopez approved these changes Jun 10, 2020
View reviewed changes
Copy link
Member

@willopez willopez left a comment

Choose a reason for hiding this comment

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

LGTM

@willopez willopez merged commit a83c97b into reactioncommerce:trunk Jun 10, 2020
@rosshadden rosshadden mentioned this pull request Jun 17, 2020
Merged
@ghost ghost mentioned this pull request Sep 4, 2020
Closed
3 tasks
johntronolone pushed a commit to johntronolone/reaction-admin that referenced this pull request Feb 15, 2022
@willopez @johntronolone
Merge pull request reactioncommerce#276 from outgrow/outgrow-accounts…
42422b7 
…-page-graphql

GraphQL-powered Accounts page
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@willopez willopez willopez approved these changes

@rosshadden rosshadden rosshadden approved these changes

@mikemurray mikemurray Awaiting requested review from mikemurray

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

New Shop manager not visible in list of accounts Create Accounts dashboard UI using the GraphQL API
3 participants
@loan-laux @willopez @rosshadden