From 9327948b61d2738a0af605ada6f582e85bb8700d Mon Sep 17 00:00:00 2001
From: XnpioChV <xnpiochv@gmail.com>
Date: Wed, 3 Apr 2024 11:35:25 -0500
Subject: [PATCH] feat: [FC-0036] Refined tag drawer

It contains different changes to achieve the reading and editing mode of the drawer tag:

* Manage tags drawer footer with buttons added.
* Creation of ContentTagsDrawerContext.
* Creation of global state and global removed state to allow edit mode.
* Update API client to match with openedx-learning 0.9.1: Save tags of multiple taxonomies; to save all tags added/removed on edit mode
* Extract TagsTree and use it on the Tags Drawer.
* Update TagsTree to allow edit mode.
* Add a Toast on Tags Drawer; show the toast afert save.
* Scrolling + sticky footer on tags drawer
---
 .../ContentTagsCollapsible.jsx                |  60 ++-
 .../ContentTagsCollapsible.scss               |   9 +-
 .../ContentTagsCollapsible.test.jsx           | 232 +++++++---
 .../ContentTagsCollapsibleHelper.jsx          | 136 ++++--
 src/content-tags-drawer/ContentTagsDrawer.jsx | 262 +++++------
 .../ContentTagsDrawer.scss                    |  21 +
 .../ContentTagsDrawer.test.jsx                | 421 ++++++++++++++++--
 .../ContentTagsDrawerHelper.jsx               | 373 ++++++++++++++++
 src/content-tags-drawer/ContentTagsTree.jsx   |  81 ----
 .../ContentTagsTree.test.jsx                  |  57 ---
 src/content-tags-drawer/TagBubble.jsx         |  51 ---
 src/content-tags-drawer/TagBubble.scss        |   5 -
 src/content-tags-drawer/TagBubble.test.jsx    | 109 -----
 src/content-tags-drawer/TagsTree.jsx          | 168 +++++++
 src/content-tags-drawer/TagsTree.scss         |  21 +
 src/content-tags-drawer/TagsTree.test.jsx     |  60 +++
 .../__mocks__/contentTaxonomyTagsTreeMock.js  |  18 +
 src/content-tags-drawer/common/context.js     |  37 ++
 src/content-tags-drawer/data/api.js           |   8 +-
 src/content-tags-drawer/data/api.test.js      |   6 +-
 src/content-tags-drawer/data/apiHooks.jsx     |   7 +-
 .../data/apiHooks.test.jsx                    |  13 +-
 src/content-tags-drawer/data/types.mjs        |  31 ++
 src/content-tags-drawer/index.scss            |   2 +-
 src/content-tags-drawer/messages.js           |  35 ++
 .../tags-sidebar-controls/TagsSidebarBody.jsx |   2 +-
 .../tags-sidebar-controls/TagsTree.jsx        |  50 ---
 .../tags-sidebar-controls/TagsTree.test.jsx   |  13 -
 28 files changed, 1585 insertions(+), 703 deletions(-)
 create mode 100644 src/content-tags-drawer/ContentTagsDrawerHelper.jsx
 delete mode 100644 src/content-tags-drawer/ContentTagsTree.jsx
 delete mode 100644 src/content-tags-drawer/ContentTagsTree.test.jsx
 delete mode 100644 src/content-tags-drawer/TagBubble.jsx
 delete mode 100644 src/content-tags-drawer/TagBubble.scss
 delete mode 100644 src/content-tags-drawer/TagBubble.test.jsx
 create mode 100644 src/content-tags-drawer/TagsTree.jsx
 create mode 100644 src/content-tags-drawer/TagsTree.scss
 create mode 100644 src/content-tags-drawer/TagsTree.test.jsx
 create mode 100644 src/content-tags-drawer/common/context.js
 delete mode 100644 src/content-tags-drawer/tags-sidebar-controls/TagsTree.jsx
 delete mode 100644 src/content-tags-drawer/tags-sidebar-controls/TagsTree.test.jsx

diff --git a/src/content-tags-drawer/ContentTagsCollapsible.jsx b/src/content-tags-drawer/ContentTagsCollapsible.jsx
index b58f33184d..2428e3633e 100644
--- a/src/content-tags-drawer/ContentTagsCollapsible.jsx
+++ b/src/content-tags-drawer/ContentTagsCollapsible.jsx
@@ -2,7 +2,7 @@
 // disable prop-types since we're using TypeScript to define the prop types,
 // but the linter can't detect that in a .jsx file.
 /* eslint-disable react/prop-types */
-import React from 'react';
+import React, { useContext } from 'react';
 import Select, { components } from 'react-select';
 import {
   Collapsible,
@@ -19,14 +19,14 @@ import messages from './messages';
 
 import ContentTagsDropDownSelector from './ContentTagsDropDownSelector';
 
-import ContentTagsTree from './ContentTagsTree';
-
 import useContentTagsCollapsibleHelper from './ContentTagsCollapsibleHelper';
+import TagsTree from './TagsTree';
+import { ContentTagsDrawerContext } from './common/context';
 
-/** @typedef {import("./ContentTagsCollapsible").TagTreeEntry} TagTreeEntry */
 /** @typedef {import("./ContentTagsCollapsible").TaxonomySelectProps} TaxonomySelectProps */
 /** @typedef {import("../taxonomy/data/types.mjs").TaxonomyData} TaxonomyData */
 /** @typedef {import("./data/types.mjs").Tag} ContentTagData */
+/** @typedef {import("./data/types.mjs").StagedTagData} StagedTagData */
 
 /**
  * Custom Menu component for our Select box
@@ -77,7 +77,7 @@ const CustomMenu = (props) => {
               tabIndex="0"
               ref={selectCancelRef}
               variant="tertiary"
-              className="cancel-add-tags-button"
+              className="tags-drawer-cancel-button"
               onClick={handleCancelStagedTags}
             >
               { intl.formatMessage(messages.collapsibleCancelStagedTagsButtonText) }
@@ -224,17 +224,16 @@ const CustomIndicatorsContainer = (props) => {
  *
  * @param {Object} props - The component props.
  * @param {string} props.contentId - Id of the content object
- * @param {{value: string, label: string}[]} props.stagedContentTags
+ * @param {StagedTagData[]} props.stagedContentTags
  *        - Array of staged tags represented as objects with value/label
- * @param {(taxonomyId: number, tag: {value: string, label: string}) => void} props.addStagedContentTag
- *        - Callback function to add a staged tag for a taxonomy
- * @param {(taxonomyId: number, tagValue: string) => void} props.removeStagedContentTag
- *        - Callback function to remove a staged tag from a taxonomy
- * @param {Function} props.setStagedTags - Callback function to set staged tags for a taxonomy to provided tags list
  * @param {TaxonomyData & {contentTags: ContentTagData[]}} props.taxonomyAndTagsData - Taxonomy metadata & applied tags
+ * @param {boolean} props.collapsibleState - True if the collapsible is open
  */
 const ContentTagsCollapsible = ({
-  contentId, taxonomyAndTagsData, stagedContentTags, addStagedContentTag, removeStagedContentTag, setStagedTags,
+  contentId,
+  taxonomyAndTagsData,
+  stagedContentTags,
+  collapsibleState,
 }) => {
   const intl = useIntl();
   const { id: taxonomyId, name, canTagObject } = taxonomyAndTagsData;
@@ -245,6 +244,13 @@ const ContentTagsCollapsible = ({
 
   const [selectMenuIsOpen, setSelectMenuIsOpen] = React.useState(false);
 
+  const {
+    isEditMode,
+    setStagedTags,
+    openCollapsible,
+    closeCollapsible,
+  } = useContext(ContentTagsDrawerContext);
+
   const {
     tagChangeHandler,
     removeAppliedTagHandler,
@@ -252,14 +258,12 @@ const ContentTagsCollapsible = ({
     stagedContentTagsTree,
     contentTagsCount,
     checkedTags,
-    commitStagedTags,
+    commitStagedTagsToGlobal,
     updateTags,
   } = useContentTagsCollapsibleHelper(
     contentId,
-    taxonomyAndTagsData,
-    addStagedContentTag,
-    removeStagedContentTag,
     stagedContentTags,
+    taxonomyAndTagsData,
   );
 
   const [searchTerm, setSearchTerm] = React.useState('');
@@ -309,12 +313,12 @@ const ContentTagsCollapsible = ({
   }, [taxonomyId, setStagedTags, stagedContentTags, tagChangeHandler]);
 
   const handleCommitStagedTags = React.useCallback(() => {
-    commitStagedTags();
+    commitStagedTagsToGlobal();
     handleStagedTagsMenuChange([]);
     selectRef.current?.blur();
     setSearchTerm('');
     setSelectMenuIsOpen(false);
-  }, [commitStagedTags, handleStagedTagsMenuChange, selectRef, setSearchTerm]);
+  }, [commitStagedTagsToGlobal, handleStagedTagsMenuChange, selectRef, setSearchTerm]);
 
   const handleCancelStagedTags = React.useCallback(() => {
     handleStagedTagsMenuChange([]);
@@ -366,6 +370,9 @@ const ContentTagsCollapsible = ({
     <div className="d-flex">
       <Collapsible.Advanced
         className="collapsible-card-lg taxonomy-tags-collapsible"
+        open={collapsibleState}
+        onClose={() => closeCollapsible(taxonomyId)}
+        onOpen={() => openCollapsible(taxonomyId)}
       >
         <Collapsible.Trigger className="collapsible-trigger pl-2.5">
           <Collapsible.Visible whenClosed>
@@ -379,13 +386,19 @@ const ContentTagsCollapsible = ({
         </Collapsible.Trigger>
 
         <Collapsible.Body className="collapsible-body">
-          <div key={taxonomyId}>
-            <ContentTagsTree tagsTree={appliedContentTagsTree} removeTagHandler={removeAppliedTagHandler} />
-          </div>
+          { Object.keys(appliedContentTagsTree).length !== 0
+            && (
+              <div className="mb-3" key={taxonomyId}>
+                <TagsTree
+                  tags={appliedContentTagsTree}
+                  parentKey={taxonomyId.toString()}
+                  removeTagHandler={removeAppliedTagHandler}
+                />
+              </div>
+            )}
 
           <div className="d-flex taxonomy-tags-selector-menu">
-
-            {canTagObject && (
+            {isEditMode && canTagObject && (
               <Select
                 onBlur={handleOnBlur}
                 styles={{
@@ -436,6 +449,7 @@ const ContentTagsCollapsible = ({
       </Collapsible.Advanced>
       <div className="d-flex align-items-start pt-2.5 taxonomy-tags-count-chip">
         <Chip
+          className="border-0"
           iconBefore={Tag}
           iconBeforeAlt="icon-before"
           disabled={contentTagsCount === 0}
diff --git a/src/content-tags-drawer/ContentTagsCollapsible.scss b/src/content-tags-drawer/ContentTagsCollapsible.scss
index d6dc4df8da..0da1ea82f1 100644
--- a/src/content-tags-drawer/ContentTagsCollapsible.scss
+++ b/src/content-tags-drawer/ContentTagsCollapsible.scss
@@ -9,6 +9,10 @@
       margin-left: -3px;
     }
   }
+
+  .tags-tree {
+    font-size: 1rem;
+  }
 }
 
 .taxonomy-tags-selector-menu {
@@ -37,11 +41,6 @@
   color: $info-900 !important;
 }
 
-.cancel-add-tags-button:hover {
-  background-color: transparent;
-  color: $gray-300 !important;
-}
-
 .react-select-add-tags__control {
   border-radius: 0 !important;
 }
diff --git a/src/content-tags-drawer/ContentTagsCollapsible.test.jsx b/src/content-tags-drawer/ContentTagsCollapsible.test.jsx
index 8fc99a7699..6d921df16c 100644
--- a/src/content-tags-drawer/ContentTagsCollapsible.test.jsx
+++ b/src/content-tags-drawer/ContentTagsCollapsible.test.jsx
@@ -1,14 +1,17 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import {
   act,
   render,
   fireEvent,
+  screen,
+  within,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import ContentTagsCollapsible from './ContentTagsCollapsible';
 import messages from './messages';
+import { ContentTagsDrawerContext } from './common/context';
 
 const taxonomyMockData = {
   hasMorePages: false,
@@ -122,6 +125,16 @@ const data = {
   addStagedContentTag: jest.fn(),
   removeStagedContentTag: jest.fn(),
   setStagedTags: jest.fn(),
+  removeGlobalStagedContentTag: jest.fn(),
+  addRemovedContentTag: jest.fn(),
+  deleteRemovedContentTag: jest.fn(),
+  globalStagedContentTags: {},
+  globalStagedRemovedContentTags: {},
+  setGlobalStagedContentTags: jest.fn(),
+  isEditMode: true,
+  collapsibleState: true,
+  openCollapsible: jest.fn(),
+  closeCollapsible: jest.fn(),
 };
 
 const ContentTagsCollapsibleComponent = ({
@@ -131,18 +144,44 @@ const ContentTagsCollapsibleComponent = ({
   addStagedContentTag,
   removeStagedContentTag,
   setStagedTags,
-}) => (
-  <IntlProvider locale="en" messages={{}}>
-    <ContentTagsCollapsible
-      contentId={contentId}
-      taxonomyAndTagsData={taxonomyAndTagsData}
-      stagedContentTags={stagedContentTags}
-      addStagedContentTag={addStagedContentTag}
-      removeStagedContentTag={removeStagedContentTag}
-      setStagedTags={setStagedTags}
-    />
-  </IntlProvider>
-);
+  removeGlobalStagedContentTag,
+  addRemovedContentTag,
+  deleteRemovedContentTag,
+  globalStagedContentTags,
+  globalStagedRemovedContentTags,
+  setGlobalStagedContentTags,
+  isEditMode,
+  collapsibleState,
+  openCollapsible,
+  closeCollapsible,
+}) => {
+  const context = useMemo(() => ({
+    addStagedContentTag,
+    removeStagedContentTag,
+    setStagedTags,
+    removeGlobalStagedContentTag,
+    addRemovedContentTag,
+    deleteRemovedContentTag,
+    globalStagedContentTags,
+    globalStagedRemovedContentTags,
+    setGlobalStagedContentTags,
+    isEditMode,
+    openCollapsible,
+    closeCollapsible,
+  }), []);
+  return (
+    <ContentTagsDrawerContext.Provider value={context}>
+      <IntlProvider locale="en" messages={{}}>
+        <ContentTagsCollapsible
+          contentId={contentId}
+          taxonomyAndTagsData={taxonomyAndTagsData}
+          stagedContentTags={stagedContentTags}
+          collapsibleState={collapsibleState}
+        />
+      </IntlProvider>
+    </ContentTagsDrawerContext.Provider>
+  );
+};
 
 ContentTagsCollapsibleComponent.propTypes = ContentTagsCollapsible.propTypes;
 
@@ -170,6 +209,16 @@ describe('<ContentTagsCollapsible />', () => {
         addStagedContentTag={componentData.addStagedContentTag}
         removeStagedContentTag={componentData.removeStagedContentTag}
         setStagedTags={componentData.setStagedTags}
+        removeGlobalStagedContentTag={componentData.removeGlobalStagedContentTag}
+        addRemovedContentTag={componentData.addRemovedContentTag}
+        deleteRemovedContentTag={componentData.deleteRemovedContentTag}
+        globalStagedContentTags={componentData.globalStagedContentTags}
+        globalStagedRemovedContentTags={componentData.globalStagedRemovedContentTags}
+        setGlobalStagedContentTags={componentData.setGlobalStagedContentTags}
+        isEditMode={componentData.isEditMode}
+        collapsibleState={componentData.collapsibleState}
+        openCollapsible={componentData.openCollapsible}
+        closeCollapsible={componentData.closeCollapsible}
       />,
     );
   }
@@ -181,14 +230,59 @@ describe('<ContentTagsCollapsible />', () => {
     expect(getByText('3')).toBeInTheDocument();
   });
 
-  it('should call `addStagedContentTag` when tag checked in the dropdown', async () => {
-    const { container, getByText, getAllByText } = await getComponent();
+  it('should render read mode', async () => {
+    await getComponent({
+      ...data,
+      isEditMode: false,
+    });
 
-    // Expand the Taxonomy to view applied tags and "Add a tag" button
-    const expandToggle = container.getElementsByClassName('collapsible-trigger')[0];
+    expect(screen.queryByRole('button', { name: /delete/i })).not.toBeInTheDocument();
+    expect(screen.queryByText(/add a tag/i)).not.toBeInTheDocument();
+  });
 
+  it('should render edit mode', async () => {
+    await getComponent();
+
+    expect(screen.getAllByRole(
+      'button',
+      { name: /delete/i },
+    ).length).toBe(3);
+    expect(screen.getByText(/add a tag/i)).toBeInTheDocument();
+  });
+
+  it('should call `openCollapsible` when click in the collapsible', async () => {
+    await getComponent({
+      ...data,
+      collapsibleState: false,
+    });
+
+    const expandToggle = screen.getByRole('button', {
+      name: /taxonomy 1/i,
+    });
     fireEvent.click(expandToggle);
 
+    expect(data.openCollapsible).toHaveBeenCalledTimes(1);
+    expect(data.closeCollapsible).toHaveBeenCalledTimes(0);
+  });
+
+  it('should call `closeCollapsible` when click in the collapsible', async () => {
+    await getComponent({
+      ...data,
+      collapsibleState: true,
+    });
+
+    const expandToggle = screen.getByRole('button', {
+      name: /taxonomy 1/i,
+    });
+    fireEvent.click(expandToggle);
+
+    expect(data.closeCollapsible).toHaveBeenCalledTimes(1);
+    expect(data.openCollapsible).toHaveBeenCalledTimes(0);
+  });
+
+  it('should call `addStagedContentTag` when tag checked in the dropdown', async () => {
+    const { getByText, getAllByText } = await getComponent();
+
     // Click on "Add a tag" button to open dropdown to select new tags
     const addTagsButton = getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
     // Use `mouseDown/mouseUp` instead of `click` since the react-select didn't respond to `click`
@@ -213,12 +307,7 @@ describe('<ContentTagsCollapsible />', () => {
   });
 
   it('should call `removeStagedContentTag` when tag staged tag unchecked in the dropdown', async () => {
-    const { container, getByText, getAllByText } = await getComponent();
-
-    // Expand the Taxonomy to view applied tags and "Add a tag" button
-    const expandToggle = container.getElementsByClassName('collapsible-trigger')[0];
-
-    fireEvent.click(expandToggle);
+    const { getByText, getAllByText } = await getComponent();
 
     // Click on "Add a tag" button to open dropdown to select new tags
     const addTagsButton = getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
@@ -242,9 +331,57 @@ describe('<ContentTagsCollapsible />', () => {
     expect(data.removeStagedContentTag).toHaveBeenCalledWith(taxonomyId, tagValue);
   });
 
+  it('should call `removeGlobalStagedContentTag` when global staged tag is deleted', async () => {
+    await getComponent({
+      ...data,
+      taxonomyAndTagsData: {
+        id: 123,
+        name: 'Taxonomy 1',
+        canTagObject: true,
+        contentTags: [
+          {
+            value: 'Tag 3',
+            lineage: ['Tag 3'],
+            canDeleteObjecttag: true,
+          },
+        ],
+      },
+      globalStagedContentTags: {
+        123: [{
+          value: 'Tag 3',
+          lineage: ['Tag 3'],
+          canDeleteObjecttag: true,
+        }],
+      },
+    });
+
+    const deleteButton = screen.getByRole('button', {
+      name: /delete/i,
+    });
+    fireEvent.click(deleteButton);
+
+    const taxonomyId = 123;
+    expect(data.removeGlobalStagedContentTag).toHaveBeenCalledTimes(1);
+    expect(data.removeGlobalStagedContentTag).toHaveBeenCalledWith(taxonomyId, 'Tag 3');
+  });
+
+  it('should call `addRemovedContentTag` when a feched tag is deleted', async () => {
+    await getComponent();
+
+    const tag = screen.getByText(/tag 2/i);
+    const deleteButton = within(tag).getByRole('button', {
+      name: /delete/i,
+    });
+    fireEvent.click(deleteButton);
+
+    const taxonomyId = 123;
+    expect(data.addRemovedContentTag).toHaveBeenCalledTimes(1);
+    expect(data.addRemovedContentTag).toHaveBeenCalledWith(taxonomyId, 'Tag 2');
+  });
+
   it('should call `setStagedTags` to clear staged tags when clicking inline "Add" button', async () => {
     // Setup component to have staged tags
-    const { container, getByText } = await getComponent({
+    const { getByText } = await getComponent({
       ...data,
       stagedContentTags: [{
         value: 'Tag%203',
@@ -252,11 +389,6 @@ describe('<ContentTagsCollapsible />', () => {
       }],
     });
 
-    // Expand the Taxonomy to view applied tags and staged tags
-    const expandToggle = container.getElementsByClassName('collapsible-trigger')[0];
-
-    fireEvent.click(expandToggle);
-
     // Click on inline "Add" button and check that the appropriate methods are called
     const inlineAdd = getByText(messages.collapsibleInlineAddStagedTagsButtonText.defaultMessage);
     fireEvent.click(inlineAdd);
@@ -277,11 +409,6 @@ describe('<ContentTagsCollapsible />', () => {
       }],
     });
 
-    // Expand the Taxonomy to view applied tags and staged tags
-    const expandToggle = container.getElementsByClassName('collapsible-trigger')[0];
-
-    fireEvent.click(expandToggle);
-
     // Click on dropdown with staged tags to expand it
     const selectTagsDropdown = container.getElementsByClassName('react-select-add-tags__control')[0];
     // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
@@ -307,11 +434,6 @@ describe('<ContentTagsCollapsible />', () => {
       }],
     });
 
-    // Expand the Taxonomy to view applied tags and staged tags
-    const expandToggle = container.getElementsByClassName('collapsible-trigger')[0];
-
-    fireEvent.click(expandToggle);
-
     // Click on dropdown with staged tags to expand it
     const selectTagsDropdown = container.getElementsByClassName('react-select-add-tags__control')[0];
     // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
@@ -332,13 +454,9 @@ describe('<ContentTagsCollapsible />', () => {
 
   it('should handle search term change', async () => {
     const {
-      container, getByText, getByRole, getByDisplayValue,
+      getByText, getByRole, getByDisplayValue,
     } = await getComponent();
 
-    // Expand the Taxonomy to view applied tags and "Add a tag" button
-    const expandToggle = container.getElementsByClassName('collapsible-trigger')[0];
-    fireEvent.click(expandToggle);
-
     // Click on "Add a tag" button to open dropdown
     const addTagsButton = getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
     // Use `mouseDown` instead of `click` since the react-select didn't respond to click
@@ -369,12 +487,7 @@ describe('<ContentTagsCollapsible />', () => {
   });
 
   it('should close dropdown selector when clicking away', async () => {
-    const { container, getByText, queryByText } = await getComponent();
-
-    // Expand the Taxonomy to view applied tags and "Add a tag" button
-    const expandToggle = container.getElementsByClassName('collapsible-trigger')[0];
-
-    fireEvent.click(expandToggle);
+    const { getByText, queryByText } = await getComponent();
 
     // Click on "Add a tag" button to open dropdown
     const addTagsButton = getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
@@ -398,17 +511,11 @@ describe('<ContentTagsCollapsible />', () => {
 
   it('should test keyboard navigation of add tags widget', async () => {
     const {
-      container,
       getByText,
       queryByText,
       queryAllByText,
     } = await getComponent();
 
-    // Expand the Taxonomy to view applied tags and "Add a tag" button
-    const expandToggle = container.getElementsByClassName('collapsible-trigger')[0];
-
-    fireEvent.click(expandToggle);
-
     // Click on "Add a tag" button to open dropdown
     const addTagsButton = getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
     // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
@@ -530,16 +637,13 @@ describe('<ContentTagsCollapsible />', () => {
   });
 
   it('should remove applied tags when clicking on `x` of tag bubble', async () => {
-    const { container, getByText } = await getComponent();
-
-    // Expand the Taxonomy to view applied tags
-    const expandToggle = container.getElementsByClassName('collapsible-trigger')[0];
-
-    fireEvent.click(expandToggle);
+    await getComponent();
 
     // Click on 'x' of applied tag to remove it
-    const appliedTag = getByText('Tag 2');
-    const xButtonAppliedTag = appliedTag.nextSibling;
+    const appliedTag = screen.getByText(/tag 2/i);
+    const xButtonAppliedTag = within(appliedTag).getByRole('button', {
+      name: /delete/i,
+    });
     xButtonAppliedTag.click();
 
     // Check that the applied tag has been removed
diff --git a/src/content-tags-drawer/ContentTagsCollapsibleHelper.jsx b/src/content-tags-drawer/ContentTagsCollapsibleHelper.jsx
index 6ded9481d3..cd8d525b6f 100644
--- a/src/content-tags-drawer/ContentTagsCollapsibleHelper.jsx
+++ b/src/content-tags-drawer/ContentTagsCollapsibleHelper.jsx
@@ -4,10 +4,13 @@ import { useCheckboxSetValues } from '@openedx/paragon';
 import { cloneDeep } from 'lodash';
 
 import { useContentTaxonomyTagsUpdater } from './data/apiHooks';
+import { ContentTagsDrawerContext } from './common/context';
 
 /** @typedef {import("../taxonomy/data/types.mjs").TaxonomyData} TaxonomyData */
 /** @typedef {import("./data/types.mjs").Tag} ContentTagData */
 /** @typedef {import("./ContentTagsCollapsible").TagTreeEntry} TagTreeEntry */
+/** @typedef {import("./data/types.mjs").StagedTagData} StagedTagData */
+/** @typedef {import("./data/types.mjs").UpdateTagsData} UpdateTagsData */
 
 /**
  * Util function that sorts the keys of a tree in alphabetical order.
@@ -33,16 +36,22 @@ const sortKeysAlphabetically = (tree) => {
  * tags selected in the staged tags tree
  *
  * @param {object} tree - tree to extract the leaf tags from
- * @returns {Array<string>} array of leaf (explicit) tags of provided tree
+ * @returns {StagedTagData[]} array of leaf (explicit) tags of provided tree
  */
 const getLeafTags = (tree) => {
-  const leafKeys = [];
+  const leafTags = [];
 
   function traverse(node) {
     Object.keys(node).forEach(key => {
       const child = node[key];
       if (Object.keys(child.children).length === 0) {
-        leafKeys.push(key);
+        leafTags.push({
+          value: key,
+          // Always true because this is a new added tag,
+          // so the user can delete.
+          canDeleteObjecttag: true,
+          lineage: child.lineage,
+        });
       } else {
         traverse(child.children);
       }
@@ -50,16 +59,15 @@ const getLeafTags = (tree) => {
   }
 
   traverse(tree);
-  return leafKeys;
+  return leafTags;
 };
 
 /**
  * Handles all the underlying logic for the ContentTagsCollapsible component
  * @param {string} contentId The ID of the content we're tagging (e.g. usage key)
+ * @param {StagedTagData[]} stagedContentTags
+ *       - Array of staged tags represented as objects with value/label
  * @param {TaxonomyData & {contentTags: ContentTagData[]}} taxonomyAndTagsData
- * @param {(taxonomyId: number, tag: {value: string, label: string}) => void} addStagedContentTag
- * @param {(taxonomyId: number, tagValue: string) => void} removeStagedContentTag
- * @param {{value: string, label: string}[]} stagedContentTags
  * @returns {{
  *      tagChangeHandler: (tagSelectableBoxValue: string, checked: boolean) => void,
  *      removeAppliedTagHandler: (tagSelectableBoxValue: string) => void,
@@ -67,24 +75,33 @@ const getLeafTags = (tree) => {
  *      stagedContentTagsTree: Record<string, TagTreeEntry>,
  *      contentTagsCount: number,
  *      checkedTags: any,
- *      commitStagedTags: () => void,
- *      updateTags: import('@tanstack/react-query').UseMutationResult<any, unknown, { tags: string[]; }, unknown>
+ *      commitStagedTagsToGlobal: () => void,
+ *      updateTags: import('@tanstack/react-query').UseMutationResult<
+ *                  any, unknown, { tagsData: Promise<UpdateTagsData[]>; }, unknown
+ *      >
  * }}
  */
 const useContentTagsCollapsibleHelper = (
   contentId,
-  taxonomyAndTagsData,
-  addStagedContentTag,
-  removeStagedContentTag,
   stagedContentTags,
+  taxonomyAndTagsData,
 ) => {
   const {
-    id, contentTags, canTagObject,
+    isEditMode,
+    addStagedContentTag,
+    removeStagedContentTag,
+    removeGlobalStagedContentTag,
+    addRemovedContentTag,
+    deleteRemovedContentTag,
+    globalStagedContentTags,
+    setGlobalStagedContentTags,
+    globalStagedRemovedContentTags,
+  } = React.useContext(ContentTagsDrawerContext);
+
+  const {
+    id, contentTags,
   } = taxonomyAndTagsData;
-  // State to determine whether an applied tag was removed so we make a call
-  // to the update endpoint to the reflect those changes
-  const [removingAppliedTag, setRemoveAppliedTag] = React.useState(false);
-  const updateTags = useContentTaxonomyTagsUpdater(contentId, id);
+  const updateTags = useContentTaxonomyTagsUpdater(contentId);
 
   // Keeps track of the content objects tags count (both implicit and explicit)
   const [contentTagsCount, setContentTagsCount] = React.useState(0);
@@ -94,27 +111,13 @@ const useContentTagsCollapsibleHelper = (
   const [stagedContentTagsTree, setStagedContentTagsTree] = React.useState({});
 
   // To handle checking/unchecking tags in the SelectableBox
-  const [checkedTags, { add, remove }] = useCheckboxSetValues();
+  const [checkedTags, { add, remove, clear }] = useCheckboxSetValues();
 
   // State to keep track of the staged tags (and along with ancestors) that should be removed
   const [stagedTagsToRemove, setStagedTagsToRemove] = React.useState(/** @type string[] */([]));
 
-  // Handles making requests to the backend when applied tags are removed
-  React.useEffect(() => {
-    // We have this check because this hook is fired when the component first loads
-    // and reloads (on refocus). We only want to make a request to the update endpoint when
-    // the user removes an applied tag
-    if (removingAppliedTag) {
-      setRemoveAppliedTag(false);
-
-      // Filter out staged tags from the checktags so they do not get committed
-      const tags = checkedTags.map(t => decodeURIComponent(t.split(',').slice(-1)));
-      const staged = stagedContentTags.map(t => t.label);
-      const remainingAppliedTags = tags.filter(t => !staged.includes(t));
-
-      updateTags.mutate({ tags: remainingAppliedTags });
-    }
-  }, [contentId, id, canTagObject, checkedTags, stagedContentTags]);
+  // State to keep track of the global tags (stagged and feched) that should be removed
+  const [globalTagsToRemove, setGlobalTagsToRemove] = React.useState(/** @type string[] */([]));
 
   // Handles the removal of staged content tags based on what was removed
   // from the staged tags tree. We are doing it in a useEffect since the removeTag
@@ -124,16 +127,57 @@ const useContentTagsCollapsibleHelper = (
     stagedTagsToRemove.forEach(tag => removeStagedContentTag(id, tag));
   }, [stagedTagsToRemove, removeStagedContentTag, id]);
 
+  // When you change the drawer mode, it is necessary to clear
+  // all checked tags in the select.
+  React.useEffect(() => {
+    clear();
+  }, [isEditMode]);
+
+  React.useEffect(() => {
+    globalTagsToRemove.forEach((tag) => {
+      if (globalStagedContentTags[id]
+          && globalStagedContentTags[id].some(t => t.value === tag)) {
+        // A new tag has been removed
+        removeGlobalStagedContentTag(id, tag);
+      } else if (contentTags.some(t => t.value === tag)) {
+        // A feched tag has been removed
+        addRemovedContentTag(id, tag);
+      }
+    });
+  }, [globalTagsToRemove, removeGlobalStagedContentTag, id]);
+
   // Handles making requests to the update endpoint when the staged tags need to be committed
-  const commitStagedTags = React.useCallback(() => {
+  const commitStagedTagsToGlobal = React.useCallback(() => {
     // Filter out only leaf nodes of staging tree to commit
     const explicitStaged = getLeafTags(stagedContentTagsTree);
 
-    // Filter out applied tags that should become implicit because a child tag was committed
-    const stagedLineages = stagedContentTags.map(st => decodeURIComponent(st.value).split(',').slice(0, -1)).flat();
-    const applied = contentTags.map((t) => t.value).filter(t => !stagedLineages.includes(t));
+    const globalTags = cloneDeep(globalStagedContentTags);
+    const newGlobalTags = [];
 
-    updateTags.mutate({ tags: [...applied, ...explicitStaged] });
+    explicitStaged.forEach((tag) => {
+      if (globalStagedRemovedContentTags[id]
+          && globalStagedRemovedContentTags[id].includes(tag.value)) {
+        // A feched tag that has been removed has been added again
+        deleteRemovedContentTag(id, tag.value);
+      } else {
+        // New tag added
+        newGlobalTags.push(tag);
+      }
+    });
+
+    if (newGlobalTags) {
+      if (!globalTags[id]) {
+        globalTags[id] = newGlobalTags;
+      } else {
+        // Filter out applied tags that should become implicit because a child tag was committed
+        const stagedLineages = stagedContentTags.map(st => decodeURIComponent(st.value).split(',').slice(0, -1)).flat();
+        const applied = globalTags[id].filter(t => !stagedLineages.includes(t.value));
+
+        globalTags[id] = [...applied, ...newGlobalTags];
+      }
+
+      setGlobalStagedContentTags(globalTags);
+    }
   }, [contentTags, stagedContentTags, stagedContentTagsTree, updateTags]);
 
   // This converts the contentTags prop to the tree structure mentioned above
@@ -246,8 +290,12 @@ const useContentTagsCollapsibleHelper = (
           canChangeObjecttag: false,
           canDeleteObjecttag: false,
         };
-      } else {
+        if (isExplicit) {
+          traversal[tag].lineage = tagLineage;
+        }
+      } /* istanbul ignore next */ else {
         traversal[tag].explicit = isExplicit;
+        traversal[tag].lineage = tagLineage;
       }
 
       // eslint-disable-next-line no-unused-expressions
@@ -301,10 +349,10 @@ const useContentTagsCollapsibleHelper = (
     remove(tagSelectableBoxValue);
 
     // Remove tags from applied tags
-    const tagsToRemove = removeTags(appliedContentTagsTree, tagLineage, false, tagLineage);
-    setStagedTagsToRemove(tagsToRemove);
+    removeTags(appliedContentTagsTree, tagLineage, false, tagLineage);
+    const selectedTag = tagLineage.slice(-1)[0];
 
-    setRemoveAppliedTag(true);
+    setGlobalTagsToRemove([selectedTag]);
   }, [appliedContentTagsTree, id, removeStagedContentTag]);
 
   return {
@@ -314,7 +362,7 @@ const useContentTagsCollapsibleHelper = (
     stagedContentTagsTree: sortKeysAlphabetically(stagedContentTagsTree),
     contentTagsCount,
     checkedTags,
-    commitStagedTags,
+    commitStagedTagsToGlobal,
     updateTags,
   };
 };
diff --git a/src/content-tags-drawer/ContentTagsDrawer.jsx b/src/content-tags-drawer/ContentTagsDrawer.jsx
index a629a16791..a1d15810de 100644
--- a/src/content-tags-drawer/ContentTagsDrawer.jsx
+++ b/src/content-tags-drawer/ContentTagsDrawer.jsx
@@ -1,29 +1,20 @@
 // @ts-check
-import React, {
-  useMemo,
-  useEffect,
-  useState,
-  useCallback,
-} from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import {
   Container,
   Spinner,
+  Stack,
+  Button,
+  Toast,
 } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { useParams } from 'react-router-dom';
 import messages from './messages';
 import ContentTagsCollapsible from './ContentTagsCollapsible';
-import { extractOrgFromContentId } from './utils';
-import {
-  useContentTaxonomyTagsData,
-  useContentData,
-} from './data/apiHooks';
-import { useTaxonomyList } from '../taxonomy/data/apiHooks';
 import Loading from '../generic/Loading';
-
-/** @typedef {import("../taxonomy/data/types.mjs").TaxonomyData} TaxonomyData */
-/** @typedef {import("./data/types.mjs").Tag} ContentTagData */
+import useContentTagsDrawerContext from './ContentTagsDrawerHelper';
+import { ContentTagsDrawerContext } from './common/context';
 
 /**
  * Drawer with the functionality to show and manage tags in a certain content.
@@ -40,49 +31,26 @@ const ContentTagsDrawer = ({ id, onClose }) => {
   const params = useParams();
   const contentId = id ?? params.contentId;
 
-  const org = extractOrgFromContentId(contentId);
-
-  const [stagedContentTags, setStagedContentTags] = useState({});
-
-  // Add a content tags to the staged tags for a taxonomy
-  const addStagedContentTag = useCallback((taxonomyId, addedTag) => {
-    setStagedContentTags(prevStagedContentTags => {
-      const updatedStagedContentTags = {
-        ...prevStagedContentTags,
-        [taxonomyId]: [...(prevStagedContentTags[taxonomyId] ?? []), addedTag],
-      };
-      return updatedStagedContentTags;
-    });
-  }, [setStagedContentTags]);
+  const context = useContentTagsDrawerContext(contentId);
 
-  // Remove a content tag from the staged tags for a taxonomy
-  const removeStagedContentTag = useCallback((taxonomyId, tagValue) => {
-    setStagedContentTags(prevStagedContentTags => ({
-      ...prevStagedContentTags,
-      [taxonomyId]: prevStagedContentTags[taxonomyId].filter((t) => t.value !== tagValue),
-    }));
-  }, [setStagedContentTags]);
-
-  // Sets the staged content tags for taxonomy to the provided list of tags
-  const setStagedTags = useCallback((taxonomyId, tagsList) => {
-    setStagedContentTags(prevStagedContentTags => ({ ...prevStagedContentTags, [taxonomyId]: tagsList }));
-  }, [setStagedContentTags]);
-
-  const { data: contentData, isSuccess: isContentDataLoaded } = useContentData(contentId);
   const {
-    data: contentTaxonomyTagsData,
-    isSuccess: isContentTaxonomyTagsLoaded,
-  } = useContentTaxonomyTagsData(contentId);
-  const { data: taxonomyListData, isSuccess: isTaxonomyListLoaded } = useTaxonomyList(org);
-
-  let contentName = '';
-  if (isContentDataLoaded) {
-    if ('displayName' in contentData) {
-      contentName = contentData.displayName;
-    } else {
-      contentName = contentData.courseDisplayNameWithDefault;
-    }
-  }
+    showToastAfterSave,
+    toReadMode,
+    commitGlobalStagedTagsStatus,
+    isContentDataLoaded,
+    contentName,
+    isTaxonomyListLoaded,
+    isContentTaxonomyTagsLoaded,
+    tagsByTaxonomy,
+    stagedContentTags,
+    collapsibleStates,
+    isEditMode,
+    commitGlobalStagedTags,
+    toEditMode,
+    toastMessage,
+    closeToast,
+    setCollapsibleToInitalState,
+  } = context;
 
   let onCloseDrawer = onClose;
   if (onCloseDrawer === undefined) {
@@ -107,96 +75,106 @@ const ContentTagsDrawer = ({ id, onClose }) => {
     };
   }, []);
 
-  const taxonomies = useMemo(() => {
-    const sortTaxonomies = (taxonomiesList) => {
-      const taxonomiesWithData = taxonomiesList.filter(
-        (t) => t.contentTags.length !== 0,
-      );
-
-      // Count implicit tags per taxonomy.
-      // TODO This count is also calculated individually
-      // in ContentTagsCollapsible. It should only be calculated once.
-      const tagsCountBytaxonomy = {};
-      taxonomiesWithData.forEach((tax) => {
-        tagsCountBytaxonomy[tax.id] = new Set(
-          tax.contentTags.flatMap(item => item.lineage),
-        ).size;
-      });
-
-      // Sort taxonomies with data by implicit count
-      const sortedTaxonomiesWithData = taxonomiesWithData.sort(
-        (a, b) => tagsCountBytaxonomy[b.id] - tagsCountBytaxonomy[a.id],
-      );
-
-      // Empty taxonomies sorted by name.
-      // Since the query returns sorted by name,
-      // it is not necessary to do another sorting here.
-      const emptyTaxonomies = taxonomiesList.filter(
-        (t) => t.contentTags.length === 0,
-      );
-
-      return [...sortedTaxonomiesWithData, ...emptyTaxonomies];
-    };
-
-    if (taxonomyListData && contentTaxonomyTagsData) {
-      // Initialize list of content tags in taxonomies to populate
-      const taxonomiesList = taxonomyListData.results.map((taxonomy) => ({
-        ...taxonomy,
-        contentTags: /** @type {ContentTagData[]} */([]),
-      }));
-
-      const contentTaxonomies = contentTaxonomyTagsData.taxonomies;
-
-      // eslint-disable-next-line array-callback-return
-      contentTaxonomies.map((contentTaxonomyTags) => {
-        const contentTaxonomy = taxonomiesList.find((taxonomy) => taxonomy.id === contentTaxonomyTags.taxonomyId);
-        if (contentTaxonomy) {
-          contentTaxonomy.contentTags = contentTaxonomyTags.tags;
-        }
-      });
-
-      return sortTaxonomies(taxonomiesList);
+  useEffect(() => {
+    /* istanbul ignore next */
+    if (commitGlobalStagedTagsStatus === 'success') {
+      showToastAfterSave();
+      toReadMode();
     }
-    return [];
-  }, [taxonomyListData, contentTaxonomyTagsData]);
+  }, [commitGlobalStagedTagsStatus]);
 
-  return (
+  // First call of the initial collapsible states
+  React.useEffect(() => {
+    setCollapsibleToInitalState();
+  }, [isTaxonomyListLoaded, isContentTaxonomyTagsLoaded]);
 
-    <div id="content-tags-drawer" className="mt-1">
-      <Container size="xl">
-        { isContentDataLoaded
-          ? <h2>{ contentName }</h2>
-          : (
-            <div className="d-flex justify-content-center align-items-center flex-column">
-              <Spinner
-                animation="border"
-                size="xl"
-                screenReaderText={intl.formatMessage(messages.loadingMessage)}
-              />
-            </div>
-          )}
-
-        <hr />
-        <p className="lead text-gray-500 font-weight-bold">{intl.formatMessage(messages.headerSubtitle)}</p>
-
-        { isTaxonomyListLoaded && isContentTaxonomyTagsLoaded
-          ? taxonomies.map((data) => (
-            <div key={`taxonomy-tags-collapsible-${data.id}`}>
-              <ContentTagsCollapsible
-                contentId={contentId}
-                taxonomyAndTagsData={data}
-                stagedContentTags={stagedContentTags[data.id] || []}
-                addStagedContentTag={addStagedContentTag}
-                removeStagedContentTag={removeStagedContentTag}
-                setStagedTags={setStagedTags}
-              />
-              <hr />
+  return (
+    <ContentTagsDrawerContext.Provider value={context}>
+      <div id="content-tags-drawer" className="mt-1 tags-drawer d-flex flex-column justify-content-between min-vh-100">
+        <Container size="xl">
+          { isContentDataLoaded
+            ? <h2>{ contentName }</h2>
+            : (
+              <div className="d-flex justify-content-center align-items-center flex-column">
+                <Spinner
+                  animation="border"
+                  size="xl"
+                  screenReaderText={intl.formatMessage(messages.loadingMessage)}
+                />
+              </div>
+            )}
+
+          <hr />
+          <p className="lead text-gray-500 font-weight-bold">{intl.formatMessage(messages.headerSubtitle)}</p>
+
+          { isTaxonomyListLoaded && isContentTaxonomyTagsLoaded
+            ? tagsByTaxonomy.map((data) => (
+              <div key={`taxonomy-tags-collapsible-${data.id}`}>
+                <ContentTagsCollapsible
+                  contentId={contentId}
+                  taxonomyAndTagsData={data}
+                  stagedContentTags={stagedContentTags[data.id] || []}
+                  collapsibleState={collapsibleStates[data.id] || false}
+                />
+                <hr />
+              </div>
+            ))
+            : <Loading />}
+        </Container>
+
+        { isTaxonomyListLoaded && isContentTaxonomyTagsLoaded && (
+          <Container
+            className="bg-white position-sticky p-3.5 box-shadow-up-2 tags-drawer-footer"
+          >
+            <div className="d-flex justify-content-end">
+              { commitGlobalStagedTagsStatus !== 'loading' ? (
+                <Stack direction="horizontal" gap={2}>
+                  <Button
+                    className="font-weight-bold tags-drawer-cancel-button"
+                    variant="tertiary"
+                    onClick={isEditMode
+                      ? toReadMode
+                      : onCloseDrawer}
+                  >
+                    { intl.formatMessage(isEditMode
+                      ? messages.tagsDrawerCancelButtonText
+                      : messages.tagsDrawerCloseButtonText)}
+                  </Button>
+                  <Button
+                    variant="dark"
+                    className="rounded-0"
+                    onClick={isEditMode
+                      ? commitGlobalStagedTags
+                      : toEditMode}
+                  >
+                    { intl.formatMessage(isEditMode
+                      ? messages.tagsDrawerSaveButtonText
+                      : messages.tagsDrawerEditTagsButtonText)}
+                  </Button>
+                </Stack>
+              )
+                : (
+                  <Spinner
+                    animation="border"
+                    size="xl"
+                    screenReaderText={intl.formatMessage(messages.loadingMessage)}
+                  />
+                )}
             </div>
-          ))
-          : <Loading />}
-
-      </Container>
-    </div>
+          </Container>
+        )}
+        {/* istanbul ignore next */
+          toastMessage && (
+            <Toast
+              show
+              onClose={closeToast}
+            >
+              {toastMessage}
+            </Toast>
+          )
+        }
+      </div>
+    </ContentTagsDrawerContext.Provider>
   );
 };
 
diff --git a/src/content-tags-drawer/ContentTagsDrawer.scss b/src/content-tags-drawer/ContentTagsDrawer.scss
index 1adb2da4b1..e716840894 100644
--- a/src/content-tags-drawer/ContentTagsDrawer.scss
+++ b/src/content-tags-drawer/ContentTagsDrawer.scss
@@ -7,3 +7,24 @@
     min-width: 100vw;
   }
 }
+
+.tags-drawer {
+  .tags-drawer-footer {
+    right: 0;
+    bottom: 0;
+  }
+
+  .tags-drawer-cancel-button:hover {
+    background-color: transparent;
+    color: $gray-300 !important;
+  }
+}
+
+// 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;
+  }
+}
diff --git a/src/content-tags-drawer/ContentTagsDrawer.test.jsx b/src/content-tags-drawer/ContentTagsDrawer.test.jsx
index a87f5f3e4d..03de825cc6 100644
--- a/src/content-tags-drawer/ContentTagsDrawer.test.jsx
+++ b/src/content-tags-drawer/ContentTagsDrawer.test.jsx
@@ -7,6 +7,7 @@ import {
   render,
   waitFor,
   screen,
+  within,
 } from '@testing-library/react';
 
 import ContentTagsDrawer from './ContentTagsDrawer';
@@ -14,11 +15,14 @@ import {
   useContentTaxonomyTagsData,
   useContentData,
   useTaxonomyTagsData,
+  useContentTaxonomyTagsUpdater,
 } from './data/apiHooks';
 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();
+const mockMutate = jest.fn();
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -29,16 +33,14 @@ jest.mock('react-router-dom', () => ({
 
 // FIXME: replace these mocks with API mocks
 jest.mock('./data/apiHooks', () => ({
-  useContentTaxonomyTagsData: jest.fn(() => ({
-    isSuccess: false,
-    data: {},
-  })),
+  useContentTaxonomyTagsData: jest.fn(() => {}),
   useContentData: jest.fn(() => ({
     isSuccess: false,
     data: {},
   })),
   useContentTaxonomyTagsUpdater: jest.fn(() => ({
     isError: false,
+    mutate: mockMutate,
   })),
   useTaxonomyTagsData: jest.fn(() => ({
     hasMorePages: false,
@@ -72,9 +74,90 @@ describe('<ContentTagsDrawer />', () => {
     // By default, we mock the API call with a promise that never resolves.
     // You can override this in specific test.
     getTaxonomyListData.mockReturnValue(new Promise(() => {}));
+    useContentTaxonomyTagsUpdater.mockReturnValue({
+      isError: false,
+      mutate: mockMutate,
+    });
   });
 
   const setupMockDataForStagedTagsTesting = () => {
+    useContentTaxonomyTagsData.mockReturnValue({
+      isSuccess: true,
+      data: {
+        taxonomies: [
+          {
+            name: 'Taxonomy 1',
+            taxonomyId: 123,
+            canTagObject: true,
+            tags: [
+              {
+                value: 'Tag 1',
+                lineage: ['Tag 1'],
+                canDeleteObjecttag: true,
+              },
+              {
+                value: 'Tag 2',
+                lineage: ['Tag 2'],
+                canDeleteObjecttag: true,
+              },
+            ],
+          },
+        ],
+      },
+    });
+    getTaxonomyListData.mockResolvedValue({
+      results: [
+        {
+          id: 123,
+          name: 'Taxonomy 1',
+          description: 'This is a description 1',
+          canTagObject: true,
+        },
+      ],
+    });
+
+    useTaxonomyTagsData.mockReturnValue({
+      hasMorePages: false,
+      canAddTag: false,
+      tagPages: {
+        isLoading: false,
+        isError: false,
+        data: [{
+          value: 'Tag 1',
+          externalId: null,
+          childCount: 0,
+          depth: 0,
+          parentValue: null,
+          id: 12345,
+          subTagsUrl: null,
+          canChangeTag: false,
+          canDeleteTag: false,
+        }, {
+          value: 'Tag 2',
+          externalId: null,
+          childCount: 0,
+          depth: 0,
+          parentValue: null,
+          id: 12346,
+          subTagsUrl: null,
+          canChangeTag: false,
+          canDeleteTag: false,
+        }, {
+          value: 'Tag 3',
+          externalId: null,
+          childCount: 0,
+          depth: 0,
+          parentValue: null,
+          id: 12347,
+          subTagsUrl: null,
+          canChangeTag: false,
+          canDeleteTag: false,
+        }],
+      },
+    });
+  };
+
+  const setupLargeMockDataForStagedTagsTesting = () => {
     useContentTaxonomyTagsData.mockReturnValue({
       isSuccess: true,
       data: {
@@ -212,6 +295,7 @@ describe('<ContentTagsDrawer />', () => {
   };
 
   it('should render page and page title correctly', () => {
+    setupMockDataForStagedTagsTesting();
     const { getByText } = render(<RootWrapper />);
     expect(getByText('Manage tags')).toBeInTheDocument();
   });
@@ -317,62 +401,143 @@ describe('<ContentTagsDrawer />', () => {
     });
   });
 
-  it('should test adding a content tag to the staged tags for a taxonomy', async () => {
+  it('should be read only on first render', async () => {
+    setupMockDataForStagedTagsTesting();
+    render(<RootWrapper />);
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+
+    // Not show delete tag buttons
+    expect(screen.queryByRole('button', { name: /delete/i })).not.toBeInTheDocument();
+
+    // Not show add a tag select
+    expect(screen.queryByText(/add a tag/i)).not.toBeInTheDocument();
+
+    // Not show cancel button
+    expect(screen.queryByRole('button', { name: /cancel/i })).not.toBeInTheDocument();
+
+    // Not show save button
+    expect(screen.queryByRole('button', { name: /save/i })).not.toBeInTheDocument();
+  });
+
+  it('should change to edit mode when click on `Edit tags`', async () => {
     setupMockDataForStagedTagsTesting();
+    render(<RootWrapper />);
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+    const editTagsButton = screen.getByRole('button', {
+      name: /edit tags/i,
+    });
+    fireEvent.click(editTagsButton);
+
+    // Show delete tag buttons
+    expect(screen.getAllByRole('button', {
+      name: /delete/i,
+    }).length).toBe(2);
 
-    const { container, getByText, getAllByText } = render(<RootWrapper />);
-    await waitFor(() => { expect(getByText('Taxonomy 1')).toBeInTheDocument(); });
+    // Show add a tag select
+    expect(screen.getByText(/add a tag/i)).toBeInTheDocument();
 
-    // Expand the Taxonomy to view applied tags and "Add a tag" button
-    const expandToggle = container.getElementsByClassName('collapsible-trigger')[0];
+    // Show cancel button
+    expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
 
-    fireEvent.click(expandToggle);
+    // Show save button
+    expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument();
+  });
+
+  it('should change to read mode when click on `Cancel`', async () => {
+    setupMockDataForStagedTagsTesting();
+    render(<RootWrapper />);
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+    const editTagsButton = screen.getByRole('button', {
+      name: /edit tags/i,
+    });
+    fireEvent.click(editTagsButton);
+
+    const cancelButton = screen.getByRole('button', {
+      name: /cancel/i,
+    });
+    fireEvent.click(cancelButton);
+
+    // Not show delete tag buttons
+    expect(screen.queryByRole('button', { name: /delete/i })).not.toBeInTheDocument();
+
+    // Not show add a tag select
+    expect(screen.queryByText(/add a tag/i)).not.toBeInTheDocument();
+
+    // Not show cancel button
+    expect(screen.queryByRole('button', { name: /cancel/i })).not.toBeInTheDocument();
+
+    // Not show save button
+    expect(screen.queryByRole('button', { name: /save/i })).not.toBeInTheDocument();
+  });
+
+  it('shows spinner when loading commit tags', async () => {
+    setupMockDataForStagedTagsTesting();
+    useContentTaxonomyTagsUpdater.mockReturnValue({
+      status: 'loading',
+      isError: false,
+      mutate: mockMutate,
+    });
+    render(<RootWrapper />);
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+
+  it('should test adding a content tag to the staged tags for a taxonomy', async () => {
+    setupMockDataForStagedTagsTesting();
+    render(<RootWrapper />);
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+
+    // To edit mode
+    const editTagsButton = screen.getByRole('button', {
+      name: /edit tags/i,
+    });
+    fireEvent.click(editTagsButton);
 
     // Click on "Add a tag" button to open dropdown
-    const addTagsButton = getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
+    const addTagsButton = screen.getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
     // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
     fireEvent.mouseDown(addTagsButton);
 
     // Tag 3 should only appear in dropdown selector, (i.e. the dropdown is open, since Tag 3 is not applied)
-    expect(getAllByText('Tag 3').length).toBe(1);
+    expect(screen.getAllByText('Tag 3').length).toBe(1);
 
     // Click to check Tag 3
-    const tag3 = getByText('Tag 3');
+    const tag3 = screen.getByText('Tag 3');
     fireEvent.click(tag3);
 
     // Check that Tag 3 has been staged, i.e. there should be 2 of them on the page
-    expect(getAllByText('Tag 3').length).toBe(2);
+    expect(screen.getAllByText('Tag 3').length).toBe(2);
   });
 
   it('should test removing a staged content from a taxonomy', async () => {
     setupMockDataForStagedTagsTesting();
+    render(<RootWrapper />);
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
 
-    const { container, getByText, getAllByText } = render(<RootWrapper />);
-    await waitFor(() => { expect(getByText('Taxonomy 1')).toBeInTheDocument(); });
-
-    // Expand the Taxonomy to view applied tags and "Add a tag" button
-    const expandToggle = container.getElementsByClassName('collapsible-trigger')[0];
-
-    fireEvent.click(expandToggle);
+    // To edit mode
+    const editTagsButton = screen.getByRole('button', {
+      name: /edit tags/i,
+    });
+    fireEvent.click(editTagsButton);
 
     // Click on "Add a tag" button to open dropdown
-    const addTagsButton = getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
+    const addTagsButton = screen.getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
     // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
     fireEvent.mouseDown(addTagsButton);
 
     // Tag 3 should only appear in dropdown selector, (i.e. the dropdown is open, since Tag 3 is not applied)
-    expect(getAllByText('Tag 3').length).toBe(1);
+    expect(screen.getAllByText('Tag 3').length).toBe(1);
 
     // Click to check Tag 3
-    const tag3 = getByText('Tag 3');
+    const tag3 = screen.getByText('Tag 3');
     fireEvent.click(tag3);
 
     // Check that Tag 3 has been staged, i.e. there should be 2 of them on the page
-    expect(getAllByText('Tag 3').length).toBe(2);
+    expect(screen.getAllByText('Tag 3').length).toBe(2);
 
     // Click it again to unstage it and confirm that there is only one on the page
     fireEvent.click(tag3);
-    expect(getAllByText('Tag 3').length).toBe(1);
+    expect(screen.getAllByText('Tag 3').length).toBe(1);
   });
 
   it('should test clearing staged tags for a taxonomy', async () => {
@@ -380,39 +545,194 @@ describe('<ContentTagsDrawer />', () => {
 
     const {
       container,
-      getByText,
-      getAllByText,
-      queryByText,
     } = render(<RootWrapper />);
-    await waitFor(() => { expect(getByText('Taxonomy 1')).toBeInTheDocument(); });
-
-    // Expand the Taxonomy to view applied tags and "Add a tag" button
-    const expandToggle = container.getElementsByClassName('collapsible-trigger')[0];
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
 
-    fireEvent.click(expandToggle);
+    // To edit mode
+    const editTagsButton = screen.getByRole('button', {
+      name: /edit tags/i,
+    });
+    fireEvent.click(editTagsButton);
 
     // Click on "Add a tag" button to open dropdown
-    const addTagsButton = getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
+    const addTagsButton = screen.getByText(/add a tag/i);
     // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
     fireEvent.mouseDown(addTagsButton);
 
     // Tag 3 should only appear in dropdown selector, (i.e. the dropdown is open, since Tag 3 is not applied)
-    expect(getAllByText('Tag 3').length).toBe(1);
+    expect(screen.getAllByText('Tag 3').length).toBe(1);
 
     // Click to check Tag 3
-    const tag3 = getByText('Tag 3');
+    const tag3 = screen.getByText('Tag 3');
     fireEvent.click(tag3);
 
     // Check that Tag 3 has been staged, i.e. there should be 2 of them on the page
-    expect(getAllByText('Tag 3').length).toBe(2);
+    expect(screen.getAllByText('Tag 3').length).toBe(2);
 
-    // Click on the Cancel button in the dropdown to clear the staged tags
-    const dropdownCancel = getByText(messages.collapsibleCancelStagedTagsButtonText.defaultMessage);
+    const dropdown = container.querySelector('#content-tags-drawer > div:nth-child(1) > div');
+    const dropdownCancel = within(dropdown).getByRole('button', { name: /cancel/i });
     fireEvent.click(dropdownCancel);
 
     // Check that there are no more Tag 3 on the page, since the staged one is cleared
     // and the dropdown has been closed
-    expect(queryByText('Tag 3')).not.toBeInTheDocument();
+    expect(screen.queryByText('Tag 3')).not.toBeInTheDocument();
+  });
+
+  it('should test adding global staged tags and cancel', async () => {
+    setupMockDataForStagedTagsTesting();
+    render(<RootWrapper />);
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+
+    // To edit mode
+    const editTagsButton = screen.getByRole('button', {
+      name: /edit tags/i,
+    });
+    fireEvent.click(editTagsButton);
+
+    // Click on "Add a tag" button to open dropdown
+    const addTagsButton = screen.getByText(/add a tag/i);
+    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
+    fireEvent.mouseDown(addTagsButton);
+
+    // Click to check Tag 3
+    const tag3 = screen.getByText(/tag 3/i);
+    fireEvent.click(tag3);
+
+    // Click "Add tags" to save to global staged tags
+    const addTags = screen.getByRole('button', { name: /add tags/i });
+    fireEvent.click(addTags);
+
+    expect(screen.getByText(/tag 3/i)).toBeInTheDocument();
+
+    // Click "Cancel"
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    fireEvent.click(cancelButton);
+
+    expect(screen.queryByText(/tag 3/i)).not.toBeInTheDocument();
+  });
+
+  it('should test delete feched tags and cancel', async () => {
+    setupMockDataForStagedTagsTesting();
+    render(<RootWrapper />);
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+
+    // To edit mode
+    const editTagsButton = screen.getByRole('button', {
+      name: /edit tags/i,
+    });
+    fireEvent.click(editTagsButton);
+
+    // Delete the tag
+    const tag = screen.getByText(/tag 2/i);
+    const deleteButton = within(tag).getByRole('button', {
+      name: /delete/i,
+    });
+    fireEvent.click(deleteButton);
+
+    expect(tag).not.toBeInTheDocument();
+
+    // Click "Cancel"
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    fireEvent.click(cancelButton);
+
+    expect(screen.getByText(/tag 2/i)).toBeInTheDocument();
+  });
+
+  it('should test delete global staged tags and cancel', async () => {
+    setupMockDataForStagedTagsTesting();
+    render(<RootWrapper />);
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+
+    // To edit mode
+    const editTagsButton = screen.getByRole('button', {
+      name: /edit tags/i,
+    });
+    fireEvent.click(editTagsButton);
+
+    // Click on "Add a tag" button to open dropdown
+    const addTagsButton = screen.getByText(/add a tag/i);
+    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
+    fireEvent.mouseDown(addTagsButton);
+
+    // Click to check Tag 3
+    const tag3 = screen.getByText(/tag 3/i);
+    fireEvent.click(tag3);
+
+    // Click "Add tags" to save to global staged tags
+    const addTags = screen.getByRole('button', { name: /add tags/i });
+    fireEvent.click(addTags);
+
+    const tag = screen.getByText(/tag 3/i);
+    expect(screen.getByText(/tag 3/i)).toBeInTheDocument();
+
+    // Delete the tag
+    const deleteButton = within(tag).getByRole('button', {
+      name: /delete/i,
+    });
+    fireEvent.click(deleteButton);
+
+    expect(tag).not.toBeInTheDocument();
+
+    // Click "Cancel"
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    fireEvent.click(cancelButton);
+
+    expect(screen.queryByText(/tag 3/i)).not.toBeInTheDocument();
+  });
+
+  it('should test add removed feched tags and cancel', async () => {
+    setupMockDataForStagedTagsTesting();
+    render(<RootWrapper />);
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+
+    // To edit mode
+    const editTagsButton = screen.getByRole('button', {
+      name: /edit tags/i,
+    });
+    fireEvent.click(editTagsButton);
+
+    // Delete the tag
+    const tag = screen.getByText(/tag 2/i);
+    const deleteButton = within(tag).getByRole('button', {
+      name: /delete/i,
+    });
+    fireEvent.click(deleteButton);
+
+    expect(tag).not.toBeInTheDocument();
+
+    // Click on "Add a tag" button to open dropdown
+    const addTagsButton = screen.getByText(/add a tag/i);
+    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
+    fireEvent.mouseDown(addTagsButton);
+
+    // Click to check Tag 2
+    const tag2 = screen.getByText(/tag 2/i);
+    fireEvent.click(tag2);
+
+    // Click "Add tags" to save to global staged tags
+    const addTags = screen.getByRole('button', { name: /add tags/i });
+    fireEvent.click(addTags);
+
+    expect(screen.getByText(/tag 2/i)).toBeInTheDocument();
+
+    // Click "Cancel"
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    fireEvent.click(cancelButton);
+
+    expect(screen.getByText(/tag 2/i)).toBeInTheDocument();
+  });
+
+  it('should call onClose when cancel is clicked', async () => {
+    setupMockDataForStagedTagsTesting();
+    render(<RootWrapper onClose={mockOnClose} />);
+
+    const cancelButton = await screen.findByRole('button', {
+      name: /close/i,
+    });
+    expect(cancelButton).toBeInTheDocument();
+    fireEvent.click(cancelButton);
+
+    expect(mockOnClose).toHaveBeenCalled();
   });
 
   it('should call closeManageTagsDrawer when Escape key is pressed and no selectable box is active', () => {
@@ -451,10 +771,27 @@ describe('<ContentTagsDrawer />', () => {
     postMessageSpy.mockRestore();
   });
 
-  it('should taxonomies must be ordered', async () => {
+  it('should call `updateTags` mutation on save', async () => {
     setupMockDataForStagedTagsTesting();
     render(<RootWrapper />);
     expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+    const editTagsButton = screen.getByRole('button', {
+      name: /edit tags/i,
+    });
+    fireEvent.click(editTagsButton);
+
+    const saveButton = screen.getByRole('button', {
+      name: /save/i,
+    });
+    fireEvent.click(saveButton);
+
+    expect(mockMutate).toHaveBeenCalled();
+  });
+
+  it('should taxonomies must be ordered', async () => {
+    setupLargeMockDataForStagedTagsTesting();
+    render(<RootWrapper />);
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
 
     // First, taxonomies with content sorted by count implicit
     // Later, empty taxonomies sorted by name
diff --git a/src/content-tags-drawer/ContentTagsDrawerHelper.jsx b/src/content-tags-drawer/ContentTagsDrawerHelper.jsx
new file mode 100644
index 0000000000..3f6d5508c5
--- /dev/null
+++ b/src/content-tags-drawer/ContentTagsDrawerHelper.jsx
@@ -0,0 +1,373 @@
+// @ts-check
+import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { cloneDeep } from 'lodash';
+import { useContentData, useContentTaxonomyTagsData, useContentTaxonomyTagsUpdater } from './data/apiHooks';
+import { useTaxonomyList } from '../taxonomy/data/apiHooks';
+import { extractOrgFromContentId } from './utils';
+import messages from './messages';
+
+/** @typedef {import("./data/types.mjs").Tag} ContentTagData */
+/** @typedef {import("./data/types.mjs").StagedTagData} StagedTagData */
+/** @typedef {import("./data/types.mjs").TagsInTaxonomy} TagsInTaxonomy */
+
+/**
+ * Handles the context and all the underlying logic for the ContentTagsDrawer component
+ * @param {string} contentId
+ * @returns {{
+ *     stagedContentTags: Record<number, StagedTagData[]>,
+ *     addStagedContentTag: (taxonomyId: number, addedTag: StagedTagData) => void,
+ *     removeStagedContentTag: (taxonomyId: number, tagValue: string) => void,
+ *     removeGlobalStagedContentTag: (taxonomyId: number, tagValue: string) => void,
+ *     addRemovedContentTag: (taxonomyId: number, tagValue: string) => void,
+ *     deleteRemovedContentTag: (taxonomyId: number, tagValue: string) => void,
+ *     setStagedTags: (taxonomyId: number, tagsList: StagedTagData[]) => void,
+ *     globalStagedContentTags: Record<number, StagedTagData[]>,
+ *     globalStagedRemovedContentTags: Record<number, string>,
+ *     setGlobalStagedContentTags: Function,
+ *     commitGlobalStagedTags: () => void,
+ *     commitGlobalStagedTagsStatus: string,
+ *     isContentDataLoaded: boolean,
+ *     isContentTaxonomyTagsLoaded: boolean,
+ *     isTaxonomyListLoaded: boolean,
+ *     contentName: string,
+ *     tagsByTaxonomy: TagsInTaxonomy[],
+ *     isEditMode: boolean,
+ *     toEditMode: () => void,
+ *     toReadMode: () => void,
+ *     collapsibleStates: Record<number, boolean>,
+ *     openCollapsible: (taxonomyId: number) => void,
+ *     closeCollapsible: (taxonomyId: number) => void,
+ *     toastMessage: string | undefined,
+ *     showToastAfterSave: () => void,
+ *     closeToast: () => void,
+ *     setCollapsibleToInitalState: () => void,
+ * }}
+ */
+const useContentTagsDrawerContext = (contentId) => {
+  const intl = useIntl();
+  const org = extractOrgFromContentId(contentId);
+
+  // True if the drawer is on edit mode.
+  const [isEditMode, setIsEditMode] = React.useState(false);
+  // This stores the tags added on the add tags Select in all taxonomies.
+  const [stagedContentTags, setStagedContentTags] = React.useState({});
+  // When a staged tags on a taxonomy is commitet then is saved on this map.
+  const [globalStagedContentTags, setGlobalStagedContentTags] = React.useState({});
+  // This stores feched tags deleted by the user.
+  const [globalStagedRemovedContentTags, setGlobalStagedRemovedContentTags] = React.useState({});
+  // Merges feched tags, global staged tags and global removed staged tags
+  const [tagsByTaxonomy, setTagsByTaxonomy] = React.useState(/** @type TagsInTaxonomy[] */ ([]));
+  // This stores taxonomy collapsible states (open/close).
+  const [collapsibleStates, setColapsibleStates] = React.useState({});
+  // Message to show a toast in the content drawer.
+  const [toastMessage, setToastMessage] = React.useState(/** @type string | undefined */ (undefined));
+  // Mutation to update tags
+  const updateTags = useContentTaxonomyTagsUpdater(contentId);
+
+  // Fetch from database
+  const { data: contentData, isSuccess: isContentDataLoaded } = useContentData(contentId);
+  const {
+    data: contentTaxonomyTagsData,
+    isSuccess: isContentTaxonomyTagsLoaded,
+  } = useContentTaxonomyTagsData(contentId);
+  const { data: taxonomyListData, isSuccess: isTaxonomyListLoaded } = useTaxonomyList(org);
+
+  // Tags feched from database
+  const fechedTaxonomies = React.useMemo(() => {
+    const sortTaxonomies = (taxonomiesList) => {
+      const taxonomiesWithData = taxonomiesList.filter(
+        (t) => t.contentTags.length !== 0,
+      );
+
+      // Count implicit tags per taxonomy.
+      // TODO This count is also calculated individually
+      // in ContentTagsCollapsible. It should only be calculated once.
+      const tagsCountBytaxonomy = {};
+      taxonomiesWithData.forEach((tax) => {
+        tagsCountBytaxonomy[tax.id] = new Set(
+          tax.contentTags.flatMap(item => item.lineage),
+        ).size;
+      });
+
+      // Sort taxonomies with data by implicit count
+      const sortedTaxonomiesWithData = taxonomiesWithData.sort(
+        (a, b) => tagsCountBytaxonomy[b.id] - tagsCountBytaxonomy[a.id],
+      );
+
+      // Empty taxonomies sorted by name.
+      // Since the query returns sorted by name,
+      // it is not necessary to do another sorting here.
+      const emptyTaxonomies = taxonomiesList.filter(
+        (t) => t.contentTags.length === 0,
+      );
+
+      return [...sortedTaxonomiesWithData, ...emptyTaxonomies];
+    };
+
+    if (taxonomyListData && contentTaxonomyTagsData) {
+      // Initialize list of content tags in taxonomies to populate
+      const taxonomiesList = taxonomyListData.results.map((taxonomy) => ({
+        ...taxonomy,
+        contentTags: /** @type {ContentTagData[]} */([]),
+      }));
+
+      const contentTaxonomies = contentTaxonomyTagsData.taxonomies;
+
+      // eslint-disable-next-line array-callback-return
+      contentTaxonomies.map((contentTaxonomyTags) => {
+        const contentTaxonomy = taxonomiesList.find((taxonomy) => taxonomy.id === contentTaxonomyTags.taxonomyId);
+        if (contentTaxonomy) {
+          contentTaxonomy.contentTags = contentTaxonomyTags.tags;
+        }
+      });
+
+      return sortTaxonomies(taxonomiesList);
+    }
+    return [];
+  }, [taxonomyListData, contentTaxonomyTagsData]);
+
+  // Add a content tags to the staged tags for a taxonomy
+  const addStagedContentTag = React.useCallback((taxonomyId, addedTag) => {
+    setStagedContentTags(prevStagedContentTags => {
+      const updatedStagedContentTags = {
+        ...prevStagedContentTags,
+        [taxonomyId]: [...(prevStagedContentTags[taxonomyId] ?? []), addedTag],
+      };
+      return updatedStagedContentTags;
+    });
+  }, [setStagedContentTags]);
+
+  // Remove a content tag from the staged tags for a taxonomy
+  const removeStagedContentTag = React.useCallback((taxonomyId, tagValue) => {
+    setStagedContentTags(prevStagedContentTags => ({
+      ...prevStagedContentTags,
+      [taxonomyId]: prevStagedContentTags[taxonomyId].filter((t) => t.value !== tagValue),
+    }));
+  }, [setStagedContentTags]);
+
+  // Remove a content tag from the global staged tags for a taxonomy
+  const removeGlobalStagedContentTag = React.useCallback((taxonomyId, tagValue) => {
+    setGlobalStagedContentTags(prevContentTags => ({
+      ...prevContentTags,
+      [taxonomyId]: prevContentTags[taxonomyId].filter((t) => t.value !== tagValue),
+    }));
+  }, [setGlobalStagedContentTags]);
+
+  // Add a content tags to the removed tags for a taxonomy
+  const addRemovedContentTag = React.useCallback((taxonomyId, addedTag) => {
+    setGlobalStagedRemovedContentTags(prevContentTags => {
+      const updatedStagedContentTags = {
+        ...prevContentTags,
+        [taxonomyId]: [...(prevContentTags[taxonomyId] ?? []), addedTag],
+      };
+      return updatedStagedContentTags;
+    });
+  }, [setGlobalStagedRemovedContentTags]);
+
+  // Remove a content tag from the removed tags for a taxonomy
+  const deleteRemovedContentTag = React.useCallback((taxonomyId, tagValue) => {
+    setGlobalStagedRemovedContentTags(prevContentTags => ({
+      ...prevContentTags,
+      [taxonomyId]: prevContentTags[taxonomyId].filter((t) => t !== tagValue),
+    }));
+  }, [setGlobalStagedRemovedContentTags]);
+
+  // Sets the staged content tags for taxonomy to the provided list of tags
+  const setStagedTags = React.useCallback((taxonomyId, tagsList) => {
+    setStagedContentTags(prevStagedContentTags => ({ ...prevStagedContentTags, [taxonomyId]: tagsList }));
+  }, [setStagedContentTags]);
+
+  // Open a collapsible of a taxonomy
+  /* istanbul ignore next */
+  const openCollapsible = React.useCallback((taxonomyId) => {
+    setColapsibleStates(prevStates => ({
+      ...prevStates,
+      [taxonomyId]: true,
+    }));
+  }, [setColapsibleStates]);
+
+  // Close a collapsible of a taxonomy
+  /* istanbul ignore next */
+  const closeCollapsible = React.useCallback((taxonomyId) => {
+    setColapsibleStates(prevStates => ({
+      ...prevStates,
+      [taxonomyId]: false,
+    }));
+  }, [setColapsibleStates]);
+
+  const openAllCollapsible = React.useCallback(() => {
+    const updatedState = {};
+    fechedTaxonomies.forEach((taxonomy) => {
+      updatedState[taxonomy.id] = true;
+    });
+    setColapsibleStates(updatedState);
+  }, [fechedTaxonomies, setColapsibleStates]);
+
+  // Set initial state of collapsible based on content tags
+  const setCollapsibleToInitalState = React.useCallback(() => {
+    const updatedState = {};
+    fechedTaxonomies.forEach((taxonomy) => {
+      // Taxonomy with content tags must be open
+      updatedState[taxonomy.id] = taxonomy.contentTags.length !== 0;
+    });
+    setColapsibleStates(updatedState);
+  }, [fechedTaxonomies, setColapsibleStates]);
+
+  // Changes the drawer mode to edit
+  const toEditMode = React.useCallback(() => {
+    setIsEditMode(true);
+    openAllCollapsible();
+  }, [setIsEditMode, openAllCollapsible]);
+
+  // Changes the drawer mode to read and clears all staged tags and states.
+  const toReadMode = React.useCallback(() => {
+    setIsEditMode(false);
+    setStagedContentTags({});
+    setGlobalStagedContentTags({});
+    setGlobalStagedRemovedContentTags({});
+    setCollapsibleToInitalState();
+  }, [
+    setIsEditMode,
+    setStagedContentTags,
+    setGlobalStagedContentTags,
+    setGlobalStagedRemovedContentTags,
+    setCollapsibleToInitalState,
+  ]);
+
+  // Build toast message and show toast after save drawer.
+  /* istanbul ignore next */
+  const showToastAfterSave = React.useCallback(() => {
+    const tagsAddedList = Object.values(globalStagedContentTags);
+    const tagsRemovedList = Object.values(globalStagedRemovedContentTags);
+
+    const tagsAdded = tagsAddedList.length === 1 ? tagsAddedList[0].length : tagsAddedList.reduce(
+      (acc, curr) => acc + curr.length,
+      0,
+    );
+    const tagsRemoved = tagsRemovedList.length === 1 ? tagsRemovedList[0].length : tagsRemovedList.reduce(
+      (acc, curr) => acc + curr.length,
+      0,
+    );
+    let message;
+    if (tagsAdded && tagsRemoved) {
+      message = `${intl.formatMessage(
+        messages.tagsSaveToastTextTypeAdded,
+        { tagsAdded },
+      )
+      } ${
+        intl.formatMessage(
+          messages.tagsSaveToastTextTypeRemoved,
+          { tagsRemoved },
+        )
+      }`;
+    } else if (tagsAdded) {
+      message = intl.formatMessage(
+        messages.tagsSaveToastTextTypeAdded,
+        { tagsAdded },
+      );
+    } else if (tagsRemoved) {
+      message = intl.formatMessage(
+        messages.tagsSaveToastTextTypeRemoved,
+        { tagsRemoved },
+      );
+    }
+    setToastMessage(message);
+  }, [globalStagedContentTags, globalStagedRemovedContentTags, setToastMessage]);
+
+  // Close the toast
+  const closeToast = React.useCallback(() => setToastMessage(undefined), [setToastMessage]);
+
+  let contentName = '';
+  if (isContentDataLoaded) {
+    if ('displayName' in contentData) {
+      contentName = contentData.displayName;
+    } else {
+      contentName = contentData.courseDisplayNameWithDefault;
+    }
+  }
+
+  // Updates `tagsByTaxonomy` merged feched tags, global staged tags
+  // and global removed staged tags.
+  React.useEffect(() => {
+    const mergedTags = cloneDeep(fechedTaxonomies).reduce((acc, obj) => (
+      { ...acc, [obj.id]: obj }
+    ), {});
+
+    Object.keys(globalStagedContentTags).forEach((taxonomyId) => {
+      if (mergedTags[taxonomyId]) {
+        // TODO test this
+        // Filter out applied tags that should become implicit because a child tag was committed
+        const stagedLineages = globalStagedContentTags[taxonomyId].map((t) => t.lineage.slice(0, -1)).flat();
+        const fechedTags = mergedTags[taxonomyId].contentTags.filter((t) => !stagedLineages.includes(t.value));
+
+        mergedTags[taxonomyId].contentTags = [
+          ...fechedTags,
+          ...globalStagedContentTags[taxonomyId],
+        ];
+      }
+    });
+
+    Object.keys(globalStagedRemovedContentTags).forEach((taxonomyId) => {
+      if (mergedTags[taxonomyId]) {
+        mergedTags[taxonomyId].contentTags = mergedTags[taxonomyId].contentTags.filter(
+          (t) => !globalStagedRemovedContentTags[taxonomyId].includes(t.value),
+        );
+      }
+    });
+
+    // It is constructed this way to maintain the order
+    // of the list `fechedTaxonomies`
+    const mergedTagsArray = fechedTaxonomies.map(obj => mergedTags[obj.id]);
+
+    setTagsByTaxonomy(mergedTagsArray);
+  }, [
+    fechedTaxonomies,
+    globalStagedContentTags,
+    globalStagedRemovedContentTags,
+  ]);
+
+  const commitGlobalStagedTags = React.useCallback(() => {
+    const tagsData = [];
+    tagsByTaxonomy.forEach((tags) => {
+      tagsData.push({
+        taxonomy: tags.id,
+        tags: tags.contentTags.map(t => t.value),
+      });
+    });
+    // @ts-ignore
+    updateTags.mutate({ tagsData });
+  }, [tagsByTaxonomy]);
+
+  return {
+    stagedContentTags,
+    addStagedContentTag,
+    removeStagedContentTag,
+    removeGlobalStagedContentTag,
+    addRemovedContentTag,
+    deleteRemovedContentTag,
+    setStagedTags,
+    globalStagedContentTags,
+    globalStagedRemovedContentTags,
+    setGlobalStagedContentTags,
+    commitGlobalStagedTags,
+    commitGlobalStagedTagsStatus: updateTags.status,
+    isContentDataLoaded,
+    isContentTaxonomyTagsLoaded,
+    isTaxonomyListLoaded,
+    contentName,
+    tagsByTaxonomy,
+    isEditMode,
+    toEditMode,
+    toReadMode,
+    collapsibleStates,
+    openCollapsible,
+    closeCollapsible,
+    toastMessage,
+    showToastAfterSave,
+    closeToast,
+    setCollapsibleToInitalState,
+  };
+};
+
+export default useContentTagsDrawerContext;
diff --git a/src/content-tags-drawer/ContentTagsTree.jsx b/src/content-tags-drawer/ContentTagsTree.jsx
deleted file mode 100644
index 40695a2f96..0000000000
--- a/src/content-tags-drawer/ContentTagsTree.jsx
+++ /dev/null
@@ -1,81 +0,0 @@
-// @ts-check
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import TagBubble from './TagBubble';
-
-/**
- * Component that renders Tags under a Taxonomy in the nested tree format.
- *
- * Example:
- *
- * {
- *   "Science and Research": {
- *     explicit: false,
- *     children: {
- *       "Genetics Subcategory": {
- *         explicit: false,
- *         children: {
- *           "DNA Sequencing": {
- *             explicit: true,
- *             children: {}
- *           }
- *         }
- *       },
- *       "Molecular, Cellular, and Microbiology": {
- *         explicit: false,
- *         children: {
- *           "Virology": {
- *             explicit: true,
- *             children: {}
- *           }
- *         }
- *       }
- *     }
- *   }
- * };
- *
- * @param {Object} props - The component props.
- * @param {Object} props.tagsTree - Array of taxonomy tags that are applied to the content.
- * @param {(
- *   tagSelectableBoxValue: string,
- *   checked: boolean
- * ) => void} props.removeTagHandler - Function that is called when removing tags from the tree.
- */
-const ContentTagsTree = ({ tagsTree, removeTagHandler }) => {
-  const renderTagsTree = (tag, level, lineage) => Object.keys(tag).map((key) => {
-    const updatedLineage = [...lineage, encodeURIComponent(key)];
-    if (tag[key] !== undefined) {
-      return (
-        <div key={`tag-${key}-level-${level}`}>
-          <TagBubble
-            key={`tag-${key}`}
-            value={key}
-            implicit={!tag[key].explicit}
-            level={level}
-            lineage={updatedLineage}
-            removeTagHandler={removeTagHandler}
-            canRemove={tag[key].canDeleteObjecttag}
-          />
-          { renderTagsTree(tag[key].children, level + 1, updatedLineage) }
-        </div>
-      );
-    }
-    return null;
-  });
-
-  return <>{renderTagsTree(tagsTree, 0, [])}</>;
-};
-
-ContentTagsTree.propTypes = {
-  tagsTree: PropTypes.objectOf(
-    PropTypes.shape({
-      explicit: PropTypes.bool.isRequired,
-      children: PropTypes.shape({}).isRequired,
-      canDeleteObjecttag: PropTypes.bool.isRequired,
-    }).isRequired,
-  ).isRequired,
-  removeTagHandler: PropTypes.func.isRequired,
-};
-
-export default ContentTagsTree;
diff --git a/src/content-tags-drawer/ContentTagsTree.test.jsx b/src/content-tags-drawer/ContentTagsTree.test.jsx
deleted file mode 100644
index 23941393ab..0000000000
--- a/src/content-tags-drawer/ContentTagsTree.test.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { act, render } from '@testing-library/react';
-
-import ContentTagsTree from './ContentTagsTree';
-
-const data = {
-  'Science and Research': {
-    explicit: false,
-    canDeleteObjecttag: false,
-    children: {
-      'Genetics Subcategory': {
-        explicit: false,
-        children: {
-          'DNA Sequencing': {
-            explicit: true,
-            children: {},
-            canDeleteObjecttag: true,
-          },
-        },
-        canDeleteObjecttag: false,
-      },
-      'Molecular, Cellular, and Microbiology': {
-        explicit: false,
-        children: {
-          Virology: {
-            explicit: true,
-            children: {},
-            canDeleteObjecttag: true,
-          },
-        },
-        canDeleteObjecttag: false,
-      },
-    },
-  },
-};
-
-const ContentTagsTreeComponent = ({ tagsTree, removeTagHandler }) => (
-  <IntlProvider locale="en" messages={{}}>
-    <ContentTagsTree tagsTree={tagsTree} removeTagHandler={removeTagHandler} />
-  </IntlProvider>
-);
-
-ContentTagsTreeComponent.propTypes = ContentTagsTree.propTypes;
-
-describe('<ContentTagsTree />', () => {
-  it('should render taxonomy tags data along content tags number badge', async () => {
-    await act(async () => {
-      const { getByText } = render(<ContentTagsTreeComponent tagsTree={data} removeTagHandler={() => {}} />);
-      expect(getByText('Science and Research')).toBeInTheDocument();
-      expect(getByText('Genetics Subcategory')).toBeInTheDocument();
-      expect(getByText('Molecular, Cellular, and Microbiology')).toBeInTheDocument();
-      expect(getByText('DNA Sequencing')).toBeInTheDocument();
-      expect(getByText('Virology')).toBeInTheDocument();
-    });
-  });
-});
diff --git a/src/content-tags-drawer/TagBubble.jsx b/src/content-tags-drawer/TagBubble.jsx
deleted file mode 100644
index b1b0c9b0ba..0000000000
--- a/src/content-tags-drawer/TagBubble.jsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import {
-  Chip,
-} from '@openedx/paragon';
-import { Tag, Close } from '@openedx/paragon/icons';
-import PropTypes from 'prop-types';
-
-import TagOutlineIcon from './TagOutlineIcon';
-
-const TagBubble = ({
-  value, implicit, level, lineage, removeTagHandler, canRemove,
-}) => {
-  const className = `tag-bubble mb-2 border-light-300 ${implicit ? 'implicit' : ''}`;
-
-  const handleClick = React.useCallback(() => {
-    if (!implicit && canRemove) {
-      removeTagHandler(lineage.join(','));
-    }
-  }, [implicit, lineage, canRemove, removeTagHandler]);
-
-  return (
-    <div style={{ paddingLeft: `${level * 1}rem` }}>
-      <Chip
-        className={className}
-        variant="light"
-        iconBefore={!implicit ? Tag : TagOutlineIcon}
-        iconAfter={!implicit && canRemove ? Close : null}
-        onIconAfterClick={handleClick}
-      >
-        {value}
-      </Chip>
-    </div>
-  );
-};
-
-TagBubble.defaultProps = {
-  implicit: true,
-  level: 0,
-  canRemove: false,
-};
-
-TagBubble.propTypes = {
-  value: PropTypes.string.isRequired,
-  implicit: PropTypes.bool,
-  level: PropTypes.number,
-  lineage: PropTypes.arrayOf(PropTypes.string).isRequired,
-  removeTagHandler: PropTypes.func.isRequired,
-  canRemove: PropTypes.bool,
-};
-
-export default TagBubble;
diff --git a/src/content-tags-drawer/TagBubble.scss b/src/content-tags-drawer/TagBubble.scss
deleted file mode 100644
index c64d80d342..0000000000
--- a/src/content-tags-drawer/TagBubble.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.tag-bubble.pgn__chip {
-  border-style: solid;
-  border-width: 2px;
-  background-color: transparent;
-}
diff --git a/src/content-tags-drawer/TagBubble.test.jsx b/src/content-tags-drawer/TagBubble.test.jsx
deleted file mode 100644
index df73586426..0000000000
--- a/src/content-tags-drawer/TagBubble.test.jsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import React from 'react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { render, fireEvent } from '@testing-library/react';
-
-import TagBubble from './TagBubble';
-
-const data = {
-  value: 'Tag 1',
-  lineage: [],
-  removeTagHandler: jest.fn(),
-};
-
-const TagBubbleComponent = ({
-  value, implicit, level, lineage, removeTagHandler, canRemove,
-}) => (
-  <IntlProvider locale="en" messages={{}}>
-    <TagBubble
-      value={value}
-      implicit={implicit}
-      level={level}
-      lineage={lineage}
-      removeTagHandler={removeTagHandler}
-      canRemove={canRemove}
-    />
-  </IntlProvider>
-);
-
-TagBubbleComponent.defaultProps = {
-  implicit: true,
-  level: 0,
-  canRemove: false,
-};
-
-TagBubbleComponent.propTypes = TagBubble.propTypes;
-
-describe('<TagBubble />', () => {
-  it('should render implicit tag', () => {
-    const { container, getByText } = render(
-      <TagBubbleComponent
-        value={data.value}
-        lineage={data.lineage}
-        removeTagHandler={data.removeTagHandler}
-      />,
-    );
-    expect(getByText(data.value)).toBeInTheDocument();
-    expect(container.getElementsByClassName('implicit').length).toBe(1);
-    expect(container.getElementsByClassName('pgn__chip__icon-after').length).toBe(0);
-  });
-
-  it('should render explicit tag', () => {
-    const tagBubbleData = {
-      implicit: false,
-      canRemove: true,
-      ...data,
-    };
-    const { container, getByText } = render(
-      <TagBubbleComponent
-        value={tagBubbleData.value}
-        canRemove={tagBubbleData.canRemove}
-        lineage={data.lineage}
-        implicit={tagBubbleData.implicit}
-        removeTagHandler={tagBubbleData.removeTagHandler}
-      />,
-    );
-    expect(getByText(`${tagBubbleData.value}`)).toBeInTheDocument();
-    expect(container.getElementsByClassName('implicit').length).toBe(0);
-    expect(container.getElementsByClassName('pgn__chip__icon-after').length).toBe(1);
-  });
-
-  it('should call removeTagHandler when "x" clicked on explicit tag', async () => {
-    const tagBubbleData = {
-      implicit: false,
-      canRemove: true,
-      ...data,
-    };
-    const { container } = render(
-      <TagBubbleComponent
-        value={tagBubbleData.value}
-        canRemove={tagBubbleData.canRemove}
-        lineage={data.lineage}
-        implicit={tagBubbleData.implicit}
-        removeTagHandler={tagBubbleData.removeTagHandler}
-      />,
-    );
-
-    const xButton = container.getElementsByClassName('pgn__chip__icon-after')[0];
-    fireEvent.click(xButton);
-    expect(data.removeTagHandler).toHaveBeenCalled();
-  });
-
-  it('should not show "x" when canRemove is not allowed', async () => {
-    const tagBubbleData = {
-      implicit: false,
-      canRemove: false,
-      ...data,
-    };
-    const { container } = render(
-      <TagBubbleComponent
-        value={tagBubbleData.value}
-        canRemove={tagBubbleData.canRemove}
-        lineage={data.lineage}
-        implicit={tagBubbleData.implicit}
-        removeTagHandler={tagBubbleData.removeTagHandler}
-      />,
-    );
-
-    expect(container.getElementsByClassName('pgn__chip__icon-after')[0]).toBeUndefined();
-  });
-});
diff --git a/src/content-tags-drawer/TagsTree.jsx b/src/content-tags-drawer/TagsTree.jsx
new file mode 100644
index 0000000000..50ce614de4
--- /dev/null
+++ b/src/content-tags-drawer/TagsTree.jsx
@@ -0,0 +1,168 @@
+// @ts-check
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Icon, Stack, IconButton } from '@openedx/paragon';
+import { Tag, Close } from '@openedx/paragon/icons';
+import messages from './messages';
+import { ContentTagsDrawerContext } from './common/context';
+
+const TagComponent = ({
+  value,
+  canDelete,
+  explicit,
+  removeTagHandler,
+  lineage,
+}) => {
+  const intl = useIntl();
+
+  const handleClick = React.useCallback(() => {
+    if (explicit && canDelete) {
+      removeTagHandler(lineage.join(','));
+    }
+  }, [explicit, lineage, canDelete, removeTagHandler]);
+
+  return (
+    <Stack direction="horizontal">
+      <Icon src={Tag} className="mr-1 pb-1.5 text-info-500" />
+      {value}
+      {explicit && canDelete && (
+        <IconButton
+          isActive
+          key={value}
+          src={Close}
+          iconAs={Icon}
+          alt={intl.formatMessage(messages.tagsDeleteAltText)}
+          onClick={handleClick}
+          variant="light"
+          className="tags-tree-delete-button ml-2 text-gray-600"
+        />
+      )}
+    </Stack>
+  );
+};
+
+TagComponent.propTypes = {
+  value: PropTypes.string.isRequired,
+  canDelete: PropTypes.bool,
+  explicit: PropTypes.bool,
+  lineage: PropTypes.arrayOf(PropTypes.string).isRequired,
+  removeTagHandler: PropTypes.func,
+};
+
+TagComponent.defaultProps = {
+  removeTagHandler: undefined,
+  canDelete: false,
+  explicit: false,
+};
+
+/**
+ * Component that renders Tags under a Taxonomy in the nested tree format.
+ *
+ * Example:
+ *
+ * {
+ *   "Science and Research": {
+ *     explicit: false,
+ *     canDeleteObjecttag: true,
+ *     children: {
+ *       "Genetics Subcategory": {
+ *         explicit: false,
+ *         canDeleteObjecttag: true,
+ *         children: {
+ *           "DNA Sequencing": {
+ *             explicit: true,
+ *             canDeleteObjecttag: false,
+ *             children: {}
+ *           }
+ *         }
+ *       },
+ *       "Molecular, Cellular, and Microbiology": {
+ *         explicit: false,
+ *         canDeleteObjecttag: false,
+ *         children: {
+ *           "Virology": {
+ *             explicit: true,
+ *             canDeleteObjecttag: true,
+ *             children: {}
+ *           }
+ *         }
+ *       }
+ *     }
+ *   }
+ * };
+ *
+ * @param {Object} props - The component props.
+ * @param {Object} props.tags - Array of taxonomy tags that are applied to the content.
+ * @param {number} props.rootDepth - Depth of the parent tag (root), used to render tabs for the tree.
+ * @param {string} props.parentKey - Key of the parent tag.
+ * @param {string[]} props.lineage - Lineage of the tag.
+ * @param {(
+ *   tagSelectableBoxValue: string,
+ *   checked: boolean
+ * ) => void} props.removeTagHandler - Function that is called when removing tags from the tree.
+ */
+const TagsTree = ({
+  tags,
+  rootDepth,
+  parentKey,
+  lineage,
+  removeTagHandler,
+}) => {
+  const { isEditMode } = useContext(ContentTagsDrawerContext);
+
+  if (Object.keys(tags).length === 0) {
+    return null;
+  }
+
+  // Used to Generate tabs for the parents of this tree
+  const tabsNumberArray = Array.from({ length: rootDepth }, (_, index) => index + 1);
+
+  return (
+    <div className="tags-tree" key={parentKey}>
+      {Object.keys(tags).map((key) => (
+        <div className="mt-1.5 mb-1.5" key={key}>
+          <div className="d-flex pl-2.5" key={key}>
+            {
+              tabsNumberArray.map((index) => <span className="d-inline-block ml-4" key={`${key}-${index}`} />)
+            }
+            <TagComponent
+              value={key}
+              canDelete={isEditMode && tags[key].canDeleteObjecttag}
+              explicit={tags[key].explicit}
+              lineage={[...lineage, encodeURIComponent(key)]}
+              removeTagHandler={removeTagHandler}
+            />
+          </div>
+          { tags[key].children
+            && (
+              <TagsTree
+                tags={tags[key].children}
+                rootDepth={rootDepth + 1}
+                parentKey={key}
+                lineage={[...lineage, encodeURIComponent(key)]}
+                removeTagHandler={removeTagHandler}
+              />
+            )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+TagsTree.propTypes = {
+  tags: PropTypes.shape({}).isRequired,
+  parentKey: PropTypes.string,
+  rootDepth: PropTypes.number,
+  lineage: PropTypes.arrayOf(PropTypes.string),
+  removeTagHandler: PropTypes.func,
+};
+
+TagsTree.defaultProps = {
+  rootDepth: 0,
+  parentKey: undefined,
+  lineage: [],
+  removeTagHandler: undefined,
+};
+
+export default TagsTree;
diff --git a/src/content-tags-drawer/TagsTree.scss b/src/content-tags-drawer/TagsTree.scss
new file mode 100644
index 0000000000..ebb5920ca0
--- /dev/null
+++ b/src/content-tags-drawer/TagsTree.scss
@@ -0,0 +1,21 @@
+.tags-tree {
+  .tags-tree-delete-button {
+    width: 1rem;
+    height: 1rem;
+
+    svg {
+      padding: .3rem;
+    }
+
+    &:hover {
+      svg {
+        color: $gray-900;
+      }
+    }
+
+    &:focus-visible {
+      border: 2px solid;
+      border-color: $gray-900;
+    }
+  }
+}
diff --git a/src/content-tags-drawer/TagsTree.test.jsx b/src/content-tags-drawer/TagsTree.test.jsx
new file mode 100644
index 0000000000..ed53111fd2
--- /dev/null
+++ b/src/content-tags-drawer/TagsTree.test.jsx
@@ -0,0 +1,60 @@
+import React, { useMemo } from 'react';
+import {
+  render, screen, within, fireEvent,
+} from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import TagsTree from './TagsTree';
+import { contentTaxonomyTagsTreeMock } from './__mocks__';
+import { ContentTagsDrawerContext } from './common/context';
+
+const mockRemoveTagHandler = jest.fn();
+
+const RootWrapper = (params) => {
+  const context = useMemo(() => ({
+    isEditMode: params.isEditMode,
+  }), []);
+  return (
+    <ContentTagsDrawerContext.Provider value={context}>
+      <IntlProvider locale="en" messages={{}}>
+        <TagsTree {...params} />
+      </IntlProvider>
+    </ContentTagsDrawerContext.Provider>
+  );
+};
+
+describe('<TagsTree>', () => {
+  it('should render component and tags correctly', () => {
+    render(<RootWrapper tags={contentTaxonomyTagsTreeMock} />);
+    expect(screen.getByText('hierarchical taxonomy tag 1')).toBeInTheDocument();
+    expect(screen.getByText('hierarchical taxonomy tag 2.13')).toBeInTheDocument();
+    expect(screen.getByText('hierarchical taxonomy tag 3.4.50')).toBeInTheDocument();
+  });
+
+  it('should not show delete buttons on read mode', () => {
+    render(
+      <RootWrapper
+        tags={contentTaxonomyTagsTreeMock}
+      />,
+    );
+    expect(screen.queryByRole('button', {
+      name: /delete/i,
+    })).not.toBeInTheDocument();
+  });
+
+  it('should call removeTagHandler when "x" clicked on explicit tag', async () => {
+    render(
+      <RootWrapper
+        tags={contentTaxonomyTagsTreeMock}
+        removeTagHandler={mockRemoveTagHandler}
+        isEditMode
+      />,
+    );
+
+    const view = screen.getByText(/hierarchical taxonomy tag 1\.7\.59/i);
+    const xButton = within(view).getByRole('button', {
+      name: /delete/i,
+    });
+    fireEvent.click(xButton);
+    expect(mockRemoveTagHandler).toHaveBeenCalled();
+  });
+});
diff --git a/src/content-tags-drawer/__mocks__/contentTaxonomyTagsTreeMock.js b/src/content-tags-drawer/__mocks__/contentTaxonomyTagsTreeMock.js
index 687e3d357b..5e6a1e3504 100644
--- a/src/content-tags-drawer/__mocks__/contentTaxonomyTagsTreeMock.js
+++ b/src/content-tags-drawer/__mocks__/contentTaxonomyTagsTreeMock.js
@@ -1,9 +1,15 @@
 module.exports = {
   'hierarchical taxonomy tag 1': {
+    explicit: false,
+    canDeleteObjecttag: true,
     children: {
       'hierarchical taxonomy tag 1.7': {
+        explicit: false,
+        canDeleteObjecttag: true,
         children: {
           'hierarchical taxonomy tag 1.7.59': {
+            explicit: true,
+            canDeleteObjecttag: true,
             children: {},
           },
         },
@@ -11,10 +17,16 @@ module.exports = {
     },
   },
   'hierarchical taxonomy tag 2': {
+    explicit: false,
+    canDeleteObjecttag: true,
     children: {
       'hierarchical taxonomy tag 2.13': {
+        explicit: false,
+        canDeleteObjecttag: true,
         children: {
           'hierarchical taxonomy tag 2.13.46': {
+            explicit: true,
+            canDeleteObjecttag: true,
             children: {},
           },
         },
@@ -22,10 +34,16 @@ module.exports = {
     },
   },
   'hierarchical taxonomy tag 3': {
+    explicit: false,
+    canDeleteObjecttag: true,
     children: {
       'hierarchical taxonomy tag 3.4': {
+        explicit: false,
+        canDeleteObjecttag: true,
         children: {
           'hierarchical taxonomy tag 3.4.50': {
+            explicit: false,
+            canDeleteObjecttag: true,
             children: {},
           },
         },
diff --git a/src/content-tags-drawer/common/context.js b/src/content-tags-drawer/common/context.js
new file mode 100644
index 0000000000..966e276e4b
--- /dev/null
+++ b/src/content-tags-drawer/common/context.js
@@ -0,0 +1,37 @@
+// @ts-check
+/* eslint-disable import/prefer-default-export */
+import React from 'react';
+
+/** @typedef {import("../data/types.mjs").TagsInTaxonomy} TagsInTaxonomy */
+/** @typedef {import("../data/types.mjs").StagedTagData} StagedTagData */
+
+/* istanbul ignore next */
+export const ContentTagsDrawerContext = React.createContext({
+  stagedContentTags: /** @type{Record<number, StagedTagData[]>} */ ({}),
+  globalStagedContentTags: /** @type{Record<number, StagedTagData[]>} */ ({}),
+  globalStagedRemovedContentTags: /** @type{Record<number, string>} */ ({}),
+  addStagedContentTag: /** @type{(taxonomyId: number, addedTag: StagedTagData) => void} */ (() => {}),
+  removeStagedContentTag: /** @type{(taxonomyId: number, tagValue: string) => void} */ (() => {}),
+  removeGlobalStagedContentTag: /** @type{(taxonomyId: number, tagValue: string) => void} */ (() => {}),
+  addRemovedContentTag: /** @type{(taxonomyId: number, tagValue: string) => void} */ (() => {}),
+  deleteRemovedContentTag: /** @type{(taxonomyId: number, tagValue: string) => void} */ (() => {}),
+  setStagedTags: /** @type{(taxonomyId: number, tagsList: StagedTagData[]) => void} */ (() => {}),
+  setGlobalStagedContentTags: /** @type{Function} */ (() => {}),
+  commitGlobalStagedTags: /** @type{() => void} */ (() => {}),
+  commitGlobalStagedTagsStatus: /** @type{null|string} */ (null),
+  isContentDataLoaded: /** @type{boolean} */ (false),
+  isContentTaxonomyTagsLoaded: /** @type{boolean} */ (false),
+  isTaxonomyListLoaded: /** @type{boolean} */ (false),
+  contentName: /** @type{string} */ (''),
+  tagsByTaxonomy: /** @type{TagsInTaxonomy[]} */ ([]),
+  isEditMode: /** @type{boolean} */ (false),
+  toEditMode: /** @type{() => void} */ (() => {}),
+  toReadMode: /** @type{() => void} */ (() => {}),
+  collapsibleStates: /** @type{Record<number, boolean>} */ ({}),
+  openCollapsible: /** @type{(taxonomyId: number) => void} */ (() => {}),
+  closeCollapsible: /** @type{(taxonomyId: number) => void} */ (() => {}),
+  toastMessage: /** @type{string|undefined} */ (undefined),
+  showToastAfterSave: /** @type{() => void} */ (() => {}),
+  closeToast: /** @type{() => void} */ (() => {}),
+  setCollapsibleToInitalState: /** @type{() => void} */ (() => {}),
+});
diff --git a/src/content-tags-drawer/data/api.js b/src/content-tags-drawer/data/api.js
index 54319cc103..29b8d9e524 100644
--- a/src/content-tags-drawer/data/api.js
+++ b/src/content-tags-drawer/data/api.js
@@ -90,13 +90,11 @@ export async function getContentData(contentId) {
 /**
  * Update content object's applied tags
  * @param {string} contentId The id of the content object (unit/component)
- * @param {number} taxonomyId The id of the taxonomy the tags belong to
- * @param {string[]} tags The list of tags (values) to set on content object
+ * @param {Promise<import("./types.mjs").UpdateTagsData[]>} tagsData The list of tags (values) to set on content object
  * @returns {Promise<import("./types.mjs").ContentTaxonomyTagsData>}
  */
-export async function updateContentTaxonomyTags(contentId, taxonomyId, tags) {
+export async function updateContentTaxonomyTags(contentId, tagsData) {
   const url = getContentTaxonomyTagsApiUrl(contentId);
-  const params = { taxonomy: taxonomyId };
-  const { data } = await getAuthenticatedHttpClient().put(url, { tags }, { params });
+  const { data } = await getAuthenticatedHttpClient().put(url, { tagsData });
   return camelCaseObject(data[contentId]);
 }
diff --git a/src/content-tags-drawer/data/api.test.js b/src/content-tags-drawer/data/api.test.js
index 7ccb353548..70a02680e8 100644
--- a/src/content-tags-drawer/data/api.test.js
+++ b/src/content-tags-drawer/data/api.test.js
@@ -132,7 +132,11 @@ describe('content tags drawer api calls', () => {
     const taxonomyId = 3;
     const tags = ['flat taxonomy tag 100', 'flat taxonomy tag 3856'];
     axiosMock.onPut(`${getContentTaxonomyTagsApiUrl(contentId)}`).reply(200, updateContentTaxonomyTagsMock);
-    const result = await updateContentTaxonomyTags(contentId, taxonomyId, tags);
+    // @ts-ignore
+    const result = await updateContentTaxonomyTags(contentId, [{
+      taxonomy: taxonomyId,
+      tags,
+    }]);
 
     expect(axiosMock.history.put[0].url).toEqual(`${getContentTaxonomyTagsApiUrl(contentId)}`);
     expect(result).toEqual(updateContentTaxonomyTagsMock[contentId]);
diff --git a/src/content-tags-drawer/data/apiHooks.jsx b/src/content-tags-drawer/data/apiHooks.jsx
index 0b311d795f..7133caaf22 100644
--- a/src/content-tags-drawer/data/apiHooks.jsx
+++ b/src/content-tags-drawer/data/apiHooks.jsx
@@ -119,9 +119,8 @@ export const useContentData = (contentId) => (
 /**
  * Builds the mutation to update the tags applied to the content object
  * @param {string} contentId The id of the content object to update tags for
- * @param {number} taxonomyId The id of the taxonomy the tags belong to
  */
-export const useContentTaxonomyTagsUpdater = (contentId, taxonomyId) => {
+export const useContentTaxonomyTagsUpdater = (contentId) => {
   const queryClient = useQueryClient();
 
   return useMutation({
@@ -130,11 +129,11 @@ export const useContentTaxonomyTagsUpdater = (contentId, taxonomyId) => {
      *   any,
      *   any,
      *   {
-     *     tags: string[]
+     *     tagsData: Promise<import("./types.mjs").UpdateTagsData[]>
      *   }
      * >}
      */
-    mutationFn: ({ tags }) => updateContentTaxonomyTags(contentId, taxonomyId, tags),
+    mutationFn: ({ tagsData }) => updateContentTaxonomyTags(contentId, tagsData),
     onSettled: /* istanbul ignore next */ () => {
       queryClient.invalidateQueries({ queryKey: ['contentTaxonomyTags', contentId] });
       /// Invalidate query with pattern on course outline
diff --git a/src/content-tags-drawer/data/apiHooks.test.jsx b/src/content-tags-drawer/data/apiHooks.test.jsx
index 4e12ef5ea5..3e327ee25c 100644
--- a/src/content-tags-drawer/data/apiHooks.test.jsx
+++ b/src/content-tags-drawer/data/apiHooks.test.jsx
@@ -158,8 +158,12 @@ describe('useContentTaxonomyTagsUpdater', () => {
 
     const contentId = 'testerContent';
     const taxonomyId = 123;
-    const mutation = useContentTaxonomyTagsUpdater(contentId, taxonomyId);
-    mutation.mutate({ tags: ['tag1', 'tag2'] });
+    const mutation = useContentTaxonomyTagsUpdater(contentId);
+    const tagsData = [{
+      taxonomy: taxonomyId,
+      tags: ['tag1', 'tag2'],
+    }];
+    mutation.mutate({ tagsData });
 
     expect(useMutation).toBeCalled();
 
@@ -167,9 +171,8 @@ describe('useContentTaxonomyTagsUpdater', () => {
     const { mutationFn } = config;
 
     await act(async () => {
-      const tags = ['tag1', 'tag2'];
-      await mutationFn({ tags });
-      expect(updateContentTaxonomyTags).toBeCalledWith(contentId, taxonomyId, tags);
+      await mutationFn({ tagsData });
+      expect(updateContentTaxonomyTags).toBeCalledWith(contentId, tagsData);
     });
   });
 });
diff --git a/src/content-tags-drawer/data/types.mjs b/src/content-tags-drawer/data/types.mjs
index 1f95977e15..5a4c1bf665 100644
--- a/src/content-tags-drawer/data/types.mjs
+++ b/src/content-tags-drawer/data/types.mjs
@@ -59,6 +59,25 @@
  * @property {boolean} hasPartitionGroupComponents
  */
 
+/**
+ * @typedef {Object} TagsInTaxonomy
+ * @property {boolean} allOrgs
+ * @property {boolean} allowFreeText
+ * @property {boolean} allowMultiple
+ * @property {boolean} canChangeTaxonomy
+ * @property {boolean} canDeleteTaxonomy
+ * @property {boolean} canTagObject
+ * @property {Tag[]} contentTags
+ * @property {string} description
+ * @property {boolean} enabled
+ * @property {string} exportId
+ * @property {number} id
+ * @property {string} name
+ * @property {boolean} systemDefined
+ * @property {number} tagsCount
+ * @property {boolean} visibleToAuthors
+ */
+
 /**
   * @typedef {Object} CourseData
   * @property {string} courseDisplayNameWithDefault
@@ -67,3 +86,15 @@
 /**
  * @typedef {XBlockData | CourseData} ContentData
  */
+
+/**
+ * @typedef {Object} UpdateTagsData
+ * @property {number} taxonomy
+ * @property {string[]} tags
+ */
+
+/**
+ * @typedef {Object} StagedTagData
+ * @property {string} value
+ * @property {string} label
+ */
\ No newline at end of file
diff --git a/src/content-tags-drawer/index.scss b/src/content-tags-drawer/index.scss
index 84d91efb56..0713b4929b 100644
--- a/src/content-tags-drawer/index.scss
+++ b/src/content-tags-drawer/index.scss
@@ -1,3 +1,3 @@
-@import "content-tags-drawer/TagBubble";
+@import "content-tags-drawer/TagsTree";
 @import "content-tags-drawer/tags-sidebar-controls/TagsSidebarControls";
 @import "content-tags-drawer/ContentTagsDrawer";
diff --git a/src/content-tags-drawer/messages.js b/src/content-tags-drawer/messages.js
index 60ea313e6f..ff7d168b6e 100644
--- a/src/content-tags-drawer/messages.js
+++ b/src/content-tags-drawer/messages.js
@@ -75,6 +75,41 @@ const messages = defineMessages({
     id: 'course-authoring.content-tags-drawer.content-tags-collapsible.custom-menu.inline-save-staged-tags',
     defaultMessage: 'Add',
   },
+  tagsDrawerCancelButtonText: {
+    id: 'course-authoring.content-tags-drawer.cancel',
+    defaultMessage: 'Cancel',
+    description: 'Button to cancel edit tags.',
+  },
+  tagsDrawerSaveButtonText: {
+    id: 'course-authoring.content-tags-drawer.save',
+    defaultMessage: 'Save',
+    description: 'Button to save edited tags.',
+  },
+  tagsDrawerCloseButtonText: {
+    id: 'course-authoring.content-tags-drawer.close',
+    defaultMessage: 'Close',
+    description: 'Button to close manage tags drawer.',
+  },
+  tagsDrawerEditTagsButtonText: {
+    id: 'course-authoring.content-tags-drawer.edit-tags',
+    defaultMessage: 'Edit tags',
+    description: 'Button to edit tags in manage tags drawer.',
+  },
+  tagsSaveToastTextTypeAdded: {
+    id: 'course-authoring.content-tags-drawer.toast.added',
+    defaultMessage: '{tagsAdded} tags added.',
+    description: 'Text of toast after save when the user added tags.',
+  },
+  tagsSaveToastTextTypeRemoved: {
+    id: 'course-authoring.content-tags-drawer.toast.removed',
+    defaultMessage: '{tagsRemoved} tags removed.',
+    description: 'Text of toast after save when the user removed tags.',
+  },
+  tagsDeleteAltText: {
+    id: 'course-authoring.content-tags-drawer.tag.delete',
+    defaultMessage: 'Delete',
+    description: 'Alt label for Delete tag button.',
+  },
 });
 
 export default messages;
diff --git a/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.jsx b/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.jsx
index 29b2e244d6..d4ee05c588 100644
--- a/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.jsx
+++ b/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.jsx
@@ -11,7 +11,7 @@ import { ContentTagsDrawer } from '..';
 import messages from '../messages';
 import { useContentTaxonomyTagsData } from '../data/apiHooks';
 import { LoadingSpinner } from '../../generic/Loading';
-import TagsTree from './TagsTree';
+import TagsTree from '../TagsTree';
 
 const TagsSidebarBody = () => {
   const intl = useIntl();
diff --git a/src/content-tags-drawer/tags-sidebar-controls/TagsTree.jsx b/src/content-tags-drawer/tags-sidebar-controls/TagsTree.jsx
deleted file mode 100644
index df9923271a..0000000000
--- a/src/content-tags-drawer/tags-sidebar-controls/TagsTree.jsx
+++ /dev/null
@@ -1,50 +0,0 @@
-// @ts-check
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Icon } from '@openedx/paragon';
-import { Tag } from '@openedx/paragon/icons';
-
-const TagsTree = ({ tags, rootDepth, parentKey }) => {
-  if (Object.keys(tags).length === 0) {
-    return null;
-  }
-
-  // Used to Generate tabs for the parents of this tree
-  const tabsNumberArray = Array.from({ length: rootDepth }, (_, index) => index + 1);
-
-  return (
-    <div className="tags-tree" key={parentKey}>
-      {Object.keys(tags).map((key) => (
-        <div className="mt-1.5 mb-1.5" key={key}>
-          <div className="d-flex pl-2.5" key={key}>
-            {
-              tabsNumberArray.map((index) => <span className="d-inline-block ml-4" key={`${key}-${index}`} />)
-            }
-            <Icon src={Tag} className="mr-1 pb-1.5 text-info-500" />{key}
-          </div>
-          { tags[key].children
-            && (
-              <TagsTree
-                tags={tags[key].children}
-                rootDepth={rootDepth + 1}
-                parentKey={key}
-              />
-            )}
-        </div>
-      ))}
-    </div>
-  );
-};
-
-TagsTree.propTypes = {
-  tags: PropTypes.shape({}).isRequired,
-  parentKey: PropTypes.string,
-  rootDepth: PropTypes.number,
-};
-
-TagsTree.defaultProps = {
-  rootDepth: 0,
-  parentKey: undefined,
-};
-
-export default TagsTree;
diff --git a/src/content-tags-drawer/tags-sidebar-controls/TagsTree.test.jsx b/src/content-tags-drawer/tags-sidebar-controls/TagsTree.test.jsx
deleted file mode 100644
index 0ca8c5333a..0000000000
--- a/src/content-tags-drawer/tags-sidebar-controls/TagsTree.test.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import TagsTree from './TagsTree';
-import { contentTaxonomyTagsTreeMock } from '../__mocks__';
-
-describe('<TagsTree>', () => {
-  it('should render component and tags correctly', () => {
-    render(<TagsTree tags={contentTaxonomyTagsTreeMock} />);
-    expect(screen.getByText('hierarchical taxonomy tag 1')).toBeInTheDocument();
-    expect(screen.getByText('hierarchical taxonomy tag 2.13')).toBeInTheDocument();
-    expect(screen.getByText('hierarchical taxonomy tag 3.4.50')).toBeInTheDocument();
-  });
-});