feat(Support status redirect): add status to support panel #42223
Conversation
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelSupport.tsx
Show resolved
Hide resolved
|
Size Change: 0 B Total Size: 3.41 MB ℹ️ View Unchanged
|
|
actually it looks slightly different from the original screenshots above, looks like this now with a button that opens the status page tab rather than opening the status page itself |
frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelSupport.tsx
Outdated
Show resolved
Hide resolved
frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelSupport.tsx
Outdated
Show resolved
Hide resolved
| <div className="flex items-start gap-2"> | ||
| <IconWarning className="text-warning w-5 h-5 shrink-0 mt-0.5" /> | ||
| <div className="flex-1"> | ||
| <p className="font-semibold mb-1">{description}</p> |
There was a problem hiding this comment.
what will the description actually include?
There was a problem hiding this comment.
is it always something based on a count of active incidents? like 1 ongoing incident in your example?
There was a problem hiding this comment.
the desc is pulled from sidePanelStatusIncidentLogic.tsx and depends on the INCIDENT_IO_STATUS_PAGE flag. when it's an incident.io status it's a count based message like the examplke
| <LemonButton | ||
| type="secondary" | ||
| size="small" | ||
| fullWidth | ||
| center | ||
| onClick={() => openSidePanel(SidePanelTab.Status)} | ||
| > | ||
| View status page | ||
| </LemonButton> |
There was a problem hiding this comment.
I'd be tempted to delete the button (it's quite big IMO) and inline the status link with a href on the current status text
…Support.tsx Co-authored-by: Luke Belton <[email protected]>
…Support.tsx Co-authored-by: Luke Belton <[email protected]>
| <div className="flex items-start gap-2"> | ||
| <IconWarning className="text-warning w-5 h-5 shrink-0 mt-0.5" /> | ||
| <div className="flex-1"> | ||
| <p className="font-semibold mb-1"> | ||
| <span | ||
| className="cursor-pointer text-link hover:underline" | ||
| onClick={() => openSidePanel(SidePanelTab.Status)} | ||
| > | ||
| {description} | ||
| </span> | ||
| </p> | ||
| <div className="text-sm"> | ||
| <p className="mb-1">We're aware of an issue that may be affecting your PostHog experience.</p> | ||
| <p className="mb-0"> | ||
| You may wish to check our{' '} | ||
| <span | ||
| className="cursor-pointer text-link hover:underline" | ||
| onClick={() => openSidePanel(SidePanelTab.Status)} | ||
| > | ||
| current status | ||
| </span>{' '} | ||
| before contacting support. | ||
| </p> | ||
| </div> |
There was a problem hiding this comment.
could also be worth exploring the LemonBanner UI component (or whatever it's called!) here
Problem
For users who are experiencing issues that are also affecting others. Makes it more obvious when users attempt to open a ticket when a status page is open.
Changes
Show a link to the status tab when there is an ongoing operational issue
When there is degraded performance:
When there is a partial or major outage:
How did you test this code?
Ran it locally and I added a PREVIEW_MODE flag that forced the alert to display even when there was no actual incident.
Changelog: (features only) Is this feature complete?
Yes