Move all status/alert dialogs into the Left Pane

ts/components/UpdateDialog.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import moment from 'moment';
+
+import { Dialogs } from '../types/Dialogs';
+import { Intl } from './Intl';
+import { LocalizerType } from '../types/Util';
+
+export interface PropsType {
+  ackRender: () => void;
+  dialogType: Dialogs;
+  dismissDialog: () => void;
+  hasNetworkDialog: boolean;
+  i18n: LocalizerType;
+  startUpdate: () => void;
+}
+
+type MaybeMoment = moment.Moment | null;
+type ReactSnoozeHook = React.Dispatch<React.SetStateAction<MaybeMoment>>;
+
+const SNOOZE_TIMER = 60 * 1000 * 30;
+
+function handleSnooze(setSnoozeForLater: ReactSnoozeHook) {
+  setSnoozeForLater(moment().add(SNOOZE_TIMER));
+  setTimeout(() => {
+    setSnoozeForLater(moment());
+  }, SNOOZE_TIMER);
+}
+
+function canSnooze(snoozeUntil: MaybeMoment) {
+  return snoozeUntil === null;
+}
+
+function isSnoozed(snoozeUntil: MaybeMoment) {
+  if (snoozeUntil === null) {
+    return false;
+  }
+
+  return moment().isBefore(snoozeUntil);
+}
+
+export const UpdateDialog = ({
+  ackRender,
+  dialogType,
+  dismissDialog,
+  hasNetworkDialog,
+  i18n,
+  startUpdate,
+}: PropsType): JSX.Element | null => {
+  const [snoozeUntil, setSnoozeForLater] = React.useState<MaybeMoment>(null);
+
+  React.useEffect(() => {
+    ackRender();
+  });
+
+  if (hasNetworkDialog) {
+    return null;
+  }
+
+  if (dialogType === Dialogs.None || isSnoozed(snoozeUntil)) {
+    return null;
+  }
+
+  if (dialogType === Dialogs.Cannot_Update) {
+    return (
+      <div className="module-left-pane-dialog module-left-pane-dialog--warning">
+        <div className="module-left-pane-dialog__message">
+          <h3>{i18n('cannotUpdate')}</h3>
+          <span>
+            <Intl
+              components={[
+                <a
+                  key="signal-download"
+                  href="https://signal.org/download/"
+                  rel="noreferrer"
+                  target="_blank"
+                >
+                  https://signal.org/download/
+                </a>,
+              ]}
+              i18n={i18n}
+              id="cannotUpdateDetail"
+            />
+          </span>
+        </div>
+      </div>
+    );
+  }
+
+  if (dialogType === Dialogs.MacOS_Read_Only) {
+    return (
+      <div className="module-left-pane-dialog module-left-pane-dialog--warning">
+        <div className="module-left-pane-dialog__message">
+          <h3>{i18n('cannotUpdate')}</h3>
+          <span>
+            <Intl
+              components={[
+                <strong key="app">Signal.app</strong>,
+                <strong key="folder">/Applications</strong>,
+              ]}
+              i18n={i18n}
+              id="readOnlyVolume"
+            />
+          </span>
+        </div>
+        <div className="module-left-pane-dialog__actions">
+          <button onClick={dismissDialog}>{i18n('ok')}</button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="module-left-pane-dialog">
+      <div className="module-left-pane-dialog__message">
+        <h3>{i18n('autoUpdateNewVersionTitle')}</h3>
+        <span>{i18n('autoUpdateNewVersionMessage')}</span>
+      </div>
+      <div className="module-left-pane-dialog__actions">
+        {canSnooze(snoozeUntil) && (
+          <button
+            className="module-left-pane-dialog__button--no-border"
+            onClick={() => {
+              handleSnooze(setSnoozeForLater);
+            }}
+          >
+            {i18n('autoUpdateLaterButtonLabel')}
+          </button>
+        )}
+        <button onClick={startUpdate}>
+          {i18n('autoUpdateRestartButtonLabel')}
+        </button>
+      </div>
+    </div>
+  );
+};