Limit notification length

Summary: See https://fb.workplace.com/groups/flippersupport/permalink/1593262167821102/

Reviewed By: antonk52

Differential Revision: D44459787

fbshipit-source-id: ef14e560c523fddf4f815d0faafa37e44dc416b8

desktop/flipper-ui-core/src/chrome/UpdateIndicator.tsx

@@ -16,6 +16,7 @@ import {useStore} from '../utils/useStore';
 import {getAppVersion} from '../utils/info';
 import {checkForUpdate} from '../fb-stubs/checkForUpdate';
 import {getRenderHostInstance} from 'flipper-frontend-core';
+import {NotificationBody} from '../ui/components/NotificationBody';
 
 export type VersionCheckResult =
   | {
@@ -71,7 +72,7 @@ export default function UpdateIndicator() {
           placement: 'bottomLeft',
           key: 'launchermsg',
           message: 'Launch problem',
-          description: launcherMsg.message,
+          description: <NotificationBody text={launcherMsg.message} />,
           duration: null,
         });
       } else {
@@ -79,7 +80,7 @@ export default function UpdateIndicator() {
           placement: 'bottomLeft',
           key: 'launchermsg',
           message: 'Flipper version warning',
-          description: launcherMsg.message,
+          description: <NotificationBody text={launcherMsg.message} />,
           duration: null,
         });
       }

desktop/flipper-ui-core/src/dispatcher/flipperServer.tsx

@@ -24,6 +24,7 @@ import {ClientDescription, timeout} from 'flipper-common';
 import {reportPlatformFailures} from 'flipper-common';
 import {sideEffect} from '../utils/sideEffect';
 import {waitFor} from '../utils/waitFor';
+import {NotificationBody} from '../ui/components/NotificationBody';
 
 export function connectFlipperServerToStore(
   server: FlipperServer,
@@ -35,7 +36,7 @@ export function connectFlipperServerToStore(
     console.warn(text);
     notification.open({
       message: title,
-      description: description,
+      description: <NotificationBody text={description} />,
       type: type,
       duration: 0,
       key: text,
@@ -50,7 +51,7 @@ export function connectFlipperServerToStore(
     } else {
       notification.error({
         message: 'Connection error',
-        description: <>{err.message ?? err}</>,
+        description: <NotificationBody text={err.message ?? err} />,
         duration: null,
       });
     }

desktop/flipper-ui-core/src/ui/components/NotificationBody.tsx

@@ -0,0 +1,49 @@
+/**
+ * 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 {CopyOutlined} from '@ant-design/icons';
+import {Typography} from 'antd';
+import {getRenderHostInstance} from 'flipper-frontend-core';
+import {theme} from 'flipper-plugin';
+import * as React from 'react';
+
+type NotificationbodyProps = {
+  text: string;
+};
+
+export const NotificationBody: React.FC<NotificationbodyProps> = ({text}) => {
+  const messageLoggedRef = React.useRef(false);
+
+  return (
+    <Typography.Paragraph
+      style={{color: 'inherit'}}
+      ellipsis={{
+        rows: 10,
+        tooltip: 'Message is too long. Please, find the full text in logs.',
+        onEllipsis: (ellipsis) => {
+          if (messageLoggedRef.current) {
+            return;
+          }
+          if (ellipsis) {
+            console.warn(
+              'Message is too long to fit in the notification box. Original text:',
+              text,
+            );
+            messageLoggedRef.current = true;
+          }
+        },
+      }}
+      copyable={{
+        onCopy: () => getRenderHostInstance().writeTextToClipboard(text),
+        icon: <CopyOutlined style={{color: theme.textColorSecondary}} />,
+      }}>
+      {text}
+    </Typography.Paragraph>
+  );
+};

desktop/flipper-ui-core/src/utils/notifications.tsx

@@ -14,6 +14,7 @@ import {setStaticView} from '../reducers/connections';
 import {getStore} from '../store';
 import {Layout} from '../ui';
 import {v4 as uuid} from 'uuid';
+import {NotificationBody} from '../ui/components/NotificationBody';
 
 const {Link} = Typography;
 
@@ -22,9 +23,10 @@ export function showErrorNotification(message: string, description?: string) {
   notification.error({
     key,
     message,
-    description: (
+    description: description ? (
+      <NotificationBody text={description} />
+    ) : (
       <Layout.Container gap>
-        {description ?? <p>{description}</p>}
         <p>
           See{' '}
           <Link