feat: when there are no providers, show an error message (#68)

src/pages-and-resources/discussions/AppList.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { CardGrid } from '@edx/paragon';
+import { CardGrid, Container } from '@edx/paragon';
 import { useSelector } from 'react-redux';
 
 import { useModels } from '../../generic/model-store';
@@ -18,6 +18,14 @@ function AppList({
   const apps = useModels('apps', appIds);
   const features = useModels('features', featureIds);
 
+  if (apps.length === 0) {
+    return (
+      <Container className="mt-5">
+        <p>{intl.formatMessage(messages.noApps)}</p>
+      </Container>
+    );
+  }
+
   return (
     <div className="m-5">
       <h2 className="my-4 text-center">{intl.formatMessage(messages.heading)}</h2>

src/pages-and-resources/discussions/messages.js

@@ -70,6 +70,12 @@ const messages = defineMessages({
     defaultMessage: 'Partial support',
     description: 'A label indicating that an app only supports a subset of the possible features of a discussions app.',
   },
+  noApps: {
+    id: 'authoring.discussions.noApps',
+    defaultMessage: 'There are no discussions providers available for your course.',
+    description: 'A message shown when there are no discussions providers available to be displayed.',
+  },
+
   // Legacy
   'appName-legacy': {
     id: 'authoring.discussions.appName-legacy',