Merge pull request #9 from vunguyen-dmt/open-edx/open-release/palm.3

fix: moved feedback widget behind env variables (openedx#562)

.env

@@ -20,6 +20,5 @@ SEGMENT_KEY=''
 SITE_NAME=''
 USER_INFO_COOKIE_NAME=''
 SUPPORT_URL=''
-TA_FEEDBACK_FORM= ''
-STAFF_FEEDBACK_FORM= ''
-DISPLAY_FEEDBACK_BANNER='false'
+LEARNER_FEEDBACK_URL=''
+STAFF_FEEDBACK_URL=''

.env.development

@@ -21,6 +21,5 @@ SEGMENT_KEY=''
 SITE_NAME=localhost
 USER_INFO_COOKIE_NAME='edx-user-info'
 SUPPORT_URL='https://support.edx.org'
-TA_FEEDBACK_FORM='https://learner-form.test'
-STAFF_FEEDBACK_FORM='https://staff-form.test'
-DISPLAY_FEEDBACK_BANNER='false'
+LEARNER_FEEDBACK_URL=''
+STAFF_FEEDBACK_URL=''

.env.test

@@ -19,6 +19,5 @@ SEGMENT_KEY=''
 SITE_NAME='localhost'
 USER_INFO_COOKIE_NAME='edx-user-info'
 SUPPORT_URL='https://support.edx.org'
-TA_FEEDBACK_FORM='https://learner-form.test'
-STAFF_FEEDBACK_FORM='https://staff-form.test'
-DISPLAY_FEEDBACK_BANNER='false'
+LEARNER_FEEDBACK_URL=''
+STAFF_FEEDBACK_URL=''

jest.config.js

@@ -1,9 +1,9 @@
 const { createConfig } = require('@edx/frontend-build');
 
 module.exports = createConfig('jest', {
-  // setupFilesAfterEnv is used after the jest environment has been loaded.  In general this is what you want.  
+  // setupFilesAfterEnv is used after the jest environment has been loaded.  In general this is what you want.
   // If you want to add config BEFORE jest loads, use setupFiles instead.
-  setupFiles: ['<rootDir>/.jest/setEnvVars.js'],
+  setupFiles: ['<rootDir>/.env.test'],
   setupFilesAfterEnv: [
     '<rootDir>/src/setupTest.js',
   ],

src/discussions/discussions-home/DiscussionsHome.jsx

@@ -1,16 +1,13 @@
 import React, { useEffect, useRef } from 'react';
 
 import classNames from 'classnames';
-import { Helmet } from 'react-helmet';
 import { useSelector } from 'react-redux';
 import {
   Route, Switch, useLocation, useRouteMatch,
 } from 'react-router';
 
 import Footer from '@edx/frontend-component-footer';
 import { LearningHeader as Header } from '@edx/frontend-component-header';
-import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { PostActionsBar } from '../../components';
 import { CourseTabsNavigation } from '../../components/NavigationBar';
@@ -32,10 +29,8 @@ import BlackoutInformationBanner from './BlackoutInformationBanner';
 import DiscussionContent from './DiscussionContent';
 import DiscussionSidebar from './DiscussionSidebar';
 import useFeedbackWrapper from './FeedbackWrapper';
-import InformationBanner from './InformationBanner';
 
 const DiscussionsHome = () => {
-  const { formatMessage } = useIntl();
   const location = useLocation();
   const postActionBarRef = useRef(null);
   const postEditorVisible = useSelector(selectPostEditorVisible);
@@ -49,7 +44,6 @@ const DiscussionsHome = () => {
   const isOnDesktop = useIsOnDesktop();
   let displaySidebar = useSidebarVisible();
   const enableInContextSidebar = Boolean(new URLSearchParams(location.search).get('inContextSidebar') !== null);
-  const isFeedbackBannerVisible = getConfig().DISPLAY_FEEDBACK_BANNER === 'true';
   const {
     courseId, postId, topicId, category, learnerUsername,
   } = params;
@@ -70,52 +64,47 @@ const DiscussionsHome = () => {
   }, [path]);
 
   return (
-    <>
-      <Helmet>
-        <title>{formatMessage(messages.pageTitle)}</title>
-        <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
-      </Helmet>
-      <DiscussionContext.Provider value={{
-        page,
-        courseId,
-        postId,
-        topicId,
-        enableInContextSidebar,
-        category,
-        learnerUsername,
-      }}
-      >
-        {!enableInContextSidebar && <Header courseOrg={org} courseNumber={courseNumber} courseTitle={courseTitle} />}
-        <main className="container-fluid d-flex flex-column p-0 w-100" id="main" tabIndex="-1">
-          {!enableInContextSidebar && <CourseTabsNavigation activeTab="discussion" courseId={courseId} />}
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    <DiscussionContext.Provider value={{
+      page,
+      courseId,
+      postId,
+      topicId,
+      enableInContextSidebar,
+      category,
+      learnerUsername,
+    }}
+    >
+      {!enableInContextSidebar && <Header courseOrg={org} courseNumber={courseNumber} courseTitle={courseTitle} />}
+      <main className="container-fluid d-flex flex-column p-0 w-100" id="main" tabIndex="-1">
+        {!enableInContextSidebar && <CourseTabsNavigation activeTab="discussion" courseId={courseId} />}
+        <div
+          className={classNames('header-action-bar', {
+            'shadow-none border-light-300 border-bottom': enableInContextSidebar,
+          })}
+          ref={postActionBarRef}
+        >
           <div
-            className={classNames('header-action-bar', {
-              'shadow-none border-light-300 border-bottom': enableInContextSidebar,
+            className={classNames('d-flex flex-row justify-content-between navbar fixed-top', {
+              'pl-4 pr-3 py-0': enableInContextSidebar,
             })}
-            ref={postActionBarRef}
           >
-            <div
-              className={classNames('d-flex flex-row justify-content-between navbar fixed-top', {
-                'pl-4 pr-3 py-0': enableInContextSidebar,
-              })}
-            >
-              {!enableInContextSidebar && <Route path={Routes.DISCUSSIONS.PATH} component={NavigationBar} />}
-              <PostActionsBar />
-            </div>
-            {isFeedbackBannerVisible && <InformationBanner />}
-            <BlackoutInformationBanner />
+            {!enableInContextSidebar && <Route path={Routes.DISCUSSIONS.PATH} component={NavigationBar} />}
+            <PostActionsBar />
           </div>
-          {provider === DiscussionProvider.LEGACY && (
+          <BlackoutInformationBanner />
+        </div>
+        {provider === DiscussionProvider.LEGACY && (
           <Route
             path={[Routes.POSTS.PATH, Routes.TOPICS.CATEGORY]}
             component={LegacyBreadcrumbMenu}
           />
-          )}
+        )}
 
-          <div className="d-flex flex-row">
-            <DiscussionSidebar displaySidebar={displaySidebar} postActionBarRef={postActionBarRef} />
-            {displayContentArea && <DiscussionContent />}
-            {!displayContentArea && (
+        <div className="d-flex flex-row">
+          <DiscussionSidebar displaySidebar={displaySidebar} postActionBarRef={postActionBarRef} />
+          {displayContentArea && <DiscussionContent />}
+          {!displayContentArea && (
             <Switch>
               <Route
                 path={Routes.TOPICS.PATH}
@@ -131,15 +120,13 @@ const DiscussionsHome = () => {
               />
               {isRedirectToLearners && <Route path={Routes.LEARNERS.PATH} component={EmptyLearners} />}
             </Switch>
-            )}
-          </div>
-          {!enableInContextSidebar && <DiscussionsProductTour />}
-        </main>
-        {!enableInContextSidebar && <Footer />}
-      </DiscussionContext.Provider>
-    </>
-
+          )}
+        </div>
+        {!enableInContextSidebar && <DiscussionsProductTour />}
+      </main>
+      {!enableInContextSidebar && <Footer />}
+    </DiscussionContext.Provider>
   );
 };
 
-export default React.memo(DiscussionsHome);
+export default React.memo(DiscussionsHome);

src/discussions/discussions-home/FeedbackWrapper.jsx

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 
 import { useSelector } from 'react-redux';
 
+import { getConfig } from '@edx/frontend-platform';
 import { logError } from '@edx/frontend-platform/logging';
 
 import { RequestStatus } from '../../data/constants';
@@ -22,9 +23,9 @@ export default function useFeedbackWrapper() {
 
   useEffect(() => {
     if (configStatus === RequestStatus.SUCCESSFUL) {
-      let url = '//w.usabilla.com/9e6036348fa1.js';
+      let url = getConfig().LEARNER_FEEDBACK_URL;
       if (isStaff || isUserGroupTA || isCourseAdmin || isCourseStaff) {
-        url = '//w.usabilla.com/767740a06856.js';
+        url = getConfig().STAFF_FEEDBACK_URL;
       }
       try {
         // eslint-disable-next-line no-undef