Merge branch '296-unfolding-the-dropdowns-in-graphics-of-export-permanently' into 'main'

Resolve "Unfolding the dropdowns in GRAPHICS of Export permanently"

See merge request !251

CHANGELOG

 minerva-front (18.0.0~beta.5) stable; urgency=medium
   * Small improvements: when exporting map as image provide default selections
     in for format and submap  (#295)
+  * Small improvements: dropdown sections in exporting map as image are
+    unfolded permanently (#296)
 
  -- Piotr Gawron <piotr.gawron@uni.lu>  Fri, 04 Oct 2024 13:00:00 +0200
 

src/components/Map/Drawer/ExportDrawer/CollapsibleSection/CollapsibleSection.component.tsx

@@ -12,12 +12,14 @@ type CollapsibleSectionProps = {
   title: string;
   children: React.ReactNode;
   onOpened?(): void;
+  dangerouslySetExpanded?: boolean;
 };
 
 export const CollapsibleSection = ({
   title,
   children,
   onOpened,
+  dangerouslySetExpanded,
 }: CollapsibleSectionProps): React.ReactNode => {
   const handleOnChange = (ids: ID[]): void => {
     const hasBeenOpened = ids.length > ZERO;
@@ -29,7 +31,7 @@ export const CollapsibleSection = ({
 
   return (
     <Accordion allowZeroExpanded onChange={handleOnChange}>
-      <AccordionItem>
+      <AccordionItem dangerouslySetExpanded={dangerouslySetExpanded}>
         <AccordionItemHeading>
           <AccordionItemButton>{title}</AccordionItemButton>
         </AccordionItemHeading>

src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageFormat/ImageFormat.component.test.tsx

@@ -40,8 +40,6 @@ describe('ImageFormat - component', () => {
       },
     });
 
-    expect(screen.queryByTestId('checkbox-filter')).not.toBeVisible();
-
     const navigationButton = screen.getByTestId('accordion-item-button');
 
     act(() => {

src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageFormat/ImageFormat.component.tsx

@@ -35,7 +35,7 @@ export const ImageFormat = (): React.ReactNode => {
   }
 
   return (
-    <CollapsibleSection title="Image format">
+    <CollapsibleSection title="Image format" dangerouslySetExpanded>
       {isPending && <p>Loading...</p>}
       {!isPending && mappedElementAnnotations.length > ZERO && (
         <CheckboxFilter

src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/ImageSize.component.tsx

@@ -5,7 +5,7 @@ export const ImageSize = (): React.ReactNode => {
   const { width, height, handleChangeHeight, handleChangeWidth } = useImageSize();
 
   return (
-    <CollapsibleSection title="Image size">
+    <CollapsibleSection title="Image size" dangerouslySetExpanded>
       <div className="flex flex-col gap-4">
         <label className="flex h-9 items-center gap-4">
           <span className="w-12">Width:&nbsp;</span>

src/components/Map/Drawer/ExportDrawer/ExportCompound/Submap/Submap.component.test.tsx

@@ -39,8 +39,6 @@ describe('Submap - component', () => {
       },
     });
 
-    expect(screen.queryByTestId('checkbox-filter')).not.toBeVisible();
-
     const navigationButton = screen.getByTestId('accordion-item-button');
 
     act(() => {

src/components/Map/Drawer/ExportDrawer/ExportCompound/Submap/Submap.component.tsx

@@ -30,7 +30,7 @@ export const Submap = (): React.ReactNode => {
   }
 
   return (
-    <CollapsibleSection title="Submap">
+    <CollapsibleSection title="Submap" dangerouslySetExpanded>
       {isPending && <p>Loading...</p>}
       {!isPending && mappedElementAnnotations && mappedElementAnnotations.length > ZERO && (
         <CheckboxFilter