Refactor: updated LTI Config form screen according to new figma design

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]
-  && (
-    <>
-      <FormattedMessage
-        {...messages[instructionType]}
-        values={{
-          link: (
-            instructionType === 'email_id'
-              ? (
-                <MailtoLink
-                  to={documentationUrls[instructionType]}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {documentationUrls[instructionType]}
-                </MailtoLink>
-              )
-              : (
-                <Hyperlink
-                  destination={documentationUrls[instructionType]}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {instructionType === 'learn_more' ? intl.formatMessage(messages.reviewLinkText) : intl.formatMessage(messages.linkText)}
-                </Hyperlink>
-              )
-          ),
-          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 (
-    <Card className="mb-5 p-4" data-testid="ltiConfigForm">
+    <Card className="mb-5 p-5" data-testid="ltiConfigForm">
       <Form ref={formRef} onSubmit={handleSubmit}>
         <h3 className="mb-3">{title}</h3>
-        <p className="mb-4">
-          {appDocInstructions(app, intl, title)}
-        </p>
+        <p>{intl.formatMessage(messages.formInstructions)}</p>
         <Form.Group controlId="consumerKey" isInvalid={isInvalidConsumerKey} className="mb-4">
           <Form.Control
             floatingLabel={intl.formatMessage(messages.consumerKey)}
@@ -137,6 +90,8 @@ function LtiConfigForm({
           )}
         </Form.Group>
       </Form>
+      <AppConfigFormDivider thick />
+      <ExternalDocumentations app={app} title={title} />
     </Card>
   );
 }

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',
   },
 });
 

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' && (
+    <div key={instructionType}>
+      <FormattedMessage
+        {...messages.linkText}
+        values={{
+          link: (
+            <Hyperlink
+              destination={documentationUrls[instructionType]}
+            >
+              <FormattedMessage
+                {...messages[instructionType]}
+                values={{
+                  title,
+                }}
+              />
+            </Hyperlink>
+          ),
+        }}
+      />
+    </div>
+  )
+);
+
+function ExternalDocumentations({
+  app, intl, title,
+}) {
+  const { documentationUrls } = app;
+  const appInstructions = Object.keys(documentationUrls);
+  return (
+    <div className="pt-4">
+      <h4>{intl.formatMessage(messages.linkTextHeading)}</h4>
+      <div className="small text-muted">
+        {appInstructions.map((instructionType) => (
+          messageFormatting(title, instructionType, intl, documentationUrls)
+        ))}
+        <hr />
+        {documentationUrls.email_id && (
+          <FormattedMessage
+            {...messages.contact}
+            values={{
+              link: (
+                <MailtoLink
+                  to={documentationUrls.email_id}
+                  rel="noopener noreferrer"
+                >
+                  {documentationUrls.email_id}
+                </MailtoLink>
+              ),
+            }}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+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);