diff --git a/client/src/components/buttons/Button.tsx b/client/src/components/buttons/Button.tsx
index ac5792a6c..563617211 100644
--- a/client/src/components/buttons/Button.tsx
+++ b/client/src/components/buttons/Button.tsx
@@ -26,7 +26,7 @@ import { IconProp } from "@fortawesome/fontawesome-svg-core";
import { faSyncAlt } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import cx from "classnames";
-import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
+import { Fragment, ReactNode, useRef, useState } from "react";
import {
ArrowRight,
ChevronDown,
@@ -42,7 +42,6 @@ import {
Col,
DropdownMenu,
DropdownToggle,
- Tooltip,
UncontrolledDropdown,
UncontrolledTooltip,
} from "reactstrap";
@@ -449,29 +448,16 @@ interface EditSaveButtonProps {
"data-cy"?: string;
disabled?: boolean;
toggle: () => void;
- tooltipMessage?: string | null;
- checksBeforeSave?: () => boolean;
- checksBeforeSaveTooltipMessage?: () => string | null;
}
function EditSaveButton({
"data-cy": dataCy,
disabled,
toggle,
- tooltipMessage = null,
- checksBeforeSave = () => false,
- checksBeforeSaveTooltipMessage = () => null,
}: EditSaveButtonProps) {
- const [localDisabled, setLocalDisabled] = useState(disabled);
const ref = useRef(null);
- const saveButtonRef = useRef(null);
const [editMode, setEditMode] = useState(false);
- const [checksBeforeSaveTooltip, setChecksBeforeSaveTooltip] = useState(false);
- useEffect(() => {
- setLocalDisabled(disabled);
- }, [disabled]);
-
- if (!editMode && localDisabled)
+ if (disabled)
return (
- {checksBeforeSaveTooltip && localDisabled ? (
-
- {checksBeforeSaveTooltipMessage()}
-
- ) : tooltipMessage ? (
-
- {tooltipMessage}
-
- ) : null}
>
);
diff --git a/client/src/components/form-field/TextAreaInput.tsx b/client/src/components/form-field/TextAreaInput.tsx
index b997581bc..c3dd95fce 100644
--- a/client/src/components/form-field/TextAreaInput.tsx
+++ b/client/src/components/form-field/TextAreaInput.tsx
@@ -111,11 +111,6 @@ interface TextAreaInputProps {
name: string;
register: UseFormRegisterReturn;
required?: boolean;
- wordCount?: (stats: {
- exact: boolean;
- characters: number;
- words: number;
- }) => void;
}
function TextAreaInput(props: TextAreaInputProps) {
diff --git a/client/src/features/ProjectPageV2/ProjectPageContent/Documentation/Documentation.tsx b/client/src/features/ProjectPageV2/ProjectPageContent/Documentation/Documentation.tsx
index 2fc6e6780..d3595f6c8 100644
--- a/client/src/features/ProjectPageV2/ProjectPageContent/Documentation/Documentation.tsx
+++ b/client/src/features/ProjectPageV2/ProjectPageContent/Documentation/Documentation.tsx
@@ -21,21 +21,23 @@ import { useCallback, useState } from "react";
import { FileEarmarkText } from "react-bootstrap-icons";
import { Card, CardBody, CardHeader, ListGroup } from "reactstrap";
+import { useForm } from "react-hook-form";
import { EditSaveButton } from "../../../../components/buttons/Button";
+import { RtkOrNotebooksError } from "../../../../components/errors/RtkErrorAlert";
+import TextAreaInput from "../../../../components/form-field/TextAreaInput.tsx";
+import LazyRenkuMarkdown from "../../../../components/markdown/LazyRenkuMarkdown";
import { Project } from "../../../projectsV2/api/projectV2.api";
import { usePatchProjectsByProjectIdMutation } from "../../../projectsV2/api/projectV2.enhanced-api";
-import TextAreaInput from "../../../../components/form-field/TextAreaInput.tsx";
-import { useForm } from "react-hook-form";
-import LazyRenkuMarkdown from "../../../../components/markdown/LazyRenkuMarkdown";
interface DocumentationForm {
description: string;
}
export default function Documentation({ project }: { project: Project }) {
- const [updateProject] = usePatchProjectsByProjectIdMutation();
+ const [updateProject, updateProjectResult] =
+ usePatchProjectsByProjectIdMutation();
const [description, setDescription] = useState(project.documentation || "");
const { control, handleSubmit, setValue, getValues, register } =
@@ -59,15 +61,8 @@ export default function Documentation({ project }: { project: Project }) {
setValue("description", description);
};
- const markdownByteLimit = 20;
- const charactersLimit = Math.floor(((2 / 3) * markdownByteLimit) / 10) * 10;
- const [characters, setCharacters] = useState(0);
const [disabledSaveButton, setDisabledSaveButton] = useState(false);
- const wordCount = (stats: { characters: number; words: number }) => {
- setCharacters(stats.characters);
- };
-
const descriptionField = register("description");
{
const descriptionFieldTmp = descriptionField.onChange;
@@ -92,32 +87,15 @@ export default function Documentation({ project }: { project: Project }) {
Documentation
-
- {showEditor ? (
-
- {characters} of about {charactersLimit} characters
-
- ) : (
- <>>
- )}
- {
- if (getValues("description").length <= markdownByteLimit) {
- return true;
- }
- setDisabledSaveButton(true);
- return false;
- }}
- checksBeforeSaveTooltipMessage={() =>
- `Documentation is too long.\n The document can not be longer\nthan ${markdownByteLimit} bytes.`
- }
- />
-
+
+ {updateProjectResult.error && (
+
+ )}
{showEditor ? (
@@ -127,7 +105,6 @@ export default function Documentation({ project }: { project: Project }) {
getValue={() => getValues("description")}
name="description"
register={descriptionField}
- wordCount={wordCount}
/>
) : (