Add column setting button to graph dimensions/metrics

frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.jsx

 import React from "react";
+
 import { t } from "c-3po";
-import Icon from "metabase/components/Icon";
 import cx from "classnames";
+import _ from "underscore";
+
+import Icon from "metabase/components/Icon";
 
 import ChartSettingSelect from "./ChartSettingSelect.jsx";
 
+import { keyForColumn } from "metabase/lib/dataset";
+
 const ChartSettingFieldPicker = ({
   value,
   options,
@@ -12,41 +17,51 @@ const ChartSettingFieldPicker = ({
   onRemove,
   onShowWidget,
   className,
-  currentColumnKey,
-}) => (
-  <div className={cx(className, "flex align-center")}>
-    <ChartSettingSelect
-      value={value}
-      options={options}
-      onChange={onChange}
-      placeholder={t`Select a field`}
-      placeholderNoOptions={t`No valid fields`}
-      isInitiallyOpen={value === undefined}
-    />
-    {currentColumnKey && (
+  columns,
+  showColumnSetting,
+}) => {
+  let columnKey;
+  if (value && showColumnSetting && columns) {
+    const column = _.findWhere(columns, { name: value });
+    if (column) {
+      columnKey = keyForColumn(column);
+    }
+  }
+  return (
+    <div className={cx(className, "flex align-center")}>
+      <ChartSettingSelect
+        value={value}
+        options={options}
+        onChange={onChange}
+        placeholder={t`Select a field`}
+        placeholderNoOptions={t`No valid fields`}
+        isInitiallyOpen={value === undefined}
+      />
+      {columnKey && (
+        <Icon
+          name="gear"
+          className="ml1 text-medium text-brand-hover cursor-pointer"
+          onClick={() => {
+            onShowWidget({
+              id: "column_settings",
+              props: {
+                initialKey: columnKey,
+              },
+            });
+          }}
+        />
+      )}
       <Icon
-        name="gear"
-        className="ml1 text-medium text-brand-hover cursor-pointer"
-        onClick={() => {
-          onShowWidget({
-            id: "column_settings",
-            props: {
-              initialKey: currentColumnKey,
-            },
-          });
-        }}
+        name="close"
+        className={cx("ml1 text-medium text-brand-hover cursor-pointer", {
+          "disabled hidden": !onRemove,
+        })}
+        width={12}
+        height={12}
+        onClick={onRemove}
       />
-    )}
-    <Icon
-      name="close"
-      className={cx("ml1 text-medium text-brand-hover cursor-pointer", {
-        "disabled hidden": !onRemove,
-      })}
-      width={12}
-      height={12}
-      onClick={onRemove}
-    />
-  </div>
-);
+    </div>
+  );
+};
 
 export default ChartSettingFieldPicker;

frontend/src/metabase/visualizations/components/settings/ChartSettingFieldsPicker.jsx

@@ -7,11 +7,13 @@ const ChartSettingFieldsPicker = ({
   options,
   onChange,
   addAnother,
+  ...props
 }) => (
   <div>
     {Array.isArray(value) ? (
       value.map((v, index) => (
         <ChartSettingFieldPicker
+          {...props}
           className={index > 0 ? "mt1" : null}
           key={index}
           value={v}

frontend/src/metabase/visualizations/lib/settings/graph.js

@@ -139,6 +139,8 @@ export const GRAPH_DATA_SETTINGS = {
           vizSettings["graph.metrics"].length < 2
             ? t`Add a series breakout...`
             : null,
+        columns: data.cols,
+        showColumnSetting: true,
       };
     },
     readDependencies: ["graph._dimension_filter", "graph._metric_filter"],
@@ -175,6 +177,8 @@ export const GRAPH_DATA_SETTINGS = {
           vizSettings["graph.dimensions"].length < 2
             ? t`Add another series...`
             : null,
+        columns: data.cols,
+        showColumnSetting: true,
       };
     },
     readDependencies: ["graph._dimension_filter", "graph._metric_filter"],

frontend/src/metabase/visualizations/lib/settings/utils.js

 import { isDimension, isMetric } from "metabase/lib/schema_metadata";
 import { getFriendlyName } from "metabase/visualizations/lib/utils";
-import { keyForColumn } from "metabase/lib/dataset";
-import _ from "underscore";
 
 export const DIMENSION_METRIC = "DIMENSION_METRIC";
 export const DIMENSION_METRIC_METRIC = "DIMENSION_METRIC_METRIC";
@@ -106,26 +104,18 @@ const DEFAULT_FIELD_FILTER = () => true;
 
 export function fieldSetting(
   id,
-  { fieldFilter = DEFAULT_FIELD_FILTER, columnSetting, ...def } = {},
+  { fieldFilter = DEFAULT_FIELD_FILTER, showColumnSetting, ...def } = {},
 ) {
   return {
     [id]: {
       widget: "field",
       isValid: ([{ card, data }], vizSettings) =>
         columnsAreValid(card.visualization_settings[id], data, fieldFilter),
-      getProps: ([{ card, data: { cols } }], vizSettings) => {
-        let currentColumnKey;
-        if (columnSetting && vizSettings[id]) {
-          const column = _.findWhere(cols, { name: vizSettings[id] });
-          if (column) {
-            currentColumnKey = keyForColumn(column);
-          }
-        }
-        return {
-          options: cols.filter(fieldFilter).map(getOptionFromColumn),
-          currentColumnKey,
-        };
-      },
+      getProps: ([{ card, data: { cols } }], vizSettings) => ({
+        options: cols.filter(fieldFilter).map(getOptionFromColumn),
+        columns: cols,
+        showColumnSetting: showColumnSetting,
+      }),
       ...def,
     },
   };

frontend/src/metabase/visualizations/visualizations/PieChart.jsx

@@ -62,12 +62,12 @@ export default class PieChart extends Component {
     ...dimensionSetting("pie.dimension", {
       section: t`Data`,
       title: t`Dimension`,
-      columnSetting: true,
+      showColumnSetting: true,
     }),
     ...metricSetting("pie.metric", {
       section: t`Data`,
       title: t`Measure`,
-      columnSetting: true,
+      showColumnSetting: true,
     }),
     "pie.show_legend": {
       section: t`Display`,