refactor: renamed external link keys and implemented review fixes
This commit is contained in:
3
package-lock.json
generated
3
package-lock.json
generated
@@ -24703,7 +24703,8 @@
|
||||
"uuid": {
|
||||
"version": "3.4.0",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
|
||||
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
|
||||
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
|
||||
"dev": true
|
||||
},
|
||||
"v8-compile-cache": {
|
||||
"version": "2.3.0",
|
||||
|
||||
@@ -9,7 +9,7 @@ import * as Yup from 'yup';
|
||||
import { useDispatch } from 'react-redux';
|
||||
|
||||
import AppConfigFormDivider from '../shared/AppConfigFormDivider';
|
||||
import ExternalDocumentations from '../shared/ExternalDocumentations';
|
||||
import AppExternalLinks from '../shared/AppExternalLinks';
|
||||
|
||||
import {
|
||||
updateValidationStatus,
|
||||
@@ -20,6 +20,7 @@ function LtiConfigForm({
|
||||
appConfig, app, onSubmit, intl, formRef, title,
|
||||
}) {
|
||||
const dispatch = useDispatch();
|
||||
const { externalLinks } = app;
|
||||
const {
|
||||
handleSubmit,
|
||||
handleChange,
|
||||
@@ -91,7 +92,7 @@ function LtiConfigForm({
|
||||
</Form.Group>
|
||||
</Form>
|
||||
<AppConfigFormDivider thick />
|
||||
<ExternalDocumentations app={app} title={title} />
|
||||
<AppExternalLinks externalLinks={externalLinks} title={title} />
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -99,12 +100,12 @@ function LtiConfigForm({
|
||||
LtiConfigForm.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,
|
||||
emailId: PropTypes.string,
|
||||
externalLinks: PropTypes.shape({
|
||||
learnMore: PropTypes.string,
|
||||
configuration: PropTypes.string,
|
||||
general: PropTypes.string,
|
||||
accessibility: PropTypes.string,
|
||||
contactEmail: PropTypes.string,
|
||||
}).isRequired,
|
||||
}).isRequired,
|
||||
appConfig: PropTypes.shape({
|
||||
|
||||
@@ -44,22 +44,22 @@ const messages = defineMessages({
|
||||
defaultMessage: 'Contact: {link}',
|
||||
description: 'Contact',
|
||||
},
|
||||
documentation: {
|
||||
general: {
|
||||
id: 'authoring.discussions.appDocInstructions.documentationLink',
|
||||
defaultMessage: 'General documentation',
|
||||
description: 'Application Document Instructions message for documentation link',
|
||||
},
|
||||
accessibility_documentation: {
|
||||
accessibility: {
|
||||
id: 'authoring.discussions.appDocInstructions.accessibilityDocumentationLink',
|
||||
defaultMessage: 'Accessibility documentation',
|
||||
description: 'Application Document Instructions message for accessibility link',
|
||||
},
|
||||
configuration_documentation: {
|
||||
id: 'authoring.discussions.appDocInstructions.configurationDocumentationLink',
|
||||
configuration: {
|
||||
id: 'authoring.discussions.appDocInstructions.configurationLink',
|
||||
defaultMessage: 'Configuration documentation',
|
||||
description: 'Application Document Instructions message for configurations link',
|
||||
},
|
||||
learn_more: {
|
||||
learnMore: {
|
||||
id: 'authoring.discussions.appDocInstructions.learnMoreLink',
|
||||
defaultMessage: 'Learn more about {title}',
|
||||
description: 'Application Document Instructions message for learn more links',
|
||||
|
||||
@@ -0,0 +1,67 @@
|
||||
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';
|
||||
|
||||
function AppExternalLinks({
|
||||
externalLinks,
|
||||
intl,
|
||||
title,
|
||||
}) {
|
||||
const { contactEmail, ...links } = externalLinks;
|
||||
const linkTypes = Object.keys(links);
|
||||
return (
|
||||
<div className="pt-4">
|
||||
<h4>{intl.formatMessage(messages.linkTextHeading)}</h4>
|
||||
<div className="small text-muted">
|
||||
{linkTypes.map((type) => (
|
||||
links[type] && (
|
||||
<div key={type}>
|
||||
<Hyperlink
|
||||
destination={externalLinks[type]}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{intl.formatMessage(messages[type], { title })}
|
||||
</Hyperlink>
|
||||
</div>
|
||||
)
|
||||
))}
|
||||
<hr />
|
||||
{contactEmail && (
|
||||
<FormattedMessage
|
||||
{...messages.contact}
|
||||
values={{
|
||||
link: (
|
||||
<MailtoLink
|
||||
to={contactEmail}
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{contactEmail}
|
||||
</MailtoLink>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
AppExternalLinks.propTypes = {
|
||||
externalLinks: PropTypes.shape({
|
||||
learnMore: PropTypes.string,
|
||||
configuration: PropTypes.string,
|
||||
general: PropTypes.string,
|
||||
accessibility: PropTypes.string,
|
||||
contactEmail: PropTypes.string,
|
||||
}).isRequired,
|
||||
title: PropTypes.string.isRequired,
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(AppExternalLinks);
|
||||
@@ -1,83 +0,0 @@
|
||||
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);
|
||||
@@ -9,7 +9,7 @@ import messages from './messages';
|
||||
|
||||
describe('FeaturesList', () => {
|
||||
const app = {
|
||||
documentationUrls: {},
|
||||
externalLinks: {},
|
||||
featureIds: ['discussion-page', 'embedded-course-sections', 'wcag-2.1'],
|
||||
hasFullSupport: false,
|
||||
id: 'legacy',
|
||||
|
||||
@@ -12,13 +12,13 @@ describe('FeaturesTable', () => {
|
||||
beforeEach(() => {
|
||||
apps = [
|
||||
{
|
||||
documentationUrls: {},
|
||||
externalLinks: {},
|
||||
featureIds: ['discussion-page', 'embedded-course-sections', 'wcag-2.1'],
|
||||
hasFullSupport: false,
|
||||
id: 'legacy',
|
||||
},
|
||||
{
|
||||
documentationUrls: {},
|
||||
externalLinks: {},
|
||||
featureIds: ['discussion-page', 'lti'],
|
||||
hasFullSupport: false,
|
||||
id: 'piazza',
|
||||
|
||||
@@ -48,7 +48,13 @@ function normalizeApps(data) {
|
||||
id: key,
|
||||
featureIds: app.features,
|
||||
// TODO: Fix this and get it from the backend!
|
||||
documentationUrls: app.documentation_urls,
|
||||
externalLinks: {
|
||||
learnMore: app.external_links.learn_more,
|
||||
configuration: app.external_links.configuration,
|
||||
general: app.external_links.general,
|
||||
accessibility: app.external_links.accessibility,
|
||||
contactEmail: app.external_links.contact_email,
|
||||
},
|
||||
hasFullSupport: app.features.length >= data.features.length,
|
||||
}));
|
||||
return {
|
||||
|
||||
@@ -43,12 +43,12 @@ const legacyApp = {
|
||||
'embedded-course-sections',
|
||||
'wcag-2.1',
|
||||
],
|
||||
documentationUrls: {
|
||||
learn_more: '',
|
||||
configuration_documentation: '',
|
||||
documentation: '',
|
||||
accessibility_documentation: '',
|
||||
email_id: '',
|
||||
externalLinks: {
|
||||
learnMore: '',
|
||||
configuration: '',
|
||||
general: '',
|
||||
accessibility: '',
|
||||
contactEmail: '',
|
||||
},
|
||||
hasFullSupport: false,
|
||||
};
|
||||
@@ -61,12 +61,12 @@ const piazzaApp = {
|
||||
'wcag-2.1',
|
||||
'lti',
|
||||
],
|
||||
documentationUrls: {
|
||||
learn_more: '',
|
||||
configuration_documentation: '',
|
||||
documentation: '',
|
||||
accessibility_documentation: '',
|
||||
email_id: '',
|
||||
externalLinks: {
|
||||
learnMore: '',
|
||||
configuration: '',
|
||||
general: '',
|
||||
accessibility: '',
|
||||
contactEmail: '',
|
||||
},
|
||||
hasFullSupport: true,
|
||||
};
|
||||
|
||||
@@ -24,12 +24,12 @@ export const piazzaApiResponse = {
|
||||
'embedded-course-sections',
|
||||
'wcag-2.1',
|
||||
],
|
||||
documentation_urls: {
|
||||
external_links: {
|
||||
learn_more: '',
|
||||
configuration_documentation: '',
|
||||
documentation: '',
|
||||
accessibility_documentation: '',
|
||||
email_id: '',
|
||||
configuration: '',
|
||||
general: '',
|
||||
accessibility: '',
|
||||
contact_email: '',
|
||||
},
|
||||
},
|
||||
piazza: {
|
||||
@@ -40,12 +40,12 @@ export const piazzaApiResponse = {
|
||||
'wcag-2.1',
|
||||
'lti',
|
||||
],
|
||||
documentation_urls: {
|
||||
external_links: {
|
||||
learn_more: '',
|
||||
configuration_documentation: '',
|
||||
documentation: '',
|
||||
accessibility_documentation: '',
|
||||
email_id: '',
|
||||
configuration: '',
|
||||
general: '',
|
||||
accessibility: '',
|
||||
contact_email: '',
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -91,12 +91,12 @@ export const legacyApiResponse = {
|
||||
'embedded-course-sections',
|
||||
'wcag-2.1',
|
||||
],
|
||||
documentation_urls: {
|
||||
external_links: {
|
||||
learn_more: '',
|
||||
configuration_documentation: '',
|
||||
documentation: '',
|
||||
accessibility_documentation: '',
|
||||
email_id: '',
|
||||
configuration: '',
|
||||
general: '',
|
||||
accessibility: '',
|
||||
contact_email: '',
|
||||
},
|
||||
},
|
||||
piazza: {
|
||||
@@ -107,12 +107,12 @@ export const legacyApiResponse = {
|
||||
'wcag-2.1',
|
||||
'lti',
|
||||
],
|
||||
documentation_urls: {
|
||||
external_links: {
|
||||
learn_more: '',
|
||||
configuration_documentation: '',
|
||||
documentation: '',
|
||||
accessibility_documentation: '',
|
||||
email_id: '',
|
||||
configuration: '',
|
||||
general: '',
|
||||
accessibility: '',
|
||||
contact_email: '',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user