diff --git a/src/components/HistoryTable/HistoryTableTestSearch/HistoryTableTestSearch.tsx b/src/components/HistoryTable/HistoryTableTestSearch/HistoryTableTestSearch.tsx index fd8d0b73fb..72243642fc 100644 --- a/src/components/HistoryTable/HistoryTableTestSearch/HistoryTableTestSearch.tsx +++ b/src/components/HistoryTable/HistoryTableTestSearch/HistoryTableTestSearch.tsx @@ -1,16 +1,10 @@ -import { useState } from "react"; import styled from "@emotion/styled"; -import IconButton from "@leafygreen-ui/icon-button"; -import { palette } from "@leafygreen-ui/palette"; -import Icon from "components/Icon"; -import IconTooltip from "components/IconTooltip"; -import TextInput from "components/TextInputWithGlyph"; +import TextInput from "components/TextInputWithValidation"; import { useUpsertQueryParams } from "hooks"; import { TestStatus } from "types/history"; import { validators } from "utils"; const { validateRegexp } = validators; -const { yellow } = palette; interface HistoryTableTestSearchProps { onSubmit?: () => void; @@ -19,19 +13,11 @@ interface HistoryTableTestSearchProps { export const HistoryTableTestSearch: React.FC = ({ onSubmit = () => {}, }) => { - const [input, setInput] = useState(""); - const isValid = validateRegexp(input); const handleSubmit = useUpsertQueryParams(); - const handleOnChange = (value: string) => { - setInput(value); - }; - const handleOnSubmit = () => { - if (isValid) { - onSubmit(); - handleSubmit({ category: TestStatus.Failed, value: input }); - setInput(""); - } + const handleOnSubmit = (input: string) => { + onSubmit(); + handleSubmit({ category: TestStatus.Failed, value: input }); }; return ( @@ -40,30 +26,10 @@ export const HistoryTableTestSearch: React.FC = ({ type="search" label="Filter by Failed Tests" aria-label="history-table-test-search-input" - value={input} placeholder="Search test name regex" - onChange={(e) => handleOnChange(e.target.value)} - onKeyPress={(e: React.KeyboardEvent) => - e.key === "Enter" && handleOnSubmit() - } - icon={ - isValid ? ( - - - - ) : ( - - Invalid Regular Expression - - ) - } + validatorErrorMessage="Invalid Regular Expression" + onSubmit={handleOnSubmit} + validator={validateRegexp} /> );