Skip to content
This repository was archived by the owner on Jan 19, 2025. It is now read-only.

Commit c712505

Browse files
lars-reimannlars-reimann
authored
feat(gui): categorize annotations in annotation dropdown (#801)
feat(gui): categorized annotations in annotation dropdown
1 parent d9d65da commit c712505

File tree

1 file changed

+113
-53
lines changed

1 file changed

+113
-53
lines changed

‎api-editor/gui/src/features/annotations/AnnotationDropdown.tsx‎

Lines changed: 113 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Box, Button, Icon, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react';
1+
import { Box, Button, Icon, Menu, MenuButton, MenuGroup, MenuItem, MenuList } from '@chakra-ui/react';
22
import React from 'react';
33
import { FaChevronDown } from 'react-icons/fa';
44
import { useAppDispatch, useAppSelector } from '../../app/hooks';
@@ -8,12 +8,12 @@ import {
88
showBoundaryAnnotationForm,
99
showCalledAfterAnnotationForm,
1010
showConstantAnnotationForm,
11+
showDescriptionAnnotationForm,
1112
showEnumAnnotationForm,
1213
showGroupAnnotationForm,
1314
showMoveAnnotationForm,
1415
showOptionalAnnotationForm,
1516
showRenameAnnotationForm,
16-
showDescriptionAnnotationForm,
1717
showTodoAnnotationForm,
1818
} from '../ui/uiSlice';
1919

@@ -71,60 +71,120 @@ export const AnnotationDropdown: React.FC<AnnotationDropdownProps> = function ({
7171
Annotations
7272
</MenuButton>
7373
<MenuList>
74-
{showAttribute && (
75-
<MenuItem onClick={() => dispatch(showAttributeAnnotationForm(target))}>@attribute</MenuItem>
76-
)}
77-
{showBoundary && (
78-
<MenuItem onClick={() => dispatch(showBoundaryAnnotationForm(target))}>@boundary</MenuItem>
79-
)}
80-
{showCalledAfter && (
81-
<MenuItem
82-
onClick={() =>
83-
dispatch(
84-
showCalledAfterAnnotationForm({
85-
target,
86-
calledAfterName: '',
87-
}),
88-
)
89-
}
90-
>
91-
@calledAfter
92-
</MenuItem>
93-
)}
94-
{showConstant && (
95-
<MenuItem onClick={() => dispatch(showConstantAnnotationForm(target))}>@constant</MenuItem>
74+
{(showEnum || showBoundary) && (
75+
<MenuGroup title="Type">
76+
{showBoundary && (
77+
<MenuItem onClick={() => dispatch(showBoundaryAnnotationForm(target))} paddingLeft={8}>
78+
@boundary
79+
</MenuItem>
80+
)}
81+
{showEnum && (
82+
<MenuItem onClick={() => dispatch(showEnumAnnotationForm(target))} paddingLeft={8}>
83+
@enum
84+
</MenuItem>
85+
)}
86+
</MenuGroup>
9687
)}
97-
{showDescription && (
98-
<MenuItem onClick={() => dispatch(showDescriptionAnnotationForm(target))}>
99-
@description
100-
</MenuItem>
101-
)}
102-
{showEnum && <MenuItem onClick={() => dispatch(showEnumAnnotationForm(target))}>@enum</MenuItem>}
103-
{showGroup && (
104-
<MenuItem
105-
onClick={() =>
106-
dispatch(
107-
showGroupAnnotationForm({
108-
target,
109-
groupName: '',
110-
}),
111-
)
112-
}
113-
>
114-
@group
115-
</MenuItem>
116-
)}
117-
{showMove && <MenuItem onClick={() => dispatch(showMoveAnnotationForm(target))}>@move</MenuItem>}
118-
{showOptional && (
119-
<MenuItem onClick={() => dispatch(showOptionalAnnotationForm(target))}>@optional</MenuItem>
88+
89+
{(showAttribute || showConstant || showOptional || showRequired) && (
90+
<MenuGroup title="Value">
91+
{showAttribute && (
92+
<MenuItem onClick={() => dispatch(showAttributeAnnotationForm(target))} paddingLeft={8}>
93+
@attribute
94+
</MenuItem>
95+
)}
96+
{showConstant && (
97+
<MenuItem onClick={() => dispatch(showConstantAnnotationForm(target))} paddingLeft={8}>
98+
@constant
99+
</MenuItem>
100+
)}
101+
{showOptional && (
102+
<MenuItem onClick={() => dispatch(showOptionalAnnotationForm(target))} paddingLeft={8}>
103+
@optional
104+
</MenuItem>
105+
)}
106+
{showRequired && (
107+
<MenuItem onClick={() => dispatch(addRequired({ target }))} paddingLeft={8}>
108+
@required
109+
</MenuItem>
110+
)}
111+
</MenuGroup>
120112
)}
121-
{showPure && <MenuItem onClick={() => dispatch(addPure({ target }))}>@pure</MenuItem>}
122-
{showRemove && <MenuItem onClick={() => dispatch(addRemove({ target }))}>@remove</MenuItem>}
123-
{showRename && (
124-
<MenuItem onClick={() => dispatch(showRenameAnnotationForm(target))}>@rename</MenuItem>
113+
114+
{(showCalledAfter ||
115+
showDescription ||
116+
showGroup ||
117+
showMove ||
118+
showPure ||
119+
showRemove ||
120+
showRename ||
121+
showTodo) && (
122+
<MenuGroup title="Uncategorized">
123+
{showCalledAfter && (
124+
<MenuItem
125+
onClick={() =>
126+
dispatch(
127+
showCalledAfterAnnotationForm({
128+
target,
129+
calledAfterName: '',
130+
}),
131+
)
132+
}
133+
paddingLeft={8}
134+
>
135+
@calledAfter
136+
</MenuItem>
137+
)}
138+
{showDescription && (
139+
<MenuItem
140+
onClick={() => dispatch(showDescriptionAnnotationForm(target))}
141+
paddingLeft={8}
142+
>
143+
@description
144+
</MenuItem>
145+
)}
146+
{showGroup && (
147+
<MenuItem
148+
onClick={() =>
149+
dispatch(
150+
showGroupAnnotationForm({
151+
target,
152+
groupName: '',
153+
}),
154+
)
155+
}
156+
paddingLeft={8}
157+
>
158+
@group
159+
</MenuItem>
160+
)}
161+
{showMove && (
162+
<MenuItem onClick={() => dispatch(showMoveAnnotationForm(target))} paddingLeft={8}>
163+
@move
164+
</MenuItem>
165+
)}
166+
{showPure && (
167+
<MenuItem onClick={() => dispatch(addPure({ target }))} paddingLeft={8}>
168+
@pure
169+
</MenuItem>
170+
)}
171+
{showRemove && (
172+
<MenuItem onClick={() => dispatch(addRemove({ target }))} paddingLeft={8}>
173+
@remove
174+
</MenuItem>
175+
)}
176+
{showRename && (
177+
<MenuItem onClick={() => dispatch(showRenameAnnotationForm(target))} paddingLeft={8}>
178+
@rename
179+
</MenuItem>
180+
)}
181+
{showTodo && (
182+
<MenuItem onClick={() => dispatch(showTodoAnnotationForm(target))} paddingLeft={8}>
183+
@todo
184+
</MenuItem>
185+
)}
186+
</MenuGroup>
125187
)}
126-
{showRequired && <MenuItem onClick={() => dispatch(addRequired({ target }))}>@required</MenuItem>}
127-
{showTodo && <MenuItem onClick={() => dispatch(showTodoAnnotationForm(target))}>@todo</MenuItem>}
128188
</MenuList>
129189
</Menu>
130190
</Box>

0 commit comments

Comments
 (0)