✨(frontend) add doc grid actions button

Add document action buttons to the document grid:
- update document
- delete document

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx

@@ -17,6 +17,8 @@ import {
 
 import { PAGE_SIZE } from '../conf';
 
+import { DocsGridActions } from './DocsGridActions';
+
 const DocsGridStyle = createGlobalStyle`
   & .c__datagrid{
     max-height: 91%;
@@ -191,6 +193,12 @@ export const DocsGrid = () => {
               );
             },
           },
+          {
+            id: 'column-actions',
+            renderCell: ({ row }) => {
+              return <DocsGridActions doc={row} />;
+            },
+          },
         ]}
         rows={docs}
         isLoading={isLoading}

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx

@@ -0,0 +1,71 @@
+import { Button } from '@openfun/cunningham-react';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Box, DropButton, IconOptions, Text } from '@/components';
+import {
+  Doc,
+  ModalRemoveDoc,
+  ModalUpdateDoc,
+} from '@/features/docs/doc-management';
+
+interface DocsGridActionsProps {
+  doc: Doc;
+}
+
+export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
+  const { t } = useTranslation();
+  const [isModalUpdateOpen, setIsModalUpdateOpen] = useState(false);
+  const [isModalRemoveOpen, setIsModalRemoveOpen] = useState(false);
+  const [isDropOpen, setIsDropOpen] = useState(false);
+
+  return (
+    <>
+      <DropButton
+        button={
+          <IconOptions
+            isOpen={isDropOpen}
+            aria-label={t('Open the document options')}
+          />
+        }
+        onOpenChange={(isOpen) => setIsDropOpen(isOpen)}
+        isOpen={isDropOpen}
+      >
+        <Box>
+          {doc.abilities.partial_update && (
+            <Button
+              onClick={() => {
+                setIsModalUpdateOpen(true);
+                setIsDropOpen(false);
+              }}
+              color="primary-text"
+              icon={<span className="material-icons">edit</span>}
+              size="small"
+            >
+              <Text $theme="primary">{t('Update document')}</Text>
+            </Button>
+          )}
+          {doc.abilities.destroy && (
+            <Button
+              onClick={() => {
+                setIsModalRemoveOpen(true);
+                setIsDropOpen(false);
+              }}
+              color="primary-text"
+              icon={<span className="material-icons">delete</span>}
+              size="small"
+            >
+              <Text $theme="primary">{t('Delete document')}</Text>
+            </Button>
+          )}
+        </Box>
+      </DropButton>
+      {isModalUpdateOpen && (
+        <ModalUpdateDoc onClose={() => setIsModalUpdateOpen(false)} doc={doc} />
+      )}
+      {isModalRemoveOpen && (
+        <ModalRemoveDoc onClose={() => setIsModalRemoveOpen(false)} doc={doc} />
+      )}
+    </>
+  );
+};