From df6134567ed1e29640a29e78eae730755414464c Mon Sep 17 00:00:00 2001 From: Abdullah Waheed Date: Thu, 28 Jul 2022 14:26:26 +0500 Subject: [PATCH 01/23] refactor: removed paragon Form deprecations from BlackboardIntegrationConfigForm --- .../BlackboardIntegrationConfigForm.jsx | 140 ++++++++---------- 1 file changed, 59 insertions(+), 81 deletions(-) diff --git a/src/components/LmsConfigurations/BlackboardIntegrationConfigForm.jsx b/src/components/LmsConfigurations/BlackboardIntegrationConfigForm.jsx index a756370a8f..280aecd2fa 100644 --- a/src/components/LmsConfigurations/BlackboardIntegrationConfigForm.jsx +++ b/src/components/LmsConfigurations/BlackboardIntegrationConfigForm.jsx @@ -2,12 +2,12 @@ import React from 'react'; import PropTypes from 'prop-types'; import isEmpty from 'lodash/isEmpty'; import { - ValidationFormGroup, - Input, + Form, StatefulButton, Icon, Hyperlink, } from '@edx/paragon'; +import { Error } from '@edx/paragon/icons'; import { snakeCaseFormData } from '../../utils'; import LmsApiService from '../../data/services/LmsApiService'; import StatusAlert from '../StatusAlert'; @@ -20,6 +20,33 @@ export const REQUIRED_BLACKBOARD_CONFIG_FIELDS = [ 'clientSecret', ]; +const BLACKBOARD_FIELDS = [ + { + key: 'blackboardBaseUrl', + invalidMessage: 'Blackboard Instance URL is required.', + helpText: 'Your Blackboard instance URL. Make sure to include the protocol (ie https/http)', + label: 'Blackboard Instance URL', + }, + { + key: 'clientId', + invalidMessage: 'Blackboard client ID is required.', + helpText: 'This should match the API Client ID found on Blackboard.', + label: 'Blackboard Client ID', + }, + { + key: 'clientSecret', + invalidMessage: 'Blackboard client secret is required.', + helpText: 'This should match the API Client secret found on Blackboard.', + label: 'Blackboard Client Secret', + }, + { + key: 'refreshToken', + helpText: "The Blackboard API's refresh token token. This should be automatically propagated once you visit the oauth complete endpoint.", + label: 'Blackboard API Refresh Token', + + }, +]; + class BlackboardIntegrationConfigForm extends React.Component { state = { invalidFields: {}, @@ -126,95 +153,46 @@ class BlackboardIntegrationConfigForm extends React.Component { >
- - - Active + this.setState(prevState => ({ active: !prevState.active }))} + isInline /> - -
-
-
-
- - - - +
-
-
- - - - -
-
-
-
- - - - -
-
-
-
- - - - + {BLACKBOARD_FIELDS.map(backgroundField => ( +
+
+ + {backgroundField.label} + + {backgroundField.helpText} + {invalidFields[backgroundField.key] && backgroundField.invalidMessage && ( + }> + {backgroundField.invalidMessage} + + )} + +
-
+ ))}
From b948bf8c83ae6b75798b59885d3336b7a5365a96 Mon Sep 17 00:00:00 2001 From: Abdullah Waheed Date: Thu, 28 Jul 2022 14:40:18 +0500 Subject: [PATCH 02/23] refactor: removed paragon Form deprecations from CanvasIntegrationConfigForm --- .../CanvasIntegrationConfigForm.jsx | 141 +++++++----------- 1 file changed, 55 insertions(+), 86 deletions(-) diff --git a/src/components/LmsConfigurations/CanvasIntegrationConfigForm.jsx b/src/components/LmsConfigurations/CanvasIntegrationConfigForm.jsx index 23973bed6f..9e400f0855 100644 --- a/src/components/LmsConfigurations/CanvasIntegrationConfigForm.jsx +++ b/src/components/LmsConfigurations/CanvasIntegrationConfigForm.jsx @@ -2,8 +2,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import isEmpty from 'lodash/isEmpty'; import { - ValidationFormGroup, Input, StatefulButton, Icon, + Form, StatefulButton, Icon, } from '@edx/paragon'; +import { Error } from '@edx/paragon/icons'; import { snakeCaseFormData } from '../../utils'; import StatusAlert from '../StatusAlert'; import LmsApiService from '../../data/services/LmsApiService'; @@ -17,6 +18,28 @@ export const REQUIRED_CANVAS_CONFIG_FIELDS = [ 'canvasBaseUrl', ]; +const CANVAS_FIELDS = [ + { + key: 'clientId', + invalidMessage: 'Required. Client Id must not be blank', + label: 'API Client Id', + }, + { + key: 'clientSecret', + invalidMessage: 'Required. Client Secret must not be blank', + label: 'API Client Secret', + }, + { + key: 'canvasAccountId', + invalidMessage: 'Required. Canvas Account Id must not be blank', + label: 'Canvas Account Id', + }, + { + key: 'canvasBaseUrl', + invalidMessage: 'Required. Canvas Base URL must not be blank', + label: 'Canvas Base URL', + }, +]; class CanvasIntegrationConfigForm extends React.Component { state = { invalidFields: {}, @@ -117,11 +140,9 @@ class CanvasIntegrationConfigForm extends React.Component { >
- - - + Active + this.setState(prevState => ({ active: !prevState.active }))} data-hj-suppress + isInline /> - -
-
-
-
- - - this.setState(prevState => ({ clientId: !prevState.clientId }))} - data-hj-suppress - /> - -
-
-
-
- - - this.setState(prevState => ({ clientSecret: !prevState.clientSecret }))} - data-hj-suppress - /> - -
-
-
-
- - - this.setState(prevState => ({ canvasAccountId: !prevState.canvasAccountId }))} - data-hj-suppress - /> - +
-
-
- - - this.setState(prevState => ({ canvasBaseUrl: !prevState.canvasBaseUrl }))} - data-hj-suppress - /> - + {CANVAS_FIELDS.map(canvasField => ( +
+
+ + {canvasField.label} + this.setState( + prevState => ({ [canvasField.key]: !prevState[canvasField.key] }), + )} + data-hj-suppress + /> + {invalidFields[canvasField.key] && canvasField.invalidMessage && ( + }> + {canvasField.invalidMessage} + + )} + +
-
+ ))}
From 8da26210130185e4c5344e4e6756d7aacb1a3894 Mon Sep 17 00:00:00 2001 From: Abdullah Waheed Date: Thu, 28 Jul 2022 14:49:32 +0500 Subject: [PATCH 03/23] refactor: removed paragon Form deprecations from CornerstoneIntegrationConfigForm --- .../CornerstoneIntegrationConfigForm.jsx | 32 ++++++++++--------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/src/components/LmsConfigurations/CornerstoneIntegrationConfigForm.jsx b/src/components/LmsConfigurations/CornerstoneIntegrationConfigForm.jsx index 3c5729d369..3913bdc7f4 100644 --- a/src/components/LmsConfigurations/CornerstoneIntegrationConfigForm.jsx +++ b/src/components/LmsConfigurations/CornerstoneIntegrationConfigForm.jsx @@ -2,8 +2,9 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import isEmpty from 'lodash/isEmpty'; import { - ValidationFormGroup, Input, StatefulButton, Icon, + Form, StatefulButton, Icon, } from '@edx/paragon'; +import { Error } from '@edx/paragon/icons'; import { snakeCaseFormData } from '../../utils'; import LmsApiService from '../../data/services/LmsApiService'; import StatusAlert from '../StatusAlert'; @@ -179,38 +180,39 @@ function CornerstoneIntegrationConfigForm({ enterpriseId, config }) {
- - - + Active + setActive(prevActive => (!prevActive))} /> - +
- - - + Your Cornerstone instance URL. Make sure to include the protocol (ie https/http) + {state.invalidFields.cornerstoneBaseUrl && ( + }> + Cornerstone Instance URL is required. + + )} +
From 6c7853eafd760200565ed3922375d36371672cb1 Mon Sep 17 00:00:00 2001 From: Abdullah Waheed Date: Thu, 28 Jul 2022 15:10:43 +0500 Subject: [PATCH 04/23] refactor: removed paragon Form deprecations from DegreedIntegrationConfigForm --- .../DegreedIntegrationConfigForm.jsx | 192 +++++++----------- 1 file changed, 71 insertions(+), 121 deletions(-) diff --git a/src/components/LmsConfigurations/DegreedIntegrationConfigForm.jsx b/src/components/LmsConfigurations/DegreedIntegrationConfigForm.jsx index 9ba5208a45..6ea96fbadf 100644 --- a/src/components/LmsConfigurations/DegreedIntegrationConfigForm.jsx +++ b/src/components/LmsConfigurations/DegreedIntegrationConfigForm.jsx @@ -2,8 +2,9 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import isEmpty from 'lodash/isEmpty'; import { - ValidationFormGroup, Input, StatefulButton, Icon, + Form, StatefulButton, Icon, } from '@edx/paragon'; +import { Error } from '@edx/paragon/icons'; import { snakeCaseFormData } from '../../utils'; import LmsApiService from '../../data/services/LmsApiService'; import StatusAlert from '../StatusAlert'; @@ -19,6 +20,46 @@ export const REQUIRED_DEGREED_CONFIG_FIELDS = [ 'key', ]; +const DEGREED_FIELDS = [ + { + key: 'degreedCompanyId', + invalidMessage: 'Degreed Organization Code is required.', + helpText: 'The organization code provided to you by Degreed.', + label: 'Degreed Organization Code', + }, + { + key: 'degreedBaseUrl', + invalidMessage: 'Degreed Instance URL is required.', + helpText: 'Your Degreed instance URL. Make sure to include the protocol (ie https/http)', + label: 'Degreed Instance URL', + }, + { + key: 'key', + invalidMessage: 'Degreed API Client ID required.', + helpText: 'The API Client ID used to make calls to Degreed on behalf of the customer.', + label: 'API Client ID', + }, + { + key: 'secret', + invalidMessage: 'Degreed API Client Secret required.', + helpText: 'The API Client Secret used to make calls to Degreed on behalf of the customer.', + label: 'API Client Secret', + }, + { + key: 'degreedUserId', + invalidMessage: 'The Degreed User ID is required to access Degreed via Oauth.', + helpText: 'The Degreed User ID provided to the content provider by Degreed.', + label: 'Degreed User ID', + }, + { + key: 'degreedUserPassword', + invalidMessage: 'The Degreed User Password is required to access Degreed via Oauth.', + helpText: 'The Degreed User Password provided to the content provider by Degreed.', + label: 'Degreed User Password', + type: 'password', + }, +]; + function configFormReducer(state, action) { switch (action.type) { case 'PENDING': { @@ -184,135 +225,44 @@ function DegreedIntegrationConfigForm({ enterpriseId, config }) {
- - - + Active + setActive(prevActive => (!prevActive))} + isInline /> - +
-
-
- - - - + {DEGREED_FIELDS.map(degreedField => ( +
+
+ + {degreedField.label} + + {degreedField.helpText} + {state.invalidFields[degreedField.key] && degreedField.invalidMessage && ( + }> + {degreedField.invalidMessage} + + )} + +
-
-
-
- - - - -
-
-
-
- - - - -
-
-
-
- - - - -
-
-
-
- - - - -
-
-
-
- - - - -
-
+ ))}
From 2caa05a64a904ea4e8348b6644bc7b6815d0d61d Mon Sep 17 00:00:00 2001 From: Abdullah Waheed Date: Thu, 28 Jul 2022 15:49:33 +0500 Subject: [PATCH 05/23] refactor: removed paragon Form deprecations from MoodleIntegrationConfigForm --- .../MoodleIntegrationConfigForm.jsx | 195 +++++++----------- 1 file changed, 76 insertions(+), 119 deletions(-) diff --git a/src/components/LmsConfigurations/MoodleIntegrationConfigForm.jsx b/src/components/LmsConfigurations/MoodleIntegrationConfigForm.jsx index f7495ae560..b1c891ef47 100644 --- a/src/components/LmsConfigurations/MoodleIntegrationConfigForm.jsx +++ b/src/components/LmsConfigurations/MoodleIntegrationConfigForm.jsx @@ -2,8 +2,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import isEmpty from 'lodash/isEmpty'; import { - ValidationFormGroup, Input, StatefulButton, Icon, + Form, StatefulButton, Icon, } from '@edx/paragon'; +import { Error } from '@edx/paragon/icons'; import { snakeCaseFormData } from '../../utils'; import LmsApiService from '../../data/services/LmsApiService'; import StatusAlert from '../StatusAlert'; @@ -15,6 +16,48 @@ export const REQUIRED_MOODLE_CONFIG_FIELDS = [ 'serviceShortName', ]; +const MOODL_FIELDS = [ + { + key: 'moodleBaseUrl', + invalidMessage: 'Moodle Instance URL is required.', + helpText: 'Your Moodle instance URL. Make sure to include the protocol (ie https/http)', + label: 'Moodle Instance URL', + }, + { + key: 'serviceShortName', + invalidMessage: 'Webservice name is required.', + helpText: 'This should match the webservice\'s short name in Moodle.', + label: 'Webservice\'s Short Name', + }, + { + key: 'categoryId', + helpText: 'The category id all edX courses will be added under. Default is 1 (Miscellaneous)', + type: 'number', + label: 'Moodle Category ID', + }, + { + key: 'username', + invalidMessage: 'A username and password must be provided when a token is not. However, you should not provide both user credentials and token.', + helpText: 'The Webservice\'s username in Moodle. You must provide this and password or a token', + label: 'Webservice Username', + invalidAdditionalCondition: 'duplicateCreds', + }, + { + key: 'password', + invalidMessage: 'A username and password must be provided when a token is not. However, you should not provide both user credentials and token.', + helpText: 'The Webservice\'s password in Moodle. You must provide this and username or a token', + label: 'Webservice Password', + invalidAdditionalCondition: 'duplicateCreds', + }, + { + key: 'token', + invalidMessage: 'A token must be provided when username/password is not. However, you should not provide both user credentials and token.', + helpText: 'The Webservice user\'s auth token. Use this in place of a username/password.', + label: 'Webservice Auth Token', + invalidAdditionalCondition: 'duplicateCreds', + }, +]; + class MoodleIntegrationConfigForm extends React.Component { state = { invalidFields: {}, @@ -137,133 +180,47 @@ class MoodleIntegrationConfigForm extends React.Component { >
- - - + Active + this.setState(prevState => ({ active: !prevState.active }))} + isInline /> - -
-
-
-
- - - - -
-
-
-
- - - - -
-
-
-
- - - - +
-
-
- - - - -
-
-
-
- - - - -
-
-
-
- - - - + + {MOODL_FIELDS.map(moodleField => ( +
+
+ + {moodleField.label} + + {moodleField.helpText} + {(invalidFields[moodleField.key] || invalidFields[moodleField.invalidAdditionalCondition]) + && moodleField.invalidMessage && ( + }> + {moodleField.invalidMessage} + + )} + +
-
+ ))}
From c3c430be7084fd4488b2919d00084107b63abdaa Mon Sep 17 00:00:00 2001 From: Abdullah Waheed Date: Thu, 28 Jul 2022 18:40:56 +0500 Subject: [PATCH 06/23] refactor: removed paragon Form deprecations from SuccessFactorsIntegrationConfigForm --- .../MoodleIntegrationConfigForm.jsx | 4 +- .../SuccessFactorsIntegrationConfigForm.jsx | 255 ++++++++---------- 2 files changed, 116 insertions(+), 143 deletions(-) diff --git a/src/components/LmsConfigurations/MoodleIntegrationConfigForm.jsx b/src/components/LmsConfigurations/MoodleIntegrationConfigForm.jsx index b1c891ef47..bfa14c34cc 100644 --- a/src/components/LmsConfigurations/MoodleIntegrationConfigForm.jsx +++ b/src/components/LmsConfigurations/MoodleIntegrationConfigForm.jsx @@ -16,7 +16,7 @@ export const REQUIRED_MOODLE_CONFIG_FIELDS = [ 'serviceShortName', ]; -const MOODL_FIELDS = [ +const MOODLE_FIELDS = [ { key: 'moodleBaseUrl', invalidMessage: 'Moodle Instance URL is required.', @@ -194,7 +194,7 @@ class MoodleIntegrationConfigForm extends React.Component {
- {MOODL_FIELDS.map(moodleField => ( + {MOODLE_FIELDS.map(moodleField => (
{ + const { invalidFields } = this.state; + const { config } = this.props; + return ( +
+
+ + {data.label} + + {data.helpText} + {invalidFields[data.key] && data.invalidMessage && ( + }> + {data.invalidMessage} + + )} + +
+
+ ); + } + render() { const { invalidFields, @@ -109,6 +176,16 @@ class SuccessFactorsIntegrationConfigForm extends React.Component { } = this.state; const { config } = this.props; + const userTypeOptions = [ + { value: 'admin', label: 'Admin' }, + { value: 'user', label: 'User' }, + { value: null, label: 'blank', hidden: true }, + ].map(userType => ( + + )); + return (
{ @@ -120,174 +197,70 @@ class SuccessFactorsIntegrationConfigForm extends React.Component { >
- - - + Active + this.setState(prevState => ({ active: !prevState.active }))} + isInline /> - -
-
-
-
- - - - -
-
-
-
- - - - -
-
-
-
- - - - -
-
-
-
- - - - -
-
-
-
- - - - +
+ + {SUCCESS_FACTOR_FIELDS.map(this.renderField)} +
- - - + > + {userTypeOptions} + + Type of SAP User (admin or user). + {invalidFields.userType && ( + }> + Success Factors' User Type is required. + + )} +
- - - + Transmit Total Hours? + this.setState(prevState => ({ transmitTotalHours: !prevState.transmitTotalHours }))} data-hj-suppress + isInline /> - -
-
-
-
- - - - + Include totalHours in the transmitted completion data. +
+ {this.renderField({ + key: 'additionalLocales', + helpText: "A comma separated list of any additional locales used in SAP (such as 'Dutch' or 'English Canadian'). See SAP's documentation for more examples.", + label: 'Additional Locales', + })}
From 6b621c6188d8b6cfb16154d85d81fed881d42391 Mon Sep 17 00:00:00 2001 From: Abdullah Waheed Date: Thu, 28 Jul 2022 20:59:28 +0500 Subject: [PATCH 07/23] refactor: removed paragon ValidationFormGroup deprecations from ReduxFormCheckbox --- .../ReduxFormCheckbox/CheckboxWithTooltip.scss | 2 +- src/components/ReduxFormCheckbox/index.jsx | 10 ++++------ 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/src/components/ReduxFormCheckbox/CheckboxWithTooltip.scss b/src/components/ReduxFormCheckbox/CheckboxWithTooltip.scss index 1984ef6e0b..fcc86d5a9e 100644 --- a/src/components/ReduxFormCheckbox/CheckboxWithTooltip.scss +++ b/src/components/ReduxFormCheckbox/CheckboxWithTooltip.scss @@ -1,7 +1,7 @@ .checkbox-with-tooltip { display: flex; align-items: center; - .form-group { + .pgn__form-group { margin-bottom: 0; } } diff --git a/src/components/ReduxFormCheckbox/index.jsx b/src/components/ReduxFormCheckbox/index.jsx index f6971d15d9..33b7bbc663 100644 --- a/src/components/ReduxFormCheckbox/index.jsx +++ b/src/components/ReduxFormCheckbox/index.jsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Form, ValidationFormGroup } from '@edx/paragon'; +import { Form } from '@edx/paragon'; const ReduxFormCheckbox = (props) => { const { @@ -12,10 +12,7 @@ const ReduxFormCheckbox = (props) => { } = props; return ( - + { checked={input.checked} label={label} /> - + {helptext && {helptext}} + ); }; From ff8f0f0902f3439d039dc7c817b0cbdd9949a311 Mon Sep 17 00:00:00 2001 From: Abdullah Waheed Date: Fri, 29 Jul 2022 10:20:47 +0500 Subject: [PATCH 08/23] refactor: removed paragon Form deprecations from EmailDeliveryMethodForm --- .../EmailDeliveryMethodForm.jsx | 52 ++++++++++++------- 1 file changed, 32 insertions(+), 20 deletions(-) diff --git a/src/components/ReportingConfig/EmailDeliveryMethodForm.jsx b/src/components/ReportingConfig/EmailDeliveryMethodForm.jsx index 19ca516ed7..65ff11aa2e 100644 --- a/src/components/ReportingConfig/EmailDeliveryMethodForm.jsx +++ b/src/components/ReportingConfig/EmailDeliveryMethodForm.jsx @@ -1,6 +1,8 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; -import { Input, ValidationFormGroup } from '@edx/paragon'; +import { Form } from '@edx/paragon'; +import { Error } from '@edx/paragon/icons'; + import isEmpty from 'lodash/isEmpty'; import isEmail from 'validator/lib/isEmail'; @@ -10,15 +12,13 @@ const EmailDeliveryMethodForm = ({ invalidFields, config, handleBlur }) => { return (
- - - Email(s) + { })} data-hj-suppress /> - + The email(s), one per line, where the report should be sent + {invalidFields.emailRaw && ( + }> + Required. One email per line. Emails must be formatted properly (email@domain.com) + + )} + {config && (
- - Change Password + setChecked(!checked)} + isInline />
)} - - - Password + { onBlur={e => handleBlur(e)} data-hj-suppress /> - + + This password will be used to secure the zip file. It will be encrypted when stored in the database. + + {invalidFields.emailRaw && ( + }> + Required. Password must not be blank + + )} +
); From bc8b770049a7a6b17c72307ef249d82910884601 Mon Sep 17 00:00:00 2001 From: Abdullah Waheed Date: Fri, 29 Jul 2022 13:22:55 +0500 Subject: [PATCH 09/23] refactor: removed paragon Form deprecations from ReportingConfigForm --- .../SuccessFactorsIntegrationConfigForm.jsx | 4 +- .../ReportingConfig/ReportingConfigForm.jsx | 301 ++++++++++-------- 2 files changed, 161 insertions(+), 144 deletions(-) diff --git a/src/components/LmsConfigurations/SuccessFactorsIntegrationConfigForm.jsx b/src/components/LmsConfigurations/SuccessFactorsIntegrationConfigForm.jsx index 23808421d0..3db098154b 100644 --- a/src/components/LmsConfigurations/SuccessFactorsIntegrationConfigForm.jsx +++ b/src/components/LmsConfigurations/SuccessFactorsIntegrationConfigForm.jsx @@ -218,10 +218,8 @@ class SuccessFactorsIntegrationConfigForm extends React.Component { - + SAP Success Factors User Type { + const { config, reportingConfigTypes } = this.props; + const { invalidFields } = this.state; + const options = data.options.map(userType => ( + + )); + const otherProps = { + ...data.multiple && { multiple: data.multiple }, + ...data.onChange && { onChange: data.onChange }, + }; + + return ( + + {data.label} + + {options} + + {data.helpText && {data.helpText}} + {invalidFields[data.key] && data.invalidMessage && ( + }> + {data.invalidMessage} + + )} + + ); + } + + renderNumberField = data => { + const { invalidFields } = this.state; + const { config } = this.props; + const otherProps = { + ...data.max && { max: data.max }, + ...data.min && { min: data.min }, + }; + return ( + + {data.label} + this.handleBlur(e)} + {...otherProps} + /> + {data.helpText} + {invalidFields[data.key] && data.invalidMessage && ( + }> + {data.invalidMessage} + + )} + + ); + } + render() { const { config, availableCatalogs, reportingConfigTypes } = this.props; const { @@ -157,148 +232,95 @@ class ReportingConfigForm extends React.Component { onChange={() => this.setState({ submitState: SUBMIT_STATES.DEFAULT })} >
- - - + Active + this.setState(prevState => ({ active: !prevState.active }))} + isInline /> - +
- - - - - - - ({ label: item[1], value: item[0] }))} - /> - + {this.renderSelect({ + key: 'dataType', + helpText: 'The type of data this report should contain. If this is an old report, you will not be able to change this field, and should create a new report', + label: 'Data Type', + options: [...dataTypesOptions, ...selectedDataTypesOption], + disabled: config && !dataTypesOptionsValues.includes(config.dataType), + })} + {this.renderSelect({ + key: 'reportType', + helpText: 'The type this report should be sent as, e.g. CSV', + label: 'Report Type', + options: reportingConfigTypes.reportType.map(item => ({ label: item[1], value: item[0] })), + })}
- - - ({ label: item[1], value: item[0] }))} - onChange={e => this.setState({ deliveryMethod: e.target.value })} - /> - - - - ({ label: item[1], value: item[0] }))} - onChange={e => this.setState({ frequency: e.target.value })} - /> - + {this.renderSelect({ + key: 'deliveryMethod', + helpText: 'The method in which the data should be sent', + label: 'Delivery Method', + options: reportingConfigTypes.deliveryMethod.map(item => ({ label: item[1], value: item[0] })), + onChange: event => this.setState({ deliveryMethod: event.target.value }), + })} + {this.renderSelect({ + key: 'frequency', + helpText: 'The frequency interval (daily, weekly, or monthly) that the report should be sent', + label: 'Frequency', + options: reportingConfigTypes.frequency.map(item => ({ label: item[1], value: item[0] })), + defaultValue: frequency, + onChange: event => this.setState({ frequency: event.target.value }), + })}
- - - this.handleBlur(e)} - /> - + {this.renderNumberField({ + key: 'dayOfMonth', + helpText: 'The day of the month to send the report. This field is required and only valid when the frequency is monthly', + isInvalid: frequency === 'monthly' && invalidFields.dayOfMonth, + label: 'Day of Month', + max: MONTHLY_MAX, + min: MONTHLY_MIN, + disabled: !(frequency === 'monthly'), + onBlur: event => this.handleBlur(event), + })}
- - - ({ label: item[1], value: item[0] }))} - defaultValue={config ? config.dayOfWeek : undefined} - /> - + {this.renderSelect({ + key: 'dayOfWeek', + helpText: 'The day of the week to send the report. This field is required and only valid when the frequency is weekly', + label: 'Day of Week', + options: reportingConfigTypes.dayOfWeek.map(item => ({ label: item[1], value: item[0] })), + disabled: !(frequency === 'weekly'), + // onChange: event => this.setState({ deliveryMethod: event.target.value }), + })}
- - - this.handleBlur(e)} - /> - + {this.renderNumberField({ + key: 'hourOfDay', + helpText: 'The hour of the day to send the report, in Eastern Standard Time (EST). This is required for all frequency settings', + invalidMessage: 'Required for all frequency types', + label: 'Hour of Day', + })}
- - - + PGP Encryption Key + - + The key for encyption, if PGP encrypted file is required + {deliveryMethod === 'email' && ( )}
- - - ({ - value: item.uuid, - label: `Catalog "${item.title}" with UUID "${item.uuid}"`, - })) - } - /> - + {this.renderSelect({ + key: 'enterpriseCustomerCatalogs', + helpText: 'The catalogs that should be included in the report. No selection means all catalogs will be included.', + label: 'Enterprise Customer Catalogs', + options: availableCatalogs.map(item => ({ + value: item.uuid, + label: `Catalog "${item.title}" with UUID "${item.uuid}"`, + })), + // TODO + multiple: true, + defaultValue: selectedCatalogs, + })}
- - + {submitState === SUBMIT_STATES.ERROR && ( + }> + There was an error submitting, please try again. + + )} + {config && (