Updated ExpansionPanel to Accordion

plugins/circleci/src/pages/BuildWithStepsPage/lib/ActionOutput/ActionOutput.tsx

@@ -15,10 +15,10 @@
  */
 import React, { useEffect, useState, FC, Suspense } from 'react';
 import {
-  ExpansionPanel,
-  ExpansionPanelSummary,
+  Accordion,
+  AccordionSummary,
   Typography,
-  ExpansionPanelDetails,
+  AccordionDetails,
   LinearProgress,
 } from '@material-ui/core';
 import moment from 'moment';
@@ -29,7 +29,7 @@ import { BuildStepAction } from 'circleci-api';
 const LazyLog = React.lazy(() => import('react-lazylog/build/LazyLog'));
 moment.relativeTimeThreshold('ss', 0);
 const useStyles = makeStyles({
-  expansionPanelDetails: {
+  accordionDetails: {
     padding: 0,
   },
   button: {
@@ -66,11 +66,11 @@ export const ActionOutput: FC<{
     )
     .humanize();
   return (
-    <ExpansionPanel
+    <Accordion
       TransitionProps={{ unmountOnExit: true }}
       className={className}
     >
-      <ExpansionPanelSummary
+      <AccordionSummary
         expandIcon={<ExpandMoreIcon />}
         aria-controls={`panel-${name}-content`}
         id={`panel-${name}-header`}
@@ -81,8 +81,8 @@ export const ActionOutput: FC<{
         <Typography variant="button">
           {name} ({timeElapsed})
         </Typography>
-      </ExpansionPanelSummary>
-      <ExpansionPanelDetails className={classes.expansionPanelDetails}>
+      </AccordionSummary>
+      <AccordionDetails className={classes.accordionDetails}>
         {messages.length === 0 ? (
           'Nothing here...'
         ) : (
@@ -92,7 +92,7 @@ export const ActionOutput: FC<{
             </div>
           </Suspense>
         )}
-      </ExpansionPanelDetails>
-    </ExpansionPanel>
+      </AccordionDetails>
+    </Accordion>
   );
 };

plugins/github-actions/src/components/WorkflowRunDetails/WorkflowRunDetails.tsx

@@ -26,10 +26,10 @@ import {
   TableRow,
   TableCell,
   ListItemText,
-  ExpansionPanel,
-  ExpansionPanelSummary,
+  Accordion,
+  AccordionSummary,
   Typography,
-  ExpansionPanelDetails,
+  AccordionDetails,
   TableContainer,
   Table,
   Paper,
@@ -56,7 +56,7 @@ const useStyles = makeStyles<Theme>(theme => ({
   table: {
     padding: theme.spacing(1),
   },
-  expansionPanelDetails: {
+  accordionDetails: {
     padding: 0,
   },
   button: {
@@ -113,11 +113,11 @@ const StepView = ({ step }: { step: Step }) => {
 const JobListItem = ({ job, className }: { job: Job; className: string }) => {
   const classes = useStyles();
   return (
-    <ExpansionPanel
+    <Accordion
       TransitionProps={{ unmountOnExit: true }}
       className={className}
     >
-      <ExpansionPanelSummary
+      <AccordionSummary
         expandIcon={<ExpandMoreIcon />}
         aria-controls={`panel-${name}-content`}
         id={`panel-${name}-header`}
@@ -128,8 +128,8 @@ const JobListItem = ({ job, className }: { job: Job; className: string }) => {
         <Typography variant="button">
           {job.name} ({getElapsedTime(job.started_at, job.completed_at)})
         </Typography>
-      </ExpansionPanelSummary>
-      <ExpansionPanelDetails className={classes.expansionPanelDetails}>
+      </AccordionSummary>
+      <AccordionDetails className={classes.accordionDetails}>
         <TableContainer>
           <Table>
             {job.steps.map((step: Step) => (
@@ -137,7 +137,7 @@ const JobListItem = ({ job, className }: { job: Job; className: string }) => {
             ))}
           </Table>
         </TableContainer>
-      </ExpansionPanelDetails>
+      </AccordionDetails>
       {job.status === "queued" || job.status === "in_progress" ? 
       <WorkflowRunLogs 
       runId={job.id} 
@@ -150,7 +150,7 @@ const JobListItem = ({ job, className }: { job: Job; className: string }) => {
       />
       }
       
-    </ExpansionPanel>
+    </Accordion>
   );
 };
 

plugins/jenkins/src/pages/BuildWithStepsPage/lib/ActionOutput/ActionOutput.tsx

@@ -15,16 +15,16 @@
  */
 import React, { useEffect, FC } from 'react';
 import {
-  ExpansionPanel,
-  ExpansionPanelSummary,
+  Accordion,
+  AccordionSummary,
   Typography,
-  ExpansionPanelDetails,
+  AccordionDetails,
 } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({
-  expansionPanelDetails: {
+  accordionDetails: {
     padding: 0,
   },
   button: {
@@ -45,11 +45,11 @@ export const ActionOutput: FC<{
   useEffect(() => {}, [url]);
 
   return (
-    <ExpansionPanel
+    <Accordion
       TransitionProps={{ unmountOnExit: true }}
       className={className}
     >
-      <ExpansionPanelSummary
+      <AccordionSummary
         expandIcon={<ExpandMoreIcon />}
         aria-controls={`panel-${name}-content`}
         id={`panel-${name}-header`}
@@ -58,10 +58,10 @@ export const ActionOutput: FC<{
         }}
       >
         <Typography variant="button">{name}</Typography>
-      </ExpansionPanelSummary>
-      <ExpansionPanelDetails className={classes.expansionPanelDetails}>
+      </AccordionSummary>
+      <AccordionDetails className={classes.accordionDetails}>
         Nothing here...
-      </ExpansionPanelDetails>
-    </ExpansionPanel>
+      </AccordionDetails>
+    </Accordion>
   );
 };

plugins/scaffolder/src/components/JobStage/JobStage.tsx

@@ -15,9 +15,9 @@
  */
 import {
   Box,
-  ExpansionPanel,
-  ExpansionPanelDetails,
-  ExpansionPanelSummary,
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
   LinearProgress,
   Typography,
 } from '@material-ui/core';
@@ -32,7 +32,7 @@ const LazyLog = React.lazy(() => import('react-lazylog/build/LazyLog'));
 moment.relativeTimeThreshold('ss', 0);
 
 const useStyles = makeStyles(theme => ({
-  expansionPanelDetails: {
+  accordionDetails: {
     padding: 0,
   },
   button: {
@@ -43,7 +43,7 @@ const useStyles = makeStyles(theme => ({
   cardContent: {
     backgroundColor: theme.palette.background.default,
   },
-  expansionPanel: {
+  accordion: {
     position: 'relative',
     '&:after': {
       pointerEvents: 'none',
@@ -98,17 +98,17 @@ export const JobStage = ({ endedAt, startedAt, name, log, status }: Props) => {
       : null;
 
   return (
-    <ExpansionPanel
+    <Accordion
       TransitionProps={{ unmountOnExit: true }}
       className={cn(
-        classes.expansionPanel,
+        classes.accordion,
         classes[status.toLowerCase() as keyof ReturnType<typeof useStyles>] ??
           classes.neutral,
       )}
       expanded={expanded}
       onChange={(_, newState) => setExpanded(newState)}
     >
-      <ExpansionPanelSummary
+      <AccordionSummary
         expandIcon={<ExpandMoreIcon />}
         aria-controls={`panel-${name}-content`}
         id={`panel-${name}-header`}
@@ -119,8 +119,8 @@ export const JobStage = ({ endedAt, startedAt, name, log, status }: Props) => {
         <Typography variant="button">
           {name} {timeElapsed && `(${timeElapsed})`}
         </Typography>
-      </ExpansionPanelSummary>
-      <ExpansionPanelDetails className={classes.expansionPanelDetails}>
+      </AccordionSummary>
+      <AccordionDetails className={classes.accordionDetails}>
         {log.length === 0 ? (
           <Box px={4}>No logs available for this step</Box>
         ) : (
@@ -130,7 +130,7 @@ export const JobStage = ({ endedAt, startedAt, name, log, status }: Props) => {
             </div>
           </Suspense>
         )}
-      </ExpansionPanelDetails>
-    </ExpansionPanel>
+      </AccordionDetails>
+    </Accordion>
   );
 };