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 => ({
+const select = (state, props) => ({
-  unfollowedTags: selectUnfollowedTags(state),
+  unfollowedTags: props.unfollowedTags || selectUnfollowedTags(state),
-  followedTags: selectFollowedTags(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,31 +195,33 @@ export default function TagsSearch(props: Props) {
             type="text"
             value={newTag}
             disabled={disabled}
-            label={__('Add Tags')}
+            label={labelAddNew || __('Add Tags')}
           />
-          <section>
+          {!hideSuggestions && (
-            <label>{newTag.length ? __('Matching') : __('Known Tags')}</label>
+            <section>
-            <ul className="tags">
+              <label>{labelSuggestions || (newTag.length ? __('Matching') : __('Known Tags'))}</label>
-              {Boolean(newTag.length) && !suggestedTags.includes(newTag) && (
+              <ul className="tags">
-                <Tag
+                {Boolean(newTag.length) && !suggestedTags.includes(newTag) && (
-                  disabled={newTag !== 'mature' && maxed}
+                  <Tag
-                  key={`entered${newTag}`}
+                    disabled={newTag !== 'mature' && maxed}
-                  name={newTag}
+                    key={`entered${newTag}`}
-                  type="add"
+                    name={newTag}
-                  onClick={newTag.includes('') ? (e) => handleSubmit(e) : (e) => handleTagClick(newTag)}
+                    type="add"
-                />
+                    onClick={newTag.includes('') ? (e) => handleSubmit(e) : (e) => handleTagClick(newTag)}
-              )}
+                  />
-              {suggestedTags.map((tag) => (
+                )}
-                <Tag
+                {suggestedTags.map((tag) => (
-                  disabled={tag !== 'mature' && maxed}
+                  <Tag
-                  key={`suggested${tag}`}
+                    disabled={tag !== 'mature' && maxed}
-                  name={tag}
+                    key={`suggested${tag}`}
-                  type="add"
+                    name={tag}
-                  onClick={() => handleTagClick(tag)}
+                    type="add"
-                />
+                    onClick={() => handleTagClick(tag)}
-              ))}
+                  />
-            </ul>
+                ))}
-          </section>
+              </ul>
+            </section>
+          )}
         </fieldset-section>
         {experimentalFeature &&
           onSelect && ( // onSelect ensures this does not appear on TagFollow