chore: update with latest master

.env.development

@@ -35,7 +35,8 @@ ENABLE_TEAM_TYPE_SETTING=false
 ENABLE_NEW_EDITOR_PAGES=true
 ENABLE_UNIT_PAGE=false
 ENABLE_ASSETS_PAGE=false
-ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN=false
+ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN=true
+ENABLE_NEW_VIDEO_UPLOAD_PAGE=true
 ENABLE_TAGGING_TAXONOMY_PAGES=true
 BBB_LEARN_MORE_URL=''
 HOTJAR_APP_ID=''

.github/workflows/validate.yml

@@ -18,6 +18,7 @@ jobs:
         node-version: ${{ env.NODE_VER }}
     - run: make validate.ci
     - name: Upload coverage
-      uses: codecov/codecov-action@v3
+      uses: codecov/codecov-action@v4
       with:
-        fail_ci_if_error: false
+        fail_ci_if_error: true
+        token: ${{ secrets.CODECOV_TOKEN }}

src/content-tags-drawer/ContentTagsCollapsible.jsx

@@ -5,12 +5,13 @@
 import React from 'react';
 import Select, { components } from 'react-select';
 import {
-  Badge,
   Collapsible,
   Button,
   Spinner,
+  Chip,
+  Icon,
 } from '@openedx/paragon';
-import classNames from 'classnames';
+import { Tag, KeyboardArrowDown, KeyboardArrowUp } from '@openedx/paragon/icons';
 import { SelectableBox } from '@edx/frontend-lib-content-components';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { debounce } from 'lodash';
@@ -363,71 +364,84 @@ const ContentTagsCollapsible = ({
 
   return (
     <div className="d-flex">
-      <Collapsible title={name} styling="card-lg" className="taxonomy-tags-collapsible">
-        <div key={taxonomyId}>
-          <ContentTagsTree tagsTree={appliedContentTagsTree} removeTagHandler={removeAppliedTagHandler} />
-        </div>
+      <Collapsible.Advanced
+        className="collapsible-card-lg taxonomy-tags-collapsible"
+      >
+        <Collapsible.Trigger className="collapsible-trigger pl-2.5">
+          <Collapsible.Visible whenClosed>
+            <Icon src={KeyboardArrowDown} />
+          </Collapsible.Visible>
 
-        <div className="d-flex taxonomy-tags-selector-menu">
+          <Collapsible.Visible whenOpen>
+            <Icon src={KeyboardArrowUp} />
+          </Collapsible.Visible>
+          <h4 className="flex-grow-1 pl-2">{name}</h4>
+        </Collapsible.Trigger>
 
-          {canTagObject && (
-            <Select
-              onBlur={handleOnBlur}
-              styles={{
-                // Overriding 'x' button styles for staged tags when navigating by keyboard
-                multiValueRemove: (base, state) => ({
-                  ...base,
-                  background: state.isFocused ? 'black' : base.background,
-                  color: state.isFocused ? 'white' : base.color,
-                }),
-              }}
-              menuIsOpen={selectMenuIsOpen}
-              onFocus={onSelectMenuFocus}
-              onKeyDown={handleSelectOnKeyDown}
-              ref={/** @type {React.RefObject} */(selectRef)}
-              isMulti
-              isLoading={updateTags.isLoading}
-              isDisabled={updateTags.isLoading}
-              name="tags-select"
-              placeholder={intl.formatMessage(messages.collapsibleAddTagsPlaceholderText)}
-              isSearchable
-              className="d-flex flex-column flex-fill"
-              classNamePrefix="react-select-add-tags"
-              onInputChange={handleSearchChange}
-              onChange={handleStagedTagsMenuChange}
-              components={{
-                Menu: CustomMenu,
-                LoadingIndicator: CustomLoadingIndicator,
-                IndicatorsContainer: CustomIndicatorsContainer,
-              }}
-              closeMenuOnSelect={false}
-              blurInputOnSelect={false}
-              handleSelectableBoxChange={handleSelectableBoxChange}
-              checkedTags={checkedTags}
-              taxonomyId={taxonomyId}
-              appliedContentTagsTree={appliedContentTagsTree}
-              stagedContentTagsTree={stagedContentTagsTree}
-              handleCommitStagedTags={handleCommitStagedTags}
-              handleCancelStagedTags={handleCancelStagedTags}
-              searchTerm={searchTerm}
-              selectCancelRef={selectCancelRef}
-              selectAddRef={selectAddRef}
-              selectInlineAddRef={selectInlineAddRef}
-              value={stagedContentTags}
-            />
-          )}
-        </div>
-      </Collapsible>
-      <div className="d-flex">
-        <Badge
-          variant="light"
-          pill
-          className={classNames('align-self-start', 'mt-3', {
-            invisible: contentTagsCount === 0,
-          })}
+        <Collapsible.Body className="collapsible-body">
+          <div key={taxonomyId}>
+            <ContentTagsTree tagsTree={appliedContentTagsTree} removeTagHandler={removeAppliedTagHandler} />
+          </div>
+
+          <div className="d-flex taxonomy-tags-selector-menu">
+
+            {canTagObject && (
+              <Select
+                onBlur={handleOnBlur}
+                styles={{
+                  // Overriding 'x' button styles for staged tags when navigating by keyboard
+                  multiValueRemove: (base, state) => ({
+                    ...base,
+                    background: state.isFocused ? 'black' : base.background,
+                    color: state.isFocused ? 'white' : base.color,
+                  }),
+                }}
+                menuIsOpen={selectMenuIsOpen}
+                onFocus={onSelectMenuFocus}
+                onKeyDown={handleSelectOnKeyDown}
+                ref={/** @type {React.RefObject} */(selectRef)}
+                isMulti
+                isLoading={updateTags.isLoading}
+                isDisabled={updateTags.isLoading}
+                name="tags-select"
+                placeholder={intl.formatMessage(messages.collapsibleAddTagsPlaceholderText)}
+                isSearchable
+                className="d-flex flex-column flex-fill"
+                classNamePrefix="react-select-add-tags"
+                onInputChange={handleSearchChange}
+                onChange={handleStagedTagsMenuChange}
+                components={{
+                  Menu: CustomMenu,
+                  LoadingIndicator: CustomLoadingIndicator,
+                  IndicatorsContainer: CustomIndicatorsContainer,
+                }}
+                closeMenuOnSelect={false}
+                blurInputOnSelect={false}
+                handleSelectableBoxChange={handleSelectableBoxChange}
+                checkedTags={checkedTags}
+                taxonomyId={taxonomyId}
+                appliedContentTagsTree={appliedContentTagsTree}
+                stagedContentTagsTree={stagedContentTagsTree}
+                handleCommitStagedTags={handleCommitStagedTags}
+                handleCancelStagedTags={handleCancelStagedTags}
+                searchTerm={searchTerm}
+                selectCancelRef={selectCancelRef}
+                selectAddRef={selectAddRef}
+                selectInlineAddRef={selectInlineAddRef}
+                value={stagedContentTags}
+              />
+            )}
+          </div>
+        </Collapsible.Body>
+      </Collapsible.Advanced>
+      <div className="d-flex align-items-start pt-2.5 taxonomy-tags-count-chip">
+        <Chip
+          iconBefore={Tag}
+          iconBeforeAlt="icon-before"
+          disabled={contentTagsCount === 0}
         >
           {contentTagsCount}
-        </Badge>
+        </Chip>
       </div>
     </div>
   );

src/content-tags-drawer/ContentTagsCollapsible.scss

@@ -4,6 +4,10 @@
 
   .collapsible-trigger {
     border: none !important;
+
+    .pgn__icon {
+      margin-left: -3px;
+    }
   }
 }
 
@@ -57,3 +61,7 @@
     color: white !important;
   }
 }
+
+.taxonomy-tags-count-chip > .pgn__chip {
+  background: none;
+}

src/content-tags-drawer/ContentTagsCollapsible.test.jsx

@@ -177,7 +177,7 @@ describe('<ContentTagsCollapsible />', () => {
   it('should render taxonomy tags data along content tags number badge', async () => {
     const { container, getByText } = await getComponent();
     expect(getByText('Taxonomy 1')).toBeInTheDocument();
-    expect(container.getElementsByClassName('badge').length).toBe(1);
+    expect(container.getElementsByClassName('taxonomy-tags-count-chip').length).toBe(1);
     expect(getByText('3')).toBeInTheDocument();
   });
 
@@ -546,13 +546,14 @@ describe('<ContentTagsCollapsible />', () => {
     expect(appliedTag).not.toBeInTheDocument();
   });
 
-  it('should render taxonomy tags data without tags number badge', async () => {
+  it('should render taxonomy tags data with tags number badge as cero', async () => {
     const updatedData = { ...data };
     updatedData.taxonomyAndTagsData = { ...updatedData.taxonomyAndTagsData };
     updatedData.taxonomyAndTagsData.contentTags = [];
     const { container, getByText } = await getComponent(updatedData);
 
     expect(getByText('Taxonomy 1')).toBeInTheDocument();
-    expect(container.getElementsByClassName('invisible').length).toBe(1);
+    expect(container.getElementsByClassName('taxonomy-tags-count-chip').length).toBe(1);
+    expect(getByText('0')).toBeInTheDocument();
   });
 });

src/content-tags-drawer/ContentTagsDrawer.jsx

@@ -8,7 +8,6 @@ import React, {
 import PropTypes from 'prop-types';
 import {
   Container,
-  CloseButton,
   Spinner,
 } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -135,10 +134,8 @@ const ContentTagsDrawer = ({ id, onClose }) => {
 
     <div id="content-tags-drawer" className="mt-1">
       <Container size="xl">
-        <CloseButton onClick={() => onCloseDrawer()} data-testid="drawer-close-button" />
-        <span>{intl.formatMessage(messages.headerSubtitle)}</span>
         { isContentDataLoaded
-          ? <h3>{ contentName }</h3>
+          ? <h2>{ contentName }</h2>
           : (
             <div className="d-flex justify-content-center align-items-center flex-column">
               <Spinner
@@ -150,6 +147,7 @@ const ContentTagsDrawer = ({ id, onClose }) => {
           )}
 
         <hr />
+        <p className="lead text-gray-500 font-weight-bold">{intl.formatMessage(messages.headerSubtitle)}</p>
 
         { isTaxonomyListLoaded && isContentTaxonomyTagsLoaded
           ? taxonomies.map((data) => (

src/content-tags-drawer/ContentTagsDrawer.test.jsx

@@ -19,7 +19,6 @@ import { getTaxonomyListData } from '../taxonomy/data/api';
 import messages from './messages';
 
 const contentId = 'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@7f47fe2dbcaf47c5a071671c741fe1ab';
-const mockOnClose = jest.fn();
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -250,7 +249,7 @@ describe('<ContentTagsDrawer />', () => {
       await waitFor(() => { expect(getByText('Taxonomy 1')).toBeInTheDocument(); });
       expect(getByText('Taxonomy 1')).toBeInTheDocument();
       expect(getByText('Taxonomy 2')).toBeInTheDocument();
-      const tagCountBadges = container.getElementsByClassName('badge');
+      const tagCountBadges = container.getElementsByClassName('taxonomy-tags-count-chip');
       expect(tagCountBadges[0].textContent).toBe('2');
       expect(tagCountBadges[1].textContent).toBe('1');
     });
@@ -354,30 +353,6 @@ describe('<ContentTagsDrawer />', () => {
     expect(queryByText('Tag 3')).not.toBeInTheDocument();
   });
 
-  it('should call closeManageTagsDrawer when CloseButton is clicked', async () => {
-    const postMessageSpy = jest.spyOn(window.parent, 'postMessage');
-
-    const { getByTestId } = render(<RootWrapper />);
-
-    // Find the CloseButton element by its test ID and trigger a click event
-    const closeButton = getByTestId('drawer-close-button');
-    fireEvent.click(closeButton);
-
-    expect(postMessageSpy).toHaveBeenCalledWith('closeManageTagsDrawer', '*');
-
-    postMessageSpy.mockRestore();
-  });
-
-  it('should call onClose param when CloseButton is clicked', async () => {
-    render(<RootWrapper onClose={mockOnClose} />);
-
-    // Find the CloseButton element by its test ID and trigger a click event
-    const closeButton = screen.getByTestId('drawer-close-button');
-    fireEvent.click(closeButton);
-
-    expect(mockOnClose).toHaveBeenCalled();
-  });
-
   it('should call closeManageTagsDrawer when Escape key is pressed and no selectable box is active', () => {
     const postMessageSpy = jest.spyOn(window.parent, 'postMessage');
 

src/course-outline/CourseOutline.scss

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

src/course-outline/card-header/CardHeader.test.jsx

@@ -206,7 +206,7 @@ describe('<CardHeader />', () => {
     fireEvent.click(manageTagsMenuItem);
 
     // Check if the drawer is open
-    expect(screen.getByTestId('drawer-close-button')).toBeInTheDocument();
+    expect(screen.getAllByText('Manage tags').length).toBe(2);
   });
 
   it('calls onClickEdit when the button is clicked', async () => {

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