TEMP

.github/workflows/validate.yml

@@ -20,4 +20,4 @@ jobs:
     - name: Upload coverage
       uses: codecov/codecov-action@v3
       with:
-        fail_ci_if_error: true
+        fail_ci_if_error: false

package.json

@@ -53,7 +53,7 @@
     "@fortawesome/free-regular-svg-icons": "5.15.4",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "@meilisearch/instant-meilisearch": "^0.16.0",
+    "@meilisearch/instant-meilisearch": "^0.17.0",
     "@openedx-plugins/course-app-calculator": "file:plugins/course-apps/calculator",
     "@openedx-plugins/course-app-edxnotes": "file:plugins/course-apps/edxnotes",
     "@openedx-plugins/course-app-learning_assistant": "file:plugins/course-apps/learning_assistant",
@@ -110,6 +110,7 @@
     "axios": "^0.28.0",
     "axios-mock-adapter": "1.22.0",
     "eslint-import-resolver-webpack": "^0.13.8",
+    "fetch-mock-jest": "^1.5.1",
     "glob": "7.2.3",
     "husky": "7.0.4",
     "jest-canvas-mock": "^2.5.2",

src/content-tags-drawer/ContentTagsDropDownSelector.jsx

@@ -283,7 +283,7 @@ const ContentTagsDropDownSelector = ({
                     <Icon
                       src={isOpen(tagData.value) ? ArrowDropUp : ArrowDropDown}
                       onClick={() => clickAndEnterHandler(tagData.value)}
-                      tabIndex="-1"
+                      tabIndex={-1}
                     />
                   </div>
                 )}

src/course-outline/CourseOutline.scss

@@ -11,3 +11,21 @@
 @import "./drag-helper/SortableItem";
 @import "./xblock-status/XBlockStatus";
 @import "./paste-button/PasteButton";
+
+div.row:has(> div > div.highlight) {
+  animation: 5s glow;
+}
+
+@keyframes glow {
+  0% {
+    box-shadow: 0 0 5px 5px $primary-500;
+  }
+
+  90% {
+    box-shadow: 0 0 5px 5px $primary-500;
+  }
+
+  100% {
+    box-shadow: unset;
+  }
+}

src/course-outline/section-card/SectionCard.jsx

@@ -7,6 +7,7 @@ import { useDispatch } from 'react-redux';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Bubble, Button, useToggle } from '@openedx/paragon';
 import { Add as IconAdd } from '@openedx/paragon/icons';
+import { useSearchParams } from 'react-router-dom';
 import classNames from 'classnames';
 
 import { setCurrentItem, setCurrentSection } from '../data/slice';
@@ -42,6 +43,9 @@ const SectionCard = ({
   const dispatch = useDispatch();
   const { activeId, overId } = useContext(DragContext);
   const [isExpanded, setIsExpanded] = useState(isSectionsExpanded);
+  const [searchParams] = useSearchParams();
+  const locatorId = searchParams.get('show');
+  const isScrolledToElement = locatorId === section.id;
   const [isFormOpen, openForm, closeForm] = useToggle(false);
   const namePrefix = 'section';
 
@@ -70,11 +74,10 @@ const SectionCard = ({
   }, [activeId, overId]);
 
   useEffect(() => {
-    // if this items has been newly added, scroll to it.
-    if (currentRef.current && section.shouldScroll) {
+    if (currentRef.current && (section.shouldScroll || isScrolledToElement)) {
       scrollToElement(currentRef.current);
     }
-  }, []);
+  }, [isScrolledToElement]);
 
   // re-create actions object for customizations
   const actions = { ...sectionActions };
@@ -155,7 +158,7 @@ const SectionCard = ({
       }}
     >
       <div
-        className="section-card"
+        className={`section-card ${isScrolledToElement ? 'highlight' : ''}`}
         data-testid="section-card"
         ref={currentRef}
       >

src/course-outline/subsection-card/SubsectionCard.jsx

@@ -134,7 +134,7 @@ const SubsectionCard = ({
     if (currentRef.current && (section.shouldScroll || subsection.shouldScroll || isScrolledToElement)) {
       scrollToElement(currentRef.current);
     }
-  }, []);
+  }, [isScrolledToElement]);
 
   useEffect(() => {
     if (savingStatus === RequestStatus.SUCCESSFUL) {
@@ -160,7 +160,11 @@ const SubsectionCard = ({
         ...borderStyle,
       }}
     >
-      <div className="subsection-card" data-testid="subsection-card" ref={currentRef}>
+      <div
+        className={`subsection-card ${isScrolledToElement ? 'highlight' : ''}`}
+        data-testid="subsection-card"
+        ref={currentRef}
+      >
         {isHeaderVisible && (
           <>
             <CardHeader

src/course-outline/unit-card/UnitCard.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { useDispatch } from 'react-redux';
 import { useToggle } from '@openedx/paragon';
 import { isEmpty } from 'lodash';
+import { useSearchParams } from 'react-router-dom';
 
 import { setCurrentItem, setCurrentSection, setCurrentSubsection } from '../data/slice';
 import { RequestStatus } from '../../data/constants';
@@ -34,6 +35,9 @@ const UnitCard = ({
 }) => {
   const currentRef = useRef(null);
   const dispatch = useDispatch();
+  const [searchParams] = useSearchParams();
+  const locatorId = searchParams.get('show');
+  const isScrolledToElement = locatorId === unit.id;
   const [isFormOpen, openForm, closeForm] = useToggle(false);
   const namePrefix = 'unit';
 
@@ -109,10 +113,10 @@ const UnitCard = ({
     // if this items has been newly added, scroll to it.
     // we need to check section.shouldScroll as whole section is fetched when a
     // unit is duplicated under it.
-    if (currentRef.current && (section.shouldScroll || unit.shouldScroll)) {
+    if (currentRef.current && (section.shouldScroll || unit.shouldScroll || isScrolledToElement)) {
       scrollToElement(currentRef.current);
     }
-  }, []);
+  }, [isScrolledToElement]);
 
   useEffect(() => {
     if (savingStatus === RequestStatus.SUCCESSFUL) {
@@ -139,7 +143,7 @@ const UnitCard = ({
       }}
     >
       <div
-        className="unit-card"
+        className={`unit-card ${isScrolledToElement ? 'highlight' : ''}`}
         data-testid="unit-card"
         ref={currentRef}
       >

src/files-and-videos/files-page/FilesPage.test.jsx

@@ -331,7 +331,7 @@ describe('FilesAndUploads', () => {
         axiosMock.onDelete(`${getAssetsUrl(courseId)}mOckID1`).reply(204);
 
         fireEvent.click(deleteButton);
-        expect(screen.getByText('Delete file(s) confirmation')).toBeVisible();
+        expect(screen.getByText('Delete mOckID1')).toBeVisible();
         await act(async () => {
           userEvent.click(deleteButton);
         });
@@ -345,7 +345,7 @@ describe('FilesAndUploads', () => {
           userEvent.click(confirmDeleteButton);
         });
 
-        expect(screen.queryByText('Delete file(s) confirmation')).toBeNull();
+        expect(screen.queryByText('Delete mOckID1')).toBeNull();
 
         // Check if the asset is deleted in the store and UI
         const deleteStatus = store.getState().assets.deletingStatus;
@@ -554,10 +554,10 @@ describe('FilesAndUploads', () => {
           axiosMock.onDelete(`${getAssetsUrl(courseId)}mOckID1`).reply(204);
           fireEvent.click(within(assetMenuButton).getByLabelText('file-menu-toggle'));
           fireEvent.click(screen.getByTestId('open-delete-confirmation-button'));
-          expect(screen.getByText('Delete file(s) confirmation')).toBeVisible();
+          expect(screen.getByText('Delete mOckID1')).toBeVisible();
 
           fireEvent.click(screen.getByText(messages.deleteFileButtonLabel.defaultMessage));
-          expect(screen.queryByText('Delete file(s) confirmation')).toBeNull();
+          expect(screen.queryByText('Delete mOckID1')).toBeNull();
 
           executeThunk(deleteAssetFile(courseId, 'mOckID1', 5), store.dispatch);
         });
@@ -644,10 +644,10 @@ describe('FilesAndUploads', () => {
           axiosMock.onDelete(`${getAssetsUrl(courseId)}mOckID3`).reply(404);
           fireEvent.click(within(assetMenuButton).getByLabelText('file-menu-toggle'));
           fireEvent.click(screen.getByTestId('open-delete-confirmation-button'));
-          expect(screen.getByText('Delete file(s) confirmation')).toBeVisible();
+          expect(screen.getByText('Delete mOckID3')).toBeVisible();
 
           fireEvent.click(screen.getByText(messages.deleteFileButtonLabel.defaultMessage));
-          expect(screen.queryByText('Delete file(s) confirmation')).toBeNull();
+          expect(screen.queryByText('Delete mOckID3')).toBeNull();
 
           executeThunk(deleteAssetFile(courseId, 'mOckID3', 5), store.dispatch);
         });