diff --git a/src/pages-and-resources/discussions/app-config-form/apps/lti/LtiConfigForm.jsx b/src/pages-and-resources/discussions/app-config-form/apps/lti/LtiConfigForm.jsx index 0f7b75878..01f7314f4 100644 --- a/src/pages-and-resources/discussions/app-config-form/apps/lti/LtiConfigForm.jsx +++ b/src/pages-and-resources/discussions/app-config-form/apps/lti/LtiConfigForm.jsx @@ -1,66 +1,21 @@ import React, { useEffect } from 'react'; import PropTypes from 'prop-types'; -import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; import { - Card, Form, Hyperlink, MailtoLink, + Card, Form, } from '@edx/paragon'; import { useFormik } from 'formik'; import * as Yup from 'yup'; import { useDispatch } from 'react-redux'; +import AppConfigFormDivider from '../shared/AppConfigFormDivider'; +import ExternalDocumentations from '../shared/ExternalDocumentations'; + import { updateValidationStatus, } from '../../../data/slice'; import messages from './messages'; -const messageFormatting = (title, instructionType, intl, documentationUrls) => ( - documentationUrls[instructionType] - && ( - <> - - {documentationUrls[instructionType]} - - ) - : ( - - {instructionType === 'learn_more' ? intl.formatMessage(messages.reviewLinkText) : intl.formatMessage(messages.linkText)} - - ) - ), - title, - email_address: documentationUrls.emailId, - }} - /> - - ) -); - -const appDocInstructions = (app, intl, title) => { - const { documentationUrls } = app; - const appInstructions = Object.keys(documentationUrls); - return ( - <> - {appInstructions.map((instructionType) => ( - messageFormatting(title, instructionType, intl, documentationUrls) - ))} - - ); -}; - function LtiConfigForm({ appConfig, app, onSubmit, intl, formRef, title, }) { @@ -91,12 +46,10 @@ function LtiConfigForm({ }, [errors]); return ( - +

{title}

-

- {appDocInstructions(app, intl, title)} -

+

{intl.formatMessage(messages.formInstructions)}

+ +
); } diff --git a/src/pages-and-resources/discussions/app-config-form/apps/lti/messages.js b/src/pages-and-resources/discussions/app-config-form/apps/lti/messages.js index 1926f79c1..f5ba371be 100644 --- a/src/pages-and-resources/discussions/app-config-form/apps/lti/messages.js +++ b/src/pages-and-resources/discussions/app-config-form/apps/lti/messages.js @@ -5,6 +5,10 @@ const messages = defineMessages({ id: 'authoring.discussions.documentationPage', defaultMessage: 'Visit the {name} documentation page', }, + formInstructions: { + id: 'authoring.discussions.formInstructions', + defaultMessage: 'Complete the fields below to set up your discussion tool.', + }, consumerKey: { id: 'authoring.discussions.consumerKey', defaultMessage: 'Consumer Key', @@ -35,40 +39,40 @@ const messages = defineMessages({ defaultMessage: 'Launch URL is a required field', description: 'Tells the user that the Launch URL field is required and must have a value.', }, - emailId: { - id: 'authoring.discussions.appDocInstructions.emailID', - defaultMessage: 'To get in touch with the team at {title} you may reach them at {link}.', - description: 'Application Document Instructions message for email id', + contact: { + id: 'authoring.discussions.appDocInstructions.contact', + defaultMessage: 'Contact: {link}', + description: 'Contact', }, documentation: { id: 'authoring.discussions.appDocInstructions.documentationLink', - defaultMessage: 'General documentation for this tool can be found on {link}.', + defaultMessage: 'General documentation', description: 'Application Document Instructions message for documentation link', }, - accessibilityDocumentation: { + accessibility_documentation: { id: 'authoring.discussions.appDocInstructions.accessibilityDocumentationLink', - defaultMessage: "Additional details on this tool's accessibility documentation can be found on {link}.", + defaultMessage: 'Accessibility documentation', description: 'Application Document Instructions message for accessibility link', }, - configurationDocumentation: { + configuration_documentation: { id: 'authoring.discussions.appDocInstructions.configurationDocumentationLink', - defaultMessage: 'Configuration documentation can be found on {link}.', + defaultMessage: 'Configuration documentation', description: 'Application Document Instructions message for configurations link', }, - learnMore: { + learn_more: { id: 'authoring.discussions.appDocInstructions.learnMoreLink', - defaultMessage: 'To learn more about {title} you can {link}.', + defaultMessage: 'Learn more about {title}', description: 'Application Document Instructions message for learn more links', }, - reviewLinkText: { - id: 'authoring.discussions.appDocInstructions.reviewLink', - defaultMessage: 'review this page', - description: 'learn more link text', + linkTextHeading: { + id: 'authoring.discussions.appDocInstructions.linkTextHeading', + defaultMessage: 'External help and documentation', + description: 'External help and documentation heading', }, linkText: { id: 'authoring.discussions.appDocInstructions.linkText', - defaultMessage: 'this page', - description: 'general link text', + defaultMessage: '{link}', + description: 'link', }, }); diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/ExternalDocumentations.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/ExternalDocumentations.jsx new file mode 100644 index 000000000..2e8412ee6 --- /dev/null +++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/ExternalDocumentations.jsx @@ -0,0 +1,83 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { + Hyperlink, MailtoLink, +} from '@edx/paragon'; + +import messages from '../lti/messages'; + +const messageFormatting = (title, instructionType, intl, documentationUrls) => ( + documentationUrls[instructionType] + && instructionType !== 'email_id' && ( +
+ + + + ), + }} + /> +
+ ) +); + +function ExternalDocumentations({ + app, intl, title, +}) { + const { documentationUrls } = app; + const appInstructions = Object.keys(documentationUrls); + return ( +
+

{intl.formatMessage(messages.linkTextHeading)}

+
+ {appInstructions.map((instructionType) => ( + messageFormatting(title, instructionType, intl, documentationUrls) + ))} +
+ {documentationUrls.email_id && ( + + {documentationUrls.email_id} + + ), + }} + /> + )} +
+
+ ); +} + +ExternalDocumentations.propTypes = { + app: PropTypes.shape({ + id: PropTypes.string.isRequired, + documentationUrls: PropTypes.shape({ + learn_more: PropTypes.string, + configuration_documentation: PropTypes.string, + documentation: PropTypes.string, + accessibility_documentation: PropTypes.string, + email_id: PropTypes.string, + }).isRequired, + }).isRequired, + intl: intlShape.isRequired, + title: PropTypes.string.isRequired, +}; + +export default injectIntl(ExternalDocumentations);