Preferences - Connect Services Page

[dr-bizz]

Similar to #817, We've done a lot of work on Preferences. To prevent a 300-plus page PR I'm pushing certain changes into main which doesn't affect the user.

This one is the largest PR I'll do. I have tried to split up the code into commits. Don't feel like you need to review this one in one sitting. I know it's going to take a while.

This PR is the connect services page in Preferences. I only made one page with this PR (Integrations page), but this page includes a bunch of GraphQL proxies and functionality.

I've built out the page, but I haven't given the user any way to navigate to this page.

Integrations page

• Creating Settings wrapper for ease.
• Creating integration context.

The Key

• No functionality just simple fetch and an accordion.

Organization

• Query to get organizations the user is connected to.
• Query to Sync with organization
• Mutation to import TntConnect file
• OAuth to allow MPDX to connect the user's Organization
• Mutation to reconnect
• Mutation to delete organisation connection.\
• Mutation to save data.
• Mutation to delete Google account connection.

Google

• Query to get Google account details, such as adding events onto Google Calendar and importing contacts.
• OAuth to allow MPDX to access the user's Google account
• Mutation to save changes
• Create Google Integration
• Sync Google Account
• Import contacts
• Mutation to delete Google account connection.

Mailchimp

• Query to get synced Mailchimp contacts
• OAuth to allow MPDX to access the user's MailChimpPrayer contacts
• Mutation to save changes
• Mutation to delete Mailchimp account connection.

Prayer Letters

• Query to get synced prayer letters
• OAuth to allow the user to log in to their Prayer Letter account and grant MPDX access to their Prayer Letters account.
• Mutation to save changes
• Mutation to delete Prayer Letters account connection.

Chalkline

• Query to send contacts to Chalkline and then redirect to Chalkline

[aws-amplify-us-east-1]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-820.d3dytjb8adxkk5.amplifyapp.com

[canac]

Pausing for now, but I'm impressed with the amount of time you must have spent on this!

[canac]

Did this need fixed?

[dr-bizz]

I left this TODO here as I wanted to test the file upload with a 100 MB file on the server.

[canac]

Is copying the mock necessary? GqlMockedProvider shouldn't modify the mock objects passed in.

[dr-bizz]

Yes, as changes we make to the PrayerLetter mock data persist onto the next test. Causing the later tests to fail.

[canac]

You're right, I missed that. What if we used getPrayerlettersAccount: [{ ...standardPrayerlettersAccount, validToken: false }] in the first test and getPrayerlettersAccount: [standardPrayerlettersAccount] in the others so that we don't have to make a copy?

[dr-bizz]

It's not just that, out of the 3 tests, 2 are testing the delete functionality, so we need to reset the data to prevent test errors.

[canac]

Maybe this should mock window.open and waitFor it to be called. I think the test is ending before the window.open line gets hit in the component because it's in a setTimeout.

[dr-bizz]

Having some trouble mocking this. Will spend some more time on this before moving on

[dr-bizz]

I had to move on as I couldn't get window.open to mock correctly

[canac]

Is it because the default timeout of waitFor is 1000ms so it times out before window.open is called? I got it to work with:

await waitFor(
  () =>
    expect(openMock).toHaveBeenCalledWith(
      'https://chalkline.org/order_mpdx/',
      '_blank',
    ),
  { timeout: 3000 },
);

[dr-bizz]

That was it! I was so close, but so far lol

[dr-bizz]

@canac I'm hoping this is the last review of this you'll have to do.

you'll see that I've fixed all of the issues you raised apart from one (mocking window.open on ChalklineAccordion.test.tsx) I spent some time trying to mock this, but had to move on.

[canac]

I have an idea of what might fix the window.open mock, which you are welcome to try or not, but I'm going to approve since that's such a minor thing. Incredible work with this! 🎆