Enable storing of credentials and saving of reports

package.json

@@ -12,6 +12,8 @@
     "@types/react-dom": "^18.0.11",
     "axios": "^1.3.4",
     "bootstrap": "^5.2.3",
+    "mobx": "^6.8.0",
+    "mobx-react": "^7.6.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.2",
     "react-dom": "^18.2.0",

src/App.tsx

@@ -8,7 +8,9 @@ import Login from "./pages/Login";
 import UserService from "./services/UserService";
 import {Configuration} from "./runtime";
 import Report from "./pages/Report";
-
+import {ReportStore} from "./stores/ReportStore";
+import Management from "./pages/Management";
+import {CredentialsStore} from "./stores/CredentialsStore";
 
 
 let configuration = new Configuration({
@@ -40,7 +42,8 @@ export default function App() {
             <Routes>
                 <Route path="/" element={<Layout/>}>
                     <Route index element={<Reports/>}/>
-                    <Route path="/report/:id" element={<Report/>}/>
+                    <Route path="/management"  element={<Management credentialsStore={new CredentialsStore()}/>}/>
+                    <Route path="/report/:id"  element={<Report reportStore={new ReportStore()}/>}/>
                     <Route path="/login" element={<Login/>}/>
 
                     {/* Using path="*"" means "match anything", so this route
@@ -65,7 +68,7 @@ function Layout() {
 
                         <ul className="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
                             <li><Link to="/" className="nav-link px-2 text-secondary">Home</Link></li>
-                            <li><Link to="/" className="nav-link px-2 text-white">Features</Link></li>
+                            <li><Link to="/management" className="nav-link px-2 text-white">Management</Link></li>
                         </ul>
 
                         <div className="text-end">

src/pages/Management.tsx

@@ -0,0 +1,168 @@
+import {Button, Container, Form, InputGroup} from "react-bootstrap";
+import {CredentialsStore} from "../stores/CredentialsStore";
+import {observable} from "mobx";
+import {observer} from "mobx-react";
+import axios from "axios";
+import {DefaultConfig, userService} from "../App";
+import {useNavigate} from "react-router-dom";
+import {wait} from "@testing-library/user-event/dist/utils";
+import Loader from "../atoms/Loader";
+import React from "react";
+
+
+interface ManagementProps {
+    credentialsStore: CredentialsStore
+}
+
+class CreateReportStore {
+    @observable private _selectedBranch = "";
+    @observable private _prevRelease = "";
+    @observable private _jiraRelease = "";
+
+    get selectedBranch(): string {
+        return this._selectedBranch;
+    }
+
+    set selectedBranch(value: string) {
+        this._selectedBranch = value;
+    }
+
+    get prevRelease(): string {
+        return this._prevRelease;
+    }
+
+    set prevRelease(value: string) {
+        this._prevRelease = value;
+    }
+
+    get jiraRelease(): string {
+        return this._jiraRelease;
+    }
+
+    set jiraRelease(value: string) {
+        this._jiraRelease = value;
+    }
+}
+
+const Management = (props: ManagementProps) => {
+
+    const createReportStore = new CreateReportStore();
+    const navigate = useNavigate();
+
+    function loadCredentials() {
+        axios.get(DefaultConfig.basePath + "/credentials", {
+            headers: {
+                "Authorization": userService.getAuth()
+            }
+        }).then((result) => {
+            props.credentialsStore.hasCredentials = result.data === true;
+        });
+    }
+
+    function storeCredentials() {
+        axios.post(DefaultConfig.basePath + "/credentials", {
+            userName: props.credentialsStore.userName,
+            password: props.credentialsStore.password,
+        }, {
+            headers: {
+                "Content-Type": "application/json",
+                "Authorization": userService.getAuth()
+            }
+        })
+            .then(() => loadCredentials())
+            .catch(error => navigate("/login"));
+    }
+
+    if (!props.credentialsStore.hasCredentials) {
+        loadCredentials()
+    }
+
+    function createReport() {
+        axios.post(DefaultConfig.basePath + "/reports/create", {
+            jiraRelease: createReportStore.jiraRelease,
+            prevRelease: createReportStore.prevRelease,
+            selectedBranch: createReportStore.selectedBranch
+        }, {
+            headers: {
+                "Content-Type": "application/json",
+                "Authorization": userService.getAuth()
+            }
+        })
+        wait(30000);
+            // .then()
+            // .catch(error => navigate("/login"));
+    }
+
+    if (props.credentialsStore.hasCredentials === undefined) {
+        return <Loader/>;
+    }
+    return <Container>
+        <h1>Management</h1>
+        <br/>
+        <br/>
+        <h2>Jira Credentials:</h2>
+        {props.credentialsStore.hasCredentials ?
+            (<p>
+                Credentials already stored
+            </p>)
+            :
+            (
+                <Form>
+                    <InputGroup>
+                        <Form.Control type="text" placeholder="Username For Jira"
+                                      onChange={(event) => props.credentialsStore.userName = event.target.value}/>
+                    </InputGroup>
+                    <InputGroup>
+                        <Form.Control type="password" placeholder="Password for Jira"
+                                      onChange={(event) => props.credentialsStore.password = event.target.value}/>
+                    </InputGroup>
+                    <Button variant="primary" type="button" onClick={storeCredentials}>
+                        Store Jira Credentials
+                    </Button>
+                </Form>
+            )}
+        <br/>
+        <h2>Create Report:</h2>
+        <Form>
+            <InputGroup>
+                <Form.Control type="text" placeholder="Selected branch"
+                              onChange={(event) => createReportStore.selectedBranch = event.target.value}/>
+            </InputGroup>
+            <InputGroup>
+                <Form.Control type="text" placeholder="prev release"
+                              onChange={(event) => createReportStore.prevRelease = event.target.value}/>
+            </InputGroup>
+            <InputGroup>
+                <Form.Control type="text" placeholder="Jira release"
+                              onChange={(event) => createReportStore.jiraRelease = event.target.value}/>
+            </InputGroup>
+            <Button variant="primary" type="button" onClick={createReport}>
+                Create report
+            </Button>
+        </Form>
+
+
+        {/*<h1>Create Report</h1>*/}
+
+        {/*<form action="/credentials/" id="set-creds-form" method="post">*/}
+        {/*    <div>*/}
+        {/*        <input placeholder="Bitbucket User" name="userName" type="text"/>*/}
+        {/*        <br/>*/}
+        {/*        <input placeholder="Bitbucket Password" name="password" type="password"/>*/}
+        {/*        <p><input type="submit" value="Submit Credentials"/> <input type="reset" value="Reset"/></p>*/}
+        {/*    </div>*/}
+        {/*</form>*/}
+
+        {/*<form action="/reports/create" id="create-report-form" method="post">*/}
+
+        {/*    <input placeholder="Select Branch" name="selectedBranch" type="text"/>*/}
+        {/*    <input placeholder="Previous Release" name="prevRelease" type="text"/>*/}
+        {/*    <input placeholder="Jira Release" name="jiraRelease" type="text"/>*/}
+        {/*    <br/><br/>*/}
+        {/*    <p><input type="submit" value="Create Report"/> <input type="reset" value="Reset"/></p>*/}
+        {/*</form>*/}
+
+    </Container>
+};
+
+export default observer(Management);

src/pages/Report.tsx

@@ -1,19 +1,40 @@
-import React, {useEffect, useState} from "react";
+import React, {useEffect} from "react";
 import {Container, Form, Table} from "react-bootstrap";
 import Loader from "../atoms/Loader";
 import {reportEntityControllerApi, reportEntryEntityControllerApi, reportPropertyReferenceControllerApi, userService} from "../App";
-import {EntityModelReport, EntityModelReportEntry, EntityModelReportEntryReportEntryStatusEnum} from "../models";
+import {EntityModelReportEntry, EntityModelReportEntryReportEntryStatusEnum} from "../models";
 import {Link, useNavigate} from "react-router-dom";
+import {observer} from "mobx-react";
+import {ReportStore} from "../stores/ReportStore";
+import report from "./Report";
 
-export default function Report() {
+interface ReportProps {
+    reportStore: ReportStore
+}
+
+function Report(props: ReportProps) {
+    const reportStore = props.reportStore;
     const id = window.location.pathname.split("/")[2];
-    const [report, setReport] = useState<EntityModelReport | undefined>(undefined);
-    const [reportEntries, setReportEntries] = useState<EntityModelReportEntry[] | undefined>(undefined);
 
     const navigate = useNavigate();
     useEffect(() => {
-        loadData().then();
-    }, [id, navigate]); // eslint-disable-line react-hooks/exhaustive-deps
+        reportEntityControllerApi.getItemResourceReportGet({id: id}, {
+            redirect: "error",
+            headers: {
+                "Authorization": userService.getAuth()
+            }
+        })
+            .then(data => reportStore.setReportData(data))
+            .catch(error => navigate("/login"));
+        reportPropertyReferenceControllerApi.followPropertyReferenceReportGet1({id: id}, {
+            redirect: "error",
+            headers: {
+                "Authorization": userService.getAuth()
+            }
+        })
+            .then(data => reportStore.setReportEntries(data.embedded?.reportEntries))
+            .catch(error => navigate("/login"));
+    }, [id, navigate, reportStore]);
 
     function updateEntry(reportEntry: EntityModelReportEntry) {
         if (!reportEntry.id) {
@@ -30,12 +51,12 @@ export default function Report() {
             }
         })
             .then((data) => {
-                // setReportEntries(...da)
+                reportStore.updateEntry(data);
             })
         .catch(error => navigate("/login"));
     }
 
-    const reportEntryList = reportEntries?.map(reportEntry => <tr key={reportEntry.id}>
+    const reportEntryList = reportStore.entries?.map(reportEntry => <tr key={reportEntry.id}>
             <td>
                 <Link to={'/reportEntry/' + reportEntry.id}>{reportEntry.id}</Link>
             </td>
@@ -89,23 +110,5 @@ export default function Report() {
         }
     </Container>);
 
-    async function loadData() {
-        const reportRequest = reportEntityControllerApi.getItemResourceReportGet({id: id}, {
-            redirect: "error",
-            headers: {
-                "Authorization": userService.getAuth()
-            }
-        })
-            .then(data => setReport(data))
-            .catch(error => navigate("/login"));
-        const reportEntryRequest = reportPropertyReferenceControllerApi.followPropertyReferenceReportGet1({id: id}, {
-            redirect: "error",
-            headers: {
-                "Authorization": userService.getAuth()
-            }
-        })
-            .then(data => setReportEntries(data.embedded?.reportEntries))
-            .catch(error => navigate("/login"));
-        await Promise.all([reportRequest, reportEntryRequest]);
-    }
 }
+export default observer(Report);

src/stores/CredentialsStore.ts

@@ -0,0 +1,32 @@
+import {observable} from "mobx";
+
+export class CredentialsStore {
+    @observable private _hasCredentials: boolean | undefined;
+    @observable private _userName = "";
+    @observable private _password = "";
+
+
+    get hasCredentials(): boolean | undefined {
+        return this._hasCredentials;
+    }
+
+    set hasCredentials(value: boolean | undefined) {
+        this._hasCredentials = value;
+    }
+
+    get userName(): string {
+        return this._userName;
+    }
+
+    set userName(value: string) {
+        this._userName = value;
+    }
+
+    get password(): string {
+        return this._password;
+    }
+
+    set password(value: string) {
+        this._password = value;
+    }
+}

src/stores/ReportStore.ts

@@ -0,0 +1,41 @@
+import {action, observable} from "mobx";
+import {EntityModelReport, EntityModelReportEntry, ReportEntryResponse} from "../models";
+
+export class ReportStore {
+    @observable private _entries: EntityModelReportEntry[] = [];
+    @observable private _report: EntityModelReport | undefined;
+
+    @action
+    setReportData(data: EntityModelReport) {
+        this._report = data;
+    }
+
+    @action
+    setReportEntries(data: Array<ReportEntryResponse> | undefined) {
+        this._entries = [];
+        if (data) {
+            this._entries.push(...data)
+        }
+    }
+
+    set entries(value: EntityModelReportEntry[]) {
+        this._entries = value;
+    }
+
+    set report(value: EntityModelReport | undefined) {
+        this._report = value;
+    }
+
+    get entries(): EntityModelReportEntry[] {
+        return this._entries;
+    }
+
+    get report(): EntityModelReport | undefined {
+        return this._report;
+    }
+
+    @action
+    updateEntry(data: EntityModelReportEntry) {
+        this._entries = this._entries.map(e => e.id === data.id ? data : e);
+    }
+}

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "experimentalDecorators": true,
     "target": "es5",
     "lib": [
       "dom",