From c77c2c1fae1a12022efb08ece0451ddf8184ac7b Mon Sep 17 00:00:00 2001
From: Lars Reimann <mail@larsreimann.com>
Date: Sun, 3 Jul 2022 21:26:00 +0200
Subject: [PATCH 1/6] feat(gui): comments for annotations

---
 .../batchforms/DestinationBatchForm.tsx       |  92 -------------
 .../annotations/batchforms/EmptyBatchForm.tsx |  65 ----------
 .../annotations/batchforms/MoveBatchForm.tsx  | 108 +++++++++++++++-
 .../batchforms/OldNewBatchForm.tsx            | 105 ---------------
 .../batchforms/RemoveBatchForm.tsx            |  90 ++++++++++++-
 .../batchforms/RenameBatchForm.tsx            | 121 +++++++++++++++++-
 .../annotations/batchforms/ValueBatchForm.tsx |  10 ++
 .../annotations/forms/BoundaryForm.tsx        |  52 +++++---
 .../annotations/forms/CalledAfterForm.tsx     |  10 +-
 .../annotations/forms/DescriptionForm.tsx     |  16 ++-
 .../features/annotations/forms/EnumForm.tsx   |  19 ++-
 .../features/annotations/forms/GroupForm.tsx  |  36 ++++--
 .../features/annotations/forms/MoveForm.tsx   |  19 ++-
 .../features/annotations/forms/RenameForm.tsx |  18 ++-
 .../features/annotations/forms/TodoForm.tsx   |  16 ++-
 .../features/annotations/forms/ValueForm.tsx  |  60 +++++----
 .../versioning/AnnotationStoreV2.ts           |   5 +
 17 files changed, 498 insertions(+), 344 deletions(-)
 delete mode 100644 api-editor/gui/src/features/annotations/batchforms/DestinationBatchForm.tsx
 delete mode 100644 api-editor/gui/src/features/annotations/batchforms/EmptyBatchForm.tsx
 delete mode 100644 api-editor/gui/src/features/annotations/batchforms/OldNewBatchForm.tsx

diff --git a/api-editor/gui/src/features/annotations/batchforms/DestinationBatchForm.tsx b/api-editor/gui/src/features/annotations/batchforms/DestinationBatchForm.tsx
deleted file mode 100644
index a7384dfba..000000000
--- a/api-editor/gui/src/features/annotations/batchforms/DestinationBatchForm.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { FormControl, FormErrorIcon, FormErrorMessage, FormLabel, Input, Text as ChakraText } from '@chakra-ui/react';
-import React, { useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { useAppDispatch } from '../../../app/hooks';
-import { PythonDeclaration } from '../../packageData/model/PythonDeclaration';
-import { AnnotationBatchForm } from './AnnotationBatchForm';
-import { hideAnnotationForm } from '../../ui/uiSlice';
-import { ConfirmAnnotations } from './ConfirmAnnotations';
-
-interface DestinationBatchFormProps {
-    targets: PythonDeclaration[];
-    annotationType: string;
-    description: string;
-    onUpsertAnnotation: (data: DestinationBatchFormState) => void;
-}
-
-export interface DestinationBatchFormState {
-    destination: string;
-}
-
-export const DestinationBatchForm: React.FC<DestinationBatchFormProps> = function ({
-    targets,
-    annotationType,
-    description,
-    onUpsertAnnotation,
-}) {
-    const dispatch = useAppDispatch();
-
-    const {
-        handleSubmit,
-        register,
-        formState: { errors },
-    } = useForm<DestinationBatchFormState>({
-        defaultValues: {
-            destination: '',
-        },
-    });
-
-    let [confirmWindowVisible, setConfirmWindowVisible] = useState(false);
-    let [data, setData] = useState<DestinationBatchFormState>({ destination: '' });
-
-    // Event handlers ----------------------------------------------------------
-
-    const handleSave = (annotationData: DestinationBatchFormState) => {
-        onUpsertAnnotation({ ...annotationData });
-
-        setConfirmWindowVisible(false);
-        dispatch(hideAnnotationForm());
-    };
-
-    const handleConfirm = (newData: DestinationBatchFormState) => {
-        setData(newData);
-        setConfirmWindowVisible(true);
-    };
-
-    const handleCancel = () => {
-        dispatch(hideAnnotationForm());
-    };
-    // Rendering -------------------------------------------------------------------------------------------------------
-
-    return (
-        <>
-            <AnnotationBatchForm
-                heading={`Add @${annotationType} Annotations`}
-                description={description}
-                onConfirm={handleSubmit(handleConfirm)}
-                onCancel={handleCancel}
-            >
-                <FormControl isInvalid={Boolean(errors?.destination)}>
-                    <FormLabel>Destination module:</FormLabel>
-                    <Input
-                        {...register('destination', {
-                            required: 'This is required.',
-                        })}
-                    />
-                    <FormErrorMessage>
-                        <FormErrorIcon /> {errors.destination?.message}
-                    </FormErrorMessage>
-                </FormControl>
-
-                <ChakraText>This will annotate classes and global functions.</ChakraText>
-            </AnnotationBatchForm>
-            {confirmWindowVisible && (
-                <ConfirmAnnotations
-                    targets={targets}
-                    handleSave={() => handleSave(data)}
-                    setConfirmVisible={setConfirmWindowVisible}
-                />
-            )}
-        </>
-    );
-};
diff --git a/api-editor/gui/src/features/annotations/batchforms/EmptyBatchForm.tsx b/api-editor/gui/src/features/annotations/batchforms/EmptyBatchForm.tsx
deleted file mode 100644
index 79dd5211a..000000000
--- a/api-editor/gui/src/features/annotations/batchforms/EmptyBatchForm.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { FormLabel } from '@chakra-ui/react';
-import React, { useState } from 'react';
-import { useAppDispatch } from '../../../app/hooks';
-import { PythonDeclaration } from '../../packageData/model/PythonDeclaration';
-import { AnnotationBatchForm } from './AnnotationBatchForm';
-import { hideAnnotationForm } from '../../ui/uiSlice';
-import { ConfirmAnnotations } from './ConfirmAnnotations';
-
-interface EmptyBatchFormProps {
-    targets: PythonDeclaration[];
-    annotationType: string;
-    description: string;
-    onUpsertAnnotation: () => void;
-    targetLabel: string;
-}
-
-export const EmptyBatchForm: React.FC<EmptyBatchFormProps> = function ({
-    targets,
-    annotationType,
-    description,
-    onUpsertAnnotation,
-    targetLabel,
-}) {
-    const dispatch = useAppDispatch();
-
-    let [confirmWindowVisible, setConfirmWindowVisible] = useState(false);
-
-    // Event handlers ----------------------------------------------------------
-
-    const handleSave = () => {
-        onUpsertAnnotation();
-
-        setConfirmWindowVisible(false);
-        dispatch(hideAnnotationForm());
-    };
-
-    const handleConfirm = () => {
-        setConfirmWindowVisible(true);
-    };
-
-    const handleCancel = () => {
-        dispatch(hideAnnotationForm());
-    };
-    // Rendering -------------------------------------------------------------------------------------------------------
-
-    return (
-        <>
-            <AnnotationBatchForm
-                heading={`Add @${annotationType} Annotations`}
-                description={description}
-                onConfirm={handleConfirm}
-                onCancel={handleCancel}
-            >
-                <FormLabel>{targetLabel}</FormLabel>
-            </AnnotationBatchForm>
-            {confirmWindowVisible && (
-                <ConfirmAnnotations
-                    targets={targets}
-                    handleSave={() => handleSave()}
-                    setConfirmVisible={setConfirmWindowVisible}
-                />
-            )}
-        </>
-    );
-};
diff --git a/api-editor/gui/src/features/annotations/batchforms/MoveBatchForm.tsx b/api-editor/gui/src/features/annotations/batchforms/MoveBatchForm.tsx
index 0e4f98e86..c6651c32d 100644
--- a/api-editor/gui/src/features/annotations/batchforms/MoveBatchForm.tsx
+++ b/api-editor/gui/src/features/annotations/batchforms/MoveBatchForm.tsx
@@ -1,11 +1,23 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useAppDispatch } from '../../../app/hooks';
 import { PythonDeclaration } from '../../packageData/model/PythonDeclaration';
 import { PythonClass } from '../../packageData/model/PythonClass';
-import { DestinationBatchForm, DestinationBatchFormState } from './DestinationBatchForm';
 import { PythonFunction } from '../../packageData/model/PythonFunction';
 import { MoveAnnotation } from '../versioning/AnnotationStoreV2';
 import { upsertMoveAnnotations } from '../annotationSlice';
+import { hideAnnotationForm } from '../../ui/uiSlice';
+import { AnnotationBatchForm } from './AnnotationBatchForm';
+import { ConfirmAnnotations } from './ConfirmAnnotations';
+import {
+    FormControl,
+    FormErrorIcon,
+    FormErrorMessage,
+    FormLabel,
+    Input,
+    Text as ChakraText,
+    Textarea,
+} from '@chakra-ui/react';
+import { useForm } from 'react-hook-form';
 
 interface MoveBatchFormProps {
     targets: PythonDeclaration[];
@@ -28,6 +40,7 @@ export const MoveBatchForm: React.FC<MoveBatchFormProps> = function ({ targets }
             all.push({
                 target: targetPath,
                 destination: data.destination,
+                comment: data.comment,
             });
         });
         dispatch(upsertMoveAnnotations(all));
@@ -44,3 +57,94 @@ export const MoveBatchForm: React.FC<MoveBatchFormProps> = function ({ targets }
         />
     );
 };
+
+interface DestinationBatchFormProps {
+    targets: PythonDeclaration[];
+    annotationType: string;
+    description: string;
+    onUpsertAnnotation: (data: DestinationBatchFormState) => void;
+}
+
+export interface DestinationBatchFormState {
+    destination: string;
+    comment: string;
+}
+
+export const DestinationBatchForm: React.FC<DestinationBatchFormProps> = function ({
+                                                                                       targets,
+                                                                                       annotationType,
+                                                                                       description,
+                                                                                       onUpsertAnnotation,
+                                                                                   }) {
+    const dispatch = useAppDispatch();
+
+    const {
+        handleSubmit,
+        register,
+        formState: { errors },
+    } = useForm<DestinationBatchFormState>({
+        defaultValues: {
+            destination: '',
+            comment: '',
+        },
+    });
+
+    let [confirmWindowVisible, setConfirmWindowVisible] = useState(false);
+    let [data, setData] = useState<DestinationBatchFormState>({ destination: '', comment: '' });
+
+    // Event handlers ----------------------------------------------------------
+
+    const handleSave = (annotationData: DestinationBatchFormState) => {
+        onUpsertAnnotation({ ...annotationData });
+
+        setConfirmWindowVisible(false);
+        dispatch(hideAnnotationForm());
+    };
+
+    const handleConfirm = (newData: DestinationBatchFormState) => {
+        setData(newData);
+        setConfirmWindowVisible(true);
+    };
+
+    const handleCancel = () => {
+        dispatch(hideAnnotationForm());
+    };
+    // Rendering -------------------------------------------------------------------------------------------------------
+
+    return (
+        <>
+            <AnnotationBatchForm
+                heading={`Add @${annotationType} Annotations`}
+                description={description}
+                onConfirm={handleSubmit(handleConfirm)}
+                onCancel={handleCancel}
+            >
+                <FormControl isInvalid={Boolean(errors?.destination)}>
+                    <FormLabel>Destination module:</FormLabel>
+                    <Input
+                        {...register('destination', {
+                            required: 'This is required.',
+                        })}
+                    />
+                    <FormErrorMessage>
+                        <FormErrorIcon /> {errors.destination?.message}
+                    </FormErrorMessage>
+                </FormControl>
+
+                <FormControl>
+                    <FormLabel>Comment:</FormLabel>
+                    <Textarea {...register('comment')}/>
+                </FormControl>
+
+                <ChakraText>This will annotate classes and global functions.</ChakraText>
+            </AnnotationBatchForm>
+            {confirmWindowVisible && (
+                <ConfirmAnnotations
+                    targets={targets}
+                    handleSave={() => handleSave(data)}
+                    setConfirmVisible={setConfirmWindowVisible}
+                />
+            )}
+        </>
+    );
+};
diff --git a/api-editor/gui/src/features/annotations/batchforms/OldNewBatchForm.tsx b/api-editor/gui/src/features/annotations/batchforms/OldNewBatchForm.tsx
deleted file mode 100644
index 099dff9e7..000000000
--- a/api-editor/gui/src/features/annotations/batchforms/OldNewBatchForm.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { FormControl, FormErrorIcon, FormErrorMessage, FormLabel, Input, Text as ChakraText } from '@chakra-ui/react';
-import React, { useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { useAppDispatch } from '../../../app/hooks';
-import { PythonDeclaration } from '../../packageData/model/PythonDeclaration';
-import { AnnotationBatchForm } from './AnnotationBatchForm';
-import { hideAnnotationForm } from '../../ui/uiSlice';
-import { ConfirmAnnotations } from './ConfirmAnnotations';
-
-interface OldNewBatchFormProps {
-    targets: PythonDeclaration[];
-    annotationType: string;
-    description: string;
-    onUpsertAnnotation: (data: OldNewBatchFormState) => void;
-}
-
-export interface OldNewBatchFormState {
-    oldString: string;
-    newString: string;
-}
-
-export const OldNewBatchForm: React.FC<OldNewBatchFormProps> = function ({
-    targets,
-    annotationType,
-    description,
-    onUpsertAnnotation,
-}) {
-    const dispatch = useAppDispatch();
-
-    const {
-        handleSubmit,
-        register,
-        formState: { errors },
-    } = useForm<OldNewBatchFormState>({
-        defaultValues: {
-            oldString: '',
-            newString: '',
-        },
-    });
-
-    const [confirmWindowVisible, setConfirmWindowVisible] = useState(false);
-    const [data, setData] = useState<OldNewBatchFormState>({ oldString: '', newString: '' });
-
-    const filteredTargets = targets.filter((t) => t.name !== t.name.replace(data.oldString, data.newString));
-
-    // Event handlers ----------------------------------------------------------
-
-    const handleSave = (annotationData: OldNewBatchFormState) => {
-        onUpsertAnnotation({ ...annotationData });
-
-        setConfirmWindowVisible(false);
-        dispatch(hideAnnotationForm());
-    };
-
-    const handleConfirm = (newData: OldNewBatchFormState) => {
-        setData(newData);
-        setConfirmWindowVisible(true);
-    };
-
-    const handleCancel = () => {
-        dispatch(hideAnnotationForm());
-    };
-
-    // Rendering -------------------------------------------------------------------------------------------------------
-
-    return (
-        <>
-            <AnnotationBatchForm
-                heading={`Add @${annotationType} Annotations`}
-                description={description}
-                onConfirm={handleSubmit(handleConfirm)}
-                onCancel={handleCancel}
-            >
-                <FormControl isInvalid={Boolean(errors.oldString)}>
-                    <FormLabel>String to be replaced:</FormLabel>
-                    <Input
-                        {...register('oldString', {
-                            required: 'This is required.',
-                        })}
-                    />
-                    <FormErrorMessage>
-                        <FormErrorIcon /> {errors.oldString?.message}
-                    </FormErrorMessage>
-                </FormControl>
-
-                <FormControl isInvalid={Boolean(errors.newString)}>
-                    <FormLabel>Replacement String:</FormLabel>
-                    <Input {...register('newString')} />
-                    <FormErrorMessage>
-                        <FormErrorIcon /> {errors.newString?.message}
-                    </FormErrorMessage>
-                </FormControl>
-
-                <ChakraText>This will annotate classes, functions, and parameters.</ChakraText>
-            </AnnotationBatchForm>
-            {confirmWindowVisible && (
-                <ConfirmAnnotations
-                    targets={filteredTargets}
-                    handleSave={() => handleSave(data)}
-                    setConfirmVisible={setConfirmWindowVisible}
-                />
-            )}
-        </>
-    );
-};
diff --git a/api-editor/gui/src/features/annotations/batchforms/RemoveBatchForm.tsx b/api-editor/gui/src/features/annotations/batchforms/RemoveBatchForm.tsx
index 2f7ab26c2..a395ab400 100644
--- a/api-editor/gui/src/features/annotations/batchforms/RemoveBatchForm.tsx
+++ b/api-editor/gui/src/features/annotations/batchforms/RemoveBatchForm.tsx
@@ -1,11 +1,15 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useAppDispatch } from '../../../app/hooks';
 import { PythonDeclaration } from '../../packageData/model/PythonDeclaration';
-import { EmptyBatchForm } from './EmptyBatchForm';
 import { PythonClass } from '../../packageData/model/PythonClass';
 import { PythonFunction } from '../../packageData/model/PythonFunction';
 import { RemoveAnnotation } from '../versioning/AnnotationStoreV2';
 import { addRemoveAnnotations } from '../annotationSlice';
+import { FormControl, FormLabel, Textarea } from '@chakra-ui/react';
+import { AnnotationBatchForm } from './AnnotationBatchForm';
+import { hideAnnotationForm } from '../../ui/uiSlice';
+import { ConfirmAnnotations } from './ConfirmAnnotations';
+import { useForm } from 'react-hook-form';
 
 interface RemoveBatchFormProps {
     targets: PythonDeclaration[];
@@ -20,11 +24,12 @@ export const RemoveBatchForm: React.FC<RemoveBatchFormProps> = function ({ targe
 
     // Event handlers --------------------------------------------------------------------------------------------------
 
-    const handleUpsertAnnotation = () => {
+    const handleUpsertAnnotation = (data: EmptyBatchFormState) => {
         const all: RemoveAnnotation[] = [];
         targetPaths.forEach((targetPath) => {
             all.push({
                 target: targetPath,
+                comment: data.comment,
             });
         });
         dispatch(addRemoveAnnotations(all));
@@ -42,3 +47,82 @@ export const RemoveBatchForm: React.FC<RemoveBatchFormProps> = function ({ targe
         />
     );
 };
+
+interface EmptyBatchFormProps {
+    targets: PythonDeclaration[];
+    annotationType: string;
+    description: string;
+    onUpsertAnnotation: (data: EmptyBatchFormState) => void;
+    targetLabel: string;
+}
+
+export interface EmptyBatchFormState {
+    comment: string;
+}
+
+export const EmptyBatchForm: React.FC<EmptyBatchFormProps> = function ({
+    targets,
+    annotationType,
+    description,
+    onUpsertAnnotation,
+    targetLabel,
+}) {
+    const dispatch = useAppDispatch();
+
+    const {
+        handleSubmit,
+        register,
+    } = useForm<EmptyBatchFormState>({
+        defaultValues: {
+            comment: '',
+        },
+    });
+
+    const [data, setData] = useState<EmptyBatchFormState>({ comment: '' });
+
+    let [confirmWindowVisible, setConfirmWindowVisible] = useState(false);
+
+    // Event handlers ----------------------------------------------------------
+
+    const handleSave = (newData: EmptyBatchFormState) => {
+        onUpsertAnnotation(newData);
+
+        setConfirmWindowVisible(false);
+        dispatch(hideAnnotationForm());
+    };
+
+    const handleConfirm = (newData: EmptyBatchFormState) => {
+        setData(newData);
+        setConfirmWindowVisible(true);
+    };
+
+    const handleCancel = () => {
+        dispatch(hideAnnotationForm());
+    };
+    // Rendering -------------------------------------------------------------------------------------------------------
+
+    return (
+        <>
+            <AnnotationBatchForm
+                heading={`Add @${annotationType} Annotations`}
+                description={description}
+                onConfirm={handleSubmit(handleConfirm)}
+                onCancel={handleCancel}
+            >
+                <FormControl>
+                    <FormLabel>Comment:</FormLabel>
+                    <Textarea {...register('comment')} />
+                </FormControl>
+
+                <FormLabel>{targetLabel}</FormLabel>
+            </AnnotationBatchForm>
+            {confirmWindowVisible && (
+                <ConfirmAnnotations
+                    targets={targets}
+                    handleSave={() => handleSave(data)}
+                    setConfirmVisible={setConfirmWindowVisible}
+                />
+            )}
+        </>
+    );
+};
diff --git a/api-editor/gui/src/features/annotations/batchforms/RenameBatchForm.tsx b/api-editor/gui/src/features/annotations/batchforms/RenameBatchForm.tsx
index 7f094aad8..2a2e0eea9 100644
--- a/api-editor/gui/src/features/annotations/batchforms/RenameBatchForm.tsx
+++ b/api-editor/gui/src/features/annotations/batchforms/RenameBatchForm.tsx
@@ -1,12 +1,24 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useAppDispatch } from '../../../app/hooks';
 import { PythonDeclaration } from '../../packageData/model/PythonDeclaration';
-import { OldNewBatchForm, OldNewBatchFormState } from './OldNewBatchForm';
 import { PythonClass } from '../../packageData/model/PythonClass';
 import { PythonFunction } from '../../packageData/model/PythonFunction';
 import { PythonParameter } from '../../packageData/model/PythonParameter';
 import { RenameAnnotation } from '../versioning/AnnotationStoreV2';
 import { upsertRenameAnnotations } from '../annotationSlice';
+import {
+    FormControl,
+    FormErrorIcon,
+    FormErrorMessage,
+    FormLabel,
+    Input,
+    Text as ChakraText,
+    Textarea,
+} from '@chakra-ui/react';
+import { useForm } from 'react-hook-form';
+import { AnnotationBatchForm } from './AnnotationBatchForm';
+import { hideAnnotationForm } from '../../ui/uiSlice';
+import { ConfirmAnnotations } from './ConfirmAnnotations';
 
 interface RenameBatchFormProps {
     targets: PythonDeclaration[];
@@ -29,6 +41,7 @@ export const RenameBatchForm: React.FC<RenameBatchFormProps> = function ({ targe
                 all.push({
                     target: t.id,
                     newName: t.name.replace(data.oldString, data.newString),
+                    comment: data.comment,
                 });
             }
         });
@@ -46,3 +59,107 @@ export const RenameBatchForm: React.FC<RenameBatchFormProps> = function ({ targe
         />
     );
 };
+
+interface OldNewBatchFormProps {
+    targets: PythonDeclaration[];
+    annotationType: string;
+    description: string;
+    onUpsertAnnotation: (data: OldNewBatchFormState) => void;
+}
+
+export interface OldNewBatchFormState {
+    oldString: string;
+    newString: string;
+    comment: string;
+}
+
+export const OldNewBatchForm: React.FC<OldNewBatchFormProps> = function ({
+    targets,
+    annotationType,
+    description,
+    onUpsertAnnotation,
+}) {
+    const dispatch = useAppDispatch();
+
+    const {
+        handleSubmit,
+        register,
+        formState: { errors },
+    } = useForm<OldNewBatchFormState>({
+        defaultValues: {
+            oldString: '',
+            newString: '',
+            comment: '',
+        },
+    });
+
+    const [confirmWindowVisible, setConfirmWindowVisible] = useState(false);
+    const [data, setData] = useState<OldNewBatchFormState>({ oldString: '', newString: '', comment: '' });
+
+    const filteredTargets = targets.filter((t) => t.name !== t.name.replace(data.oldString, data.newString));
+
+    // Event handlers ----------------------------------------------------------
+
+    const handleSave = (annotationData: OldNewBatchFormState) => {
+        onUpsertAnnotation({ ...annotationData });
+
+        setConfirmWindowVisible(false);
+        dispatch(hideAnnotationForm());
+    };
+
+    const handleConfirm = (newData: OldNewBatchFormState) => {
+        setData(newData);
+        setConfirmWindowVisible(true);
+    };
+
+    const handleCancel = () => {
+        dispatch(hideAnnotationForm());
+    };
+
+    // Rendering -------------------------------------------------------------------------------------------------------
+
+    return (
+        <>
+            <AnnotationBatchForm
+                heading={`Add @${annotationType} Annotations`}
+                description={description}
+                onConfirm={handleSubmit(handleConfirm)}
+                onCancel={handleCancel}
+            >
+                <FormControl isInvalid={Boolean(errors.oldString)}>
+                    <FormLabel>String to be replaced:</FormLabel>
+                    <Input
+                        {...register('oldString', {
+                            required: 'This is required.',
+                        })}
+                    />
+                    <FormErrorMessage>
+                        <FormErrorIcon /> {errors.oldString?.message}
+                    </FormErrorMessage>
+                </FormControl>
+
+                <FormControl isInvalid={Boolean(errors.newString)}>
+                    <FormLabel>Replacement String:</FormLabel>
+                    <Input {...register('newString')} />
+                    <FormErrorMessage>
+                        <FormErrorIcon /> {errors.newString?.message}
+                    </FormErrorMessage>
+                </FormControl>
+
+                <FormControl>
+                    <FormLabel>Comment:</FormLabel>
+                    <Textarea {...register('comment')} />
+                </FormControl>
+
+                <ChakraText>This will annotate classes, functions, and parameters.</ChakraText>
+            </AnnotationBatchForm>
+            {confirmWindowVisible && (
+                <ConfirmAnnotations
+                    targets={filteredTargets}
+                    handleSave={() => handleSave(data)}
+                    setConfirmVisible={setConfirmWindowVisible}
+                />
+            )}
+        </>
+    );
+};
diff --git a/api-editor/gui/src/features/annotations/batchforms/ValueBatchForm.tsx b/api-editor/gui/src/features/annotations/batchforms/ValueBatchForm.tsx
index 4b58454cd..92e0bced2 100644
--- a/api-editor/gui/src/features/annotations/batchforms/ValueBatchForm.tsx
+++ b/api-editor/gui/src/features/annotations/batchforms/ValueBatchForm.tsx
@@ -24,6 +24,7 @@ import {
     Select,
     Stack,
     Text as ChakraText,
+    Textarea,
 } from '@chakra-ui/react';
 import { useForm } from 'react-hook-form';
 import { booleanPattern, numberPattern } from '../../../common/validation';
@@ -54,6 +55,7 @@ export const ValueBatchForm: React.FC<ValueBatchFormProps> = function ({ targets
                 variant: data.variant,
                 defaultValueType: data.defaultValueType,
                 defaultValue: data.defaultValue,
+                comment: data.comment,
             });
         });
         dispatch(upsertValueAnnotations(all));
@@ -80,6 +82,7 @@ export interface TypeValueBatchFormState {
     variant: ValueAnnotationVariant;
     defaultValueType: DefaultValueType;
     defaultValue: DefaultValue;
+    comment: string;
 }
 
 export const TypeValueBatchForm: React.FC<TypeValueBatchFormProps> = function ({
@@ -100,6 +103,7 @@ export const TypeValueBatchForm: React.FC<TypeValueBatchFormProps> = function ({
             variant: 'optional',
             defaultValueType: 'string',
             defaultValue: '',
+            comment: '',
         },
     });
 
@@ -111,6 +115,7 @@ export const TypeValueBatchForm: React.FC<TypeValueBatchFormProps> = function ({
         variant: 'optional',
         defaultValueType: 'string',
         defaultValue: '',
+        comment: '',
     });
 
     // Event handlers ----------------------------------------------------------
@@ -230,6 +235,11 @@ export const TypeValueBatchForm: React.FC<TypeValueBatchFormProps> = function ({
                     </FormControl>
                 )}
 
+                <FormControl>
+                    <FormLabel>Comment:</FormLabel>
+                    <Textarea {...register('comment')} />
+                </FormControl>
+
                 <ChakraText>This will annotate parameters.</ChakraText>
             </AnnotationBatchForm>
             {confirmWindowVisible && (
diff --git a/api-editor/gui/src/features/annotations/forms/BoundaryForm.tsx b/api-editor/gui/src/features/annotations/forms/BoundaryForm.tsx
index 3fd4dfc68..74f2c0c75 100644
--- a/api-editor/gui/src/features/annotations/forms/BoundaryForm.tsx
+++ b/api-editor/gui/src/features/annotations/forms/BoundaryForm.tsx
@@ -14,6 +14,7 @@ import {
     Select,
     Stack,
     Text as ChakraText,
+    Textarea,
 } from '@chakra-ui/react';
 import React, { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
@@ -23,7 +24,7 @@ import { PythonDeclaration } from '../../packageData/model/PythonDeclaration';
 import { AnnotationForm } from './AnnotationForm';
 import { Optional } from '../../../common/util/types';
 import { hideAnnotationForm } from '../../ui/uiSlice';
-import { ComparisonOperator, Interval } from '../versioning/AnnotationStoreV2';
+import { BoundaryAnnotation, ComparisonOperator } from '../versioning/AnnotationStoreV2';
 import { selectBoundaryAnnotation, upsertBoundaryAnnotation } from '../annotationSlice';
 
 interface BoundaryFormProps {
@@ -38,23 +39,25 @@ interface BoundaryFormState {
         upperIntervalLimit: Optional<number>;
         upperLimitType: ComparisonOperator;
     };
+    comment: string;
 }
 
-const initialFormState = function (previousInterval: Optional<Interval>): BoundaryFormState {
+const initialFormState = function (previousAnnotation: BoundaryAnnotation | void): BoundaryFormState {
     return {
         interval: {
-            isDiscrete: previousInterval?.isDiscrete ?? false,
-            lowerIntervalLimit: previousInterval?.lowerIntervalLimit ?? 0,
-            lowerLimitType: previousInterval?.lowerLimitType ?? ComparisonOperator.LESS_THAN_OR_EQUALS,
-            upperIntervalLimit: previousInterval?.upperIntervalLimit ?? 1,
-            upperLimitType: previousInterval?.upperLimitType ?? ComparisonOperator.LESS_THAN_OR_EQUALS,
+            isDiscrete: previousAnnotation?.interval?.isDiscrete ?? false,
+            lowerIntervalLimit: previousAnnotation?.interval?.lowerIntervalLimit ?? 0,
+            lowerLimitType: previousAnnotation?.interval?.lowerLimitType ?? ComparisonOperator.LESS_THAN_OR_EQUALS,
+            upperIntervalLimit: previousAnnotation?.interval?.upperIntervalLimit ?? 1,
+            upperLimitType: previousAnnotation?.interval?.upperLimitType ?? ComparisonOperator.LESS_THAN_OR_EQUALS,
         },
+        comment: previousAnnotation?.comment ?? '',
     };
 };
 
 export const BoundaryForm: React.FC<BoundaryFormProps> = function ({ target }) {
     const targetPath = target.id;
-    const prevInterval = useAppSelector(selectBoundaryAnnotation(targetPath))?.interval;
+    const previousAnnotation = useAppSelector(selectBoundaryAnnotation(targetPath));
 
     // Hooks -----------------------------------------------------------------------------------------------------------
 
@@ -68,13 +71,13 @@ export const BoundaryForm: React.FC<BoundaryFormProps> = function ({ target }) {
         setValue,
         formState: { errors },
     } = useForm<BoundaryFormState>({
-        defaultValues: initialFormState(prevInterval),
+        defaultValues: initialFormState(previousAnnotation),
         shouldFocusError: false,
     });
 
     useEffect(() => {
-        reset(initialFormState(prevInterval));
-    }, [reset, prevInterval]);
+        reset(initialFormState(previousAnnotation));
+    }, [reset, previousAnnotation]);
 
     // Event handlers --------------------------------------------------------------------------------------------------
 
@@ -93,6 +96,7 @@ export const BoundaryForm: React.FC<BoundaryFormProps> = function ({ target }) {
                     upperIntervalLimit: data.interval.upperIntervalLimit ?? 0,
                     upperLimitType: data.interval.upperLimitType,
                 },
+                comment: data.comment,
             }),
         );
         dispatch(hideAnnotationForm());
@@ -142,18 +146,23 @@ export const BoundaryForm: React.FC<BoundaryFormProps> = function ({ target }) {
 
     return (
         <AnnotationForm
-            heading={`${prevInterval ? 'Edit' : 'Add'} @boundary Annotation`}
+            heading={`${previousAnnotation ? 'Edit' : 'Add'} @boundary Annotation`}
             description="Specify the interval of valid values of this numeric parameter."
             onSave={handleSubmit(onSave)}
             onCancel={onCancel}
         >
-            <FormLabel>Type of boundary of &quot;{target.name}&quot;:</FormLabel>
-            <RadioGroup defaultValue={prevInterval?.isDiscrete.toString() || 'false'} onChange={handleIsDiscreteChange}>
-                <Stack direction="column">
-                    <Radio value="false">Continuous</Radio>
-                    <Radio value="true">Discrete</Radio>
-                </Stack>
-            </RadioGroup>
+            <FormControl>
+                <FormLabel>Type of boundary of &quot;{target.name}&quot;:</FormLabel>
+                <RadioGroup
+                    defaultValue={previousAnnotation?.interval?.isDiscrete.toString() || 'false'}
+                    onChange={handleIsDiscreteChange}
+                >
+                    <Stack direction="column">
+                        <Radio value="false">Continuous</Radio>
+                        <Radio value="true">Discrete</Radio>
+                    </Stack>
+                </RadioGroup>
+            </FormControl>
 
             <HStack spacing="10px" alignItems="flexStart">
                 <FormControl isInvalid={Boolean(errors?.interval?.lowerIntervalLimit)}>
@@ -258,6 +267,11 @@ export const BoundaryForm: React.FC<BoundaryFormProps> = function ({ target }) {
                     </FormErrorMessage>
                 </FormControl>
             </HStack>
+
+            <FormControl>
+                <FormLabel>Comment:</FormLabel>
+                <Textarea {...register('comment')}/>
+            </FormControl>
         </AnnotationForm>
     );
 };
diff --git a/api-editor/gui/src/features/annotations/forms/CalledAfterForm.tsx b/api-editor/gui/src/features/annotations/forms/CalledAfterForm.tsx
index bc75a96c2..594c786fe 100644
--- a/api-editor/gui/src/features/annotations/forms/CalledAfterForm.tsx
+++ b/api-editor/gui/src/features/annotations/forms/CalledAfterForm.tsx
@@ -1,4 +1,4 @@
-import { FormControl, FormErrorIcon, FormErrorMessage, FormLabel, Select } from '@chakra-ui/react';
+import { FormControl, FormErrorIcon, FormErrorMessage, FormLabel, Select, Textarea } from '@chakra-ui/react';
 import React, { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useAppDispatch, useAppSelector } from '../../../app/hooks';
@@ -13,6 +13,7 @@ interface CalledAfterFormProps {
 
 interface CalledAfterFormState {
     calledAfterName: string;
+    comment: string;
 }
 
 export const CalledAfterForm: React.FC<CalledAfterFormProps> = function ({ target }) {
@@ -36,6 +37,7 @@ export const CalledAfterForm: React.FC<CalledAfterFormProps> = function ({ targe
     } = useForm<CalledAfterFormState>({
         defaultValues: {
             calledAfterName: '',
+            comment: '',
         },
     });
 
@@ -50,6 +52,7 @@ export const CalledAfterForm: React.FC<CalledAfterFormProps> = function ({ targe
     useEffect(() => {
         reset({
             calledAfterName: '',
+            comment: '',
         });
     }, [reset]);
 
@@ -95,6 +98,11 @@ export const CalledAfterForm: React.FC<CalledAfterFormProps> = function ({ targe
                     <FormErrorIcon /> {errors?.calledAfterName?.message}
                 </FormErrorMessage>
             </FormControl>
+
+            <FormControl>
+                <FormLabel>Comment:</FormLabel>
+                <Textarea {...register('comment')}/>
+            </FormControl>
         </AnnotationForm>
     );
 };
diff --git a/api-editor/gui/src/features/annotations/forms/DescriptionForm.tsx b/api-editor/gui/src/features/annotations/forms/DescriptionForm.tsx
index ca418b3c2..dcb6a4355 100644
--- a/api-editor/gui/src/features/annotations/forms/DescriptionForm.tsx
+++ b/api-editor/gui/src/features/annotations/forms/DescriptionForm.tsx
@@ -15,11 +15,12 @@ interface DescriptionFormProps {
 
 interface DescriptionFormState {
     newDescription: string;
+    comment: string;
 }
 
 export const DescriptionForm: React.FC<DescriptionFormProps> = function ({ target }) {
     const targetPath = target.id;
-    const prevNewDescription = useAppSelector(selectDescriptionAnnotation(targetPath))?.newDescription;
+    const previousAnnotation = useAppSelector(selectDescriptionAnnotation(targetPath));
     const oldDescription = target.description;
 
     // Hooks -----------------------------------------------------------------------------------------------------------
@@ -28,6 +29,7 @@ export const DescriptionForm: React.FC<DescriptionFormProps> = function ({ targe
     const { register, handleSubmit, setFocus, reset } = useForm<DescriptionFormState>({
         defaultValues: {
             newDescription: '',
+            comment: '',
         },
     });
 
@@ -41,9 +43,10 @@ export const DescriptionForm: React.FC<DescriptionFormProps> = function ({ targe
 
     useEffect(() => {
         reset({
-            newDescription: prevNewDescription ?? oldDescription,
+            newDescription: previousAnnotation?.newDescription ?? oldDescription,
+            comment: previousAnnotation?.comment ?? '',
         });
-    }, [reset, prevNewDescription, oldDescription]);
+    }, [reset, previousAnnotation, oldDescription]);
 
     // Event handlers --------------------------------------------------------------------------------------------------
 
@@ -65,7 +68,7 @@ export const DescriptionForm: React.FC<DescriptionFormProps> = function ({ targe
 
     return (
         <AnnotationForm
-            heading={`${prevNewDescription ? 'Edit' : 'Add'} @description Annotation`}
+            heading={`${previousAnnotation ? 'Edit' : 'Add'} @description Annotation`}
             description="Change the description of this declaration."
             onSave={handleSubmit(onSave)}
             onCancel={onCancel}
@@ -74,6 +77,11 @@ export const DescriptionForm: React.FC<DescriptionFormProps> = function ({ targe
                 <FormLabel>New description for "{target.name}":</FormLabel>
                 <Textarea {...register('newDescription')} />
             </FormControl>
+
+            <FormControl>
+                <FormLabel>Comment:</FormLabel>
+                <Textarea {...register('comment')}/>
+            </FormControl>
         </AnnotationForm>
     );
 };
diff --git a/api-editor/gui/src/features/annotations/forms/EnumForm.tsx b/api-editor/gui/src/features/annotations/forms/EnumForm.tsx
index 53ee40b6a..94f21b7e4 100644
--- a/api-editor/gui/src/features/annotations/forms/EnumForm.tsx
+++ b/api-editor/gui/src/features/annotations/forms/EnumForm.tsx
@@ -7,6 +7,7 @@ import {
     IconButton,
     Input,
     Text,
+    Textarea,
 } from '@chakra-ui/react';
 import React, { useEffect } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
@@ -28,13 +29,14 @@ interface EnumFormState {
         stringValue: string;
         instanceName: string;
     }[];
+    comment: string;
 }
 
 export const EnumForm: React.FC<EnumFormProps> = function ({ target }) {
     const targetPath = target.id;
 
     // Hooks -----------------------------------------------------------------------------------------------------------
-    const enumDefinition = useAppSelector(selectEnumAnnotation(target.id));
+    const previousAnnotation = useAppSelector(selectEnumAnnotation(target.id));
     const dispatch = useAppDispatch();
 
     const {
@@ -53,6 +55,7 @@ export const EnumForm: React.FC<EnumFormProps> = function ({ target }) {
                     instanceName: '',
                 },
             ],
+            comment: '',
         },
     });
     const { fields, append, remove } = useFieldArray({
@@ -70,15 +73,16 @@ export const EnumForm: React.FC<EnumFormProps> = function ({ target }) {
 
     useEffect(() => {
         reset({
-            enumName: enumDefinition?.enumName ?? '',
-            pairs: enumDefinition?.pairs ?? [
+            enumName: previousAnnotation?.enumName ?? '',
+            pairs: previousAnnotation?.pairs ?? [
                 {
                     stringValue: '',
                     instanceName: '',
                 },
             ],
+            comment: previousAnnotation?.comment ?? '',
         });
-    }, [reset, enumDefinition, targetPath]);
+    }, [reset, previousAnnotation, targetPath]);
 
     // Event handlers --------------------------------------------------------------------------------------------------
 
@@ -113,7 +117,7 @@ export const EnumForm: React.FC<EnumFormProps> = function ({ target }) {
 
     return (
         <AnnotationForm
-            heading={`${enumDefinition ? 'Edit' : 'Add'} @enum Annotation`}
+            heading={`${previousAnnotation ? 'Edit' : 'Add'} @enum Annotation`}
             description="Replace this string parameter with an enum parameter."
             onSave={handleSubmit(onSave)}
             onCancel={onCancel}
@@ -177,6 +181,11 @@ export const EnumForm: React.FC<EnumFormProps> = function ({ target }) {
                     />
                 </HStack>
             ))}
+
+            <FormControl>
+                <FormLabel>Comment:</FormLabel>
+                <Textarea {...register('comment')}/>
+            </FormControl>
         </AnnotationForm>
     );
 };
diff --git a/api-editor/gui/src/features/annotations/forms/GroupForm.tsx b/api-editor/gui/src/features/annotations/forms/GroupForm.tsx
index 1ae3ffbba..ac61aab0c 100644
--- a/api-editor/gui/src/features/annotations/forms/GroupForm.tsx
+++ b/api-editor/gui/src/features/annotations/forms/GroupForm.tsx
@@ -1,4 +1,13 @@
-import { Checkbox, FormControl, FormErrorIcon, FormErrorMessage, FormLabel, Input, VStack } from '@chakra-ui/react';
+import {
+    Checkbox,
+    FormControl,
+    FormErrorIcon,
+    FormErrorMessage,
+    FormLabel,
+    Input,
+    Textarea,
+    VStack,
+} from '@chakra-ui/react';
 import React, { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useAppDispatch, useAppSelector } from '../../../app/hooks';
@@ -20,19 +29,20 @@ interface GroupFormState {
     groupName: string;
     parameters: { [name: string]: boolean };
     dummy: string;
+    comment: string;
 }
 
 export const GroupForm: React.FC<GroupFormProps> = function ({ target, groupName }) {
     const targetPath = target.id;
     const currentGroups = useAppSelector(selectGroupAnnotations(targetPath));
-    let prevGroupAnnotation: GroupAnnotation | undefined;
+    let previousAnnotation: GroupAnnotation | undefined;
     if (groupName && currentGroups) {
-        prevGroupAnnotation = currentGroups[groupName];
+        previousAnnotation = currentGroups[groupName];
     }
     let otherGroupNames: string[] = [];
     if (currentGroups) {
         otherGroupNames = Object.values(currentGroups)
-            .filter((group) => group.groupName !== prevGroupAnnotation?.groupName)
+            .filter((group) => group.groupName !== previousAnnotation?.groupName)
             .map((group) => group.groupName);
     }
 
@@ -59,7 +69,7 @@ export const GroupForm: React.FC<GroupFormProps> = function ({ target, groupName
     };
 
     const isCurrentGroup = (key: string) =>
-        prevGroupAnnotation && (!currentGroups || currentGroups[key]?.groupName === prevGroupAnnotation.groupName);
+        previousAnnotation && (!currentGroups || currentGroups[key]?.groupName === previousAnnotation.groupName);
 
     const getSelectedParameters = (): string[] =>
         Object.entries(getValues('parameters'))
@@ -82,6 +92,7 @@ export const GroupForm: React.FC<GroupFormProps> = function ({ target, groupName
         defaultValues: {
             groupName: '',
             parameters: {},
+            comment: '',
         },
     });
 
@@ -95,15 +106,16 @@ export const GroupForm: React.FC<GroupFormProps> = function ({ target, groupName
 
     useEffect(() => {
         const prevParameters: { [name: string]: boolean } = {};
-        prevGroupAnnotation?.parameters?.forEach((name) => {
+        previousAnnotation?.parameters?.forEach((name) => {
             prevParameters[name] = true;
         });
 
         reset({
-            groupName: prevGroupAnnotation?.groupName || '',
+            groupName: previousAnnotation?.groupName || '',
             parameters: prevParameters,
+            comment: previousAnnotation?.comment || '',
         });
-    }, [reset, prevGroupAnnotation]);
+    }, [reset, previousAnnotation]);
 
     // Event handlers --------------------------------------------------------------------------------------------------
 
@@ -113,6 +125,7 @@ export const GroupForm: React.FC<GroupFormProps> = function ({ target, groupName
                 target: targetPath,
                 groupName: data.groupName,
                 parameters: getSelectedParameters(),
+                comment: data.comment,
             }),
         );
         dispatch(hideAnnotationForm());
@@ -126,7 +139,7 @@ export const GroupForm: React.FC<GroupFormProps> = function ({ target, groupName
 
     return (
         <AnnotationForm
-            heading={`${prevGroupAnnotation ? 'Edit' : 'Add'} @group Annotation`}
+            heading={`${previousAnnotation ? 'Edit' : 'Add'} @group Annotation`}
             description="Replace multiple parameters of this function with a parameter object."
             onSave={handleSubmit(onSave)}
             onCancel={onCancel}
@@ -167,6 +180,11 @@ export const GroupForm: React.FC<GroupFormProps> = function ({ target, groupName
                     {errors.dummy && 'At least one parameter needs to be selected.'}
                 </FormErrorMessage>
             </FormControl>
+
+            <FormControl>
+                <FormLabel>Comment:</FormLabel>
+                <Textarea {...register('comment')}/>
+            </FormControl>
         </AnnotationForm>
     );
 };
diff --git a/api-editor/gui/src/features/annotations/forms/MoveForm.tsx b/api-editor/gui/src/features/annotations/forms/MoveForm.tsx
index abf6acd8d..7ed1922d7 100644
--- a/api-editor/gui/src/features/annotations/forms/MoveForm.tsx
+++ b/api-editor/gui/src/features/annotations/forms/MoveForm.tsx
@@ -1,4 +1,4 @@
-import { FormControl, FormErrorIcon, FormErrorMessage, FormLabel, Input } from '@chakra-ui/react';
+import { FormControl, FormErrorIcon, FormErrorMessage, FormLabel, Input, Textarea } from '@chakra-ui/react';
 import React, { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useAppDispatch, useAppSelector } from '../../../app/hooks';
@@ -14,11 +14,12 @@ interface MoveFormProps {
 
 interface MoveFormState {
     destination: string;
+    comment: string;
 }
 
 export const MoveForm: React.FC<MoveFormProps> = function ({ target }) {
     const targetPath = target.id;
-    const prevDestination = useAppSelector(selectMoveAnnotation(targetPath))?.destination;
+    const previousAnnotation = useAppSelector(selectMoveAnnotation(targetPath));
     const oldModulePath = target?.parent()?.name;
 
     // Hooks -----------------------------------------------------------------------------------------------------------
@@ -33,6 +34,7 @@ export const MoveForm: React.FC<MoveFormProps> = function ({ target }) {
     } = useForm<MoveFormState>({
         defaultValues: {
             destination: '',
+            comment: '',
         },
     });
 
@@ -46,9 +48,11 @@ export const MoveForm: React.FC<MoveFormProps> = function ({ target }) {
 
     useEffect(() => {
         reset({
-            destination: prevDestination || oldModulePath,
+            destination: previousAnnotation?.destination ?? oldModulePath,
+            comment: previousAnnotation?.comment ?? '',
+
         });
-    }, [reset, prevDestination, oldModulePath]);
+    }, [reset, previousAnnotation, oldModulePath]);
 
     // Event handlers --------------------------------------------------------------------------------------------------
 
@@ -70,7 +74,7 @@ export const MoveForm: React.FC<MoveFormProps> = function ({ target }) {
 
     return (
         <AnnotationForm
-            heading={`${prevDestination ? 'Edit' : 'Add'} @move Annotation`}
+            heading={`${previousAnnotation ? 'Edit' : 'Add'} @move Annotation`}
             description="Move this global declaration to another module."
             onSave={handleSubmit(onSave)}
             onCancel={onCancel}
@@ -87,6 +91,11 @@ export const MoveForm: React.FC<MoveFormProps> = function ({ target }) {
                     <FormErrorIcon /> {errors.destination?.message}
                 </FormErrorMessage>
             </FormControl>
+
+            <FormControl>
+                <FormLabel>Comment:</FormLabel>
+                <Textarea {...register('comment')}/>
+            </FormControl>
         </AnnotationForm>
     );
 };
diff --git a/api-editor/gui/src/features/annotations/forms/RenameForm.tsx b/api-editor/gui/src/features/annotations/forms/RenameForm.tsx
index 0558dddba..c8b46301a 100644
--- a/api-editor/gui/src/features/annotations/forms/RenameForm.tsx
+++ b/api-editor/gui/src/features/annotations/forms/RenameForm.tsx
@@ -1,4 +1,4 @@
-import { FormControl, FormErrorIcon, FormErrorMessage, FormLabel, Input } from '@chakra-ui/react';
+import { FormControl, FormErrorIcon, FormErrorMessage, FormLabel, Input, Textarea } from '@chakra-ui/react';
 import React, { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useAppDispatch, useAppSelector } from '../../../app/hooks';
@@ -14,11 +14,12 @@ interface RenameFormProps {
 
 interface RenameFormState {
     newName: string;
+    comment: string;
 }
 
 export const RenameForm: React.FC<RenameFormProps> = function ({ target }) {
     const targetPath = target.id;
-    const prevNewName = useAppSelector(selectRenameAnnotation(targetPath))?.newName;
+    const previousAnnotation = useAppSelector(selectRenameAnnotation(targetPath));
     const oldName = target.name;
 
     // Hooks -----------------------------------------------------------------------------------------------------------
@@ -33,6 +34,7 @@ export const RenameForm: React.FC<RenameFormProps> = function ({ target }) {
     } = useForm<RenameFormState>({
         defaultValues: {
             newName: '',
+            comment: '',
         },
     });
 
@@ -46,9 +48,10 @@ export const RenameForm: React.FC<RenameFormProps> = function ({ target }) {
 
     useEffect(() => {
         reset({
-            newName: prevNewName || oldName,
+            newName: previousAnnotation?.newName ?? oldName,
+            comment: previousAnnotation?.comment ?? '',
         });
-    }, [reset, prevNewName, oldName]);
+    }, [reset, previousAnnotation, oldName]);
 
     // Event handlers --------------------------------------------------------------------------------------------------
 
@@ -70,7 +73,7 @@ export const RenameForm: React.FC<RenameFormProps> = function ({ target }) {
 
     return (
         <AnnotationForm
-            heading={`${prevNewName ? 'Edit' : 'Add'} @rename Annotation`}
+            heading={`${previousAnnotation ? 'Edit' : 'Add'} @rename Annotation`}
             description="Change the name of this declaration."
             onSave={handleSubmit(onSave)}
             onCancel={onCancel}
@@ -87,6 +90,11 @@ export const RenameForm: React.FC<RenameFormProps> = function ({ target }) {
                     <FormErrorIcon /> {errors.newName?.message}
                 </FormErrorMessage>
             </FormControl>
+
+            <FormControl>
+                <FormLabel>Comment:</FormLabel>
+                <Textarea {...register('comment')}/>
+            </FormControl>
         </AnnotationForm>
     );
 };
diff --git a/api-editor/gui/src/features/annotations/forms/TodoForm.tsx b/api-editor/gui/src/features/annotations/forms/TodoForm.tsx
index 2ffd61e9b..2a5092608 100644
--- a/api-editor/gui/src/features/annotations/forms/TodoForm.tsx
+++ b/api-editor/gui/src/features/annotations/forms/TodoForm.tsx
@@ -13,11 +13,12 @@ interface TodoFormProps {
 
 interface TodoFormState {
     newTodo: string;
+    comment: string;
 }
 
 export const TodoForm: React.FC<TodoFormProps> = function ({ target }) {
     const targetPath = target.id;
-    const prevNewTodo = useAppSelector(selectTodoAnnotation(targetPath))?.newTodo;
+    const previousAnnotation = useAppSelector(selectTodoAnnotation(targetPath));
 
     // Hooks -----------------------------------------------------------------------------------------------------------
 
@@ -31,6 +32,7 @@ export const TodoForm: React.FC<TodoFormProps> = function ({ target }) {
     } = useForm<TodoFormState>({
         defaultValues: {
             newTodo: '',
+            comment: '',
         },
     });
 
@@ -44,9 +46,10 @@ export const TodoForm: React.FC<TodoFormProps> = function ({ target }) {
 
     useEffect(() => {
         reset({
-            newTodo: prevNewTodo ?? '',
+            newTodo: previousAnnotation?.newTodo ?? '',
+            comment: previousAnnotation?.comment ?? '',
         });
-    }, [reset, prevNewTodo]);
+    }, [reset, previousAnnotation]);
 
     // Event handlers --------------------------------------------------------------------------------------------------
 
@@ -68,7 +71,7 @@ export const TodoForm: React.FC<TodoFormProps> = function ({ target }) {
 
     return (
         <AnnotationForm
-            heading={`${prevNewTodo ? 'Edit' : 'Add'} @todo Annotation`}
+            heading={`${previousAnnotation ? 'Edit' : 'Add'} @todo Annotation`}
             description="Note additional (manual) changes you need to make to this declaration."
             onSave={handleSubmit(onSave)}
             onCancel={onCancel}
@@ -84,6 +87,11 @@ export const TodoForm: React.FC<TodoFormProps> = function ({ target }) {
                     <FormErrorIcon /> {errors.newTodo?.message}
                 </FormErrorMessage>
             </FormControl>
+
+            <FormControl>
+                <FormLabel>Comment:</FormLabel>
+                <Textarea {...register('comment')}/>
+            </FormControl>
         </AnnotationForm>
     );
 };
diff --git a/api-editor/gui/src/features/annotations/forms/ValueForm.tsx b/api-editor/gui/src/features/annotations/forms/ValueForm.tsx
index 9069d6832..4236de3b8 100644
--- a/api-editor/gui/src/features/annotations/forms/ValueForm.tsx
+++ b/api-editor/gui/src/features/annotations/forms/ValueForm.tsx
@@ -17,13 +17,19 @@ import {
     RadioGroup,
     Select,
     Stack,
+    Textarea,
 } from '@chakra-ui/react';
 import { useForm } from 'react-hook-form';
 import { Optional } from '../../../common/util/types';
 import { booleanPattern, numberPattern } from '../../../common/validation';
 import { AnnotationForm } from './AnnotationForm';
 import { hideAnnotationForm } from '../../ui/uiSlice';
-import { DefaultValue, DefaultValueType, ValueAnnotationVariant } from '../versioning/AnnotationStoreV2';
+import {
+    DefaultValue,
+    DefaultValueType,
+    ValueAnnotation,
+    ValueAnnotationVariant,
+} from '../versioning/AnnotationStoreV2';
 
 interface ValueFormProps {
     target: PythonDeclaration;
@@ -31,10 +37,7 @@ interface ValueFormProps {
 
 export const ValueForm: React.FC<ValueFormProps> = function ({ target }) {
     // Hooks -----------------------------------------------------------------------------------------------------------
-    const valueAnnotation = useAppSelector(selectValueAnnotation(target.id));
-    const previousVariant = valueAnnotation?.variant;
-    const previousDefaultType = valueAnnotation?.defaultValueType;
-    const previousDefaultValue = valueAnnotation?.defaultValue;
+    const previousAnnotation = useAppSelector(selectValueAnnotation(target.id));
     const dispatch = useAppDispatch();
 
     // Event handlers --------------------------------------------------------------------------------------------------
@@ -55,9 +58,7 @@ export const ValueForm: React.FC<ValueFormProps> = function ({ target }) {
             target={target}
             annotationType="value"
             description="Change how the value of this parameter is set."
-            previousVariant={previousVariant}
-            previousDefaultType={previousDefaultType}
-            previousDefaultValue={previousDefaultValue}
+            previousAnnotation={previousAnnotation}
             onUpsertAnnotation={handleUpsertAnnotation}
         />
     );
@@ -67,9 +68,7 @@ interface TypeValueFormProps {
     target: PythonDeclaration;
     annotationType: string;
     description: string;
-    previousVariant: Optional<ValueAnnotationVariant>;
-    previousDefaultType: Optional<DefaultValueType>;
-    previousDefaultValue: Optional<DefaultValue>;
+    previousAnnotation: Optional<ValueAnnotation>;
     onUpsertAnnotation: (data: TypeValueFormState) => void;
 }
 
@@ -77,15 +76,14 @@ export interface TypeValueFormState {
     variant: ValueAnnotationVariant;
     defaultValueType: DefaultValueType;
     defaultValue: DefaultValue;
+    comment: string;
 }
 
 const TypeValueForm: React.FC<TypeValueFormProps> = function ({
     target,
     annotationType,
     description,
-    previousVariant,
-    previousDefaultType,
-    previousDefaultValue,
+    previousAnnotation,
     onUpsertAnnotation,
 }) {
     const dispatch = useAppDispatch();
@@ -102,6 +100,7 @@ const TypeValueForm: React.FC<TypeValueFormProps> = function ({
             variant: 'optional',
             defaultValueType: 'string',
             defaultValue: '',
+            comment: '',
         },
     });
 
@@ -109,25 +108,32 @@ const TypeValueForm: React.FC<TypeValueFormProps> = function ({
     const watchDefaultValueType = watch('defaultValueType');
 
     useEffect(() => {
-        const defaultValueType = previousDefaultType ?? 'string';
+        const defaultValueType = previousAnnotation?.defaultValueType ?? 'string';
 
         let defaultValue: string;
-        if (previousDefaultValue === undefined) {
+        if (previousAnnotation?.defaultValue === undefined) {
             defaultValue = '';
         } else {
             if (defaultValueType === 'boolean') {
-                defaultValue = previousDefaultValue ? 'true' : 'false';
+                defaultValue = previousAnnotation?.defaultValue ? 'true' : 'false';
             } else {
-                defaultValue = String(previousDefaultValue);
+                defaultValue = String(previousAnnotation?.defaultValue);
             }
         }
 
         reset({
-            variant: previousVariant ?? 'optional',
+            variant: previousAnnotation?.variant ?? 'optional',
             defaultValueType,
             defaultValue,
+            comment: previousAnnotation?.comment ?? '',
         });
-    }, [reset, previousVariant, previousDefaultType, previousDefaultValue]);
+    }, [
+        reset,
+        previousAnnotation?.variant,
+        previousAnnotation?.defaultValueType,
+        previousAnnotation?.defaultValue,
+        previousAnnotation?.comment,
+    ]);
 
     // Event handlers ----------------------------------------------------------
 
@@ -170,13 +176,13 @@ const TypeValueForm: React.FC<TypeValueFormProps> = function ({
 
     return (
         <AnnotationForm
-            heading={`${previousDefaultType ? 'Edit' : 'Add'} @${annotationType} Annotation`}
+            heading={`${previousAnnotation?.defaultValueType ? 'Edit' : 'Add'} @${annotationType} Annotation`}
             description={description}
             onSave={handleSubmit(handleSave)}
             onCancel={handleCancel}
         >
             <FormLabel>Choose the variant of this annotation:</FormLabel>
-            <RadioGroup defaultValue={previousVariant ?? 'optional'} onChange={handleVariantChange}>
+            <RadioGroup defaultValue={previousAnnotation?.variant ?? 'optional'} onChange={handleVariantChange}>
                 <Stack direction="column">
                     <Radio value="required">Required (parameter must always be set explicitly)</Radio>
                     <Radio value="optional">Optional (parameter has a default value that can be overwritten)</Radio>
@@ -192,7 +198,10 @@ const TypeValueForm: React.FC<TypeValueFormProps> = function ({
                     {watchVariant === 'constant' && (
                         <FormLabel>Type of constant value of &quot;{target.name}&quot;:</FormLabel>
                     )}
-                    <RadioGroup defaultValue={previousDefaultType ?? 'string'} onChange={handleTypeChange}>
+                    <RadioGroup
+                        defaultValue={previousAnnotation?.defaultValueType ?? 'string'}
+                        onChange={handleTypeChange}
+                    >
                         <Stack direction="column">
                             <Radio value="string">String</Radio>
                             <Radio value="number">Number</Radio>
@@ -241,6 +250,11 @@ const TypeValueForm: React.FC<TypeValueFormProps> = function ({
                     </FormErrorMessage>
                 </FormControl>
             )}
+
+            <FormControl>
+                <FormLabel>Comment:</FormLabel>
+                <Textarea {...register('comment')} />
+            </FormControl>
         </AnnotationForm>
     );
 };
diff --git a/api-editor/gui/src/features/annotations/versioning/AnnotationStoreV2.ts b/api-editor/gui/src/features/annotations/versioning/AnnotationStoreV2.ts
index d7d2beded..8977751a4 100644
--- a/api-editor/gui/src/features/annotations/versioning/AnnotationStoreV2.ts
+++ b/api-editor/gui/src/features/annotations/versioning/AnnotationStoreV2.ts
@@ -67,6 +67,11 @@ export interface Annotation {
      * Whether the annotation was deleted. This is used for autogenerated annotations. Others are delete outright.
      */
     readonly isRemoved?: boolean;
+
+    /**
+     * Additional information about the annotation.
+     */
+    readonly comment?: string;
 }
 
 export interface BoundaryAnnotation extends Annotation {

From dc4910f7c2b4b5bbad1d795190797ddcb1361e96 Mon Sep 17 00:00:00 2001
From: Lars Reimann <mail@larsreimann.com>
Date: Sun, 3 Jul 2022 22:00:50 +0200
Subject: [PATCH 2/6] feat(gui): comments for pure and remove annotations

---
 api-editor/gui/src/app/App.tsx                |  4 +
 .../annotations/AnnotationDropdown.tsx        |  8 +-
 .../features/annotations/AnnotationView.tsx   |  4 +
 .../features/annotations/annotationSlice.ts   | 12 +--
 .../batchforms/RemoveBatchForm.tsx            |  4 +-
 .../features/annotations/forms/PureForm.tsx   | 75 +++++++++++++++++++
 .../features/annotations/forms/RemoveForm.tsx | 75 +++++++++++++++++++
 api-editor/gui/src/features/ui/uiSlice.ts     | 34 ++++++++-
 8 files changed, 204 insertions(+), 12 deletions(-)
 create mode 100644 api-editor/gui/src/features/annotations/forms/PureForm.tsx
 create mode 100644 api-editor/gui/src/features/annotations/forms/RemoveForm.tsx

diff --git a/api-editor/gui/src/app/App.tsx b/api-editor/gui/src/app/App.tsx
index 0ef7f8d4b..9b2ec3e5d 100644
--- a/api-editor/gui/src/app/App.tsx
+++ b/api-editor/gui/src/app/App.tsx
@@ -68,6 +68,8 @@ import { StatisticsView } from '../features/statistics/StatisticsView';
 import { useAnnotationToasts } from '../features/achievements/AnnotationToast';
 import { ValueForm } from '../features/annotations/forms/ValueForm';
 import { AnnotationStore } from '../features/annotations/versioning/AnnotationStoreV2';
+import {RemoveForm} from "../features/annotations/forms/RemoveForm";
+import {PureForm} from "../features/annotations/forms/PureForm";
 
 export const App: React.FC = function () {
     useIndexedDB();
@@ -143,6 +145,8 @@ export const App: React.FC = function () {
                     )}
                     {currentUserAction.type === 'move' && <MoveForm target={userActionTarget || rawPythonPackage} />}
                     {currentUserAction.type === 'none' && <TreeView />}
+                    {currentUserAction.type === 'pure' && <PureForm target={userActionTarget || rawPythonPackage} />}
+                    {currentUserAction.type === 'remove' && <RemoveForm target={userActionTarget || rawPythonPackage} />}
                     {currentUserAction.type === 'rename' && (
                         <RenameForm target={userActionTarget || rawPythonPackage} />
                     )}
diff --git a/api-editor/gui/src/features/annotations/AnnotationDropdown.tsx b/api-editor/gui/src/features/annotations/AnnotationDropdown.tsx
index 5e7980a60..90d30e207 100644
--- a/api-editor/gui/src/features/annotations/AnnotationDropdown.tsx
+++ b/api-editor/gui/src/features/annotations/AnnotationDropdown.tsx
@@ -2,7 +2,7 @@ import { Box, Button, Icon, Menu, MenuButton, MenuGroup, MenuItem, MenuList } fr
 import React from 'react';
 import { FaChevronDown } from 'react-icons/fa';
 import { useAppDispatch, useAppSelector } from '../../app/hooks';
-import { addPureAnnotation, addRemoveAnnotation, selectComplete, selectUsernameIsValid } from './annotationSlice';
+import { selectComplete, selectUsernameIsValid } from './annotationSlice';
 import {
     showBoundaryAnnotationForm,
     showCalledAfterAnnotationForm,
@@ -10,6 +10,8 @@ import {
     showEnumAnnotationForm,
     showGroupAnnotationForm,
     showMoveAnnotationForm,
+    showPureAnnotationForm,
+    showRemoveAnnotationForm,
     showRenameAnnotationForm,
     showTodoAnnotationForm,
     showValueAnnotationForm,
@@ -133,12 +135,12 @@ export const AnnotationDropdown: React.FC<AnnotationDropdownProps> = function ({
                                 </MenuItem>
                             )}
                             {showPure && (
-                                <MenuItem onClick={() => dispatch(addPureAnnotation({ target }))} paddingLeft={8}>
+                                <MenuItem onClick={() => dispatch(showPureAnnotationForm(target))} paddingLeft={8}>
                                     @pure
                                 </MenuItem>
                             )}
                             {showRemove && (
-                                <MenuItem onClick={() => dispatch(addRemoveAnnotation({ target }))} paddingLeft={8}>
+                                <MenuItem onClick={() => dispatch(showRemoveAnnotationForm(target))} paddingLeft={8}>
                                     @remove
                                 </MenuItem>
                             )}
diff --git a/api-editor/gui/src/features/annotations/AnnotationView.tsx b/api-editor/gui/src/features/annotations/AnnotationView.tsx
index 9e9d709ee..d84de9f85 100644
--- a/api-editor/gui/src/features/annotations/AnnotationView.tsx
+++ b/api-editor/gui/src/features/annotations/AnnotationView.tsx
@@ -46,6 +46,8 @@ import {
     showEnumAnnotationForm,
     showGroupAnnotationForm,
     showMoveAnnotationForm,
+    showPureAnnotationForm,
+    showRemoveAnnotationForm,
     showRenameAnnotationForm,
     showTodoAnnotationForm,
     showValueAnnotationForm,
@@ -166,6 +168,7 @@ export const AnnotationView: React.FC<AnnotationViewProps> = function ({ target
                 <AnnotationTag
                     type="pure"
                     annotation={pureAnnotation}
+                    onEdit={() => dispatch(showPureAnnotationForm(target))}
                     onDelete={() => dispatch(removePureAnnotation(target))}
                     onReview={() => dispatch(reviewPureAnnotation(target))}
                 />
@@ -174,6 +177,7 @@ export const AnnotationView: React.FC<AnnotationViewProps> = function ({ target
                 <AnnotationTag
                     type="remove"
                     annotation={removeAnnotation}
+                    onEdit={() => dispatch(showRemoveAnnotationForm(target))}
                     onDelete={() => dispatch(removeRemoveAnnotation(target))}
                     onReview={() => dispatch(reviewRemoveAnnotation(target))}
                     reportable
diff --git a/api-editor/gui/src/features/annotations/annotationSlice.ts b/api-editor/gui/src/features/annotations/annotationSlice.ts
index 0ba981767..6d48f44d2 100644
--- a/api-editor/gui/src/features/annotations/annotationSlice.ts
+++ b/api-editor/gui/src/features/annotations/annotationSlice.ts
@@ -424,7 +424,7 @@ const annotationsSlice = createSlice({
 
             updateQueue(state);
         },
-        addPureAnnotation(state, action: PayloadAction<PureAnnotation>) {
+        upsertPureAnnotation(state, action: PayloadAction<PureAnnotation>) {
             updateCreationOrChangedCount(state, state.annotations.pureAnnotations[action.payload.target]);
 
             state.annotations.pureAnnotations[action.payload.target] = withAuthorAndReviewers(
@@ -448,7 +448,7 @@ const annotationsSlice = createSlice({
 
             updateQueue(state);
         },
-        addRemoveAnnotation(state, action: PayloadAction<RemoveAnnotation>) {
+        upsertRemoveAnnotation(state, action: PayloadAction<RemoveAnnotation>) {
             updateCreationOrChangedCount(state, state.annotations.removeAnnotations[action.payload.target]);
 
             state.annotations.removeAnnotations[action.payload.target] = withAuthorAndReviewers(
@@ -459,7 +459,7 @@ const annotationsSlice = createSlice({
 
             updateQueue(state);
         },
-        addRemoveAnnotations(state, action: PayloadAction<RemoveAnnotation[]>) {
+        upsertRemoveAnnotations(state, action: PayloadAction<RemoveAnnotation[]>) {
             action.payload.forEach((annotation) => {
                 updateCreationOrChangedCount(state, state.annotations.removeAnnotations[annotation.target]);
 
@@ -697,11 +697,11 @@ export const {
     upsertMoveAnnotations,
     removeMoveAnnotation,
     reviewMoveAnnotation,
-    addPureAnnotation,
+    upsertPureAnnotation,
     removePureAnnotation,
     reviewPureAnnotation,
-    addRemoveAnnotation,
-    addRemoveAnnotations,
+    upsertRemoveAnnotation,
+    upsertRemoveAnnotations,
     removeRemoveAnnotation,
     reviewRemoveAnnotation,
     upsertRenameAnnotation,
diff --git a/api-editor/gui/src/features/annotations/batchforms/RemoveBatchForm.tsx b/api-editor/gui/src/features/annotations/batchforms/RemoveBatchForm.tsx
index a395ab400..150f34ea7 100644
--- a/api-editor/gui/src/features/annotations/batchforms/RemoveBatchForm.tsx
+++ b/api-editor/gui/src/features/annotations/batchforms/RemoveBatchForm.tsx
@@ -4,7 +4,7 @@ import { PythonDeclaration } from '../../packageData/model/PythonDeclaration';
 import { PythonClass } from '../../packageData/model/PythonClass';
 import { PythonFunction } from '../../packageData/model/PythonFunction';
 import { RemoveAnnotation } from '../versioning/AnnotationStoreV2';
-import { addRemoveAnnotations } from '../annotationSlice';
+import { upsertRemoveAnnotations } from '../annotationSlice';
 import { FormControl, FormLabel, Textarea } from '@chakra-ui/react';
 import { AnnotationBatchForm } from './AnnotationBatchForm';
 import { hideAnnotationForm } from '../../ui/uiSlice';
@@ -32,7 +32,7 @@ export const RemoveBatchForm: React.FC<RemoveBatchFormProps> = function ({ targe
                 comment: data.comment,
             });
         });
-        dispatch(addRemoveAnnotations(all));
+        dispatch(upsertRemoveAnnotations(all));
     };
 
     // Rendering -------------------------------------------------------------------------------------------------------
diff --git a/api-editor/gui/src/features/annotations/forms/PureForm.tsx b/api-editor/gui/src/features/annotations/forms/PureForm.tsx
new file mode 100644
index 000000000..b27d82433
--- /dev/null
+++ b/api-editor/gui/src/features/annotations/forms/PureForm.tsx
@@ -0,0 +1,75 @@
+import { FormControl, FormLabel, Textarea } from '@chakra-ui/react';
+import React, { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { useAppDispatch, useAppSelector } from '../../../app/hooks';
+import { PythonDeclaration } from '../../packageData/model/PythonDeclaration';
+import { selectPureAnnotation, upsertPureAnnotation } from '../annotationSlice';
+import { AnnotationForm } from './AnnotationForm';
+import { hideAnnotationForm } from '../../ui/uiSlice';
+
+interface PureFormProps {
+    readonly target: PythonDeclaration;
+}
+
+interface PureFormState {
+    comment: string;
+}
+
+export const PureForm: React.FC<PureFormProps> = function ({ target }) {
+    const previousAnnotation = useAppSelector(selectPureAnnotation(target.id));
+
+    // Hooks -----------------------------------------------------------------------------------------------------------
+
+    const dispatch = useAppDispatch();
+    const { register, handleSubmit, setFocus, reset } = useForm<PureFormState>({
+        defaultValues: {
+            comment: '',
+        },
+    });
+
+    useEffect(() => {
+        try {
+            setFocus('comment');
+        } catch (e) {
+            // ignore
+        }
+    }, [setFocus]);
+
+    useEffect(() => {
+        reset({
+            comment: previousAnnotation?.comment ?? '',
+        });
+    }, [reset, previousAnnotation]);
+
+    // Event handlers --------------------------------------------------------------------------------------------------
+
+    const onSave = (data: PureFormState) => {
+        dispatch(
+            upsertPureAnnotation({
+                target: target.id,
+                ...data,
+            }),
+        );
+        dispatch(hideAnnotationForm());
+    };
+
+    const onCancel = () => {
+        dispatch(hideAnnotationForm());
+    };
+
+    // Rendering -------------------------------------------------------------------------------------------------------
+
+    return (
+        <AnnotationForm
+            heading={`${previousAnnotation ? 'Edit' : 'Add'} @pure Annotation`}
+            description="Mark this function as pure. This denotes that it has no side effects and that it always produces the same outputs for the same inputs."
+            onSave={handleSubmit(onSave)}
+            onCancel={onCancel}
+        >
+            <FormControl>
+                <FormLabel>Comment:</FormLabel>
+                <Textarea {...register('comment')} />
+            </FormControl>
+        </AnnotationForm>
+    );
+};
diff --git a/api-editor/gui/src/features/annotations/forms/RemoveForm.tsx b/api-editor/gui/src/features/annotations/forms/RemoveForm.tsx
new file mode 100644
index 000000000..6bcece344
--- /dev/null
+++ b/api-editor/gui/src/features/annotations/forms/RemoveForm.tsx
@@ -0,0 +1,75 @@
+import { FormControl, FormLabel, Textarea } from '@chakra-ui/react';
+import React, { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { useAppDispatch, useAppSelector } from '../../../app/hooks';
+import { PythonDeclaration } from '../../packageData/model/PythonDeclaration';
+import { selectRemoveAnnotation, upsertRemoveAnnotation } from '../annotationSlice';
+import { AnnotationForm } from './AnnotationForm';
+import { hideAnnotationForm } from '../../ui/uiSlice';
+
+interface RemoveFormProps {
+    readonly target: PythonDeclaration;
+}
+
+interface RemoveFormState {
+    comment: string;
+}
+
+export const RemoveForm: React.FC<RemoveFormProps> = function ({ target }) {
+    const previousAnnotation = useAppSelector(selectRemoveAnnotation(target.id));
+
+    // Hooks -----------------------------------------------------------------------------------------------------------
+
+    const dispatch = useAppDispatch();
+    const { register, handleSubmit, setFocus, reset } = useForm<RemoveFormState>({
+        defaultValues: {
+            comment: '',
+        },
+    });
+
+    useEffect(() => {
+        try {
+            setFocus('comment');
+        } catch (e) {
+            // ignore
+        }
+    }, [setFocus]);
+
+    useEffect(() => {
+        reset({
+            comment: previousAnnotation?.comment ?? '',
+        });
+    }, [reset, previousAnnotation]);
+
+    // Event handlers --------------------------------------------------------------------------------------------------
+
+    const onSave = (data: RemoveFormState) => {
+        dispatch(
+            upsertRemoveAnnotation({
+                target: target.id,
+                ...data,
+            }),
+        );
+        dispatch(hideAnnotationForm());
+    };
+
+    const onCancel = () => {
+        dispatch(hideAnnotationForm());
+    };
+
+    // Rendering -------------------------------------------------------------------------------------------------------
+
+    return (
+        <AnnotationForm
+            heading={`${previousAnnotation ? 'Edit' : 'Add'} @remove Annotation`}
+            description="Remove this declaration."
+            onSave={handleSubmit(onSave)}
+            onCancel={onCancel}
+        >
+            <FormControl>
+                <FormLabel>Comment:</FormLabel>
+                <Textarea {...register('comment')} />
+            </FormControl>
+        </AnnotationForm>
+    );
+};
diff --git a/api-editor/gui/src/features/ui/uiSlice.ts b/api-editor/gui/src/features/ui/uiSlice.ts
index 4a349b47c..402bf0134 100644
--- a/api-editor/gui/src/features/ui/uiSlice.ts
+++ b/api-editor/gui/src/features/ui/uiSlice.ts
@@ -44,8 +44,11 @@ type UserAction =
     | BoundaryUserAction
     | CalledAfterUserAction
     | DescriptionUserAction
-    | GroupUserAction
     | EnumUserAction
+    | GroupUserAction
+    | MoveUserAction
+    | PureUserAction
+    | RemoveUserAction
     | RenameUserAction
     | TodoUserAction
     | ValueUserAction;
@@ -82,6 +85,21 @@ export interface GroupUserAction {
     readonly groupName: string;
 }
 
+interface MoveUserAction {
+    readonly type: 'move';
+    readonly target: string;
+}
+
+interface PureUserAction {
+    readonly type: 'pure';
+    readonly target: string;
+}
+
+interface RemoveUserAction {
+    readonly type: 'remove';
+    readonly target: string;
+}
+
 interface RenameUserAction {
     readonly type: 'rename';
     readonly target: string;
@@ -265,6 +283,18 @@ const uiSlice = createSlice({
                 target: action.payload,
             };
         },
+        showPureAnnotationForm(state, action: PayloadAction<string>) {
+            state.currentUserAction = {
+                type: 'pure',
+                target: action.payload,
+            };
+        },
+        showRemoveAnnotationForm(state, action: PayloadAction<string>) {
+            state.currentUserAction = {
+                type: 'remove',
+                target: action.payload,
+            };
+        },
         showRenameAnnotationForm(state, action: PayloadAction<string>) {
             state.currentUserAction = {
                 type: 'rename',
@@ -364,6 +394,8 @@ export const {
     showEnumAnnotationForm,
     showGroupAnnotationForm,
     showMoveAnnotationForm,
+    showPureAnnotationForm,
+    showRemoveAnnotationForm,
     showRenameAnnotationForm,
     showTodoAnnotationForm,
     showValueAnnotationForm,

From 6fcd3563dd65bb3f49cc879f38cf31f49f7efd0a Mon Sep 17 00:00:00 2001
From: Lars Reimann <mail@larsreimann.com>
Date: Sun, 3 Jul 2022 22:12:56 +0200
Subject: [PATCH 3/6] feat(gui): edit calledAfter annotations

---
 api-editor/gui/src/app/App.tsx                |  8 +++++--
 .../features/annotations/AnnotationView.tsx   |  4 +++-
 .../annotations/forms/CalledAfterForm.tsx     | 21 ++++++++++---------
 3 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/api-editor/gui/src/app/App.tsx b/api-editor/gui/src/app/App.tsx
index 9b2ec3e5d..faeb2245a 100644
--- a/api-editor/gui/src/app/App.tsx
+++ b/api-editor/gui/src/app/App.tsx
@@ -67,7 +67,7 @@ import { SaveFilterDialog } from '../features/filter/SaveFilterDialog';
 import { StatisticsView } from '../features/statistics/StatisticsView';
 import { useAnnotationToasts } from '../features/achievements/AnnotationToast';
 import { ValueForm } from '../features/annotations/forms/ValueForm';
-import { AnnotationStore } from '../features/annotations/versioning/AnnotationStoreV2';
+import {AnnotationStore, CalledAfterTarget} from '../features/annotations/versioning/AnnotationStoreV2';
 import {RemoveForm} from "../features/annotations/forms/RemoveForm";
 import {PureForm} from "../features/annotations/forms/PureForm";
 
@@ -124,7 +124,11 @@ export const App: React.FC = function () {
                         <BoundaryForm target={userActionTarget || rawPythonPackage} />
                     )}
                     {currentUserAction.type === 'calledAfter' && userActionTarget instanceof PythonFunction && (
-                        <CalledAfterForm target={userActionTarget} />
+                        <CalledAfterForm target={userActionTarget} calledAfterName={
+                            (currentUserAction as CalledAfterTarget)?.calledAfterName
+                                ? (currentUserAction as CalledAfterTarget)?.calledAfterName
+                                : ''
+                        }/>
                     )}
                     {currentUserAction.type === 'description' &&
                         (userActionTarget instanceof PythonClass ||
diff --git a/api-editor/gui/src/features/annotations/AnnotationView.tsx b/api-editor/gui/src/features/annotations/AnnotationView.tsx
index d84de9f85..5232e9683 100644
--- a/api-editor/gui/src/features/annotations/AnnotationView.tsx
+++ b/api-editor/gui/src/features/annotations/AnnotationView.tsx
@@ -42,6 +42,7 @@ import {
     hideAnnotationForm,
     selectCurrentUserAction,
     showBoundaryAnnotationForm,
+    showCalledAfterAnnotationForm,
     showDescriptionAnnotationForm,
     showEnumAnnotationForm,
     showGroupAnnotationForm,
@@ -113,6 +114,7 @@ export const AnnotationView: React.FC<AnnotationViewProps> = function ({ target
                     name={calledAfterName}
                     key={calledAfterName}
                     annotation={calledAfterAnnotation[calledAfterName]}
+                    onEdit={() => dispatch(showCalledAfterAnnotationForm({ target, calledAfterName }))}
                     onDelete={() => dispatch(removeCalledAfterAnnotation({ target, calledAfterName }))}
                     onReview={() => dispatch(reviewCalledAfterAnnotation({ target, calledAfterName }))}
                 />
@@ -275,7 +277,7 @@ interface AnnotationTagProps {
     type: string;
     name?: string;
     annotation: Annotation;
-    onEdit?: () => void;
+    onEdit: () => void;
     onDelete: () => void;
     onReview: () => void;
     reportable?: boolean;
diff --git a/api-editor/gui/src/features/annotations/forms/CalledAfterForm.tsx b/api-editor/gui/src/features/annotations/forms/CalledAfterForm.tsx
index 594c786fe..71674e7ae 100644
--- a/api-editor/gui/src/features/annotations/forms/CalledAfterForm.tsx
+++ b/api-editor/gui/src/features/annotations/forms/CalledAfterForm.tsx
@@ -9,6 +9,7 @@ import { hideAnnotationForm } from '../../ui/uiSlice';
 
 interface CalledAfterFormProps {
     readonly target: PythonFunction;
+    readonly calledAfterName: string;
 }
 
 interface CalledAfterFormState {
@@ -16,14 +17,14 @@ interface CalledAfterFormState {
     comment: string;
 }
 
-export const CalledAfterForm: React.FC<CalledAfterFormProps> = function ({ target }) {
-    const targetPath = target.id;
-    const currentCalledAfters = Object.keys(useAppSelector(selectCalledAfterAnnotations(targetPath)));
+export const CalledAfterForm: React.FC<CalledAfterFormProps> = function ({ target, calledAfterName }) {
+    const currentCalledAfters = Object.keys(useAppSelector(selectCalledAfterAnnotations(target.id)));
+    const previousAnnotation = useAppSelector(selectCalledAfterAnnotations(target.id))[calledAfterName];
 
     const remainingCalledAfters = target
         .siblingFunctions()
         .map((it) => it.name)
-        .filter((it) => !currentCalledAfters.includes(it));
+        .filter((it) => it === previousAnnotation?.calledAfterName || !currentCalledAfters.includes(it));
 
     // Hooks -----------------------------------------------------------------------------------------------------------
 
@@ -51,17 +52,17 @@ export const CalledAfterForm: React.FC<CalledAfterFormProps> = function ({ targe
 
     useEffect(() => {
         reset({
-            calledAfterName: '',
-            comment: '',
+            calledAfterName: previousAnnotation?.calledAfterName ?? '',
+            comment: previousAnnotation?.comment ?? '',
         });
-    }, [reset]);
+    }, [reset, previousAnnotation?.calledAfterName, previousAnnotation?.comment]);
 
     // Event handlers --------------------------------------------------------------------------------------------------
 
     const onSave = (data: CalledAfterFormState) => {
         dispatch(
             upsertCalledAfterAnnotation({
-                target: targetPath,
+                target: target.id,
                 ...data,
             }),
         );
@@ -76,7 +77,7 @@ export const CalledAfterForm: React.FC<CalledAfterFormProps> = function ({ targe
 
     return (
         <AnnotationForm
-            heading="@calledAfter Annotation"
+            heading={`${previousAnnotation ? 'Edit' : 'Add'} @calledAfter Annotation`}
             description="Specify that this function must be called after another function."
             onSave={handleSubmit(onSave)}
             onCancel={onCancel}
@@ -101,7 +102,7 @@ export const CalledAfterForm: React.FC<CalledAfterFormProps> = function ({ targe
 
             <FormControl>
                 <FormLabel>Comment:</FormLabel>
-                <Textarea {...register('comment')}/>
+                <Textarea {...register('comment')} />
             </FormControl>
         </AnnotationForm>
     );

From 84ceb9ff0b245cdedb8bc9175fe16f4a740e7507 Mon Sep 17 00:00:00 2001
From: Lars Reimann <mail@larsreimann.com>
Date: Sun, 3 Jul 2022 22:43:24 +0200
Subject: [PATCH 4/6] fix(gui): editing calledAfter annotations created new one
 instead of changing old one

---
 .../features/annotations/annotationSlice.ts   | 36 ++++++++++++-------
 .../annotations/forms/CalledAfterForm.tsx     |  7 ++--
 .../features/annotations/forms/GroupForm.tsx  | 13 ++++---
 3 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/api-editor/gui/src/features/annotations/annotationSlice.ts b/api-editor/gui/src/features/annotations/annotationSlice.ts
index 6d48f44d2..d98c80738 100644
--- a/api-editor/gui/src/features/annotations/annotationSlice.ts
+++ b/api-editor/gui/src/features/annotations/annotationSlice.ts
@@ -189,22 +189,32 @@ const annotationsSlice = createSlice({
 
             updateQueue(state);
         },
-        upsertCalledAfterAnnotation(state, action: PayloadAction<CalledAfterAnnotation>) {
-            if (!state.annotations.calledAfterAnnotations[action.payload.target]) {
-                state.annotations.calledAfterAnnotations[action.payload.target] = {};
+        upsertCalledAfterAnnotation(
+            state,
+            action: PayloadAction<{ annotation: CalledAfterAnnotation; previousCalledAfterName?: string }>,
+        ) {
+            const oldAnnotation =
+                state.annotations.calledAfterAnnotations[action.payload.annotation.target][
+                    action.payload.previousCalledAfterName ?? ''
+                ];
+
+            if (!state.annotations.calledAfterAnnotations[action.payload.annotation.target]) {
+                state.annotations.calledAfterAnnotations[action.payload.annotation.target] = {};
             }
 
-            updateCreationOrChangedCount(
-                state,
-                state.annotations.calledAfterAnnotations[action.payload.target][action.payload.calledAfterName],
-            );
+            updateCreationOrChangedCount(state, oldAnnotation);
+
+            state.annotations.calledAfterAnnotations[action.payload.annotation.target][
+                action.payload.annotation.calledAfterName
+            ] = withAuthorAndReviewers(oldAnnotation, action.payload.annotation, state.username);
+
+            // Delete old annotation
+            if (action.payload.previousCalledAfterName !== action.payload.annotation.calledAfterName) {
+                delete state.annotations.calledAfterAnnotations[action.payload.annotation.target][
+                    action.payload.previousCalledAfterName ?? ''
+                ];
+            }
 
-            state.annotations.calledAfterAnnotations[action.payload.target][action.payload.calledAfterName] =
-                withAuthorAndReviewers(
-                    state.annotations.calledAfterAnnotations[action.payload.target][action.payload.calledAfterName],
-                    action.payload,
-                    state.username,
-                );
             updateQueue(state);
         },
         removeCalledAfterAnnotation(state, action: PayloadAction<CalledAfterTarget>) {
diff --git a/api-editor/gui/src/features/annotations/forms/CalledAfterForm.tsx b/api-editor/gui/src/features/annotations/forms/CalledAfterForm.tsx
index 71674e7ae..f0dbb8a91 100644
--- a/api-editor/gui/src/features/annotations/forms/CalledAfterForm.tsx
+++ b/api-editor/gui/src/features/annotations/forms/CalledAfterForm.tsx
@@ -62,8 +62,11 @@ export const CalledAfterForm: React.FC<CalledAfterFormProps> = function ({ targe
     const onSave = (data: CalledAfterFormState) => {
         dispatch(
             upsertCalledAfterAnnotation({
-                target: target.id,
-                ...data,
+                previousCalledAfterName: previousAnnotation?.calledAfterName,
+                annotation: {
+                    target: target.id,
+                    ...data,
+                },
             }),
         );
         dispatch(hideAnnotationForm());
diff --git a/api-editor/gui/src/features/annotations/forms/GroupForm.tsx b/api-editor/gui/src/features/annotations/forms/GroupForm.tsx
index ac61aab0c..9d01c1088 100644
--- a/api-editor/gui/src/features/annotations/forms/GroupForm.tsx
+++ b/api-editor/gui/src/features/annotations/forms/GroupForm.tsx
@@ -122,10 +122,13 @@ export const GroupForm: React.FC<GroupFormProps> = function ({ target, groupName
     const onSave = (data: GroupFormState) => {
         dispatch(
             upsertGroupAnnotation({
-                target: targetPath,
-                groupName: data.groupName,
-                parameters: getSelectedParameters(),
-                comment: data.comment,
+                targetToOverride: previousAnnotation,
+                annotation: {
+                    target: targetPath,
+                    groupName: data.groupName,
+                    parameters: getSelectedParameters(),
+                    comment: data.comment,
+                },
             }),
         );
         dispatch(hideAnnotationForm());
@@ -183,7 +186,7 @@ export const GroupForm: React.FC<GroupFormProps> = function ({ target, groupName
 
             <FormControl>
                 <FormLabel>Comment:</FormLabel>
-                <Textarea {...register('comment')}/>
+                <Textarea {...register('comment')} />
             </FormControl>
         </AnnotationForm>
     );

From 5100e2e7271e57d2fb49acc3c669189810282c49 Mon Sep 17 00:00:00 2001
From: Lars Reimann <mail@larsreimann.com>
Date: Sun, 3 Jul 2022 22:49:58 +0200
Subject: [PATCH 5/6] fix(gui): editing group annotations created new one
 instead of changing old one

---
 .../features/annotations/annotationSlice.ts   | 42 +++++++++++--------
 .../features/annotations/forms/GroupForm.tsx  |  2 +-
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/api-editor/gui/src/features/annotations/annotationSlice.ts b/api-editor/gui/src/features/annotations/annotationSlice.ts
index d98c80738..628204825 100644
--- a/api-editor/gui/src/features/annotations/annotationSlice.ts
+++ b/api-editor/gui/src/features/annotations/annotationSlice.ts
@@ -320,19 +320,27 @@ const annotationsSlice = createSlice({
 
             updateQueue(state);
         },
-        upsertGroupAnnotation(state, action: PayloadAction<GroupAnnotation>) {
-            if (!state.annotations.groupAnnotations[action.payload.target]) {
-                state.annotations.groupAnnotations[action.payload.target] = {};
+        upsertGroupAnnotation(
+            state,
+            action: PayloadAction<{ previousGroupName?: string; annotation: GroupAnnotation }>,
+        ) {
+            const oldAnnotation =
+                state.annotations.groupAnnotations[action.payload.annotation.target][
+                    action.payload.previousGroupName ?? ''
+                ];
+
+            if (!state.annotations.groupAnnotations[action.payload.annotation.target]) {
+                state.annotations.groupAnnotations[action.payload.annotation.target] = {};
             } else {
-                const targetGroups = state.annotations.groupAnnotations[action.payload.target];
+                const targetGroups = state.annotations.groupAnnotations[action.payload.annotation.target];
                 const otherGroupNames = Object.values(targetGroups)
-                    .filter((group) => group.groupName !== action.payload.groupName)
+                    .filter((group) => group.groupName !== action.payload.annotation.groupName)
                     .map((group) => group.groupName);
 
                 for (const nameOfGroup of otherGroupNames) {
                     let needsChange = false;
                     const group = targetGroups[nameOfGroup];
-                    const currentAnnotationParameter = action.payload.parameters;
+                    const currentAnnotationParameter = action.payload.annotation.parameters;
                     const currentGroupParameter = [...group.parameters];
                     for (const parameter of currentAnnotationParameter) {
                         const index = currentGroupParameter.indexOf(parameter);
@@ -343,7 +351,7 @@ const annotationsSlice = createSlice({
                     }
                     if (currentGroupParameter.length < 1) {
                         removeGroupAnnotation({
-                            target: action.payload.target,
+                            target: action.payload.annotation.target,
                             groupName: group.groupName,
                         });
                     } else if (needsChange) {
@@ -360,17 +368,17 @@ const annotationsSlice = createSlice({
                 }
             }
 
-            updateCreationOrChangedCount(
-                state,
-                state.annotations.groupAnnotations[action.payload.target][action.payload.groupName],
-            );
+            updateCreationOrChangedCount(state, oldAnnotation);
 
-            state.annotations.groupAnnotations[action.payload.target][action.payload.groupName] =
-                withAuthorAndReviewers(
-                    state.annotations.groupAnnotations[action.payload.target][action.payload.groupName],
-                    action.payload,
-                    state.username,
-                );
+            state.annotations.groupAnnotations[action.payload.annotation.target][action.payload.annotation.groupName] =
+                withAuthorAndReviewers(oldAnnotation, action.payload.annotation, state.username);
+
+            // Delete old annotation
+            if (action.payload.previousGroupName !== action.payload.annotation.groupName) {
+                delete state.annotations.groupAnnotations[action.payload.annotation.target][
+                    action.payload.previousGroupName ?? ''
+                ];
+            }
 
             updateQueue(state);
         },
diff --git a/api-editor/gui/src/features/annotations/forms/GroupForm.tsx b/api-editor/gui/src/features/annotations/forms/GroupForm.tsx
index 9d01c1088..907d0e0b0 100644
--- a/api-editor/gui/src/features/annotations/forms/GroupForm.tsx
+++ b/api-editor/gui/src/features/annotations/forms/GroupForm.tsx
@@ -122,7 +122,7 @@ export const GroupForm: React.FC<GroupFormProps> = function ({ target, groupName
     const onSave = (data: GroupFormState) => {
         dispatch(
             upsertGroupAnnotation({
-                targetToOverride: previousAnnotation,
+                previousGroupName: previousAnnotation?.groupName,
                 annotation: {
                     target: targetPath,
                     groupName: data.groupName,

From 5e9447d7a9ddb05d8680ae572596527109490ebe Mon Sep 17 00:00:00 2001
From: lars-reimann <lars-reimann@users.noreply.github.com>
Date: Sun, 3 Jul 2022 20:57:44 +0000
Subject: [PATCH 6/6] style: apply automatic fixes of linters

---
 api-editor/gui/src/app/App.tsx                | 23 +++++++++++--------
 .../annotations/batchforms/MoveBatchForm.tsx  | 12 +++++-----
 .../batchforms/RemoveBatchForm.tsx            |  5 +---
 .../annotations/forms/BoundaryForm.tsx        |  2 +-
 .../annotations/forms/DescriptionForm.tsx     |  2 +-
 .../features/annotations/forms/EnumForm.tsx   |  2 +-
 .../features/annotations/forms/MoveForm.tsx   |  3 +--
 .../features/annotations/forms/RenameForm.tsx |  2 +-
 .../features/annotations/forms/TodoForm.tsx   |  2 +-
 9 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/api-editor/gui/src/app/App.tsx b/api-editor/gui/src/app/App.tsx
index faeb2245a..cb89ebc14 100644
--- a/api-editor/gui/src/app/App.tsx
+++ b/api-editor/gui/src/app/App.tsx
@@ -67,9 +67,9 @@ import { SaveFilterDialog } from '../features/filter/SaveFilterDialog';
 import { StatisticsView } from '../features/statistics/StatisticsView';
 import { useAnnotationToasts } from '../features/achievements/AnnotationToast';
 import { ValueForm } from '../features/annotations/forms/ValueForm';
-import {AnnotationStore, CalledAfterTarget} from '../features/annotations/versioning/AnnotationStoreV2';
-import {RemoveForm} from "../features/annotations/forms/RemoveForm";
-import {PureForm} from "../features/annotations/forms/PureForm";
+import { AnnotationStore, CalledAfterTarget } from '../features/annotations/versioning/AnnotationStoreV2';
+import { RemoveForm } from '../features/annotations/forms/RemoveForm';
+import { PureForm } from '../features/annotations/forms/PureForm';
 
 export const App: React.FC = function () {
     useIndexedDB();
@@ -124,11 +124,14 @@ export const App: React.FC = function () {
                         <BoundaryForm target={userActionTarget || rawPythonPackage} />
                     )}
                     {currentUserAction.type === 'calledAfter' && userActionTarget instanceof PythonFunction && (
-                        <CalledAfterForm target={userActionTarget} calledAfterName={
-                            (currentUserAction as CalledAfterTarget)?.calledAfterName
-                                ? (currentUserAction as CalledAfterTarget)?.calledAfterName
-                                : ''
-                        }/>
+                        <CalledAfterForm
+                            target={userActionTarget}
+                            calledAfterName={
+                                (currentUserAction as CalledAfterTarget)?.calledAfterName
+                                    ? (currentUserAction as CalledAfterTarget)?.calledAfterName
+                                    : ''
+                            }
+                        />
                     )}
                     {currentUserAction.type === 'description' &&
                         (userActionTarget instanceof PythonClass ||
@@ -150,7 +153,9 @@ export const App: React.FC = function () {
                     {currentUserAction.type === 'move' && <MoveForm target={userActionTarget || rawPythonPackage} />}
                     {currentUserAction.type === 'none' && <TreeView />}
                     {currentUserAction.type === 'pure' && <PureForm target={userActionTarget || rawPythonPackage} />}
-                    {currentUserAction.type === 'remove' && <RemoveForm target={userActionTarget || rawPythonPackage} />}
+                    {currentUserAction.type === 'remove' && (
+                        <RemoveForm target={userActionTarget || rawPythonPackage} />
+                    )}
                     {currentUserAction.type === 'rename' && (
                         <RenameForm target={userActionTarget || rawPythonPackage} />
                     )}
diff --git a/api-editor/gui/src/features/annotations/batchforms/MoveBatchForm.tsx b/api-editor/gui/src/features/annotations/batchforms/MoveBatchForm.tsx
index c6651c32d..301c9006a 100644
--- a/api-editor/gui/src/features/annotations/batchforms/MoveBatchForm.tsx
+++ b/api-editor/gui/src/features/annotations/batchforms/MoveBatchForm.tsx
@@ -71,11 +71,11 @@ export interface DestinationBatchFormState {
 }
 
 export const DestinationBatchForm: React.FC<DestinationBatchFormProps> = function ({
-                                                                                       targets,
-                                                                                       annotationType,
-                                                                                       description,
-                                                                                       onUpsertAnnotation,
-                                                                                   }) {
+    targets,
+    annotationType,
+    description,
+    onUpsertAnnotation,
+}) {
     const dispatch = useAppDispatch();
 
     const {
@@ -133,7 +133,7 @@ export const DestinationBatchForm: React.FC<DestinationBatchFormProps> = functio
 
                 <FormControl>
                     <FormLabel>Comment:</FormLabel>
-                    <Textarea {...register('comment')}/>
+                    <Textarea {...register('comment')} />
                 </FormControl>
 
                 <ChakraText>This will annotate classes and global functions.</ChakraText>
diff --git a/api-editor/gui/src/features/annotations/batchforms/RemoveBatchForm.tsx b/api-editor/gui/src/features/annotations/batchforms/RemoveBatchForm.tsx
index 150f34ea7..7601b7119 100644
--- a/api-editor/gui/src/features/annotations/batchforms/RemoveBatchForm.tsx
+++ b/api-editor/gui/src/features/annotations/batchforms/RemoveBatchForm.tsx
@@ -69,10 +69,7 @@ export const EmptyBatchForm: React.FC<EmptyBatchFormProps> = function ({
 }) {
     const dispatch = useAppDispatch();
 
-    const {
-        handleSubmit,
-        register,
-    } = useForm<EmptyBatchFormState>({
+    const { handleSubmit, register } = useForm<EmptyBatchFormState>({
         defaultValues: {
             comment: '',
         },
diff --git a/api-editor/gui/src/features/annotations/forms/BoundaryForm.tsx b/api-editor/gui/src/features/annotations/forms/BoundaryForm.tsx
index 74f2c0c75..19fe5d6a4 100644
--- a/api-editor/gui/src/features/annotations/forms/BoundaryForm.tsx
+++ b/api-editor/gui/src/features/annotations/forms/BoundaryForm.tsx
@@ -270,7 +270,7 @@ export const BoundaryForm: React.FC<BoundaryFormProps> = function ({ target }) {
 
             <FormControl>
                 <FormLabel>Comment:</FormLabel>
-                <Textarea {...register('comment')}/>
+                <Textarea {...register('comment')} />
             </FormControl>
         </AnnotationForm>
     );
diff --git a/api-editor/gui/src/features/annotations/forms/DescriptionForm.tsx b/api-editor/gui/src/features/annotations/forms/DescriptionForm.tsx
index dcb6a4355..04381c7b5 100644
--- a/api-editor/gui/src/features/annotations/forms/DescriptionForm.tsx
+++ b/api-editor/gui/src/features/annotations/forms/DescriptionForm.tsx
@@ -80,7 +80,7 @@ export const DescriptionForm: React.FC<DescriptionFormProps> = function ({ targe
 
             <FormControl>
                 <FormLabel>Comment:</FormLabel>
-                <Textarea {...register('comment')}/>
+                <Textarea {...register('comment')} />
             </FormControl>
         </AnnotationForm>
     );
diff --git a/api-editor/gui/src/features/annotations/forms/EnumForm.tsx b/api-editor/gui/src/features/annotations/forms/EnumForm.tsx
index 94f21b7e4..5a54e1f95 100644
--- a/api-editor/gui/src/features/annotations/forms/EnumForm.tsx
+++ b/api-editor/gui/src/features/annotations/forms/EnumForm.tsx
@@ -184,7 +184,7 @@ export const EnumForm: React.FC<EnumFormProps> = function ({ target }) {
 
             <FormControl>
                 <FormLabel>Comment:</FormLabel>
-                <Textarea {...register('comment')}/>
+                <Textarea {...register('comment')} />
             </FormControl>
         </AnnotationForm>
     );
diff --git a/api-editor/gui/src/features/annotations/forms/MoveForm.tsx b/api-editor/gui/src/features/annotations/forms/MoveForm.tsx
index 7ed1922d7..d0e2a2f1d 100644
--- a/api-editor/gui/src/features/annotations/forms/MoveForm.tsx
+++ b/api-editor/gui/src/features/annotations/forms/MoveForm.tsx
@@ -50,7 +50,6 @@ export const MoveForm: React.FC<MoveFormProps> = function ({ target }) {
         reset({
             destination: previousAnnotation?.destination ?? oldModulePath,
             comment: previousAnnotation?.comment ?? '',
-
         });
     }, [reset, previousAnnotation, oldModulePath]);
 
@@ -94,7 +93,7 @@ export const MoveForm: React.FC<MoveFormProps> = function ({ target }) {
 
             <FormControl>
                 <FormLabel>Comment:</FormLabel>
-                <Textarea {...register('comment')}/>
+                <Textarea {...register('comment')} />
             </FormControl>
         </AnnotationForm>
     );
diff --git a/api-editor/gui/src/features/annotations/forms/RenameForm.tsx b/api-editor/gui/src/features/annotations/forms/RenameForm.tsx
index c8b46301a..6f6065756 100644
--- a/api-editor/gui/src/features/annotations/forms/RenameForm.tsx
+++ b/api-editor/gui/src/features/annotations/forms/RenameForm.tsx
@@ -93,7 +93,7 @@ export const RenameForm: React.FC<RenameFormProps> = function ({ target }) {
 
             <FormControl>
                 <FormLabel>Comment:</FormLabel>
-                <Textarea {...register('comment')}/>
+                <Textarea {...register('comment')} />
             </FormControl>
         </AnnotationForm>
     );
diff --git a/api-editor/gui/src/features/annotations/forms/TodoForm.tsx b/api-editor/gui/src/features/annotations/forms/TodoForm.tsx
index 2a5092608..e56fe22cd 100644
--- a/api-editor/gui/src/features/annotations/forms/TodoForm.tsx
+++ b/api-editor/gui/src/features/annotations/forms/TodoForm.tsx
@@ -90,7 +90,7 @@ export const TodoForm: React.FC<TodoFormProps> = function ({ target }) {
 
             <FormControl>
                 <FormLabel>Comment:</FormLabel>
-                <Textarea {...register('comment')}/>
+                <Textarea {...register('comment')} />
             </FormControl>
         </AnnotationForm>
     );