[FC-0036] feat: tags drawer style refinements

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';
@@ -398,84 +399,97 @@
 
   return (
     <div className="d-flex">
-      <Collapsible
-        title={name}
-        styling="card-lg"
-        className="taxonomy-tags-collapsible"
+      <Collapsible.Advanced
+        className="collapsible-card-lg taxonomy-tags-collapsible"
         open={collapsibleState}
         onClose={() => closeCollapsible(taxonomyId)}
         onOpen={() => openCollapsible(taxonomyId)}
       >
-        { Object.keys(appliedContentTagsTree).length !== 0
-            && (
-              <div className="mb-3" key={taxonomyId}>
-                <TagsTree
-                  tags={appliedContentTagsTree}
-                  parentKey={taxonomyId.toString()}
-                  removeTagHandler={removeAppliedTagHandler}
-                  isEditMode={isEditMode}
-                />
-              </div>
+        <Collapsible.Trigger className="collapsible-trigger pl-2.5">
+          <Collapsible.Visible whenClosed>
+            <Icon src={KeyboardArrowDown} />
+          </Collapsible.Visible>
+
+          <Collapsible.Visible whenOpen>
+            <Icon src={KeyboardArrowUp} />
+          </Collapsible.Visible>
+          <h4 className="flex-grow-1 pl-2">{name}</h4>
+        </Collapsible.Trigger>
+
+        <Collapsible.Body className="collapsible-body">
+          <div key={taxonomyId}>
+            { Object.keys(appliedContentTagsTree).length !== 0
+              && (
+                <div className="mb-3" key={taxonomyId}>
+                  <TagsTree
+                    tags={appliedContentTagsTree}
+                    parentKey={taxonomyId.toString()}
+                    removeTagHandler={removeAppliedTagHandler}
+                    isEditMode={isEditMode}
+                  />
+                </div>
             )}
-        <div className="d-flex taxonomy-tags-selector-menu">
-          {isEditMode && 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,
-          })}
+          </div>
+
+          <div className="d-flex taxonomy-tags-selector-menu">
+
+            {isEditMode && 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;
+    }
   }
 
   .tags-tree {
@@ -56,3 +60,7 @@
     color: white !important;
   }
 }
+
+.taxonomy-tags-count-chip > .pgn__chip {
+  background: none;
+}

src/content-tags-drawer/ContentTagsDrawer.jsx

@@ -3,7 +3,6 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import {
   Container,
-  CloseButton,
   Spinner,
   Stack,
   Button,
@@ -93,12 +92,10 @@ const ContentTagsDrawer = ({ id, onClose }) => {
   }, [commitGlobalStagedTagsStatus]);
 
   return (
-    <div id="content-tags-drawer" className="mt-1 tags-drawer">
-      <Container size="xl">
-        <CloseButton onClick={() => onCloseDrawer()} data-testid="drawer-close-button" />
-        <span>{intl.formatMessage(messages.headerSubtitle)}</span>
+    <div id="content-tags-drawer" className="tags-drawer d-flex flex-column justify-content-between">
+      <Container size="xl" className="pt-4 pr-4 pl-4">
         { isContentDataLoaded
-          ? <h3>{ contentName }</h3>
+          ? <h2>{ contentName }</h2>
           : (
             <div className="d-flex justify-content-center align-items-center flex-column">
               <Spinner
@@ -110,6 +107,7 @@ const ContentTagsDrawer = ({ id, onClose }) => {
           )}
 
         <hr />
+        <p className="lead text-gray-500 font-weight-bold">{intl.formatMessage(messages.headerSubtitle)}</p>
 
         { isTaxonomyListLoaded && isContentTaxonomyTagsLoaded
           ? tagsByTaxonomy.map((data) => (
@@ -140,7 +138,7 @@ const ContentTagsDrawer = ({ id, onClose }) => {
 
       { isTaxonomyListLoaded && isContentTaxonomyTagsLoaded && (
         <Container
-          className="bg-white position-absolute p-3.5 tags-drawer-footer"
+          className="bg-white position-sticky p-3.5 tags-drawer-footer"
         >
           <div className="d-flex justify-content-end">
             { commitGlobalStagedTagsStatus !== 'loading' ? (

src/content-tags-drawer/ContentTagsDrawer.scss

@@ -9,6 +9,8 @@
 }
 
 .tags-drawer {
+  min-height: 100vh;
+
   .tags-drawer-footer {
     @include pgn-box-shadow(2, "up");
 
@@ -22,3 +24,11 @@
   }
 }
 
+// Apply styles to sheet only if it has a child with a .tags-drawer class
+.pgn__sheet-component {
+  &:has(.tags-drawer) {
+    overflow-y: scroll;
+    padding: 0;
+    min-height: 100vh;
+  }
+}

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

@@ -357,30 +357,6 @@ describe('<ContentTagsDrawer />', () => {
     expect(screen.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 onClose when cancel is clicked', async () => {
     setupMockDataForStagedTagsTesting();
     render(<RootWrapper onClose={mockOnClose} />);

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 () => {