Remove Value/renderValue public API from "flipper"

Summary:
Moving Value/renderValue API to "database" plugin as these APIs used exclusively by this plugin.

Alternative to that could be moving this API to "flipper-plugin" instead, but I think it doesn't make sense to expose public API which is only used in one plugin.

Reviewed By: mweststrate

Differential Revision: D28110483

fbshipit-source-id: 1576444681c1e0531fe45f0c15f442d65a28f803

desktop/plugins/public/databases/ClientProtocol.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import {Value} from 'flipper';
+import {Value} from './TypeBasedValueRenderer';
 
 type DatabaseListRequest = {};
 

desktop/plugins/public/databases/DatabaseDetailSidebar.tsx

@@ -13,14 +13,17 @@ import {
   DetailSidebar,
   Panel,
   ManagedDataInspector,
-  Value,
-  valueToNullableString,
-  renderValue,
   styled,
   produce,
   colors,
 } from 'flipper';
 
+import {
+  Value,
+  valueToNullableString,
+  renderValue,
+} from './TypeBasedValueRenderer';
+
 import {Button} from 'antd';
 
 type TableRow = {

desktop/plugins/public/databases/DatabaseStructure.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import {Value, renderValue} from 'flipper';
+import {Value, renderValue} from './TypeBasedValueRenderer';
 import {DataTable, DataTableColumn, Layout, useMemoize} from 'flipper-plugin';
 import React from 'react';
 import {Structure} from './index';

desktop/plugins/public/databases/TypeBasedValueRenderer.tsx

@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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 {default as styled} from '@emotion/styled';
+import {theme} from 'flipper-plugin';
+import {Typography} from 'antd';
+import React from 'react';
+
+const {Text} = Typography;
+
+export type Value =
+  | {
+      type: 'string' | 'blob';
+      value: string;
+    }
+  | {
+      type: 'boolean';
+      value: boolean;
+    }
+  | {
+      type: 'integer' | 'float' | 'double' | 'number';
+      value: number;
+    }
+  | {
+      type: 'null';
+      value: null;
+    };
+
+const WrappingText = styled(Text)({
+  wordWrap: 'break-word',
+  width: '100%',
+  lineHeight: '125%',
+  padding: '3px 0',
+});
+WrappingText.displayName = 'TypeBasedValueRenderer:WrappingText';
+
+const NonWrappingText = styled(Text)({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+NonWrappingText.displayName = 'TypeBasedValueRenderer:NonWrappingText';
+
+const BooleanValue = styled(NonWrappingText)<{active?: boolean}>((props) => ({
+  '&::before': {
+    content: '""',
+    display: 'inline-block',
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: props.active ? theme.successColor : theme.errorColor,
+    marginRight: 5,
+    marginTop: 1,
+  },
+}));
+BooleanValue.displayName = 'TypeBasedValueRenderer:BooleanValue';
+
+export function valueToNullableString(val: Value): string | null {
+  return val.value?.toString() ?? null;
+}
+
+export function renderValue(val: Value, wordWrap?: boolean) {
+  const TextComponent = wordWrap ? WrappingText : NonWrappingText;
+  switch (val.type) {
+    case 'boolean':
+      return (
+        <BooleanValue active={val.value}>{val.value.toString()}</BooleanValue>
+      );
+    case 'blob':
+    case 'string':
+      return <TextComponent>{val.value}</TextComponent>;
+    case 'integer':
+    case 'float':
+    case 'double':
+    case 'number':
+      return <TextComponent>{val.value}</TextComponent>;
+    case 'null':
+      return <TextComponent>NULL</TextComponent>;
+    default:
+      return <TextComponent />;
+  }
+}

desktop/plugins/public/databases/UpdateQueryUtil.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import {Value} from 'flipper';
+import {Value} from './TypeBasedValueRenderer';
 
 const INT_DATA_TYPE = ['INTEGER', 'LONG', 'INT', 'BIGINT'];
 const FLOAT_DATA_TYPE = ['REAL', 'DOUBLE'];

desktop/plugins/public/databases/__test__/DatabaseDetailSidebar.node.tsx

@@ -15,7 +15,7 @@ import reducers, {Store} from '../../../../app/src/reducers';
 import configureStore from 'redux-mock-store';
 import {Provider} from 'react-redux';
 
-import {Value} from 'flipper';
+import {Value} from '../TypeBasedValueRenderer';
 import DatabaseDetailSidebar from '../DatabaseDetailSidebar';
 
 const labels: Array<string> = [

desktop/plugins/public/databases/__test__/UpdateQueryUtil.node.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import {Value} from 'flipper';
+import {Value} from '../TypeBasedValueRenderer';
 import {
   isUpdatable,
   convertStringToValue,

desktop/plugins/public/databases/__tests__/TypeBasedValueRenderer.node.tsx

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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 {render} from '@testing-library/react';
+
+import {
+  Value,
+  valueToNullableString,
+  renderValue,
+} from '../TypeBasedValueRenderer';
+
+test('valueToNullableString', () => {
+  const testcases: Array<{input: Value; output: string | null}> = [
+    {
+      input: {type: 'string', value: 'this is a string'},
+      output: 'this is a string',
+    },
+    {input: {type: 'boolean', value: true}, output: 'true'},
+    {input: {type: 'boolean', value: false}, output: 'false'},
+    {input: {type: 'integer', value: 1337}, output: '1337'},
+    {input: {type: 'float', value: 13.37}, output: '13.37'},
+    {input: {type: 'null', value: null}, output: null},
+  ];
+
+  for (const testcase of testcases) {
+    expect(valueToNullableString(testcase.input)).toEqual(testcase.output);
+  }
+});
+
+test('renderValue', () => {
+  const testcases: Array<{input: Value; queryString: string}> = [
+    {
+      input: {type: 'string', value: 'this is a string'},
+      queryString: 'this is a string',
+    },
+    {input: {type: 'boolean', value: true}, queryString: 'true'},
+    {input: {type: 'boolean', value: false}, queryString: 'false'},
+    {input: {type: 'integer', value: 1337}, queryString: '1337'},
+    {input: {type: 'float', value: 13.37}, queryString: '13.37'},
+    {input: {type: 'null', value: null}, queryString: 'NULL'},
+  ];
+  const res = render(renderValue(testcases[0].input));
+  for (const testcase of testcases) {
+    res.rerender(renderValue(testcase.input));
+    expect(res.queryAllByText(testcase.queryString).length).toBeGreaterThan(0);
+  }
+});

desktop/plugins/public/databases/index.tsx

@@ -16,10 +16,9 @@ import {
   TableRows,
   TableBodyRow,
   TableRowSortOrder,
-  renderValue,
   TableHighlightedRows,
-  Value,
 } from 'flipper';
+import {Value, renderValue} from './TypeBasedValueRenderer';
 import React, {KeyboardEvent, ChangeEvent, useState, useCallback} from 'react';
 import {Methods, Events} from './ClientProtocol';
 import ButtonNavigation from './ButtonNavigation';