DM-48923: Provide Times Square support for date and date-time parameters

.changeset/seven-buckets-brake.md

@@ -0,0 +1,5 @@
+---
+'squareone': patch
+---
+
+Times Square now supports date and date-time parameter types.

apps/squareone/package.json

@@ -46,6 +46,7 @@
     "@microsoft/fetch-event-source": "^2.0.1",
     "@sentry/nextjs": "^8",
     "ajv": "^8.11.0",
+    "ajv-formats": "^3.0.1",
     "date-fns": "^3.6.0",
     "formik": "^2.2.9",
     "js-yaml": "^4.1.0",

apps/squareone/src/components/TimesSquareParameters/ParameterInput.js

@@ -7,14 +7,15 @@ export default function ParameterInput({
   touched,
   errors,
 }) {
+  const errorMessage = computeErrorMessage(errors, paramSchema);
   return (
     <>
       <label htmlFor={`${paramName}`}>
         <ParameterName>{paramName}</ParameterName>
         {children}
-        {errors && touched && (
+        {errorMessage && (
           <ErrorMessage id={`tsparam-${paramName}-error`} type="polite">
-            {errors}
+            {errorMessage}
           </ErrorMessage>
         )}
         <Description id={`tsparam-${paramName}-description`}>
@@ -25,6 +26,21 @@ export default function ParameterInput({
   );
 }
 
+function computeErrorMessage(errors, paramSchema) {
+  if (errors) {
+    if (paramSchema.type === 'string' && paramSchema.format === 'date') {
+      return 'Expecting YYYY-MM-DD';
+    } else if (
+      paramSchema.type === 'string' &&
+      paramSchema.format === 'date-time'
+    ) {
+      return 'Expecting YYYY-MM-DDTHH:MM:SS-HH:MM';
+    }
+    return errors;
+  }
+  return null;
+}
+
 const ParameterName = styled.p`
   margin-bottom: 0.2em;
   font-weight: regular;

apps/squareone/src/components/TimesSquareParameters/TimesSquareParameters.js

@@ -3,6 +3,7 @@ import { useRouter } from 'next/router';
 import styled from 'styled-components';
 import { Formik, Field } from 'formik';
 import Ajv from 'ajv';
+import addFormats from 'ajv-formats';
 
 import Button, { RedGhostButton } from '../Button';
 import StringInput from './StringInput';
@@ -40,6 +41,7 @@ export default function TimesSquareParameters({}) {
   const { parameters } = useTimesSquarePage();
 
   const ajv = new Ajv({ coerceTypes: true });
+  addFormats(ajv);
 
   // Merge userParameters with defaults
   const initialValues = {};