Merge pull request #185 from openedx/inf-283

fix: show no preview avaiable if preview has image or mathjax

src/discussions/discussions-home/DiscussionSidebar.test.jsx

@@ -73,7 +73,10 @@ describe('DiscussionSidebar', () => {
   test('User will be redirected to "All Posts" by default', async () => {
     axiosMock.onGet(threadsApiUrl)
       .reply(({ params }) => [200, Factory.build('threadsResult', {}, {
-        threadAttrs: { title: `Thread by ${params.author || 'other users'}` },
+        threadAttrs: {
+          title: `Thread by ${params.author || 'other users'}`,
+          previewBody: 'thread preview body',
+        },
       })]);
     renderComponent();
     await act(async () => expect(await screen.findAllByText('Thread by other users')).toBeTruthy());
@@ -85,7 +88,10 @@ describe('DiscussionSidebar', () => {
     axiosMock.onGet(threadsApiUrl)
       .reply(({ params }) => [200, Factory.build('threadsResult', {}, {
         count: postCount,
-        threadAttrs: { title: `Thread by ${params.author || 'other users'}` },
+        threadAttrs: {
+          title: `Thread by ${params.author || 'other users'}`,
+          previewBody: 'thread preview body',
+        },
       })]);
     renderComponent();
     await act(async () => expect(await screen.findAllByText('Thread by other users')).toBeTruthy());

src/discussions/posts/PostsView.test.jsx

@@ -94,7 +94,7 @@ describe('PostsView', () => {
     axiosMock.onGet(getCohortsApiUrl(courseId)).reply(200, Factory.buildList('cohort', 1));
     axiosMock.onGet(threadsApiUrl)
       .reply((args) => {
-        const threadAttrs = {};
+        const threadAttrs = { previewBody: 'thread preview body' };
         if (args.params.author) {
           threadAttrs.author = args.params.author;
         }

src/discussions/posts/post/PostLink.jsx

@@ -7,11 +7,10 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Badge, Icon } from '@edx/paragon';
 import { Bookmark } from '@edx/paragon/icons';
 
-import HTMLLoader from '../../../components/HTMLLoader';
 import { AvatarBorderAndLabelColors, Routes, ThreadType } from '../../../data/constants';
 import AuthorLabel from '../../common/AuthorLabel';
 import { DiscussionContext } from '../../common/context';
-import { discussionsPath } from '../../utils';
+import { discussionsPath, isPostPreviewAvailable } from '../../utils';
 import messages from './messages';
 import PostFooter from './PostFooter';
 import { PostAvatar } from './PostHeader';
@@ -84,7 +83,9 @@ function PostLink({
             </div>
           </div>
           <div className="text-truncate text-primary-500 font-weight-normal font-size-14 font-style-normal font-family-inter" style={{ 'max-height': '1.6em' }}>
-            <HTMLLoader htmlNode={post.renderedBody || post.rawBody} />
+            {isPostPreviewAvailable(post.previewBody)
+              ? post.previewBody
+              : intl.formatMessage(messages.postWithoutPreview)}
           </div>
           <PostFooter post={post} preview intl={intl} />
         </div>

src/discussions/posts/post/messages.js

@@ -111,6 +111,11 @@ const messages = defineMessages({
     defaultMessage: 'Reason',
     description: 'Message shown to user to inform them why a post was edited',
   },
+  postWithoutPreview: {
+    id: 'discussions.post.postWithoutPreview',
+    defaultMessage: 'No preview available',
+    description: 'No preview available',
+  },
 });
 
 export default messages;

src/discussions/utils.js

@@ -224,3 +224,17 @@ export function postMessageToParent(type, payload = {}) {
     });
   }
 }
+
+export const isPostPreviewAvailable = (htmlNode) => {
+  const containsImage = htmlNode.match(/(<img((?:\\.|.)*)>)/);
+  const isLatex = htmlNode.match(/(\${1,2})((?:\\.|.)*)/)
+                  || htmlNode.match(/(\[mathjax](.+?))+/)
+                  || htmlNode.match(/(\[mathjaxinline](.+?))+/)
+                  || htmlNode.match(/(\\\[(.+?))+/)
+                  || htmlNode.match(/(\\\((.+?))+/);
+
+  if (containsImage || isLatex || htmlNode === '') {
+    return false;
+  }
+  return true;
+};