refactor: hide edit button for users with no write permissions

This commit is contained in:
Carlos Valente
2026-02-19 16:00:12 +01:00
committed by Carlos Valente
parent d28895ce9c
commit 1c81b3a23c
2 changed files with 18 additions and 10 deletions
@@ -46,6 +46,7 @@ export default function CuesheetTableSettings({
handleResetReordering, handleResetReordering,
handleClearToggles, handleClearToggles,
}: CuesheetTableSettingsProps) { }: CuesheetTableSettingsProps) {
const canChangeMode = useCuesheetPermissions((state) => state.canChangeMode);
const canShare = useCuesheetPermissions((state) => state.canShare); const canShare = useCuesheetPermissions((state) => state.canShare);
const preset = use(PresetContext); const preset = use(PresetContext);
const options = usePersistedCuesheetOptions(); const options = usePersistedCuesheetOptions();
@@ -71,14 +72,20 @@ export default function CuesheetTableSettings({
handleResetReordering={handleResetReordering} handleResetReordering={handleResetReordering}
handleClearToggles={handleClearToggles} handleClearToggles={handleClearToggles}
/> />
<ToggleGroup value={[cuesheetMode]} onValueChange={toggleCuesheetMode} className={cx([style.group, style.apart])}> {canChangeMode && (
<Toolbar.Button render={<Toggle />} value={AppMode.Run} className={style.radioButton}> <ToggleGroup
Run value={[cuesheetMode]}
</Toolbar.Button> onValueChange={toggleCuesheetMode}
<Toolbar.Button render={<Toggle />} value={AppMode.Edit} className={style.radioButton}> className={cx([style.group, style.apart])}
Edit >
</Toolbar.Button> <Toolbar.Button render={<Toggle />} value={AppMode.Run} className={style.radioButton}>
</ToggleGroup> Run
</Toolbar.Button>
<Toolbar.Button render={<Toggle />} value={AppMode.Edit} className={style.radioButton}>
Edit
</Toolbar.Button>
</ToggleGroup>
)}
{canShare && ( {canShare && (
<> <>
+3 -2
View File
@@ -165,8 +165,9 @@ test.describe('Sharing from cuesheet', () => {
await expect(page.getByTestId('navigation__toggle-settings')).toBeHidden(); await expect(page.getByTestId('navigation__toggle-settings')).toBeHidden();
await expect(page.getByRole('button', { name: 'Share...' })).toBeHidden(); await expect(page.getByRole('button', { name: 'Share...' })).toBeHidden();
// check that we are locked and cannot edit // mode toggle should not be rendered for readonly users
await page.getByRole('button', { name: 'Edit' }).click(); await expect(page.getByRole('button', { name: 'Edit' })).toHaveCount(0);
await expect(page.getByRole('button', { name: 'Run' })).toHaveCount(0);
// Verify that the title is visible but not editable // Verify that the title is visible but not editable
await expect(page.getByTestId('cuesheet-event').getByText('title 1')).toBeVisible(); await expect(page.getByTestId('cuesheet-event').getByText('title 1')).toBeVisible();