Performer disambiguation and aliases (#3113)

* Refactor performer relationships
* Remove checksum from performer
* Add disambiguation, overhaul aliases
* Add disambiguation filter criterion
* Improve name matching during import
* Add disambiguation filtering in UI
* Include aliases in performer select

ui/v2.5/src/components/Shared/StringListInput.tsx

@@ -1,4 +1,4 @@
-import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faMinus } from "@fortawesome/free-solid-svg-icons";
 import React from "react";
 import { Button, Form, InputGroup } from "react-bootstrap";
 import Icon from "src/components/Shared/Icon";
@@ -12,11 +12,15 @@ interface IStringListInputProps {
 }
 
 export const StringListInput: React.FC<IStringListInputProps> = (props) => {
+  const values = props.value.concat(props.defaultNewValue || "");
+
   function valueChanged(idx: number, value: string) {
-    const newValues = props.value.map((v, i) => {
-      const ret = idx !== i ? v : value;
-      return ret;
-    });
+    const newValues = values
+      .map((v, i) => {
+        const ret = idx !== i ? v : value;
+        return ret;
+      })
+      .filter((v, i) => i < values.length - 2 || v);
     props.setValue(newValues);
   }
 
@@ -26,40 +30,32 @@ export const StringListInput: React.FC<IStringListInputProps> = (props) => {
     props.setValue(newValues);
   }
 
-  function addValue() {
-    const newValues = props.value.concat(props.defaultNewValue ?? "");
-
-    props.setValue(newValues);
-  }
-
   return (
     <>
       <div className={`string-list-input ${props.errors ? "is-invalid" : ""}`}>
-        {props.value && props.value.length > 0 && (
-          <Form.Group>
-            {props.value &&
-              props.value.map((v, i) => (
-                // eslint-disable-next-line react/no-array-index-key
-                <InputGroup className={props.className} key={i}>
-                  <Form.Control
-                    className="text-input"
-                    value={v}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                      valueChanged(i, e.currentTarget.value)
-                    }
-                  />
-                  <InputGroup.Append>
-                    <Button variant="danger" onClick={() => removeValue(i)}>
-                      <Icon icon={faMinus} />
-                    </Button>
-                  </InputGroup.Append>
-                </InputGroup>
-              ))}
-          </Form.Group>
-        )}
-        <Button className="minimal" size="sm" onClick={() => addValue()}>
-          <Icon icon={faPlus} />
-        </Button>
+        <Form.Group>
+          {values.map((v, i) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <InputGroup className={props.className} key={i}>
+              <Form.Control
+                className="text-input"
+                value={v}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  valueChanged(i, e.currentTarget.value)
+                }
+              />
+              <InputGroup.Append>
+                <Button
+                  variant="danger"
+                  onClick={() => removeValue(i)}
+                  disabled={i === values.length - 1}
+                >
+                  <Icon icon={faMinus} />
+                </Button>
+              </InputGroup.Append>
+            </InputGroup>
+          ))}
+        </Form.Group>
       </div>
       <div className="invalid-feedback">{props.errors}</div>
     </>