Merge pull request #348 from openedx/revert-341-INF-528

Closing because the original UX change is no more needed hence this fix in design in not needed anymore

src/discussions/common/AuthorLabel.jsx

@@ -65,7 +65,7 @@ function AuthorLabel({
       )}
       {authorLabelMessage && (
         <span
-          className={classNames('mr-3 font-size-14 font-style-normal font-family-inter font-weight-500', {
+          className={classNames('mr-1 font-size-14 font-style-normal font-family-inter font-weight-500', {
             'text-primary-500': !authorLabelMessage,
           })}
           style={{ marginLeft: '2px' }}

src/discussions/posts/post/Post.jsx

@@ -5,12 +5,14 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useLocation } from 'react-router-dom';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { useToggle } from '@edx/paragon';
+import { Hyperlink, useToggle } from '@edx/paragon';
 
 import HTMLLoader from '../../../components/HTMLLoader';
 import { ContentActions } from '../../../data/constants';
+import { selectorForUnitSubsection, selectTopicContext } from '../../../data/selectors';
 import { AlertBanner, DeleteConfirmation } from '../../common';
 import { selectModerationSettings } from '../../data/selectors';
+import { selectTopic } from '../../topics/data/selectors';
 import { removeThread, updateExistingThread } from '../data/thunks';
 import ClosePostReasonModal from './ClosePostReasonModal';
 import messages from './messages';
@@ -27,7 +29,9 @@ function Post({
   const history = useHistory();
   const dispatch = useDispatch();
   const { courseId } = useSelector((state) => state.courseTabs);
-
+  const topic = useSelector(selectTopic(post.topicId));
+  const getTopicSubsection = useSelector(selectorForUnitSubsection);
+  const topicContext = useSelector(selectTopicContext(post.topicId));
   const { reasonCodesEnabled } = useSelector(selectModerationSettings);
   const [isDeleting, showDeleteConfirmation, hideDeleteConfirmation] = useToggle(false);
   const [isClosing, showClosePostModal, hideClosePostModal] = useToggle(false);
@@ -51,6 +55,10 @@ function Post({
     [ContentActions.REPORT]: () => dispatch(updateExistingThread(post.id, { flagged: !post.abuseFlagged })),
   };
 
+  const getTopicCategoryName = topicData => (
+    topicData.usageKey ? getTopicSubsection(topicData.usageKey)?.displayName : topicData.categoryId
+  );
+
   return (
     <div className="d-flex flex-column w-100 mw-100" data-testid={`post-${post.id}`}>
       <DeleteConfirmation
@@ -69,7 +77,17 @@ function Post({
       <div className="d-flex mt-4 mb-2 text-break font-style-normal text-primary-500">
         <HTMLLoader htmlNode={post.renderedBody} id="post" />
       </div>
-
+      {topicContext && topic && (
+        <div className="border px-3 rounded mb-4 border-light-400 align-self-start py-2.5">
+          <span className="text-gray-500">{intl.formatMessage(messages.relatedTo)}{' '}</span>
+          <Hyperlink
+            destination={topicContext.unitLink}
+            target="_top"
+          >
+            {`${getTopicCategoryName(topic)} / ${topic.name}`}
+          </Hyperlink>
+        </div>
+      )}
       <div className="mb-3">
         <PostFooter post={post} preview={preview} />
       </div>

src/discussions/posts/post/PostHeader.jsx

@@ -5,16 +5,12 @@ import classNames from 'classnames';
 import { useSelector } from 'react-redux';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import {
-  Avatar, Badge, Hyperlink, Icon,
-} from '@edx/paragon';
+import { Avatar, Badge, Icon } from '@edx/paragon';
 
 import { Issue, Question } from '../../../components/icons';
 import { AvatarOutlineAndLabelColors, ThreadType } from '../../../data/constants';
-import { selectorForUnitSubsection, selectTopicContext } from '../../../data/selectors';
 import { ActionsDropdown, AuthorLabel } from '../../common';
 import { useAlertBannerVisible } from '../../data/hooks';
-import { selectTopic } from '../../topics/data/selectors';
 import { selectAuthorAvatars } from '../data/selectors';
 import messages from './messages';
 import { postShape } from './proptypes';
@@ -95,13 +91,6 @@ function PostHeader({
   const showAnsweredBadge = preview && post.hasEndorsed && post.type === ThreadType.QUESTION;
   const authorLabelColor = AvatarOutlineAndLabelColors[post.authorLabel];
   const hasAnyAlert = useAlertBannerVisible(post);
-  const topic = useSelector(selectTopic(post.topicId));
-  const topicContext = useSelector(selectTopicContext(post.topicId));
-  const getTopicSubsection = useSelector(selectorForUnitSubsection);
-
-  const getTopicCategoryName = topicData => (
-    topicData.usageKey ? getTopicSubsection(topicData.usageKey)?.displayName : topicData.categoryId
-  );
 
   return (
     <div className={classNames('d-flex flex-fill mw-100', { 'mt-2': hasAnyAlert && !preview })}>
@@ -121,29 +110,12 @@ function PostHeader({
               </div>
             )
             : <h4 className="mb-0" style={{ lineHeight: '28px' }} aria-level="1" tabIndex="-1" accessKey="h">{post.title}</h4>}
-          <div className="align-items-center d-flex flex-row">
-            <AuthorLabel
-              author={post.author || intl.formatMessage(messages.anonymous)}
-              authorLabel={post.authorLabel}
-              labelColor={authorLabelColor && `text-${authorLabelColor}`}
-              linkToProfile
-            />
-            {topicContext && topic && (
-            <div className="mr-3 font-size-14 font-style-normal font-family-inter font-weight-400 d-flex">
-              <span className="text-gray-400">{`${intl.formatMessage(messages.relatedTo)} `}</span>
-              <Hyperlink
-                destination={topicContext.unitLink}
-                target="_top"
-              >
-                <div className="mw-md ml-1 d-flex flex-row">
-                  <span className="container-mw-md text-truncate">{getTopicCategoryName(topic)}</span>
-                  <span className="mx-1">/</span>
-                  <span className="container-mw-md text-truncate">{topic.name}</span>
-                </div>
-              </Hyperlink>
-            </div>
-            )}
-          </div>
+          <AuthorLabel
+            author={post.author || intl.formatMessage(messages.anonymous)}
+            authorLabel={post.authorLabel}
+            labelColor={authorLabelColor && `text-${authorLabelColor}`}
+            linkToProfile
+          />
         </div>
       </div>
       {!preview

src/discussions/posts/post/messages.js

@@ -60,7 +60,7 @@ const messages = defineMessages({
   },
   relatedTo: {
     id: 'discussions.post.relatedTo',
-    defaultMessage: 'in',
+    defaultMessage: 'Related to',
     description: 'Message followed the category and topic of post linking to in-course context',
   },
   deletePostTitle: {