[FC-0036] feat: New "Add Tags" widget (#834)

* feat: Use react-select for tags selector

Replace existing component with react-select component, by passing in
our custom component.
This retained the existing search functionality.

* fix: Fix missing deps causing constant rerender

This bug appeared after removing the react-query call to the backend
when selecting/unselecting a tag in the dropdown. Since it no longer
gets the updated state from the backend, it doesnt mask the bug.

The bug is essentially the `ContentTagsCollapsibleHelper` rerendering
causing the states to reset overriding the selected (not commited) tags.
This is due to missing dependancies in the useCallback.

* feat: Add stagedContentTags state in react-select

This adds a state and callbacks in the toplevel component of the content
tags drawer to be able to add/remove staged content tags and have them
showup in the react-select as selected chips.

* feat: Split up applied & staged content tags trees

Now content tags have seperate tree states for applied ones and staged
ones. They are updated seperately and both are used when updating the
selectable box UI. This allows for more flexibility with actions that
can be performed on the staged content tags with impacting the applied
ones.

* feat: Change style of implicit checkbox to checks

This overrides the indeterminate input checkbox style to match the
checked checkbox style, using variables defined in paragon.

* feat: Add bottom buttons in tags dropdown selector

* refactor: Remove cloneDeep + simplify code

* feat: Update placeholder/button texts

* feat: Implement cancel button + add proptypes

* feat: Implement commit/cancel staged tags

This implements the commit functionality for staged tags, taking account
for implicit tags. This also handles the case for removing applied tags
by clicking on the "x" in the TagBubble.

* feat: Keep all staged tags only commit explicit

* feat: Change style of add/cancel/load more buttons

* feat: Add inline "Add" button to commit tags

In the react-select component, an inline "Add" button showsup when some
tags are staged, if they are clicked they are commited/applied.

* fix: Keep applied tag checked when only staged child unchecked

* feat: Style add tags widget + staged tags

Also clear search term whenever tags are staged/cancelled

* feat: Fixed some typing errors

* test: Update tests to fix existing broken cases

* test: Add new functionality tests

* chore: add types to ContentTagsCollapsible

* chore: add types for useContentTagsCollapsibleHelper

* fix: Small bug with useIntl

* chore: Fix more linter issues

* refactor: Separate stagedTags and stagedTagsTree state updates

This refactor removed the warning that was caused because the state of a
parent component (ContentTagsDrawer) was being updated in the middle of
a state update in (ContentTagsCollapsible). This seperated the two state
updates to avoid this issue.

* chore: Update package-lock.json

* fix: Reset applied tags in selectbox when fetching

Whenever we get new applied tags from the backend, we reset the applied
tags that are checked, and only check the explicit tags. This was
causing an issue of duplicate applied tags being added to the selectbox.

* chore: Update package.json

---------

Co-authored-by: Braden MacDonald <[email protected]>

package.json

@@ -81,6 +81,7 @@
     "react-responsive": "9.0.2",
     "react-router": "6.16.0",
     "react-router-dom": "6.16.0",
+    "react-select": "5.8.0",
     "react-textarea-autosize": "^8.4.1",
     "react-transition-group": "4.4.5",
     "redux": "4.0.5",

src/content-tags-drawer/ContentTagsCollapsible.d.ts

@@ -0,0 +1,39 @@
+import type {} from 'react-select/base';
+// This import is necessary for module augmentation.
+// It allows us to extend the 'Props' interface in the 'react-select/base' module
+// and add our custom property 'myCustomProp' to it.
+
+export interface TagTreeEntry {
+    explicit: boolean;
+    children: Record<string, TagTreeEntry>;
+    canChangeObjecttag: boolean;
+    canDeleteObjecttag: boolean;
+}
+
+export interface TaxonomySelectProps {
+    taxonomyId: number;
+    searchTerm: string;
+    appliedContentTagsTree: Record<string, TagTreeEntry>;
+    stagedContentTagsTree: Record<string, TagTreeEntry>;
+    checkedTags: string[];
+    handleCommitStagedTags: () => void;
+    handleCancelStagedTags: () => void;
+    handleSelectableBoxChange: React.ChangeEventHandler;
+}
+
+// Unfortunately the only way to specify the custom props we pass into React Select
+// is with this global type augmentation.
+// https://react-select.com/typescript#custom-select-props
+// If in the future other parts of this MFE need to use React Select for different things,
+// we should change to using a 'react context' to share this data within <ContentTagsCollapsible>,
+// rather than using the custom <Select> Props (selectProps).
+declare module 'react-select/base' {
+  export interface Props<
+    Option,
+    IsMulti extends boolean,
+    Group extends GroupBase<Option>
+  > extends TaxonomySelectProps {
+  }
+}
+
+export default ContentTagsCollapsible;