gsadmin/sencho
1
0
Fork 0
mirror of https://github.com/Studio-Saelix/sencho.git synced 2026-08-27 18:57:09 +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> <CardTitle>Scheduled Operations</CardTitle>
</div> </div>
<div className="flex items-center gap-2"> <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"> <SegmentedControl<'timeline' | 'table'>
<Button value={view}
variant={view === 'timeline' ? 'secondary' : 'ghost'} options={[
size="sm" { value: 'timeline', label: 'Timeline', icon: CalendarClock },
className="h-7 px-2.5 gap-1.5" { value: 'table', label: 'All tasks', icon: Table2 },
onClick={() => setView('timeline')} ]}
> onChange={(v) => setView(v)}
<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>
<Button variant="outline" size="sm" onClick={fetchTasks} disabled={loading}> <Button variant="outline" size="sm" onClick={fetchTasks} disabled={loading}>
<RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} strokeWidth={1.5} /> <RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} strokeWidth={1.5} />
Refresh 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' })]; tasksFixture = [makeTask({ id: 7, name: 'nightly-prune' })];
render(<ScheduledOperationsView />); 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(); expect(await screen.findByText('nightly-prune')).toBeInTheDocument();
}); });
@@ -88,7 +88,7 @@ describe('ScheduledOperationsView', () => {
]; ];
render(<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'); await screen.findByText('recurring-task');
// A single One-shot chip, scoped to the one-shot row. // 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' })]; tasksFixture = [makeTask({ id: 1, name: 'failed-one-shot', delete_after_run: 1, last_status: 'failure' })];
render(<ScheduledOperationsView />); 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'); const chip = await screen.findByText('One-shot');
expect(chip).toHaveAttribute('title', expect.stringContaining('kept after a failed run')); expect(chip).toHaveAttribute('title', expect.stringContaining('kept after a failed run'));
}); });
@@ -136,7 +136,7 @@ describe('ScheduledOperationsView', () => {
})]; })];
render(<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(await screen.findByTitle('Edit'));
await waitFor(() => expect(screen.getAllByRole('combobox')[2]).toHaveTextContent('web')); await waitFor(() => expect(screen.getAllByRole('combobox')[2]).toHaveTextContent('web'));
}); });
@@ -168,7 +168,7 @@ describe('ScheduledOperationsView', () => {
const onClearFilter = vi.fn(); const onClearFilter = vi.fn();
render(<ScheduledOperationsView filterNodeId={2} onClearFilter={onClearFilter} />); 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(await screen.findByText('edge-task')).toBeInTheDocument();
expect(screen.queryByText('hub-task')).not.toBeInTheDocument(); expect(screen.queryByText('hub-task')).not.toBeInTheDocument();
@@ -503,7 +503,7 @@ describe('ScheduledOperationsView', () => {
})]; })];
render(<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(await screen.findByTitle('Edit'));
await userEvent.click(screen.getAllByRole('combobox')[0]); await userEvent.click(screen.getAllByRole('combobox')[0]);
await userEvent.click(await screen.findByRole('button', { name: 'Create Fleet Snapshot' })); 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 })]; tasksFixture = [makeTask({ id: 5, name: 'daily-prune', cron_expression: '0 3 * * *', delete_after_run: 0 })];
render(<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(await screen.findByTitle('Edit'));
expect(screen.getByRole('radio', { name: 'Simple' })).toHaveAttribute('aria-checked', 'true'); expect(screen.getByRole('radio', { name: 'Simple' })).toHaveAttribute('aria-checked', 'true');
@@ -657,7 +657,7 @@ describe('ScheduledOperationsView', () => {
})]; })];
render(<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(await screen.findByTitle('Edit'));
await userEvent.click(screen.getByRole('button', { name: 'Update' })); await userEvent.click(screen.getByRole('button', { name: 'Update' }));
@@ -674,7 +674,7 @@ describe('ScheduledOperationsView', () => {
tasksFixture = [makeTask({ id: 6, name: 'every-15', cron_expression: '*/15 * * * *' })]; tasksFixture = [makeTask({ id: 6, name: 'every-15', cron_expression: '*/15 * * * *' })];
render(<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(await screen.findByTitle('Edit'));
expect(screen.getByRole('radio', { name: 'Advanced' })).toHaveAttribute('aria-checked', 'true'); expect(screen.getByRole('radio', { name: 'Advanced' })).toHaveAttribute('aria-checked', 'true');