|
1 |
| -import type { Parameter, ParameterOption } from "api/typesParameter"; |
| 1 | +import type { WorkspaceBuildParameter } from "api/typesGenerated"; |
| 2 | +import type { |
| 3 | + Parameter, |
| 4 | + ParameterOption, |
| 5 | + ParameterValidation, |
| 6 | +} from "api/typesParameter"; |
2 | 7 | import { Badge } from "components/Badge/Badge";
|
3 | 8 | import { Checkbox } from "components/Checkbox/Checkbox";
|
4 | 9 | import { ExternalImage } from "components/ExternalImage/ExternalImage";
|
@@ -26,6 +31,7 @@ import {
|
26 | 31 | } from "components/Tooltip/Tooltip";
|
27 | 32 | import { Info, Settings, TriangleAlert } from "lucide-react";
|
28 | 33 | import { type FC, useId } from "react";
|
| 34 | +import * as Yup from "yup"; |
29 | 35 |
|
30 | 36 | export interface DynamicParameterProps {
|
31 | 37 | parameter: Parameter;
|
@@ -324,7 +330,9 @@ const OptionDisplay: FC<OptionDisplayProps> = ({ option }) => {
|
324 | 330 | <TooltipTrigger asChild>
|
325 | 331 | <Info className="w-3.5 h-3.5 text-content-secondary" />
|
326 | 332 | </TooltipTrigger>
|
327 |
| - <TooltipContent>{option.description}</TooltipContent> |
| 333 | + <TooltipContent side="right" sideOffset={10}> |
| 334 | + {option.description} |
| 335 | + </TooltipContent> |
328 | 336 | </Tooltip>
|
329 | 337 | </TooltipProvider>
|
330 | 338 | )}
|
@@ -357,3 +365,167 @@ const ParameterDiagnostics: FC<ParameterDiagnosticsProps> = ({
|
357 | 365 | </div>
|
358 | 366 | );
|
359 | 367 | };
|
| 368 | + |
| 369 | +export const useValidationSchemaForDynamicParameters = ( |
| 370 | + parameters?: Parameter[], |
| 371 | + lastBuildParameters?: WorkspaceBuildParameter[], |
| 372 | +): Yup.AnySchema => { |
| 373 | + if (!parameters) { |
| 374 | + return Yup.object(); |
| 375 | + } |
| 376 | + |
| 377 | + return Yup.array() |
| 378 | + .of( |
| 379 | + Yup.object().shape({ |
| 380 | + name: Yup.string().required(), |
| 381 | + value: Yup.string() |
| 382 | + .test("verify with template", (val, ctx) => { |
| 383 | + const name = ctx.parent.name; |
| 384 | + const parameter = parameters.find( |
| 385 | + (parameter) => parameter.name === name, |
| 386 | + ); |
| 387 | + if (parameter) { |
| 388 | + switch (parameter.type) { |
| 389 | + case "number": { |
| 390 | + const minValidation = parameter.validations.find( |
| 391 | + (v) => v.validation_min !== null, |
| 392 | + ); |
| 393 | + const maxValidation = parameter.validations.find( |
| 394 | + (v) => v.validation_max !== null, |
| 395 | + ); |
| 396 | + |
| 397 | + if ( |
| 398 | + minValidation?.validation_min && |
| 399 | + !maxValidation && |
| 400 | + Number(val) < minValidation.validation_min |
| 401 | + ) { |
| 402 | + return ctx.createError({ |
| 403 | + path: ctx.path, |
| 404 | + message: |
| 405 | + parameterError(parameter, val) ?? |
| 406 | + `Value must be greater than ${minValidation.validation_min}.`, |
| 407 | + }); |
| 408 | + } |
| 409 | + |
| 410 | + if ( |
| 411 | + !minValidation && |
| 412 | + maxValidation?.validation_max && |
| 413 | + Number(val) > maxValidation.validation_max |
| 414 | + ) { |
| 415 | + return ctx.createError({ |
| 416 | + path: ctx.path, |
| 417 | + message: |
| 418 | + parameterError(parameter, val) ?? |
| 419 | + `Value must be less than ${maxValidation.validation_max}.`, |
| 420 | + }); |
| 421 | + } |
| 422 | + |
| 423 | + if ( |
| 424 | + minValidation?.validation_min && |
| 425 | + maxValidation?.validation_max && |
| 426 | + (Number(val) < minValidation.validation_min || |
| 427 | + Number(val) > maxValidation.validation_max) |
| 428 | + ) { |
| 429 | + return ctx.createError({ |
| 430 | + path: ctx.path, |
| 431 | + message: |
| 432 | + parameterError(parameter, val) ?? |
| 433 | + `Value must be between ${minValidation.validation_min} and ${maxValidation.validation_max}.`, |
| 434 | + }); |
| 435 | + } |
| 436 | + |
| 437 | + const monotonicValidation = parameter.validations.find( |
| 438 | + (v) => v.validation_monotonic !== null, |
| 439 | + ); |
| 440 | + if ( |
| 441 | + monotonicValidation?.validation_monotonic && |
| 442 | + lastBuildParameters |
| 443 | + ) { |
| 444 | + const lastBuildParameter = lastBuildParameters.find( |
| 445 | + (last: { name: string }) => last.name === name, |
| 446 | + ); |
| 447 | + if (lastBuildParameter) { |
| 448 | + switch (monotonicValidation.validation_monotonic) { |
| 449 | + case "increasing": |
| 450 | + if (Number(lastBuildParameter.value) > Number(val)) { |
| 451 | + return ctx.createError({ |
| 452 | + path: ctx.path, |
| 453 | + message: `Value must only ever increase (last value was ${lastBuildParameter.value})`, |
| 454 | + }); |
| 455 | + } |
| 456 | + break; |
| 457 | + case "decreasing": |
| 458 | + if (Number(lastBuildParameter.value) < Number(val)) { |
| 459 | + return ctx.createError({ |
| 460 | + path: ctx.path, |
| 461 | + message: `Value must only ever decrease (last value was ${lastBuildParameter.value})`, |
| 462 | + }); |
| 463 | + } |
| 464 | + break; |
| 465 | + } |
| 466 | + } |
| 467 | + } |
| 468 | + break; |
| 469 | + } |
| 470 | + case "string": { |
| 471 | + const regexValidation = parameter.validations.find( |
| 472 | + (v) => v.validation_regex !== null, |
| 473 | + ); |
| 474 | + if (!regexValidation?.validation_regex) { |
| 475 | + return true; |
| 476 | + } |
| 477 | + |
| 478 | + if ( |
| 479 | + val && |
| 480 | + !new RegExp(regexValidation.validation_regex).test(val) |
| 481 | + ) { |
| 482 | + return ctx.createError({ |
| 483 | + path: ctx.path, |
| 484 | + message: parameterError(parameter, val), |
| 485 | + }); |
| 486 | + } |
| 487 | + break; |
| 488 | + } |
| 489 | + } |
| 490 | + } |
| 491 | + return true; |
| 492 | + }), |
| 493 | + }), |
| 494 | + ) |
| 495 | + .required(); |
| 496 | +}; |
| 497 | + |
| 498 | +const parameterError = ( |
| 499 | + parameter: Parameter, |
| 500 | + value?: string, |
| 501 | +): string | undefined => { |
| 502 | + const validation_error = parameter.validations.find( |
| 503 | + (v) => v.validation_error !== null, |
| 504 | + ); |
| 505 | + const minValidation = parameter.validations.find( |
| 506 | + (v) => v.validation_min !== null, |
| 507 | + ); |
| 508 | + const maxValidation = parameter.validations.find( |
| 509 | + (v) => v.validation_max !== null, |
| 510 | + ); |
| 511 | + |
| 512 | + if (!validation_error || !value) { |
| 513 | + return; |
| 514 | + } |
| 515 | + |
| 516 | + const r = new Map<string, string>([ |
| 517 | + [ |
| 518 | + "{min}", |
| 519 | + minValidation ? (minValidation.validation_min?.toString() ?? "") : "", |
| 520 | + ], |
| 521 | + [ |
| 522 | + "{max}", |
| 523 | + maxValidation ? (maxValidation.validation_max?.toString() ?? "") : "", |
| 524 | + ], |
| 525 | + ["{value}", value], |
| 526 | + ]); |
| 527 | + return validation_error.validation_error.replace( |
| 528 | + /{min}|{max}|{value}/g, |
| 529 | + (match) => r.get(match) || "", |
| 530 | + ); |
| 531 | +}; |
0 commit comments