Skip to content

Commit 6d46207

Browse files
AMUZYAMUZY
authored
Show Indications that required signoffs have been achieved (mozilla-releng#3016)
* 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
1 parent 6493a9e commit 6d46207

File tree

1 file changed

+85
-45
lines changed

1 file changed

+85
-45
lines changed

‎ui/src/components/SignoffSummary/index.jsx

Lines changed: 85 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,18 @@ import ListItem from '@material-ui/core/ListItem';
77
import ListItemText from '@material-ui/core/ListItemText';
88
import ListSubheader from '@material-ui/core/ListSubheader';
99
import Typography from '@material-ui/core/Typography';
10+
import CheckCircleIcon from 'mdi-react/CheckCircleIcon';
11+
import AccountClockIcon from 'mdi-react/AccountClockIcon';
1012

1113
const useStyles = makeStyles(theme => ({
14+
approval: {
15+
display: 'flex',
16+
width: 'max-content',
17+
flexFlow: 'row nowrap',
18+
justifyContent: 'center',
19+
alignItems: 'center',
20+
margin: '0 2px 0 2px',
21+
},
1222
listSubheader: {
1323
lineHeight: 1.5,
1424
marginBottom: theme.spacing(0.5),
@@ -21,7 +31,11 @@ const useStyles = makeStyles(theme => ({
2131
marginBottom: 0,
2232
marginTop: 0,
2333
},
34+
signoffsContainer: {
35+
display: 'flex',
36+
},
2437
signoffsList: {
38+
width: 'max-content',
2539
marginRight: theme.spacing(6),
2640
paddingTop: 0,
2741
paddingBottom: 0,
@@ -33,9 +47,10 @@ const useStyles = makeStyles(theme => ({
3347
}));
3448

3549
function SignoffSummary(props) {
36-
const classes = useStyles();
3750
const { requiredSignoffs, signoffs, className } = props;
3851
const listOfSignoffs = Object.entries(signoffs);
52+
const theRequiredSignoffs = Object.entries(requiredSignoffs);
53+
const classes = useStyles();
3954

4055
return (
4156
<div className={classNames(classes.listWrapper, className)}>
@@ -46,56 +61,81 @@ function SignoffSummary(props) {
4661
Requires Signoffs From
4762
</ListSubheader>
4863
}>
49-
{Object.entries(requiredSignoffs).map(([role, count], index) => {
64+
{theRequiredSignoffs.map(([role, count], index) => {
5065
const key = `${role}-${index}`;
66+
// allSigned Returns all that have signed
67+
let allSigned = [];
68+
69+
if (listOfSignoffs) {
70+
allSigned = listOfSignoffs.filter(arr => {
71+
return role === arr[1];
72+
});
73+
}
74+
75+
// allNotSigned() Gets and returns all that haven't signed
76+
const allNotSigned = () => {
77+
const leftarr = [];
78+
const allleft = count - allSigned.length;
79+
80+
// Disabled eslint because "i+1" runs loop till eternity
81+
// eslint-disable-next-line no-plusplus
82+
for (let i = 0; i < allleft; i++) {
83+
leftarr.push([]);
84+
}
85+
86+
return leftarr;
87+
};
5188

5289
return (
53-
<ListItem key={key} className={classes.signoffsList}>
54-
<ListItemText
55-
primary={
56-
<Typography component="p" variant="body2">
57-
{`${count} member${count > 1 ? 's' : ''} of ${role}`}
58-
</Typography>
59-
}
60-
className={classes.listItemText}
61-
/>
62-
</ListItem>
90+
<div key={key} className={classes.signoffsContainer}>
91+
<ListItem className={classes.signoffsList}>
92+
<ListItemText
93+
primary={
94+
<Typography component="p" variant="body2">
95+
{`${count} member${count > 1 ? 's' : ''} of ${role} -`}
96+
</Typography>
97+
}
98+
className={classes.listItemText}
99+
/>
100+
{listOfSignoffs && (
101+
<React.Fragment>
102+
{allSigned.map((arr, index) => {
103+
const no = index;
104+
105+
return (
106+
<div key={no} className={classes.approval}>
107+
<CheckCircleIcon color="green" />
108+
<Typography
109+
component="p"
110+
variant="body2"
111+
style={{ color: 'green', width: 'max-content' }}>
112+
{`${arr[0]}`}
113+
</Typography>
114+
</div>
115+
);
116+
})}
117+
{allNotSigned().map(arr => {
118+
const no = arr;
119+
120+
return (
121+
<div key={no} className={classes.approval}>
122+
<AccountClockIcon color="darkorange" />
123+
<Typography
124+
component="p"
125+
variant="body2"
126+
style={{ color: 'darkorange' }}>
127+
Awaiting approval...
128+
</Typography>
129+
</div>
130+
);
131+
})}
132+
</React.Fragment>
133+
)}
134+
</ListItem>
135+
</div>
63136
);
64137
})}
65138
</List>
66-
{listOfSignoffs && Boolean(listOfSignoffs.length) && (
67-
<List
68-
dense
69-
subheader={
70-
<ListSubheader className={classes.listSubheader}>
71-
Signed By
72-
</ListSubheader>
73-
}>
74-
{listOfSignoffs.map(([username, signoffRole]) => (
75-
<ListItem key={username} className={classes.signoffsList}>
76-
<ListItemText
77-
disableTypography
78-
primary={
79-
<Typography
80-
component="p"
81-
className={classes.signedBy}
82-
variant="body2">
83-
{username}
84-
&nbsp; - &nbsp;
85-
<Typography
86-
component="span"
87-
color="textSecondary"
88-
variant="caption">
89-
{signoffRole}
90-
</Typography>
91-
</Typography>
92-
}
93-
className={classes.listItemText}
94-
/>
95-
</ListItem>
96-
))}
97-
</List>
98-
)}
99139
</div>
100140
);
101141
}

0 commit comments

Comments
 (0)