Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 8a6b2f5

Browse files
aslilacaslilac
committed
uh huh
1 parent 0237854 commit 8a6b2f5

File tree

4 files changed

+120
-111
lines changed

4 files changed

+120
-111
lines changed

‎site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx

Lines changed: 104 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import {
4646
TriangleAlert,
4747
} from "lucide-react";
4848
import { type FC, useEffect, useId, useRef, useState } from "react";
49+
import { maskText } from "utils/text";
4950
import type { AutofillBuildParameter } from "utils/richParameters";
5051
import * as Yup from "yup";
5152

@@ -269,11 +270,6 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
269270
value !== undefined ? value : validValue(parameter.value),
270271
);
271272
const [showMaskedInput, setShowMaskedInput] = useState(false);
272-
273-
// Helper function to mask all characters with *
274-
const maskValue = (val: string): string => {
275-
return "\u2022".repeat(val.length);
276-
};
277273
const debouncedLocalValue = useDebouncedValue(localValue, 500);
278274
const onChangeEvent = useEffectEvent(onChange);
279275
// prevDebouncedValueRef is to prevent calling the onChangeEvent on the initial render
@@ -318,7 +314,7 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
318314
switch (parameter.form_type) {
319315
case "textarea": {
320316
const shouldMask = parameter.styling?.mask_input && !showMaskedInput;
321-
const displayValue = shouldMask ? maskValue(localValue) : localValue;
317+
const displayValue = shouldMask ? maskText(localValue) : localValue;
322318

323319
return (
324320
<div className="relative">
@@ -379,7 +375,7 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
379375
parameter.styling?.mask_input &&
380376
!showMaskedInput &&
381377
parameter.type !== "number";
382-
const displayValue = shouldMask ? maskValue(localValue) : localValue;
378+
const displayValue = shouldMask ? maskText(localValue) : localValue;
383379

384380
return (
385381
<div className="relative">
@@ -786,120 +782,119 @@ export const useValidationSchemaForDynamicParameters = (
786782
.of(
787783
Yup.object().shape({
788784
name: Yup.string().required(),
789-
value: Yup.string()
790-
.test("verify with template", (val, ctx) => {
791-
const name = ctx.parent.name;
792-
const parameter = parameters.find(
793-
(parameter) => parameter.name === name,
794-
);
795-
if (parameter) {
796-
switch (parameter.type) {
797-
case "number": {
798-
const minValidation = parameter.validations.find(
799-
(v) => v.validation_min !== null,
800-
);
801-
const maxValidation = parameter.validations.find(
802-
(v) => v.validation_max !== null,
803-
);
785+
value: Yup.string().test("verify with template", (val, ctx) => {
786+
const name = ctx.parent.name;
787+
const parameter = parameters.find(
788+
(parameter) => parameter.name === name,
789+
);
790+
if (parameter) {
791+
switch (parameter.type) {
792+
case "number": {
793+
const minValidation = parameter.validations.find(
794+
(v) => v.validation_min !== null,
795+
);
796+
const maxValidation = parameter.validations.find(
797+
(v) => v.validation_max !== null,
798+
);
799+
800+
if (
801+
minValidation &&
802+
minValidation.validation_min !== null &&
803+
!maxValidation &&
804+
Number(val) < minValidation.validation_min
805+
) {
806+
return ctx.createError({
807+
path: ctx.path,
808+
message:
809+
parameterError(parameter, val) ??
810+
`Value must be greater than ${minValidation.validation_min}.`,
811+
});
812+
}
804813

805-
if (
806-
minValidation &&
807-
minValidation.validation_min !== null &&
808-
!maxValidation &&
809-
Number(val) < minValidation.validation_min
810-
) {
811-
return ctx.createError({
812-
path: ctx.path,
813-
message:
814-
parameterError(parameter, val) ??
815-
`Value must be greater than ${minValidation.validation_min}.`,
816-
});
817-
}
814+
if (
815+
!minValidation &&
816+
maxValidation &&
817+
maxValidation.validation_max !== null &&
818+
Number(val) > maxValidation.validation_max
819+
) {
820+
return ctx.createError({
821+
path: ctx.path,
822+
message:
823+
parameterError(parameter, val) ??
824+
`Value must be less than ${maxValidation.validation_max}.`,
825+
});
826+
}
818827

819-
if (
820-
!minValidation &&
821-
maxValidation &&
822-
maxValidation.validation_max !== null &&
823-
Number(val) > maxValidation.validation_max
824-
) {
825-
return ctx.createError({
826-
path: ctx.path,
827-
message:
828-
parameterError(parameter, val) ??
829-
`Value must be less than ${maxValidation.validation_max}.`,
830-
});
831-
}
828+
if (
829+
minValidation &&
830+
minValidation.validation_min !== null &&
831+
maxValidation &&
832+
maxValidation.validation_max !== null &&
833+
(Number(val) < minValidation.validation_min ||
834+
Number(val) > maxValidation.validation_max)
835+
) {
836+
return ctx.createError({
837+
path: ctx.path,
838+
message:
839+
parameterError(parameter, val) ??
840+
`Value must be between ${minValidation.validation_min} and ${maxValidation.validation_max}.`,
841+
});
842+
}
832843

833-
if (
834-
minValidation &&
835-
minValidation.validation_min !== null &&
836-
maxValidation &&
837-
maxValidation.validation_max !== null &&
838-
(Number(val) < minValidation.validation_min ||
839-
Number(val) > maxValidation.validation_max)
840-
) {
841-
return ctx.createError({
842-
path: ctx.path,
843-
message:
844-
parameterError(parameter, val) ??
845-
`Value must be between ${minValidation.validation_min} and ${maxValidation.validation_max}.`,
846-
});
847-
}
844+
const monotonic = parameter.validations.find(
845+
(v) =>
846+
v.validation_monotonic !== null &&
847+
v.validation_monotonic !== "",
848+
);
848849

849-
const monotonic = parameter.validations.find(
850-
(v) =>
851-
v.validation_monotonic !== null &&
852-
v.validation_monotonic !== "",
850+
if (monotonic && lastBuildParameters) {
851+
const lastBuildParameter = lastBuildParameters.find(
852+
(last: { name: string }) => last.name === name,
853853
);
854-
855-
if (monotonic && lastBuildParameters) {
856-
const lastBuildParameter = lastBuildParameters.find(
857-
(last: { name: string }) => last.name === name,
858-
);
859-
if (lastBuildParameter) {
860-
switch (monotonic.validation_monotonic) {
861-
case "increasing":
862-
if (Number(lastBuildParameter.value) > Number(val)) {
863-
return ctx.createError({
864-
path: ctx.path,
865-
message: `Value must only ever increase (last value was ${lastBuildParameter.value})`,
866-
});
867-
}
868-
break;
869-
case "decreasing":
870-
if (Number(lastBuildParameter.value) < Number(val)) {
871-
return ctx.createError({
872-
path: ctx.path,
873-
message: `Value must only ever decrease (last value was ${lastBuildParameter.value})`,
874-
});
875-
}
876-
break;
877-
}
854+
if (lastBuildParameter) {
855+
switch (monotonic.validation_monotonic) {
856+
case "increasing":
857+
if (Number(lastBuildParameter.value) > Number(val)) {
858+
return ctx.createError({
859+
path: ctx.path,
860+
message: `Value must only ever increase (last value was ${lastBuildParameter.value})`,
861+
});
862+
}
863+
break;
864+
case "decreasing":
865+
if (Number(lastBuildParameter.value) < Number(val)) {
866+
return ctx.createError({
867+
path: ctx.path,
868+
message: `Value must only ever decrease (last value was ${lastBuildParameter.value})`,
869+
});
870+
}
871+
break;
878872
}
879873
}
880-
break;
881874
}
882-
case "string": {
883-
const regex = parameter.validations.find(
884-
(v) =>
885-
v.validation_regex !== null && v.validation_regex !== "",
886-
);
887-
if (!regex || !regex.validation_regex) {
888-
return true;
889-
}
875+
break;
876+
}
877+
case "string": {
878+
const regex = parameter.validations.find(
879+
(v) =>
880+
v.validation_regex !== null && v.validation_regex !== "",
881+
);
882+
if (!regex || !regex.validation_regex) {
883+
return true;
884+
}
890885

891-
if (val && !new RegExp(regex.validation_regex).test(val)) {
892-
return ctx.createError({
893-
path: ctx.path,
894-
message: parameterError(parameter, val),
895-
});
896-
}
897-
break;
886+
if (val && !new RegExp(regex.validation_regex).test(val)) {
887+
return ctx.createError({
888+
path: ctx.path,
889+
message: parameterError(parameter, val),
890+
});
898891
}
892+
break;
899893
}
900894
}
901-
return true;
902-
}),
895+
}
896+
return true;
897+
}),
903898
}),
904899
)
905900
.required();

‎site/src/pages/TaskPage/TaskPage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { Helmet } from "react-helmet-async";
1414
import { useQuery } from "react-query";
1515
import { useParams } from "react-router-dom";
1616
import { Link as RouterLink } from "react-router-dom";
17-
import { ellipsizeText } from "utils/ellipsizeText";
17+
import { ellipsizeText } from "utils/text";
1818
import { pageTitle } from "utils/page";
1919
import {
2020
ActiveTransition,

‎site/src/utils/ellipsizeText.test.ts renamed to ‎site/src/utils/text.test.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ellipsizeText } from "./ellipsizeText";
1+
import { ellipsizeText, maskText } from "./text";
22
import type { Nullable } from "./nullable";
33

44
describe("ellipsizeText", () => {
@@ -19,3 +19,9 @@ describe("ellipsizeText", () => {
1919
},
2020
);
2121
});
22+
23+
describe("maskText", () => {
24+
test("masks text", () => {
25+
expect(maskText("hello, computer!")).toBe("\u2022".repeat(16));
26+
});
27+
});

‎site/src/utils/ellipsizeText.ts renamed to ‎site/src/utils/text.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,11 @@ export const ellipsizeText = (
1212
? text
1313
: `${text.substr(0, maxLength - 3)}...`;
1414
};
15+
16+
/**
17+
* Returns a string of the same length, using the unicode "bullet" character as
18+
* a replacement for each character, like a password input would.
19+
*/
20+
export function maskText(val: string): string {
21+
return "\u2022".repeat(val.length);
22+
}

0 commit comments

Comments
 (0)