Merge pull request #1031 from metabase/preview_display_in_metadata

Add `Visibility` column to the table metadata editing

resources/frontend_client/app/admin/metadata/components/MetadataField.react.js

@@ -17,6 +17,16 @@ export default React.createClass({
         updateFieldTarget: React.PropTypes.func.isRequired
     },
 
+    isVisibilityType: function(visibility) {
+        switch(visibility.id) {
+            case "do_not_include": return (this.props.field.field_type === "sensitive");
+            case "everywhere": return (this.props.field.field_type !== "sensitive" && this.props.field.preview_display === true);
+            case "detail_views": return (this.props.field.field_type !== "sensitive" && this.props.field.preview_display === false);
+        }
+
+        return false;
+    },
+
     updateProperty: function(name, value) {
         this.props.field[name] = value;
         this.props.updateField(this.props.field);
@@ -30,6 +40,26 @@ export default React.createClass({
         this.updateProperty("description", event.target.value);
     },
 
+    onVisibilityChange: function(visibility) {
+        switch(visibility.id) {
+            case "do_not_include":
+                this.updateProperty("field_type", "sensitive");
+                return;
+            case "everywhere":
+                if (this.props.field.field_type === "sensitive") {
+                    this.props.field.field_type = "info";
+                }
+                this.updateProperty("preview_display", true);
+                return;
+            case "detail_views":
+                if (this.props.field.field_type === "sensitive") {
+                    this.props.field.field_type = "info";
+                }
+                this.updateProperty("preview_display", false);
+                return;
+        }
+    },
+
     onTypeChange: function(type) {
         this.updateProperty("field_type", type.id);
     },
@@ -60,29 +90,44 @@ export default React.createClass({
         }
 
         return (
-            <li className="my1 flex">
-                <div className="MetadataTable-title flex flex-column flex-full bordered rounded mr1">
-                    <Input className="AdminInput TableEditor-field-name text-bold border-bottom rounded-top" type="text" value={this.props.field.display_name} onBlurChange={this.onNameChange}/>
-                    <Input className="AdminInput TableEditor-field-description rounded-bottom" type="text" value={this.props.field.description} onBlurChange={this.onDescriptionChange} placeholder="No column description yet" />
-                </div>
-                <div className="flex-half px1">
-                    <Select
-                        className="TableEditor-field-type block"
-                        placeholder="Select a field type"
-                        value={_.find(MetabaseCore.field_field_types, (type) => type.id === this.props.field.field_type)}
-                        options={MetabaseCore.field_field_types}
-                        onChange={this.onTypeChange}
-                    />
+            <li className="mt1 mb3">
+                <div>
+                    <Input style={{minWidth: 420}} className="AdminInput TableEditor-field-name float-left bordered inline-block rounded text-bold" type="text" value={this.props.field.display_name} onBlurChange={this.onNameChange}/>
+                    <div className="clearfix">
+                        <div className="flex flex-full">
+                            <div className="flex-full px1">
+                                <Select
+                                    className="TableEditor-field-visibility block"
+                                    placeholder="Select a field visibility"
+                                    value={_.find(MetabaseCore.field_visibility_types, this.isVisibilityType)}
+                                    options={MetabaseCore.field_visibility_types}
+                                    onChange={this.onVisibilityChange}
+                                />
+                            </div>
+                            <div className="flex-full px1">
+                                <Select
+                                    className="TableEditor-field-type block"
+                                    placeholder="Select a field type"
+                                    value={_.find(MetabaseCore.field_field_types, (type) => type.id === this.props.field.field_type)}
+                                    options={MetabaseCore.field_field_types}
+                                    onChange={this.onTypeChange}
+                                />
+                            </div>
+                            <div className="flex-full px1">
+                                <Select
+                                    className="TableEditor-field-special-type block"
+                                    placeholder="Select a special type"
+                                    value={_.find(MetabaseCore.field_special_types, (type) => type.id === this.props.field.special_type)}
+                                    options={MetabaseCore.field_special_types}
+                                    onChange={this.onSpecialTypeChange}
+                                />
+                                {targetSelect}
+                            </div>
+                        </div>
+                    </div>
                 </div>
-                <div className="flex-half flex flex-column justify-between px1">
-                    <Select
-                        className="TableEditor-field-special-type block"
-                        placeholder="Select a special type"
-                        value={_.find(MetabaseCore.field_special_types, (type) => type.id === this.props.field.special_type)}
-                        options={MetabaseCore.field_special_types}
-                        onChange={this.onSpecialTypeChange}
-                    />
-                    {targetSelect}
+                <div className="MetadataTable-title flex flex-column flex-full bordered rounded mt1 mr1">
+                    <Input className="AdminInput TableEditor-field-description" type="text" value={this.props.field.description} onBlurChange={this.onDescriptionChange} placeholder="No column description yet" />
                 </div>
             </li>
         )

resources/frontend_client/app/admin/metadata/components/MetadataTable.react.js

@@ -96,10 +96,13 @@ export default React.createClass({
                     </span>
                 </div>
                 <div className={"mt2 " + (this.isHidden() ? "disabled" : "")}>
-                    <div className="text-uppercase text-grey-3 py1 flex">
-                        <div className="flex-full px1">Column</div>
-                        <div className="flex-half px1">Type</div>
-                        <div className="flex-half px1">Details</div>
+                    <div className="text-uppercase text-grey-3 py1">
+                        <div style={{minWidth: 420}} className="float-left">Column</div>
+                        <div className="flex clearfix">
+                            <div className="flex-half px1">Visibility</div>
+                            <div className="flex-half px1">Type</div>
+                            <div className="flex-half px1">Details</div>
+                        </div>
                     </div>
                     <ol className="border-top border-bottom scroll-y">
                         {fields}

resources/frontend_client/app/css/admin.css

@@ -302,6 +302,15 @@
     font-size: 14px;
 }
 
+.TableEditor-field-visibility {
+    color: var(--orange-color);
+}
+
+.TableEditor-field-visibility .ColumnarSelector-row:hover {
+    background-color: var(--orange-color) !important;
+    color: white !important;
+}
+
 .TableEditor-field-type {
     color: var(--purple-color);
 }

resources/frontend_client/app/css/core/colors.css

@@ -13,6 +13,7 @@
   --warning-color: #E35050;
 
   --gold-color: #F9D45C;
+  --orange-color: #F9A354;
   --purple-color: #A989C5;
   --purple-light-color: #C5ABDB;
   --green-color: #9CC177;

resources/frontend_client/app/lib/core.js

@@ -185,6 +185,20 @@ import _ from "underscore";
         'description': 'A field that should never be shown anywhere.'
     }];
 
+    this.field_visibility_types = [{
+        'id': 'everywhere',
+        'name': 'Everywhere',
+        'description': 'The default setting.  This field will be displayed normally in tables and charts.'
+    }, {
+        'id': 'detail_views',
+        'name': 'Only in Detail Views',
+        'description': "This field will only be displayed when viewing the details of a single record. Use this for information that's lengthy or that isn't useful in a table or chart."
+    }, {
+        'id': 'do_not_include',
+        'name': 'Do Not Include',
+        'description': 'Metabase will never retrieve this field. Use this for sensitive or irrelevant information.'
+    }];
+
     this.boolean_types = [{
         'id': true,
         'name': 'Yes'