Skip to content

Commit bb56b42

Browse files
wip (#70)
* wip * fixes * more changes * more changes * adds reorder animation * refactor * version bump
1 parent d1a6f25 commit bb56b42

12 files changed

Lines changed: 430 additions & 130 deletions

frontend/src/components/dashboard/CronjobsSection.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { toast } from 'react-toastify';
55
import { axiosInstance } from '../../utils';
66
import { useAuth } from '../../lib/auth';
77
import { cronjobRunSummaryText } from '../../utils/cronjob-format';
8+
import { cronjobPrompt } from '../../../../src/utils/cronjob-prompt';
89
import './WorkflowsSection.css';
910
import './CronjobsSection.css';
1011

@@ -93,6 +94,10 @@ function targetLabel(cronjob: Cronjob): string {
9394
return 'Prompt';
9495
}
9596

97+
function promptPreview(prompt: string): string {
98+
return cronjobPrompt.parse(prompt).prompt;
99+
}
100+
96101
function formatMonitorTimeout(value: number, unit: Cronjob['monitor_timeout_unit']): string {
97102
const label = value === 1 ? unit.slice(0, -1) : unit;
98103
return `${value} ${label}`;
@@ -284,7 +289,7 @@ export default function CronjobsSection() {
284289

285290
<div className="cronjob-card-header">
286291
<h3>{cronjob.name}</h3>
287-
<p>{cronjob.target.target_type === 'workflow' ? targetLabel(cronjob) : cronjob.prompt}</p>
292+
<p>{cronjob.target.target_type === 'workflow' ? targetLabel(cronjob) : promptPreview(cronjob.prompt)}</p>
288293
</div>
289294

290295
<div className="cronjob-metrics">

frontend/src/pages/CronjobFormPage.css

Lines changed: 26 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -249,9 +249,17 @@
249249
margin-top: 0.9rem;
250250
}
251251

252+
.cronjob-step-row-wrap {
253+
will-change: transform;
254+
}
255+
256+
.cronjob-step-row-wrap.is-reordering {
257+
animation: cronjob-step-reorder-pulse 0.26s ease;
258+
}
259+
252260
.cronjob-step-row {
253261
display: grid;
254-
grid-template-columns: 2rem minmax(0, 1fr) 2rem;
262+
grid-template-columns: 2rem minmax(0, 1fr) 2rem 2rem;
255263
gap: 0.55rem;
256264
align-items: start;
257265
width: 100%;
@@ -305,6 +313,7 @@
305313
box-shadow: 0 0 0 3px rgba(122, 133, 148, 0.14);
306314
}
307315

316+
.cronjob-step-move-down,
308317
.cronjob-step-remove {
309318
width: 2rem;
310319
height: 2rem;
@@ -316,34 +325,19 @@
316325
line-height: 1;
317326
}
318327

319-
.cronjob-prompt-preview {
320-
margin-top: 1rem;
321-
border-top: 1px solid #2a2a2a;
322-
padding-top: 0.85rem;
328+
.cronjob-step-move-down:disabled {
329+
opacity: 0.38;
330+
cursor: not-allowed;
323331
}
324332

325-
.cronjob-prompt-preview span {
326-
display: block;
327-
color: #888;
328-
font-size: 0.8rem;
329-
font-weight: 700;
330-
text-transform: uppercase;
331-
letter-spacing: 0.06em;
332-
}
333+
@keyframes cronjob-step-reorder-pulse {
334+
0% {
335+
background: rgba(100, 108, 255, 0.18);
336+
}
333337

334-
.cronjob-prompt-preview pre {
335-
margin: 0.45rem 0 0;
336-
max-height: 9rem;
337-
overflow: auto;
338-
padding: 0.8rem 0.85rem;
339-
border: 1px solid #2b2b2b;
340-
border-radius: 8px;
341-
background: #111;
342-
color: #bfc5ce;
343-
white-space: pre-wrap;
344-
word-break: break-word;
345-
font: inherit;
346-
line-height: 1.45;
338+
100% {
339+
background: transparent;
340+
}
347341
}
348342

349343
@media (max-width: 620px) {
@@ -361,7 +355,7 @@
361355
}
362356

363357
.cronjob-step-row {
364-
grid-template-columns: 1.85rem minmax(0, 1fr) 1.85rem;
358+
grid-template-columns: 1.85rem minmax(0, 1fr) 1.85rem 1.85rem;
365359
gap: 0.45rem;
366360
padding-bottom: 0.7rem;
367361
}
@@ -373,28 +367,20 @@
373367
font-size: 0.72rem;
374368
}
375369

376-
.cronjob-step-row textarea {
377-
min-height: 4.4rem;
378-
padding: 0.85rem 0.75rem;
379-
font-size: 0.95rem;
380-
}
381-
370+
.cronjob-step-move-down,
382371
.cronjob-step-remove {
383372
width: 1.85rem;
384373
height: 1.85rem;
385374
margin-top: 0.35rem;
386375
font-size: 1rem;
387376
}
388377

389-
.cronjob-prompt-preview {
390-
margin-top: 0.7rem;
391-
padding-top: 0.7rem;
378+
.cronjob-step-row textarea {
379+
min-height: 4.4rem;
380+
padding: 0.85rem 0.75rem;
381+
font-size: 0.95rem;
392382
}
393383

394-
.cronjob-prompt-preview pre {
395-
padding: 0.7rem;
396-
font-size: 0.92rem;
397-
}
398384
}
399385

400386
.cronjob-field input:focus,

0 commit comments

Comments
 (0)