refactor: upgrade from CRA to Vite

.editorconfig

@@ -0,0 +1,16 @@
+# For more information about the properties used in
+# this file, please see the EditorConfig documentation:
+# https://editorconfig.org/
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.cjs

@@ -0,0 +1,85 @@
+module.exports = {
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:import/errors',
+        'plugin:import/react',
+        'plugin:import/warnings',
+        'plugin:react/recommended',
+        'plugin:react-hooks/recommended',
+        'plugin:prettier/recommended',
+    ],
+
+    // unignore implicit rules about what types of files can be linted
+    ignorePatterns: ['!.*', 'dist'],
+
+    env: {
+        browser: true,
+        node: true,
+        jest: true,
+        es2020: true,
+    },
+
+    parser: '@typescript-eslint/parser',
+
+    settings: {
+        react: {
+            version: 'detect',
+        },
+        'import/resolver': {
+            node: {
+                extensions: ['.js', '.jsx', '.ts', '.tsx'],
+            },
+        },
+    },
+
+    parserOptions: {
+        // latest standard is ok, eq. to 9
+        ecmaVersion: 2018,
+        ecmaFeatures: {
+            jsx: true,
+        },
+        sourceType: 'module',
+    },
+
+    rules: {
+        'react/react-in-jsx-scope': 'off',
+        'max-params': [
+            'error',
+            {
+                max: 3,
+            },
+        ],
+        'prefer-const': [
+            'error',
+            {
+                destructuring: 'any',
+                ignoreReadBeforeAssign: false,
+            },
+        ],
+        'no-mixed-spaces-and-tabs': ['error'],
+        'import/order': [
+            'error',
+            {
+                'newlines-between': 'never',
+                alphabetize: {
+                    order: 'asc',
+                    caseInsensitive: true,
+                },
+            },
+        ],
+        curly: ['error'],
+        'import/extensions': ['error', 'ignorePackages', { '': 'never' }],
+        'react-hooks/rules-of-hooks': 'error',
+        'react-hooks/exhaustive-deps': 'warn',
+        'react/sort-prop-types': [
+            'error',
+            {
+                requiredFirst: true,
+                sortShapeProp: true,
+                callbacksLast: true,
+            },
+        ],
+        'react/no-unused-prop-types': 'error',
+    },
+}

.github/workflows/build-test-deploy.yaml

@@ -1,33 +1,33 @@
 name: Build, test and deploy
 
 on:
-  push:
-    branches:
-      - master
-    tags:
-      - v*.*.*
+    push:
+        branches:
+            - master
+        tags:
+            - v*.*.*
 
-  pull_request:
-    types: [opened, reopened, synchronize, labeled]
+    pull_request:
+        types: [opened, reopened, synchronize, labeled]
 
-  workflow_dispatch:
+    workflow_dispatch:
 
 # Cancel previous runs of the same workflow and PR number or branch/tag
 concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
+    group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+    cancel-in-progress: true
 
 jobs:
-  call-workflow:
-    uses: dhis2-sre/gha-workflows/.github/workflows/im-build-test-deploy.yaml@master
-    with:
-      PROCESS_NAME: nginx
-      POD_NAME: im-web-client
-    secrets:
-      DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
-      DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
-      SOPS_KMS_ARN: ${{ secrets.SOPS_KMS_ARN }}
-      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
-      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-      KUBECONFIG: ${{ secrets.KUBECONFIG }}
-      SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
+    call-workflow:
+        uses: dhis2-sre/gha-workflows/.github/workflows/im-build-test-deploy.yaml@master
+        with:
+            PROCESS_NAME: nginx
+            POD_NAME: im-web-client
+        secrets:
+            DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
+            DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
+            SOPS_KMS_ARN: ${{ secrets.SOPS_KMS_ARN }}
+            AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+            AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+            KUBECONFIG: ${{ secrets.KUBECONFIG }}
+            SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}

.github/workflows/delete-env.yaml

@@ -1,18 +1,18 @@
 name: Delete deployed environment
 
 on:
-  pull_request:
-    types: [closed]
+    pull_request:
+        types: [closed]
 
 # Cancel previous runs of the same workflow and PR number or branch/tag
 concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
+    group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+    cancel-in-progress: true
 
 jobs:
-  call-workflow:
-    uses: dhis2-sre/gha-workflows/.github/workflows/im-delete-env.yaml@master
-    secrets:
-      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
-      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-      KUBECONFIG: ${{ secrets.KUBECONFIG }}
+    call-workflow:
+        uses: dhis2-sre/gha-workflows/.github/workflows/im-delete-env.yaml@master
+        secrets:
+            AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+            AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+            KUBECONFIG: ${{ secrets.KUBECONFIG }}

.github/workflows/dependabot.yaml

@@ -3,5 +3,5 @@ name: Dependabot auto-merge
 on: pull_request
 
 jobs:
-  dependabot:
-    uses: dhis2-sre/gha-workflows/.github/workflows/dependabot.yaml@master
+    dependabot:
+        uses: dhis2-sre/gha-workflows/.github/workflows/dependabot.yaml@master

.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/

.ls-lint.yml

@@ -2,6 +2,7 @@ ls:
     src:
         .dir: kebab-case
         .ts: kebab-case
+        .test.ts: kebab-case
         .tsx: kebab-case
         .test.tsx: kebab-case
         .d.ts: kebab-case
@@ -13,3 +14,4 @@ ignore:
     - src/setupTests.ts
     - src/reportWebVitals.ts
     - src/types/generated
+    - .test.ts

.prettierignore

@@ -0,0 +1,6 @@
+# The following files are yaml templates and produce SyntaxErrors with prettier
+helm/chart/templates/deployment.yaml
+helm/chart/templates/hpa.yaml
+helm/chart/templates/ingress.yaml
+helm/chart/templates/serviceaccount.yaml
+helm/chart/templates/tests/test-connection.yaml

.prettierrc.cjs

@@ -0,0 +1,29 @@
+module.exports = {
+    printWidth: 180,
+    tabWidth: 4,
+    useTabs: false,
+    semi: false,
+    singleQuote: true,
+    quoteProps: 'as-needed',
+    jsxSingleQuote: false,
+    trailingComma: 'es5',
+    bracketSpacing: true,
+    bracketSameLine: false,
+    arrowParens: 'always',
+    rangeStart: 0,
+    rangeEnd: Infinity,
+    requirePragma: false,
+    insertPragma: false,
+    proseWrap: 'preserve',
+    htmlWhitespaceSensitivity: 'css',
+    endOfLine: 'lf',
+    embeddedLanguageFormatting: 'auto',
+    overrides: [
+        {
+            files: '**/*.yml',
+            options: {
+                singleQuote: false,
+            },
+        },
+    ],
+}

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:19-alpine AS builder
+FROM node:20-alpine AS builder
 ARG REACT_APP_API_URL
 WORKDIR /app
 COPY package.json yarn.lock ./

e2e/databases.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from '@playwright/test'
-import { login, logout } from './utils'
+import { login, logout } from './utils/index.ts'
 
 test.describe('databases', () => {
     test.beforeEach(async ({ page }) => {

e2e/instances.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from '@playwright/test'
-import { login, logout, uploadTestDatabase, deleteTestDatabase } from './utils'
+import { login, logout, uploadTestDatabase, deleteTestDatabase } from './utils/index.ts'
 
 test.describe('new instance', () => {
     let dbFileName

e2e/stack.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from '@playwright/test'
-import { login, logout } from './utils'
+import { login, logout } from './utils/index.ts'
 
 test.describe('stack', () => {
     test.beforeEach(async ({ page }) => {

e2e/utils/delete-database.ts

@@ -1,5 +1,4 @@
 import { expect } from '@playwright/test'
-import path from 'path'
 
 const defaultDbName = 'empty-db'
 const dbNameExt = 'sql.gz'

e2e/utils/index.ts

@@ -1,5 +1,5 @@
-export * from './env'
-export * from './login'
-export * from './logout'
-export * from './upload-database'
-export * from './delete-database'
+export * from './env.ts'
+export * from './login.ts'
+export * from './logout.ts'
+export * from './upload-database.ts'
+export * from './delete-database.ts'

e2e/utils/login.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test'
-import { password, username } from './env'
+import { password, username } from './env.ts'
 
 export const login = async (page) => {
     await page.goto('/')

e2e/utils/upload-database.ts

@@ -1,5 +1,5 @@
-import { expect } from '@playwright/test'
 import path from 'path'
+import { expect } from '@playwright/test'
 
 const defaultDbName = 'empty-db'
 const dbExtension = '.sql.gz'

helm/chart/templates/service.yaml

@@ -1,15 +1,13 @@
 apiVersion: v1
 kind: Service
 metadata:
-  name: {{ include "im-web-client.fullname" . }}
-  labels:
-    {{- include "im-web-client.labels" . | nindent 4 }}
+    name: { { include "im-web-client.fullname" . } }
+    labels: { { - include "im-web-client.labels" . | nindent 4 } }
 spec:
-  type: {{ .Values.service.type }}
-  ports:
-    - port: {{ .Values.service.port }}
-      targetPort: http
-      protocol: TCP
-      name: http
-  selector:
-    {{- include "im-web-client.selectorLabels" . | nindent 4 }}
+    type: { { .Values.service.type } }
+    ports:
+        - port: { { .Values.service.port } }
+          targetPort: http
+          protocol: TCP
+          name: http
+    selector: { { - include "im-web-client.selectorLabels" . | nindent 4 } }