gsadmin/sencho
1
0
Fork 0
mirror of https://github.com/Studio-Saelix/sencho.git synced 2026-08-08 09:54:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: replace Timeline/All tasks buttons with SegmentedControl

Browse Source 
The two loose Button elements had indistinguishable selected/unselected
states (secondary vs ghost). Replaced with the SegmentedControl component
already used elsewhere on the same page, which has a clear active
highlight indicator.
This commit is contained in:
SaelixCode
2026-07-03 13:17:54 -04:00
parent 604c4a7705
commit b0cb5b70d0
2 changed files with 17 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ScheduledOperationsView.tsx
+8 -20
View File
@@ -484,26 +484,14 @@ export default function ScheduledOperationsView({ filterNodeId, onClearFilter, p
<CardTitle>Scheduled Operations</CardTitle>
</div>
<div className="flex items-center gap-2">
<div className="inline-flex items-center rounded-md border border-card-border bg-card p-0.5 shadow-btn-glow">
<Button
variant={view === 'timeline' ? 'secondary' : 'ghost'}
size="sm"
className="h-7 px-2.5 gap-1.5"
onClick={() => setView('timeline')}
>
<CalendarClock className="w-3.5 h-3.5" strokeWidth={1.5} />
<span className="text-xs">Timeline</span>
</Button>
<Button
variant={view === 'table' ? 'secondary' : 'ghost'}
size="sm"
className="h-7 px-2.5 gap-1.5"
onClick={() => setView('table')}
>
<Table2 className="w-3.5 h-3.5" strokeWidth={1.5} />
<span className="text-xs">All tasks</span>
</Button>
</div>
<SegmentedControl<'timeline' | 'table'>
value={view}
options={[
{ value: 'timeline', label: 'Timeline', icon: CalendarClock },
{ value: 'table', label: 'All tasks', icon: Table2 },
]}
onChange={(v) => setView(v)}
/>
<Button variant="outline" size="sm" onClick={fetchTasks} disabled={loading}>
<RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} strokeWidth={1.5} />
Refresh
frontend/src/components/__tests__/ScheduledOperationsView.test.tsx
+9 -9
View File
@@ -77,7 +77,7 @@ describe('ScheduledOperationsView', () => {
tasksFixture = [makeTask({ id: 7, name: 'nightly-prune' })];
render(<ScheduledOperationsView />);
await userEvent.click(await screen.findByRole('button', { name: /All tasks/ }));
await userEvent.click(await screen.findByRole('radio', { name: /All tasks/ }));
expect(await screen.findByText('nightly-prune')).toBeInTheDocument();
});
@@ -88,7 +88,7 @@ describe('ScheduledOperationsView', () => {
];
render(<ScheduledOperationsView />);
await userEvent.click(await screen.findByRole('button', { name: /All tasks/ }));
await userEvent.click(await screen.findByRole('radio', { name: /All tasks/ }));
await screen.findByText('recurring-task');
// A single One-shot chip, scoped to the one-shot row.
@@ -107,7 +107,7 @@ describe('ScheduledOperationsView', () => {
tasksFixture = [makeTask({ id: 1, name: 'failed-one-shot', delete_after_run: 1, last_status: 'failure' })];
render(<ScheduledOperationsView />);
await userEvent.click(await screen.findByRole('button', { name: /All tasks/ }));
await userEvent.click(await screen.findByRole('radio', { name: /All tasks/ }));
const chip = await screen.findByText('One-shot');
expect(chip).toHaveAttribute('title', expect.stringContaining('kept after a failed run'));
});
@@ -136,7 +136,7 @@ describe('ScheduledOperationsView', () => {
})];
render(<ScheduledOperationsView />);
await userEvent.click(await screen.findByRole('button', { name: /All tasks/ }));
await userEvent.click(await screen.findByRole('radio', { name: /All tasks/ }));
await userEvent.click(await screen.findByTitle('Edit'));
await waitFor(() => expect(screen.getAllByRole('combobox')[2]).toHaveTextContent('web'));
});
@@ -168,7 +168,7 @@ describe('ScheduledOperationsView', () => {
const onClearFilter = vi.fn();
render(<ScheduledOperationsView filterNodeId={2} onClearFilter={onClearFilter} />);
await userEvent.click(await screen.findByRole('button', { name: /All tasks/ }));
await userEvent.click(await screen.findByRole('radio', { name: /All tasks/ }));
expect(await screen.findByText('edge-task')).toBeInTheDocument();
expect(screen.queryByText('hub-task')).not.toBeInTheDocument();
@@ -503,7 +503,7 @@ describe('ScheduledOperationsView', () => {
})];
render(<ScheduledOperationsView />);
await userEvent.click(await screen.findByRole('button', { name: /All tasks/ }));
await userEvent.click(await screen.findByRole('radio', { name: /All tasks/ }));
await userEvent.click(await screen.findByTitle('Edit'));
await userEvent.click(screen.getAllByRole('combobox')[0]);
await userEvent.click(await screen.findByRole('button', { name: 'Create Fleet Snapshot' }));
@@ -639,7 +639,7 @@ describe('ScheduledOperationsView', () => {
tasksFixture = [makeTask({ id: 5, name: 'daily-prune', cron_expression: '0 3 * * *', delete_after_run: 0 })];
render(<ScheduledOperationsView />);
await userEvent.click(await screen.findByRole('button', { name: /All tasks/ }));
await userEvent.click(await screen.findByRole('radio', { name: /All tasks/ }));
await userEvent.click(await screen.findByTitle('Edit'));
expect(screen.getByRole('radio', { name: 'Simple' })).toHaveAttribute('aria-checked', 'true');
@@ -657,7 +657,7 @@ describe('ScheduledOperationsView', () => {
})];
render(<ScheduledOperationsView />);
await userEvent.click(await screen.findByRole('button', { name: /All tasks/ }));
await userEvent.click(await screen.findByRole('radio', { name: /All tasks/ }));
await userEvent.click(await screen.findByTitle('Edit'));
await userEvent.click(screen.getByRole('button', { name: 'Update' }));
@@ -674,7 +674,7 @@ describe('ScheduledOperationsView', () => {
tasksFixture = [makeTask({ id: 6, name: 'every-15', cron_expression: '*/15 * * * *' })];
render(<ScheduledOperationsView />);
await userEvent.click(await screen.findByRole('button', { name: /All tasks/ }));
await userEvent.click(await screen.findByRole('radio', { name: /All tasks/ }));
await userEvent.click(await screen.findByTitle('Edit'));
expect(screen.getByRole('radio', { name: 'Advanced' })).toHaveAttribute('aria-checked', 'true');