- {app.featureIds.includes(feature.id)
- ? SupportedFeature
- : NonSupportedFeature}
- {intl.formatMessage(messages[`featureName-${feature.id}`])}
+ {app.featureIds.map((id) => (
+
+
))}
@@ -51,6 +38,5 @@ FeaturesList.propTypes = {
id: PropTypes.string.isRequired,
featureIds: PropTypes.array.isRequired,
}).isRequired,
- features: PropTypes.arrayOf(PropTypes.object).isRequired,
intl: intlShape.isRequired,
};
diff --git a/src/pages-and-resources/discussions/app-list/SupportedFeature.jsx b/src/pages-and-resources/discussions/app-list/SupportedFeature.jsx
new file mode 100644
index 000000000..baf11dfac
--- /dev/null
+++ b/src/pages-and-resources/discussions/app-list/SupportedFeature.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Check } from '@edx/paragon/icons';
+
+const SupportedFeature = ({ name }) => (
+ <>
+
+
+
+ {name}
+
+);
+
+SupportedFeature.propTypes = {
+ name: PropTypes.string.isRequired,
+};
+
+export default SupportedFeature;
diff --git a/src/pages-and-resources/discussions/app-list/SupportedFeature.test.jsx b/src/pages-and-resources/discussions/app-list/SupportedFeature.test.jsx
new file mode 100644
index 000000000..f30f5e52f
--- /dev/null
+++ b/src/pages-and-resources/discussions/app-list/SupportedFeature.test.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { render, queryByText } from '@testing-library/react';
+
+import SupportedFeature from './SupportedFeature';
+import messages from './messages';
+
+describe('SupportedFeature', () => {
+ const name = messages['featureName-basic-configuration'].defaultMessage;
+ let container;
+
+ beforeEach(() => {
+ const wrapper = render(
+
,
+ );
+ container = wrapper.container;
+ });
+
+ test('displays a check icon ', () => {
+ expect(container.querySelector('svg')).toHaveAttribute('id', 'check-icon');
+ });
+
+ test('displays feature name', () => {
+ expect(queryByText(container, name)).toBeInTheDocument();
+ });
+});