refactor: isolate expand button logic into component

Author: vhscom

web-ui/src/components/expand-more/ExpandMore.jsx

@@ -0,0 +1,20 @@
+import { styled } from '@mui/material/styles';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { IconButton } from '@mui/material';
+
+const ExpandMore = styled(props => {
+  const { expand, ...other } = props;
+  return (
+    <IconButton {...other}>
+      {props.children ? props.children : <ExpandMoreIcon />}
+    </IconButton>
+  );
+})(({ theme, expand }) => ({
+  transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
+  marginLeft: 'auto',
+  transition: theme.transitions.create('transform', {
+    duration: theme.transitions.duration.shortest
+  })
+}));
+
+export default ExpandMore;

web-ui/src/components/expand-more/ExpandMore.stories.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import ExpandMore from './ExpandMore';
+
+export default {
+  title: 'Check Ins/ExpandMore',
+  component: ExpandMore
+};
+const Template = args => <ExpandMore {...args} />;
+
+export const DefaultExpandMore = Template.bind({});
+DefaultExpandMore.args = {};
+
+// Expanded
+export const ExpandedExpandMore = Template.bind({});
+ExpandedExpandMore.args = {
+  expand: true
+};
+
+// Collapsed
+export const CollapsedExpandMore = Template.bind({});
+CollapsedExpandMore.args = {
+  expand: false
+};

web-ui/src/components/expand-more/ExpandMore.test.jsx

@@ -0,0 +1,66 @@
+import { render, screen } from '@testing-library/react';
+import ExpandMore from './ExpandMore';
+
+describe.only('ExpandMore', () => {
+  it('should render the component', () => {
+    render(<ExpandMore />);
+
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+
+    // is collapsed by default
+    expect(button).toHaveStyle('transform: rotate(0deg)');
+  });
+
+  it('should rotate the icon when expanded', () => {
+    render(<ExpandMore expand />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveStyle('transform: rotate(180deg)');
+  });
+
+  it('should rotate the icon when collapsed', () => {
+    render(<ExpandMore expand={false} />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveStyle('transform: rotate(0deg)');
+  });
+
+  it('spreads its props to the button', () => {
+    render(<ExpandMore data-testid="expand-more" />);
+
+    const button = screen.getByTestId('expand-more');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('spread props include aria-label and aria-expanded', () => {
+    render(<ExpandMore aria-label="expand" aria-expanded={false} />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('aria-label', 'expand');
+    expect(button).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('spread props include id and className', () => {
+    render(<ExpandMore id="expand-more" className="expand-more" />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('id', 'expand-more');
+    expect(button).toHaveClass('expand-more');
+  });
+
+  it('displays the expand more icon when no children are provided', () => {
+    render(<ExpandMore />);
+
+    const button = screen.getByRole('button');
+    const icon = button.querySelector('svg');
+    expect(icon).toHaveAttribute('data-testid', 'ExpandMoreIcon');
+  });
+
+  it('displays the children when provided', () => {
+    render(<ExpandMore>Test</ExpandMore>);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveTextContent('Test');
+  });
+});

web-ui/src/components/feedback_request_card/FeedbackRequestCard.jsx

@@ -6,8 +6,6 @@ import { Avatar, Typography } from '@mui/material';
 import CardContent from '@mui/material/CardContent';
 import CardActions from '@mui/material/CardActions';
 import Collapse from '@mui/material/Collapse';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import IconButton from '@mui/material/IconButton';
 import Grid from '@mui/material/Grid';
 import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
@@ -19,6 +17,8 @@ import Divider from '@mui/material/Divider';
 import Button from '@mui/material/Button';
 import queryString from 'query-string';
 
+import ExpandMore from '../expand-more/ExpandMore';
+
 const PREFIX = 'FeedbackRequestCard';
 const classes = {
   root: `${PREFIX}-root`,
@@ -36,16 +36,6 @@ const StyledCard = styled(Card)({
       maxWidth: '100%'
     }
   },
-  [`& .${classes.expandClose}`]: {
-    transform: 'rotate(0deg)',
-    marginLeft: 'auto',
-    transition: 'transform 0.1s linear'
-  },
-  [`& .${classes.expandOpen}`]: {
-    transform: 'rotate(180deg)',
-    transition: 'transform 0.1s linear',
-    marginLeft: 'auto'
-  },
   '& .MuiCardContent-root': {
     paddingBottom: 0,
     paddingTop: 0,
@@ -107,12 +97,10 @@ const FeedbackRequestCard = ({
   const requesteeProfile = selectProfile(state, requesteeId);
   const avatarURL = getAvatarURL(requesteeProfile?.workEmail);
   const history = useHistory();
-  const [expanded, setExpanded] = React.useState(false);
+  const [expanded, setExpanded] = useState(false);
   const [sortedResponses, setSortedResponses] = useState(responses);
 
-  const handleExpandClick = () => {
-    setExpanded(!expanded);
-  };
+  const handleExpandClick = () => setExpanded(!expanded);
 
   const withinDateRange = useCallback(
     requestDate => {
@@ -271,15 +259,13 @@ const FeedbackRequestCard = ({
           </CardContent>
         </div>
         <CardActions disableSpacing>
-          <IconButton
+          <ExpandMore
+            expand={expanded}
             onClick={handleExpandClick}
             aria-expanded={expanded}
             aria-label="show more"
-            className={expanded ? classes.expandOpen : classes.expandClose}
             size="large"
-          >
-            <ExpandMoreIcon />
-          </IconButton>
+          />
         </CardActions>
         <Collapse in={expanded} timeout="auto" unmountOnExit>
           <CardContent style={{ padding: 0 }}>

web-ui/src/components/member_selector/MemberSelector.jsx

@@ -19,12 +19,11 @@ import {
 } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
-import ExpandLessIcon from '@mui/icons-material/ExpandLess';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { getAvatarURL } from '../../api/api';
 
+import ExpandMore from '../expand-more/ExpandMore.jsx';
 import MemberSelectorDialog, {
   FilterType
 } from './member_selector_dialog/MemberSelectorDialog';
@@ -100,6 +99,8 @@ const MemberSelector = ({
   const roleFilter = filters.find(filter => filter.type === FilterType.ROLE);
   const memberDescriptor = isFilteredByRole ? roleFilter.value : 'members';
 
+  const handleExpandClick = () => setExpanded(!expanded);
+
   // When the selected members change, fire the onChange event
   useEffect(() => {
     if (onChange) {
@@ -176,9 +177,12 @@ const MemberSelector = ({
       >
         <CardHeader
           avatar={
-            <IconButton onClick={() => setExpanded(!expanded)}>
-              {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
-            </IconButton>
+            <ExpandMore
+              expand={expanded}
+              onClick={handleExpandClick}
+              aria-expanded={expanded}
+              aria-label="show more"
+            />
           }
           title={
             <div className="member-selector-card-title-container">

web-ui/src/pages/ReceivedRequestsPage.jsx

@@ -11,13 +11,13 @@ import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
 import Typography from '@mui/material/Typography';
 import { Search as SearchIcon } from '@mui/icons-material';
-import { Collapse, IconButton, InputAdornment } from '@mui/material';
+import { Collapse, InputAdornment } from '@mui/material';
 import ReceivedRequestCard from '../components/received_request_card/ReceivedRequestCard';
 import { getFeedbackRequestsByRecipient } from '../api/feedback';
 import './ReceivedRequestsPage.css';
 import { UPDATE_TOAST } from '../context/actions';
 import Divider from '@mui/material/Divider';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ExpandMore from '../components/expand-more/ExpandMore';
 import SkeletonLoader from '../components/skeleton_loader/SkeletonLoader';
 
 const PREFIX = 'ReceivedRequestsPage';
@@ -61,16 +61,6 @@ const Root = styled('div')({
     color: 'gray',
     marginTop: '4em',
     textAlign: 'center'
-  },
-  [`& .${classes.expandClose}`]: {
-    transform: 'rotate(0deg)',
-    marginLeft: 'auto',
-    transition: 'transform 0.1s linear'
-  },
-  [`& .${classes.expandOpen}`]: {
-    transform: 'rotate(180deg)',
-    transition: 'transform 0.1s linear',
-    marginLeft: 'auto'
   }
 });
 
@@ -264,16 +254,12 @@ const ReceivedRequestsPage = () => {
       </div>
       <div className="request-section-header">
         <Typography variant="h5">Received Requests</Typography>
-        <IconButton
+        <ExpandMore
+          expand={receivedRequestsExpanded}
           onClick={() => setReceivedRequestsExpanded(!receivedRequestsExpanded)}
+          aria-expanded={receivedRequestsExpanded}
           aria-label="show more"
-          className={
-            receivedRequestsExpanded ? classes.expandOpen : classes.expandClose
-          }
-          size="large"
-        >
-          <ExpandMoreIcon />
-        </IconButton>
+        />
       </div>
       <Divider />
       <Collapse in={!receivedRequestsExpanded} timeout="auto" unmountOnExit>
@@ -309,18 +295,14 @@ const ReceivedRequestsPage = () => {
       </Collapse>
       <div className="request-section-header">
         <Typography variant="h5">Submitted Requests</Typography>
-        <IconButton
+        <ExpandMore
+          expand={submittedRequestsExpanded}
           onClick={() =>
             setSubmittedRequestsExpanded(!submittedRequestsExpanded)
           }
+          aria-expanded={submittedRequestsExpanded}
           aria-label="show more"
-          className={
-            submittedRequestsExpanded ? classes.expandOpen : classes.expandClose
-          }
-          size="large"
-        >
-          <ExpandMoreIcon />
-        </IconButton>
+        />
       </div>
       <Divider />
       <Collapse in={!submittedRequestsExpanded} timeout="auto" unmountOnExit>
@@ -366,16 +348,12 @@ const ReceivedRequestsPage = () => {
       </Collapse>
       <div className="request-section-header">
         <Typography variant="h5">Canceled Requests</Typography>
-        <IconButton
+        <ExpandMore
+          expand={canceledRequestsExpanded}
           onClick={() => setCanceledRequestsExpanded(!canceledRequestsExpanded)}
+          aria-expanded={canceledRequestsExpanded}
           aria-label="show more"
-          className={
-            canceledRequestsExpanded ? classes.expandOpen : classes.expandClose
-          }
-          size="large"
-        >
-          <ExpandMoreIcon />
-        </IconButton>
+        />
       </div>
       <Divider />
       <Collapse in={!canceledRequestsExpanded} timeout="auto" unmountOnExit>