From dabf1f26eb228f7ba3705a4cc9c2aaf3fee34e6f Mon Sep 17 00:00:00 2001
From: Lars Reimann <mail@larsreimann.com>
Date: Fri, 1 Jul 2022 14:28:01 +0200
Subject: [PATCH] fix(gui): adding required annotation now closes
 attribute/constant/required form for same element

---
 .../annotations/AnnotationDropdown.tsx        | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/api-editor/gui/src/features/annotations/AnnotationDropdown.tsx b/api-editor/gui/src/features/annotations/AnnotationDropdown.tsx
index 6211b0204..031bd06bc 100644
--- a/api-editor/gui/src/features/annotations/AnnotationDropdown.tsx
+++ b/api-editor/gui/src/features/annotations/AnnotationDropdown.tsx
@@ -4,6 +4,8 @@ import { FaChevronDown } from 'react-icons/fa';
 import { useAppDispatch, useAppSelector } from '../../app/hooks';
 import { addPure, addRemove, addRequired, selectComplete, selectUsernameIsValid } from './annotationSlice';
 import {
+    hideAnnotationForm,
+    selectCurrentUserAction,
     showAttributeAnnotationForm,
     showBoundaryAnnotationForm,
     showCalledAfterAnnotationForm,
@@ -56,7 +58,22 @@ export const AnnotationDropdown: React.FC<AnnotationDropdownProps> = function ({
     const isComplete = Boolean(useAppSelector(selectComplete(target)));
     const isValidUsername = Boolean(useAppSelector(selectUsernameIsValid));
     const isDisabled = isComplete || !isValidUsername;
+    const currentUserAction = useAppSelector(selectCurrentUserAction);
 
+    // Event Handlers --------------------------------------------------------------------------------------------------
+    const onSelectRequired = () => {
+        if (
+            currentUserAction.target === target &&
+            (currentUserAction.type === 'attribute' ||
+                currentUserAction.type === 'constant' ||
+                currentUserAction.type === 'optional')
+        ) {
+            dispatch(hideAnnotationForm());
+        }
+        dispatch(addRequired({ target }));
+    };
+
+    // Render ----------------------------------------------------------------------------------------------------------
     return (
         // Box gets rid of popper.js warning "CSS margin styles cannot be used"
         <Box>
@@ -104,7 +121,7 @@ export const AnnotationDropdown: React.FC<AnnotationDropdownProps> = function ({
                                 </MenuItem>
                             )}
                             {showRequired && (
-                                <MenuItem onClick={() => dispatch(addRequired({ target }))} paddingLeft={8}>
+                                <MenuItem onClick={onSelectRequired} paddingLeft={8}>
                                     @required
                                 </MenuItem>
                             )}