feat: Add editable flag to ContentTagsDrawer

Currently set to always be editable. Need to implement proper permission
checks to determine whether user has access to readonly/editable drawer.

src/content-tags-drawer/ContentTagsCollapsible.jsx

@@ -169,8 +169,9 @@ const removeTags = (tree, tagsToRemove) => {
  * @param {Object[]} taxonomyAndTagsData.contentTags - Array of taxonomy tags that are applied to the content
  * @param {string} taxonomyAndTagsData.contentTags.value - Value of applied Tag
  * @param {string} taxonomyAndTagsData.contentTags.lineage - Array of Tag's ancestors sorted (ancestor -> tag)
+ * @param {boolean} editable - Whether the tags can be edited
  */
-const ContentTagsCollapsible = ({ contentId, taxonomyAndTagsData }) => {
+const ContentTagsCollapsible = ({ contentId, taxonomyAndTagsData, editable }) => {
   const intl = useIntl();
   const {
     id, name, contentTags,
@@ -296,17 +297,20 @@ const ContentTagsCollapsible = ({ contentId, taxonomyAndTagsData }) => {
     <div className="d-flex">
       <Collapsible title={name} styling="card-lg" className="taxonomy-tags-collapsible">
         <div key={id}>
-          <ContentTagsTree tagsTree={tagsTree} removeTagHandler={tagChangeHandler} />
+          <ContentTagsTree tagsTree={tagsTree} removeTagHandler={tagChangeHandler} editable={editable} />
         </div>
 
         <div className="d-flex taxonomy-tags-selector-menu">
-          <Button
-            ref={setTarget}
-            variant="outline-primary"
-            onClick={open}
-          >
-            <FormattedMessage {...messages.addTagsButtonText} />
-          </Button>
+
+          {editable && (
+            <Button
+              ref={setTarget}
+              variant="outline-primary"
+              onClick={open}
+            >
+              <FormattedMessage {...messages.addTagsButtonText} />
+            </Button>
+          )}
         </div>
         <ModalPopup
           placement="bottom"
@@ -362,6 +366,7 @@ ContentTagsCollapsible.propTypes = {
       lineage: PropTypes.arrayOf(PropTypes.string),
     })),
   }).isRequired,
+  editable: PropTypes.bool.isRequired,
 };
 
 export default ContentTagsCollapsible;

src/content-tags-drawer/ContentTagsDrawer.jsx

@@ -102,7 +102,8 @@ const ContentTagsDrawer = () => {
         { isTaxonomyListLoaded && isContentTaxonomyTagsLoaded
           ? taxonomies.map((data) => (
             <div key={`taxonomy-tags-collapsible-${data.id}`}>
-              <ContentTagsCollapsible contentId={contentId} taxonomyAndTagsData={data} />
+              {/* TODO: Properly set whether tags should be editable or not based on permissions */}
+              <ContentTagsCollapsible contentId={contentId} taxonomyAndTagsData={data} editable />
               <hr />
             </div>
           ))

src/content-tags-drawer/ContentTagsTree.jsx

@@ -35,8 +35,10 @@ import TagBubble from './TagBubble';
  * };
  *
  * @param {Object} tagsTree - Array of taxonomy tags that are applied to the content
+ * @param {Func} removeTagHandler - Function that is called when removing tags from tree
+ * @param {boolean} editable - Whether the tags appear with an 'x' allowing the user to remove them
  */
-const ContentTagsTree = ({ tagsTree, removeTagHandler }) => {
+const ContentTagsTree = ({ tagsTree, removeTagHandler, editable }) => {
   const renderTagsTree = (tag, level, lineage) => Object.keys(tag).map((key) => {
     const updatedLineage = [...lineage, encodeURIComponent(key)];
     if (tag[key] !== undefined) {
@@ -49,6 +51,7 @@ const ContentTagsTree = ({ tagsTree, removeTagHandler }) => {
             level={level}
             lineage={updatedLineage}
             removeTagHandler={removeTagHandler}
+            editable={editable}
           />
           { renderTagsTree(tag[key].children, level + 1, updatedLineage) }
         </div>
@@ -68,6 +71,7 @@ ContentTagsTree.propTypes = {
     }).isRequired,
   ).isRequired,
   removeTagHandler: PropTypes.func.isRequired,
+  editable: PropTypes.bool.isRequired,
 };
 
 export default ContentTagsTree;

src/content-tags-drawer/TagBubble.jsx

@@ -8,12 +8,12 @@ import PropTypes from 'prop-types';
 import TagOutlineIcon from './TagOutlineIcon';
 
 const TagBubble = ({
-  value, implicit, level, lineage, removeTagHandler,
+  value, implicit, level, lineage, removeTagHandler, editable,
 }) => {
   const className = `tag-bubble mb-2 ${implicit ? 'implicit' : ''}`;
 
   const handleClick = React.useCallback(() => {
-    if (!implicit) {
+    if (!implicit && editable) {
       removeTagHandler(lineage.join(','), false);
     }
   }, [implicit, lineage]);
@@ -24,7 +24,7 @@ const TagBubble = ({
         className={className}
         variant="light"
         iconBefore={!implicit ? Tag : TagOutlineIcon}
-        iconAfter={!implicit ? Close : null}
+        iconAfter={!implicit && editable ? Close : null}
         onIconAfterClick={handleClick}
       >
         {value}
@@ -44,6 +44,7 @@ TagBubble.propTypes = {
   level: PropTypes.number,
   lineage: PropTypes.arrayOf(PropTypes.string).isRequired,
   removeTagHandler: PropTypes.func.isRequired,
+  editable: PropTypes.bool.isRequired,
 };
 
 export default TagBubble;