From 5348cfae9247454c9866d83abcaf87e2236a3fe8 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Mon, 19 Mar 2018 11:57:36 -0700
Subject: [PATCH] add scrolling to customizeFields when there are a lot of them
 in CEO options

---
 .../GraphOptionsCustomizableField.tsx         |  2 +-
 .../GraphOptionsCustomizeFields.tsx           | 24 ++++++++++---------
 ui/src/dashboards/components/TableOptions.tsx |  2 +-
 .../style/components/ceo-display-options.scss |  5 +++-
 4 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx b/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx
index 829f05443..351ac1faf 100644
--- a/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx
+++ b/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx
@@ -28,7 +28,7 @@ class GraphOptionsCustomizableField extends PureComponent<Props, {}> {
     onFieldUpdate({internalName, displayName: rename, visible})
   }
 
-  handleToggleVisible() {
+  handleToggleVisible(e) {
     const {onFieldUpdate, internalName, displayName, visible} = this.props
     onFieldUpdate({internalName, displayName, visible: !visible})
   }
diff --git a/ui/src/dashboards/components/GraphOptionsCustomizeFields.tsx b/ui/src/dashboards/components/GraphOptionsCustomizeFields.tsx
index 7683e329d..788af1961 100644
--- a/ui/src/dashboards/components/GraphOptionsCustomizeFields.tsx
+++ b/ui/src/dashboards/components/GraphOptionsCustomizeFields.tsx
@@ -18,17 +18,19 @@ const GraphOptionsCustomizeFields: SFC<Props> = ({fields, onFieldUpdate}) => {
   return (
     <div className="graph-options-group">
       <label className="form-label">Customize Fields</label>
-      {fields.map(field => {
-        return (
-          <GraphOptionsCustomizableField
-            key={uuid.v4()}
-            internalName={field.internalName}
-            displayName={field.displayName}
-            visible={field.visible}
-            onFieldUpdate={onFieldUpdate}
-          />
-        )
-      })}
+      <div className="field-controls--group">
+        {fields.map(field => {
+          return (
+            <GraphOptionsCustomizableField
+              key={uuid.v4()}
+              internalName={field.internalName}
+              displayName={field.displayName}
+              visible={field.visible}
+              onFieldUpdate={onFieldUpdate}
+            />
+          )
+        })}
+      </div>
     </div>
   )
 }
diff --git a/ui/src/dashboards/components/TableOptions.tsx b/ui/src/dashboards/components/TableOptions.tsx
index 233b3222f..bc904fb66 100644
--- a/ui/src/dashboards/components/TableOptions.tsx
+++ b/ui/src/dashboards/components/TableOptions.tsx
@@ -123,7 +123,7 @@ export class TableOptions extends PureComponent<Props, {}> {
     const {handleUpdateTableOptions, tableOptions} = this.props
     const {fieldNames} = tableOptions
     const updatedFields = fieldNames.map(
-      op => (op.internalName === field.internalName ? field : op)
+      f => (f.internalName === field.internalName ? field : f)
     )
     handleUpdateTableOptions({...tableOptions, fieldNames: updatedFields})
   }
diff --git a/ui/src/style/components/ceo-display-options.scss b/ui/src/style/components/ceo-display-options.scss
index 8212fd741..526c6a462 100644
--- a/ui/src/style/components/ceo-display-options.scss
+++ b/ui/src/style/components/ceo-display-options.scss
@@ -256,7 +256,10 @@ button.btn.btn-primary.btn-sm.gauge-controls--add-threshold {
   flex: 1 0 0;
 }
 
-
+.field-controls--group {
+  max-height: 235px;
+  overflow-y: scroll;
+}
 .field-controls--label, .field-controls--label-hidden {
   @extend %gauge-controls-label-styles;
   color: $g16-pearl;