Show optional help text based on replication auth type (#1190)
* Show optional help text based on replication auth type
diff --git a/app/addons/replication/__tests__/auth-options.test.js b/app/addons/replication/__tests__/auth-options.test.js
new file mode 100644
index 0000000..b9aba5d
--- /dev/null
+++ b/app/addons/replication/__tests__/auth-options.test.js
@@ -0,0 +1,57 @@
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+
+import { mount } from 'enzyme';
+import React from "react";
+import sinon from "sinon";
+import utils from "../../../../test/mocha/testUtils";
+import FauxtonAPI from '../../../core/api';
+import { ReplicationAuth } from '../components/auth-options';
+import Constants from '../constants';
+
+const {restore} = utils;
+
+describe('ReplicationAuth', () => {
+
+ describe('custom help shows up when correct auth type is selected', () => {
+
+ afterEach(() => {
+ restore(FauxtonAPI.getExtensions);
+ });
+
+ it('returns true for local source and target selected', () => {
+ const testAuthHelp = {
+ authType: Constants.REPLICATION_AUTH_METHOD.BASIC,
+ helpText: 'test_help'
+ };
+ sinon.stub(FauxtonAPI, 'getExtensions').withArgs('Replication:Auth-help').returns([testAuthHelp]);
+
+ const newRepAuth = mount(<ReplicationAuth
+ authId="test-auth"
+ authType=""
+ credentials={{}}
+ onChangeAuth={() => {}}
+ onChangeAuthType={(newType) => {
+ newRepAuth.setProps({authType: newType});
+ }} />);
+
+ expect(newRepAuth.find('div.replication__help-tile').exists()).toBe(false);
+ newRepAuth.find('select#select-test-auth').first().simulate('change', {
+ target: {
+ value: 'BASIC_AUTH'
+ }
+ });
+ // Help is displayed after selecting the associated auth type
+ expect(newRepAuth.find('div.replication__help-tile').exists()).toBe(true);
+ });
+ });
+});
diff --git a/app/addons/replication/assets/less/replication.less b/app/addons/replication/assets/less/replication.less
index 6a8a1aa..1619fbb 100644
--- a/app/addons/replication/assets/less/replication.less
+++ b/app/addons/replication/assets/less/replication.less
@@ -37,6 +37,10 @@
width: 100%;
}
+.replication__help-tile {
+ width: 400px;
+}
+
.replication__input-label {
padding-right: 15px;
width: 160px;
@@ -349,4 +353,4 @@
.replication__activity-caveat {
padding-left: 80px;
-}
\ No newline at end of file
+}
diff --git a/app/addons/replication/components/auth-options.js b/app/addons/replication/components/auth-options.js
index 102a73e..f21f855 100644
--- a/app/addons/replication/components/auth-options.js
+++ b/app/addons/replication/components/auth-options.js
@@ -35,6 +35,14 @@
this.customAuths = [];
}
this.customAuthTypes = this.customAuths.map(auth => auth.typeValue);
+
+ // The extension should provide:
+ // - 'authType' is a string representing the auth type.
+ // - 'helpText' string with the text to be displayed when the auth type is selected.
+ this.customAuthHelp = FauxtonAPI.getExtensions('Replication:Auth-help');
+ if (!this.customAuthHelp) {
+ this.customAuthHelp = [];
+ }
}
getAuthOptions = () => {
@@ -72,6 +80,19 @@
return null;
}
+ getHelpText(authType) {
+ const helpText = this.customAuthHelp.filter(el => authType === el.authType).map(el => el.helpText);
+ if (helpText.length == 0) {
+ return null;
+ }
+
+ return (
+ <div className="replication__section">
+ <div className="replication__input-label"></div>
+ <div className="replication__help-tile">{helpText[0]}</div>
+ </div>);
+ }
+
render () {
const {credentials, authType, authId} = this.props;
return (<React.Fragment>
@@ -88,6 +109,7 @@
</div>
</div>
{this.getAuthInputFields(credentials, authType)}
+ {this.getHelpText(authType)}
</React.Fragment>);
}
}
