Dynamic Form: Make default extra fields state a prop (#5039)

client/app/components/dynamic-form/DynamicForm.jsx

@@ -8,7 +8,7 @@ import Checkbox from "antd/lib/checkbox";
 import Button from "antd/lib/button";
 import Upload from "antd/lib/upload";
 import Icon from "antd/lib/icon";
-import { includes, isFunction, filter, difference, isEmpty, some, isNumber, isBoolean } from "lodash";
+import { includes, isFunction, filter, difference, isEmpty } from "lodash";
 import Select from "antd/lib/select";
 import notification from "@/services/notification";
 import Collapse from "@/components/Collapse";
@@ -38,6 +38,7 @@ class DynamicForm extends React.Component {
     actions: PropTypes.arrayOf(Action),
     feedbackIcons: PropTypes.bool,
     hideSubmitButton: PropTypes.bool,
+    defaultShowExtraFields: PropTypes.bool,
     saveText: PropTypes.string,
     onSubmit: PropTypes.func,
     form: AntdForm.isRequired,
@@ -49,6 +50,7 @@ class DynamicForm extends React.Component {
     actions: [],
     feedbackIcons: false,
     hideSubmitButton: false,
+    defaultShowExtraFields: false,
     saveText: "Save",
     onSubmit: () => {},
   };
@@ -56,22 +58,12 @@ class DynamicForm extends React.Component {
   constructor(props) {
     super(props);
 
-    const hasFilledExtraField = some(props.fields, field => {
-      const { extra, initialValue, placeholder } = field;
-      return (
-        extra &&
-        (!isEmpty(initialValue) ||
-          isNumber(initialValue) ||
-          (isBoolean(initialValue) && initialValue.toString() !== placeholder))
-      );
-    });
-
     const inProgressActions = {};
     props.actions.forEach(action => (inProgressActions[action.name] = false));
 
     this.state = {
       isSubmitting: false,
-      showExtraFields: hasFilledExtraField,
+      showExtraFields: props.defaultShowExtraFields,
       inProgressActions,
     };
 

client/app/components/dynamic-form/dynamicFormHelper.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { each, includes, isUndefined, isEmpty, isNil, map } from "lodash";
+import { each, includes, isUndefined, isEmpty, isNil, map, get, some } from "lodash";
 
 function orderedInputs(properties, order, targetOptions) {
   const inputs = new Array(order.length);
@@ -124,8 +124,18 @@ function getBase64(file) {
   });
 }
 
+function hasFilledExtraField(type, target) {
+  const extraOptions = get(type, "configuration_schema.extra_options", []);
+  return some(extraOptions, optionName => {
+    const defaultOptionValue = get(type, ["configuration_schema", "properties", optionName, "default"]);
+    const targetOptionValue = get(target, ["options", optionName]);
+    return !isNil(targetOptionValue) && targetOptionValue !== defaultOptionValue;
+  });
+}
+
 export default {
   getFields,
   updateTargetWithValues,
   getBase64,
+  hasFilledExtraField,
 };

client/app/pages/data-sources/EditDataSource.jsx

@@ -112,6 +112,7 @@ class EditDataSource extends React.Component {
       ],
       onSubmit: this.saveDataSource,
       feedbackIcons: true,
+      defaultShowExtraFields: helper.hasFilledExtraField(type, dataSource),
     };
 
     return (

client/app/pages/destinations/EditDestination.jsx

@@ -85,6 +85,7 @@ class EditDestination extends React.Component {
       type,
       actions: [{ name: "Delete", type: "danger", callback: this.deleteDestination }],
       onSubmit: this.saveDestination,
+      defaultShowExtraFields: helper.hasFilledExtraField(type, destination),
       feedbackIcons: true,
     };