feat: add includeInputValueOnNoMatch to useSuggest

Author: spl3g

ui/src/tag/TagFilterSelector.tsx

@@ -51,9 +51,7 @@ export const TagFilterSelector: React.FC<TagFilterSelectorProps> = ({value: sele
     const [inputValue, setInputValue] = React.useState('');
 
     const tagsResult = useQuery<Tags>(gqlTags.Tags);
-    const suggestions = useSuggest(tagsResult, inputValue, [])
-        .filter((t) => !t.tag.create && !t.tag.alreadyUsed)
-        .reverse();
+    const suggestions = useSuggest(tagsResult, inputValue, [], false, false).filter((t) => !t.tag.create && !t.tag.alreadyUsed);
 
     if (tagsResult.error || tagsResult.loading || !tagsResult.data || !tagsResult.data.tags) {
         return null;
@@ -104,7 +102,7 @@ export const TagFilterSelector: React.FC<TagFilterSelectorProps> = ({value: sele
                     <div className={classes.container}>
                         <TextField
                             InputLabelProps={getLabelProps()}
-                            required={true}
+                            required={false}
                             disabled={disabled}
                             InputProps={{
                                 classes: {

ui/src/tag/suggest.ts

@@ -6,66 +6,68 @@ import {TagSelectorEntry, specialTag} from './tagSelectorEntry';
 import {QueryResult} from 'react-apollo';
 
 export const useSuggest = (
-    tagResult: QueryResult<Tags, {}>,
-    inputValue: string,
-    usedTags: string[],
-    skipValue = false
+	tagResult: QueryResult<Tags, {}>,
+	inputValue: string,
+	usedTags: string[],
+	skipValue = false,
+	includeInputValueOnNoMatch = true
 ): TagSelectorEntry[] => {
-    const [tagKeySomeCase, tagValue] = inputValue.split(':');
-    const tagKey = tagKeySomeCase.toLowerCase();
+	const [tagKeySomeCase, tagValue] = inputValue.split(':');
+	const tagKey = tagKeySomeCase.toLowerCase();
 
-    const exactMatch = ((tagResult.data && tagResult.data.tags) || []).find((tag) => tag.key === tagKey);
+	const exactMatch = ((tagResult.data && tagResult.data.tags) || []).find((tag) => tag.key === tagKey);
 
-    const valueResult = useQuery<SuggestTagValue, SuggestTagValueVariables>(gqlTags.SuggestTagValue, {
-        variables: {tag: tagKey, query: tagValue},
-        skip: exactMatch === undefined || skipValue,
-    });
+	const valueResult = useQuery<SuggestTagValue, SuggestTagValueVariables>(gqlTags.SuggestTagValue, {
+		variables: {tag: tagKey, query: tagValue},
+		skip: exactMatch === undefined || skipValue,
+	});
 
-    if (exactMatch && tagValue !== undefined && usedTags.indexOf(exactMatch.key) === -1 && !skipValue) {
-        return suggestTagValue(exactMatch, tagValue, valueResult);
-    } else {
-        return suggestTag(exactMatch, tagResult, tagKey, usedTags);
-    }
+	if (exactMatch && tagValue !== undefined && usedTags.indexOf(exactMatch.key) === -1 && !skipValue) {
+		return suggestTagValue(exactMatch, tagValue, valueResult, includeInputValueOnNoMatch);
+	} else {
+		return suggestTag(exactMatch, tagResult, tagKey, usedTags);
+	}
 };
 
 const suggestTag = (
-    exactMatch: TagSelectorEntry['tag'] | undefined,
-    tagResult: QueryResult<Tags, {}>,
-    tagKey: string,
-    usedTags: string[]
+	exactMatch: TagSelectorEntry['tag'] | undefined,
+	tagResult: QueryResult<Tags, {}>,
+	tagKey: string,
+	usedTags: string[]
 ) => {
-    if (!tagResult.data || tagResult.data.tags === null) {
-        return [];
-    }
+	if (!tagResult.data || tagResult.data.tags === null) {
+		return [];
+	}
 
-    let availableTags = (tagResult.data.tags || [])
-        .filter((tag) => usedTags.indexOf(tag.key) === -1)
-        .filter((tag) => tag.key.indexOf(tagKey) === 0);
+	let availableTags = (tagResult.data.tags || [])
+		.filter((tag) => usedTags.indexOf(tag.key) === -1)
+		.filter((tag) => tag.key.indexOf(tagKey) === 0);
 
-    if (tagKey && !exactMatch) {
-        availableTags = [specialTag(tagKey, 'new'), ...availableTags];
-    }
+	if (tagKey && !exactMatch) {
+		availableTags = [specialTag(tagKey, 'new'), ...availableTags];
+	}
 
-    if (usedTags.indexOf(tagKey) !== -1) {
-        availableTags = [specialTag(tagKey, 'used'), ...availableTags];
-    }
+	if (usedTags.indexOf(tagKey) !== -1) {
+		availableTags = [specialTag(tagKey, 'used'), ...availableTags];
+	}
 
-    return availableTags
-        .sort((a, b) => b.usages - a.usages)
-        .slice(0, 5)
-        .map((tag) => ({tag, value: ''}));
+	return availableTags
+		.sort((a, b) => b.usages - a.usages)
+		.slice(0, 5)
+		.map((tag) => ({tag, value: ''}));
 };
 
 const suggestTagValue = (
-    exactMatch: TagSelectorEntry['tag'],
-    tagValue: string,
-    valueResult: QueryResult<SuggestTagValue, SuggestTagValueVariables>
+	exactMatch: TagSelectorEntry['tag'],
+	tagValue: string,
+	valueResult: QueryResult<SuggestTagValue, SuggestTagValueVariables>,
+	includeInputValueOnNoMatch: boolean
 ): TagSelectorEntry[] => {
-    let someValues = (valueResult.data && valueResult.data.values) || [];
+	let someValues = (valueResult.data && valueResult.data.values) || [];
 
-    if (someValues.indexOf(tagValue) === -1) {
-        someValues = [tagValue, ...someValues];
-    }
+	if (includeInputValueOnNoMatch && someValues.indexOf(tagValue) === -1) {
+		someValues = [tagValue, ...someValues];
+	}
 
-    return someValues.map((val) => ({tag: exactMatch, value: val}));
+	return someValues.map((val) => ({tag: exactMatch, value: val}));
 };