Various fixes in src/components/Tags/*

Author: rlamacraft

src/main/webapp/ui/src/components/Tags/AddTag.js

@@ -34,6 +34,11 @@ type AddTagArgs<
   disabled?: boolean,
 |};
 
+/**
+ * This component provides a button to add a tag to a list of tags.
+ * It is parameterized by the type of tag that it will add, requiring that the
+ * selected tag have all of the metadata when `enforceOntologies` is true.
+ */
 export default function AddTag<
   Toggle:
     | {|

src/main/webapp/ui/src/components/Tags/TagListing.js

@@ -50,6 +50,12 @@ type TagListingArgs = {|
   onClick?: (Tag) => void,
 |};
 
+/**
+ * This component provides a listing of tags, with the ability to delete tags
+ * if `onDelete` is true, to show the associated metadata if
+ * `showMetadataPopup` is true, and to perform an action when a tag is clicked
+ * if `onClick` is provided.
+ */
 export default function TagListing({
   tags,
   size = "medium",

src/main/webapp/ui/src/components/Tags/TagValidation.js

@@ -13,7 +13,7 @@
 import { lift2 } from "../../util/optional";
 import { type Tag } from "../../stores/definitions/Tag";
 
-/*
+/**
  * The max length of an individual tag. Chosen rather arbitrarily based on the
  * typically length of tags from the ontology file used for testing.
  */
@@ -44,7 +44,7 @@ opaque type TagValidation =
 
 const forbiddenCharacters = new Set("<>\\".split(""));
 
-/*
+/**
  * Given a Tag, which is to say a simple string, there are some validations
  * that can be performed on it alone.
  */
@@ -67,7 +67,7 @@ export const checkTagString = (tag: string): TagValidation => {
   return { reason: "NoIssues" };
 };
 
-/*
+/**
  * In addition to the restrictions above, a tag entered by the user also has
  * some additional checks
  */
@@ -85,16 +85,16 @@ export const checkUserInputString = (tag: string): TagValidation => {
   return checkTagString(tag);
 };
 
-/*
+type InternalTag = {|
+  ...Tag,
+  selected: boolean,
+|};
+/**
  * Internal to the components for rendering the means with which a user may
  * choose a tag, additional state is used to richly render these tags. This
  * additional state gives us additional information with which to validate
  * that a tag can be chosen.
  */
-type InternalTag = {|
-  ...Tag,
-  selected: boolean,
-|};
 export const checkInternalTag = (
   tag: InternalTag,
   { enforceOntologies }: { enforceOntologies: boolean }
@@ -126,13 +126,19 @@ export const checkInternalTag = (
  * =======================
  */
 
+/**
+ * For disabling a tab based on the validation of a tag.
+ */
 export const isAllowed = (tagValidation: TagValidation): boolean => {
   return (
     tagValidation.reason === "NoIssues" ||
     tagValidation.reason === "NoIssuesWithSourceInformation"
   );
 };
 
+/**
+ * For explaining why a tag is not allowed.
+ */
 export const helpText = (tagValidation: TagValidation): ?string => {
   if (tagValidation.reason === "NoIssues") return null;
   if (tagValidation.reason === "OntologiesAreEnforced")
@@ -156,8 +162,3 @@ export const helpText = (tagValidation: TagValidation): ?string => {
       return "Tags cannot contain consecutive whitespace characters.";
   }
 };
-
-export const filterFieldError = (tagValidation: TagValidation): ?string => {
-  if (tagValidation.reason === "NoIssues") return null;
-  return helpText(tagValidation);
-};

src/main/webapp/ui/src/components/Tags/TagsCombobox.js

@@ -23,7 +23,6 @@ import {
   checkUserInputString,
   checkInternalTag,
   helpText,
-  filterFieldError,
   isAllowed,
 } from "./TagValidation";
 import Alert from "@mui/material/Alert";
@@ -872,7 +871,7 @@ export default function TagsCombobox<
               setKeyboardFocusIndex(null);
             }}
             error={!isAllowed(checkUserInputString(filter))}
-            helperText={filterFieldError(checkUserInputString(filter))}
+            helperText={helpText(checkUserInputString(filter))}
             tabIndex={0}
             fullWidth
             value={filter}

src/main/webapp/ui/src/eln/sysadmin/users/TagsCombobox.js

@@ -20,7 +20,7 @@ import FilterIcon from "@mui/icons-material/FilterAlt";
 import ListItemText from "@mui/material/ListItemText";
 import {
   checkUserInputString,
-  filterFieldError,
+  helpText,
   isAllowed,
 } from "../../../components/Tags/TagValidation";
 import Alert from "@mui/material/Alert";
@@ -607,7 +607,7 @@ export default function TagsCombobox({
               setKeyboardFocusIndex(null);
             }}
             error={!isAllowed(checkUserInputString(filter))}
-            helperText={filterFieldError(checkUserInputString(filter))}
+            helperText={helpText(checkUserInputString(filter))}
             tabIndex={0}
             fullWidth
             value={filter}