fix: make minor modifications for form submit on single page form

splunk · Mar 22, 2021 · 1501401 · 1501401
1 parent 3708ffb
commit 1501401
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 42 deletions.
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/BaseFormView.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/BaseFormView.jsx
@@ -24,7 +24,7 @@ class BaseFormView extends PureComponent {
         const globalConfig = getUnifiedConfigs();
         this.appName = globalConfig.meta.name;
         this.endpoint =
-            props.mode === MODE_EDIT
+            props.mode === MODE_EDIT || props.mode === MODE_CONFIG
                 ? `${this.props.serviceName}/${this.props.stanzaName}`
                 : `${this.props.serviceName}`;
 
@@ -167,21 +167,6 @@ class BaseFormView extends PureComponent {
         }
     }
 
-    // componentDidMount() {
-    //     if(this.props.page === "configuration"){
-    //         axiosCallWrapper({
-    //             serviceName: this.endpoint,
-    //             handleError: true,
-    //             callbackOnError: (error) => {
-    //                 error.uccErrorCode = 'ERR0004';
-    //                 this.setState({error});
-    //             },
-    //         }).then((response) => {
-    //             setCurrentServiceState(response.data.entry[0].content);
-    //         });
-    //     }
-    // }
-
     handleSubmit = () => {
         this.props.handleFormSubmit(true, false);
         if (this.hook && typeof this.hook.onSave === 'function') {
@@ -195,8 +180,6 @@ class BaseFormView extends PureComponent {
         Object.keys(this.state.data).forEach((field) => {
             datadict[field] = this.state.data[field].value;
         });
-        console.log(datadict);
-        console.log(this.entities);
 
         // Validation of form fields on Submit
         const validator = new Validator(this.entities);
@@ -248,15 +231,16 @@ class BaseFormView extends PureComponent {
                 })
                 .then((response) => {
                     const val = response?.data?.entry[0];
-                    const tmpObj = {};
-
-                    tmpObj[val.name] = {
-                        ...val.content,
-                        id: val.id,
-                        name: val.name,
-                        serviceName: this.props.serviceName,
-                    };
                     if (this.props.mode !== MODE_CONFIG) {
+                        const tmpObj = {};
+
+                        tmpObj[val.name] = {
+                            ...val.content,
+                            id: val.id,
+                            name: val.name,
+                            serviceName: this.props.serviceName,
+                        };
+
                         this.context.setRowData(
                             update(this.context.rowData, {
                                 [this.props.serviceName]: { $merge: tmpObj },
@@ -422,7 +406,7 @@ class BaseFormView extends PureComponent {
         return (
             <div
                 className="form-horizontal"
-                style={this.props.page === 'configuration' ? { marginTop: '10px' } : {}}
+                style={this.props.mode === MODE_CONFIG ? { marginTop: '10px' } : {}}
             >
                 {this.generateWarningMessage()}
                 {this.generateErrorMessage()}

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/ConfigurationFormView.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/ConfigurationFormView.jsx
@@ -17,7 +17,6 @@ function ConfigurationFormView({ serviceName }) {
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [currentServiceState, setCurrentServiceState] = useState({});
 
-    // TODO: move this logic to BaseFormView
     useEffect(() => {
         axiosCallWrapper({
             serviceName: `settings/${serviceName}`,
@@ -43,21 +42,17 @@ function ConfigurationFormView({ serviceName }) {
         throw error;
     }
 
-    return (
+    return Object.keys(currentServiceState).length ? (
         <>
-            {Object.keys(currentServiceState).length ? (
-                <BaseFormView
-                    ref={form}
-                    page="configuration"
-                    stanzaName={serviceName}
-                    serviceName="settings"
-                    mode={MODE_CONFIG}
-                    currentServiceState={currentServiceState}
-                    handleFormSubmit={handleFormSubmit}
-                />
-            ) : (
-                <WaitSpinnerWrapper />
-            )}
+            <BaseFormView
+                ref={form}
+                page="configuration"
+                stanzaName={serviceName}
+                serviceName="settings"
+                mode={MODE_CONFIG}
+                currentServiceState={currentServiceState}
+                handleFormSubmit={handleFormSubmit}
+            />
             <ControlGroup label="">
                 <div style={{ flexGrow: 0 }}>
                     <Button
@@ -69,6 +64,8 @@ function ConfigurationFormView({ serviceName }) {
                 </div>
             </ControlGroup>
         </>
+    ) : (
+        <WaitSpinnerWrapper />
     );
 }