refactor: renamed external link keys and implemented review fixes

This commit is contained in:
Mehak Nasir
2021-06-10 14:50:34 +05:00
committed by Mehak Nasir
parent dafc489c6a
commit 1b4b30677e
10 changed files with 125 additions and 133 deletions

3
package-lock.json generated
View File

@@ -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",

View File

@@ -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({

View File

@@ -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',

View File

@@ -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);

View File

@@ -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);

View File

@@ -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',

View File

@@ -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',

View File

@@ -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 {

View File

@@ -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,
};

View File

@@ -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: '',
},
},
},