Added select disabling behavior

frontend/src/metabase/components/Select.jsx

@@ -154,6 +154,7 @@ class LegacySelect extends Component {
         optionValueFn: PropTypes.func,
         className: PropTypes.string,
         isInitiallyOpen: PropTypes.bool,
+        disabled: PropTypes.bool,
         //TODO: clean up hardcoded "AdminSelect" class on trigger to avoid this workaround
         triggerClasses: PropTypes.string
     };
@@ -171,12 +172,12 @@ class LegacySelect extends Component {
     }
 
     render() {
-        const { className, value, values, onChange, options, disabledOptionIds, optionNameFn, optionValueFn, placeholder, isInitiallyOpen } = this.props;
+        const { className, value, values, onChange, options, disabledOptionIds, optionNameFn, optionValueFn, placeholder, isInitiallyOpen, disabled } = this.props;
 
         var selectedName = value ? optionNameFn(value) : placeholder;
 
         var triggerElement = (
-            <div className={cx("flex align-center", !value && (!values || values.length === 0) ? " text-grey-3" : "")}>
+            <div className={cx("flex align-center", !value && (!values || values.length === 0) ? " text-grey-2" : "")}>
                 { values && values.length !== 0 ?
                     values
                         .map(value => optionNameFn(value))
@@ -220,6 +221,7 @@ class LegacySelect extends Component {
                 triggerElement={triggerElement}
                 triggerClasses={this.props.triggerClasses || cx("AdminSelect", this.props.className)}
                 isInitiallyOpen={isInitiallyOpen}
+                disabled={disabled}
             >
                 <div onClick={(e) => e.stopPropagation()}>
                     <ColumnarSelector

frontend/src/metabase/components/Triggerable.jsx

@@ -106,7 +106,7 @@ export default ComposedComponent => class extends Component {
         }
 
         return (
-            <a ref="trigger" onClick={() => this.toggle()} className={cx("no-decoration", triggerClasses, isOpen ? triggerClassesOpen : null)}>
+            <a ref="trigger" onClick={!this.props.disabled && (() => this.toggle())} className={cx("no-decoration", triggerClasses, isOpen ? triggerClassesOpen : null, this.props.disabled ? 'cursor-default' : null)}>
                 {triggerElement}
                 <ComposedComponent
                     {...this.props}

frontend/src/metabase/reference/components/GuideDetailEditor.jsx

@@ -146,11 +146,12 @@ const GuideDetailEditor = ({
                         []
                     }
                     onChange={(field) => {
-                        const importantFields = formField.important_fields.value;
-                        return importantFields && importantFields.includes(field) ?
+                        const importantFields = formField.important_fields.value || [];
+                        return importantFields.includes(field) ?
                             formField.important_fields.onChange(importantFields.filter(importantField => importantField !== field)) :
                             importantFields.length < 3 && formField.important_fields.onChange(importantFields.concat(field));
                     }}
+                    disabled={formField.id.value === null || formField.id.value === undefined}
                 />
             }
         </div>