Skip to content

Commit 99dfa82

Browse files
c-julinc-julin
committed
feat(sql): add query workspace with iceberg bridge [UX-1259]
1 parent 05b6159 commit 99dfa82

14 files changed

Lines changed: 4080 additions & 0 deletions

File tree

‎frontend/src/components/pages/sql/catalog-tree.css‎

Lines changed: 378 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,378 @@
1+
/**
2+
* Copyright 2026 Redpanda Data, Inc.
3+
*
4+
* Use of this software is governed by the Business Source License
5+
* included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
6+
*
7+
* As of the Change Date specified in that file, in accordance with
8+
* the Business Source License, use of this software will be governed
9+
* by the Apache License, Version 2.0
10+
*/
11+
12+
/* Catalog tree: Catalog -> Namespace -> Table -> Columns. Ported from the
13+
design prototype's .cat-* classes. */
14+
15+
.cat {
16+
display: flex;
17+
flex-direction: column;
18+
height: 100%;
19+
min-height: 0;
20+
}
21+
22+
.cat-head {
23+
display: flex;
24+
align-items: center;
25+
justify-content: space-between;
26+
padding: 14px 14px 8px;
27+
}
28+
.cat-head-title {
29+
font-size: 12px;
30+
font-weight: 600;
31+
text-transform: uppercase;
32+
letter-spacing: 0.04em;
33+
color: var(--color-muted-foreground);
34+
}
35+
.cat-head-hint {
36+
font-size: 10px;
37+
color: var(--color-disabled);
38+
text-transform: uppercase;
39+
letter-spacing: 0.04em;
40+
}
41+
42+
.cat-search {
43+
padding: 0 12px 10px;
44+
}
45+
46+
.cat-tree {
47+
flex: 1;
48+
overflow-y: auto;
49+
padding: 0 8px 8px;
50+
}
51+
52+
.cat-row {
53+
display: flex;
54+
align-items: center;
55+
gap: 6px;
56+
width: 100%;
57+
text-align: left;
58+
background: transparent;
59+
border: 0;
60+
cursor: pointer;
61+
padding: 6px 8px;
62+
border-radius: var(--radius-sm);
63+
color: var(--color-strong);
64+
font-size: 13px;
65+
}
66+
.cat-row:hover {
67+
background: var(--color-selected-hover);
68+
}
69+
.cat-chev {
70+
color: var(--color-disabled);
71+
flex-shrink: 0;
72+
}
73+
.cat-label {
74+
flex: 1;
75+
text-align: left;
76+
white-space: nowrap;
77+
overflow: hidden;
78+
text-overflow: ellipsis;
79+
}
80+
.cat-row,
81+
.cat-table-main,
82+
.cat-cat-main,
83+
.cat-row-ns,
84+
.cat-row-catalog {
85+
text-align: left;
86+
}
87+
.cat-row-catalog {
88+
padding: 0;
89+
gap: 0;
90+
}
91+
.cat-cat-main {
92+
display: flex;
93+
align-items: center;
94+
gap: 6px;
95+
flex: 1;
96+
min-width: 0;
97+
background: transparent;
98+
border: 0;
99+
cursor: pointer;
100+
padding: 6px 8px;
101+
color: var(--color-strong);
102+
font-size: 13px;
103+
font-weight: 600;
104+
font-family: inherit;
105+
}
106+
.cat-cat-add {
107+
opacity: 0;
108+
display: inline-flex;
109+
align-items: center;
110+
justify-content: center;
111+
width: 26px;
112+
height: 26px;
113+
margin-right: 4px;
114+
border: 0;
115+
background: transparent;
116+
color: var(--color-action-primary);
117+
cursor: pointer;
118+
border-radius: var(--radius-sm);
119+
flex-shrink: 0;
120+
}
121+
.cat-cat-add:hover {
122+
background: var(--color-indigo-100);
123+
}
124+
.cat-row-catalog:hover .cat-cat-add {
125+
opacity: 1;
126+
}
127+
.cat-engine {
128+
display: inline-flex;
129+
align-items: center;
130+
justify-content: center;
131+
width: 20px;
132+
height: 20px;
133+
border-radius: var(--radius-sm);
134+
flex-shrink: 0;
135+
}
136+
.cat-engine-rp {
137+
background: var(--color-indigo-alpha-100);
138+
color: var(--color-indigo-700);
139+
}
140+
.cat-engine-ice {
141+
background: var(--color-blue-alpha-100);
142+
color: var(--color-blue-700);
143+
}
144+
.cat-ns {
145+
margin-left: 10px;
146+
}
147+
.cat-row-ns {
148+
font-weight: 500;
149+
color: var(--color-foreground);
150+
}
151+
.cat-ns-ico {
152+
color: var(--color-muted-foreground);
153+
}
154+
.cat-count {
155+
font-size: 11px;
156+
color: var(--color-muted-foreground);
157+
background: var(--color-muted);
158+
padding: 1px 7px;
159+
border-radius: 999px;
160+
}
161+
.cat-tables {
162+
margin-left: 10px;
163+
}
164+
.cat-row-table {
165+
padding: 0;
166+
gap: 0;
167+
}
168+
.cat-table-main {
169+
display: flex;
170+
align-items: center;
171+
gap: 6px;
172+
flex: 1;
173+
min-width: 0;
174+
background: transparent;
175+
border: 0;
176+
cursor: pointer;
177+
padding: 6px 8px;
178+
color: var(--color-strong);
179+
font-size: 13px;
180+
font-family: inherit;
181+
}
182+
.cat-table-main:disabled {
183+
cursor: default;
184+
color: var(--color-disabled);
185+
}
186+
.cat-table-ico {
187+
color: var(--color-action-primary);
188+
flex-shrink: 0;
189+
}
190+
.cat-row-table[data-locked] .cat-table-ico {
191+
color: var(--color-disabled);
192+
}
193+
.cat-row-table[data-active] {
194+
background: var(--color-selected);
195+
}
196+
.cat-table-run {
197+
opacity: 0;
198+
display: inline-flex;
199+
align-items: center;
200+
justify-content: center;
201+
width: 26px;
202+
height: 26px;
203+
margin-right: 4px;
204+
border: 0;
205+
background: transparent;
206+
color: var(--color-action-primary);
207+
cursor: pointer;
208+
border-radius: var(--radius-sm);
209+
flex-shrink: 0;
210+
}
211+
.cat-table-run:hover {
212+
background: var(--color-indigo-100);
213+
}
214+
.cat-row-table:hover .cat-table-run {
215+
opacity: 1;
216+
}
217+
.cat-lock {
218+
color: var(--color-disabled);
219+
margin-left: 2px;
220+
}
221+
.cat-table-ico-ice {
222+
color: var(--color-blue-700);
223+
}
224+
.cat-ice {
225+
display: inline-flex;
226+
align-items: center;
227+
gap: 3px;
228+
font-size: 9px;
229+
font-weight: 700;
230+
text-transform: uppercase;
231+
letter-spacing: 0.03em;
232+
color: var(--color-blue-700);
233+
background: var(--color-blue-alpha-100);
234+
padding: 1px 5px 1px 4px;
235+
border-radius: 3px;
236+
flex-shrink: 0;
237+
}
238+
.cat-ice svg {
239+
color: currentColor;
240+
}
241+
html.dark .cat-ice {
242+
color: var(--color-blue-300);
243+
}
244+
html.dark .cat-table-ico-ice {
245+
color: var(--color-blue-400);
246+
}
247+
.cat-cols {
248+
margin-left: 26px;
249+
border-left: 1px solid var(--color-border-subtle);
250+
padding-left: 8px;
251+
margin-bottom: 2px;
252+
}
253+
.cat-col {
254+
display: flex;
255+
align-items: center;
256+
gap: 7px;
257+
padding: 3px 8px;
258+
font-size: 12px;
259+
color: var(--color-foreground);
260+
}
261+
.cat-col-ico {
262+
color: var(--color-muted-foreground);
263+
flex-shrink: 0;
264+
}
265+
.cat-col-name {
266+
font-family: var(--font-mono);
267+
flex: 1;
268+
white-space: nowrap;
269+
overflow: hidden;
270+
text-overflow: ellipsis;
271+
}
272+
.cat-col-type {
273+
font-size: 10px;
274+
color: var(--color-muted-foreground);
275+
font-family: var(--font-mono);
276+
letter-spacing: 0.02em;
277+
}
278+
.cat-ns-empty {
279+
font-size: 12px;
280+
color: var(--color-disabled);
281+
padding: 6px 16px;
282+
}
283+
.cat-add-row {
284+
padding: 6px 8px;
285+
color: var(--color-action-primary);
286+
font-weight: 500;
287+
font-family: inherit;
288+
font-size: 13px;
289+
width: 100%;
290+
}
291+
.cat-add-row .cat-label {
292+
color: var(--color-action-primary);
293+
}
294+
.cat-add-row .cat-add-row-ico {
295+
color: var(--color-action-primary);
296+
flex-shrink: 0;
297+
margin-left: 19px;
298+
}
299+
.cat-add-row:hover {
300+
background: var(--color-indigo-100);
301+
}
302+
.cat-more {
303+
display: flex;
304+
align-items: center;
305+
gap: 7px;
306+
width: 100%;
307+
margin-top: 2px;
308+
padding: 7px 8px;
309+
background: transparent;
310+
border: 0;
311+
cursor: pointer;
312+
border-radius: var(--radius-sm);
313+
font-size: 12px;
314+
color: var(--color-action-primary);
315+
font-weight: 500;
316+
text-align: left;
317+
font-family: inherit;
318+
}
319+
.cat-more:hover {
320+
background: var(--color-indigo-100);
321+
}
322+
.cat-more-ico {
323+
color: var(--color-action-primary);
324+
flex-shrink: 0;
325+
}
326+
327+
/* Loading / spinner */
328+
.cat-loading {
329+
display: flex;
330+
align-items: center;
331+
gap: 7px;
332+
padding: 6px 16px;
333+
font-size: 12px;
334+
color: var(--color-muted-foreground);
335+
}
336+
.cat-spinner {
337+
display: inline-block;
338+
width: 13px;
339+
height: 13px;
340+
border: 2px solid var(--color-muted);
341+
border-top-color: var(--color-action-primary);
342+
border-radius: 999px;
343+
animation: cat-spin 0.7s linear infinite;
344+
flex-shrink: 0;
345+
}
346+
@keyframes cat-spin {
347+
to {
348+
transform: rotate(360deg);
349+
}
350+
}
351+
352+
/* Bridge query (Iceberg-tiered Redpanda table) markers */
353+
.cat-row-table[data-tiered] .cat-table-ico {
354+
color: var(--color-blue-700);
355+
}
356+
html.dark .cat-row-table[data-tiered] .cat-table-ico {
357+
color: var(--color-blue-400);
358+
}
359+
.cat-bridge {
360+
display: inline-flex;
361+
align-items: center;
362+
gap: 3px;
363+
font-size: 9px;
364+
font-weight: 700;
365+
text-transform: uppercase;
366+
letter-spacing: 0.03em;
367+
color: var(--color-blue-700);
368+
background: var(--color-blue-alpha-100);
369+
padding: 1px 5px 1px 4px;
370+
border-radius: 3px;
371+
flex-shrink: 0;
372+
}
373+
.cat-bridge svg {
374+
color: currentColor;
375+
}
376+
html.dark .cat-bridge {
377+
color: var(--color-blue-300);
378+
}

0 commit comments

Comments
 (0)