TagsSearch: tweaks to allow re-use beyond tags

- Allow 'followed' and 'unfollowed' list to be overridden via props.
- Allow labels to be overridden via props.
- Add ability to disable "Suggestions"

ui/component/tagsSearch/index.js

@@ -4,9 +4,9 @@ import { doToggleTagFollowDesktop, doAddTag, doDeleteTag } from 'redux/actions/t
 import { selectUser } from 'redux/selectors/user';
 import DiscoveryFirstRun from './view';
 
-const select = state => ({
-  unfollowedTags: selectUnfollowedTags(state),
-  followedTags: selectFollowedTags(state),
+const select = (state, props) => ({
+  unfollowedTags: props.unfollowedTags || selectUnfollowedTags(state),
+  followedTags: props.followedTags || selectFollowedTags(state),
   user: selectUser(state),
 });
 

ui/component/tagsSearch/view.jsx

@@ -14,11 +14,14 @@ type Props = {
   doToggleTagFollowDesktop: (string) => void,
   doAddTag: (string) => void,
   onSelect?: (Tag) => void,
+  hideSuggestions?: boolean,
   suggestMature?: boolean,
   disableAutoFocus?: boolean,
   onRemove: (Tag) => void,
   placeholder?: string,
   label?: string,
+  labelAddNew?: string,
+  labelSuggestions?: string,
   disabled?: boolean,
   limitSelect?: number,
   limitShow?: number,
@@ -44,10 +47,13 @@ export default function TagsSearch(props: Props) {
     doAddTag,
     onSelect,
     onRemove,
+    hideSuggestions,
     suggestMature,
     disableAutoFocus,
     placeholder,
     label,
+    labelAddNew,
+    labelSuggestions,
     disabled,
     limitSelect = TAG_FOLLOW_MAX,
     limitShow = 5,
@@ -189,10 +195,11 @@ export default function TagsSearch(props: Props) {
             type="text"
             value={newTag}
             disabled={disabled}
-            label={__('Add Tags')}
+            label={labelAddNew || __('Add Tags')}
           />
+          {!hideSuggestions && (
             <section>
-            <label>{newTag.length ? __('Matching') : __('Known Tags')}</label>
+              <label>{labelSuggestions || (newTag.length ? __('Matching') : __('Known Tags'))}</label>
               <ul className="tags">
                 {Boolean(newTag.length) && !suggestedTags.includes(newTag) && (
                   <Tag
@@ -214,6 +221,7 @@ export default function TagsSearch(props: Props) {
                 ))}
               </ul>
             </section>
+          )}
         </fieldset-section>
         {experimentalFeature &&
           onSelect && ( // onSelect ensures this does not appear on TagFollow