Skip to content

Feature 2346 update check ins menu item #2393

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 2 commits into from
May 16, 2024
Merged

Feature 2346 update check ins menu item #2393

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
50888bc
updated Check-Ins to menu item to have sub-pages
mvolkmann May 15, 2024
849ae9f
updated snapshot tests
mvolkmann May 15, 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
27 changes: 23 additions & 4 deletions web-ui/src/components/menu/Menu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ import {
Drawer,
IconButton,
List,
ListItem,
Copy link
Collaborator Author

@mvolkmann mvolkmann May 15, 2024

Choose a reason for hiding this comment

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

Not used.

ListItemButton,
ListItemText,
Modal,
Expand Down Expand Up @@ -59,6 +58,11 @@ const adminLinks = [
['/admin/edit-skills', 'Skills']
];

const checkInLinks = [
['/pulse', 'Pulse'],
['/checkins', 'Quarterly']
];

const directoryLinks = [
['/guilds', 'Guilds & Communities'],
['/people', 'People'],
Expand Down Expand Up @@ -169,6 +173,9 @@ function Menu({ children }) {
}
};

const [checkInOpen, setCheckInOpen] = useState(
isCollapsibleListOpen(checkInLinks, location.pathname)
);
const [directoryOpen, setDirectoryOpen] = useState(
isCollapsibleListOpen(directoryLinks, location.pathname)
);
Expand Down Expand Up @@ -208,6 +215,10 @@ function Menu({ children }) {
setFeedbackOpen(!feedbackOpen);
};

const toggleCheckIn = () => {
setCheckInOpen(!checkInOpen);
};

const toggleDirectory = () => {
setDirectoryOpen(!directoryOpen);
};
Expand Down Expand Up @@ -289,6 +300,7 @@ function Menu({ children }) {
<span className="Menu-listItem">
{createLinkJsx('/', 'HOME', false)}
</span>

{isAdmin && (
<>
<ListItemButton
Expand All @@ -311,9 +323,14 @@ function Menu({ children }) {
</Collapse>
</>
)}
<span className="Menu-listItem">
{createLinkJsx('/checkins', 'CHECK-INS', false)}
</span>

<ListItemButton onClick={toggleCheckIn} className={classes.listItem}>
<ListItemText primary="CHECK-IN" />
</ListItemButton>
<Collapse in={checkInOpen} timeout="auto" unmountOnExit>
{createListJsx(checkInLinks, true)}
</Collapse>

<ListItemButton
onClick={toggleDirectory}
className={classes.listItem}
Expand All @@ -323,12 +340,14 @@ function Menu({ children }) {
<Collapse in={directoryOpen} timeout="auto" unmountOnExit>
{createListJsx(directoryLinks, true)}
</Collapse>

<ListItemButton onClick={toggleFeedback} className={classes.listItem}>
<ListItemText primary="FEEDBACK" />
</ListItemButton>
<Collapse in={feedbackOpen} timeout="auto" unmountOnExit>
{createListJsx(feedbackLinks, true)}
</Collapse>

{hasReportPermission && (
<React.Fragment>
<ListItemButton
Expand Down
204 changes: 90 additions & 114 deletions web-ui/src/components/menu/__snapshots__/Menu.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,28 +107,24 @@ exports[`<Menu /> > renders correctly 1`] = `
/>
</a>
</span>
<span
class="Menu-listItem"
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters MuiListItemButton-root MuiListItemButton-gutters Menu-listItem css-16ac5r2-MuiButtonBase-root-MuiListItemButton-root"
role="button"
tabindex="0"
>
<a
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters MuiListItemButton-root MuiListItemButton-gutters css-16ac5r2-MuiButtonBase-root-MuiListItemButton-root"
href="/checkins"
tabindex="0"
<div
class="MuiListItemText-root css-tlelie-MuiListItemText-root"
>
<div
class="MuiListItemText-root css-tlelie-MuiListItemText-root"
>
<span
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-10hburv-MuiTypography-root"
>
CHECK-INS
</span>
</div>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</a>
</span>
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-10hburv-MuiTypography-root"
>
CHECK-IN
</span>
</div>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</div>
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters MuiListItemButton-root MuiListItemButton-gutters Menu-listItem css-16ac5r2-MuiButtonBase-root-MuiListItemButton-root"
role="button"
Expand Down Expand Up @@ -284,28 +280,24 @@ exports[`<Menu /> > renders correctly 1`] = `
/>
</a>
</span>
<span
class="Menu-listItem"
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters MuiListItemButton-root MuiListItemButton-gutters Menu-listItem css-16ac5r2-MuiButtonBase-root-MuiListItemButton-root"
role="button"
tabindex="0"
>
<a
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters MuiListItemButton-root MuiListItemButton-gutters css-16ac5r2-MuiButtonBase-root-MuiListItemButton-root"
href="/checkins"
tabindex="0"
<div
class="MuiListItemText-root css-tlelie-MuiListItemText-root"
>
<div
class="MuiListItemText-root css-tlelie-MuiListItemText-root"
>
<span
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-10hburv-MuiTypography-root"
>
CHECK-INS
</span>
</div>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</a>
</span>
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-10hburv-MuiTypography-root"
>
CHECK-IN
</span>
</div>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</div>
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters MuiListItemButton-root MuiListItemButton-gutters Menu-listItem css-16ac5r2-MuiButtonBase-root-MuiListItemButton-root"
role="button"
Expand Down Expand Up @@ -549,28 +541,24 @@ exports[`<Menu /> > renders correctly for admin 1`] = `
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</div>
<span
class="Menu-listItem"
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters MuiListItemButton-root MuiListItemButton-gutters Menu-listItem css-16ac5r2-MuiButtonBase-root-MuiListItemButton-root"
role="button"
tabindex="0"
>
<a
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters MuiListItemButton-root MuiListItemButton-gutters css-16ac5r2-MuiButtonBase-root-MuiListItemButton-root"
href="/checkins"
tabindex="0"
<div
class="MuiListItemText-root css-tlelie-MuiListItemText-root"
>
<div
class="MuiListItemText-root css-tlelie-MuiListItemText-root"
>
<span
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-10hburv-MuiTypography-root"
>
CHECK-INS
</span>
</div>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</a>
</span>
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-10hburv-MuiTypography-root"
>
CHECK-IN
</span>
</div>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</div>
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters MuiListItemButton-root MuiListItemButton-gutters Menu-listItem css-16ac5r2-MuiButtonBase-root-MuiListItemButton-root"
role="button"
Expand Down Expand Up @@ -762,28 +750,24 @@ exports[`<Menu /> > renders correctly for admin 1`] = `
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</div>
<span
class="Menu-listItem"
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters MuiListItemButton-root MuiListItemButton-gutters Menu-listItem css-16ac5r2-MuiButtonBase-root-MuiListItemButton-root"
role="button"
tabindex="0"
>
<a
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters MuiListItemButton-root MuiListItemButton-gutters css-16ac5r2-MuiButtonBase-root-MuiListItemButton-root"
href="/checkins"
tabindex="0"
<div
class="MuiListItemText-root css-tlelie-MuiListItemText-root"
>
<div
class="MuiListItemText-root css-tlelie-MuiListItemText-root"
>
<span
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-10hburv-MuiTypography-root"
>
CHECK-INS
</span>
</div>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</a>
</span>
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-10hburv-MuiTypography-root"
>
CHECK-IN
</span>
</div>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</div>
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters MuiListItemButton-root MuiListItemButton-gutters Menu-listItem css-16ac5r2-MuiButtonBase-root-MuiListItemButton-root"
role="button"
Expand Down Expand Up @@ -1027,28 +1011,24 @@ exports[`<Menu /> > renders correctly for pdl 1`] = `
/>
</a>
</span>
<span
class="Menu-listItem"
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters MuiListItemButton-root MuiListItemButton-gutters Menu-listItem css-16ac5r2-MuiButtonBase-root-MuiListItemButton-root"
role="button"
tabindex="0"
>
<a
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters MuiListItemButton-root MuiListItemButton-gutters css-16ac5r2-MuiButtonBase-root-MuiListItemButton-root"
href="/checkins"
tabindex="0"
<div
class="MuiListItemText-root css-tlelie-MuiListItemText-root"
>
<div
class="MuiListItemText-root css-tlelie-MuiListItemText-root"
>
<span
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-10hburv-MuiTypography-root"
>
CHECK-INS
</span>
</div>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</a>
</span>
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-10hburv-MuiTypography-root"
>
CHECK-IN
</span>
</div>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</div>
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters MuiListItemButton-root MuiListItemButton-gutters Menu-listItem css-16ac5r2-MuiButtonBase-root-MuiListItemButton-root"
role="button"
Expand Down Expand Up @@ -1204,28 +1184,24 @@ exports[`<Menu /> > renders correctly for pdl 1`] = `
/>
</a>
</span>
<span
class="Menu-listItem"
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters MuiListItemButton-root MuiListItemButton-gutters Menu-listItem css-16ac5r2-MuiButtonBase-root-MuiListItemButton-root"
role="button"
tabindex="0"
>
<a
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters MuiListItemButton-root MuiListItemButton-gutters css-16ac5r2-MuiButtonBase-root-MuiListItemButton-root"
href="/checkins"
tabindex="0"
<div
class="MuiListItemText-root css-tlelie-MuiListItemText-root"
>
<div
class="MuiListItemText-root css-tlelie-MuiListItemText-root"
>
<span
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-10hburv-MuiTypography-root"
>
CHECK-INS
</span>
</div>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</a>
</span>
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-10hburv-MuiTypography-root"
>
CHECK-IN
</span>
</div>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</div>
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters MuiListItemButton-root MuiListItemButton-gutters Menu-listItem css-16ac5r2-MuiButtonBase-root-MuiListItemButton-root"
role="button"
Expand Down
5 changes: 5 additions & 0 deletions web-ui/src/components/routes/Routes.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import GuildsPage from '../../pages/GuildsPage';
import Header from '../header/Header';
import HomePage from '../../pages/HomePage';
import PeoplePage from '../../pages/PeoplePage';
import PulsePage from '../../pages/PulsePage';
import MemberProfilePage from '../../pages/MemberProfilePage';
import Roles from '../admin/roles/Roles';
import SkillReportPage from '../../pages/SkillReportPage';
Expand Down Expand Up @@ -61,6 +62,10 @@ export default function Routes() {
<Header title="People" />
<PeoplePage />
</Route>
<Route path="/pulse">
<Header title="Pulse" />
<PulsePage />
</Route>
<Route path="/checkins/:memberId?/:checkinId?">
<Header title="Check-ins" />
<CheckinsPage />
Expand Down
11 changes: 11 additions & 0 deletions web-ui/src/pages/PulsePage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from 'react';

const displayName = 'PulsePage';

const PulsePage = () => {
return <div className="pulse-page">Pulse content will go here!</div>;
Copy link
Contributor

@vhscom vhscom May 15, 2024

Choose a reason for hiding this comment

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

🚧

};

PulsePage.displayName = displayName;

export default PulsePage;