Skip to content

Commit

Permalink
Show Indications that required signoffs have been achieved (#3016)
Browse files Browse the repository at this point in the history
* view required signoffs in the rule update page

* refactored the code to fix test errors in github

* fixed eslint errors

* fixed eslint errors finally

* tried to fix lint errors

* updated required signoffs for rules

* fixed eslint errors 5

* fixed the channel name release

* just changed the signoffs display mode

* signoffs display changed

* fixed eslint error- all-good

* perfected-code

* finishing touches

* Implemented changes requested
  • Loading branch information
AMUZY authored Oct 19, 2023
1 parent 6493a9e commit 6d46207
Showing 1 changed file with 85 additions and 45 deletions.
130 changes: 85 additions & 45 deletions ui/src/components/SignoffSummary/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,18 @@ import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ListSubheader from '@material-ui/core/ListSubheader';
import Typography from '@material-ui/core/Typography';
import CheckCircleIcon from 'mdi-react/CheckCircleIcon';
import AccountClockIcon from 'mdi-react/AccountClockIcon';

const useStyles = makeStyles(theme => ({
approval: {
display: 'flex',
width: 'max-content',
flexFlow: 'row nowrap',
justifyContent: 'center',
alignItems: 'center',
margin: '0 2px 0 2px',
},
listSubheader: {
lineHeight: 1.5,
marginBottom: theme.spacing(0.5),
Expand All @@ -21,7 +31,11 @@ const useStyles = makeStyles(theme => ({
marginBottom: 0,
marginTop: 0,
},
signoffsContainer: {
display: 'flex',
},
signoffsList: {
width: 'max-content',
marginRight: theme.spacing(6),
paddingTop: 0,
paddingBottom: 0,
Expand All @@ -33,9 +47,10 @@ const useStyles = makeStyles(theme => ({
}));

function SignoffSummary(props) {
const classes = useStyles();
const { requiredSignoffs, signoffs, className } = props;
const listOfSignoffs = Object.entries(signoffs);
const theRequiredSignoffs = Object.entries(requiredSignoffs);
const classes = useStyles();

return (
<div className={classNames(classes.listWrapper, className)}>
Expand All @@ -46,56 +61,81 @@ function SignoffSummary(props) {
Requires Signoffs From
</ListSubheader>
}>
{Object.entries(requiredSignoffs).map(([role, count], index) => {
{theRequiredSignoffs.map(([role, count], index) => {
const key = `${role}-${index}`;
// allSigned Returns all that have signed
let allSigned = [];

if (listOfSignoffs) {
allSigned = listOfSignoffs.filter(arr => {
return role === arr[1];
});
}

// allNotSigned() Gets and returns all that haven't signed
const allNotSigned = () => {
const leftarr = [];
const allleft = count - allSigned.length;

// Disabled eslint because "i+1" runs loop till eternity
// eslint-disable-next-line no-plusplus
for (let i = 0; i < allleft; i++) {
leftarr.push([]);
}

return leftarr;
};

return (
<ListItem key={key} className={classes.signoffsList}>
<ListItemText
primary={
<Typography component="p" variant="body2">
{`${count} member${count > 1 ? 's' : ''} of ${role}`}
</Typography>
}
className={classes.listItemText}
/>
</ListItem>
<div key={key} className={classes.signoffsContainer}>
<ListItem className={classes.signoffsList}>
<ListItemText
primary={
<Typography component="p" variant="body2">
{`${count} member${count > 1 ? 's' : ''} of ${role} -`}
</Typography>
}
className={classes.listItemText}
/>
{listOfSignoffs && (
<React.Fragment>
{allSigned.map((arr, index) => {
const no = index;

return (
<div key={no} className={classes.approval}>
<CheckCircleIcon color="green" />
<Typography
component="p"
variant="body2"
style={{ color: 'green', width: 'max-content' }}>
{`${arr[0]}`}
</Typography>
</div>
);
})}
{allNotSigned().map(arr => {
const no = arr;

return (
<div key={no} className={classes.approval}>
<AccountClockIcon color="darkorange" />
<Typography
component="p"
variant="body2"
style={{ color: 'darkorange' }}>
Awaiting approval...
</Typography>
</div>
);
})}
</React.Fragment>
)}
</ListItem>
</div>
);
})}
</List>
{listOfSignoffs && Boolean(listOfSignoffs.length) && (
<List
dense
subheader={
<ListSubheader className={classes.listSubheader}>
Signed By
</ListSubheader>
}>
{listOfSignoffs.map(([username, signoffRole]) => (
<ListItem key={username} className={classes.signoffsList}>
<ListItemText
disableTypography
primary={
<Typography
component="p"
className={classes.signedBy}
variant="body2">
{username}
&nbsp; - &nbsp;
<Typography
component="span"
color="textSecondary"
variant="caption">
{signoffRole}
</Typography>
</Typography>
}
className={classes.listItemText}
/>
</ListItem>
))}
</List>
)}
</div>
);
}
Expand Down

0 comments on commit 6d46207

Please sign in to comment.