diff options
| -rw-r--r-- | webui/Readme.md | 24 | ||||
| -rw-r--r-- | webui/src/components/BugTitleForm/BugTitleForm.tsx | 39 | ||||
| -rw-r--r-- | webui/src/pages/list/ListQuery.tsx | 16 |
3 files changed, 53 insertions, 26 deletions
diff --git a/webui/Readme.md b/webui/Readme.md index 2ba94b5d..50d7afa6 100644 --- a/webui/Readme.md +++ b/webui/Readme.md @@ -2,13 +2,25 @@ ## How to develop -1. Compile the go binary - - run `make` in the **root** directory -2. Run the GraphQL backend on the port 3001 - - `./git-bug webui -p 3001` -3. Run the hot-reloadable development WebUI +### Run GraphQL backend - - run `npm start` in the **webui** directory +1. Download a git-bug stable binary or compile your own by running `make` in the **root** directory: + +2. Run the git-bug binary inside your git repository. It will manage issues and start the API: + - `git-bug webui -p 3001` + +### Run ReactJS front-end + +1. If you haven't already, clone the git-bug repository: + +2. Enter the `webui` directory and install the needed libraries: + - `make install` or `npm install` + +3. Generate the TS code from the GrapQL files and run the webui in development mode: + - `make start` or `npm start` + - If you get some lint errors, run the lint command below and start again: + - `make fix-lint` or `npm run lint -- --fix` + - `make start` or `npm start` The development version of the WebUI is configured to query the backend on the port 3001. You can now live edit the js code and use the normal backend. diff --git a/webui/src/components/BugTitleForm/BugTitleForm.tsx b/webui/src/components/BugTitleForm/BugTitleForm.tsx index 16441c93..c47eab31 100644 --- a/webui/src/components/BugTitleForm/BugTitleForm.tsx +++ b/webui/src/components/BugTitleForm/BugTitleForm.tsx @@ -9,6 +9,7 @@ import { } from '@material-ui/core'; import { TimelineDocument } from '../../pages/bug/TimelineQuery.generated'; +import IfLoggedIn from '../IfLoggedIn/IfLoggedIn'; import Author from 'src/components/Author'; import Date from 'src/components/Date'; import { BugFragment } from 'src/pages/bug/Bug.generated'; @@ -156,23 +157,27 @@ function BugTitleForm({ bug }: Props) { <span className={classes.readOnlyTitle}>{bug.title}</span> <span className={classes.readOnlyId}>{bug.humanId}</span> </div> - <div className={classes.editButtonContainer}> - <Button - size="small" - variant="contained" - onClick={() => setbugTitleEdition(!bugTitleEdition)} - > - Edit - </Button> - <Button - className={classes.greenButton} - size="small" - variant="contained" - href="/new" - > - New issue - </Button> - </div> + <IfLoggedIn> + {() => ( + <div className={classes.editButtonContainer}> + <Button + size="small" + variant="contained" + onClick={() => setbugTitleEdition(!bugTitleEdition)} + > + Edit + </Button> + <Button + className={classes.greenButton} + size="small" + variant="contained" + href="/new" + > + New issue + </Button> + </div> + )} + </IfLoggedIn> </div> ); } diff --git a/webui/src/pages/list/ListQuery.tsx b/webui/src/pages/list/ListQuery.tsx index 424ffac0..87c21e3c 100644 --- a/webui/src/pages/list/ListQuery.tsx +++ b/webui/src/pages/list/ListQuery.tsx @@ -12,6 +12,8 @@ import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft'; import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight'; import Skeleton from '@material-ui/lab/Skeleton'; +import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn'; + import FilterToolbar from './FilterToolbar'; import List from './List'; import { useListBugsQuery } from './ListQuery.generated'; @@ -310,9 +312,17 @@ function ListQuery() { </button> </form> </div> - <Button className={classes.greenButton} variant="contained" href="/new"> - New issue - </Button> + <IfLoggedIn> + {() => ( + <Button + className={classes.greenButton} + variant="contained" + href="/new" + > + New issue + </Button> + )} + </IfLoggedIn> </header> <FilterToolbar query={query} queryLocation={queryLocation} /> {content} |