fix: null error at useRouteMatch when running on tutor (#623)

tutor sets the PUBLIC_PATH to '/discussions' which causes frontend-platform to
treat all URLs for matching etc to be relative to this path. Since many places
include '/discussions' in the match it causes those matches to break.

This change makes the default PUBLIC_PATH in .env.development to match the one
set by tutor and removes it from the base path of the router letting frontend
platform handle the prefix.

This also allows for deployments to customise this path to be something other
than 'discussions'.

src/components/NavigationBar/navBar.scss

@@ -1,10 +1,11 @@
-@import "@edx/brand/paragon/fonts.scss";
-@import "@edx/brand/paragon/variables.scss";
-@import "@edx/paragon/scss/core/core.scss";
-@import "@edx/brand/paragon/overrides.scss";
+@import "~@edx/brand/paragon/fonts.scss";
+@import "~@edx/brand/paragon/variables.scss";
+@import "~@edx/paragon/scss/core/core.scss";
+@import "~@edx/brand/paragon/overrides.scss";
 
 $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";
+
 .course-tabs-navigation {
   border-bottom: solid 1px #eaeaea;
 

src/data/constants.js

@@ -1,6 +1,9 @@
 import { getConfig } from '@edx/frontend-platform';
 
 export const getApiBaseUrl = () => getConfig().LMS_BASE_URL;
+export const getFullUrl = (path) => (
+  new URL(`${getConfig().PUBLIC_PATH.replace(/\/$/, '')}/${path}`, window.location.origin).href
+);
 
 /**
  * Enum for thread types.
@@ -137,7 +140,7 @@ export const DiscussionProvider = {
   OPEN_EDX: 'openedx',
 };
 
-const BASE_PATH = `${getConfig().PUBLIC_PATH}:courseId`;
+const BASE_PATH = '/:courseId';
 
 export const Routes = {
   DISCUSSIONS: {

src/discussions/common/AuthorLabel.jsx

@@ -100,7 +100,7 @@ const AuthorLabel = ({
       {postCreatedAt && (
         <span
           title={postCreatedAt}
-          className={classNames('font-family-inter align-content-center', {
+          className={classNames('align-content-center', {
             'text-white': alert,
             'text-gray-500': !alert,
           })}

src/discussions/common/EndorsedAlertBanner.jsx

@@ -43,7 +43,7 @@ const EndorsedAlertBanner = ({
                 height: '20px',
               }}
             />
-            <strong className="ml-2 font-family-inter">
+            <strong className="ml-2">
               {intl.formatMessage(isQuestion ? messages.answer : messages.endorsed)}
             </strong>
           </div>

src/discussions/post-comments/PostCommentsView.test.jsx

@@ -465,6 +465,20 @@ describe('ThreadView', () => {
       assertLastUpdateData({ pinned: false });
     });
 
+    it('should allow copying a link to the post', async () => {
+      await waitFor(() => renderComponent(discussionPostId));
+      const post = await screen.findByTestId('post-thread-1');
+      const hoverCard = within(post).getByTestId('hover-card-thread-1');
+      Object.assign(navigator, { clipboard: { writeText: jest.fn() } });
+      await act(async () => {
+        fireEvent.click(within(hoverCard).getByRole('button', { name: /actions menu/i }));
+      });
+      await act(async () => {
+        fireEvent.click(within(hoverCard).getByRole('button', { name: /copy link/i }));
+      });
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith(`http://localhost/${courseId}/posts/${discussionPostId}`);
+    });
+
     it('should allow reporting the post', async () => {
       await waitFor(() => renderComponent(discussionPostId));
       const post = await screen.findByTestId('post-thread-1');

src/discussions/posts/data/__factories__/threads.factory.js

@@ -26,6 +26,7 @@ Factory.define('thread')
       'type',
       'voted',
       'pinned',
+      'copy_link',
     ],
     author: 'test_user',
     author_label: 'Staff',

src/discussions/posts/post/Post.jsx

@@ -11,7 +11,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { Hyperlink, useToggle } from '@edx/paragon';
 
 import HTMLLoader from '../../../components/HTMLLoader';
-import { ContentActions } from '../../../data/constants';
+import { ContentActions, getFullUrl } from '../../../data/constants';
 import { selectorForUnitSubsection, selectTopicContext } from '../../../data/selectors';
 import { AlertBanner, Confirmation } from '../../common';
 import { DiscussionContext } from '../../common/context';
@@ -37,7 +37,7 @@ const Post = ({ handleAddResponseButton }) => {
   const location = useLocation();
   const history = useHistory();
   const dispatch = useDispatch();
-  const courseId = useSelector((state) => state.config.id);
+  const { courseId } = useContext(DiscussionContext);
   const topic = useSelector(selectTopic(topicId));
   const getTopicSubsection = useSelector(selectorForUnitSubsection);
   const topicContext = useSelector(selectTopicContext(topicId));
@@ -78,8 +78,7 @@ const Post = ({ handleAddResponseButton }) => {
   }, [closed, postId, reasonCodesEnabled, showClosePostModal]);
 
   const handlePostCopyLink = useCallback(() => {
-    const postURL = new URL(`${getConfig().PUBLIC_PATH}${courseId}/posts/${postId}`, window.location.origin);
-    navigator.clipboard.writeText(postURL.href);
+    navigator.clipboard.writeText(getFullUrl(`${courseId}/posts/${postId}`));
   }, [window.location.origin, postId, courseId]);
 
   const handlePostPin = useCallback(() => dispatch(

src/discussions/posts/post/PostLink.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-unknown-property */
 import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 
@@ -7,7 +6,7 @@ import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Badge, Icon, Truncate } from '@edx/paragon';
+import { Badge, Icon } from '@edx/paragon';
 import { CheckCircle } from '@edx/paragon/icons';
 
 import { PushPin } from '../../../components/icons';
@@ -87,48 +86,46 @@ const PostLink = ({
         />
         <div className="d-flex flex-column flex-fill" style={{ minWidth: 0 }}>
           <div className="d-flex flex-column justify-content-start mw-100 flex-fill" style={{ marginBottom: '-3px' }}>
-            <div className="d-flex align-items-center pb-0 mb-0 flex-fill font-weight-500">
-              <Truncate lines={1} className="mr-1.5" whiteSpace>
-                <span
-                  class={
-                      classNames(
-                        'font-weight-500 font-size-14 text-primary-500 font-style align-bottom',
-                        { 'font-weight-bolder': !read },
-                      )
-                    }
+            <div className="d-flex align-items-center pb-0 mb-0 flex-fill">
+              <div className="text-truncate mr-1">
+                <span className={classNames(
+                  'font-weight-500 font-size-14 text-primary-500 font-style align-bottom mr-1',
+                  { 'font-weight-bolder': !read },
+                )}
                 >
                   {title}
                 </span>
-                <span class="align-bottom"> </span>
-                <span
-                  class="text-gray-700 font-weight-normal font-size-14 font-style align-bottom"
-                >
-                  {isPostPreviewAvailable(previewBody)
-                    ? previewBody
-                    : intl.formatMessage(messages.postWithoutPreview)}
+                <span className="text-gray-700 font-weight-normal font-size-14 font-style align-bottom">
+                  {isPostPreviewAvailable(previewBody) ? previewBody : intl.formatMessage(messages.postWithoutPreview)}
                 </span>
-              </Truncate>
+              </div>
               {showAnsweredBadge && (
-              <Icon src={CheckCircle} className="text-success font-weight-500 ml-auto badge-padding" data-testid="check-icon">
-                <span className="sr-only">{' '}answered</span>
-              </Icon>
+                <Icon
+                  data-testid="check-icon"
+                  src={CheckCircle}
+                  className="text-success font-weight-500 ml-auto badge-padding"
+                >
+                  <span className="sr-only">{' '}answered</span>
+                </Icon>
               )}
               {canSeeReportedBadge && (
-              <Badge
-                variant="danger"
-                data-testid="reported-post"
-                className={`font-weight-500 badge-padding ${showAnsweredBadge ? 'ml-2' : 'ml-auto'}`}
-              >
-                {intl.formatMessage(messages.contentReported)}
-                <span className="sr-only">{' '}reported</span>
-              </Badge>
+                <Badge
+                  variant="danger"
+                  data-testid="reported-post"
+                  className={`font-weight-500 badge-padding ${showAnsweredBadge ? 'ml-2' : 'ml-auto'}`}
+                >
+                  {intl.formatMessage(messages.contentReported)}
+                  <span className="sr-only">{' '}reported</span>
+                </Badge>
               )}
               {pinned && (
-              <Icon
-                src={PushPin}
-                className={`post-summary-icons-dimensions text-gray-700
-                    ${canSeeReportedBadge || showAnsweredBadge ? 'ml-2' : 'ml-auto'}`}
-              />
+                <Icon
+                  src={PushPin}
+                  className={classNames('post-summary-icons-dimensions text-gray-700', {
+                    'ml-2': canSeeReportedBadge || showAnsweredBadge,
+                    'ml-auto': !canSeeReportedBadge && !showAnsweredBadge,
+                  })}
+                />
               )}
             </div>
           </div>

src/index.scss

@@ -1,7 +1,7 @@
-@import "@edx/brand/paragon/fonts.scss";
-@import "@edx/brand/paragon/variables.scss";
-@import "@edx/paragon/scss/core/core.scss";
-@import "@edx/brand/paragon/overrides.scss";
+@import "~@edx/brand/paragon/fonts.scss";
+@import "~@edx/brand/paragon/variables.scss";
+@import "~@edx/paragon/scss/core/core.scss";
+@import "~@edx/brand/paragon/overrides.scss";
 
 @import "~@edx/frontend-component-footer/dist/footer";
 @import "~@edx/frontend-component-header/dist/index";
@@ -65,10 +65,6 @@ $fa-font-path: "~font-awesome/fonts";
   font-style: normal !important;
 }
 
-.font-family-inter {
-  font-family: "Inter";
-}
-
 .post-footer-icon-dimentions {
   width: 32px !important;
   height: 32px !important;
@@ -278,7 +274,6 @@ header {
 
 header {
   line-height: 28px;
-  font-family: Inter, Helvetica Neue, Arial, sans-serif;
   font-size: 18px !important;
 
   .user-dropdown {
@@ -314,12 +309,10 @@ header {
 
 #courseTabsNavigation {
   font-size: 18px !important;
-  font-family: Inter, Helvetica Neue, Arial, sans-serif;
   z-index: 3;
   background-color: #fff;
 
   .container-xl {
-    padding-left: 31px;
     font-size: 1.125rem;
 
     .nav {
@@ -479,7 +472,6 @@ header {
 }
 
 .font-style {
-  font-family: "Inter";
   font-style: normal;
 }