feat(api-codegen): replaced with new more excplicit codegen. Added re…

…act-query. Refactored app.tsx. Updated linting

.eslintrc.json

@@ -17,7 +17,9 @@
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "ecmaFeatures": { "jsx": true },
+    "ecmaFeatures": {
+      "jsx": true
+    },
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
@@ -33,26 +35,50 @@
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "error",
     "react/boolean-prop-naming": "warn",
-    "prettier/prettier": "error",
+    "prettier/prettier": "warn",
     "@tanstack/query/exhaustive-deps": "error",
     "@typescript-eslint/no-unused-vars": "error",
     "@typescript-eslint/ban-ts-comment": [
       "error",
-      { "ts-ignore": { "descriptionFormat": "^ because .+$" } }
+      {
+        "ts-ignore": {
+          "descriptionFormat": "^ because .+$"
+        }
+      }
+    ],
+    "camelcase": [
+      "error",
+      {
+        "ignoreImports": true
+      }
     ],
-    "camelcase": ["error", { "ignoreImports": true }],
     "max-depth": "warn",
     "max-lines": "warn",
-    "max-lines-per-function": ["warn", { "max": 60, "skipBlankLines": true }],
+    "max-lines-per-function": [
+      "warn",
+      {
+        "max": 60,
+        "skipBlankLines": true
+      }
+    ],
     "no-console": "warn",
     "no-duplicate-imports": "error",
     "no-self-compare": "error",
     "no-var": "error",
     "prefer-const": "error",
     "sort-imports": [
       "error",
-      { "ignoreCase": true, "ignoreDeclarationSort": true }
+      {
+        "ignoreCase": true,
+        "ignoreDeclarationSort": true
+      }
     ],
-    "spaced-comment": ["warn", "always", { "markers": ["/"] }]
+    "spaced-comment": [
+      "warn",
+      "always",
+      {
+        "markers": ["/"]
+      }
+    ]
   }
 }

.github/workflows/on-tag.yaml

@@ -29,4 +29,4 @@ jobs:
     needs: [set-tag-ref]
     uses: ./.github/workflows/publish.yaml
     with:
-      IMAGE_TAG: ${{ needs.set-tag-ref.outputs.tag-ref }}
+      IMAGE_TAG: ${{ needs.set-tag-ref.outputs.tag-ref }}

.github/workflows/publish.yaml

@@ -22,4 +22,3 @@ jobs:
 
       - name: Publish Container Image
         run: IMAGE_TAG=${{inputs.IMAGE_TAG}} docker compose push
-

.github/workflows/tests.yaml

@@ -1,4 +1,4 @@
-name: "CI"
+name: 'CI'
 
 on:
   push:
@@ -27,4 +27,4 @@ jobs:
           yarn test
           yarn build
         env:
-          CI: false
+          CI: false

.prettierrc.js

@@ -1,8 +1,8 @@
 // default config
 module.exports = {
-  trailingComma: 'es5',
+  trailingComma: 'all',
   tabWidth: 2,
-  semi: false,
+  semi: true,
   singleQuote: true,
   endOfLine: 'auto',
-}
+};

README.md

@@ -1,20 +1,25 @@
 # PEPM-UI
+
 User Interface for **Parameter Estimation from Process Models**.
 
 ## :zap: Getting started
+
 Clone the repository. Make sure you have [Node](https://nodejs.org/en/) and [yarn](https://yarnpkg.com/) installed. In the root folder of the application, run available scripts:
 
 ### Install dependencies
 
 Install third-party packages for local development.
+
 ```sh
 yarn install
 ```
 
 ### Run locally
+
 > **Note:** To run successfully, local overrides of `.env` must be defined, for instance in `.env.local`, or [see what other .env files can be used.](https://create-react-app.dev/docs/adding-custom-environment-variables/#what-other-env-files-can-be-used)
 
 This will by default run the application in your standard web browser at `localhost:3000`.
+
 ```sh
 yarn start
 ```
@@ -24,16 +29,19 @@ yarn start
 > **Note:** This step requires a `.env.development.local` file, with local overrides of `.env` for your local environment.
 
 Build and run docker image for local development.
+
 ```sh
 docker compose -f compose-dev.yaml up --build
 ```
 
 ### Husky pre-commit
 
 We use [husky](https://typicode.github.io/husky/#/) to automatically run tests, linting and formatting on commits, but you can also use the command below to run pre-commit manually.
+
 ```sh
 yarn pre-commit
 ```
 
 ## Authentication
-Authentication is implemented with [Microsoft Oauth2 for React](https://learn.microsoft.com/en-us/azure/active-directory/develop/single-page-app-tutorial-01-register-app)
+
+Authentication is implemented with [Microsoft Oauth2 for React](https://learn.microsoft.com/en-us/azure/active-directory/develop/single-page-app-tutorial-01-register-app)

package.json

@@ -10,6 +10,7 @@
     "@equinor/eds-icons": "^0.19.1",
     "@equinor/eds-tokens": "^0.9.0",
     "@tanstack/react-query": "^4.32.6",
+    "@tanstack/react-query-devtools": "^4.36.1",
     "@tanstack/react-table": "^8.9.1",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
@@ -20,6 +21,7 @@
     "@types/react-dom": "^18.0.0",
     "axios": "^1.5.0",
     "openapi-fetch": "^0.7.2",
+    "openapi-typescript-codegen": "^0.25.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.8.0",
@@ -35,6 +37,7 @@
     "test:ts": "tsc --noEmit",
     "eject": "react-scripts eject",
     "lint": "eslint --fix --ext .ts,.tsx .",
+    "prettier:fix": "prettier . --write",
     "prepare": "husky install",
     "pre-commit": "yarn test --watchAll=false && yarn lint-staged",
     "generate-schema:radix": "npx openapi-typescript https://api-pepm-dev.radix.equinor.com/swagger/v1/swagger.yaml -o src/models/schema.d.ts"
@@ -67,4 +70,4 @@
     "openapi-typescript": "^6.3.9",
     "prettier": "^2.8.2"
   }
-}
+}

public/index.html

@@ -2,13 +2,19 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/Equinor_Diamond_Favicon_RED_32x32px.png" />
+    <link
+      rel="icon"
+      href="%PUBLIC_URL%/Equinor_Diamond_Favicon_RED_32x32px.png"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta
       name="description"
       content="Web Application for Parameter Estimation from Process Models"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/Equinor_Symbol_Favicon_RED_64x64px.png" />
+    <link
+      rel="apple-touch-icon"
+      href="%PUBLIC_URL%/Equinor_Symbol_Favicon_RED_64x64px.png"
+    />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>PEPM</title>
   </head>

radixconfig.yaml

@@ -18,11 +18,11 @@ spec:
         - name: http
           port: 3000
       variables:
-        REACT_APP_AAD_TENANT_ID: ""
-        REACT_APP_AAD_CLIENT_ID: ""
-        REACT_APP_AAD_REDIRECT_URI: ""
-        REACT_APP_BACKEND_URL: ""
-        REACT_APP_BACKEND_API_SCOPE: ""
+        REACT_APP_AAD_TENANT_ID: ''
+        REACT_APP_AAD_CLIENT_ID: ''
+        REACT_APP_AAD_REDIRECT_URI: ''
+        REACT_APP_BACKEND_URL: ''
+        REACT_APP_BACKEND_API_SCOPE: ''
       environmentConfig:
         - environment: dev
         - environment: test
@@ -42,30 +42,30 @@ spec:
         - environment: dev
           imageTagName: latest
           variables:
-            ASPNETCORE_ENVIRONMENT: "Development"
+            ASPNETCORE_ENVIRONMENT: 'Development'
         - environment: test
           imageTagName: latest
           variables:
-            ASPNETCORE_ENVIRONMENT: "Test"
+            ASPNETCORE_ENVIRONMENT: 'Test'
         - environment: prod
           imageTagName: latest
           variables:
-            ASPNETCORE_ENVIRONMENT: "Production"
+            ASPNETCORE_ENVIRONMENT: 'Production'
   jobs:
     - name: pepm-nrresqml
       image: ghcr.io/equinor/pepm-worker-api/pepm-nrresqml:latest
       schedulerPort: 8090
       resources:
         requests:
-          memory: "2048Mi"
-          cpu: "1000m"
+          memory: '2048Mi'
+          cpu: '1000m'
         limits:
-          memory: "4096Mi"
-          cpu: "2000m"
+          memory: '4096Mi'
+          cpu: '2000m'
       payload:
         path: /app/args
       variables:
-        MODELS_PATH: "/mnt/azure-storage/models"
+        MODELS_PATH: '/mnt/azure-storage/models'
       environmentConfig:
         - environment: dev
           volumeMounts:
@@ -86,15 +86,15 @@ spec:
       schedulerPort: 8090
       resources:
         requests:
-          memory: "4096Mi"
-          cpu: "1000m"
+          memory: '4096Mi'
+          cpu: '1000m'
         limits:
-          memory: "8192Mi"
-          cpu: "2000m"
+          memory: '8192Mi'
+          cpu: '2000m'
       payload:
         path: /app/args
       variables:
-        MODELS_PATH: "/mnt/azure-storage/models"
+        MODELS_PATH: '/mnt/azure-storage/models'
       environmentConfig:
         - environment: dev
           volumeMounts:
@@ -113,4 +113,4 @@ spec:
   privateImageHubs:
     ghcr.io:
       username: hakoneriksson
-      email: [email protected]
+      email: [email protected]

src/App.styled.tsx

@@ -1,7 +1,7 @@
-import styled from 'styled-components'
+import styled from 'styled-components';
 
 const StyledOutletWrapper = styled.section`
   height: calc(100% - 128px);
   overflow: scroll;
-`
-export { StyledOutletWrapper as OutletWrapper }
+`;
+export { StyledOutletWrapper as OutletWrapper };

src/App.test.tsx

@@ -1,6 +1,6 @@
-import { render } from '@testing-library/react'
-import { App } from './App'
+import { render } from '@testing-library/react';
+import { App } from './App';
 
 test('renders without crashing', () => {
-  render(<App />)
-})
+  render(<App />);
+});

src/App.tsx

@@ -1,31 +1,25 @@
 import {
   AuthenticatedTemplate,
   UnauthenticatedTemplate,
-  useMsal,
-} from '@azure/msal-react'
-import { Outlet } from 'react-router-dom'
-import * as Styled from './App.styled'
-import AppBar from './features/AppBar/AppBar'
-import { Footer } from './features/Footer/Footer'
-import { NoAccess } from './pages/NoAccess/NoAccess'
+  useMsalAuthentication,
+} from '@azure/msal-react';
+import { InteractionType } from '@azure/msal-browser';
+import { Layout } from './pages/Layout';
+import { OpenAPI } from './api/generated';
+import { apiConfig } from './auth/authConfig';
 
 export function App() {
-  const { instance } = useMsal()
+  useMsalAuthentication(InteractionType.Redirect);
+  OpenAPI.BASE = apiConfig.baseUrl;
 
   return (
     <>
       <AuthenticatedTemplate>
-        <AppBar title="PEPM" />
-        <Styled.OutletWrapper>
-          <Outlet />
-        </Styled.OutletWrapper>
-        <Footer text="All information is proprietary of Equinor © 2023 Equinor ASA" />
+        <Layout />
       </AuthenticatedTemplate>
       <UnauthenticatedTemplate>
-        <p>Not authenticated</p>
-        <button onClick={() => instance.loginRedirect()}>Log in</button>
-        <NoAccess />
+        <div>You are not authorized</div>
       </UnauthenticatedTemplate>
     </>
-  )
+  );
 }

src/api/generated/core/ApiError.ts

@@ -0,0 +1,29 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { ApiRequestOptions } from './ApiRequestOptions';
+import type { ApiResult } from './ApiResult';
+
+export class ApiError extends Error {
+  public readonly url: string;
+  public readonly status: number;
+  public readonly statusText: string;
+  public readonly body: any;
+  public readonly request: ApiRequestOptions;
+
+  constructor(
+    request: ApiRequestOptions,
+    response: ApiResult,
+    message: string,
+  ) {
+    super(message);
+
+    this.name = 'ApiError';
+    this.url = response.url;
+    this.status = response.status;
+    this.statusText = response.statusText;
+    this.body = response.body;
+    this.request = request;
+  }
+}