App connection updates

Summary:
Create and expose a function to be used to notify the user of current app connection state updates.

If the update is an error, it will be shown as a notification with a button to troubleshoot the issue.

## READ

- Each connection attempt has two update channels:
  - Step update: it will always display the latest update regardless of type.
  - Error: can aggregate multiple errors but do not get dismissed after a step update. The reason an error cannot be dismissed is because updates can come in succession as per our reconnection process and thus might make them unreadable and in-actionable.
    - Only display unique errors, remove duplicates.
    - Errors should be displayed chronologically.
    - Dismiss all errors after a connection is successfully established.
- Both message channels can either be dismissed when clicked and also automatically once a connection is established.

Reviewed By: antonk52

Differential Revision: D52218872

fbshipit-source-id: 0c4090755bfab462825d307e2ecf2ae4b2f28567

Author: lblasa

desktop/flipper-ui/src/app-connection-updates.tsx

@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {css} from '@emotion/css';
+import {Button, message, notification, Typography} from 'antd';
+import React from 'react';
+import {Layout} from './ui';
+
+type ConnectionUpdate = {
+  key: string;
+  type: 'loading' | 'info' | 'success' | 'error' | 'warning';
+  app: string;
+  device: string;
+  title: string;
+  detail?: string;
+};
+
+type ErrorUpdate = {
+  entries: Set<string>;
+  orderedEntries: Array<string>;
+};
+const errorUpdates = new Map<string, ErrorUpdate>();
+
+const className = css`
+  .ant-message-notice-content {
+    width: 30%;
+  }
+`;
+
+export const connectionUpdate = (
+  update: ConnectionUpdate,
+  onClick: () => void,
+) => {
+  const title = `${update.app} on ${update.device} ${update.title}`;
+
+  if (update.type === 'error') {
+    const errors = errorUpdates.get(update.key) ?? {
+      entries: new Set(),
+      orderedEntries: [],
+    };
+
+    if (update.detail && !errors.entries.has(update.detail)) {
+      errors.entries.add(update.detail);
+      errors.orderedEntries.push(update.detail);
+    }
+
+    const content = errors.orderedEntries.reduce((accumulator, e) => {
+      return accumulator.length > 0 ? accumulator + '\n' + e : e;
+    });
+
+    errorUpdates.set(update.key, errors);
+    notification.error({
+      key: update.key,
+      message: title,
+      description: (
+        <Layout.Bottom>
+          <Typography.Text>{content}</Typography.Text>
+          <div style={{marginTop: 10}}>
+            <Button
+              type="primary"
+              style={{float: 'right'}}
+              onClick={() => {
+                notification.close(update.key);
+
+                onClick();
+              }}>
+              Troubleshoot
+            </Button>
+          </div>
+        </Layout.Bottom>
+      ),
+      duration: 0,
+      onClose: () => message.destroy(update.key),
+    });
+  } else {
+    if (update.type === 'success') {
+      errorUpdates.delete(update.key);
+    }
+
+    let content = title;
+    if (update.detail) {
+      content += `\n ${update.detail}`;
+    }
+    message.open({
+      key: update.key,
+      type: update.type,
+      content,
+      className,
+      style: {
+        marginTop: '68px',
+      },
+      duration: update.type === 'success' ? 3 : 0,
+      onClick: () => message.destroy(update.key),
+    });
+  }
+};