feat: Add support for external variables (#102)

* bug: filter out variables during manual step

and add dictionaries to types

* feat: add support for external variables when running a playbook

* refactor: remove the suspense card in favour of spinner

it was quite annoying that nothing would be accessible if soarca was not reachabble. Also the skeleton cards were quite ugly, I changed it to a simple spinner.

Author: Paul2803k

mock-playbooks/block-ad-user.json

@@ -0,0 +1,69 @@
+{
+  "type": "playbook",
+  "spec_version": "cacao-2.0",
+  "id": "playbook--4e286394-ff8f-487f-84dd-f7ccf1fa59de",
+  "name": "Block AD user",
+  "description": "Blocks AD user by providing the AD user name",
+  "created_by": "identity--aaacfc1a-fa46-4c1c-85dd-2a0823ce3943",
+  "created": "2024-09-04T08:19:39.424Z",
+  "modified": "2024-09-04T08:22:25.712Z",
+  "revoked": false,
+  "playbook_variables": {
+    "__user__": {
+      "type": "string",
+      "constant": false,
+      "external": true
+    }
+  },
+  "workflow_start": "start--4270ba65-31c3-4041-9fa0-17241122bb9f",
+  "workflow": {
+    "start--4270ba65-31c3-4041-9fa0-17241122bb9f": {
+      "on_completion": "action--0a6fbf98-4e75-45fd-9948-8c62908521db",
+      "type": "start"
+    },
+    "action--0a6fbf98-4e75-45fd-9948-8c62908521db": {
+      "name": "Disable account",
+      "description": "Disable windows account in AD",
+      "on_completion": "end--bfbcfc10-1926-4409-8ea2-bfd1814365b3",
+      "type": "action",
+      "commands": [
+        {
+          "type": "powershell",
+          "description": "Block user given to the playbook",
+          "command": "Disable-ADAccount -Identity __user__:value"
+        }
+      ],
+      "agent": "soarca--49cde8bd-cc50-4d1a-b60c-8d49a785f4b9",
+      "targets": ["net-address--78a788f6-c2b8-4c46-9648-c2cb933c63b2"]
+    },
+    "end--bfbcfc10-1926-4409-8ea2-bfd1814365b3": {
+      "type": "end"
+    }
+  },
+  "authentication_info_definitions": {
+    "authentication-info--9a2d2fd6-aa6d-4d2e-ad2a-f6f84d544dbc": {
+      "type": "user-auth",
+      "name": "Domain admin",
+      "username": "admin.project",
+      "password": "censored",
+      "kms": false
+    }
+  },
+  "agent_definitions": {
+    "soarca--49cde8bd-cc50-4d1a-b60c-8d49a785f4b9": {
+      "type": "soarca",
+      "name": "soarca-powershell"
+    }
+  },
+  "target_definitions": {
+    "net-address--78a788f6-c2b8-4c46-9648-c2cb933c63b2": {
+      "type": "net-address",
+      "name": "Windows AD DS server",
+      "address": {
+        "ipv4": ["192.168.1.121"]
+      },
+      "port": "5985",
+      "authentication_info": "authentication-info--9a2d2fd6-aa6d-4d2e-ad2a-f6f84d544dbc"
+    }
+  }
+}

src/api/manual.ts

@@ -1,9 +1,16 @@
-import { Execution, ManualOutArgsUpdatePayload } from "@/types";
-import { HttpMutationMethod, mutationToApi } from "./utils";
+import {
+  Execution,
+  InteractionCommandData,
+  ManualOutArgsUpdatePayload,
+} from "@/types";
+import { fetchFromApi, HttpMutationMethod, mutationToApi } from "./utils";
 
 export const postStepActionResult = (data: ManualOutArgsUpdatePayload) =>
   mutationToApi<Execution>(
     HttpMutationMethod.POST,
     `/api/manual/continue`,
     data,
   );
+
+export const getStepManualData = (executionId: string, stepId: string) =>
+  fetchFromApi<InteractionCommandData>(`/api/manual/${executionId}/${stepId}`);

src/api/trigger.ts

@@ -1,10 +1,13 @@
-import { Execution } from "@/types";
+import { Execution, Variables } from "@/types";
 import { HttpMutationMethod, mutationToApi } from "./utils";
 
-export const triggerPlaybookById = (playbookId: string) => {
+export const triggerPlaybookById = (
+  playbookId: string,
+  variables?: Variables,
+) => {
   return mutationToApi<Execution>(
     HttpMutationMethod.POST,
     `/api/trigger/playbook/${playbookId}`,
-    {},
+    variables ?? {},
   );
 };

src/api/utils.ts

@@ -77,8 +77,8 @@ export async function deleteToApi(url: string): Promise<void> {
  * @example
  * const errorResponse = apiErrorToErrorResponse(error);
  */
-export const getErrorFromApiResponse = (error: Error): ErrorResponse => {
-  if (error && error instanceof Error) {
+export const getErrorFromApiResponse = (error: unknown): ErrorResponse => {
+  if (error instanceof Error) {
     try {
       return JSON.parse(error.message) as ErrorResponse;
     } catch {
@@ -90,14 +90,14 @@ export const getErrorFromApiResponse = (error: Error): ErrorResponse => {
 
 /**
  * Formats an error for display in a toast notification.
- * @param error - The Error object to format
+ * @param error - The error to format (any value; non-Error inputs use the default message)
  * @param defaultMessage - The default message to use if the error does not have a specific message
  * @returns Formatted error message string
  * @example
  * const message = formatErrorForToast(error, "An unexpected error occurred.");
  */
 export const formatErrorForToast = (
-  error: Error,
+  error: unknown,
   defaultMessage: string,
 ): string => {
   const parsed = getErrorFromApiResponse(error);

src/components/Containers.tsx

@@ -34,3 +34,10 @@ export const PageContainer = styled.div<PageContainerProps>`
 
   padding: 0;
 `;
+
+export const CenteredCardContent = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 12rem;
+`;

src/components/CopyButton.tsx

@@ -2,6 +2,7 @@ import { Copy } from "lucide-react";
 import React from "react";
 import toast from "react-hot-toast";
 
+import { formatErrorForToast } from "@/api/utils";
 import { Button } from "./Button";
 import Icon from "./Icon";
 import { ThemeSize } from "./utils";
@@ -23,8 +24,6 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
   disabled = false,
   ...rest
 }) => {
-
-
   const handleClick = async (e: React.MouseEvent) => {
     e.stopPropagation();
     if (disabled || !$text) return;
@@ -33,8 +32,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
       await navigator.clipboard.writeText($text);
       toast.success("Copied to clipboard");
     } catch (err) {
-      console.error("Copy failed", err);
-      toast.error("Failed to copy to clipboard");
+      toast.error(formatErrorForToast(err, "Failed to copy to clipboard"));
     }
   };
 

src/components/Form.tsx

@@ -18,7 +18,7 @@ export const Input = styled.input`
 
   padding: ${({ theme }) => theme.spacing.md} ${({ theme }) => theme.spacing.md};
 
-  font: ${({ theme }) => theme.typography.caption.font};
+  font: ${({ theme }) => theme.typography.body.font};
   color: ${({ theme }) => theme.colors.text.primary};
   background: ${({ theme }) => theme.colors.background.primary};
 
@@ -53,16 +53,24 @@ export const Input = styled.input`
 const StyledSelect = styled.select`
   width: 100%;
   box-sizing: border-box;
+  appearance: none;
+  -webkit-appearance: none;
 
   border: 1px solid ${({ theme }) => theme.colors.border.medium};
   border-radius: ${({ theme }) => theme.radius.md};
 
-  padding: ${({ theme }) => `${theme.spacing.sm} ${theme.spacing.md}`};
+  padding: ${({ theme }) =>
+    `${theme.spacing.md} ${theme.spacing["2xl"]} ${theme.spacing.md} ${theme.spacing.md}`};
 
   font: ${({ theme }) => theme.typography.body.font};
   color: ${({ theme }) => theme.colors.text.primary};
-  background: ${({ theme }) => theme.colors.background.primary};
-  line-height: 1.5;
+  background-color: ${({ theme }) => theme.colors.background.primary};
+  background-image: ${({ theme }) => {
+    const color = theme.colors.text.tertiary.replace("#", "%23");
+    return `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='${color}' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C%2Fsvg%3E")`;
+  }};
+  background-repeat: no-repeat;
+  background-position: right ${({ theme }) => theme.spacing.md} center;
 
   transition: border-color ${({ theme }) => theme.transitions.base};
 
@@ -80,7 +88,7 @@ const StyledSelect = styled.select`
   &:disabled {
     opacity: 0.5;
     cursor: not-allowed;
-    background: ${({ theme }) => theme.colors.background.secondary};
+    background-color: ${({ theme }) => theme.colors.background.secondary};
   }
 
   & > option {

src/components/cards/SuspenseCard.tsx

@@ -1,3 +1,2 @@
 export * from "./Card";
 export * from "./ExpandableCard";
-export * from "./SuspenseCard";