change: [M3-8290] - Improve experience of closing out of Support Ticket Dialog #10703

mjac0bs · 2024-07-23T16:42:23Z

Description 📝

Currently, when a user closes (but not cancels) out of the support ticket dialog, their ticket title and description are saved to local storage. No other field values are intentionally saved.

To provide a consistent experience, this PR saves all of the general support ticket form in local storage if a user closes out the dialog and repopulates them upon reopening the dialog. Currently, there is no way to close out of and then reopen a special support ticket type (smtp or accountLimit), since only a general support ticket can be created with the Open New Ticket button.

Additionally, we tag the Cancel and Close buttons with analytics to see which users are making more use of. The discrepancy in behavior between Cancel (clear form) and Close (store and reload data) behavior is intentional, but may be odd/unexpected, and we can consider improving the UX in the future.

Changes 🔄

Updates local storage to store additional fields for general support tickets.
Tags the Cancel and X buttons with analytics event.
Fixes a edge case bug where opening a general support ticket after starting, but closing out of an account limit support ticket (not submitting) would pre-populate the account limit support ticket title, instead of clearing that value for the new general ticket.

Preview 📷

Before	After
prod.mov	this.branch.mov

How to test 🧪

Prerequisites

(How to setup test environment)

Please test this on your dev account so we don't bother Customer Support with real tickets.
Turn the Support Ticket Severity flag on in devtools.

Reproduction steps

(How to reproduce the issue, if applicable)

Go to cloud.linode.com/support/tickets, fill out all fields of the support ticket form, including severity and an entity selection, and then hit the close (x) button.
Click the "Open New Ticket" button and observe that although the title and description are restored from data saved in local storage, the other values have been cleared.

Verification steps

(How to verify changes)
Please verify:

All general support ticket form values are stored in local storage when the user closes out of the dialog
These values are then repopulated when the dialog is reopened
There are no regressions in the Cancel behavior (all form fields are cleared) when this button is clicked
There are no crashes – we've fixed the issue where creating (and successfully submitting) one support ticket and then attempting to create another would crash the app
Analytics events are tagged on the close and cancel buttons
There are no regressions when viewing and then closing out of the form (or actually creating) support tickets of various types (smtp, accountLimit, general).

Important

Please let me know if you see any crashes or white screens. In working with this PR, I would occasionally see the screen go white and a console failure about loading the splashscreen. I couldn't reliably replicate it and assume it was related to local storage updates while I was making changes, but want to be sure it's not still happening now.

As an Author I have considered 🤔

Check all that apply

mjac0bs · 2024-07-23T20:28:14Z

packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx

    }
  };

  const handleClose = () => {
-    props.onClose();
-    if (ticketType === 'smtp') {
+    if (ticketType !== 'general') {


Fixed a small bug mentioned in the PR description. For accountLimit tickets, the drawer wasn't been reset properly when it was closed out.

Videos

Bug:

accountLimit.bug.mov

Fixed:

accountLimit.fix.mov

… in support ticket dialog

jaalah-akamai

✅ Storage defaults and data are being stored properly
✅ Storage is reset when cancelled
✅ DIdn't notice any regressions in the experience after submitting multiple tickets
✅ Code changes look good to me

mjac0bs · 2024-07-24T14:41:54Z

The unit test failure on BillingActivityPanel.test.tsx appears to repro consistently on this branch; the test passes in develop. 🤔 Looking into this...

hana-akamai · 2024-07-24T20:49:40Z

@mjac0bs according to git bisect, the bad commit started a78ec2286aeddd7d4320d386a9ba734b023f13c6

mjac0bs · 2024-07-24T22:00:35Z

@mjac0bs according to git bisect, the bad commit started a78ec2286aeddd7d4320d386a9ba734b023f13c6

Yeah, a78ec22 was where the real work was done for this PR.

I don't understand why any of it is affecting the billing access panel test, though. These changes should be unrelated. yarn cy:run -s "cypress/e2e/core/billing/*" all pass. @AzureLatte - any ideas on what's tripping up yarn test BillingActivityPanel where the test can't seem to find mock invoices in the table?

jaalah-akamai · 2024-07-25T00:57:12Z

packages/manager/src/utilities/storage.ts

-  supportText: {
-    get: () => getStorage(SUPPORT, { description: '', title: '' }),
+  supportTicket: {
+    get: () => getStorage(SUPPORT, supportTicketStorageDefaults),


@mjac0bs I've narrowed it down to this line 🔍

This may be influencing the local storage behavior or interaction in ways that were not present before, potentially causing the test to fail.

Directly passing in the object from supportTicketStorageDefaults seems to fix things, but still figuring out what's going on here...

Ok this is definitely (99% confidence 😅) due to how imports are handled in the test environment. When you import supportTicketStorageDefaults from another file, it might not be available or properly mocked during the test execution, causing the test to fail. My suggestion would be to move the definition of supportTicketStorageDefaults and export it from storage.ts.

cc @jdamore-linode

My suggestion would be to move the definition of supportTicketStorageDefaults and export it from storage.ts

Done in 6c63947. I ran the unit tests repeatedly locally and didn't see any more unexpected failures or flake. Thank you for the investigation 🙏🏼 and good find!! 🔍 🙌🏼

Good to learn about this too! Thank you

github-actions · 2024-07-25T04:46:01Z

Coverage Report: ❌
Base Coverage: 82.51%
Current Coverage: 82.5%

mjac0bs self-assigned this Jul 23, 2024

mjac0bs commented Jul 23, 2024

View reviewed changes

mjac0bs marked this pull request as ready for review July 23, 2024 20:28

mjac0bs requested a review from a team as a code owner July 23, 2024 20:28

mjac0bs requested review from jaalah-akamai and AzureLatte and removed request for a team July 23, 2024 20:28

mjac0bs added 8 commits July 23, 2024 13:31

Save work

cf935fb

Save more work

7d08622

Use default values for storage text

a78ec22

Add comment

bad12d1

Add analytics event for modal close

ea36b16

Clean up

e376951

More clean up

cbdb323

Added changeset: Save and restore more form fields from local storage…

9f4cb29

… in support ticket dialog

mjac0bs force-pushed the M3-8290-improve-support-ticket-dialog-close branch from ae346b8 to 9f4cb29 Compare July 23, 2024 20:32

mjac0bs requested a review from hana-akamai July 23, 2024 20:37

mjac0bs added the Ready for Review label Jul 23, 2024

jaalah-akamai approved these changes Jul 24, 2024

View reviewed changes

Merge branch 'develop' into M3-8290-improve-support-ticket-dialog-close

1754637

jaalah-akamai reviewed Jul 25, 2024

View reviewed changes

Move storage defaults to storage.ts to fix test failure

6c63947

mjac0bs added the Add'tl Approval Needed Waiting on another approval! label Jul 25, 2024

hana-akamai approved these changes Jul 25, 2024

View reviewed changes

hana-akamai added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! labels Jul 25, 2024

hana-akamai removed the Ready for Review label Jul 25, 2024

mjac0bs merged commit 56fed23 into linode:develop Jul 25, 2024
19 checks passed

This was referenced Aug 1, 2024

Release v1.125.0 - release → staging #10741

Merged

Release v1.125.0 - staging → master #10748

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

change: [M3-8290] - Improve experience of closing out of Support Ticket Dialog #10703

change: [M3-8290] - Improve experience of closing out of Support Ticket Dialog #10703

mjac0bs commented Jul 23, 2024 •

edited

Loading

mjac0bs Jul 23, 2024

jaalah-akamai left a comment

mjac0bs commented Jul 24, 2024

hana-akamai commented Jul 24, 2024 •

edited

Loading

mjac0bs commented Jul 24, 2024

jaalah-akamai Jul 25, 2024

jaalah-akamai Jul 25, 2024

jaalah-akamai Jul 25, 2024

jaalah-akamai Jul 25, 2024

jaalah-akamai Jul 25, 2024

mjac0bs Jul 25, 2024

AzureLatte Jul 25, 2024

github-actions bot commented Jul 25, 2024

change: [M3-8290] - Improve experience of closing out of Support Ticket Dialog #10703

change: [M3-8290] - Improve experience of closing out of Support Ticket Dialog #10703

Conversation

mjac0bs commented Jul 23, 2024 • edited Loading

Description 📝

Changes 🔄

Preview 📷

How to test 🧪

Prerequisites

Reproduction steps

Verification steps

As an Author I have considered 🤔

Choose a reason for hiding this comment

jaalah-akamai left a comment

Choose a reason for hiding this comment

mjac0bs commented Jul 24, 2024

hana-akamai commented Jul 24, 2024 • edited Loading

mjac0bs commented Jul 24, 2024

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

github-actions bot commented Jul 25, 2024

mjac0bs commented Jul 23, 2024 •

edited

Loading

hana-akamai commented Jul 24, 2024 •

edited

Loading