fix: changes to group collapsible

src/components/PeopleManagement/GroupCardGrid.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { CardGrid, Collapsible } from '@openedx/paragon';
+import { CardGrid, Collapsible, Icon } from '@openedx/paragon';
+import { ExpandLess, ExpandMore } from '@openedx/paragon/icons';
 
 import GroupDetailCard from './GroupDetailCard';
 
@@ -30,24 +31,30 @@ const GroupCardGrid = ({ groups }) => {
         ))}
       </CardGrid>
       {overflowGroups && (
-        <Collapsible
-          styling="basic"
-          title={`Show all ${groups.length} groups`}
-          className="group-collapsible"
-        >
-          <CardGrid
-            columnSizes={{
-              xs: 6,
-              lg: 6,
-              xl: 4,
-            }}
-            hasEqualColumnHeights="true"
-          >
-            {overflowGroups.map((group) => (
-              <GroupDetailCard group={group} />
-            ))}
-          </CardGrid>
-        </Collapsible>
+        <Collapsible.Advanced>
+          <Collapsible.Body>
+            <CardGrid
+              columnSizes={{
+                xs: 6,
+                lg: 6,
+                xl: 4,
+              }}
+              hasEqualColumnHeights="true"
+            >
+              {overflowGroups.map((group) => (
+                <GroupDetailCard group={group} />
+              ))}
+            </CardGrid>
+          </Collapsible.Body>
+          <Collapsible.Trigger className="d-flex justify-content-end text-info">
+            <Collapsible.Visible whenClosed>
+              Show all {groups.length} groups <Icon src={ExpandMore} />
+            </Collapsible.Visible>
+            <Collapsible.Visible whenOpen>
+              Show less <Icon src={ExpandLess} />
+            </Collapsible.Visible>
+          </Collapsible.Trigger>
+        </Collapsible.Advanced>
       )}
     </>
   );

src/components/PeopleManagement/_PeopleManagement.scss

@@ -7,9 +7,3 @@
     padding: .25rem 1.25rem 1.25rem 1.25rem;
   }
 }
-
-.group-collapsible {
-  .collapsible-basic .collapsible-trigger {
-    justify-content: right;
-  }
-}

src/components/PeopleManagement/tests/PeopleManagementPage.test.jsx

@@ -146,10 +146,14 @@ describe('<PeopleManagementPage >', () => {
     expect(screen.getByText('Show all 4 groups')).toBeInTheDocument();
     expect(screen.queryByText('fruity pebbles')).not.toBeInTheDocument();
 
-    const collapsible = screen.getByText('Show all 4 groups');
-    collapsible.click();
+    const closedCollapsible = screen.getByText('Show all 4 groups');
+    closedCollapsible.click();
     await waitFor(() => {
       expect(screen.getByText('fruity pebbles')).toBeInTheDocument();
     });
+
+    expect(screen.queryByText('Show all 4 groups')).toBeNull();
+    const openCollapsible = screen.getByText('Show less');
+    expect(openCollapsible).toBeInTheDocument();
   });
 });