fix: learning header constant height

Fix bug with a repeated search query

package.json

@@ -34,10 +34,10 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-component-footer": "12.0.0",
-    "@edx/frontend-component-header": "4.0.3",
-    "@edx/frontend-platform": "4.4.0",
-    "@edx/paragon": "20.15.0",
+    "@edx/frontend-component-footer": "12.1.0",
+    "@edx/frontend-component-header": "4.3.0",
+    "@edx/frontend-platform": "4.6.0",
+    "@edx/paragon": "20.44.0",
     "@reduxjs/toolkit": "1.8.0",
     "@tinymce/tinymce-react": "3.13.1",
     "babel-polyfill": "6.26.0",
@@ -48,9 +48,9 @@
     "lodash.snakecase": "4.1.1",
     "prop-types": "15.8.1",
     "raw-loader": "4.0.2",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "react-redux": "7.2.6",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-redux": "7.2.9",
     "react-router": "5.2.1",
     "react-router-dom": "5.3.0",
     "redux": "4.1.2",
@@ -64,7 +64,7 @@
     "@edx/frontend-build": "12.8.27",
     "@edx/reactifex": "1.0.3",
     "@testing-library/jest-dom": "5.16.2",
-    "@testing-library/react": "12.1.4",
+    "@testing-library/react": "12.1.5",
     "@testing-library/user-event": "13.5.0",
     "axios-mock-adapter": "1.20.0",
     "babel-plugin-react-intl": "8.2.25",

renovate.json

@@ -1,9 +1,33 @@
 {
   "extends": [
-    "config:base"
+    "config:base",
+    "schedule:weekly",
+    ":automergeLinters",
+    ":automergeMinor",
+    ":automergeTesters",
+    ":enableVulnerabilityAlerts",
+    ":rebaseStalePrs",
+    ":semanticCommits",
+    ":updateNotScheduled"
   ],
-  "patch": {
-    "automerge": true
-  },
-  "rebaseStalePrs": true
+  "packageRules": [
+    {
+      "matchDepTypes": [
+        "devDependencies"
+      ],
+      "matchUpdateTypes": [
+        "lockFileMaintenance",
+        "minor",
+        "patch",
+        "pin"
+      ],
+      "automerge": true
+    },
+    {
+      "matchPackagePatterns": ["@edx", "@openedx"],
+      "matchUpdateTypes": ["minor", "patch"],
+      "automerge": true
+    }
+  ],
+  "timezone": "America/New_York"
 }

src/components/NavigationBar/CourseTabsNavigation.jsx

@@ -24,25 +24,23 @@ const CourseTabsNavigation = ({
   }, [courseId]);
 
   return (
-    <div id="courseTabsNavigation" className={classNames('course-tabs-navigation', className)}>
-      <div className="container-xl">
-        {!!tabs.length && (
-          <Tabs
-            className="nav-underline-tabs"
-            aria-label={intl.formatMessage(messages.courseMaterial)}
-          >
-            {tabs.map(({ url, title, slug }) => (
-              <a
-                key={slug}
-                className={classNames('nav-item flex-shrink-0 nav-link', { active: slug === activeTab })}
-                href={url}
-              >
-                {title}
-              </a>
-            ))}
-          </Tabs>
-        )}
-      </div>
+    <div id="courseTabsNavigation" className={classNames('course-tabs-navigation px-4', className)}>
+      {!!tabs.length && (
+        <Tabs
+          className="nav-underline-tabs"
+          aria-label={intl.formatMessage(messages.courseMaterial)}
+        >
+          {tabs.map(({ url, title, slug }) => (
+            <a
+              key={slug}
+              className={classNames('nav-item flex-shrink-0 nav-link', { active: slug === activeTab })}
+              href={url}
+            >
+              {title}
+            </a>
+          ))}
+        </Tabs>
+      )}
     </div>
   );
 };

src/components/Search.jsx

@@ -1,5 +1,5 @@
 import React, {
-  useCallback, useContext, useEffect, useState,
+  useCallback, useContext, useEffect, useRef, useState,
 } from 'react';
 
 import camelCase from 'lodash/camelCase';
@@ -25,6 +25,7 @@ const Search = () => {
   const isPostSearch = ['posts', 'my-posts'].includes(page);
   const isTopicSearch = 'topics'.includes(page);
   const [searchValue, setSearchValue] = useState('');
+  const previousSearchValueRef = useRef('');
   let currentValue = '';
 
   if (isPostSearch) {
@@ -39,14 +40,15 @@ const Search = () => {
     dispatch(setSearchQuery(''));
     dispatch(setTopicFilter(''));
     dispatch(setUsernameSearch(''));
-  }, []);
+    previousSearchValueRef.current = '';
+  }, [previousSearchValueRef]);
 
   const onChange = useCallback((query) => {
     setSearchValue(query);
   }, []);
 
   const onSubmit = useCallback((query) => {
-    if (query === '') {
+    if (query === '' || query === previousSearchValueRef.current) {
       return;
     }
 
@@ -57,7 +59,8 @@ const Search = () => {
     } else if (page === 'learners') {
       dispatch(setUsernameSearch(query));
     }
-  }, [page, searchValue]);
+    previousSearchValueRef.current = query;
+  }, [page, searchValue, previousSearchValueRef]);
 
   const handleIconClick = useCallback((e) => {
     e.preventDefault();

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

@@ -127,7 +127,7 @@ describe('DiscussionsHome', () => {
 
   test('header, course navigation bar and footer are only visible in Discussions MFE', async () => {
     renderComponent();
-    expect(screen.queryByRole('banner')).toBeInTheDocument();
+    waitFor(() => expect(screen.queryByRole('banner')).toBeInTheDocument());
     expect(document.getElementById('courseTabsNavigation')).toBeInTheDocument();
     expect(screen.queryByRole('contentinfo')).toBeInTheDocument();
   });

src/i18n/messages/es_419.json

@@ -209,6 +209,6 @@
   "tour.action.end": "Okey",
   "tour.body.notRespondedFilter": "Ahora puede filtrar debates para encontrar publicaciones sin respuesta.",
   "tour.title.notRespondedFilter": "¡Nueva opción de filtrado!",
-  "tour.body.responseSortTour": "Responses and comments are now sorted by newest first. Please use this option to change the sort order",
-  "tour.title.responseSortTour": "Sort Responses!"
+  "tour.body.responseSortTour": "Las respuestas y los comentarios ahora se ordenan por los más recientes primero. Utilice esta opción para cambiar el orden de clasificación",
+  "tour.title.responseSortTour": "¡Clasificar respuestas!"
 }

src/index.scss

@@ -256,7 +256,8 @@ header {
 }
 
 .border-2 {
-  border-width: 2px;
+  border: 2px solid #cccccc !important;
+  border-width: 2px !important;
 }
 
 .post-form {
@@ -279,7 +280,6 @@ header {
   line-height: 28px;
   font-family: Inter, Helvetica Neue, Arial, sans-serif;
   font-size: 18px !important;
-  height: 60px !important;
 
   .user-dropdown {
     button {