From 0c7512da10d4dc35b0cfdcb42c0ccf9cfee37735 Mon Sep 17 00:00:00 2001
From: Yusuf Musleh <yusuf@opencraft.com>
Date: Sun, 7 Apr 2024 22:26:36 +0300
Subject: [PATCH 1/6] feat: Remove 'x' close btn from tags drawer

---
 src/content-tags-drawer/ContentTagsDrawer.jsx |  2 --
 .../ContentTagsDrawer.test.jsx                | 24 -------------------
 .../card-header/CardHeader.test.jsx           |  2 +-
 3 files changed, 1 insertion(+), 27 deletions(-)

diff --git a/src/content-tags-drawer/ContentTagsDrawer.jsx b/src/content-tags-drawer/ContentTagsDrawer.jsx
index 1c333fe91b..5ce3d7f394 100644
--- a/src/content-tags-drawer/ContentTagsDrawer.jsx
+++ b/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,
@@ -85,7 +84,6 @@ const ContentTagsDrawer = ({ id, onClose }) => {
   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>
         { isContentDataLoaded
           ? <h3>{ contentName }</h3>
diff --git a/src/content-tags-drawer/ContentTagsDrawer.test.jsx b/src/content-tags-drawer/ContentTagsDrawer.test.jsx
index 4f9e98e802..bd81000128 100644
--- a/src/content-tags-drawer/ContentTagsDrawer.test.jsx
+++ b/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} />);
diff --git a/src/course-outline/card-header/CardHeader.test.jsx b/src/course-outline/card-header/CardHeader.test.jsx
index 0e40058c3f..c734300433 100644
--- a/src/course-outline/card-header/CardHeader.test.jsx
+++ b/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 () => {

From 0f68ad9a2b2f97dd129b46039dce8f1d69f1846e Mon Sep 17 00:00:00 2001
From: Yusuf Musleh <yusuf@opencraft.com>
Date: Mon, 8 Apr 2024 14:36:19 +0300
Subject: [PATCH 2/6] fix: Scrolling + sticky footer on tags drawer

---
 src/content-tags-drawer/ContentTagsDrawer.jsx  |  4 ++--
 src/content-tags-drawer/ContentTagsDrawer.scss | 10 ++++++++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/content-tags-drawer/ContentTagsDrawer.jsx b/src/content-tags-drawer/ContentTagsDrawer.jsx
index 5ce3d7f394..475b29fc24 100644
--- a/src/content-tags-drawer/ContentTagsDrawer.jsx
+++ b/src/content-tags-drawer/ContentTagsDrawer.jsx
@@ -82,7 +82,7 @@ const ContentTagsDrawer = ({ id, onClose }) => {
   }, [commitGlobalStagedTagsStatus]);
 
   return (
-    <div id="content-tags-drawer" className="mt-1 tags-drawer">
+    <div id="content-tags-drawer" className="mt-1 tags-drawer d-flex flex-column justify-content-between">
       <Container size="xl">
         <span>{intl.formatMessage(messages.headerSubtitle)}</span>
         { isContentDataLoaded
@@ -124,7 +124,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' ? (
diff --git a/src/content-tags-drawer/ContentTagsDrawer.scss b/src/content-tags-drawer/ContentTagsDrawer.scss
index 093f4184d3..7ca2ca1a9d 100644
--- a/src/content-tags-drawer/ContentTagsDrawer.scss
+++ b/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;
+  }
+}

From bfe148efe17aef2015fdd535ae417488313c1c0d Mon Sep 17 00:00:00 2001
From: Yusuf Musleh <yusuf@opencraft.com>
Date: Mon, 8 Apr 2024 15:55:41 +0300
Subject: [PATCH 3/6] feat: Change style for taxonomy tags count

---
 .../ContentTagsCollapsible.jsx                   | 16 ++++++++--------
 .../ContentTagsCollapsible.scss                  |  4 ++++
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/content-tags-drawer/ContentTagsCollapsible.jsx b/src/content-tags-drawer/ContentTagsCollapsible.jsx
index e20f5c937a..75bd52882d 100644
--- a/src/content-tags-drawer/ContentTagsCollapsible.jsx
+++ b/src/content-tags-drawer/ContentTagsCollapsible.jsx
@@ -9,7 +9,9 @@ import {
   Collapsible,
   Button,
   Spinner,
+  Chip,
 } from '@openedx/paragon';
+import { Tag } from '@openedx/paragon/icons';
 import classNames from 'classnames';
 import { SelectableBox } from '@edx/frontend-lib-content-components';
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -446,16 +448,14 @@ const ContentTagsCollapsible = ({
           )}
         </div>
       </Collapsible>
-      <div className="d-flex">
-        <Badge
-          variant="light"
-          pill
-          className={classNames('align-self-start', 'mt-3', {
-            invisible: contentTagsCount === 0,
-          })}
+      <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>
   );
diff --git a/src/content-tags-drawer/ContentTagsCollapsible.scss b/src/content-tags-drawer/ContentTagsCollapsible.scss
index 5eb3cbff6f..847f2d0c37 100644
--- a/src/content-tags-drawer/ContentTagsCollapsible.scss
+++ b/src/content-tags-drawer/ContentTagsCollapsible.scss
@@ -52,3 +52,7 @@
     color: white !important;
   }
 }
+
+.taxonomy-tags-count-chip > .pgn__chip {
+  background: none;
+}

From 77629454f566f143a7a5123217f7506a3159c86c Mon Sep 17 00:00:00 2001
From: Yusuf Musleh <yusuf@opencraft.com>
Date: Tue, 9 Apr 2024 14:01:51 +0300
Subject: [PATCH 4/6] feat: Update heading styles in tags drawer

---
 src/content-tags-drawer/ContentTagsCollapsible.jsx | 2 +-
 src/content-tags-drawer/ContentTagsDrawer.jsx      | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/content-tags-drawer/ContentTagsCollapsible.jsx b/src/content-tags-drawer/ContentTagsCollapsible.jsx
index 75bd52882d..bead116c4a 100644
--- a/src/content-tags-drawer/ContentTagsCollapsible.jsx
+++ b/src/content-tags-drawer/ContentTagsCollapsible.jsx
@@ -393,7 +393,7 @@ const ContentTagsCollapsible = ({
 
   return (
     <div className="d-flex">
-      <Collapsible title={name} styling="card-lg" className="taxonomy-tags-collapsible">
+      <Collapsible title={<h4>{name}</h4>} styling="card-lg" className="taxonomy-tags-collapsible">
         <div key={taxonomyId}>
           <ContentTagsTree tagsTree={appliedContentTagsTree} removeTagHandler={removeAppliedTagHandler} />
         </div>
diff --git a/src/content-tags-drawer/ContentTagsDrawer.jsx b/src/content-tags-drawer/ContentTagsDrawer.jsx
index 475b29fc24..057fcf8c04 100644
--- a/src/content-tags-drawer/ContentTagsDrawer.jsx
+++ b/src/content-tags-drawer/ContentTagsDrawer.jsx
@@ -82,11 +82,10 @@ const ContentTagsDrawer = ({ id, onClose }) => {
   }, [commitGlobalStagedTagsStatus]);
 
   return (
-    <div id="content-tags-drawer" className="mt-1 tags-drawer d-flex flex-column justify-content-between">
-      <Container size="xl">
-        <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
@@ -98,6 +97,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) => (

From ad15c0436fb674dafd3523bf9a1bd34c77da6551 Mon Sep 17 00:00:00 2001
From: Yusuf Musleh <yusuf@opencraft.com>
Date: Tue, 9 Apr 2024 15:54:55 +0300
Subject: [PATCH 5/6] feat: Move dropdown arrows to left of taxonomy

---
 .../ContentTagsCollapsible.jsx                | 126 ++++++++++--------
 .../ContentTagsCollapsible.scss               |   4 +
 src/content-tags-drawer/ContentTagsDrawer.jsx |   2 +-
 3 files changed, 75 insertions(+), 57 deletions(-)

diff --git a/src/content-tags-drawer/ContentTagsCollapsible.jsx b/src/content-tags-drawer/ContentTagsCollapsible.jsx
index bead116c4a..97b73d5f16 100644
--- a/src/content-tags-drawer/ContentTagsCollapsible.jsx
+++ b/src/content-tags-drawer/ContentTagsCollapsible.jsx
@@ -5,14 +5,13 @@
 import React from 'react';
 import Select, { components } from 'react-select';
 import {
-  Badge,
   Collapsible,
   Button,
   Spinner,
   Chip,
+  Icon,
 } from '@openedx/paragon';
-import { Tag } from '@openedx/paragon/icons';
-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';
@@ -393,61 +392,76 @@ const ContentTagsCollapsible = ({
 
   return (
     <div className="d-flex">
-      <Collapsible title={<h4>{name}</h4>} 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>
+        <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}
diff --git a/src/content-tags-drawer/ContentTagsCollapsible.scss b/src/content-tags-drawer/ContentTagsCollapsible.scss
index 847f2d0c37..d7ac5b91b3 100644
--- a/src/content-tags-drawer/ContentTagsCollapsible.scss
+++ b/src/content-tags-drawer/ContentTagsCollapsible.scss
@@ -4,6 +4,10 @@
 
   .collapsible-trigger {
     border: none !important;
+
+    .pgn__icon {
+      margin-left: -3px;
+    }
   }
 }
 
diff --git a/src/content-tags-drawer/ContentTagsDrawer.jsx b/src/content-tags-drawer/ContentTagsDrawer.jsx
index 057fcf8c04..27adb01283 100644
--- a/src/content-tags-drawer/ContentTagsDrawer.jsx
+++ b/src/content-tags-drawer/ContentTagsDrawer.jsx
@@ -97,7 +97,7 @@ const ContentTagsDrawer = ({ id, onClose }) => {
           )}
 
         <hr />
-        <p className='lead text-gray-500 font-weight-bold'>{intl.formatMessage(messages.headerSubtitle)}</p>
+        <p className="lead text-gray-500 font-weight-bold">{intl.formatMessage(messages.headerSubtitle)}</p>
 
         { isTaxonomyListLoaded && isContentTaxonomyTagsLoaded
           ? tagsByTaxonomy.map((data) => (

From 998f75b4b604b42fbf8ed85083f1fe369a7b7fd7 Mon Sep 17 00:00:00 2001
From: XnpioChV <xnpiochv@gmail.com>
Date: Wed, 10 Apr 2024 14:00:09 -0500
Subject: [PATCH 6/6] style: Nits

---
 src/content-tags-drawer/ContentTagsDrawerHelper.jsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/content-tags-drawer/ContentTagsDrawerHelper.jsx b/src/content-tags-drawer/ContentTagsDrawerHelper.jsx
index 1fdf30836f..9eceb5c773 100644
--- a/src/content-tags-drawer/ContentTagsDrawerHelper.jsx
+++ b/src/content-tags-drawer/ContentTagsDrawerHelper.jsx
@@ -292,9 +292,6 @@ const useContentTagsDrawerHelper = (contentId) => {
     // It is constructed this way to maintain the order
     // of the list `fechedTaxonomies`
     const mergedTagsArray = fechedTaxonomies.map(obj => mergedTags[obj.id]);
-    console.log("RRRRRRRRRRRRRr");
-    console.log(mergedTagsArray);
-    console.log(globalStagedRemovedContentTags);
 
     setTagsByTaxonomy(mergedTagsArray);
   }, [