Add picker for string values in the Layout Editor

Summary: This diff adds a new PoC widget for the Layout Editor to select a string from a picker. It takes a Set of values and uses them as representation. One of them is considered selected.

Reviewed By: muraziz

Differential Revision: D23374681

fbshipit-source-id: 324a3dd74a6b16edb77b862345d5288dd714fea1

desktop/app/src/ui/components/data-inspector/DataDescription.tsx

@@ -18,6 +18,7 @@ import Input from '../Input';
 import React, {KeyboardEvent} from 'react';
 import Glyph from '../Glyph';
 import {HighlightContext} from '../Highlight';
+import Select from '../Select';
 
 const NullValue = styled.span({
   color: 'rgb(128, 128, 128)',
@@ -540,6 +541,11 @@ function parseColor(
 
 const pencilStyle = {cursor: 'pointer', marginLeft: 8};
 
+type Picker = {
+  values: Set<string>;
+  selected: string;
+};
+
 class DataDescriptionContainer extends PureComponent<{
   type: string;
   value: any;
@@ -610,6 +616,27 @@ class DataDescriptionContainer extends PureComponent<{
         }
       }
 
+      case 'picker': {
+        const picker: Picker = JSON.parse(val);
+        const options = [...picker.values].reduce((obj, value) => {
+          return {...obj, [value]: value};
+        }, {});
+        return (
+          <Select
+            options={options}
+            selected={picker.selected}
+            onChangeWithKey={(value: string) =>
+              this.props.commit({
+                value,
+                keep: true,
+                clear: false,
+                set: true,
+              })
+            }
+          />
+        );
+      }
+
       case 'text':
       case 'string':
         const isUrl = val.startsWith('http://') || val.startsWith('https://');