From 13ddf7e308118ac1292707bb5e0318da80eb5273 Mon Sep 17 00:00:00 2001 From: Danny Rorabaugh Date: Wed, 7 Aug 2024 15:10:05 -0400 Subject: [PATCH 1/4] [TreeView] Allow editing mid-id digits --- src/components/TreeView/TreeSearch.tsx | 20 +++++++++---------- .../TreeView/tests/TreeSearch.test.tsx | 20 ++++++++++--------- 2 files changed, 21 insertions(+), 19 deletions(-) diff --git a/src/components/TreeView/TreeSearch.tsx b/src/components/TreeView/TreeSearch.tsx index 76abe9fa51..4a81852070 100644 --- a/src/components/TreeView/TreeSearch.tsx +++ b/src/components/TreeView/TreeSearch.tsx @@ -59,17 +59,17 @@ export default function TreeSearch(props: TreeSearchProps): ReactElement { ); } -/** Automatically convert a string of form 123 to 1.2.3. */ +/** Adds periods to a string of digits. + * If string is digits with at most 1 period between each digit + * (e.g.: 1234, 12.34, 123.4, 1.23.4), + * then removes all periods (e.g.: 1234) + * and inserts a period between each digit (e.g.: 1.2.3.4). + * + * Note: doesn't act on strings with double/initial/final period (e.g.: .2.3.4, 1..3.4), + * because a user may be changing a digit (e.g.: 1.0.3.4 -> 1..3.4 -> 1.2.3.4). */ export function insertDecimalPoints(value: string): string { - // Test if input is strictly of the form: 1.2.3 or 123 - if (/^[.\d]+$/.test(value) && !value.endsWith(".")) { - // Automatically insert decimal points between two numbers. - value = value - .replace(/\./g, "") - .split("") - .map((char) => `${char}.`) - .join("") - .slice(0, -1); + if (/^\d(.?\d)*$/.test(value)) { + value = value.replace(/\./g, "").split("").join("."); } return value; diff --git a/src/components/TreeView/tests/TreeSearch.test.tsx b/src/components/TreeView/tests/TreeSearch.test.tsx index aabb4d167f..aa96982dc9 100644 --- a/src/components/TreeView/tests/TreeSearch.test.tsx +++ b/src/components/TreeView/tests/TreeSearch.test.tsx @@ -135,19 +135,21 @@ describe("TreeSearch", () => { }); describe("insertDecimalPoints", () => { + test.each(["a", "1a", "1", "1.", "1.0", "1.2.3.", "1..2", ".123"])( + "does not change", + (input) => { + expect(insertDecimalPoints(input)).toBe(input); + } + ); + test.each([ - ["a", "a"], - ["1a", "1a"], - ["1", "1"], - ["1.", "1."], - ["1.0", "1.0"], ["10", "1.0"], ["12", "1.2"], ["123", "1.2.3"], - ["1.2.3.", "1.2.3."], - ["..1", "1"], - ["1..2", "1.2"], - ])("inserts correctly", (input, output) => { + ["1.23", "1.2.3"], + ["12.3", "1.2.3"], + ["1.23.4", "1.2.3.4"], + ])("changes correctly", (input, output) => { expect(insertDecimalPoints(input)).toBe(output); }); }); From ea579d8806bb009ad5926d24a7f8c81c318cb403 Mon Sep 17 00:00:00 2001 From: Danny Rorabaugh Date: Thu, 8 Aug 2024 09:01:37 -0400 Subject: [PATCH 2/4] Fix regex --- src/components/TreeView/TreeSearch.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/TreeView/TreeSearch.tsx b/src/components/TreeView/TreeSearch.tsx index 4a81852070..4ae2c9bdad 100644 --- a/src/components/TreeView/TreeSearch.tsx +++ b/src/components/TreeView/TreeSearch.tsx @@ -51,7 +51,7 @@ export default function TreeSearch(props: TreeSearchProps): ReactElement { onKeyUp={handleOnKeyUp} margin="normal" autoComplete="off" - inputProps={{ "data-testid": testId }} + inputProps={{ "data-testid": testId, maxLength: 99 }} value={input} error={searchError} helperText={searchError ? t("treeView.domainNotFound") : undefined} @@ -68,7 +68,7 @@ export default function TreeSearch(props: TreeSearchProps): ReactElement { * Note: doesn't act on strings with double/initial/final period (e.g.: .2.3.4, 1..3.4), * because a user may be changing a digit (e.g.: 1.0.3.4 -> 1..3.4 -> 1.2.3.4). */ export function insertDecimalPoints(value: string): string { - if (/^\d(.?\d)*$/.test(value)) { + if (/^\d(\.?\d)*$/.test(value)) { value = value.replace(/\./g, "").split("").join("."); } From 84d06026f5ed5724d0a5b893532d6349d711aa03 Mon Sep 17 00:00:00 2001 From: Danny Rorabaugh Date: Thu, 8 Aug 2024 09:05:06 -0400 Subject: [PATCH 3/4] Add test case that would've failed before last commit --- src/components/TreeView/tests/TreeSearch.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TreeView/tests/TreeSearch.test.tsx b/src/components/TreeView/tests/TreeSearch.test.tsx index aa96982dc9..cd37dc30d1 100644 --- a/src/components/TreeView/tests/TreeSearch.test.tsx +++ b/src/components/TreeView/tests/TreeSearch.test.tsx @@ -135,7 +135,7 @@ describe("TreeSearch", () => { }); describe("insertDecimalPoints", () => { - test.each(["a", "1a", "1", "1.", "1.0", "1.2.3.", "1..2", ".123"])( + test.each(["a", "1a", "1", "1.", "1.0", "1-2", "1..2", "1.2.3.", ".123"])( "does not change", (input) => { expect(insertDecimalPoints(input)).toBe(input); From 3c1d55a58b22115bdf93b97d431dd1c4704a809b Mon Sep 17 00:00:00 2001 From: Danny Rorabaugh Date: Tue, 20 Aug 2024 15:31:57 -0400 Subject: [PATCH 4/4] Don't act on 1-digit strings --- src/components/TreeView/TreeSearch.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TreeView/TreeSearch.tsx b/src/components/TreeView/TreeSearch.tsx index 4ae2c9bdad..69faa9118e 100644 --- a/src/components/TreeView/TreeSearch.tsx +++ b/src/components/TreeView/TreeSearch.tsx @@ -68,7 +68,7 @@ export default function TreeSearch(props: TreeSearchProps): ReactElement { * Note: doesn't act on strings with double/initial/final period (e.g.: .2.3.4, 1..3.4), * because a user may be changing a digit (e.g.: 1.0.3.4 -> 1..3.4 -> 1.2.3.4). */ export function insertDecimalPoints(value: string): string { - if (/^\d(\.?\d)*$/.test(value)) { + if (/^\d(\.?\d)+$/.test(value)) { value = value.replace(/\./g, "").split("").join("."); }