Sonarqube

.env.prod

@@ -2,9 +2,6 @@ PORT=8020
 DEBUG=1
 HOST_NAME=monkshood
 SECRET_KEY=aLargeRandomSecretKey
-DJANGO_SUPERUSER_USERNAME=admin
-DJANGO_SUPERUSER_PASSWORD=sekret1
-[email protected]
 EMAIL_HOST=in-v3.mailjet.com
 EMAIL_PORT=25
 EMAIL_HOST_USER=email_username

Dockerfile

@@ -5,7 +5,7 @@ RUN mkdir -p /app/frontend
 WORKDIR /app/frontend
 COPY frontend-v2/package.json /app/frontend
 
-RUN npm install
+RUN npm install --ignore-scripts
 
 COPY frontend-v2 /app/frontend/
 RUN npm run build

frontend-v2/.prettierignore

@@ -0,0 +1,4 @@
+# Ignore artifacts:
+build
+coverage
+node_modules

frontend-v2/cypress.config.ts

@@ -5,8 +5,7 @@ export default defineConfig({
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },
-    baseUrl: 'http://localhost:3000',
-
+    baseUrl: "http://localhost:3000",
   },
 
   component: {

frontend-v2/cypress/e2e/pkmodel.cy.js

@@ -1,101 +1,110 @@
-describe('landing page', () => {
+describe("landing page", () => {
   beforeEach(() => {
-    const { username, password } = { username: 'demo', password: '12345'}
-    cy.login(username, password)
-  })
+    const { username, password } = { username: "demo", password: "12345" };
+    cy.login(username, password);
+  });
 
-  it('can create combined pk and pd model and simulate from it', () => {
+  it("can create combined pk and pd model and simulate from it", () => {
     // create a new project
-    cy.intercept('POST', '/api/project/').as('createProject')
-    cy.get('[data-cy="create-project"]').click()
-    cy.get('[data-cy="create-project-option-Small Molecule"]').click()
-    cy.wait('@createProject').then((interception) => {
-        const { id } = interception.response.body
-
-        // select the species
-        cy.get(`[data-cy="project-${id}"]`).find('[data-cy="select-project.species"]').click()
-        cy.get('[data-cy="select-option-project.species-Monkey"]').click()
-
-        // select the project
-        cy.get(`[data-cy="project-${id}"]`).find('[type=radio]').click()
+    cy.intercept("POST", "/api/project/").as("createProject");
+    cy.get('[data-cy="create-project"]').click();
+    cy.get('[data-cy="create-project-option-Small Molecule"]').click();
+    cy.wait("@createProject").then((interception) => {
+      const { id } = interception.response.body;
+
+      // select the species
+      cy.get(`[data-cy="project-${id}"]`)
+        .find('[data-cy="select-project.species"]')
+        .click();
+      cy.get('[data-cy="select-option-project.species-Monkey"]').click();
+
+      // select the project
+      cy.get(`[data-cy="project-${id}"]`).find("[type=radio]").click();
     });
 
-    cy.get('[data-cy="select-project.species"]').last().click()
-    cy.get('[data-cy="select-option-project.species-Monkey"]').last().click()
-
+    cy.get('[data-cy="select-project.species"]').last().click();
+    cy.get('[data-cy="select-option-project.species-Monkey"]').last().click();
 
     // go to model tab
-    cy.get('li').contains('Model').click()
+    cy.get("li").contains("Model").click();
 
     // select one compartment model
-    cy.get('[data-cy="select-pk_model"]').click()
-    cy.get('[data-cy="select-option-pk_model-one_compartment_preclinical"]').click()
+    cy.get('[data-cy="select-pk_model"]').click();
+    cy.get(
+      '[data-cy="select-option-pk_model-one_compartment_preclinical"]',
+    ).click();
 
     // select pd model
-    cy.get('[data-cy="select-pd_model"]').click()
-    cy.get('[data-cy="select-option-pd_model-indirect_effects_stimulation_elimination"]').click()
+    cy.get('[data-cy="select-pd_model"]').click();
+    cy.get(
+      '[data-cy="select-option-pd_model-indirect_effects_stimulation_elimination"]',
+    ).click();
 
     // go to map variables tab
-    cy.contains('button', 'Map Variables').click()
+    cy.contains("button", "Map Variables").click();
 
     // dose into Aa compartment
-    cy.get('[data-cy="checkbox-dosing-Aa"]').click()
+    cy.get('[data-cy="checkbox-dosing-Aa"]').click();
 
     // map C1 to pd effect
-    cy.get('[data-cy="checkbox-map-to-pd-C1"]').click()
+    cy.get('[data-cy="checkbox-map-to-pd-C1"]').click();
 
     // go to parameters tab
-    cy.contains('button', 'Parameters').click()
+    cy.contains("button", "Parameters").click();
 
-    cy.get('[data-cy="parameter-CL-value"]').find('input').then(($input) => {
-      const old_value = $input.val()
+    cy.get('[data-cy="parameter-CL-value"]')
+      .find("input")
+      .then(($input) => {
+        const old_value = $input.val();
 
-      // reset to species defaults
-      cy.contains('button', 'Reset to Species Defaults').click()
-      cy.wait(1000)
+        // reset to species defaults
+        cy.contains("button", "Reset to Species Defaults").click();
+        cy.wait(1000);
 
-      // check that the value has changed
-      cy.get('[data-cy="parameter-CL-value"]').find('input').then(($input) => {
-        expect($input.val()).not.to.eq(old_value)
-      })
-    });
+        // check that the value has changed
+        cy.get('[data-cy="parameter-CL-value"]')
+          .find("input")
+          .then(($input) => {
+            expect($input.val()).not.to.eq(old_value);
+          });
+      });
 
     // go to trial design tab
-    cy.get('li').contains('Trial Design').click()
+    cy.get("li").contains("Trial Design").click();
 
     // set the dose
-    cy.get('input[name="doses.0.amount"]').clear().type('1')
+    cy.get('input[name="doses.0.amount"]').clear().type("1");
 
     // set the number of doses
-    cy.get('input[name="doses.0.repeats"]').clear().type('4')
+    cy.get('input[name="doses.0.repeats"]').clear().type("4");
 
     // set the duration
-    cy.get('input[name="doses.0.duration"]').clear().type('0.1')
+    cy.get('input[name="doses.0.duration"]').clear().type("0.1");
 
     // set the interval
-    cy.get('input[name="doses.0.repeat_interval"]').clear().type('0.1')
+    cy.get('input[name="doses.0.repeat_interval"]').clear().type("0.1");
 
     // go to simulation tab
-    cy.get('li').contains('Simulations').click()
+    cy.get("li").contains("Simulations").click();
 
     // should be no svg with class "main-svg"
-    cy.get('svg.main-svg').should('not.exist')
+    cy.get("svg.main-svg").should("not.exist");
 
     // add a plot of Aa
-    cy.get('[data-cy="add-plot"]').click()
-    cy.get('[data-cy^="add-plot-option-Aa"]').click()
+    cy.get('[data-cy="add-plot"]').click();
+    cy.get('[data-cy^="add-plot-option-Aa"]').click();
 
     // now there should be an svg with class "main-svg"
-    cy.get('svg.main-svg').should('exist')
+    cy.get("svg.main-svg").should("exist");
 
     // should be no CL slider
-    cy.get('[data-cy="parameter-slider-CL"]').should('not.exist')
+    cy.get('[data-cy="parameter-slider-CL"]').should("not.exist");
 
     // add a CL parameter slider
-    cy.get('[data-cy="add-parameter-slider"]').click()
-    cy.get('[data-cy="add-parameter-slider-option-CL"]').click()
+    cy.get('[data-cy="add-parameter-slider"]').click();
+    cy.get('[data-cy="add-parameter-slider-option-CL"]').click();
 
     // CL slider should exist
-    cy.get('[data-cy="parameter-slider-CL"]').should('exist')
+    cy.get('[data-cy="parameter-slider-CL"]').should("exist");
   });
 });

frontend-v2/cypress/support/commands.ts

@@ -36,20 +36,20 @@
 //   }
 // }
 
-Cypress.Commands.add('login', (username, password) => {
-  cy.visit('/')
+Cypress.Commands.add("login", (username, password) => {
+  cy.visit("/");
 
-  cy.get('input[name=username]').type(username)
+  cy.get("input[name=username]").type(username);
 
   // {enter} causes the form to submit
-  cy.get('input[name=password]').type(`${password}{enter}`, { log: false })
+  cy.get("input[name=password]").type(`${password}{enter}`, { log: false });
 
   // we should be redirected to /
-  cy.url().should('not.contain', 'login')
+  cy.url().should("not.contain", "login");
 
   // our auth cookies should be present
-  cy.getCookie('csrftoken').should('exist')
-  cy.getCookie('sessionid').should('exist')
-})
+  cy.getCookie("csrftoken").should("exist");
+  cy.getCookie("sessionid").should("exist");
+});
 
-export {}
+export {};

frontend-v2/cypress/support/e2e.ts

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands";
 
 // Alternatively you can use CommonJS syntax:
-// require('./commands')
+// require('./commands')

frontend-v2/openapi-config.json

@@ -5,4 +5,4 @@
   "outputFile": "./src/app/backendApi.ts",
   "exportName": "backendApi",
   "hooks": true
-}
+}

frontend-v2/openapi-config.ts

@@ -1,12 +1,12 @@
-import type { ConfigFile } from '@rtk-query/codegen-openapi'
+import type { ConfigFile } from "@rtk-query/codegen-openapi";
 
 const config: ConfigFile = {
-  schemaFile: '../backend/schema.yml',
-  apiFile: './src/store/emptyApi.ts',
-  apiImport: 'emptySplitApi',
-  outputFile: './src/store/petApi.ts',
-  exportName: 'petApi',
+  schemaFile: "../backend/schema.yml",
+  apiFile: "./src/store/emptyApi.ts",
+  apiImport: "emptySplitApi",
+  outputFile: "./src/store/petApi.ts",
+  exportName: "petApi",
   hooks: true,
-}
+};
 
-export default config
+export default config;

frontend-v2/package.json

@@ -56,9 +56,11 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@rtk-query/codegen-openapi": "^1.2.0",
     "@types/papaparse": "^5.3.10",
     "@types/react-plotly.js": "^2.6.0",
     "cypress": "^12.16.0",
+    "prettier": "3.1.0",
     "start-server-and-test": "^2.0.0"
   }
 }

frontend-v2/public/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

frontend-v2/src/App.test.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { Provider } from 'react-redux';
-import { store } from './app/store';
-import App from './App';
+import React from "react";
+import { render } from "@testing-library/react";
+import { Provider } from "react-redux";
+import { store } from "./app/store";
+import App from "./App";
 
-test('renders learn react link', () => {
+test("renders learn react link", () => {
   const { getByText } = render(
     <Provider store={store}>
       <App />
-    </Provider>
+    </Provider>,
   );
 
   expect(getByText(/learn/i)).toBeInTheDocument();

frontend-v2/src/App.tsx

@@ -1,12 +1,16 @@
-import React, { useEffect } from 'react';
-import './App.css';
+import React, { useEffect } from "react";
+import "./App.css";
 
-import { fetchSession, isAuthenticated, login } from './features/login/loginSlice';  
-import { useSelector } from 'react-redux';
-import Login from './features/login/login';
-import Sidebar from './features/main/Sidebar';
-import { useAppDispatch } from './app/hooks';
-import { RootState } from './app/store';
+import {
+  fetchSession,
+  isAuthenticated,
+  login,
+} from "./features/login/loginSlice";
+import { useSelector } from "react-redux";
+import Login from "./features/login/login";
+import Sidebar from "./features/main/Sidebar";
+import { useAppDispatch } from "./app/hooks";
+import { RootState } from "./app/store";
 
 function App() {
   const dispatch = useAppDispatch();
@@ -15,22 +19,21 @@ function App() {
 
   const onLogin = (username: string, password: string) => {
     dispatch(login({ username, password }));
-  }
+  };
 
   useEffect(() => {
     dispatch(fetchSession());
   }, [dispatch]);
 
   return (
     <>
-    { isAuth ? (
-      <Sidebar />
-    ): (
-      <Login onLogin={onLogin} isLoading={false} errorMessage={error}/>
-    )}
+      {isAuth ? (
+        <Sidebar />
+      ) : (
+        <Login onLogin={onLogin} isLoading={false} errorMessage={error} />
+      )}
     </>
   );
 }
 
 export default App;
-