Merge pull request #559 from claudioantonio/webui_543_ifloggedin

Michael Muré created 4 years ago

Webui 543 ifloggedin

Change summary

webui/Readme.md                                    | 24 +++++++--
webui/src/components/BugTitleForm/BugTitleForm.tsx | 39 +++++++++------
webui/src/pages/list/ListQuery.tsx                 | 16 +++++-
3 files changed, 53 insertions(+), 26 deletions(-)

Detailed changes

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.
 

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>
     );
   }

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}