fix: support test runs with alert or incident payload (#4496)

Co-authored-by: Tal <tal@keephq.dev>

Author: Kiryous

keep-ui/app/(keep)/workflows/workflow-run-with-alert-modal.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
-import { TextInput, Button, Text, Card } from "@tremor/react";
-import { TrashIcon } from "@heroicons/react/24/outline";
+import { TextInput, Button, Text } from "@tremor/react";
+import { PlusIcon, TrashIcon } from "@heroicons/react/24/outline";
 import Modal from "@/components/ui/Modal";
 
 interface StaticField {
@@ -85,8 +85,8 @@ export default function AlertTriggerModal({
   };
 
   const handleAddField = (e: React.FormEvent) => {
-    setDynamicFields([...dynamicFields, { key: "", value: "" }]);
     e.preventDefault();
+    setDynamicFields([...dynamicFields, { key: "", value: "" }]);
   };
 
   const handleSubmit = (e: React.FormEvent) => {
@@ -167,89 +167,88 @@ export default function AlertTriggerModal({
     <Modal isOpen={isOpen} onClose={onClose} title="Build Alert Payload">
       <form onSubmit={handleSubmit}>
         {Array.isArray(staticFields) && staticFields.length > 0 && (
-          <Card className="mb-4">
+          <>
             <Text className="mb-2">Fields Defined As Workflow Filters</Text>
             {staticFields.map((field, index) => (
               <div key={field.key} className="flex gap-2 mb-2">
                 <TextInput placeholder="Key" value={field.key} disabled />
                 <TextInput placeholder="Value" value={field.value} disabled />
               </div>
             ))}
-          </Card>
+          </>
         )}
 
-        <Card className="mb-4">
-          <Text className="mb-2">
-            Fields Needed for Workflow (used in the workflow)
-          </Text>
-          {Array.isArray(dependencies) &&
-            dependencies.map((dependencyName, index) => (
-              <div key={dependencyName} className="flex gap-2 mb-2">
-                <TextInput
-                  placeholder={dependencyName}
-                  value={dependencyName}
-                  disabled
-                />
-                <TextInput
-                  className={dependenciesErrors[index] ? "border-red-500" : ""}
-                  placeholder="value"
-                  value={dependencyValues[dependencyName] || ""}
-                  onChange={(e) =>
-                    handleDependencyChange(dependencyName, e.target.value)
-                  }
-                />
-              </div>
-            ))}
-        </Card>
-
-        <Card>
-          {dynamicFields.map((field, index) => (
-            <div
-              key={index}
-              className={`flex items-center gap-2 mb-2 ${
-                fieldErrors[index] ? "border-2 border-red-500 p-2" : ""
-              }`}
-            >
+        <Text className="mb-2">
+          These fields are needed for the workflow to run
+        </Text>
+        {Array.isArray(dependencies) &&
+          dependencies.map((dependencyName, index) => (
+            <div key={dependencyName} className="flex gap-2 mb-2">
               <TextInput
-                placeholder="Key"
-                value={field.key}
-                onChange={(e) =>
-                  handleFieldChange(index, "key", e.target.value)
-                }
+                placeholder={dependencyName}
+                value={dependencyName}
+                disabled
               />
               <TextInput
-                placeholder="Value"
-                value={field.value}
+                placeholder="value"
+                value={dependencyValues[dependencyName] || ""}
                 onChange={(e) =>
-                  handleFieldChange(index, "value", e.target.value)
+                  handleDependencyChange(dependencyName, e.target.value)
                 }
+                error={dependenciesErrors[index]}
               />
-              <button
-                onClick={() => handleDeleteField(index)}
-                className="flex items-center text-gray-500 hover:text-gray-700"
-              >
-                <TrashIcon className="h-5 w-5" aria-hidden="true" />
-              </button>
             </div>
           ))}
-          <div className="flex justify-center">
-            <Button color="orange" onClick={handleAddField}>
-              Add another field
-            </Button>
-          </div>
-        </Card>
 
-        <div className="mt-4 flex gap-2">
-          <Button color="orange" type="submit">
-            Run workflow
+        {dynamicFields.map((field, index) => (
+          <div
+            key={index}
+            className={`flex items-center gap-2 mb-2 ${
+              fieldErrors[index] ? "border-2 border-red-500 p-2" : ""
+            }`}
+          >
+            <TextInput
+              placeholder="Key"
+              value={field.key}
+              onChange={(e) => handleFieldChange(index, "key", e.target.value)}
+            />
+            <TextInput
+              placeholder="Value"
+              value={field.value}
+              onChange={(e) =>
+                handleFieldChange(index, "value", e.target.value)
+              }
+            />
+            <button
+              onClick={() => handleDeleteField(index)}
+              className="flex items-center text-gray-500 hover:text-gray-700"
+            >
+              <TrashIcon className="h-5 w-5" aria-hidden="true" />
+            </button>
+          </div>
+        ))}
+        <div className="flex justify-end">
+          <Button
+            variant="light"
+            icon={PlusIcon}
+            color="orange"
+            onClick={handleAddField}
+          >
+            Add another field
           </Button>
+        </div>
+
+        <div className="mt-8 flex justify-end gap-2">
           <Button
             onClick={onClose}
             variant="secondary"
             className="border border-orange-500 text-orange-500"
           >
             Cancel
           </Button>
+          <Button color="orange" type="submit">
+            Run workflow
+          </Button>
         </div>
       </form>
     </Modal>

keep-ui/components/ui/Modal.tsx

@@ -1,5 +1,7 @@
 import React from "react";
-import { DialogPanel, Dialog, Title, Text, Badge } from "@tremor/react";
+import { DialogPanel, Dialog, Text, Badge, Button } from "@tremor/react";
+import { XMarkIcon } from "@heroicons/react/24/outline";
+import { PageTitle } from "@/shared/ui/PageTitle";
 
 export default function Modal({
   children,
@@ -9,6 +11,7 @@ export default function Modal({
   beforeTitle,
   className = "",
   beta = false,
+  description,
 }: {
   children: React.ReactNode;
   isOpen: boolean;
@@ -17,21 +20,39 @@ export default function Modal({
   title?: string;
   className?: string;
   beta?: boolean;
+  description?: string;
 }) {
   return (
     <Dialog open={isOpen} onClose={onClose}>
       <DialogPanel
         className={`border-2 border-orange-300 rounded-lg ring-0 ${className}`}
       >
         {title && (
-          <div className="flex flex-col">
+          <header className="flex flex-col mb-4">
             {beforeTitle && (
               <Text className="text-sm text-gray-500">{beforeTitle}</Text>
             )}
-            <Title>
-              {title} {beta && <Badge color="orange">Beta</Badge>}
-            </Title>
-          </div>
+            <div className="flex flex-row items-center justify-between gap-2">
+              <PageTitle>
+                {title}
+                {beta && <Badge color="orange">Beta</Badge>}
+              </PageTitle>
+              <Button
+                variant="light"
+                color="gray"
+                size="xl"
+                className="aspect-square p-1 hover:bg-gray-100 hover:dark:bg-gray-400/10 rounded"
+                icon={XMarkIcon}
+                onClick={(e) => {
+                  e.preventDefault();
+                  onClose();
+                }}
+              />
+            </div>
+            {description && (
+              <Text className="text-sm text-gray-500">{description}</Text>
+            )}
+          </header>
         )}
         {children}
       </DialogPanel>

keep-ui/components/ui/TextInput.tsx

@@ -13,7 +13,10 @@ const TextInput = forwardRef(
     return (
       <TremorTextInput
         ref={ref}
-        className={cn("[&>input]:placeholder:text-gray-400", className)}
+        className={cn(
+          "[&>input:not([disabled])]:placeholder:text-gray-400 [&>input:disabled]:text-gray-500",
+          className
+        )}
         {...props}
       />
     );

keep-ui/entities/workflow-executions/model/useWorkflowExecutionsRevalidation.ts

@@ -13,8 +13,17 @@ export const useWorkflowExecutionsRevalidation = () => {
     revalidateLists();
   };
 
+  const revalidateForWorkflowExecution = (
+    workflowId: string | null,
+    workflowExecutionId: string
+  ) => {
+    mutate(workflowExecutionsKeys.detail(workflowId, workflowExecutionId));
+    revalidateLists();
+  };
+
   return {
     revalidateLists,
     revalidateForWorkflow,
+    revalidateForWorkflowExecution,
   };
 };

keep-ui/entities/workflow-executions/model/workflowExecutionsKeys.ts

@@ -24,8 +24,10 @@ export const workflowExecutionsKeys = {
       workflowExecutionId,
     ].join("::"),
   getListMatcher: () => (key: any) =>
+    typeof key === "string" &&
     key.startsWith([workflowExecutionsKeys.all, "list"].join("::")),
   getDetailMatcher: (workflowId: string) => (key: any) =>
+    typeof key === "string" &&
     key.startsWith(
       [workflowExecutionsKeys.all, "detail", workflowId].join("::")
     ),