🔥(frontend) remove useless update title codes

We can now update the title directly in the header,
so we don't need the update title modal anymore.
We remove the buttons to trigger the modal
and the modal itself.

src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx

@@ -8,7 +8,6 @@ import {
   Doc,
   ModalRemoveDoc,
   ModalShare,
-  ModalUpdateDoc,
 } from '@/features/docs/doc-management';
 
 import { ModalPDF } from './ModalExport';
@@ -20,7 +19,6 @@ interface DocToolBoxProps {
 export const DocToolBox = ({ doc }: DocToolBoxProps) => {
   const { t } = useTranslation();
   const [isModalShareOpen, setIsModalShareOpen] = useState(false);
-  const [isModalUpdateOpen, setIsModalUpdateOpen] = useState(false);
   const [isModalRemoveOpen, setIsModalRemoveOpen] = useState(false);
   const [isModalPDFOpen, setIsModalPDFOpen] = useState(false);
   const [isDropOpen, setIsDropOpen] = useState(false);
@@ -53,32 +51,6 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
         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>
-          )}
           {doc.abilities.versions_list && (
             <Button
               onClick={() => {
@@ -116,6 +88,19 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
           >
             <Text $theme="primary">{t('Export')}</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>
       {isModalShareOpen && (
@@ -124,9 +109,6 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
       {isModalPDFOpen && (
         <ModalPDF onClose={() => setIsModalPDFOpen(false)} doc={doc} />
       )}
-      {isModalUpdateOpen && (
-        <ModalUpdateDoc onClose={() => setIsModalUpdateOpen(false)} doc={doc} />
-      )}
       {isModalRemoveOpen && (
         <ModalRemoveDoc onClose={() => setIsModalRemoveOpen(false)} doc={doc} />
       )}

src/frontend/apps/impress/src/features/docs/doc-management/components/InputDocName.tsx

@@ -1,54 +0,0 @@
-import { Input, Loader } from '@openfun/cunningham-react';
-import { useEffect, useState } from 'react';
-
-import { APIError } from '@/api';
-import { Box, TextErrors } from '@/components';
-
-interface InputDocNameProps {
-  error: APIError | null;
-  isError: boolean;
-  isPending: boolean;
-  label: string;
-  setDocName: (newDocName: string) => void;
-  defaultValue?: string;
-}
-
-export const InputDocName = ({
-  defaultValue,
-  error,
-  isError,
-  isPending,
-  label,
-  setDocName,
-}: InputDocNameProps) => {
-  const [isInputError, setIsInputError] = useState(isError);
-
-  useEffect(() => {
-    if (isError) {
-      setIsInputError(true);
-    }
-  }, [isError]);
-
-  return (
-    <>
-      <Input
-        fullWidth
-        type="text"
-        label={label}
-        defaultValue={defaultValue}
-        onChange={(e) => {
-          setDocName(e.target.value);
-          setIsInputError(false);
-        }}
-        rightIcon={<span className="material-icons">edit</span>}
-        state={isInputError ? 'error' : 'default'}
-      />
-      {isError && error && <TextErrors causes={error.cause} />}
-      {isPending && (
-        <Box $align="center">
-          <Loader />
-        </Box>
-      )}
-    </>
-  );
-};

src/frontend/apps/impress/src/features/docs/doc-management/components/ModalCreateUpdateDoc.tsx

@@ -1,176 +0,0 @@
-import {
-  Alert,
-  Button,
-  Modal,
-  ModalSize,
-  VariantType,
-  useToastProvider,
-} from '@openfun/cunningham-react';
-import { UseMutationResult } from '@tanstack/react-query';
-import { useRouter } from 'next/navigation';
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { APIError } from '@/api';
-import { Box, Text } from '@/components';
-import useCunninghamTheme from '@/cunningham/useCunninghamTheme';
-
-import { KEY_DOC, KEY_LIST_DOC } from '../api';
-import { useCreateDoc } from '../api/useCreateDoc';
-import { useUpdateDoc } from '../api/useUpdateDoc';
-import IconEdit from '../assets/icon-edit.svg';
-import { Doc } from '../types';
-
-import { InputDocName } from './InputDocName';
-
-interface ModalCreateDocProps {
-  onClose: () => void;
-}
-
-export const ModalCreateDoc = ({ onClose }: ModalCreateDocProps) => {
-  const router = useRouter();
-  const api = useCreateDoc({
-    onSuccess: (doc) => {
-      router.push(`/docs/${doc.id}`);
-    },
-  });
-  const { t } = useTranslation();
-
-  return (
-    <ModalDoc
-      {...{
-        buttonText: t('Create the document'),
-        onClose,
-        isPublic: false,
-        titleModal: t('Create a new document'),
-        validate: (title) =>
-          api.mutate({
-            title,
-          }),
-        ...api,
-      }}
-    />
-  );
-};
-
-interface ModalUpdateDocProps {
-  onClose: () => void;
-  doc: Doc;
-}
-
-export const ModalUpdateDoc = ({ onClose, doc }: ModalUpdateDocProps) => {
-  const { toast } = useToastProvider();
-  const { t } = useTranslation();
-
-  const api = useUpdateDoc({
-    onSuccess: () => {
-      toast(t('The document has been updated.'), VariantType.SUCCESS, {
-        duration: 4000,
-      });
-      onClose();
-    },
-    listInvalideQueries: [KEY_DOC, KEY_LIST_DOC],
-  });
-
-  return (
-    <ModalDoc
-      {...{
-        buttonText: t('Validate the modification'),
-        onClose,
-        initialTitle: doc.title,
-        infoText: t('Enter the new name of the selected document.'),
-        titleModal: t('Update document "{{documentTitle}}"', {
-          documentTitle: doc.title,
-        }),
-        validate: (title) =>
-          api.mutate({
-            title,
-            id: doc.id,
-          }),
-        ...api,
-      }}
-    />
-  );
-};
-
-type ModalDoc<T> = {
-  buttonText: string;
-  onClose: () => void;
-  titleModal: string;
-  validate: (title: string) => void;
-  initialTitle?: string;
-  infoText?: string;
-} & UseMutationResult<Doc, APIError<unknown>, T, unknown>;
-
-const ModalDoc = <T,>({
-  buttonText,
-  infoText,
-  initialTitle,
-  onClose,
-  titleModal,
-  validate,
-  ...api
-}: ModalDoc<T>) => {
-  const { colorsTokens } = useCunninghamTheme();
-  const { t } = useTranslation();
-  const [title, setTitle] = useState(initialTitle || '');
-
-  return (
-    <Modal
-      isOpen
-      closeOnClickOutside
-      hideCloseButton
-      leftActions={
-        <Button
-          aria-label={t('Close the modal')}
-          color="secondary"
-          fullWidth
-          onClick={() => onClose()}
-        >
-          {t('Cancel')}
-        </Button>
-      }
-      onClose={() => onClose()}
-      rightActions={
-        <Button
-          aria-label={buttonText}
-          color="primary"
-          fullWidth
-          onClick={() => validate(title)}
-        >
-          {buttonText}
-        </Button>
-      }
-      size={ModalSize.MEDIUM}
-      title={
-        <Box $align="center" $gap="1rem" $margin={{ bottom: '2.5rem' }}>
-          <IconEdit width={48} color={colorsTokens()['primary-text']} />
-          <Text as="h2" $size="h3" $margin="none">
-            {titleModal}
-          </Text>
-        </Box>
-      }
-    >
-      <Box $margin={{ bottom: 'xl' }} $gap="1rem">
-        {infoText && (
-          <Alert canClose={false} type={VariantType.INFO}>
-            <Text>{infoText}</Text>
-          </Alert>
-        )}
-
-        <Box $gap="1rem">
-          <InputDocName
-            label={t('Document name')}
-            defaultValue={title}
-            {...{
-              error: api.error,
-              isError: api.isError,
-              isPending: api.isPending,
-              setDocName: setTitle,
-            }}
-          />
-        </Box>
-      </Box>
-    </Modal>
-  );
-};

src/frontend/apps/impress/src/features/docs/doc-management/components/index.ts

@@ -1,3 +1,2 @@
-export * from './ModalCreateUpdateDoc';
 export * from './ModalRemoveDoc';
 export * from './ModalShare';

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

@@ -2,12 +2,7 @@ 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';
+import { Doc, ModalRemoveDoc } from '@/features/docs/doc-management';
 
 interface DocsGridActionsProps {
   doc: Doc;
@@ -15,58 +10,24 @@ interface DocsGridActionsProps {
 
 export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
   const { t } = useTranslation();
-  const [isModalUpdateOpen, setIsModalUpdateOpen] = useState(false);
   const [isModalRemoveOpen, setIsModalRemoveOpen] = useState(false);
-  const [isDropOpen, setIsDropOpen] = useState(false);
 
-  if (!doc.abilities.partial_update && !doc.abilities.destroy) {
+  if (!doc.abilities.destroy) {
     return null;
   }
 
   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} />
-      )}
+      <Button
+        onClick={() => {
+          setIsModalRemoveOpen(true);
+        }}
+        color="tertiary-text"
+        icon={<span className="material-icons">delete</span>}
+        size="small"
+        style={{ padding: '0rem' }}
+        aria-label={t('Delete the document')}
+      />
       {isModalRemoveOpen && (
         <ModalRemoveDoc onClose={() => setIsModalRemoveOpen(false)} doc={doc} />
       )}