Copy Placeholders for HelpRequest pages; add to App.js/AppNavbar.js
Acceptance Criteria:
[ ] When the user navigates to /helprequest the page will be populated
with data all rows in the database, and the user will be able to see
all of the data in the table.
[ ] When the index page is accessed by an admin user, they will be able to
see a button to create a new record, and a button to edit each record,
and a button to delete each record.
[ ] When the index page is accessed by an regular logged in user,
the buttons to create a new record, edit a record, and delete a record
will not be visible in the table. Logged in users will be able to see
the data in the table, but that is all.
[ ] When the index page is accessed by an admin user, the edit button will
navigate to the URL for the edit page for that record. (The page should display
if the issue to implement it is already completed, or a blank page with the correct
URL if it is not.)
[ ] When the index page is accessed by an admin user, the delete button will
call the endpoint to delete the record from the database, and then refresh
the page. The refreshed page will not show the deleted record.
[ ] The PR description where the code addressing this issue is submitted contains
a screenshot of the new page (since this is a frontend change).
[ ] The PR description where the code addressing this issue is submitted contains
a link to the published storybook for the PR, linking directly to the story
for the new HelpRequestIndexPage component.
Implementation Details
[ ] Before starting, refamiliarize yourself with the backend CRUD API endpoints for
HelpRequest by looking at the swagger page. You are going to be copy/pasting
code from the Restaurant and UCSBDates components. Those use backend api endpoints
that are similar to the ones for HelpRequest, but not identical. You will need
to know the exact name of the API endpoints for HelpRequest in order to
be sure that your frontend code is calling the correct backend endpoints.
[ ] Modify the HelpRequestIndexPage, replacing the placeholder
content with content modelled after the files RestaurantIndexPage.js
and/or UCSBDatesIndexPage.js. Be sure to get the API endpoint names correct for your HelpRequest table.
[ ] Modify HelpRequestIndexPage.test.js replacing the placeholder
content with content modelled after the files RestaurantIndexPage.test.js
and/or UCSBDatesIndexPage.test.js. Be sure to get the API endpoint names correct for your HelpRequest table.
[ ] Under frontend/src/stories/pages/HelpRequest/ create a file
called HelpRequestIndexPage.stories.js modelled after
the files RestaurantIndexPage.stories.js and UCSBDatesIndexPage.stories.js.
Reminders (all in frontend directory)
Always start by setting your node version with nvm use 20.17.0
To run storybook locally: npm run storybook.
To run tests locally: npm test.
Quickly test coverage locally: npm run coverage
Check linting locally: npx eslint --fix .
Check mutation coverage locally (slow): npx stryker run
Check mutation coverage of single file (faster): npx stryker run -m src/main/pages/HelpRequest/HelpRequestIndexPage.js
What to do next
Do a PR (following the usual steps).
Check for other PRs
Start work on "Edit Page for HelpRequest plus tests and stories" (following the usual steps for a new issue)
Dependencies
Complete the following issues first:
HelpRequest
pages; add to App.js/AppNavbar.jsAcceptance Criteria:
[ ] When the user navigates to
/helprequest
the page will be populated with data all rows in the database, and the user will be able to see all of the data in the table.[ ] When the index page is accessed by an admin user, they will be able to see a button to create a new record, and a button to edit each record, and a button to delete each record.
[ ] When the index page is accessed by an regular logged in user, the buttons to create a new record, edit a record, and delete a record will not be visible in the table. Logged in users will be able to see the data in the table, but that is all.
[ ] When the index page is accessed by an admin user, the edit button will navigate to the URL for the edit page for that record. (The page should display if the issue to implement it is already completed, or a blank page with the correct URL if it is not.)
[ ] When the index page is accessed by an admin user, the delete button will call the endpoint to delete the record from the database, and then refresh the page. The refreshed page will not show the deleted record.
[ ] The PR description where the code addressing this issue is submitted contains a screenshot of the new page (since this is a frontend change).
[ ] The PR description where the code addressing this issue is submitted contains a link to the published storybook for the PR, linking directly to the story for the new
HelpRequestIndexPage
component.Implementation Details
[ ] Before starting, refamiliarize yourself with the backend CRUD API endpoints for
HelpRequest
by looking at the swagger page. You are going to be copy/pasting code from theRestaurant
andUCSBDates
components. Those use backend api endpoints that are similar to the ones forHelpRequest
, but not identical. You will need to know the exact name of the API endpoints forHelpRequest
in order to be sure that your frontend code is calling the correct backend endpoints.[ ] Modify the
HelpRequestIndexPage
, replacing the placeholder content with content modelled after the filesRestaurantIndexPage.js
and/orUCSBDatesIndexPage.js
. Be sure to get the API endpoint names correct for yourHelpRequest
table.[ ] Modify
HelpRequestIndexPage.test.js
replacing the placeholder content with content modelled after the filesRestaurantIndexPage.test.js
and/orUCSBDatesIndexPage.test.js
. Be sure to get the API endpoint names correct for yourHelpRequest
table.[ ] Under
frontend/src/stories/pages/HelpRequest/
create a file calledHelpRequestIndexPage.stories.js
modelled after the filesRestaurantIndexPage.stories.js
andUCSBDatesIndexPage.stories.js
.Reminders (all in
frontend
directory)nvm use 20.17.0
npm run storybook
.npm test
.npm run coverage
npx eslint --fix .
npx stryker run
npx stryker run -m src/main/pages/HelpRequest/HelpRequestIndexPage.js
What to do next
HelpRequest
plus tests and stories" (following the usual steps for a new issue)