Skip to content

Feature 2221 review period status #2331

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mvolkmann merged 4 commits into from
May 7, 2024
Merged

Feature 2221 review period status #2331

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
59cf020
progress on 2221
mvolkmann May 6, 2024
b65a93d
fixed icons in ReviewPeriods.jsx
mvolkmann May 6, 2024
42fe8ab
Merge branch 'develop' into feature-2221-review-period-status
mvolkmann May 6, 2024
1e39b45
changed approach for tooltips in GridSummaryCard
mvolkmann May 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 18 additions & 12 deletions web-ui/src/components/guild-results/GuildSummaryCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import React, { useContext, useState, useCallback } from 'react';
import { Link } from 'react-router-dom';

import { Construction, Groups } from '@mui/icons-material';
import { Link as StyledLink } from '@mui/material';
import { styled } from '@mui/material/styles';

import { AppContext } from '../../context/AppContext';
import { UPDATE_GUILDS, UPDATE_TOAST } from '../../context/actions';
import EditGuildModal from './EditGuildModal';
import { Link } from 'react-router-dom';
import { Link as StyledLink } from '@mui/material';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faHammer, faPeopleGroup } from '@fortawesome/free-solid-svg-icons';

import {
Button,
Expand Down Expand Up @@ -135,15 +134,22 @@ const GuildSummaryCard = ({ guild, index, isOpen, onGuildSelect }) => {
}
};

const iconStyles = { height: '2.5rem', width: '2.5rem' };

return (
<StyledCard className={classes.card}>
<FontAwesomeIcon
icon={guild.community ? faPeopleGroup : faHammer}
size="2x"
style={{
color: guild.community ? 'var(--oci-orange)' : 'var(--oci-light-blue)'
}}
/>
<Tooltip
title={`This is a ${guild.community ? 'Community' : 'Guild'}.`}
aria-label="icon meaning"
>
{guild.community ? (
<Groups sx={{ color: 'var(--oci-orange)', ...iconStyles }} />
) : (
<Construction
sx={{ color: 'var(--oci-light-blue)', ...iconStyles }}
/>
)}
</Tooltip>
<CardHeader
classes={{
content: classes.header,
Expand Down
34 changes: 15 additions & 19 deletions web-ui/src/components/guild-results/__snapshots__/GuildResults.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,17 +82,15 @@ exports[`renders correctly 1`] = `
>
<svg
aria-hidden="true"
class="svg-inline--fa fa-hammer fa-2x "
data-icon="hammer"
data-prefix="fas"
aria-label="icon meaning"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-11hidt-MuiSvgIcon-root"
data-mui-internal-clone-element="true"
data-testid="ConstructionIcon"
focusable="false"
role="img"
viewBox="0 0 576 512"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M413.5 237.5c-28.2 4.8-58.2-3.6-80-25.4l-38.1-38.1C280.4 159 272 138.8 272 117.6V105.5L192.3 62c-5.3-2.9-8.6-8.6-8.3-14.7s3.9-11.5 9.5-14l47.2-21C259.1 4.2 279 0 299.2 0h18.1c36.7 0 72 14 98.7 39.1l44.6 42c24.2 22.8 33.2 55.7 26.6 86L503 183l8-8c9.4-9.4 24.6-9.4 33.9 0l24 24c9.4 9.4 9.4 24.6 0 33.9l-88 88c-9.4 9.4-24.6 9.4-33.9 0l-24-24c-9.4-9.4-9.4-24.6 0-33.9l8-8-17.5-17.5zM27.4 377.1L260.9 182.6c3.5 4.9 7.5 9.6 11.8 14l38.1 38.1c6 6 12.4 11.2 19.2 15.7L134.9 484.6c-14.5 17.4-36 27.4-58.6 27.4C34.1 512 0 477.8 0 435.7c0-22.6 10.1-44.1 27.4-58.6z"
fill="currentColor"
d="m13.7826 15.1719 2.1213-2.1213 5.9963 5.9962-2.1213 2.1213zM17.5 10c1.93 0 3.5-1.57 3.5-3.5 0-.58-.16-1.12-.41-1.6l-2.7 2.7-1.49-1.49 2.7-2.7c-.48-.25-1.02-.41-1.6-.41C15.57 3 14 4.57 14 6.5c0 .41.08.8.21 1.16l-1.85 1.85-1.78-1.78.71-.71-1.41-1.41L12 3.49c-1.17-1.17-3.07-1.17-4.24 0L4.22 7.03l1.41 1.41H2.81l-.71.71 3.54 3.54.71-.71V9.15l1.41 1.41.71-.71 1.78 1.78-7.41 7.41 2.12 2.12L16.34 9.79c.36.13.75.21 1.16.21"
/>
</svg>
<div
Expand Down Expand Up @@ -182,17 +180,15 @@ exports[`renders correctly 1`] = `
>
<svg
aria-hidden="true"
class="svg-inline--fa fa-hammer fa-2x "
data-icon="hammer"
data-prefix="fas"
aria-label="icon meaning"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-11hidt-MuiSvgIcon-root"
data-mui-internal-clone-element="true"
data-testid="ConstructionIcon"
focusable="false"
role="img"
viewBox="0 0 576 512"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M413.5 237.5c-28.2 4.8-58.2-3.6-80-25.4l-38.1-38.1C280.4 159 272 138.8 272 117.6V105.5L192.3 62c-5.3-2.9-8.6-8.6-8.3-14.7s3.9-11.5 9.5-14l47.2-21C259.1 4.2 279 0 299.2 0h18.1c36.7 0 72 14 98.7 39.1l44.6 42c24.2 22.8 33.2 55.7 26.6 86L503 183l8-8c9.4-9.4 24.6-9.4 33.9 0l24 24c9.4 9.4 9.4 24.6 0 33.9l-88 88c-9.4 9.4-24.6 9.4-33.9 0l-24-24c-9.4-9.4-9.4-24.6 0-33.9l8-8-17.5-17.5zM27.4 377.1L260.9 182.6c3.5 4.9 7.5 9.6 11.8 14l38.1 38.1c6 6 12.4 11.2 19.2 15.7L134.9 484.6c-14.5 17.4-36 27.4-58.6 27.4C34.1 512 0 477.8 0 435.7c0-22.6 10.1-44.1 27.4-58.6z"
fill="currentColor"
d="m13.7826 15.1719 2.1213-2.1213 5.9963 5.9962-2.1213 2.1213zM17.5 10c1.93 0 3.5-1.57 3.5-3.5 0-.58-.16-1.12-.41-1.6l-2.7 2.7-1.49-1.49 2.7-2.7c-.48-.25-1.02-.41-1.6-.41C15.57 3 14 4.57 14 6.5c0 .41.08.8.21 1.16l-1.85 1.85-1.78-1.78.71-.71-1.41-1.41L12 3.49c-1.17-1.17-3.07-1.17-4.24 0L4.22 7.03l1.41 1.41H2.81l-.71.71 3.54 3.54.71-.71V9.15l1.41 1.41.71-.71 1.78 1.78-7.41 7.41 2.12 2.12L16.34 9.79c.36.13.75.21 1.16.21"
/>
</svg>
<div
Expand Down Expand Up @@ -294,8 +290,8 @@ exports[`renders correctly when no guilds are loaded 1`] = `
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined css-14s5rfu-MuiFormLabel-root-MuiInputLabel-root"
data-shrink="false"
for=":r5:"
id=":r5:-label"
for=":r7:"
id=":r7:-label"
>
Search guilds...
</label>
Expand All @@ -305,7 +301,7 @@ exports[`renders correctly when no guilds are loaded 1`] = `
<input
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input"
id=":r5:"
id=":r7:"
placeholder="Guild Name"
type="text"
value=""
Expand Down
42 changes: 18 additions & 24 deletions web-ui/src/components/guild-results/__snapshots__/GuildSummaryCard.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,15 @@ exports[`renders correctly 1`] = `
>
<svg
aria-hidden="true"
class="svg-inline--fa fa-hammer fa-2x "
data-icon="hammer"
data-prefix="fas"
aria-label="icon meaning"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-11hidt-MuiSvgIcon-root"
data-mui-internal-clone-element="true"
data-testid="ConstructionIcon"
focusable="false"
role="img"
viewBox="0 0 576 512"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M413.5 237.5c-28.2 4.8-58.2-3.6-80-25.4l-38.1-38.1C280.4 159 272 138.8 272 117.6V105.5L192.3 62c-5.3-2.9-8.6-8.6-8.3-14.7s3.9-11.5 9.5-14l47.2-21C259.1 4.2 279 0 299.2 0h18.1c36.7 0 72 14 98.7 39.1l44.6 42c24.2 22.8 33.2 55.7 26.6 86L503 183l8-8c9.4-9.4 24.6-9.4 33.9 0l24 24c9.4 9.4 9.4 24.6 0 33.9l-88 88c-9.4 9.4-24.6 9.4-33.9 0l-24-24c-9.4-9.4-9.4-24.6 0-33.9l8-8-17.5-17.5zM27.4 377.1L260.9 182.6c3.5 4.9 7.5 9.6 11.8 14l38.1 38.1c6 6 12.4 11.2 19.2 15.7L134.9 484.6c-14.5 17.4-36 27.4-58.6 27.4C34.1 512 0 477.8 0 435.7c0-22.6 10.1-44.1 27.4-58.6z"
fill="currentColor"
d="m13.7826 15.1719 2.1213-2.1213 5.9963 5.9962-2.1213 2.1213zM17.5 10c1.93 0 3.5-1.57 3.5-3.5 0-.58-.16-1.12-.41-1.6l-2.7 2.7-1.49-1.49 2.7-2.7c-.48-.25-1.02-.41-1.6-.41C15.57 3 14 4.57 14 6.5c0 .41.08.8.21 1.16l-1.85 1.85-1.78-1.78.71-.71-1.41-1.41L12 3.49c-1.17-1.17-3.07-1.17-4.24 0L4.22 7.03l1.41 1.41H2.81l-.71.71 3.54 3.54.71-.71V9.15l1.41 1.41.71-.71 1.78 1.78-7.41 7.41 2.12 2.12L16.34 9.79c.36.13.75.21 1.16.21"
/>
</svg>
<div
Expand Down Expand Up @@ -71,17 +69,15 @@ exports[`renders correctly for ADMIN 1`] = `
>
<svg
aria-hidden="true"
class="svg-inline--fa fa-hammer fa-2x "
data-icon="hammer"
data-prefix="fas"
aria-label="icon meaning"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-11hidt-MuiSvgIcon-root"
data-mui-internal-clone-element="true"
data-testid="ConstructionIcon"
focusable="false"
role="img"
viewBox="0 0 576 512"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M413.5 237.5c-28.2 4.8-58.2-3.6-80-25.4l-38.1-38.1C280.4 159 272 138.8 272 117.6V105.5L192.3 62c-5.3-2.9-8.6-8.6-8.3-14.7s3.9-11.5 9.5-14l47.2-21C259.1 4.2 279 0 299.2 0h18.1c36.7 0 72 14 98.7 39.1l44.6 42c24.2 22.8 33.2 55.7 26.6 86L503 183l8-8c9.4-9.4 24.6-9.4 33.9 0l24 24c9.4 9.4 9.4 24.6 0 33.9l-88 88c-9.4 9.4-24.6 9.4-33.9 0l-24-24c-9.4-9.4-9.4-24.6 0-33.9l8-8-17.5-17.5zM27.4 377.1L260.9 182.6c3.5 4.9 7.5 9.6 11.8 14l38.1 38.1c6 6 12.4 11.2 19.2 15.7L134.9 484.6c-14.5 17.4-36 27.4-58.6 27.4C34.1 512 0 477.8 0 435.7c0-22.6 10.1-44.1 27.4-58.6z"
fill="currentColor"
d="m13.7826 15.1719 2.1213-2.1213 5.9963 5.9962-2.1213 2.1213zM17.5 10c1.93 0 3.5-1.57 3.5-3.5 0-.58-.16-1.12-.41-1.6l-2.7 2.7-1.49-1.49 2.7-2.7c-.48-.25-1.02-.41-1.6-.41C15.57 3 14 4.57 14 6.5c0 .41.08.8.21 1.16l-1.85 1.85-1.78-1.78.71-.71-1.41-1.41L12 3.49c-1.17-1.17-3.07-1.17-4.24 0L4.22 7.03l1.41 1.41H2.81l-.71.71 3.54 3.54.71-.71V9.15l1.41 1.41.71-.71 1.78 1.78-7.41 7.41 2.12 2.12L16.34 9.79c.36.13.75.21 1.16.21"
/>
</svg>
<div
Expand Down Expand Up @@ -176,17 +172,15 @@ exports[`renders correctly for guild lead 1`] = `
>
<svg
aria-hidden="true"
class="svg-inline--fa fa-hammer fa-2x "
data-icon="hammer"
data-prefix="fas"
aria-label="icon meaning"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-11hidt-MuiSvgIcon-root"
data-mui-internal-clone-element="true"
data-testid="ConstructionIcon"
focusable="false"
role="img"
viewBox="0 0 576 512"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M413.5 237.5c-28.2 4.8-58.2-3.6-80-25.4l-38.1-38.1C280.4 159 272 138.8 272 117.6V105.5L192.3 62c-5.3-2.9-8.6-8.6-8.3-14.7s3.9-11.5 9.5-14l47.2-21C259.1 4.2 279 0 299.2 0h18.1c36.7 0 72 14 98.7 39.1l44.6 42c24.2 22.8 33.2 55.7 26.6 86L503 183l8-8c9.4-9.4 24.6-9.4 33.9 0l24 24c9.4 9.4 9.4 24.6 0 33.9l-88 88c-9.4 9.4-24.6 9.4-33.9 0l-24-24c-9.4-9.4-9.4-24.6 0-33.9l8-8-17.5-17.5zM27.4 377.1L260.9 182.6c3.5 4.9 7.5 9.6 11.8 14l38.1 38.1c6 6 12.4 11.2 19.2 15.7L134.9 484.6c-14.5 17.4-36 27.4-58.6 27.4C34.1 512 0 477.8 0 435.7c0-22.6 10.1-44.1 27.4-58.6z"
fill="currentColor"
d="m13.7826 15.1719 2.1213-2.1213 5.9963 5.9962-2.1213 2.1213zM17.5 10c1.93 0 3.5-1.57 3.5-3.5 0-.58-.16-1.12-.41-1.6l-2.7 2.7-1.49-1.49 2.7-2.7c-.48-.25-1.02-.41-1.6-.41C15.57 3 14 4.57 14 6.5c0 .41.08.8.21 1.16l-1.85 1.85-1.78-1.78.71-.71-1.41-1.41L12 3.49c-1.17-1.17-3.07-1.17-4.24 0L4.22 7.03l1.41 1.41H2.81l-.71.71 3.54 3.54.71-.71V9.15l1.41 1.41.71-.71 1.78 1.78-7.41 7.41 2.12 2.12L16.34 9.79c.36.13.75.21 1.16.21"
/>
</svg>
<div
Expand Down
41 changes: 26 additions & 15 deletions web-ui/src/components/reviews/periods/ReviewPeriods.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
import React, { useCallback, useContext, useEffect, useState } from 'react';
Copy link
Collaborator Author

@mvolkmann mvolkmann May 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I combined and reordered some imports.

import PropTypes from 'prop-types';
import React, { useCallback, useContext, useEffect, useState } from 'react';

import ArchiveIcon from '@mui/icons-material/Archive';
import DeleteIcon from '@mui/icons-material/Delete';
import UnarchiveIcon from '@mui/icons-material/Unarchive';
import WorkIcon from '@mui/icons-material/Work';
import {
Copy link
Collaborator Author

@mvolkmann mvolkmann May 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added icons to correspond to all the possible review period status values.

Archive,
BorderColor,
Delete,
DoorFront,
HourglassTop,
MeetingRoom,
QuestionMark,
Unarchive
} from '@mui/icons-material';

import {
Avatar,
Expand Down Expand Up @@ -56,6 +62,8 @@ import {
selectUserProfile
} from '../../../context/selectors';

import { titleCase } from '../../../helpers/strings.js';
Copy link
Collaborator Author

@mvolkmann mvolkmann May 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is used to convert a string status value that is all uppercase to one that uses title case.


const propTypes = {
message: PropTypes.string,
onSelect: PropTypes.func
Expand Down Expand Up @@ -118,6 +126,14 @@ const ReviewStatus = {
UNKNOWN: 'UNKNOWN'
};

const reviewStatusIconMap = {
Copy link
Collaborator Author

@mvolkmann mvolkmann May 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This maps review status values to icons.

[ReviewStatus.PLANNING]: <BorderColor />,
[ReviewStatus.AWAITING_APPROVAL]: <HourglassTop />,
[ReviewStatus.OPEN]: <MeetingRoom />,
[ReviewStatus.CLOSED]: <DoorFront />,
[ReviewStatus.UNKNOWN]: <QuestionMark />
};

const ReviewPeriods = ({ onPeriodSelected, mode }) => {
const { state, dispatch } = useContext(AppContext);

Expand Down Expand Up @@ -433,9 +449,9 @@ const ReviewPeriods = ({ onPeriodSelected, mode }) => {
}
>
{reviewStatus === ReviewStatus.OPEN ? (
<ArchiveIcon />
Copy link
Collaborator Author

@mvolkmann mvolkmann May 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changing the way these icons are imported required changing their names here.

<Archive />
) : (
<UnarchiveIcon />
<Unarchive />
)}
</IconButton>
</Tooltip>
Expand All @@ -445,7 +461,7 @@ const ReviewPeriods = ({ onPeriodSelected, mode }) => {
edge="end"
aria-label="Delete"
>
<DeleteIcon />
<Delete />
</IconButton>
</Tooltip>
</>
Expand All @@ -457,17 +473,12 @@ const ReviewPeriods = ({ onPeriodSelected, mode }) => {
key={`period-lia-${id}`}
onClick={() => onPeriodClick(id)}
>
<Avatar>
<WorkIcon />
Copy link
Collaborator Author

@mvolkmann mvolkmann May 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of displaying the same icon for every review period, we now display an icon that indicates the status of the review period.

</Avatar>
<Avatar>{reviewStatusIconMap[reviewStatus]}</Avatar>
</ListItemAvatar>
<ListItemText
key={`period-lit-${id}`}
onClick={() => onPeriodClick(id)}
primary={
name +
(reviewStatus === ReviewStatus.OPEN ? ' - Open' : '')
}
primary={`${name} - ${titleCase(reviewStatus)}`}
Copy link
Collaborator Author

@mvolkmann mvolkmann May 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We now display the actual status string instead of only displaying "Open" or nothing.

secondary={getSecondaryLabel(id)}
/>
</ListItem>
Expand Down
5 changes: 5 additions & 0 deletions web-ui/src/helpers/strings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export const titleCase = text =>
Copy link
Collaborator Author

@mvolkmann mvolkmann May 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a new utility function.

text.replace(
/\w\S*/g,
word => word.charAt(0).toUpperCase() + word.substr(1).toLowerCase()
);
10 changes: 10 additions & 0 deletions web-ui/src/helpers/strings.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { titleCase } from './strings';

describe('strings', () => {
it('can title-case a string', () => {
expect(titleCase('')).toBe('');
expect(titleCase('a')).toEqual('A');
expect(titleCase('test')).toBe('Test');
expect(titleCase('one two three')).toBe('One Two Three');
});
});
Copy link
Contributor

@vhscom vhscom May 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typically for string formatting utils I'd use a name like format.js for the helper. This allows for the file to format more than just strings without needing to be renamed later, or a new file created for other types of formatting.