feat: add additional fields to the supportModal #17513

MarconLP · 2023-09-18T22:13:01Z

Problem

There are a lot of instances where we have to ask users to provide additional information (context, links, etc..). This will hopefully reduce that.

Changes

remove debug code

How did you test this code?

I created a bunch of zendesk tickets

posthog-bot · 2023-09-18T22:23:57Z

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

chromium: 0 added, 1 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2023-09-19T10:37:23Z

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

chromium: 0 added, 1 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

tiina303 · 2023-09-19T14:05:29Z

frontend/src/lib/components/Support/SupportModal.tsx

+    const {
+        setFilesToUpload: setFilesToUpload2,
+        filesToUpload: filesToUpload2,
+        uploading: uploading2,
+    } = useUploadFiles({
+        onUpload: (url, fileName) => {
+            setSendSupportRequestValue('message2', sendSupportRequest.message + `\n\nAttachment "${fileName}": ${url}`)
+        },
+        onError: (detail) => {
+            lemonToast.error(`Error uploading image: ${detail}`)
+        },
+    })
+
+    const {
+        setFilesToUpload: setFilesToUpload3,
+        filesToUpload: filesToUpload3,
+        uploading: uploading3,
+    } = useUploadFiles({
+        onUpload: (url, fileName) => {
+            setSendSupportRequestValue('message3', sendSupportRequest.message + `\n\nAttachment "${fileName}": ${url}`)
+        },
+        onError: (detail) => {
+            lemonToast.error(`Error uploading image: ${detail}`)
+        },
+    })
+


can't you already upload several files, why this copy paste and let's not have a hardcoded limit of 3

this is the important part: ..setSendSupportRequestValue('message3'..
so that the uploaded file will be added into the correct field

tiina303 · 2023-09-19T14:06:39Z

frontend/src/lib/components/Support/supportLogic.ts

                            message +
+                            (message2 ? '\n\n' + message2 : '') +
+                            (message3 ? '\n\n' + message3 : '') +


stuff like message2, message3 is generally not easy to read / extend and hence best to be avoided

tiina303 · 2023-09-19T14:09:32Z

frontend/src/lib/components/Support/SupportModal.tsx

+// topics that will ask for additional information
+export const EXTENDED_SUPPORT_TOPICS: string[] = [
+    'app_performance',
+    'analytics',
+    'data_management',
+    'apps',
+    'data_integrity',
+    'ingestion',
+]


let's not do this, we're definitely going to forget adding items here and it doesn't really make sense to users either

how are we going to decide if this topic is going to ask for more information or not?

nothing is topic specific -> it's the support kind that determines what we ask, if you want something specific you can add a special support kind for it.

tiina303 · 2023-09-19T14:16:26Z

frontend/src/lib/components/Support/SupportModal.tsx

+const SUPPORT_TICKET_KIND_TO_PROMPT_EXTENDED_1: Record<SupportTicketKind, string> = {
+    bug: "What's the bug?",
+    feedback: 'Is your feedback related to a problem? (make sure to include links if relevant)',
+    support: 'What can we help you with? (make sure to include links if relevant)',
+}
+const SUPPORT_TICKET_KIND_TO_PROMPT_EXTENDED_2: Record<SupportTicketKind, string> = {
+    bug: 'How to reproduce?',
+    feedback: "Describe the solution you'd like?",
+    support: 'What is happening?',
+}
+const SUPPORT_TICKET_KIND_TO_PROMPT_EXTENDED_3: Record<SupportTicketKind, string> = {
+    bug: 'Additional context? (make sure to include links if relevant)',
+    feedback: "Describe alternatives you've considered.",
+    support: 'What do you expect to happen?',
+}


This is hard to read/extend imho.
You'd more likely want to create a type for this sth like (think about this a bit first, not sure if I provided the best approach

SupportTicketFormKind: inputFields: Field[] ...

then have:

const BUG_TICKET: SupportTicketFormKind(inputFields = [ Field(prompt = "Description of the Bug", placeholder = "make sure to include links and attachments if relevant", ticketKey = 'description'), Field(prompt = "How to reproduce?", ...) ]

^ that way we could easily add / remove fields from the form in the future.
If needed the file upload thing could be a field, but I'd prefer it to be within.
I'd encourage you to keep it the same for all the types not depending on the area, if needed we can create a new type called 'MinimalTicket' or whatever.

I like this idea

Twixes

Hmm, I see what kinds of problems this is supposed to solve. On the other hand, the complexity of the form becomes intimidating with so many large fields. On a 14-inch MacBook viewport, scrolling is now necessary:

It's fair to add some clarifying guidance to the existing placeholders, but the changes in this PR add a lot of friction to the support modal experience. I suggest we reach for more restrained guidance first.

MarconLP · 2023-09-22T14:24:26Z

maybe adding a defaultValue that looks like the github template would be better then?

for reference 13inch mac:

Twixes · 2023-09-22T14:37:52Z

That's definitely more lightweight. Though we don't need the whole template – the big advantage of Zendesk tickets vs. GitHub issues is that we already can see the frontend thanks to session replay, and in the same vein, we don't necessarily need links from the user. I think the only thing we don't have that's easy to forget is reproduction steps. But to highlight that, perhaps a note below the text area, or a different text area placeholder would do? Ofc I may be missing what classes of lacking info there are exactly, so happy to take in any context

MarconLP · 2023-09-26T10:55:14Z

we already can see the frontend thanks to session replay, and in the same vein, we don't necessarily need links from the user

It's possible but more time consuming compared to just include the links

posthog-bot · 2023-10-04T07:31:10Z

This PR hasn't seen activity in a week! Should it be merged, closed, or further worked on? If you want to keep it open, post a comment or remove the stale label – otherwise this will be closed in another week.

posthog-bot · 2023-10-12T07:31:23Z

This PR hasn't seen activity in a week! Should it be merged, closed, or further worked on? If you want to keep it open, post a comment or remove the stale label – otherwise this will be closed in another week.

MarconLP · 2023-10-13T20:30:40Z

Updated it to simply provide a message template

2023-10-13.at.22.13.32.mp4

MarconLP · 2023-10-16T08:36:55Z

things to do:

Also consider unauthenticated fields
do not change message if already modified

MarconLP · 2023-10-17T18:47:34Z

updated behavior

posthog-bot · 2023-10-25T07:31:23Z

This PR hasn't seen activity in a week! Should it be merged, closed, or further worked on? If you want to keep it open, post a comment or remove the stale label – otherwise this will be closed in another week.

posthog-bot · 2023-11-02T07:31:07Z

This PR hasn't seen activity in a week! Should it be merged, closed, or further worked on? If you want to keep it open, post a comment or remove the stale label – otherwise this will be closed in another week.

posthog-bot · 2023-11-10T07:31:10Z

This PR hasn't seen activity in a week! Should it be merged, closed, or further worked on? If you want to keep it open, post a comment or remove the stale label – otherwise this will be closed in another week.

posthog-bot · 2023-11-20T07:31:08Z

This PR hasn't seen activity in a week! Should it be merged, closed, or further worked on? If you want to keep it open, post a comment or remove the stale label – otherwise this will be closed in another week.

posthog-bot · 2023-11-28T07:31:02Z

This PR hasn't seen activity in a week! Should it be merged, closed, or further worked on? If you want to keep it open, post a comment or remove the stale label – otherwise this will be closed in another week.

posthog-bot · 2023-12-05T07:31:13Z

This PR was closed due to lack of activity. Feel free to reopen if it's still relevant.

MarconLP force-pushed the require-more-data-in-supportModal branch from f1980c8 to 8f8935d Compare September 18, 2023 22:15

MarconLP marked this pull request as ready for review September 19, 2023 05:58

MarconLP requested a review from tiina303 September 19, 2023 05:59

tiina303 suggested changes Sep 19, 2023

View reviewed changes

MarconLP mentioned this pull request Sep 20, 2023

Support flow re-design mega-issue #17424

Open

13 tasks

Twixes requested changes Sep 21, 2023

View reviewed changes

MarconLP force-pushed the require-more-data-in-supportModal branch from 0e30c3e to 460d000 Compare September 26, 2023 10:46

posthog-bot added the stale label Oct 4, 2023

MarconLP removed the stale label Oct 4, 2023

posthog-bot added the stale label Oct 12, 2023

MarconLP removed the stale label Oct 12, 2023

provide default support ticket message

c11e054

MarconLP force-pushed the require-more-data-in-supportModal branch from 460d000 to c11e054 Compare October 13, 2023 20:26

MarconLP added 2 commits October 13, 2023 22:27

remove debug code

d6680fb

fix cannot access handleReportTypeChange before initialization error

fc332ec

MarconLP changed the title ~~add additional fields to the supportModal~~ feat: add additional fields to the supportModal Oct 13, 2023

MarconLP added 2 commits October 17, 2023 18:08

set the template when the isOpen boolean changes

74f899d

do not overwrite a message when already modified

7895172

MarconLP requested review from tiina303 and Twixes October 17, 2023 18:48

posthog-bot added the stale label Oct 25, 2023

MarconLP removed the stale label Oct 25, 2023

posthog-bot added the stale label Nov 2, 2023

MarconLP removed the stale label Nov 2, 2023

posthog-bot added the stale label Nov 10, 2023

MarconLP removed the stale label Nov 10, 2023

tiina303 removed their request for review November 10, 2023 12:43

posthog-bot added the stale label Nov 20, 2023

MarconLP removed the stale label Nov 20, 2023

posthog-bot added the stale label Nov 28, 2023

posthog-bot closed this Dec 5, 2023

This was referenced Mar 18, 2024

I Shadowed Support Heroes And Here's What I Learned PostHog/meta#189

Closed

Request: Improving the support modal #21073

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add additional fields to the supportModal #17513

feat: add additional fields to the supportModal #17513

MarconLP commented Sep 18, 2023 •

edited

Loading

posthog-bot commented Sep 18, 2023

posthog-bot commented Sep 19, 2023

tiina303 Sep 19, 2023

MarconLP Sep 20, 2023

tiina303 Sep 19, 2023

tiina303 Sep 19, 2023

MarconLP Sep 20, 2023

tiina303 Sep 20, 2023

tiina303 Sep 19, 2023 •

edited

Loading

MarconLP Sep 20, 2023 •

edited

Loading

Twixes left a comment

MarconLP commented Sep 22, 2023

Twixes commented Sep 22, 2023

MarconLP commented Sep 26, 2023

posthog-bot commented Oct 4, 2023

posthog-bot commented Oct 12, 2023

MarconLP commented Oct 13, 2023

MarconLP commented Oct 16, 2023 •

edited

Loading

MarconLP commented Oct 17, 2023

posthog-bot commented Oct 25, 2023

posthog-bot commented Nov 2, 2023

posthog-bot commented Nov 10, 2023

posthog-bot commented Nov 20, 2023

posthog-bot commented Nov 28, 2023

posthog-bot commented Dec 5, 2023

feat: add additional fields to the supportModal #17513

feat: add additional fields to the supportModal #17513

Conversation

MarconLP commented Sep 18, 2023 • edited Loading

Problem

Changes

How did you test this code?

posthog-bot commented Sep 18, 2023

📸 UI snapshots have been updated

posthog-bot commented Sep 19, 2023

📸 UI snapshots have been updated

tiina303 Sep 19, 2023

Choose a reason for hiding this comment

MarconLP Sep 20, 2023

Choose a reason for hiding this comment

tiina303 Sep 19, 2023

Choose a reason for hiding this comment

tiina303 Sep 19, 2023

Choose a reason for hiding this comment

MarconLP Sep 20, 2023

Choose a reason for hiding this comment

tiina303 Sep 20, 2023

Choose a reason for hiding this comment

tiina303 Sep 19, 2023 • edited Loading

Choose a reason for hiding this comment

MarconLP Sep 20, 2023 • edited Loading

Choose a reason for hiding this comment

Twixes left a comment

Choose a reason for hiding this comment

MarconLP commented Sep 22, 2023

Twixes commented Sep 22, 2023

MarconLP commented Sep 26, 2023

posthog-bot commented Oct 4, 2023

posthog-bot commented Oct 12, 2023

MarconLP commented Oct 13, 2023

MarconLP commented Oct 16, 2023 • edited Loading

MarconLP commented Oct 17, 2023

posthog-bot commented Oct 25, 2023

posthog-bot commented Nov 2, 2023

posthog-bot commented Nov 10, 2023

posthog-bot commented Nov 20, 2023

posthog-bot commented Nov 28, 2023

posthog-bot commented Dec 5, 2023

MarconLP commented Sep 18, 2023 •

edited

Loading

tiina303 Sep 19, 2023 •

edited

Loading

MarconLP Sep 20, 2023 •

edited

Loading

MarconLP commented Oct 16, 2023 •

edited

Loading