feat(gui): show parameter descriptions in group form (#974)

* feat(gui): show parameter descriptions in group form

* style: apply automatic fixes of linters

Co-authored-by: lars-reimann <[email protected]>

Author: lars-reimann

api-editor/gui/src/features/annotations/forms/GroupForm.tsx

@@ -1,4 +1,5 @@
 import {
+    Box,
     Checkbox,
     FormControl,
     FormErrorIcon,
@@ -19,6 +20,7 @@ import { AnnotationForm } from './AnnotationForm';
 import { hideAnnotationForm } from '../../ui/uiSlice';
 import { selectGroupAnnotations, upsertGroupAnnotation } from '../annotationSlice';
 import { GroupAnnotation } from '../versioning/AnnotationStoreV2';
+import { DocumentationText } from '../../packageData/selectionView/DocumentationText';
 
 interface GroupFormProps {
     readonly target: PythonDeclaration;
@@ -163,9 +165,20 @@ export const GroupForm: React.FC<GroupFormProps> = function ({ target, groupName
             <FormControl isInvalid={Boolean(errors?.parameters)}>
                 <VStack alignItems="left">
                     {allParameters.map((parameter) => (
-                        <Checkbox key={parameter.name} {...register(`parameters.${parameter.name}`)}>
-                            {getParameterLabel(parameter.name)}
-                        </Checkbox>
+                        <Box key={parameter.name}>
+                            <Checkbox {...register(`parameters.${parameter.name}`)}>
+                                {getParameterLabel(parameter.name)}
+                            </Checkbox>
+                            {parameter.description && (
+                                <Box m={4}>
+                                    <DocumentationText
+                                        declaration={parameter}
+                                        inputText={parameter.description}
+                                        alwaysExpanded
+                                    ></DocumentationText>
+                                </Box>
+                            )}
+                        </Box>
                     ))}
                 </VStack>
             </FormControl>

api-editor/gui/src/features/packageData/selectionView/DocumentationText.tsx

@@ -37,6 +37,7 @@ import { PythonModule } from '../model/PythonModule';
 interface DocumentationTextProps {
     declaration: PythonDeclaration;
     inputText: string;
+    alwaysExpanded?: boolean;
 }
 
 type ParagraphComponent = FunctionComponent<
@@ -71,7 +72,11 @@ const CustomText: ParagraphComponent = function ({ className, children }) {
 };
 
 const CustomUnorderedList: UnorderedListComponent = function ({ className, children }) {
-    return <UnorderedList className={className}>{children}</UnorderedList>;
+    return (
+        <UnorderedList className={className} pl={2}>
+            {children}
+        </UnorderedList>
+    );
 };
 
 const components = {
@@ -81,7 +86,11 @@ const components = {
     ul: CustomUnorderedList,
 };
 
-export const DocumentationText: React.FC<DocumentationTextProps> = function ({ declaration, inputText = '' }) {
+export const DocumentationText: React.FC<DocumentationTextProps> = function ({
+    declaration,
+    inputText = '',
+    alwaysExpanded = false,
+}) {
     const expandDocumentationByDefault = useAppSelector(selectExpandDocumentationByDefault);
 
     const preprocessedText = inputText
@@ -113,7 +122,12 @@ export const DocumentationText: React.FC<DocumentationTextProps> = function ({ d
             resolveAbsoluteLink(declaration, qualifiedName, 2),
         );
 
-    const shortenedText = preprocessedText.split('\n\n')[0];
+    let shortenedText;
+    if (alwaysExpanded) {
+        shortenedText = preprocessedText;
+    } else {
+        shortenedText = preprocessedText.split('\n\n')[0];
+    }
     const hasMultipleLines = shortenedText !== preprocessedText;
     const [readMore, setReadMore] = useState(expandDocumentationByDefault);