Fixed: Custom metadata source doesn't get saved from UI

Fixes #537

frontend/src/Settings/Metadata/MetadataProvider/MetadataProviderConnector.js

@@ -23,10 +23,10 @@ function createMapStateToProps() {
 }
 
 const mapDispatchToProps = {
-  setMetadataProviderValue,
-  saveMetadataProvider,
-  fetchMetadataProvider,
-  clearPendingChanges
+  dispatchFetchMetadataProvider: fetchMetadataProvider,
+  dispatchSetMetadataProviderValue: setMetadataProviderValue,
+  dispatchSaveMetadataProvider: saveMetadataProvider,
+  dispatchClearPendingChanges: clearPendingChanges
 };
 
 class MetadataProviderConnector extends Component {
@@ -35,31 +35,43 @@ class MetadataProviderConnector extends Component {
   // Lifecycle
 
   componentDidMount() {
-    this.props.fetchMetadataProvider();
+    const {
+      dispatchFetchMetadataProvider,
+      dispatchSaveMetadataProvider,
+      onChildMounted
+    } = this.props;
+
+    dispatchFetchMetadataProvider();
+    onChildMounted(dispatchSaveMetadataProvider);
   }
 
   componentDidUpdate(prevProps) {
-    if (this.props.hasPendingChanges !== prevProps.hasPendingChanges) {
-      this.props.onHasPendingChange(this.props.hasPendingChanges);
+    const {
+      hasPendingChanges,
+      isSaving,
+      onChildStateChange
+    } = this.props;
+
+    if (
+      prevProps.isSaving !== isSaving ||
+      prevProps.hasPendingChanges !== hasPendingChanges
+    ) {
+      onChildStateChange({
+        isSaving,
+        hasPendingChanges
+      });
     }
   }
 
   componentWillUnmount() {
-    this.props.clearPendingChanges({ section: SECTION });
-  }
-
-  //
-  // Control
-
-  save = () => {
-    this.props.saveMetadataProvider();
+    this.props.dispatchClearPendingChanges({ section: SECTION });
   }
 
   //
   // Listeners
 
   onInputChange = ({ name, value }) => {
-    this.props.setMetadataProviderValue({ name, value });
+    this.props.dispatchSetMetadataProviderValue({ name, value });
   }
 
   //
@@ -76,12 +88,14 @@ class MetadataProviderConnector extends Component {
 }
 
 MetadataProviderConnector.propTypes = {
+  isSaving: PropTypes.bool.isRequired,
   hasPendingChanges: PropTypes.bool.isRequired,
-  setMetadataProviderValue: PropTypes.func.isRequired,
-  saveMetadataProvider: PropTypes.func.isRequired,
-  fetchMetadataProvider: PropTypes.func.isRequired,
-  clearPendingChanges: PropTypes.func.isRequired,
-  onHasPendingChange: PropTypes.func.isRequired
+  dispatchFetchMetadataProvider: PropTypes.func.isRequired,
+  dispatchSetMetadataProviderValue: PropTypes.func.isRequired,
+  dispatchSaveMetadataProvider: PropTypes.func.isRequired,
+  dispatchClearPendingChanges: PropTypes.func.isRequired,
+  onChildMounted: PropTypes.func.isRequired,
+  onChildStateChange: PropTypes.func.isRequired
 };
 
 export default connect(createMapStateToProps, mapDispatchToProps)(MetadataProviderConnector);

frontend/src/Settings/Metadata/MetadataSettings.js

@@ -13,7 +13,10 @@ class MetadataSettings extends Component {
   constructor(props, context) {
     super(props, context);
 
+    this._saveCallback = null;
+
     this.state = {
+      isSaving: false,
       hasPendingChanges: false
     };
   }
@@ -21,35 +24,41 @@ class MetadataSettings extends Component {
   //
   // Listeners
 
-  setMetadataProviderRef = (ref) => {
-    this._metadataProvider = ref;
+  onChildMounted = (saveCallback) => {
+    this._saveCallback = saveCallback;
   }
 
-  onHasPendingChange = (hasPendingChanges) => {
-    this.setState({
-      hasPendingChanges
-    });
+  onChildStateChange = (payload) => {
+    this.setState(payload);
   }
 
   onSavePress = () => {
-    this._metadataProvider.getWrappedInstance().save();
+    if (this._saveCallback) {
+      this._saveCallback();
+    }
   }
 
   //
   // Render
   render() {
+    const {
+      isSaving,
+      hasPendingChanges
+    } = this.state;
+
     return (
       <PageContent title="Metadata Settings">
         <SettingsToolbarConnector
-          hasPendingChanges={this.state.hasPendingChanges}
+          isSaving={isSaving}
+          hasPendingChanges={hasPendingChanges}
           onSavePress={this.onSavePress}
         />
 
         <PageContentBodyConnector>
           <MetadatasConnector />
           <MetadataProviderConnector
-            ref={this.setMetadataProviderRef}
-            onHasPendingChange={this.onHasPendingChange}
+            onChildMounted={this.onChildMounted}
+            onChildStateChange={this.onChildStateChange}
           />
         </PageContentBodyConnector>
       </PageContent>