Disable the per-file Delete button of a read-only repository

Motivation:

The file list of the repository tree page offers a Delete button for every
file, and it stayed enabled while the repository or its project was read-only.
Pressing it opened the confirmation modal and the delete only failed once the
server rejected it.

Modifications:

- Disable the Delete button of `FileList` when the repository is read-only, and
  explain why on hover, like the other write actions.
- Keep the copy actions available, as they do not write.

Result:

- A read-only repository no longer offers a delete that is bound to fail.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: ikhoon

webapp/src/dogma/features/file/FileList.tsx

@@ -9,6 +9,7 @@ import {
   MenuButton,
   MenuItem,
   MenuList,
+  Tooltip,
   useDisclosure,
 } from '@chakra-ui/react';
 import { ColumnDef, createColumnHelper } from '@tanstack/react-table';
@@ -20,6 +21,7 @@ import { CopySupport } from 'dogma/features/file/CopySupport';
 import React, { useCallback, useMemo, useState } from 'react';
 import { MdDelete } from 'react-icons/md';
 import { DeleteFileModal } from 'dogma/common/components/editor/DeleteFileModal';
+import { useReadOnly } from 'dogma/features/repo/useReadOnly';
 
 export type FileListProps<Data extends object> = {
   data: Data[];
@@ -42,6 +44,7 @@ const FileList = <Data extends object>({
 }: FileListProps<Data>) => {
   const columnHelper = createColumnHelper<FileDto>();
   const slug = `/app/projects/${projectName}/repos/${repoName}/files/${revision}${path}`;
+  const [readOnly, readOnlyHint] = useReadOnly(projectName, repoName);
 
   const { isOpen: isDeleteModalOpen, onOpen: onDeleteModalOpen, onClose: onDeleteModalClose } = useDisclosure();
   const [deletePath, setDeletePath] = useState('');
@@ -112,21 +115,36 @@ const FileList = <Data extends object>({
                 </Menu>
               </WrapItem>
             </Wrap>
-            <Button
-              onClick={() => onClickDelete(info.row.original.path)}
-              leftIcon={<MdDelete />}
-              colorScheme="red"
-              size="sm"
-            >
-              Delete
-            </Button>
+            <Tooltip label={readOnlyHint} isDisabled={!readOnly}>
+              <Box>
+                <Button
+                  onClick={() => onClickDelete(info.row.original.path)}
+                  isDisabled={readOnly}
+                  leftIcon={<MdDelete />}
+                  colorScheme="red"
+                  size="sm"
+                >
+                  Delete
+                </Button>
+              </Box>
+            </Tooltip>
           </HStack>
         ),
         header: 'Actions',
         enableSorting: false,
       }),
     ],
-    [columnHelper, copySupport, directoryPath, projectName, repoName, slug, onClickDelete],
+    [
+      columnHelper,
+      copySupport,
+      directoryPath,
+      projectName,
+      repoName,
+      slug,
+      onClickDelete,
+      readOnly,
+      readOnlyHint,
+    ],
   );
   return (
     <Box>

webapp/tests/dogma/feature/file/FileListReadOnly.test.tsx

@@ -0,0 +1,81 @@
+import { screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWithProviders } from 'dogma/util/test-utils';
+import FileList from 'dogma/features/file/FileList';
+import { CopySupport } from 'dogma/features/file/CopySupport';
+import { PROJECT_READ_ONLY_HINT, REPO_READ_ONLY_HINT } from 'dogma/features/repo/useReadOnly';
+import { useGetProjectsQuery, useGetReposQuery } from 'dogma/features/api/apiSlice';
+
+jest.mock('dogma/features/api/apiSlice', () => ({
+  ...jest.requireActual('dogma/features/api/apiSlice'),
+  useGetProjectsQuery: jest.fn(),
+  useGetReposQuery: jest.fn(),
+}));
+
+const copySupport: CopySupport = {
+  handleApiUrl: jest.fn(),
+  handleWebUrl: jest.fn(),
+  handleAsCliCommand: jest.fn(),
+  handleAsCurlCommand: jest.fn(),
+};
+
+const data = [
+  { revision: 6, path: '/hello.txt', type: 'TEXT', url: '/api/v1/projects/foo/repos/bar/contents/hello.txt' },
+];
+
+const renderFileList = (projectStatus: string, repoStatus: string) => {
+  (useGetProjectsQuery as jest.Mock).mockReturnValue({ data: [{ name: 'foo', status: projectStatus }] });
+  (useGetReposQuery as jest.Mock).mockReturnValue({ data: [{ name: 'bar', status: repoStatus }] });
+  return renderWithProviders(
+    <FileList
+      data={data}
+      projectName="foo"
+      repoName="bar"
+      path=""
+      directoryPath="/app/projects/foo/repos/bar/tree/head"
+      revision="head"
+      copySupport={copySupport}
+    />,
+  );
+};
+
+const deleteButton = () => screen.getByRole('button', { name: 'Delete' });
+
+describe('FileList delete action', () => {
+  beforeEach(() => jest.clearAllMocks());
+
+  it('offers Delete on a writable repository', () => {
+    renderFileList('WRITABLE', 'WRITABLE');
+    expect(deleteButton()).toBeEnabled();
+  });
+
+  it('disables Delete when the repository is read-only', async () => {
+    renderFileList('WRITABLE', 'READ_ONLY');
+    expect(deleteButton()).toBeDisabled();
+
+    await userEvent.hover(deleteButton().parentElement);
+    expect(await screen.findByRole('tooltip')).toHaveTextContent(REPO_READ_ONLY_HINT);
+  });
+
+  it('disables Delete when the whole project is read-only', async () => {
+    renderFileList('READ_ONLY', 'READ_ONLY');
+    expect(deleteButton()).toBeDisabled();
+
+    await userEvent.hover(deleteButton().parentElement);
+    expect(await screen.findByRole('tooltip')).toHaveTextContent(PROJECT_READ_ONLY_HINT);
+  });
+
+  it('does not open the delete confirmation while read-only', async () => {
+    renderFileList('WRITABLE', 'READ_ONLY');
+
+    await userEvent.click(deleteButton());
+
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('keeps the copy actions available while read-only', () => {
+    renderFileList('WRITABLE', 'READ_ONLY');
+    const row = screen.getByText('hello.txt').closest('tr');
+    expect(within(row).getByRole('button', { name: /Copy/ })).toBeEnabled();
+  });
+});