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

M3-5988: Add SMTP restriction support ticket form #8636

Merged

Conversation

mjac0bs
Copy link
Contributor

@mjac0bs mjac0bs commented Dec 6, 2022

Description 📝

What does this PR do?

Adds form fields specific to lifting SMTP restrictions to a support ticket. This is part of efforts to improve the user experience and reduce the amount of back-and-forth between customers and Support when handling requests to remove these restrictions.

Notes:

  • You may notice when testing various types of support tickets that the title and description fields are prepopulated with data that does not belong to that support ticket, but was from a previous support ticket, likely because form values are cached in localstorage and not cleared. This issue seems to exist in production prior to these changes and is beyond the scope of this ticket, but could be addressed in another.
  • Will create an additional ticket to transition SupportTicketDrawer to Formik for improved form state management.

Preview 📷

Trigger and fill out the support ticket:

Screen.Recording.2022-12-08.at.2.19.08.PM.mov

Submitted support ticket:
Screen Shot 2022-12-08 at 2 22 00 PM

How to test 🧪

What are the steps to reproduce the issue or verify the changes?

  1. Use the dev environment for the following to avoid generating test support tickets in production:
  2. Use an account that has been created since or temporarily modified to have an account creation date of on/after 11-30-22 (the date we activated the SMTP restriction notices for new accounts).
  3. Navigate to the linode details page for a linode and select the network tab.
  4. Click on the "open a support ticket" link in the SMTP restriction notice.
  5. Observe that you've been redirected to the Support page with an open support dialog that has form fields specific to SMTP.
  6. Observe that the form does not submit until a user enters all required fields.
  7. Fill out all required fields and submit the ticket.
  8. Observe that the user is redirected to the ticket details page. Check that ticket details look correct and readable.
  9. Check that Support can view the ticket and that details look correct and readable.
  10. Confirm that a user can access the form dialog for a general support ticket and a support ticket with entities, and the SMTP form does not display. (Turning on MSW and navigating to the Volumes Landing page to click the volume with "Contact Support" in its status is a quick way.)

How do I run relevant unit or e2e tests?

Units tests:

yarn test SMTPRestrictionText
yarn test Support

e2e:

yarn cy:run -s "cypress/e2e/helpAndSupport/open-support-ticket.spec.ts"

@mjac0bs mjac0bs self-assigned this Dec 6, 2022
@mjac0bs mjac0bs changed the title [WIP] Add SMTP restriction support ticket form M3-5988: Add SMTP restriction support ticket form Dec 7, 2022
@mjac0bs mjac0bs force-pushed the M3-5988-SMTP-support-ticket-create-form branch from 4be6f19 to ca92272 Compare December 8, 2022 21:17
@mjac0bs mjac0bs marked this pull request as ready for review December 8, 2022 22:31
Copy link
Contributor

@hana-akamai hana-akamai left a comment

Choose a reason for hiding this comment

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

SMTP form info seems to display in the desc when clicking on Open New Ticket in the Support Ticket landing page (non-mocks) 🤔

image

Should we pass in the Linode entity as well so that it shows up in the Regarding column in the Support ticket landing table and in the details page?

image

image

@jdamore-linode
Copy link
Contributor

In addition to what @hana-linode mentioned about the Open a Support Ticket ticket form being pre-populated, I don't seem to be able to get the "Open Ticket" submit button to become enabled, seemingly preventing me from opening any non-SMTP related tickets.

Reproduce:

  1. Navigate to /support/tickets
  2. Click "Open New Ticket"
  3. Observe form is pre-populated with SMTP content
  4. Observe that "Open Ticket" button is disabled
  5. Mess around with the form content, observe that "Open Ticket" button remains disabled

(This is also reproduced in the open-support-ticket.spec.ts e2e tests)

Copy link
Contributor

@cpathipa cpathipa left a comment

Choose a reason for hiding this comment

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

Great start @mjac0bs I have couple minor suggestions to simplify setting helper text based on ticketType. Other than that over all LGTM!

I agree with @hana-linode feedback on defining outside of the component

@mjac0bs
Copy link
Contributor Author

mjac0bs commented Dec 9, 2022

@hana-linode and @jdamore-linode

Latest commit should address issue with inability to submit non-SMTP support tickets - thanks for catching that @jdamore-linode. Can you confirm it's working now?

I also added in the entity, so it should display now when an SMTP ticket is submitted as @hana-linode suggested.

Still working on the saved description... need to track down why that value isn't being reset when the drawer is closed.

Comment on lines 244 to 247
React.useEffect(() => {
setDescription(formatDescription(smtpFields));
}, [smtpFields]);

Copy link
Contributor

Choose a reason for hiding this comment

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

Looks like this might be the culprit for why smtp fields are displaying in the desc for normal support tickets. If I comment this out and clear my application storage, the desc is no longer filled.

Copy link
Contributor

Choose a reason for hiding this comment

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

Maybe only format the description on submission and not on every change would be a fix?

Copy link
Contributor Author

@mjac0bs mjac0bs Dec 10, 2022

Choose a reason for hiding this comment

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

Okay, so there is different behavior for the dialog based on how the user cancels it, as documented in this PR:

  • If the user hits the Cancel button, the SMTP desc is not visible in the desc of normal support tickets. (Expected behavior).
  • If the user hits the 'X', ESC, or clicks outside of the dialog, the contents of the form are saved in local storage rather than cleared. Because the close method didn't know anything about the new SMTP ticketType, it was saving that description to local storage and then repopulating it for a normal ticket's description.

Agreed, it would be best to only format the custom fields -> description onSubmit rather than on each update to the SMTP fields… but since onSubmit's call to createSupportTicket needs a description param, we're expecting to use description from state. If we format and attempt a final state update with setDescription on submission, the update may not happen before the ticket is created. Always open to suggestions or ideas I've missed, but the latest commit conditionally checking ticketType in the close function should address this bug by clearing description for SMTP tickets.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Disregard the last bit of above ^^ Formatting of the description now only occurs on submission, with an adjustment to the logic that toggles the boolean controlling the submit button from disabled to enabled.

I left the conditional checking ticketType in close() in order to always clear the title of the SMTP ticket when the form is closed out. Note: there is still an edge case when a form title can repopulate in a new support ticket's title field if the user was first redirected to support/tickets with any support ticket having a prefilled title. This behavior exists in prod and predates the SMTP form addition.

Copy link
Contributor

@jdamore-linode jdamore-linode left a comment

Choose a reason for hiding this comment

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

Ha! I was just about to post about an issue I was seeing with the ticket contents but I think your latest commit fixed it.

Confirmed that the submit button is fixed and that non-SMTP support tickets can be submitted, confirmed that the SMTP ticket template is no longer pre-populated for non-SMTP tickets, and confirmed that the E2E support test is now passing.

Nicely done @mjac0bs!

@mjac0bs
Copy link
Contributor Author

mjac0bs commented Dec 12, 2022

Ha! I was just about to post about an issue I was seeing with the ticket contents but I think your latest commit fixed it.

@jdamore-linode Yeah, there was an edge case that either needed another conditional checking ticketType in the useEffect hook with smtpFields... or I could go the better route and make the changes needed to format description only once, onSubmit. Second option implemented.

Thanks for confirming that behavior and E2E is looking good to you!

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

Successfully merging this pull request may close these issues.

4 participants