Core UI 2.0

.github/workflows/build-webnext.yml

@@ -0,0 +1,26 @@
+name: Build webnext
+permissions:
+  contents: read
+  id-token: write
+  packages: write
+
+on:
+  push:
+    branches:
+      - webnext
+
+jobs:
+  build-current:
+    if: ${{ github.event_name != 'pull_request' }}
+    uses: ./.github/workflows/build-docker.yml
+    with:
+      tags: |
+        type=ref,event=branch
+        type=sha
+
+  trigger-staging-deploy:
+    needs: build-current
+    if: ${{ github.event_name != 'pull_request' }}
+    uses: ./.github/workflows/staging-deployment-webnext.yml
+    secrets: inherit
+# FIXME: Remove this yml when new UI is done and merged to dev

.github/workflows/lint-web.yml

@@ -33,6 +33,9 @@ jobs:
         run: |
           npm i -g npm pnpm
           pnpm i --frozen-lockfile
+      - name: Build
+        working-directory: ./web
+        run: pnpm build
       - name: Lint
         working-directory: ./web
         run: pnpm run lint

.github/workflows/staging-deployment-webnext.yml

@@ -0,0 +1,23 @@
+name: Deploy to release staging environment
+permissions:
+  contents: read
+on:
+  workflow_call:
+
+jobs:
+  deploy-staging:
+    if: ${{ github.event_name != 'pull_request' }}
+    runs-on: [self-hosted, Linux, X64]
+    environment: STAGING
+    env:
+      KUBE_HOST: ${{ secrets.KUBE_HOST }}
+      KUBE_CERTIFICATE: ${{ secrets.KUBE_CERTIFICATE }}
+      KUBE_TOKEN: ${{ secrets.KUBE_TOKEN }}
+    steps:
+      - name: Add SHORT_SHA env variable
+        run: echo "SHORT_SHA=`echo ${GITHUB_SHA} | cut -c1-7`" >> $GITHUB_ENV
+      - name: Deploy new image version
+        uses: actions-hub/[email protected]
+        with:
+          args: --namespace defguard-staging set image deployment/defguard defguard=ghcr.io/defguard/defguard:sha-${{ env.SHORT_SHA }}
+# FIXME: Remove this yml when new UI is done and merged to dev

.gitmodules

@@ -3,4 +3,4 @@
 	url = ../proto.git
 [submodule "web/src/shared/defguard-ui"]
 	path = web/src/shared/defguard-ui
-	url = ../ui.git
+	url = [email protected]:DefGuard/ui.git

Dockerfile

@@ -1,11 +1,10 @@
 FROM public.ecr.aws/docker/library/node:24 AS web
 
 WORKDIR /app
-COPY web/package.json web/pnpm-lock.yaml web/.npmrc ./
+COPY web/package.json web/pnpm-lock.yaml ./
 RUN npm i -g pnpm
 RUN pnpm install --ignore-scripts --frozen-lockfile
 COPY web/ .
-RUN pnpm run generate-translation-types
 RUN pnpm build
 
 FROM public.ecr.aws/docker/library/rust:1 AS chef
@@ -31,7 +30,6 @@ RUN cargo chef cook --release --recipe-path recipe.json
 
 # build project
 COPY --from=web /app/dist ./web/dist
-COPY web/src/shared/images/svg ./web/src/shared/images/svg
 RUN apt-get update && apt-get -y install protobuf-compiler libprotobuf-dev
 COPY Cargo.toml Cargo.lock ./
 # for vergen

web/.browserslistrc

@@ -0,0 +1 @@
+>0.3%, last 2 versions, since 2025, not op_mini all, not dead

web/.editorconfig

@@ -7,23 +7,5 @@ insert_final_newline = true
 indent_style = space
 indent_size = 2
 
-[*.{ts,tsx}]
-indent_style = space
-indent_size = 2
-rulers = 90
-
-[*.{scss}]
-indent_style = space
-indent_size = 2
-rulers = 90
-
-[*.{html}]
-indent_style = space
-indent_size = 2
+[*.{ts,tsx,js,jsx,scss,html,json,yaml}]
 rulers = 90
-
-[*.{json,yaml}]
-insert_final_newline = true
-indent_style = space
-indent_size = 2
-rulers = 80

web/.gitattributes

@@ -0,0 +1,36 @@
+* text=auto eol=lf
+
+*.js     text eol=lf
+*.jsx    text eol=lf
+*.ts     text eol=lf
+*.tsx    text eol=lf
+*.css    text eol=lf
+*.scss   text eol=lf
+*.json   text eol=lf
+*.html   text eol=lf
+*.md     text eol=lf
+*.yml    text eol=lf
+*.yaml   text eol=lf
+*.lock   text eol=lf
+
+*.woff   binary
+*.woff2  binary
+*.ttf    binary
+*.otf    binary
+*.eot    binary
+*.png    binary
+*.jpg    binary
+*.jpeg   binary
+*.gif    binary
+*.webp   binary
+*.avif   binary
+*.ico    binary
+*.mp4    binary
+*.webm   binary
+*.ogg    binary
+*.mp3    binary
+*.wav    binary
+*.pdf    binary
+*.zip    binary
+*.tar    binary
+*.gz     binary

web/.gitignore

@@ -1,2 +1,29 @@
-*.local*
-./*.env
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+project.inlang/cache
+.env.development
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.tanstack
+.cfft*
+blueprint-templates

web/.prettierignore

@@ -1,4 +1,3 @@
-/src/i18n/*.ts
-/src/i18n/*.tsx
 /src/**/*.tsx
 /src/**/*.ts
+/src/**/*.js

web/.stylelintrc.json

@@ -0,0 +1,10 @@
+{
+  "extends": ["stylelint-config-standard-scss"],
+  "plugins": ["stylelint-scss"],
+  "rules": {
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": true,
+    "custom-property-empty-line-before": null,
+    "value-keyword-case": null
+  }
+}

web/README.md

@@ -1,73 +1,73 @@
-# Defguard frontend
+# React + TypeScript + Vite
 
-React.js based, web user interface for Defguard project.
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
-## Run development server
+Currently, two official plugins are available:
 
-Install dependencies
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 
-```bash
-  pnpm install
-```
-
-Start the dev server
-
-```bash
-  pnpm run dev
-```
-
-You can configure API proxy by changing `target` key value under `/api` path within `vite.config.ts` file.
-
-## Build docker image
+## React Compiler
 
-```bash
-docker build .
-```
-
-## Linting
-
-For linting this project uses [prettier](https://www.npmjs.com/package/prettier), [eslint](https://www.npmjs.com/package/eslint) and [stylelint](https://stylelint.io/)
+The React Compiler is currently not compatible with SWC. See [this issue](https://github.com/vitejs/vite-plugin-react/issues/428) for tracking the progress.
 
-#### Available commands
+## Expanding the ESLint configuration
 
-Check linting in all supported files ( both prettier and eslint )
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
 
-```bash
-pnpm run lint
-```
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
 
-Fix all autofixable problems with eslint
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
 
-```bash
-pnpm run eslint-fix
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
 ```
 
-Fix all autofixable probles with prettier
-
-```bash
-pnpm run prettier-fix
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
 ```
-
-Fix all autofixable problems with pretter and eslint
-
-```bash
-pnpm fix-lint
-```
-
-#### Adding new SVG components
-
-Move .svg files into `src/shared/images/svg` then use command:
-
-```bash
-pnpm parse-svgs
-```
-
-This will generate new components within `src/shared/components/svg`, they can be used as a regular components. Also this command doesn't replace or modify already existing files.
-
-## Conventional Commits
-
-Using [commitlint](https://commitlint.js.org/#/) with this [config](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional).
-
-## Versioning
-
-Using [standard-version](https://github.com/conventional-changelog/standard-version)