Allow only one all-traffic connection

new-ui/src/pages/full/OverviewPage/components/ConnectModal/hooks/useConnectModal.tsx

@@ -12,6 +12,7 @@ interface StoreValues {
   view: ConnectModalViewValue | null;
   perviousView: ConnectModalViewValue | null;
   postureError: string | null;
+  connectionError: string | null;
   autoStartOpenId: boolean;
   mfaMethod: MfaMethodValue;
 }
@@ -23,6 +24,7 @@ const defaults: StoreValues = {
   view: null,
   perviousView: null,
   postureError: null,
+  connectionError: null,
   autoStartOpenId: false,
 } as const;
 

new-ui/src/pages/full/OverviewPage/components/ConnectModal/views/ConnectModalConnectionError/ConnectModalConnectionError.tsx

@@ -2,17 +2,16 @@ import './style.scss';
 import { Button } from '../../../../../../../shared/components/Button/Button';
 import { ButtonVariant } from '../../../../../../../shared/components/Button/types';
 import { Controls } from '../../../../../../../shared/components/Controls/Controls';
+import { DEFAULT_CONNECTION_ERROR } from '../../../../../../../shared/components/LocationCard/api/connectError';
 import { useConnectModal } from '../../hooks/useConnectModal';
 
 export const ConnectModalConnectionError = () => {
   const close = () => useConnectModal.setState({ visible: false });
+  const connectionError = useConnectModal((s) => s.connectionError);
 
   return (
     <div id="connection-error-view">
-      <p className="view-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>
+      <p className="view-description">{connectionError ?? DEFAULT_CONNECTION_ERROR}</p>
       <Controls>
         <div className="right">
           <Button text="Got it" variant={ButtonVariant.Primary} onClick={close} />

new-ui/src/shared/components/LocationCard/api/connectError.ts

@@ -1,19 +1,17 @@
 import z from 'zod';
 
-const connectErrorSchema = z.discriminatedUnion('kind', [
-  z.object({
-    kind: z.literal('postureCheckFailed'),
-    message: z.string(),
-  }),
-  z.object({
-    kind: z.literal('serviceUnavailable'),
-    message: z.string(),
-  }),
-  z.object({
-    kind: z.literal('other'),
-    message: z.string(),
-  }),
-]);
+export const DEFAULT_CONNECTION_ERROR =
+  '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.';
+
+const connectErrorSchema = z.object({
+  kind: z.enum([
+    'postureCheckFailed',
+    'serviceUnavailable',
+    'allTrafficConflict',
+    'other',
+  ]),
+  message: z.string(),
+});
 
 export type ConnectError = z.infer<typeof connectErrorSchema>;
 

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

@@ -23,6 +23,8 @@ export const LocationCardConnectButton = () => {
       ) {
         setPostureError(connectError.message);
         setView(LocationCardViews.PostureCheckFail);
+      } else if (connectError?.kind === 'allTrafficConflict') {
+        setView(LocationCardViews.ConnectionError, connectError.message);
       } else if (connectError?.kind === 'serviceUnavailable') {
         setView(LocationCardViews.ConnectionError);
       }

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

@@ -20,10 +20,11 @@ interface LocationCardContextValue {
   currentView: LocationCardViewsValue;
   previousView: LocationCardViewsValue | null;
   postureError: string | null;
+  connectionError: string | null;
   autoConnectOpenid: boolean;
   mfaMethod: MfaMethodValue;
   setMfaMethod: (value: MfaMethodValue) => void;
-  setView: (view: LocationCardViewsValue) => void;
+  setView: (view: LocationCardViewsValue, connectionError?: string) => void;
   setPostureError: (error: string | null) => void;
   startMfa: () => void;
 }
@@ -54,6 +55,7 @@ export const LocationCardProvider = ({
   const [autoConnectOpenid, setAutoConnectOpenid] = useState(false);
   const [previousView, setPreviousView] = useState<LocationCardViewsValue | null>(null);
   const [postureError, setPostureError] = useState<string | null>(null);
+  const [connectionError, setConnectionError] = useState<string | null>(null);
   const [currentView, setCurrentView] = useState<LocationCardViewsValue>(
     location.active ? LocationCardViews.Connected : LocationCardViews.Default,
   );
@@ -62,9 +64,10 @@ export const LocationCardProvider = ({
   );
 
   const setView = useCallback(
-    (view: LocationCardViewsValue) => {
+    (view: LocationCardViewsValue, connectionError?: string) => {
       setPreviousView(currentView);
       setCurrentView(view);
+      setConnectionError(connectionError ?? null);
     },
     [currentView],
   );
@@ -123,6 +126,7 @@ export const LocationCardProvider = ({
         currentView,
         previousView,
         postureError,
+        connectionError,
         autoConnectOpenid,
         location,
         instance,

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

@@ -5,22 +5,20 @@ import { ButtonVariant } from '../../../Button/types';
 import { Divider } from '../../../Divider/Divider';
 import { Icon, IconKind } from '../../../Icon';
 import { SizedBox } from '../../../SizedBox/SizedBox';
+import { DEFAULT_CONNECTION_ERROR } from '../../api/connectError';
 import { useLocationCardContext } from '../../context/context';
 import { LocationCardViews } from '../../context/types';
 
 export const LocationCardConnectionErrorView = () => {
-  const { setView } = useLocationCardContext();
+  const { setView, connectionError } = 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>
+      <p className="description">{connectionError ?? DEFAULT_CONNECTION_ERROR}</p>
       <SizedBox height={ThemeSpacing.Xl} />
       <Button
         text="Back"

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

@@ -53,6 +53,12 @@ export const OverviewLocationCard = ({ location, instance }: Props) => {
           view: ConnectModalView.PostureCheckFail,
           postureError: connectError.message,
         });
+      } else if (connectError?.kind === 'allTrafficConflict') {
+        useConnectModal.getState().open({
+          location,
+          view: ConnectModalView.ConnectionError,
+          connectionError: connectError.message,
+        });
       } else if (connectError?.kind === 'serviceUnavailable') {
         useConnectModal.getState().open({
           location,