Add self-hosted CoPE model support to Zentropi integration

client/src/coop-ui/DateInput.tsx

@@ -71,24 +71,25 @@ const DateInput: React.FC<DateInputProps> = ({ value, onChange }) => {
 
   const initialDate = useRef<DateParts>(date);
 
-  const handleBlur =
-    (field: keyof DateParts) =>
-    (e: React.FocusEvent<HTMLInputElement>): void => {
-      if (!e.target.value) {
-        setDate(initialDate.current);
-        return;
-      }
+  const handleBlur = (
+    field: keyof DateParts,
+    e: React.FocusEvent<HTMLInputElement>,
+  ): void => {
+    if (!e.target.value) {
+      setDate(initialDate.current);
+      return;
+    }
 
-      const newValue = Number(e.target.value);
-      const isValid = validateDate(field, newValue);
+    const newValue = Number(e.target.value);
+    const isValid = validateDate(field, newValue);
 
-      if (!isValid) {
-        setDate(initialDate.current);
-      } else {
-        // If the new value is valid, update the initial value
-        initialDate.current = { ...date, [field]: newValue };
-      }
-    };
+    if (!isValid) {
+      setDate(initialDate.current);
+    } else {
+      // If the new value is valid, update the initial value
+      initialDate.current = { ...date, [field]: newValue };
+    }
+  };
 
   const handleKeyDown =
     (field: keyof DateParts) => (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -213,7 +214,7 @@ const DateInput: React.FC<DateInputProps> = ({ value, onChange }) => {
             e.target.select();
           }
         }}
-        onBlur={handleBlur('month')}
+        onBlur={(e) => handleBlur('month', e)}
         className="p-0 outline-none w-6 border-none text-center"
         placeholder="M"
       />
@@ -231,7 +232,7 @@ const DateInput: React.FC<DateInputProps> = ({ value, onChange }) => {
             e.target.select();
           }
         }}
-        onBlur={handleBlur('day')}
+        onBlur={(e) => handleBlur('day', e)}
         className="p-0 outline-none w-7 border-none text-center"
         placeholder="D"
       />
@@ -249,7 +250,7 @@ const DateInput: React.FC<DateInputProps> = ({ value, onChange }) => {
             e.target.select();
           }
         }}
-        onBlur={handleBlur('year')}
+        onBlur={(e) => handleBlur('year', e)}
         className="p-0 outline-none w-12 border-none text-center"
         placeholder="YYYY"
       />

client/src/models/signal.ts

@@ -1,42 +1,12 @@
 import {
   GQLIntegration,
   GQLScalarType,
-  GQLSignal,
   GQLSignalOutputType,
   GQLSignalType,
   GQLValueComparator,
 } from '../graphql/generated';
 import { assertUnreachable } from '../utils/misc';
 
-/**
- * Legacy-ish type for the core set of keys that signal keys that much of the
- * code currently assumes will be present on fetched signals.
- * @deprecated
- */
-export type CoreSignal = Pick<
-  GQLSignal,
-  | 'id'
-  | 'type'
-  | 'name'
-  | 'description'
-  | 'disabledInfo'
-  | 'shouldPromptForMatchingValues'
-  | 'outputType'
-  | 'eligibleSubcategories'
-  | 'eligibleInputs'
-  | 'subcategory'
-  | 'integration'
-  | 'integrationTitle'
-  | 'integrationLogoUrl'
-  | 'integrationLogoWithBackgroundUrl'
-  | 'pricingStructure'
-  | 'docsUrl'
-  | 'recommendedThresholds'
-  | 'supportedLanguages'
-  | 'args'
-  | 'allowedInAutomatedRules'
->;
-
 /** Signal type is string to support plugin signal types (e.g. RANDOM_SIGNAL_SELECTION). */
 export function receivesRegexInput(type: string) {
   return (

client/src/utils/time.ts

@@ -29,7 +29,7 @@ export function formatDate(date = new Date()): string {
 }
 
 function toDate(date: string | DateString | Date): Date {
-  return date instanceof Date ? date : new Date(date as string);
+  return date instanceof Date ? date : new Date(date);
 }
 
 export function parseDatetimeToReadableStringInUTC(
@@ -100,7 +100,7 @@ export function getDateRange(start: Date, end: Date, interval: 'HOUR' | 'DAY') {
   while (isBefore(currentDate, end)) {
     datesArray.push({
       ds: format(currentDate, formatStr),
-    } as { [key: string]: any });
+    });
     currentDate = advanceFn(currentDate, 1);
   }
 

client/src/utils/tree.ts

@@ -248,7 +248,7 @@ export function multilevelListFromFlatList<
 
   // Initialize map with all nodes
   nodeList.forEach((node) => {
-    map.set(node.id, { ...node } as T & { children?: T[] });
+    map.set(node.id, { ...node });
   });
 
   // Build the tree

client/src/webpages/dashboard/components/CoopInput.tsx

@@ -6,15 +6,22 @@ export default function CoopInput(props: {
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   disabled?: boolean;
   value?: string;
+  error?: boolean;
 }) {
-  const { placeholder, onChange, disabled } = props;
+  const { type, placeholder, onChange, disabled, value, error } = props;
   return (
     <input
-      className="block w-full px-3 py-2 ring-2 text-base border-gray-200 border-solid rounded ring-gray-200 placeholder:text-gray-500 focus:border-primary focus:ring-primary/20 disabled:opacity-50 disabled:pointer-events-none"
+      className={`block w-full px-3 py-2 ring-2 text-base border-solid rounded placeholder:text-gray-500 disabled:opacity-50 disabled:pointer-events-none ${
+        error
+          ? 'border-red-400 ring-red-400 focus:border-red-400 focus:ring-red-400/20'
+          : 'border-gray-200 ring-gray-200 focus:border-primary focus:ring-primary/20'
+      }`}
+      type={type}
       placeholder={placeholder}
       onChange={onChange}
       disabled={disabled}
-      value={props.value ?? ''}
+      aria-invalid={error}
+      value={value ?? ''}
     />
   );
 }