provide shorthand precise target type naming, fix ip / ip4-6 issue with LookupInput under refined TargetType definition

This commit is contained in:
2024-05-10 02:15:10 -05:00
parent a88f3dcff3
commit 2f2a34efcf

View File

@@ -2,8 +2,7 @@ import { useForm } from "react-hook-form";
import type { FunctionComponent } from "react"; import type { FunctionComponent } from "react";
import { Fragment, useState } from "react"; import { Fragment, useState } from "react";
import { onPromise, preventDefault } from "@/helpers"; import { onPromise, preventDefault } from "@/helpers";
import type { SubmitProps, TargetType } from "@/types"; import type { SimplifiedTargetType, SubmitProps, TargetType } from "@/types";
import type { ObjectType } from "@/types";
import { import {
CheckIcon, CheckIcon,
ChevronUpDownIcon, ChevronUpDownIcon,
@@ -38,9 +37,9 @@ type LookupInputProps = {
*/ */
onChange?: (target: { onChange?: (target: {
target: string; target: string;
targetType: ObjectType | null; targetType: TargetType | null;
}) => void; }) => void;
detectedType: Maybe<ObjectType>; detectedType: Maybe<TargetType>;
}; };
const LookupInput: FunctionComponent<LookupInputProps> = ({ const LookupInput: FunctionComponent<LookupInputProps> = ({
@@ -59,12 +58,12 @@ const LookupInput: FunctionComponent<LookupInputProps> = ({
}); });
/** /**
* Mapping of object types to their corresponding display names. * A mapping of available (simple) target types to their long-form human-readable names.
*/ */
const objectNames: Record<ObjectType | "auto", string> = { const objectNames: Record<SimplifiedTargetType | "auto", string> = {
auto: "Autodetect", auto: "Autodetect",
domain: "Domain", domain: "Domain",
ip: "IP/CIDR", ip: "IP/CIDR", // IPv4/IPv6 are combined into this option
tld: "TLD", tld: "TLD",
autnum: "AS Number", autnum: "AS Number",
entity: "Entity Handle", entity: "Entity Handle",
@@ -73,24 +72,39 @@ const LookupInput: FunctionComponent<LookupInputProps> = ({
json: "JSON", json: "JSON",
}; };
/**
* Mapping of precise target types to their simplified short-form names.
*/
const targetShortNames: Record<TargetType, string> = {
domain: "Domain",
tld: "TLD",
ip4: "IPv4",
ip6: "IPv6",
autnum: "ASN",
entity: "Entity",
registrar: "Registrar",
url: "URL",
json: "JSON",
};
/** /**
* Represents the selected value in the LookupInput component. * Represents the selected value in the LookupInput component.
*/ */
const [selected, setSelected] = useState<ObjectType | "auto">("auto"); const [selected, setSelected] = useState<TargetType | "auto">("auto");
/** /**
* Retrieves the target type based on the provided value. * Retrieves the target type based on the provided value.
* @param value - The value to retrieve the target type for. * @param value - The value to retrieve the target type for.
* @returns The target type as ObjectType or null. * @returns The target type as ObjectType or null.
*/ */
function retrieveTargetType(value?: string | null): ObjectType | null { function retrieveTargetType(value?: string | null): TargetType | null {
// If the value is null and the selected value is null, return null. // If the value is null and the selected value is null, return null.
if (value == null) value = selected; if (value == null) value = selected;
// 'auto' means 'do whatever' so we return null. // 'auto' means 'do whatever' so we return null.
if (value == "auto") return null; if (value == "auto") return null;
return value as ObjectType; return value as TargetType;
} }
const searchIcon = ( const searchIcon = (
@@ -114,7 +128,7 @@ const LookupInput: FunctionComponent<LookupInputProps> = ({
const searchInput = ( const searchInput = (
<input <input
className={clsx( className={clsx(
"lg:py-4.5 custom-select block w-full rounded-l-md border border-transparent", "lg:py-4.5 block w-full rounded-l-md border border-transparent",
"bg-zinc-700 py-2 pl-10 pr-3 text-sm placeholder-zinc-400 placeholder:translate-y-2 focus:text-zinc-200", "bg-zinc-700 py-2 pl-10 pr-3 text-sm placeholder-zinc-400 placeholder:translate-y-2 focus:text-zinc-200",
" focus:outline-none sm:text-sm md:py-3 md:text-base lg:text-lg" " focus:outline-none sm:text-sm md:py-3 md:text-base lg:text-lg"
)} )}
@@ -162,8 +176,8 @@ const LookupInput: FunctionComponent<LookupInputProps> = ({
<span className="block"> <span className="block">
{selected == "auto" {selected == "auto"
// If the detected type was provided, then notate which in parentheses. Compact object naming might be better in the future. // If the detected type was provided, then notate which in parentheses. Compact object naming might be better in the future.
? (detectedType.isJust ? `Auto (${objectNames[detectedType.value]})` : objectNames["auto"]) ? (detectedType.isJust ? `Auto (${targetShortNames[detectedType.value]})` : objectNames["auto"])
: objectNames[selected]} : targetShortNames[selected]}
</span> </span>
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"> <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<ChevronUpDownIcon <ChevronUpDownIcon