Feature/adding query md experimental support

package.json

@@ -55,6 +55,7 @@
     "react-icons": "^5.1.0",
     "react-intersection-observer": "^9.8.1",
     "react-json-view-lite": "^1.4.0",
+    "react-markdown": "^10.1.0",
     "react-virtuoso": "^4.10.4",
     "react-visjs-timeline": "^1.6.0",
     "server-only": "^0.0.1",

src/components/markdown/md.styles.ts

@@ -0,0 +1,27 @@
+import { styled as createStyled } from 'baseui';
+
+export const styled = {
+  ViewContainer: createStyled('div', ({ $theme }) => ({
+    flex: '1 0 150px',
+    alignSelf: 'stretch',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    padding: '30px',
+    backgroundColor: $theme.colors.backgroundSecondary,
+    borderRadius: $theme.borders.radius300,
+    '& h1, h2, h3, h4, h5, h6': {
+      lineHeight: $theme.typography.HeadingXSmall.lineHeight,
+      marginTop: $theme.sizing.scale600,
+      marginBottom: $theme.sizing.scale400,
+      color: $theme.colors.contentPrimary,
+    },
+    '& p': {
+      marginBottom: $theme.sizing.scale400,
+    },
+    '& pre': {
+      fontFamily: $theme.typography.MonoLabelXSmall.fontFamily,
+      backgroundColor: $theme.colors.backgroundAccentLight,
+      padding: $theme.sizing.scale400,
+    },
+  })),
+};

src/components/markdown/md.tsx

@@ -0,0 +1,19 @@
+'use client';
+import Markdown from 'react-markdown';
+
+import { styled } from './md.styles';
+import type { Props } from './md.types';
+
+export default function Md({ markdown }: Props) {
+  return (
+    <styled.ViewContainer>
+      <Markdown
+        components={{
+          p: ({ children }) => <p>{children}</p>,
+        }}
+      >
+        {markdown}
+      </Markdown>
+    </styled.ViewContainer>
+  );
+}

src/components/markdown/md.types.tsx

@@ -0,0 +1,3 @@
+export type Props = {
+  markdown: string;
+};

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

@@ -19,7 +19,7 @@ jest.mock('../workflow-queries-tile/workflow-queries-tile', () =>
   ))
 );
 
-jest.mock('../workflow-queries-result-json/workflow-queries-result-json', () =>
+jest.mock('../workflow-queries-result/workflow-queries-result', () =>
   jest.fn(({ data }) => (
     <div>
       <div>Mock JSON</div>

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

@@ -4,7 +4,7 @@ import { render, screen } from '@/test-utils/rtl';
 
 import { type QueryWorkflowResponse } from '@/route-handlers/query-workflow/query-workflow.types';
 
-import WorkflowQueriesResultJson from '../workflow-queries-result-json';
+import WorkflowQueriesResult from '../workflow-queries-result';
 
 jest.mock('../helpers/get-query-json-content', () => ({
   __esModule: true,
@@ -15,6 +15,10 @@ jest.mock('@/components/copy-text-button/copy-text-button', () =>
   jest.fn(({ textToCopy }) => <div>Copy Button: {textToCopy}</div>)
 );
 
+jest.mock('@/components/markdown/md', () =>
+  jest.fn(({ markdown }) => <div>Markdown Mock: {markdown}</div>)
+);
+
 jest.mock('@/components/pretty-json/pretty-json', () =>
   jest.fn(({ json }) => (
     <div>
@@ -23,7 +27,7 @@ jest.mock('@/components/pretty-json/pretty-json', () =>
   ))
 );
 
-describe(WorkflowQueriesResultJson.name, () => {
+describe(WorkflowQueriesResult.name, () => {
   it('renders correctly with initial props', () => {
     setup({});
 
@@ -54,7 +58,5 @@ function setup({
   error?: any;
   loading?: boolean;
 }) {
-  render(
-    <WorkflowQueriesResultJson data={data} error={error} loading={loading} />
-  );
+  render(<WorkflowQueriesResult data={data} error={error} loading={loading} />);
 }

src/views/workflow-queries/workflow-queries-result-json/helpers/__tests__/get-query-json-content.test.ts → src/views/workflow-queries/workflow-queries-result/helpers/__tests__/get-query-json-content.test.ts

@@ -3,7 +3,7 @@ import { RequestError } from '@/utils/request/request-error';
 import {
   type QueryJsonContent,
   type Props,
-} from '../../workflow-queries-result-json.types';
+} from '../../workflow-queries-result.types';
 import getQueryJsonContent from '../get-query-json-content';
 
 describe(getQueryJsonContent.name, () => {

src/views/workflow-queries/workflow-queries-result-json/helpers/get-query-json-content.ts → src/views/workflow-queries/workflow-queries-result/helpers/get-query-json-content.ts

@@ -1,7 +1,7 @@
 import {
   type QueryJsonContent,
   type Props,
-} from '../workflow-queries-result-json.types';
+} from '../workflow-queries-result.types';
 
 export default function getQueryJsonContent(props: Props): QueryJsonContent {
   if (props.loading) {
@@ -26,6 +26,18 @@ export default function getQueryJsonContent(props: Props): QueryJsonContent {
       };
     }
 
+    if (
+      props.data.result.format &&
+      props.data.result.format === 'text/markdown'
+    ) {
+      return {
+        content: {
+          type: 'markdown',
+          content: props.data.result.data,
+        },
+        isError: false,
+      };
+    }
     return { content: props.data.result, isError: false };
   }
 

src/views/workflow-queries/workflow-queries-result-json/workflow-queries-result-json.tsx → src/views/workflow-queries/workflow-queries-result/workflow-queries-result.tsx

@@ -2,14 +2,15 @@
 import React, { useMemo } from 'react';
 
 import CopyTextButton from '@/components/copy-text-button/copy-text-button';
+import Md from '@/components/markdown/md';
 import PrettyJson from '@/components/pretty-json/pretty-json';
 import losslessJsonStringify from '@/utils/lossless-json-stringify';
 
 import getQueryJsonContent from './helpers/get-query-json-content';
-import { overrides, styled } from './workflow-queries-result-json.styles';
-import { type Props } from './workflow-queries-result-json.types';
+import { overrides, styled } from './workflow-queries-result.styles';
+import { type Markdown, type Props } from './workflow-queries-result.types';
 
-export default function WorkflowQueriesResultJson(props: Props) {
+export default function WorkflowQueriesResult(props: Props) {
   const { content, isError } = useMemo(
     () => getQueryJsonContent(props),
     [props]
@@ -19,6 +20,10 @@ export default function WorkflowQueriesResultJson(props: Props) {
     return losslessJsonStringify(content, null, '\t');
   }, [content]);
 
+  if (isContentMarkdown(content)) {
+    return <Md markdown={content.content} />;
+  }
+
   return (
     <styled.ViewContainer $isError={isError}>
       {content !== undefined && (
@@ -33,3 +38,13 @@ export default function WorkflowQueriesResultJson(props: Props) {
     </styled.ViewContainer>
   );
 }
+
+const isContentMarkdown = (content: any): content is Markdown => {
+  if (content === undefined) {
+    return false;
+  }
+  if (content.type === 'markdown') {
+    return true;
+  }
+  return false;
+};

src/views/workflow-queries/workflow-queries-result-json/workflow-queries-result-json.types.ts → src/views/workflow-queries/workflow-queries-result/workflow-queries-result.types.ts

@@ -8,7 +8,12 @@ export type Props = {
   loading?: boolean;
 };
 
+export type Markdown = {
+  type: 'markdown';
+  content: string;
+};
+
 export type QueryJsonContent = {
-  content: PrettyJsonValue | undefined;
+  content: PrettyJsonValue | Markdown | undefined;
   isError: boolean;
 };

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

@@ -14,7 +14,7 @@ import { type WorkflowPageTabContentProps } from '@/views/workflow-page/workflow
 import workflowQueriesEmptyPanelConfig from './config/workflow-queries-empty-panel.config';
 import getWorkflowQueryStatus from './helpers/get-workflow-query-status';
 import useWorkflowQueries from './hooks/use-workflow-queries';
-import WorkflowQueriesResultJson from './workflow-queries-result-json/workflow-queries-result-json';
+import WorkflowQueriesResult from './workflow-queries-result/workflow-queries-result';
 import WorkflowQueriesTile from './workflow-queries-tile/workflow-queries-tile';
 import { EXCLUDED_QUERY_TYPES_SET } from './workflow-queries.constants';
 import { styled } from './workflow-queries.styles';
@@ -79,7 +79,7 @@ export default function WorkflowQueries(props: WorkflowPageTabContentProps) {
           ))}
         </styled.QueriesSidebar>
         <styled.QueryResultView>
-          <WorkflowQueriesResultJson
+          <WorkflowQueriesResult
             data={queries[selectedQueryIndex]?.data}
             error={queries[selectedQueryIndex]?.error ?? undefined}
             loading={queries[selectedQueryIndex]?.isFetching}