From 3e4f31b588afcd09f23646b59bbac30e23dc5283 Mon Sep 17 00:00:00 2001
From: andreas-unleash <andreas@getunleash.ai>
Date: Mon, 12 Feb 2024 10:26:45 +0200
Subject: [PATCH] Chore: add zendesk btn to error dialog (#6187)

Adds the option for a 3rd button in the Dialogue component
Adds a button to open our zendesk support page

Closes #
[1-2024](https://linear.app/unleash/issue/1-2024/review-the-ui-error-dialog)
<img width="1677" alt="Screenshot 2024-02-09 at 11 18 20"
src="https://github.com/Unleash/unleash/assets/104830839/bf69c9c2-456f-4b83-b80e-d72f0d678331">

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
---
 .../component/common/Dialogue/Dialogue.tsx    |  7 +++++++
 frontend/src/component/layout/Error/Error.tsx | 20 +++++++++++++++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/frontend/src/component/common/Dialogue/Dialogue.tsx b/frontend/src/component/common/Dialogue/Dialogue.tsx
index a2f41468e5..5d58e137a4 100644
--- a/frontend/src/component/common/Dialogue/Dialogue.tsx
+++ b/frontend/src/component/common/Dialogue/Dialogue.tsx
@@ -55,6 +55,7 @@ interface IDialogue {
     disabledPrimaryButton?: boolean;
     formId?: string;
     permissionButton?: React.JSX.Element;
+    customButton?: React.JSX.Element;
 }
 
 export const Dialogue: React.FC<IDialogue> = ({
@@ -71,6 +72,7 @@ export const Dialogue: React.FC<IDialogue> = ({
     fullWidth = false,
     formId,
     permissionButton,
+    customButton,
 }) => {
     const handleClick = formId
         ? (e: React.SyntheticEvent) => {
@@ -136,6 +138,11 @@ export const Dialogue: React.FC<IDialogue> = ({
                             </Button>
                         }
                     />
+
+                    <ConditionallyRender
+                        condition={Boolean(customButton)}
+                        show={customButton}
+                    />
                 </StyledDialogActions>
             </StyledDialogBody>
         </StyledDialog>
diff --git a/frontend/src/component/layout/Error/Error.tsx b/frontend/src/component/layout/Error/Error.tsx
index 47b03ec83c..a26338789b 100644
--- a/frontend/src/component/layout/Error/Error.tsx
+++ b/frontend/src/component/layout/Error/Error.tsx
@@ -1,18 +1,28 @@
-import { useEffect, VFC } from 'react';
+import React, { useEffect, VFC } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Box } from '@mui/material';
+import { Box, Button } from '@mui/material';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
+import useUiConfig from '../../../hooks/api/getters/useUiConfig/useUiConfig';
 
 interface IErrorProps {
     error: Error;
 }
 
+const ZendeskButton = () => {
+    const openZendeskSupport = () => {
+        window?.open('https://getunleash.zendesk.com', '_blank');
+    };
+    return <Button onClick={openZendeskSupport}>Open a ticket</Button>;
+};
+
 // biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
 export const Error: VFC<IErrorProps> = ({ error }) => {
     const navigate = useNavigate();
     const { trackEvent } = usePlausibleTracker();
+    const { isOss } = useUiConfig();
+    const showZendeskButton = !isOss();
 
     useEffect(() => {
         const { message, stack = 'unknown' } = error;
@@ -41,6 +51,12 @@ export const Error: VFC<IErrorProps> = ({ error }) => {
                     window?.location?.reload();
                 }}
                 maxWidth='xl'
+                customButton={
+                    <ConditionallyRender
+                        condition={showZendeskButton}
+                        show={<ZendeskButton />}
+                    />
+                }
             >
                 <Box component='pre' sx={{ color: 'error.main' }}>
                     {error.message}