Skip to content

Commit 26e508a

Browse files
davidporter-id-auAssem-Uber
davidporter-id-au
and
Assem-Uber
authored
Feature/adding query md experimental support (#923)
--------- Co-authored-by: Assem Hafez <[email protected]> Co-authored-by: Assem Hafez <[email protected]>
1 parent 1aed63f commit 26e508a

16 files changed

+1953
-179
lines changed

‎package-lock.json

Lines changed: 1511 additions & 63 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,10 @@
5555
"react-icons": "^5.1.0",
5656
"react-intersection-observer": "^9.8.1",
5757
"react-json-view-lite": "^1.4.0",
58+
"react-markdown": "^10.1.0",
5859
"react-virtuoso": "^4.10.4",
5960
"react-visjs-timeline": "^1.6.0",
61+
"remark-gfm": "^4.0.1",
6062
"server-only": "^0.0.1",
6163
"styletron-engine-monolithic": "^1.0.0",
6264
"styletron-react": "^6.1.1",

‎src/components/markdown/markdown.styles.ts

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
import { styled as createStyled } from 'baseui';
2+
3+
export const styled = {
4+
ViewContainer: createStyled('div', ({ $theme }) => ({
5+
display: 'flex',
6+
flexDirection: 'column',
7+
wordBreak: 'break-word',
8+
overflow: 'hidden',
9+
lineHeight: $theme.typography.ParagraphMedium.lineHeight,
10+
11+
// Headings
12+
'& h1': {
13+
...$theme.typography.HeadingXXLarge,
14+
marginTop: $theme.sizing.scale800,
15+
marginBottom: $theme.sizing.scale600,
16+
borderBottom: `1px solid ${$theme.colors.backgroundTertiary}`,
17+
paddingBottom: $theme.sizing.scale300,
18+
},
19+
'& h2': {
20+
...$theme.typography.HeadingXLarge,
21+
marginTop: $theme.sizing.scale700,
22+
marginBottom: $theme.sizing.scale500,
23+
borderBottom: `1px solid ${$theme.colors.backgroundTertiary}`,
24+
paddingBottom: $theme.sizing.scale200,
25+
},
26+
'& h3': {
27+
...$theme.typography.HeadingLarge,
28+
marginTop: $theme.sizing.scale600,
29+
marginBottom: $theme.sizing.scale400,
30+
},
31+
'& h4': {
32+
...$theme.typography.HeadingMedium,
33+
marginTop: $theme.sizing.scale500,
34+
marginBottom: $theme.sizing.scale300,
35+
},
36+
'& h5': {
37+
...$theme.typography.HeadingSmall,
38+
marginTop: $theme.sizing.scale400,
39+
marginBottom: $theme.sizing.scale300,
40+
},
41+
'& h6': {
42+
...$theme.typography.HeadingXSmall,
43+
marginTop: $theme.sizing.scale400,
44+
marginBottom: $theme.sizing.scale300,
45+
},
46+
47+
// Paragraphs
48+
'& p': {
49+
...$theme.typography.ParagraphMedium,
50+
marginBottom: $theme.sizing.scale500,
51+
marginTop: $theme.sizing.scale300,
52+
'&:first-child': {
53+
marginTop: 0,
54+
},
55+
'&:last-child': {
56+
marginBottom: 0,
57+
},
58+
},
59+
60+
// Lists
61+
'& ul, & ol': {
62+
marginBottom: $theme.sizing.scale500,
63+
marginTop: $theme.sizing.scale300,
64+
paddingLeft: $theme.sizing.scale700,
65+
'&:first-child': {
66+
marginTop: 0,
67+
},
68+
'&:last-child': {
69+
marginBottom: 0,
70+
},
71+
},
72+
'& ul': {
73+
listStyleType: 'disc',
74+
},
75+
'& ol': {
76+
listStyleType: 'decimal',
77+
},
78+
'& li': {
79+
...$theme.typography.ParagraphMedium,
80+
marginBottom: $theme.sizing.scale200,
81+
'&:last-child': {
82+
marginBottom: 0,
83+
},
84+
'& > p': {
85+
marginTop: 0,
86+
marginBottom: $theme.sizing.scale200,
87+
'&:last-child': {
88+
marginBottom: 0,
89+
},
90+
},
91+
},
92+
'& ul ul, & ol ol, & ul ol, & ol ul': {
93+
marginTop: $theme.sizing.scale200,
94+
marginBottom: $theme.sizing.scale200,
95+
},
96+
97+
// Links
98+
'& a': {
99+
color: $theme.colors.linkText,
100+
textDecoration: 'underline',
101+
':hover': {
102+
color: $theme.colors.linkHover,
103+
textDecoration: 'none',
104+
},
105+
':visited': {
106+
color: $theme.colors.linkVisited,
107+
},
108+
},
109+
110+
// Emphasis
111+
'& strong': {
112+
fontWeight: 'bold',
113+
},
114+
'& em': {
115+
fontStyle: 'italic',
116+
},
117+
118+
// Code
119+
'& code': {
120+
...$theme.typography.MonoLabelSmall,
121+
backgroundColor: $theme.colors.backgroundTertiary,
122+
padding: `${$theme.sizing.scale100} ${$theme.sizing.scale200}`,
123+
borderRadius: $theme.borders.radius200,
124+
border: `1px solid ${$theme.colors.backgroundTertiary}`,
125+
fontSize: '0.875em',
126+
},
127+
'& pre': {
128+
marginBottom: $theme.sizing.scale600,
129+
marginTop: $theme.sizing.scale600,
130+
backgroundColor: $theme.colors.backgroundTertiary,
131+
padding: $theme.sizing.scale500,
132+
borderRadius: $theme.borders.radius300,
133+
border: `1px solid ${$theme.colors.backgroundTertiary}`,
134+
overflow: 'auto',
135+
'& code': {
136+
...$theme.typography.MonoLabelMedium,
137+
backgroundColor: 'transparent',
138+
padding: 0,
139+
border: 'none',
140+
fontSize: 'inherit',
141+
},
142+
},
143+
144+
// Blockquotes
145+
'& blockquote': {
146+
margin: `${$theme.sizing.scale600} 0`,
147+
padding: `${$theme.sizing.scale400} ${$theme.sizing.scale600}`,
148+
borderLeft: `4px solid ${$theme.colors.borderAccent}`,
149+
backgroundColor: $theme.colors.backgroundAccentLight,
150+
borderRadius: $theme.borders.radius200,
151+
'& > p': {
152+
marginTop: 0,
153+
marginBottom: $theme.sizing.scale300,
154+
'&:last-child': {
155+
marginBottom: 0,
156+
},
157+
},
158+
'& > p:first-child': {
159+
fontStyle: 'italic',
160+
color: $theme.colors.contentSecondary,
161+
},
162+
},
163+
164+
// Horizontal Rules
165+
'& hr': {
166+
border: 'none',
167+
borderTop: `2px solid ${$theme.colors.backgroundTertiary}`,
168+
margin: `${$theme.sizing.scale700} 0`,
169+
width: '100%',
170+
},
171+
172+
// Images
173+
'& img': {
174+
maxWidth: '100%',
175+
height: 'auto',
176+
marginTop: $theme.sizing.scale400,
177+
marginBottom: $theme.sizing.scale400,
178+
borderRadius: $theme.borders.radius200,
179+
border: `1px solid ${$theme.colors.backgroundTertiary}`,
180+
},
181+
182+
// Tables
183+
'& table': {
184+
width: '100%',
185+
borderCollapse: 'collapse',
186+
marginTop: $theme.sizing.scale600,
187+
marginBottom: $theme.sizing.scale600,
188+
borderRadius: $theme.borders.radius200,
189+
overflow: 'auto',
190+
},
191+
'& th, & td': {
192+
...$theme.typography.ParagraphSmall,
193+
padding: $theme.sizing.scale400,
194+
textAlign: 'left',
195+
border: `1px solid ${$theme.colors.backgroundTertiary}`,
196+
},
197+
'& th': {
198+
...$theme.typography.LabelMedium,
199+
fontWeight: 'bold',
200+
color: $theme.colors.contentPrimary,
201+
},
202+
// Task Lists (if supported)
203+
'& input[type="checkbox"]': {
204+
marginRight: $theme.sizing.scale300,
205+
cursor: 'pointer',
206+
},
207+
'& li.task-list-item': {
208+
listStyleType: 'none',
209+
},
210+
211+
// Delete
212+
'& del': {
213+
textDecoration: 'line-through',
214+
color: $theme.colors.contentTertiary,
215+
},
216+
})),
217+
};

‎src/components/markdown/markdown.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
'use client';
2+
import ReactMarkdown from 'react-markdown';
3+
import remarkGfm from 'remark-gfm';
4+
5+
import { styled } from './markdown.styles';
6+
import type { Props } from './markdown.types';
7+
8+
export default function Markdown({ markdown }: Props) {
9+
return (
10+
<styled.ViewContainer>
11+
<ReactMarkdown remarkPlugins={[remarkGfm]}>{markdown}</ReactMarkdown>
12+
</styled.ViewContainer>
13+
);
14+
}

‎src/components/markdown/markdown.types.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export type Props = {
2+
markdown: string;
3+
};

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ jest.mock('../workflow-queries-tile/workflow-queries-tile', () =>
1919
))
2020
);
2121

22-
jest.mock('../workflow-queries-result-json/workflow-queries-result-json', () =>
22+
jest.mock('../workflow-queries-result/workflow-queries-result', () =>
2323
jest.fn(({ data }) => (
2424
<div>
2525
<div>Mock JSON</div>

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

Lines changed: 0 additions & 60 deletions
This file was deleted.

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

Lines changed: 0 additions & 33 deletions
This file was deleted.

0 commit comments

Comments
 (0)