Add more info to daemon disconnected view

1 files changed, 75 insertions, 16 deletions

diff --git a/gui/src/renderer/components/Launch.tsx b/gui/src/renderer/components/Launch.tsx
index 3f86e4d19c..05bf6aeda6 100644
--- a/gui/src/renderer/components/Launch.tsx
+++ b/gui/src/renderer/components/Launch.tsx
@@ -4,15 +4,20 @@ import styled from 'styled-components';
 import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
+import { transitions, useHistory } from '../lib/history';
+import { RoutePath } from '../lib/routes';
+import { useBoolean } from '../lib/utilityHooks';
 import { useSelector } from '../redux/store';
 import * as AppButton from './AppButton';
 import { measurements, tinyText } from './common-styles';
 import ErrorView from './ErrorView';
 import { Footer } from './Layout';
+import { ModalAlert, ModalMessage, ModalMessageList } from './Modal';
+import { ModalAlertType } from './Modal';
 
 export default function Launch() {
   const daemonAllowed = useSelector((state) => state.userInterface.daemonAllowed);
-  const footer = <SettingsFooter show={daemonAllowed === false} />;
+  const footer = daemonAllowed === false ? <MacOsPermissionFooter /> : <DefaultFooter />;
 
   return (
     <ErrorView footer={footer}>
@@ -21,14 +26,13 @@ export default function Launch() {
   );
 }
 
-const StyledFooter = styled(Footer)<{ $show: boolean }>((props) => ({
+const StyledFooter = styled(Footer)({
   backgroundColor: colors.blue,
   padding: `0 14px ${measurements.viewMargin}`,
-  opacity: props.$show ? 1 : 0,
   transition: 'opacity 250ms ease-in-out',
-}));
+});
 
-const StyledSystemSettingsContainer = styled.div({
+const StyledFooterInner = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 1,
@@ -38,16 +42,12 @@ const StyledSystemSettingsContainer = styled.div({
   padding: '16px',
 });
 
-const StyledLaunchFooterPrompt = styled.span(tinyText, {
+const StyledFooterMessage = styled.span(tinyText, {
   color: colors.white,
   margin: `8px 0 ${measurements.buttonVerticalMargin} 0`,
 });
 
-interface ISettingsFooterProps {
-  show: boolean;
-}
-
-function SettingsFooter(props: ISettingsFooterProps) {
+function MacOsPermissionFooter() {
   const { showLaunchDaemonSettings } = useAppContext();
 
   const openSettings = useCallback(async () => {
@@ -55,18 +55,77 @@ function SettingsFooter(props: ISettingsFooterProps) {
   }, []);
 
   return (
-    <StyledFooter $show={props.show}>
-      <StyledSystemSettingsContainer>
-        <StyledLaunchFooterPrompt>
+    <StyledFooter>
+      <StyledFooterInner>
+        <StyledFooterMessage>
           {messages.pgettext(
             'launch-view',
             'Permission for the Mullvad VPN service has been revoked. Please go to System Settings and allow Mullvad VPN under the “Allow in the Background” setting.',
           )}
-        </StyledLaunchFooterPrompt>
+        </StyledFooterMessage>
         <AppButton.BlueButton onClick={openSettings}>
           {messages.gettext('Go to System Settings')}
         </AppButton.BlueButton>
-      </StyledSystemSettingsContainer>
+      </StyledFooterInner>
     </StyledFooter>
   );
 }
+
+function DefaultFooter() {
+  const history = useHistory();
+  const [dialogVisible, showDialog, hideDialog] = useBoolean();
+
+  const openSendProblemReport = useCallback(() => {
+    hideDialog();
+    history.push(RoutePath.problemReport, { transition: transitions.show });
+  }, [hideDialog, history.push]);
+
+  return (
+    <>
+      <StyledFooter>
+        <StyledFooterInner>
+          <StyledFooterMessage>
+            {messages.pgettext(
+              'launch-view',
+              'Unable to contact the Mullvad system service, your connection might be unsecure. Please troubleshoot or send a problem report by clicking the Learn more button.',
+            )}
+          </StyledFooterMessage>
+          <AppButton.BlueButton onClick={showDialog}>
+            {messages.gettext('Learn more')}
+          </AppButton.BlueButton>
+        </StyledFooterInner>
+      </StyledFooter>
+      <ModalAlert
+        isOpen={dialogVisible}
+        type={ModalAlertType.info}
+        close={hideDialog}
+        buttons={[
+          <AppButton.GreenButton key="problem-report" onClick={openSendProblemReport}>
+            {messages.pgettext('launch-view', 'Send problem report')}
+          </AppButton.GreenButton>,
+          <AppButton.BlueButton key="back" onClick={hideDialog}>
+            {messages.gettext('Back')}
+          </AppButton.BlueButton>,
+        ]}>
+        <ModalMessage>
+          {messages.pgettext(
+            'launch-view',
+            'The system service component of the app hasn’t started or can’t be contacted. The system service is responsible for the security, kill switch, and the VPN tunnel. To troubleshoot please try:',
+          )}
+        </ModalMessage>
+        <ModalMessage>
+          <ModalMessageList>
+            <li>{messages.pgettext('launch-view', 'Restarting your computer.')}</li>
+            <li>{messages.pgettext('launch-view', 'Reinstalling the app.')}</li>
+          </ModalMessageList>
+        </ModalMessage>
+        <ModalMessage>
+          {messages.pgettext(
+            'launch-view',
+            'If these steps do not work please send a problem report.',
+          )}
+        </ModalMessage>
+      </ModalAlert>
+    </>
+  );
+}