Introduce outage network status

Co-authored-by: Scott Nonnenberg <scott@signal.org>

ts/components/DialogNetworkStatus.stories.tsx

@@ -20,6 +20,7 @@ const defaultProps = {
   hasNetworkDialog: true,
   i18n,
   isOnline: true,
+  isOutage: false,
   socketStatus: SocketStatus.CONNECTING,
   manualReconnect: action('manual-reconnect'),
   withinConnectingGracePeriod: false,
@@ -54,6 +55,7 @@ KnobsPlayground.args = {
   containerWidthBreakpoint: WidthBreakpoint.Wide,
   hasNetworkDialog: true,
   isOnline: true,
+  isOutage: false,
   socketStatus: SocketStatus.CONNECTING,
 };
 
@@ -105,6 +107,19 @@ export function OfflineWide(): JSX.Element {
   );
 }
 
+export function OutageWide(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
+      <DialogNetworkStatus
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Wide}
+        isOnline={false}
+        isOutage
+      />
+    </FakeLeftPaneContainer>
+  );
+}
+
 export function ConnectingNarrow(): JSX.Element {
   return (
     <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
@@ -152,3 +167,16 @@ export function OfflineNarrow(): JSX.Element {
     </FakeLeftPaneContainer>
   );
 }
+
+export function OutageNarrow(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
+      <DialogNetworkStatus
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Narrow}
+        isOnline={false}
+        isOutage
+      />
+    </FakeLeftPaneContainer>
+  );
+}

ts/components/DialogNetworkStatus.tsx

@@ -13,7 +13,10 @@ import { clearTimeoutIfNecessary } from '../util/clearTimeoutIfNecessary';
 
 const FIVE_SECONDS = 5 * 1000;
 
-export type PropsType = Pick<NetworkStateType, 'isOnline' | 'socketStatus'> & {
+export type PropsType = Pick<
+  NetworkStateType,
+  'isOnline' | 'isOutage' | 'socketStatus'
+> & {
   containerWidthBreakpoint: WidthBreakpoint;
   i18n: LocalizerType;
   manualReconnect: () => void;
@@ -23,6 +26,7 @@ export function DialogNetworkStatus({
   containerWidthBreakpoint,
   i18n,
   isOnline,
+  isOutage,
   socketStatus,
   manualReconnect,
 }: PropsType): JSX.Element | null {
@@ -48,6 +52,17 @@ export function DialogNetworkStatus({
     manualReconnect();
   };
 
+  if (isOutage) {
+    return (
+      <LeftPaneDialog
+        containerWidthBreakpoint={containerWidthBreakpoint}
+        type="warning"
+        icon="error"
+        subtitle={i18n('icu:DialogNetworkStatus__outage')}
+      />
+    );
+  }
+
   if (isConnecting) {
     const spinner = (
       <div className="LeftPaneDialog__spinner-container">

ts/components/LeftPane.stories.tsx

@@ -201,6 +201,7 @@ const useProps = (overrideProps: OverridePropsType = {}): PropsType => {
         i18n={i18n}
         socketStatus={SocketStatus.CLOSED}
         isOnline={false}
+        isOutage={false}
         manualReconnect={action('manualReconnect')}
         {...overrideProps.dialogNetworkStatus}
         {...props}

ts/components/LeftPaneDialog.tsx

@@ -12,7 +12,7 @@ const TOOLTIP_CLASS_NAME = `${BASE_CLASS_NAME}__tooltip`;
 
 export type PropsType = {
   type?: 'warning' | 'error';
-  icon?: 'update' | 'relink' | 'network' | 'warning' | ReactChild;
+  icon?: 'update' | 'relink' | 'network' | 'warning' | 'error' | ReactChild;
   title?: string;
   subtitle?: string;
   children?: ReactNode;