feat: experimental: Interactivity for queries (#1025)

This is an experimental feature or adding something very similar to slack's Block kit, to queries to allow for a degree of interactivity and sending of signals. It should allow users to specify an arbitrary markdown and response and also buttons with some signals to the workflows.

Author: davidporter-id-au

src/components/blocks/blocks.styles.ts

@@ -0,0 +1,29 @@
+import { styled as createStyled } from 'baseui';
+
+export const styled = {
+  ViewContainer: createStyled('div', ({ $theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: $theme.sizing.scale600,
+  })),
+
+  SectionContainer: createStyled('div', () => ({
+    display: 'block',
+    wordBreak: 'break-word',
+    overflow: 'hidden',
+  })),
+
+  DividerContainer: createStyled('hr', ({ $theme }) => ({
+    border: 'none',
+    borderTop: `2px solid ${$theme.colors.backgroundTertiary}`,
+    margin: `${$theme.sizing.scale400} 0`,
+    width: '100%',
+  })),
+  ActionsContainer: createStyled('div', ({ $theme }) => ({
+    display: 'flex',
+    flexDirection: 'row',
+    gap: $theme.sizing.scale400,
+    flexWrap: 'wrap',
+    alignItems: 'center',
+  })),
+};

src/components/blocks/blocks.tsx

@@ -0,0 +1,163 @@
+'use client';
+import React, { useState } from 'react';
+
+import { Button } from 'baseui/button';
+import { useSnackbar } from 'baseui/snackbar';
+
+import Markdown from '@/components/markdown/markdown';
+import PrettyJson from '@/components/pretty-json/pretty-json';
+import losslessJsonStringify from '@/utils/lossless-json-stringify';
+import request from '@/utils/request';
+
+import { styled } from './blocks.styles';
+import {
+  type Props,
+  type Block,
+  type SectionBlock,
+  type ActionsBlock,
+  type ButtonElement,
+} from './blocks.types';
+
+export default function Blocks({
+  blocks,
+  domain,
+  cluster,
+  workflowId,
+  runId,
+}: Props) {
+  const [loadingButtons, setLoadingButtons] = useState<Set<string>>(new Set());
+  const { enqueue } = useSnackbar();
+
+  const handleButtonClick = async (button: ButtonElement, index: number) => {
+    // Only handle signal actions
+    if (button.action.type !== 'signal') {
+      enqueue({
+        message: `Button action type '${button.action.type}' is not supported. Only 'signal' actions are currently handled.`,
+        actionMessage: 'OK',
+      });
+      return;
+    }
+
+    const buttonKey = `${button.action.signal_name}-${index}`;
+
+    if (loadingButtons.has(buttonKey)) {
+      return; // Prevent double clicks
+    }
+
+    setLoadingButtons((prev) => new Set(prev).add(buttonKey));
+
+    try {
+      const targetWorkflowId = button.action.workflow_id || workflowId;
+      const targetRunId = button.action.run_id || runId;
+
+      const signalInput = button.action.signal_value
+        ? losslessJsonStringify(button.action.signal_value)
+        : undefined;
+
+      const response = await request(
+        `/api/domains/${encodeURIComponent(domain)}/${encodeURIComponent(cluster)}/workflows/${encodeURIComponent(targetWorkflowId)}/${encodeURIComponent(targetRunId)}/signal`,
+        {
+          method: 'POST',
+          body: JSON.stringify({
+            signalName: button.action.signal_name,
+            signalInput,
+          }),
+        }
+      );
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        enqueue({
+          message: errorData.message || 'Failed to signal workflow',
+          actionMessage: 'OK',
+        });
+        return;
+      }
+
+      // Optionally show success feedback here
+    } catch (error: any) {
+      enqueue({
+        message: error.message || 'Failed to signal workflow',
+        actionMessage: 'Dismiss',
+      });
+    } finally {
+      setLoadingButtons((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(buttonKey);
+        return newSet;
+      });
+    }
+  };
+
+  const renderSection = (section: SectionBlock) => {
+    const content = section.componentOptions.text;
+    if (section.format === 'text/markdown') {
+      return (
+        <styled.SectionContainer>
+          <Markdown markdown={content} />
+        </styled.SectionContainer>
+      );
+    }
+
+    // Fallback to JSON rendering for other formats
+    try {
+      const jsonContent = JSON.parse(content);
+      return (
+        <styled.SectionContainer>
+          <PrettyJson json={jsonContent} />
+        </styled.SectionContainer>
+      );
+    } catch {
+      // If it's not valid JSON, render as plain text
+      return (
+        <styled.SectionContainer>
+          <pre>{content}</pre>
+        </styled.SectionContainer>
+      );
+    }
+  };
+
+  const renderActions = (actions: ActionsBlock) => {
+    return (
+      <styled.ActionsContainer>
+        {actions.elements.map((element, index) => {
+          if (element.type === 'button') {
+            const buttonKey = `${element.action.type}-${element.action.signal_name}-${index}`;
+            const isLoading = loadingButtons.has(buttonKey);
+
+            return (
+              <Button
+                key={buttonKey}
+                disabled={isLoading}
+                onClick={() => handleButtonClick(element, index)}
+                isLoading={isLoading}
+              >
+                {element.componentOptions.text}
+              </Button>
+            );
+          }
+          return null;
+        })}
+      </styled.ActionsContainer>
+    );
+  };
+
+  const renderBlock = (block: Block, index: number) => {
+    switch (block.type) {
+      case 'section':
+        return <div key={`section-${index}`}>{renderSection(block)}</div>;
+      case 'divider':
+        return <styled.DividerContainer key={`divider-${index}`} />;
+      case 'actions':
+        return <div key={`actions-${index}`}>{renderActions(block)}</div>;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <styled.ViewContainer>
+      {blocks.map((block, index) => renderBlock(block, index))}
+    </styled.ViewContainer>
+  );
+}

src/components/blocks/blocks.types.tsx

@@ -0,0 +1,41 @@
+export type Block = SectionBlock | DividerBlock | ActionsBlock;
+
+export type SectionBlock = {
+  type: 'section';
+  format: string;
+  componentOptions: {
+    text: string;
+  };
+};
+
+export type DividerBlock = {
+  type: 'divider';
+};
+
+export type ActionsBlock = {
+  type: 'actions';
+  elements: ButtonElement[];
+};
+
+export type ButtonElement = {
+  type: 'button';
+  componentOptions: {
+    type: string;
+    text: string;
+  };
+  action: {
+    type: 'signal';
+    signal_name: string;
+    signal_value?: Record<string, any>;
+    workflow_id?: string;
+    run_id?: string;
+  };
+};
+
+export type Props = {
+  blocks: Block[];
+  domain: string;
+  cluster: string;
+  workflowId: string;
+  runId: string;
+};

src/views/workflow-queries/__tests__/workflow-queries.test.tsx

@@ -20,10 +20,14 @@ jest.mock('../workflow-queries-tile/workflow-queries-tile', () =>
 );
 
 jest.mock('../workflow-queries-result/workflow-queries-result', () =>
-  jest.fn(({ data }) => (
+  jest.fn(({ data, domain, cluster, workflowId, runId }) => (
     <div>
       <div>Mock JSON</div>
       <div>{JSON.stringify(data)}</div>
+      <div>
+        Domain: {domain}, Cluster: {cluster}, WorkflowId: {workflowId}, RunId:{' '}
+        {runId}
+      </div>
     </div>
   ))
 );

src/views/workflow-queries/workflow-queries-result/__tests__/workflow-queries-result-json.test.tsx

@@ -26,6 +26,15 @@ jest.mock('@/components/pretty-json/pretty-json', () =>
   ))
 );
 
+jest.mock('@/components/blocks/blocks', () =>
+  jest.fn(({ blocks, domain, cluster, workflowId, runId }) => (
+    <div>
+      Blocks Mock: {domain}/{cluster}/{workflowId}/{runId} -{' '}
+      {JSON.stringify(blocks)}
+    </div>
+  ))
+);
+
 describe(WorkflowQueriesResult.name, () => {
   it('renders json when the content type is json', () => {
     setup({
@@ -72,6 +81,30 @@ describe(WorkflowQueriesResult.name, () => {
       screen.getByText('Markdown Mock: test-markdown')
     ).toBeInTheDocument();
   });
+
+  it('renders blocks when the content type is blocks', () => {
+    setup({
+      content: {
+        contentType: 'blocks',
+        content: [
+          {
+            type: 'section' as const,
+            format: 'text/markdown',
+            componentOptions: {
+              text: '# Test',
+            },
+          },
+        ],
+        isError: false,
+      },
+    });
+
+    expect(
+      screen.getByText(
+        /Blocks Mock: test-domain\/test-cluster\/test-workflow-id\/test-run-id/
+      )
+    ).toBeInTheDocument();
+  });
 });
 
 function setup({
@@ -90,5 +123,15 @@ function setup({
   content?: QueryJsonContent;
 }) {
   (getQueryResultContent as jest.Mock).mockImplementation(() => content);
-  render(<WorkflowQueriesResult data={data} error={error} loading={loading} />);
+  render(
+    <WorkflowQueriesResult
+      data={data}
+      error={error}
+      loading={loading}
+      domain="test-domain"
+      cluster="test-cluster"
+      workflowId="test-workflow-id"
+      runId="test-run-id"
+    />
+  );
 }