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/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>
+  );
+};