Change way of displaying edge error in tray view

new-ui/src/pages/compact/CompactLocationsPage/CompactLocationsPage.tsx

@@ -16,17 +16,15 @@ import {
   getLocationsQueryOptions,
   getTunnelsQueryOptions,
 } from '../../../shared/rust-api/query';
-import { useAppStore, useTrayConnectionError } from '../../../shared/store/useAppStore';
+import { useAppStore } from '../../../shared/store/useAppStore';
 import { ThemeSpacing } from '../../../shared/types';
 import { isPresent } from '../../../shared/utils/isPresent';
 import { CompactPage } from '../CompactPage/CompactPage';
 import { InstanceSwitcher } from './components/InstanceSwitcher';
-import { TrayConnectionError } from './components/TrayConnectionError';
 
 export const CompactLocationsPage = () => {
   const { viewSelection: selection, setViewSelection } = useAppData();
   const openLocation = useAppStore((s) => s.expandedLocation);
-  const connectionError = useTrayConnectionError((s) => s.visible);
 
   const routeData = useLoaderData({ from: '/compact/' });
 
@@ -78,37 +76,33 @@ export const CompactLocationsPage = () => {
       }}
     >
       <WindowHeader variant="compact" />
-      {connectionError ? (
-        <TrayConnectionError />
-      ) : (
-        <ScrollContainer>
-          <div className="main-content">
-            <InstanceSwitcher />
-            <div className="locations">
-              {displayedLocations.map((location) => {
-                const isOpen =
-                  location.id === openLocation || displayedLocations.length === 1;
-                return (
-                  <LocationCard
-                    instance={instanceInfo}
-                    disableOpen={displayedLocations.length <= 1}
-                    location={location}
-                    key={`${location.connection_type}-${location.id}`}
-                    isOpen={isOpen}
-                    onOpen={() => {
-                      if (isOpen) {
-                        useAppStore.setState({ expandedLocation: null });
-                      } else {
-                        useAppStore.setState({ expandedLocation: location.id });
-                      }
-                    }}
-                  />
-                );
-              })}
-            </div>
+      <ScrollContainer>
+        <div className="main-content">
+          <InstanceSwitcher />
+          <div className="locations">
+            {displayedLocations.map((location) => {
+              const isOpen =
+                location.id === openLocation || displayedLocations.length === 1;
+              return (
+                <LocationCard
+                  instance={instanceInfo}
+                  disableOpen={displayedLocations.length <= 1}
+                  location={location}
+                  key={`${location.connection_type}-${location.id}`}
+                  isOpen={isOpen}
+                  onOpen={() => {
+                    if (isOpen) {
+                      useAppStore.setState({ expandedLocation: null });
+                    } else {
+                      useAppStore.setState({ expandedLocation: location.id });
+                    }
+                  }}
+                />
+              );
+            })}
           </div>
-        </ScrollContainer>
-      )}
+        </div>
+      </ScrollContainer>
       <div className="compact-footer">
         <Divider spacing={ThemeSpacing.Md} />
         <Controls>

new-ui/src/shared/components/LocationCard/LocationCard.tsx

@@ -12,6 +12,7 @@ import { LocationCardProvider, useLocationCardContext } from './context/context'
 import { LocationCardViews, type LocationCardViewsValue } from './context/types';
 import { ConnectedView } from './views/ConnectedView/ConnectedView';
 import { DefaultView } from './views/DefaultView/DefaultView';
+import { LocationCardConnectionErrorView } from './views/LocationCardConnectionErrorView/LocationCardConnectionErrorView';
 import { LocationCardMfaEmailView } from './views/LocationCardMfaEmailView/LocationCardMfaEmailView';
 import { LocationCardMfaMobileView } from './views/LocationCardMfaMobileView/LocationCardMfaMobileView';
 import { LocationCardMfaOidcView } from './views/LocationCardMfaOidcView/LocationCardMfaOidcView';
@@ -37,6 +38,7 @@ const views: Record<LocationCardViewsValue, ReactNode> = {
   [LocationCardViews.Connecting]: null,
   [LocationCardViews.Connected]: <ConnectedView />,
   [LocationCardViews.PostureCheckFail]: <LocationCardPostureCheckFailView />,
+  [LocationCardViews.ConnectionError]: <LocationCardConnectionErrorView />,
 };
 
 interface InnerProps {

new-ui/src/shared/components/LocationCard/context/types.ts

@@ -8,6 +8,7 @@ export const LocationCardViews = {
   Connecting: 'connecting',
   Connected: 'connected',
   PostureCheckFail: 'posture-check-fail',
+  ConnectionError: 'connection-error',
 } as const;
 
 export type LocationCardViewsValue =

new-ui/src/shared/components/LocationCard/hooks/useMfaOidcConnect.ts

@@ -4,7 +4,6 @@ import { error } from '@tauri-apps/plugin-log';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { api } from '../../../rust-api/api';
 import { getInstancesQueryOptions } from '../../../rust-api/query';
-import { useTrayConnectionError } from '../../../store/useAppStore';
 import {
   CLIENT_MFA_ENDPOINT,
   isEdgeUnavailable,
@@ -147,7 +146,7 @@ export const useMfaOidcConnect = () => {
         return;
       }
       if (isEdgeUnavailable(e)) {
-        useTrayConnectionError.setState({ visible: true });
+        setView(LocationCardViews.ConnectionError);
         return;
       }
       setStartError(

new-ui/src/shared/components/LocationCard/views/LocationCardConnectionErrorView/LocationCardConnectionErrorView.tsx

@@ -0,0 +1,33 @@
+import './style.scss';
+import { ThemeSpacing } from '../../../../types';
+import { Button } from '../../../Button/Button';
+import { ButtonVariant } from '../../../Button/types';
+import { Divider } from '../../../Divider/Divider';
+import { Icon, IconKind } from '../../../Icon';
+import { SizedBox } from '../../../SizedBox/SizedBox';
+import { useLocationCardContext } from '../../context/context';
+import { LocationCardViews } from '../../context/types';
+
+export const LocationCardConnectionErrorView = () => {
+  const { setView } = useLocationCardContext();
+
+  return (
+    <div className="location-card-connection-error-view">
+      <Divider spacing={ThemeSpacing.Md} />
+      <SizedBox height={ThemeSpacing.Xl} />
+      <Icon icon={IconKind.ServiceUnavailable} size={24} />
+      <SizedBox height={ThemeSpacing.Xl} />
+      <p className="description">
+        One or more external services are unavailable or unreachable. This may be caused
+        by a network issue or a temporary service outage. Please try again later.
+      </p>
+      <SizedBox height={ThemeSpacing.Xl} />
+      <Button
+        text="Back"
+        variant={ButtonVariant.Primary}
+        onClick={() => setView(LocationCardViews.Default)}
+      />
+      <SizedBox height={ThemeSpacing.Xl} />
+    </div>
+  );
+};

new-ui/src/shared/components/LocationCard/views/LocationCardConnectionErrorView/style.scss

@@ -0,0 +1,11 @@
+.location-card-connection-error-view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .description {
+    font: var(--t-body-xs-400);
+    color: var(--fg-white-70);
+    text-align: center;
+  }
+}

new-ui/src/shared/components/LocationCard/views/LocationCardMfaEmailView/LocationCardMfaEmailView.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useState } from 'react';
-import { useTrayConnectionError } from '../../../../store/useAppStore';
 import { ThemeSpacing } from '../../../../types';
 import { isPresent } from '../../../../utils/isPresent';
 import { Button } from '../../../Button/Button';
@@ -33,7 +32,7 @@ export const LocationCardMfaEmailView = () => {
         setPostureError(msg);
         setView(LocationCardViews.PostureCheckFail);
       },
-      onServiceUnavailable: () => useTrayConnectionError.setState({ visible: true }),
+      onServiceUnavailable: () => setView(LocationCardViews.ConnectionError),
     },
   );
 

new-ui/src/shared/components/LocationCard/views/LocationCardMfaMobileView/LocationCardMfaMobileView.tsx

@@ -1,6 +1,5 @@
 import './style.scss';
 import { useEffect, useRef, useState } from 'react';
-import { useTrayConnectionError } from '../../../../store/useAppStore';
 import { ThemeSpacing } from '../../../../types';
 import { Button } from '../../../Button/Button';
 import { ButtonVariant } from '../../../Button/types';
@@ -22,7 +21,7 @@ export const LocationCardMfaMobileView = () => {
   const { start, startError, qrValue, connectionError } = useMfaMobileConnect(location, {
     onConnected: () => setView(LocationCardViews.Connected),
     onPostureError: (message) => setPostureError(message ?? null),
-    onServiceUnavailable: () => useTrayConnectionError.setState({ visible: true }),
+    onServiceUnavailable: () => setView(LocationCardViews.ConnectionError),
   });
   const [screen, setScreen] = useState<Screen>('loading');
   const startedRef = useRef(false);

new-ui/src/shared/components/LocationCard/views/LocationCardMfaTotpView/LocationCardMfaTotpView.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useState } from 'react';
-import { useTrayConnectionError } from '../../../../store/useAppStore';
 import { ThemeSpacing } from '../../../../types';
 import { isPresent } from '../../../../utils/isPresent';
 import { Button } from '../../../Button/Button';
@@ -33,7 +32,7 @@ export const LocationCardMfaTotpView = () => {
         setPostureError(msg);
         setView(LocationCardViews.PostureCheckFail);
       },
-      onServiceUnavailable: () => useTrayConnectionError.setState({ visible: true }),
+      onServiceUnavailable: () => setView(LocationCardViews.ConnectionError),
     },
   );
 

new-ui/src/shared/store/useAppStore.tsx

@@ -20,11 +20,3 @@ export const useAppStore = create<Store>()(
     },
   ),
 );
-
-interface TrayConnectionErrorStore {
-  visible: boolean;
-}
-
-export const useTrayConnectionError = create<TrayConnectionErrorStore>(() => ({
-  visible: false,
-}));