feat: add validation when updating/creating notes that at least one label must be added (#359)

feat: add validation when updating/creating notes that at least one label must be added

Author: chmurson

src/components/NoteManager/components/NewNote.tsx

@@ -20,17 +20,27 @@ type NewNoteProps = {
 
 export const NewNote = ({ version, onCancel, onSave, selectionStart, selectionEnd }: NewNoteProps) => {
   const [noteContentError, setNoteContentError] = useState<string | null>(null);
+  const [noteLabelsError, setNoteLabelsError] = useState<string | null>(null);
   const [labels, setLabels] = useState<string[]>(["local"]);
 
   const latestOnCancel = useLatestCallback(onCancel);
   const latestOnSave = useLatestCallback(onSave);
 
+  const handleLabelsChange = useCallback((nextLabels: string[]) => {
+    setLabels(nextLabels);
+    if (nextLabels.length > 0) {
+      setNoteLabelsError(null);
+    }
+  }, []);
+
   const handleCancelClick = useCallback(() => {
     latestOnCancel.current();
   }, [latestOnCancel]);
 
   const handleSaveClick = useCallback(() => {
     const noteContent = textAreaRef.current?.value ?? "";
+    setNoteContentError(null);
+    setNoteLabelsError(null);
 
     const mathValidationError = validateMath(noteContent);
     if (mathValidationError) {
@@ -41,6 +51,10 @@ export const NewNote = ({ version, onCancel, onSave, selectionStart, selectionEn
       setNoteContentError("Note content cannot be empty");
       return;
     }
+    if (labels.length === 0) {
+      setNoteLabelsError("Select at least one label");
+      return;
+    }
 
     latestOnSave.current({ noteContent, labels });
   }, [latestOnSave, labels]);
@@ -56,7 +70,7 @@ export const NewNote = ({ version, onCancel, onSave, selectionStart, selectionEn
     noteDirty,
     currentVersionLink,
     handleCancelClick,
-    handleNoteLabelsChange: setLabels,
+    handleNoteLabelsChange: handleLabelsChange,
     handleSaveClick,
     originalVersionLink,
     selectionStart,
@@ -83,6 +97,7 @@ export const NewNote = ({ version, onCancel, onSave, selectionStart, selectionEn
           />
           {noteContentError ? <div className="validation-message">{noteContentError}</div> : null}
           <NoteLayout.Labels />
+          {noteLabelsError ? <div className="validation-message">{noteLabelsError}</div> : null}
           <div className="actions gap-2">
             <div className="fill" />
             <Button variant="tertiary" data-testid={"cancel-button"} onClick={handleCancelClick} size="sm">

src/components/NoteManager/components/Note.tsx

@@ -36,6 +36,7 @@ export function Note({ ref, note, active = false, sectionTitles, onEditNote, onD
   });
 
   const [noteContentError, setNoteContentError] = useState("");
+  const [noteLabelsError, setNoteLabelsError] = useState("");
   const { metadata } = useMetadataContext();
   const { version } = useVersionContext();
   const { getHashFromLocationParams } = useGetLocationParamsToHash();
@@ -46,6 +47,7 @@ export function Note({ ref, note, active = false, sectionTitles, onEditNote, onD
     const content = textAreaRef.current?.value ?? "";
     const mathValidationError = validateMath(content);
     setNoteContentError("");
+    setNoteLabelsError("");
 
     if (mathValidationError) {
       setNoteContentError(mathValidationError);
@@ -57,6 +59,11 @@ export function Note({ ref, note, active = false, sectionTitles, onEditNote, onD
       return;
     }
 
+    if (noteDirty.labels.length === 0) {
+      setNoteLabelsError("Select at least one label");
+      return;
+    }
+
     noteDirty.content = content;
 
     onEditNote(note, noteDirty);
@@ -70,10 +77,14 @@ export function Note({ ref, note, active = false, sectionTitles, onEditNote, onD
     setIsEditing(true);
     setNoteDirty({ ...note.original });
     setNoteContentError("");
+    setNoteLabelsError("");
   }, [note, isEditable]);
 
   const handleNoteLabelsChange = useCallback((labels: string[]) => {
     setNoteDirty((prevNoteDirty) => ({ ...prevNoteDirty, labels }));
+    if (labels.length > 0) {
+      setNoteLabelsError("");
+    }
   }, []);
 
   const handleDeleteClick = useCallback(() => {
@@ -82,6 +93,7 @@ export function Note({ ref, note, active = false, sectionTitles, onEditNote, onD
 
   const handleCancelClick = useCallback(() => {
     setNoteContentError("");
+    setNoteLabelsError("");
     setIsEditing(false);
   }, []);
 
@@ -284,6 +296,7 @@ export function Note({ ref, note, active = false, sectionTitles, onEditNote, onD
                 <NoteLayout.TextArea className={noteContentError ? "error" : ""} ref={textAreaRef} />
                 {noteContentError ? <div className="validation-message">{noteContentError}</div> : null}
                 <NoteLayout.Labels />
+                {noteLabelsError ? <div className="validation-message">{noteLabelsError}</div> : null}
                 <div className="actions gap-2">
                   <Button variant="ghost" intent="destructive" size="sm" onClick={handleDeleteClick}>
                     Delete