Merge pull request #2467 from metabase/custom-field-formatting

Custom field formatting

frontend/src/query_builder/FieldList.jsx

@@ -49,19 +49,19 @@ export default class FieldList extends Component {
         let tableName = tableMetadata.display_name;
 
         let specialOptions = [];
-        if (customFieldOptions) {
-            specialOptions = Object.keys(customFieldOptions).map(name => ({
-                name: name,
-                value: ["expression", name],
-                customField: customFieldOptions[name]
-            }));
-        }
-
         if (segmentOptions) {
-            specialOptions = specialOptions.concat(segmentOptions.map(segment => ({
+            specialOptions = segmentOptions.map(segment => ({
                 name: segment.name,
                 value: ["SEGMENT", segment.id],
                 segment: segment
+            }));
+        }
+
+        if (customFieldOptions) {
+            specialOptions = specialOptions.concat(Object.keys(customFieldOptions).map(name => ({
+                name: name,
+                value: ["expression", name],
+                customField: customFieldOptions[name]
             })));
         }
 
@@ -101,6 +101,9 @@ export default class FieldList extends Component {
                 { item.segment &&
                     this.renderSegmentTooltip(item.segment)
                 }
+                { item.customField &&
+                    <span className="h5 text-grey-2 px1">Custom</span>
+                }
                 { item.field && enableTimeGrouping && isDate(item.field) &&
                     <PopoverWithTrigger
                         className={this.props.className}
@@ -129,7 +132,10 @@ export default class FieldList extends Component {
         if (item.segment) {
             name = "star-outline";
         } else if (item.field) {
-            name = ICON_MAPPING[getFieldType(item.field)]
+            name = ICON_MAPPING[getFieldType(item.field)];
+        } else if (item.customField) {
+            // TODO: need to make this better
+            name = 'int';
         }
         return <Icon name={name || 'unknown'} width={18} height={18} />;
     }
@@ -157,8 +163,6 @@ export default class FieldList extends Component {
     getItemClasses(item, itemIndex) {
         if (item.segment) {
             return "List-item--segment";
-        } else if (item.customField) {
-            return "List-item--customfield";
         } else {
             return null;
         }