Checklists – Resolve tag entry to fully-qualified when typed directly (…

…#2505)

* Resolve tag entry to fully-qualified when typed directly

* Use ternary instead of if-then so build will be triggered

* Don't pass labelKey directly, add comments

* wip

* Prevent null in selection

* Undo random change to the whitespace of unrelated file

site/gatsby-site/src/components/checklists/CheckListForm.js

@@ -271,14 +271,14 @@ const AboutSystem = ({ formAbout, debouncedSetFieldValue, userIsOwner }) => {
 const QueryTagInput = ({
   title,
   id,
-  labelKey,
   include,
   idValue,
   tags,
   setFieldValue,
   placeHolder,
   userIsOwner,
   icon,
+  trimTaxonomy = false,
 }) => (
   <div className="bootstrap">
     <Label for={id}>
@@ -289,10 +289,51 @@ const QueryTagInput = ({
       id={id}
       value={idValue}
       options={tags.filter((tag) => include(tag.split(':')))}
-      onChange={(value) => {
-        setFieldValue(id, value);
+      onChange={(tagInputArray) => {
+        //
+        // Example tagInputArray:
+        //
+        // ["GMF:Known AI Technology:Transformer", "Language Model"]
+        //     |                                         |
+        //  ,  |    Not fully-qualified, entered by direct text entry
+        //     |    when `trimTaxonomy` is enabled. Needs to be resolved to:
+        //     |    "GMF:Known AI Technology:Language Model"
+        //     |
+        //  Fully-qualified, entered from menu
+        //
+        if (trimTaxonomy) {
+          // If `trimTaxonomy` is enabled, then
+          // "GMF:Known AI Technology:Transformer"
+          // displays in the menu as just "Transformer".
+          // Users would therefore expect that typing "Transformer"
+          // will mean the same thing as clicking "Transformer" in the menu.
+          // So we have to convert it to its fully-qualified version.
+          const selectedTags = [];
+
+          for (const tagInput of tagInputArray) {
+            let selectedTag;
+
+            if (tagInput.includes(':')) {
+              // If there's a colon, it's already fully-qualified,
+              selectedTag = tagInput;
+            } else {
+              // If there's no colon, then it's not fully-qualified,
+              // so we find the full tag which abbreviates
+              // to the unqualified one.
+              selectedTag = tags.find((t) => abbreviatedTag(t) == tagInput);
+            }
+            if (selectedTag) {
+              selectedTags.push(selectedTag);
+            }
+          }
+          setFieldValue(id, selectedTags);
+        } else {
+          // If `trimTaxonomy` is disabled,
+          // then we can leave the input as it is.
+          setFieldValue(id, tagInputArray);
+        }
       }}
-      labelKey={labelKey}
+      labelKey={trimTaxonomy ? abbreviatedTag : (a) => a}
       placeHolder={placeHolder}
       disabled={!userIsOwner}
       allowNew={false}
@@ -307,7 +348,7 @@ const GoalsTagInput = ({ values, tags, setFieldValue, userIsOwner }) => (
       id: 'tags_goals',
       icon: faBullseye,
       idValue: values['tags_goals'],
-      labelKey: abbreviatedTag,
+      trimTaxonomy: true,
       include: (tagParts) =>
         tagParts[0] == 'GMF' &&
         ['Known AI Goal', 'Potential AI Goal'].includes(tagParts[1]) &&
@@ -326,7 +367,7 @@ const MethodsTagInput = ({ values, tags, setFieldValue, userIsOwner }) => (
       id: 'tags_methods',
       icon: faArrowsTurnToDots,
       idValue: values['tags_methods'],
-      labelKey: abbreviatedTag,
+      trimTaxonomy: true,
       include: (tagParts) =>
         tagParts[0] == 'GMF' &&
         ['Known AI Technology', 'Potential AI Technology'].includes(tagParts[1]) &&
@@ -345,7 +386,6 @@ const OtherTagInput = ({ values, tags, setFieldValue, userIsOwner }) => (
       id: 'tags_other',
       icon: faTag,
       idValue: values['tags_other'],
-      labelKey: (tag) => tag,
       include: (tagParts) =>
         tagParts[0] != 'GMF' ||
         ![

site/gatsby-site/src/components/forms/Tags.js

@@ -50,7 +50,7 @@ export default function Tags({
       renderMenu={options ? undefined : () => null}
       onChange={(value) => onChange(value)}
       options={options || []}
-      selected={value}
+      selected={(value || []).filter((v) => v)}
       placeholder={placeHolder}
       {...{
         disabled,