dhis2-sre · Mohammer5 · Jul 25, 2024 · Jul 15, 2024 · Jul 16, 2024 · Jul 16, 2024
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/.gitignore b/.gitignore
@@ -1,27 +1,45 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
 
 # dependencies
-/node_modules
 /.pnp
 .pnp.js
 
 # testing
 /coverage
+!/e2e/fixtures/empty-db.sql.gz
 
 # production
 /build
 
 # misc
-.DS_Store
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
 .idea
 .env
 /test-results/

diff --git a/.prettierrc.js b/.prettierrc.js
@@ -1,7 +1,8 @@
 const { config } = require('@dhis2/cli-style')
+const defaultConfig = require(config.prettier)
 
 module.exports = {
-    ...require(config.prettier),
+    ...defaultConfig,
     printWidth: 180,
     overrides: [
         {

diff --git a/README.md b/README.md
@@ -1,28 +1,30 @@
-# Instance Manager Web Client
+# React + TypeScript + Vite
 
-## Run the app locally
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
-1. `yarn`
-2. `yarn start`
+Currently, two official plugins are available:
 
-## Run using docker compose
+-   [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+-   [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 
-```sh
-make dev
-```
-
-## Run using skaffold
+## Expanding the ESLint configuration
 
-```sh
-skaffold dev
-```
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
 
-## Notes about fixed dependency versions
+-   Configure the top-level `parserOptions` property like this:
 
--   `openapi-typescript@5.4.1` is used because later versions do not work with OpenAPI V2, which our backend is stuck on
-
-## TODO
+```js
+export default {
+    // other rules...
+    parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        project: ['./tsconfig.json', './tsconfig.node.json'],
+        tsconfigRootDir: __dirname,
+    },
+}
+```
 
--   Validate create group form
-    -   Can submit without hostname... No effect, no error
--   Loading shows within form
+-   Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+-   Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+-   Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
diff --git a/e2e/utils/delete-database.ts b/e2e/utils/delete-database.ts
@@ -17,9 +17,5 @@ export const deleteTestDatabase = async (page, dbName = defaultDbName) => {
     await expect(page.getByTestId('dhis2-uicore-modalcontent')).toContainText(dbFileName)
     await page.getByRole('button', { name: 'Confirm' }).click()
 
-    await expect(
-        page
-            .getByTestId('dhis2-uicore-alertbar')
-            .getByText(new RegExp(`Successfully deleted [^/]+/${dbFileName}`))
-    ).toBeVisible()
+    await expect(page.getByTestId('dhis2-uicore-alertbar').getByText(new RegExp(`Successfully deleted [^/]+/${dbFileName}`))).toBeVisible()
 }
diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" href="/favicon.ico" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="theme-color" content="#000000" />
+        <title>DHIS2 Instances Manager</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>
diff --git a/package.json b/package.json
@@ -1,70 +1,58 @@
 {
-    "name": "instance-manager",
-    "version": "0.1.0",
+    "name": "my-vue-app",
     "private": true,
-    "dependencies": {
-        "@dhis2/app-runtime": "^3.10.1",
-        "@dhis2/app-service-alerts": "^3.9.4",
-        "@dhis2/d2-i18n": "^1.1.3",
-        "@dhis2/ui": "^8.16.0",
-        "@fontsource/roboto": "^5.0.12",
-        "axios": "^1.7.2",
-        "axios-hooks": "^5.0.2",
-        "final-form": "^4.20.10",
-        "moment": "^2.30.1",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "react-final-form": "^6.5.9",
-        "react-moment": "^1.1.3",
-        "react-router": "^6.24.1",
-        "react-router-dom": "^6.22.3",
-        "react-scripts": "5.0.1",
-        "styled-jsx": "^5.1.2",
-        "typescript": "^5.4.4",
-        "web-vitals": "^3.5.2"
-    },
+    "version": "0.0.0",
+    "__type": "module ;; doesn't work with our tooling setup, should be updated as it's deprecated! See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated",
     "scripts": {
-        "start": "react-scripts start",
-        "build": "react-scripts build",
-        "test": "react-scripts test",
-        "eject": "react-scripts eject",
+        "start": "vite --port 3000",
+        "build": "tsc -b && vite build",
+        "preview": "vite preview",
         "format": "yarn d2-style apply",
+        "_lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
         "lint": "yarn d2-style check",
         "e2e": "yarn playwright test --ui",
         "generate-types": "rm -rf ./src/types/generated && yarn openapi --input https://dev.api.im.dhis2.org/swagger.yaml --output ./src/types/generated --client axios --useOptions --useUnionTypes --exportCore false --exportServices false --exportModels true --exportSchemas false && yarn prettier src/types/generated --write --loglevel silent"
     },
-    "eslintConfig": {
-        "extends": [
-            "react-app",
-            "react-app/jest"
-        ]
-    },
-    "browserslist": {
-        "production": [
-            ">0.2%",
-            "not dead",
-            "not op_mini all"
-        ],
-        "development": [
-            "last 1 chrome version",
-            "last 1 firefox version",
-            "last 1 safari version"
-        ]
+    "dependencies": {
+        "@dhis2/app-service-alerts": "^3.10.5",
+        "@dhis2/ui": "^9.10.2",
+        "@fontsource/roboto": "^5.0.13",
+        "axios": "^1.7.2",
+        "axios-hooks": "^5.0.2",
+        "final-form": "^4.20.10",
+        "moment": "^2.30.1",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-moment": "^1.1.3",
+        "react-router-dom": "^6.24.1"
     },
     "devDependencies": {
+        "@dhis2/app-runtime": "^3",
         "@dhis2/cli-style": "^10.5.1",
         "@ls-lint/ls-lint": "^2.2.2",
-        "@playwright/test": "^1.44.1",
+        "@playwright/test": "1.44.1",
         "@testing-library/jest-dom": "^6.4.6",
         "@testing-library/react": "^14.2.1",
         "@testing-library/user-event": "^14.5.2",
         "@types/jest": "^29.5.12",
         "@types/node": "^20.12.2",
-        "@types/react": "^18.2.65",
-        "@types/react-dom": "^18.2.23",
+        "@types/react": "^18.3.3",
+        "@types/react-dom": "^18.3.0",
         "@types/react-router-dom": "^5.3.3",
+        "@typescript-eslint/eslint-plugin": "^7.13.1",
+        "@typescript-eslint/parser": "^7.13.1",
+        "@vitejs/plugin-react": "^4.3.1",
         "dotenv": "^16.4.5",
         "dotenv-expand": "^11.0.6",
-        "openapi-typescript-codegen": "^0.29.0"
+        "eslint": "^8.57.0",
+        "eslint-plugin-react-hooks": "^4.6.2",
+        "eslint-plugin-react-refresh": "^0.4.7",
+        "openapi-typescript-codegen": "^0.29.0",
+        "playwright-core": "1.44.1",
+        "playwright": "1.44.1",
+        "styled-jsx": "^5.1.6",
+        "ts-jest": "^29.2.2",
+        "typescript": "^5.2.2",
+        "vite": "^5.3.1"
     }
 }
diff --git a/public/index.html b/public/index.html
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/index.tsx → src/app/app.tsx b/src/index.tsx → src/app/app.tsx
@@ -8,13 +8,12 @@ import '@fontsource/roboto/700.css'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider } from 'react-router-dom'
-import { Alerts, AuthProvider, ErrorView, Layout } from './components'
-import './index.module.css'
-import { DatabasesList, DeploymentDetails, InstancesList, NewDhis2Instance, RequestPasswordReset, ResetPassword, SignUp, StackDetails, StacksList } from './views'
-import { UsersList } from './views/users'
-import { GroupsList } from './views/groups'
-import { Validate } from './views/validate'
-import { UserDetails } from './views/users/user-details'
+import { Alerts, AuthProvider, ErrorView, Layout } from '../components'
+import { DatabasesList, DeploymentDetails, InstancesList, NewDhis2Instance, RequestPasswordReset, ResetPassword, SignUp, StackDetails, StacksList } from '../views'
+import { UsersList } from '../views/users'
+import { GroupsList } from '../views/groups'
+import { Validate } from '../views/validate'
+import { UserDetails } from '../views/users/user-details'
 
 const router = createBrowserRouter(
     createRoutesFromElements(
@@ -40,22 +39,8 @@ const router = createBrowserRouter(
     )
 )
 
-const render = (tree) => {
-    const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
-
-    if (process.env.REACT_APP_SUPRESS_STRICT_MODE) {
-        return root.render(tree)
-    }
-
-    return root.render(
-        <React.StrictMode>
-            {tree}
-        </React.StrictMode>
-    )
-}
-
-render(
-    <AlertsProvider>
+export const App = () => (
+    <AlertsProvider plugin={false} parentAlertsAdd={undefined as Function} showAlertsInPlugin={false}>
         <CssReset />
         <CssVariables colors theme layers spacers elevations />
         <RouterProvider router={router} />

diff --git a/src/app/index.ts b/src/app/index.ts
@@ -0,0 +1 @@
+export { App } from './app'