-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #459 from NBISweden/dev/help-page
Add help page
- Loading branch information
Showing
8 changed files
with
261 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,199 @@ | ||
| import "../index.css"; | ||
| import React from "react"; | ||
| import { AuthContext } from "../components/AuthProvider"; | ||
| import { HeaderUser } from "../components/HeaderUser"; | ||
| import { Row } from "../components/Row"; | ||
| import { Cell } from "../components/Cell"; | ||
| import { IssueActivityPair, FetchedTimeEntry } from "../model"; | ||
| import { QuickAdd } from "../components/QuickAdd"; | ||
| import weektravel from "../icons/weektravel.png"; | ||
| import overview from "../icons/overview.png"; | ||
|
|
||
| export const Help = () => { | ||
| const context = React.useContext(AuthContext); | ||
| const exampleIAP: IssueActivityPair = { | ||
| activity: { | ||
| id: 1, | ||
| name: "Test activity", | ||
| }, | ||
| issue: { | ||
| id: 1, | ||
| subject: "Test issue", | ||
| }, | ||
| custom_name: "Test custom name", | ||
| is_hidden: false, | ||
| }; | ||
| const exampleEntry: FetchedTimeEntry = { | ||
| id: 1, | ||
| project: { | ||
| id: 1, | ||
| name: "Test project", | ||
| }, | ||
| issue: { | ||
| id: 1, | ||
| }, | ||
| user: { | ||
| id: 1, | ||
| name: "Test user", | ||
| }, | ||
| activity: { | ||
| id: 1, | ||
| name: "Test activity", | ||
| }, | ||
| hours: 1, | ||
| comments: "Test comments", | ||
| spent_on: "2020-01-01", | ||
| created_on: "2020-01-01", | ||
| updated_on: "2020-01-01", | ||
| }; | ||
| return ( | ||
| <main> | ||
| <div className="usr-header"> | ||
| <h1 className="help-title">How do I use the urdr service?</h1> | ||
| <HeaderUser username={context.user ? context.user.login : ""} /> | ||
| </div> | ||
| <div className="help-wrapper"> | ||
| <h2 className="help-subtitle">Introduction</h2> | ||
| <p className="help-info"> | ||
| The purpose of this website is to ease the process of logging time on | ||
| the | ||
| <a href="https://projects.nbis.se"> NBIS Redmine instance</a>. The | ||
| usual procedure for logging time with Redmine involves selecting an | ||
| issue and an activity for reporting your time. In urdr, issues are | ||
| strictly linked to valid activities, thus making it simpler to do time | ||
| reporting accurately. The time reporting page offers a | ||
| spreadsheet-like grid for time entry reporting, together with the | ||
| possibility to navigate over different weeks. The report view is | ||
| primarily made up of a header containing a date picker and arrow | ||
| buttons to navigate between weeks, as well as a user dropdown menu. | ||
| Below, you find the time entries grid, and the bottom bar including | ||
| the feature for adding new rows and saving your changes. | ||
| </p> | ||
| <div className="centered"> | ||
| <img src={overview} alt="overview of urdr" className="overview-img" /> | ||
| </div> | ||
| <h2 className="help-subtitle">What is a row?</h2> | ||
| <p className="help-info"> | ||
| Within the context of the urdr system, we refer to a row as to the | ||
| visual element on the page where the time entries of a given | ||
| issue-acivity pair are displayed for one specific week. There are two | ||
| types of rows: favourite and recent rows. | ||
| </p> | ||
| <h2 className="help-subtitle">Favourite and recent rows</h2> | ||
| <p className="help-info"> | ||
| The following row has been marked as favourite so it will always | ||
| appear at the top of the list. Rows are marked as favourite / | ||
| non-favourite after clicking on the star button present next to the | ||
| title of the corresponding issue. It's worth noting that favourite | ||
| rows are saved across sessions. Moreover, the order of the favourite | ||
| rows can be changed by drag and dropping the row using the | ||
| drag–and–drop handle icon at the left-most position of the row. | ||
| </p> | ||
| <Row | ||
| topic={exampleIAP} | ||
| days={[new Date()]} | ||
| rowHours={[1]} | ||
| rowEntries={[exampleEntry]} | ||
| getRowSum={() => 1} | ||
| onHide={() => {}} | ||
| isFav={true} | ||
| onToggleFav={() => {}} | ||
| onCellUpdate={() => {}} | ||
| ></Row> | ||
| <p className="help-info"> | ||
| The next one is a recent row. The issues shown here are the ones you | ||
| have most recently logged time on, based on the week you are currently | ||
| looking at. Thus, recent rows change as you navigate across different | ||
| weeks or as you add new time entries. If desired, these type of rows | ||
| can be hidden after clicking on the eye button. | ||
| </p> | ||
| <Row | ||
| topic={exampleIAP} | ||
| days={[new Date()]} | ||
| rowHours={[1]} | ||
| rowEntries={[exampleEntry]} | ||
| getRowSum={() => 1} | ||
| onHide={() => {}} | ||
| isFav={false} | ||
| onToggleFav={() => {}} | ||
| onCellUpdate={() => {}} | ||
| ></Row> | ||
| <h2 className="help-subtitle">Adding new rows</h2> | ||
| <p className="help-info"> | ||
| In order to add a new row, it is necessary to first enter a valid | ||
| issue number and then select an activity, which will be linked to the | ||
| issue. After clicking on the plus button, a new row will be appended | ||
| to the bottom of the list of recent rows. | ||
| </p> | ||
| <p className="help-info"> | ||
| A cell in the sum row shows the sum of all time entries logged on | ||
| different rows on the corresponding day. It is worth noting that the | ||
| sum also contains entries that have been hidden from list of recent | ||
| rows. In case the number displayed in a sum field doesn't seem to fit | ||
| to the time entries displayed above, you have probably hidden a row | ||
| that contained a time entry for that day. You can easily make it | ||
| visible again by using the <b>"Add new row"</b> feature. | ||
| </p> | ||
| <QuickAdd addIssueActivity={() => {}}></QuickAdd> | ||
| <h2 className="help-subtitle">Adding or updating time entries</h2> | ||
| <p className="help-info"> | ||
| One may log time by simply clicking on the cell corresponding to the | ||
| desired date. If the cell is emptied, the underlying time entry will | ||
| be deleted. It's of course also possible to update existing values of | ||
| a cell. All changes made to a cell are saved only after clicking on | ||
| the <b>"Save Changes"</b> button. | ||
| </p> | ||
| <p className="help-info"> | ||
| It is also possible to add a comment to a time entry by clicking on | ||
| the triangle present at the top right of a cell. The color of this | ||
| icon is grey when a comment has not been saved yet: | ||
| </p> | ||
| <div className="centered"> | ||
| <Cell | ||
| topic={exampleIAP} | ||
| date={new Date()} | ||
| hours={1} | ||
| comments={""} | ||
| entryId={1} | ||
| onCellUpdate={() => {}} | ||
| /> | ||
| </div> | ||
| <p className="help-info"> | ||
| However, once the comment has been saved along with the time entry, | ||
| the triangle turns black: | ||
| </p> | ||
| <div className="centered"> | ||
| <Cell | ||
| topic={exampleIAP} | ||
| date={new Date()} | ||
| hours={1} | ||
| comments={"Test comment"} | ||
| entryId={1} | ||
| onCellUpdate={() => {}} | ||
| /> | ||
| </div> | ||
| <h2 className="help-subtitle">Time travelling</h2> | ||
| <p className="help-info"> | ||
| Users can navigate across different weeks by using the left and right | ||
| arrow or using the week picker. The week picker is displayed after | ||
| clicking on the button containing a calendar icon and the current week | ||
| number. It's worth noting that users can also go back to previously | ||
| visited weeks by using the browser's back button. | ||
| </p> | ||
| <p className="help-info"> | ||
| The URL displayed in your browser will show which year and week you | ||
| are currently looking at. That makes it possible to note down a link | ||
| to a certain week in urdr, in case you know you want to revisit that | ||
| week at a later point. | ||
| </p> | ||
| <div className="centered"> | ||
| <img | ||
| src={weektravel} | ||
| alt="time travelling calendar" | ||
| className="weektravel-img" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </main> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters