simplify project documentation component

SwissDataScienceCenter · Jan 10, 2025 · 52e620d · 52e620d
1 parent 2d76097
commit 52e620d
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 76 deletions.
diff --git 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 (
       <span ref={ref}>
         <Button color="outline-primary" disabled size="sm">
@@ -508,38 +494,22 @@ function EditSaveButton({
           className="me-2"
           onClick={() => {
             setEditMode(false);
-            setLocalDisabled(false);
             toggle();
           }}
         >
           Discard
         </Button>
         <Button
-          innerRef={saveButtonRef}
-          disabled={localDisabled}
           color="primary"
           size="sm"
           data-cy={`${dataCy}-save`}
           onClick={(event) => {
-            if (checksBeforeSave()) {
-              setEditMode(false);
-              (event.target as HTMLInputElement).form?.requestSubmit();
-            } else {
-              setChecksBeforeSaveTooltip(true);
-            }
+            setEditMode(false);
+            (event.target as HTMLInputElement).form?.requestSubmit();
           }}
         >
           Save
         </Button>
-        {checksBeforeSaveTooltip && localDisabled ? (
-          <Tooltip target={saveButtonRef} isOpen={true}>
-            {checksBeforeSaveTooltipMessage()}
-          </Tooltip>
-        ) : tooltipMessage ? (
-          <UncontrolledTooltip target={ref} delay={{ show: 500, hide: 50 }}>
-            {tooltipMessage}
-          </UncontrolledTooltip>
-        ) : null}
       </span>
     </>
   );

diff --git a/client/src/components/form-field/TextAreaInput.tsx b/client/src/components/form-field/TextAreaInput.tsx
@@ -111,11 +111,6 @@ interface TextAreaInputProps<T extends FieldValues> {
   name: string;
   register: UseFormRegisterReturn;
   required?: boolean;
-  wordCount?: (stats: {
-    exact: boolean;
-    characters: number;
-    words: number;
-  }) => void;
 }
 
 function TextAreaInput<T extends FieldValues>(props: TextAreaInputProps<T>) {

diff --git 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 }) {
               <FileEarmarkText className={cx("me-1", "bi")} />
               Documentation
             </h4>
-            <span>
-              {showEditor ? (
-                <span style={{ verticalAlign: "middle" }}>
-                  {characters} of about {charactersLimit} characters &nbsp;
-                </span>
-              ) : (
-                <></>
-              )}
-              <EditSaveButton
-                data-cy="project-documentation-edit"
-                toggle={toggle}
-                disabled={disabledSaveButton}
-                // tooltip="Save or discard your changes."
-                checksBeforeSave={() => {
-                  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.`
-                }
-              />
-            </span>
+            <EditSaveButton
+              data-cy="project-documentation-edit"
+              toggle={toggle}
+              disabled={disabledSaveButton}
+            />
           </div>
+          {updateProjectResult.error && (
+            <RtkOrNotebooksError error={updateProjectResult.error} />
+          )}
         </CardHeader>
         <CardBody>
           {showEditor ? (
@@ -127,7 +105,6 @@ export default function Documentation({ project }: { project: Project }) {
                 getValue={() => getValues("description")}
                 name="description"
                 register={descriptionField}
-                wordCount={wordCount}
               />
             </ListGroup>
           ) : (