Introduce row truncation

Summary:
Changelog: Logs plugin will now automatically truncate long lines

...for a more pleasant experience where long messages don't distort things to much. (Made the buttons purple in a next diff for better contrast)

Reviewed By: passy

Differential Revision: D27395517

fbshipit-source-id: 733cd6329b979453ef3b428693be8c47c37adf4d

desktop/flipper-plugin/src/ui/DataFormatter.tsx

@@ -7,9 +7,16 @@
  * @format
  */
 
-import {Typography} from 'antd';
+import {
+  CaretRightOutlined,
+  CaretUpOutlined,
+  CopyOutlined,
+} from '@ant-design/icons';
+import {Button, Typography} from 'antd';
 import {pad} from 'lodash';
-import React, {createElement, Fragment, isValidElement} from 'react';
+import React, {createElement, Fragment, isValidElement, useState} from 'react';
+import styled from '@emotion/styled';
+import {tryGetFlipperLibImplementation} from '../plugin/FlipperLib';
 import {safeStringify} from '../utils/safeStringify';
 import {urlRegex} from '../utils/urlRegex';
 
@@ -57,6 +64,15 @@ export const DataFormatter = {
     }
   },
 
+  truncate(maxLength: number) {
+    return (value: any) => {
+      if (typeof value === 'string' && value.length > maxLength) {
+        return <TruncateHelper value={value} maxLength={maxLength} />;
+      }
+      return value;
+    };
+  },
+
   /**
    * Formatter that will automatically create links for any urls inside the data
    */
@@ -119,3 +135,38 @@ export const DataFormatter = {
     return DataFormatter.defaultFormatter(res);
   },
 };
+
+const TruncateHelper = styled(function TruncateHelper({
+  value,
+  maxLength,
+}: {
+  value: string;
+  maxLength: number;
+}) {
+  const [collapsed, setCollapsed] = useState(true);
+  return (
+    <>
+      {collapsed ? value.substr(0, maxLength) : value}
+      <Button
+        onClick={() => setCollapsed((c) => !c)}
+        size="small"
+        type="text"
+        icon={collapsed ? <CaretRightOutlined /> : <CaretUpOutlined />}>
+        {`(and ${value.length - maxLength} more...)`}
+      </Button>
+      <Button
+        icon={<CopyOutlined />}
+        onClick={() =>
+          tryGetFlipperLibImplementation()?.writeTextToClipboard(value)
+        }
+        size="small"
+        type="text">
+        Copy
+      </Button>
+    </>
+  );
+})({
+  '& button': {
+    marginRight: 4,
+  },
+});

desktop/plugins/logs/index.tsx

@@ -97,7 +97,11 @@ function createColumnConfig(
       key: 'message',
       title: 'Message',
       wrap: true,
-      formatters: [DataFormatter.prettyPrintJson, DataFormatter.linkify],
+      formatters: [
+        DataFormatter.truncate(400),
+        DataFormatter.prettyPrintJson,
+        DataFormatter.linkify,
+      ],
     },
   ];
 }