Merge pull request #894 from navikt/feature/robustifisere-typer-ts

Refaktorering fra JS/JSX til TS/TSX med typer, opprydding, retting av feil og mangler (her og der)

Dockerfile

@@ -1,5 +1,5 @@
 # build frontend and server
-FROM node:lts-alpine3.19 as build
+FROM node:lts-alpine3.20 as build
 WORKDIR /.
 COPY package.json package-lock.json tsconfig.json tsconfig.node.json vite.config.ts ./
 RUN npm ci

README.md

@@ -1,53 +1,65 @@
 # pensjon-regler-beregn
+
 ## Beskrivelse
 
-Dette er et React prosjekt, for å starte lokalt kreves node.js.
+Dette er et React-prosjekt skrevet i TypeScript. For å starte lokalt kreves node.js.
 
-Kan installeres på Mac med homebrev `brew install node` (for andre muligheter https://nodejs.org/en/download/package-manager/#macos, evt. https://nodejs.org/en/download/current/)
+Kan installeres på Mac med Homebrew: `brew install node` (for andre muligheter, se [nodejs.org](https://nodejs.org/en/download/package-manager/#macos) eller [nodejs.org/download](https://nodejs.org/en/download/current/)).
 
 ## Kjøre lokalt
 
-For å kjøre appen lokalt må man først installere pakker med kommandoen
+For å kjøre appen lokalt må man først installere pakker med kommandoen:
 
 `npm i`
 
-i Node kommando vindu etter å ha navigert til
-(repo-location)/pensjon-regler-beregn.
+i Node-kommando vindu etter å ha navigert til `(repo-location)/pensjon-regler-beregn`.
 
 Deretter kan man starte appen lokalt med kommandoen:
 
 `npm run dev`
 
-Appen vil da åpnes i standard nettleseren på adressen *http://localhost:5173/*  
-med mindre denne porten er opptatt (Node vil da finne en annen ledig port)
-eller noe annet er spesifisert.
+Appen vil da åpnes i standard nettleseren på adressen [http://localhost:5173/](http://localhost:5173/) med mindre denne porten er opptatt (Node vil da finne en annen ledig port) eller noe annet er spesifisert.
 
 ## Struktur
-Applikasjonen starter i filen `App.tsx`, dette er 'roten' for alle komponenter og
-underkomponenter i prosjektet.  
-Her initialiseres og vises de mest grunnleggende komponentene:  
-*Header*,*Footer*,*Request Pane* og *Response pane* disse ligger direkte under `/src/components`
+Applikasjonen starter i filen `App.tsx`, dette er 'roten' for alle komponenter og underkomponenter i prosjektet. Her initialiseres og vises de mest grunnleggende komponentene: `Navbar` og `Wrapper`. Disse ligger direkte under `/src/components`.
 
-Underkomponentene som rendres inne i *Header* ligger i mappen `/src/components/navigation`
+Underkomponentene som rendres inne i `Navbar` ligger i mappen `/src/components/navigation`.
 
-Konsollfunksjonen som skriver til *Footer* komponenter ligger under `/src/components/ConsoleLog.tsx`
+Konsollfunksjonen som skriver til `ConsoleLog`-komponenten ligger under `/src/components/ui-elements/ConsoleLog.tsx`.
 
-Innholdet i *Request- og ResponsePane* komponentene genereres av en rekursiv algoritme
-slik at endringer i modellen ikke trenger å kodes i frontend.  
-Denne rekursive algoritmen er todelt, først brukes `JsonParser.js` til å identifisere rot-element i
-JSON-objektet. Deretter delegeres rendering av rot-elementet til den samsvarende komponent funksjonen.
-Inne i komponent funksjonen kalles`JsonParser.js` igjen på alle under-elementer.
+Innholdet i `RequestPane`- og `ResponsePane`-komponentene genereres av en rekursiv algoritme slik at endringer i modellen ikke trenger å kodes i frontend. Denne rekursive algoritmen er todelt: først brukes `JsonParser.tsx` til å identifisere rot-element i JSON-objektet. Deretter delegeres rendering av rot-elementet til den samsvarende komponentfunksjonen. Inne i komponentfunksjonen kalles `JsonParser.tsx` igjen på alle under-elementer.
 
-`JsonParser.js` og alle underkomponentene som bygger opp GUI-modellen ligger i mappen
-`src/components/guielements`
+`JsonParser.tsx` og alle underkomponentene som bygger opp GUI-modellen ligger i mappen `src/components/guimodelelement`.
 
 ## Intern Informasjonsflyt
 
-Når en request åpnes via pensjon-regler-logviewer kommer den med en ID i URL'en  
-Denne ID'en brukes i et api-kall som kjøres med en gang applikasjonen åpnes  
-og har som hensikt å hente selve responsen i JSON format samt informasjon om  
-hvilket miljø responsen er fra og hvilken tjeneste som er brukt.
+Når en request åpnes via pensjon-regler-logviewer kommer den med en ID i URL'en. Denne ID'en brukes i et API-kall som kjøres med en gang applikasjonen åpnes og har som hensikt å hente selve responsen i JSON-format samt informasjon om hvilket miljø responsen er fra og hvilken tjeneste som er brukt.
+
+`RequestPane`- og `ResponsePane`-komponentene rendrer responsen og viser den i et trestrukturformat. Hver node i treet er en `TabComponent`-komponent som kan være en `TableComponent`, `TreeComponent`, `ArcNodeTreeComponent`, `FormelTreeComponent` eller `CellComponent`. 
+
+## Viktige filer og mapper
+
+- `src/components/navigation`: Inneholder navigasjonskomponenter som `Navbar`, `SatserDropdown` og `EnvironmentDropdown`.
+- `src/components/ui-elements`: Inneholder UI-komponenter som `Wrapper`, `DetailView`, `Main`, `ConsoleLog`, `DebugLogModal`, `RequestPane` og `ResponsePane`.
+- `src/components/guimodelelement`: Inneholder komponenter som bygger opp GUI-modellen, inkludert `JsonParser`, `TabListComponent`, `TabComponent`, `TableComponent`, `TreeComponent`, `ArcNodeTreeComponent`, `FormelTreeComponent` og `CellComponent`.
+- `src/store`: Inneholder global state management med Hookstate.
+- `src/api/service`: Inneholder API-kall og queries.
+- `src/api/domain/types`: Inneholder TypeScript-typer og enums brukt i prosjektet.
+- `src/components/error`: Inneholder feilhåndteringskomponenter som `ErrorBoundary` og `ErrorFallback`.
+
+## Feilhåndtering
+
+Prosjektet bruker en `ErrorBoundary`-komponent for å fange opp og vise feil som oppstår under rendering av komponenter. Feilmeldinger vises i en modal med detaljer om feilen.
+
+## Avhengigheter
+
+Prosjektet bruker flere eksterne biblioteker, inkludert:
+- `react`
+- `react-dom`
+- `react-router-dom`
+- `@tanstack/react-query`
+- `@navikt/ds-react`
+- `axios`
+- `@hookstate/core`
 
-*Request- og ResponsePane* rendres ikke før enten **RUN** eller **ÅPNE** knappene er blitt   
-trykket da det er disse som gjør api-kallet til pensjon-regler for å konvertere requesten
-og den tilhørende responsen til en gui-model.
+For en fullstendig liste over avhengigheter, se `package.json`.

package.json

@@ -22,6 +22,7 @@
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-resizable-panels": "^2.1.3",
     "react-router-dom": "^6.18.0"
   },
   "devDependencies": {

public/doc/index.html

@@ -549,16 +549,31 @@ <h2 id="_kjør_beregning_av_pensjon">2. Kjør beregning av pensjon</h2>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p><strong>Velg miljø</strong> - Velg det miljø du ønsker å gjennomføre beregningen i. Typiske valg her er å bruke Q0 for prodlikt eller testmiljøene Q2 eller Q5. Se <a href="https://confluence.adeo.no/display/PREG/Versjonsoversikt#">Versjonsoversikten</a> oversikt over hvilke historier som ligger i de forskjellige miljø.</p>
+<p><strong>Velg miljø</strong> - Velg det miljø du ønsker å gjennomføre beregningen i. Typiske valg her er å bruke Q0 for prodlikt eller testmiljøene Q1,Q2 eller Q5. Se <a href="https://confluence.adeo.no/display/PREG/Versjonsoversikt#">Versjonsoversikten</a> oversikt over hvilke historier som ligger i de forskjellige miljø.</p>
 </li>
 <li>
 <p><strong>Sats fra miljø</strong> - Dersom man ønsker å gjennomføre beregningen på en spesiell sats kan man overstyre satstabellen. Se <a href="https://pensjon-regler-satsviewer.dev-fss.nais.io/">Satsoversikten</a> for detaljer på satsene. Bruk valget <em>Sats fra miljø</em> for å benytte eksisterende sats i miljøet.</p>
 </li>
 <li>
-<p><strong>Åpne</strong> - Hvis du åpner nettsiden uten å gå gjennom logvieweren har du kun mulighet til å laste opp og kjøre egen XML. Dette gjør du ved å klikke på 'Åpne' &#8594; Velg fil.</p>
+<p><strong>Åpne fil</strong> - Hvis du åpner nettsiden uten å gå gjennom logvieweren har du kun mulighet til å laste opp og kjøre egen XML. Dette gjør du ved å klikke på 'Åpne fil' &#8594; Velg fil.</p>
+</li>
+<li>
+<p><strong>Vis regel-logg</strong> - Dersom man ønsker å se regel-loggen fra pensjon-regler så trykk på denne og loggen vil vises i et modalt vindu.</p>
 </li>
 </ol>
 </div>
+<div class="admonitionblock important">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-important" title="Important"></i>
+</td>
+<td class="content">
+Om det ikke finnes noen regel-logg vil knappen være "slukket".
+</td>
+</tr>
+</table>
+</div>
 <div class="paragraph">
 <p>En ny beregning gjennomføres og vises automatisk hvergang etter valg.</p>
 </div>

src/App.tsx

@@ -2,9 +2,8 @@ import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 import './App.css'
 import Navbar from './components/navigation/Navbar'
 import {Route, Routes} from 'react-router-dom';
-import Wrapper from './components/Wrapper';
+import Wrapper from './components/ui-elements/Wrapper.tsx';
 import ErrorBoundary from './components/error/ErrorBoundary';
-import DetailViewFile from './components/DetailViewFile';
 import ErrorFallback from "./components/error/ErrorFallback.tsx";
 
 
@@ -18,7 +17,6 @@ function App() {
             <Navbar/>
                 <Routes>
                     <Route path='/:id' element={<Wrapper/>}></Route>
-                    <Route path='/file/*' element={<DetailViewFile/>}></Route>
                 </Routes>
             </ErrorBoundary>
         </QueryClientProvider>

src/api/domain/types/index.ts

@@ -0,0 +1,114 @@
+
+export enum ElementType {
+    TABLIST = "TABLIST",
+    TAB = "TAB",
+    TABLE = "TABLE",
+    NODE = "NODE",
+    BEREGNINGNODE = "BEREGNINGNODE",
+    ARCNODE = "ARCNODE",
+    FORMELNODE = "FORMELNODE"
+}
+
+export enum Orientation {
+    VERTICAL = "VERTICAL",
+    HORIZONTAL = "HORIZONTAL"
+}
+
+export enum Position {
+    TOP = "TOP",
+    SIDE = "SIDE"
+}
+
+export enum PopoverType {
+    NONE = "NONE",
+    DESCRIPTION = "DESCRIPTION",
+    FORMEL = "FORMEL",
+    FAKTUM = "FAKTUM"
+}
+
+export interface BaseElement {
+    type: ElementType;
+    [key: string]: unknown;
+}
+
+export interface TabListElement extends BaseElement {
+    name: string;
+    position: Position;
+    data: TabElement[];
+}
+
+export interface TabElement extends BaseElement {
+    name: string;
+    data: TableElement[];
+}
+
+export interface TableElement extends BaseElement {
+    name: string;
+    orientation: Orientation;
+    cells: CellElement[][];
+}
+
+export interface CellElement extends BaseElement {
+    header: boolean;
+    popoverType: PopoverType;
+    popoverContent?: NodeElement[];
+    tooltip?: string;
+    data: string;
+}
+
+export interface NodeElement extends BaseElement {
+    name: string;
+    used: boolean;
+    children: NodeElement[];
+}
+
+export interface ArcNodeElement extends NodeElement {
+}
+
+export interface BeregningNodeElement extends NodeElement {
+    data: TabElement[];
+}
+
+export interface FormelNodeElement extends NodeElement {
+    notasjon?: string;
+    innhold?: string;
+    result?: string;
+}
+export interface Metadata {
+    className: string;
+    status: string;
+    info: string;
+    bruktSats: string;
+    debugLog: string;
+}
+
+export type DataElement =
+    | TabListElement
+    | TabElement
+    | TableElement
+    | CellElement
+    | NodeElement
+    | ArcNodeElement
+    | BeregningNodeElement
+    | FormelNodeElement;
+
+export interface GuiModel {
+    request: DataElement[];
+    response: DataElement[];
+    metadata: Metadata;
+}
+
+export type LogResponse = {
+    id: string;
+    correlation_id: string;
+    environment: string;
+    person?: string;
+    date: string;
+    metadata: string
+    xml: string;
+    type: string;
+    transaction_id: string;
+    method: string;
+    from: string;
+    persons: string;
+}