diff --git a/.github/renovate.json b/.github/renovate.json5
similarity index 75%
rename from .github/renovate.json
rename to .github/renovate.json5
index 69fb4cdad..8978459cf 100644
--- a/.github/renovate.json
+++ b/.github/renovate.json5
@@ -6,7 +6,8 @@
"packageRules": [
{
"matchPackagePatterns": [
- "^@homarr/"
+ "^@homarr/",
+ "tsx" // Disabled for now as version 0.14.4 did not work with the current version of homarr. It resulted in a ERR_MODULE_NOT_FOUND error
],
"enabled": false
},
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
deleted file mode 100644
index b8fbfaa9d..000000000
--- a/.github/workflows/build.yml
+++ /dev/null
@@ -1,31 +0,0 @@
-name: Build apps and migration script
-
-on:
- pull_request:
- branches: ["*"]
- push:
- branches: ["main"]
- merge_group:
-
-concurrency:
- group: ${{ github.workflow }}-${{ github.ref }}
- cancel-in-progress: ${{ github.ref != 'refs/heads/master' }}
-
-env:
- FORCE_COLOR: 3
-
-jobs:
- build:
- runs-on: ubuntu-latest
- steps:
- - uses: actions/checkout@v4
-
- - name: Setup
- uses: ./tooling/github/setup
-
- - name: Copy env
- shell: bash
- run: cp .env.example .env
-
- - name: Build
- run: pnpm build
diff --git a/.github/workflows/code-quality.yml b/.github/workflows/code-quality.yml
index 228dd9989..a75c144b7 100644
--- a/.github/workflows/code-quality.yml
+++ b/.github/workflows/code-quality.yml
@@ -1,4 +1,4 @@
-name: Code quality analysis
+name: "[Quality] Code Analysis"
on:
pull_request:
@@ -8,7 +8,7 @@ on:
merge_group:
concurrency:
- group: ${{ github.workflow }}-${{ github.ref }}
+ group: "${{ github.workflow }}-${{ github.ref }}"
cancel-in-progress: ${{ github.ref != 'refs/heads/master' }}
# You can leverage Vercel Remote Caching with Turbo to speed up your builds
@@ -72,3 +72,15 @@ jobs:
# Only works if you set `reportOnFailure: true` in your vite config as specified above
if: always()
uses: davelosert/vitest-coverage-report-action@v2
+
+ build:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v4
+ - name: Setup
+ uses: ./tooling/github/setup
+ - name: Copy env
+ shell: bash
+ run: cp .env.example .env
+ - name: Build
+ run: pnpm build
diff --git a/.github/workflows/conventional-commits.yml b/.github/workflows/conventions-semantic-commits.yml
similarity index 77%
rename from .github/workflows/conventional-commits.yml
rename to .github/workflows/conventions-semantic-commits.yml
index 8f2216bd7..d26307ba0 100644
--- a/.github/workflows/conventional-commits.yml
+++ b/.github/workflows/conventions-semantic-commits.yml
@@ -1,7 +1,5 @@
-
# https://github.com/webiny/action-conventional-commits?tab=readme-ov-file
-
-name: Conventional Commits
+name: "[Conventions] Semantic Commits"
on:
pull_request:
@@ -12,5 +10,5 @@ jobs:
name: Conventional Commits
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: webiny/action-conventional-commits@v1.3.0
\ No newline at end of file
diff --git a/.github/workflows/pr-conventional-commits.yml b/.github/workflows/conventions-semantic-pull-requests.yml
similarity index 81%
rename from .github/workflows/pr-conventional-commits.yml
rename to .github/workflows/conventions-semantic-pull-requests.yml
index e3dfb587b..cec459930 100644
--- a/.github/workflows/pr-conventional-commits.yml
+++ b/.github/workflows/conventions-semantic-pull-requests.yml
@@ -1,4 +1,4 @@
-name: "Lint PR"
+name: "[Conventions] Semantic PRs"
on:
pull_request_target:
@@ -11,8 +11,7 @@ permissions:
pull-requests: read
jobs:
- main:
- name: Validate PR title
+ validate-pull-request-title:
runs-on: ubuntu-latest
steps:
- uses: amannn/action-semantic-pull-request@v5
diff --git a/.github/workflows/docker-image.yml b/.github/workflows/deployment-docker-image.yml
similarity index 95%
rename from .github/workflows/docker-image.yml
rename to .github/workflows/deployment-docker-image.yml
index 046523358..40279c171 100644
--- a/.github/workflows/docker-image.yml
+++ b/.github/workflows/deployment-docker-image.yml
@@ -1,4 +1,4 @@
-name: Docker image
+name: "[Deployment] Release"
on:
pull_request:
@@ -70,13 +70,13 @@ jobs:
id: meta
uses: docker/metadata-action@v5
with:
- images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+ images: "${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}"
tags: |
type=raw,value=latest
type=raw,value=${{ steps.semver.outputs.next }}
- name: Build and push
id: buildPushAction
- uses: docker/build-push-action@v5
+ uses: docker/build-push-action@v6
with:
platforms: linux/amd64,linux/arm64,linux/riscv64,linux/arm/v7,linux/arm/v6
context: .
diff --git a/.github/workflows/deployment-weekly-release.yml b/.github/workflows/deployment-weekly-release.yml
new file mode 100644
index 000000000..db546dbd2
--- /dev/null
+++ b/.github/workflows/deployment-weekly-release.yml
@@ -0,0 +1,95 @@
+name: "[Deployment] Automatic Weekly Release"
+
+on:
+ schedule:
+ - cron: "0 19 * * 5" # https://crontab.guru/#0_19_*_*_5
+ workflow_dispatch:
+ inputs:
+ send-notifications:
+ type: boolean
+ required: false
+ default: true
+ description: Send notifications
+
+permissions:
+ contents: write
+ pull-requests: write
+
+jobs:
+ create-and-merge-pr:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Discord notification
+ if: ${{ github.events.inputs.send-notifications }}
+ env:
+ DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
+ uses: Ilshidur/action-discord@master
+ with:
+ args: "Automatic release has been triggered: [run ${{ github.run_number }}](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }})"
+ - name: Checkout repository
+ uses: actions/checkout@v4
+ with:
+ fetch-depth: 0
+ - name: Get Next Version
+ id: semver
+ uses: ietf-tools/semver-action@v1
+ with:
+ token: ${{ github.token }}
+ branch: dev
+ - name: Create pull request
+ run: "gh pr create --title \"chore(release): automatic release ${{ steps.semver.outputs.next }}\" --body \"**This is an automatic release**.
Manual action may be required for major bumps.
Detected change to be ``${{ steps.semver.outputs.bump }}``
Bump version from ``${{ steps.semver.outputs.current }}`` to ``${{ steps.semver.outputs.next }}``\" --base main --head dev --label automerge"
+ env:
+ GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
+ - name: Discord notification
+ if: ${{ github.events.inputs.send-notifications }}
+ env:
+ DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
+ uses: Ilshidur/action-discord@master
+ with:
+ args: "Created a release PR ${{ steps.create-pull-request.outputs.url }} for version ${{ steps.semver.outputs.next }} (new behaviour: ${{ steps.semver.outputs.bump }})"
+ - name: Obtain token
+ id: obtainApprovalToken
+ uses: tibdex/github-app-token@v2
+ with:
+ private_key: ${{ secrets.RENOVATE_APPROVE_PRIVATE_KEY }}
+ app_id: ${{ secrets.RENOVATE_APPROVE_APP_ID }}
+ - name: Approve PR
+ env:
+ GITHUB_TOKEN: ${{ steps.obtainApprovalToken.outputs.token }}
+ run: |
+ gh pr review --approve --body "Automatically approved by GitHub Action"
+ - id: automerge
+ if: ${{ steps.semver.outputs.bump != 'major' }}
+ name: automerge
+ uses: "pascalgn/automerge-action@v0.16.3"
+ env:
+ GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
+ MERGE_METHOD: merge # we prefer merge commits for merging to master
+ MERGE_COMMIT_MESSAGE: "chore(release): automatic release ${{ steps.semver.outputs.next }}"
+ MERGE_DELETE_BRANCH: false # never set to true!
+ PULL_REQUEST: "${{ steps.create-pull-request.outputs.pr_number }}"
+ MERGE_RETRIES: 20 # 20 retries * MERGE_RETRY_SLEEP until step fails
+ MERGE_RETRY_SLEEP: 10000 # 10 seconds * MERGE_RETRIES until step fails
+ MERGE_REQUIRED_APPROVALS: 0 # do not require approvals
+
+ - name: Merged Discord notification
+ if: ${{ steps.automerge.outputs.mergeResult == 'merged' && github.events.inputs.send-notifications }}
+ env:
+ DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
+ uses: Ilshidur/action-discord@master
+ with:
+ args: "Merged PR ${{ steps.create-pull-request.outputs.url }} for release ${{ steps.semver.outputs.next }}"
+ - name: Major Bump Discord notification
+ if: ${{ steps.semver.outputs.bump == 'major' && github.events.inputs.send-notifications }}
+ env:
+ DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
+ uses: Ilshidur/action-discord@master
+ with:
+ args: "The release PR must be manually merged because the next version is a major version: ${{ steps.create-pull-request.outputs.url }} for release ${{ steps.semver.outputs.next }}"
+ - name: Discord Fail Notification
+ if: failure() && github.events.inputs.send-notifications
+ env:
+ DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
+ uses: Ilshidur/action-discord@master
+ with:
+ args: "The automatic release workflow [run ${{ github.run_number }}](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}) has failed"
diff --git a/.github/workflows/renovate-automatic-approval b/.github/workflows/renovate-automatic-approval.yml
similarity index 56%
rename from .github/workflows/renovate-automatic-approval
rename to .github/workflows/renovate-automatic-approval.yml
index b4701ed96..1185fd800 100644
--- a/.github/workflows/renovate-automatic-approval
+++ b/.github/workflows/renovate-automatic-approval.yml
@@ -1,4 +1,4 @@
-name: Approve Renovate PRs
+name: "[Dependency Updates] Auto Approve"
on:
pull_request:
types: [opened, synchronize]
@@ -6,17 +6,20 @@ on:
jobs:
approve-renovate-prs:
runs-on: ubuntu-latest
-
steps:
- name: Checkout code
- uses: actions/checkout@v2
-
+ uses: actions/checkout@v4
+ - name: Obtain token
+ id: obtainToken
+ uses: tibdex/github-app-token@v2
+ with:
+ private_key: ${{ secrets.RENOVATE_APPROVE_PRIVATE_KEY }}
+ app_id: ${{ secrets.RENOVATE_APPROVE_APP_ID }}
- name: Install GitHub CLI
run: sudo apt-get install -y gh
-
- name: Approve Renovate PRs
env:
- GITHUB_TOKEN: ${{ secrets.RENOVATE_APPROVE_TOKEN }}
+ GITHUB_TOKEN: ${{ steps.obtainToken.outputs.token }}
run: |
for pr in $(gh pr list --author homarr-renovate[bot] --json number --jq .[].number); do
gh pr review $pr --approve --body "Automatically approved by GitHub Action"
diff --git a/.gitignore b/.gitignore
index 8327c8b84..f7d87aa53 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,8 +14,8 @@ coverage
out/
next-env.d.ts
-# nest.js
-apps/nestjs/dist
+# artifacts
+packages/db/migrations/*/migrate.cjs
# nitro
.nitro/
diff --git a/.nvmrc b/.nvmrc
index 48b14e6b2..b8e593f52 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-20.14.0
+20.15.1
diff --git a/.run/db_migration_mysql_generate.run.xml b/.run/db_migration_mysql_generate.run.xml
new file mode 100644
index 000000000..1eaa49077
--- /dev/null
+++ b/.run/db_migration_mysql_generate.run.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.run/db_migration_sqlite_generate.run.xml b/.run/db_migration_sqlite_generate.run.xml
new file mode 100644
index 000000000..ea63d6b81
--- /dev/null
+++ b/.run/db_migration_sqlite_generate.run.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.run/db_push.run.xml b/.run/db_push.run.xml
new file mode 100644
index 000000000..e5d56c827
--- /dev/null
+++ b/.run/db_push.run.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.run/db_studio.run.xml b/.run/db_studio.run.xml
new file mode 100644
index 000000000..df61c66f7
--- /dev/null
+++ b/.run/db_studio.run.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.run/dev.run.xml b/.run/dev.run.xml
new file mode 100644
index 000000000..15ec68c7f
--- /dev/null
+++ b/.run/dev.run.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.run/docker_dev.run.xml b/.run/docker_dev.run.xml
new file mode 100644
index 000000000..0aa18c69a
--- /dev/null
+++ b/.run/docker_dev.run.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.run/format.run.xml b/.run/format.run.xml
new file mode 100644
index 000000000..801ecad89
--- /dev/null
+++ b/.run/format.run.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.run/format_fix.run.xml b/.run/format_fix.run.xml
new file mode 100644
index 000000000..391e76671
--- /dev/null
+++ b/.run/format_fix.run.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.run/test.run.xml b/.run/test.run.xml
new file mode 100644
index 000000000..d96c3ec1b
--- /dev/null
+++ b/.run/test.run.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.run/test_ui.run.xml b/.run/test_ui.run.xml
new file mode 100644
index 000000000..2f18e7aa9
--- /dev/null
+++ b/.run/test_ui.run.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index b9a963aad..90148c6f2 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -4,13 +4,23 @@
"mode": "auto"
}
],
+ "eslint.experimental.useFlatConfig": true,
"typescript.tsdk": "node_modules\\typescript\\lib",
"js/ts.implicitProjectConfig.experimentalDecorators": true,
"prettier.configPath": "./tooling/prettier/index.mjs",
"cSpell.words": [
- "superjson",
+ "cqmin",
"homarr",
+ "jellyfin",
+ "superjson",
"trpc",
- "Umami"
- ]
-}
\ No newline at end of file
+ "Umami",
+ "Sonarr"
+ ],
+ "i18n-ally.dirStructure": "auto",
+ "i18n-ally.enabledFrameworks": ["next-international"],
+ "i18n-ally.localesPaths": ["./packages/translation/src/lang/"],
+ "i18n-ally.enabledParsers": ["ts"],
+ "i18n-ally.extract.keyMaxLength": 0,
+ "i18n-ally.keystyle": "flat"
+}
diff --git a/Dockerfile b/Dockerfile
index b9471f77e..03cd2719d 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:20.13.1-alpine AS base
+FROM node:20.15.1-alpine AS base
FROM base AS builder
RUN apk add --no-cache libc6-compat
diff --git a/apps/nextjs/eslint.config.js b/apps/nextjs/eslint.config.js
new file mode 100644
index 000000000..c131bab90
--- /dev/null
+++ b/apps/nextjs/eslint.config.js
@@ -0,0 +1,13 @@
+import baseConfig from "@homarr/eslint-config/base";
+import nextjsConfig from "@homarr/eslint-config/nextjs";
+import reactConfig from "@homarr/eslint-config/react";
+
+/** @type {import('typescript-eslint').Config} */
+export default [
+ {
+ ignores: [".next/**"],
+ },
+ ...baseConfig,
+ ...reactConfig,
+ ...nextjsConfig,
+];
diff --git a/apps/nextjs/next.config.mjs b/apps/nextjs/next.config.mjs
index fcf1321a4..0cc05f786 100644
--- a/apps/nextjs/next.config.mjs
+++ b/apps/nextjs/next.config.mjs
@@ -1,6 +1,6 @@
// Importing env files here to validate on build
-import "./src/env.mjs";
import "@homarr/auth/env.mjs";
+import "./src/env.mjs";
/** @type {import("next").NextConfig} */
const config = {
@@ -9,6 +9,13 @@ const config = {
/** We already do linting and typechecking as separate tasks in CI */
eslint: { ignoreDuringBuilds: true },
typescript: { ignoreBuildErrors: true },
+ webpack: (config) => {
+ config.module.rules.push({
+ test: /\.node$/,
+ loader: "node-loader",
+ });
+ return config;
+ },
experimental: {
optimizePackageImports: ["@mantine/core", "@mantine/hooks", "@tabler/icons-react"],
},
diff --git a/apps/nextjs/package.json b/apps/nextjs/package.json
index d82c1decd..a6f22572b 100644
--- a/apps/nextjs/package.json
+++ b/apps/nextjs/package.json
@@ -7,7 +7,7 @@
"build": "pnpm with-env next build",
"clean": "git clean -xdf .next .turbo node_modules",
"dev": "pnpm with-env next dev",
- "lint": "dotenv -v SKIP_ENV_VALIDATION=1 next lint",
+ "lint": "eslint",
"format": "prettier --check . --ignore-path ../../.gitignore",
"start": "pnpm with-env next start",
"typecheck": "tsc --noEmit",
@@ -18,6 +18,7 @@
"@homarr/api": "workspace:^0.1.0",
"@homarr/auth": "workspace:^0.1.0",
"@homarr/common": "workspace:^0.1.0",
+ "@homarr/cron-job-status": "workspace:^0.1.0",
"@homarr/db": "workspace:^0.1.0",
"@homarr/definitions": "workspace:^0.1.0",
"@homarr/form": "workspace:^0.1.0",
@@ -31,16 +32,18 @@
"@homarr/ui": "workspace:^0.1.0",
"@homarr/validation": "workspace:^0.1.0",
"@homarr/widgets": "workspace:^0.1.0",
- "@mantine/colors-generator": "^7.10.0",
- "@mantine/hooks": "^7.10.0",
- "@mantine/modals": "^7.10.0",
- "@mantine/tiptap": "^7.10.0",
+ "@mantine/colors-generator": "^7.11.1",
+ "@mantine/core": "^7.11.1",
+ "@mantine/hooks": "^7.11.1",
+ "@mantine/modals": "^7.11.1",
+ "@mantine/tiptap": "^7.11.1",
"@homarr/server-settings": "workspace:^0.1.0",
"@t3-oss/env-nextjs": "^0.10.1",
- "@tanstack/react-query": "^5.40.0",
- "@tanstack/react-query-devtools": "^5.40.0",
- "@tanstack/react-query-next-experimental": "5.40.0",
- "@trpc/client": "11.0.0-rc.377",
+ "@tanstack/react-query": "^5.51.1",
+ "@tanstack/react-query-devtools": "^5.51.1",
+ "@tanstack/react-query-next-experimental": "5.51.1",
+ "@tabler/icons-react": "^3.10.0",
+ "@trpc/client": "next",
"@trpc/next": "next",
"@trpc/react-query": "next",
"@trpc/server": "next",
@@ -48,17 +51,21 @@
"@xterm/addon-fit": "0.10.0",
"@xterm/xterm": "^5.5.0",
"chroma-js": "^2.4.2",
+ "clsx": "^2.1.1",
"dayjs": "^1.11.11",
"dotenv": "^16.4.5",
- "flag-icons": "^7.2.2",
- "glob": "^10.4.1",
- "jotai": "^2.8.2",
- "next": "^14.2.3",
+ "flag-icons": "^7.2.3",
+ "glob": "^11.0.0",
+ "jotai": "^2.9.0",
+ "mantine-react-table": "2.0.0-beta.5",
+ "next": "^14.2.5",
"postcss-preset-mantine": "^1.15.0",
- "react": "18.3.1",
- "react-dom": "18.3.1",
+ "prismjs": "^1.29.0",
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1",
"react-error-boundary": "^4.0.13",
- "sass": "^1.77.2",
+ "react-simple-code-editor": "^0.14.1",
+ "sass": "^1.77.8",
"superjson": "2.2.1",
"use-deep-compare-effect": "^1.8.1"
},
@@ -67,22 +74,15 @@
"@homarr/prettier-config": "workspace:^0.1.0",
"@homarr/tsconfig": "workspace:^0.1.0",
"@types/chroma-js": "2.4.4",
- "@types/node": "^20.12.12",
+ "@types/node": "^20.14.10",
+ "@types/prismjs": "^1.26.4",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"concurrently": "^8.2.2",
- "eslint": "^8.57.0",
- "prettier": "^3.2.5",
- "tsx": "4.11.0",
- "typescript": "^5.4.5"
- },
- "eslintConfig": {
- "root": true,
- "extends": [
- "@homarr/eslint-config/base",
- "@homarr/eslint-config/nextjs",
- "@homarr/eslint-config/react"
- ]
+ "eslint": "^9.7.0",
+ "node-loader": "^2.0.0",
+ "prettier": "^3.3.2",
+ "typescript": "^5.5.3"
},
"prettier": "@homarr/prettier-config"
}
diff --git a/apps/nextjs/public/images/apps/imdb.png b/apps/nextjs/public/images/apps/imdb.png
new file mode 100644
index 000000000..9565159a4
Binary files /dev/null and b/apps/nextjs/public/images/apps/imdb.png differ
diff --git a/apps/nextjs/public/images/apps/lidarr.svg b/apps/nextjs/public/images/apps/lidarr.svg
new file mode 100644
index 000000000..41c5fb58a
--- /dev/null
+++ b/apps/nextjs/public/images/apps/lidarr.svg
@@ -0,0 +1,25 @@
+
+
\ No newline at end of file
diff --git a/apps/nextjs/public/images/apps/radarr.svg b/apps/nextjs/public/images/apps/radarr.svg
new file mode 100644
index 000000000..93a4c9232
--- /dev/null
+++ b/apps/nextjs/public/images/apps/radarr.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/nextjs/public/images/apps/readarr.svg b/apps/nextjs/public/images/apps/readarr.svg
new file mode 100644
index 000000000..faae05f79
--- /dev/null
+++ b/apps/nextjs/public/images/apps/readarr.svg
@@ -0,0 +1 @@
+
diff --git a/apps/nextjs/public/images/apps/sonarr.svg b/apps/nextjs/public/images/apps/sonarr.svg
new file mode 100644
index 000000000..86c9243db
--- /dev/null
+++ b/apps/nextjs/public/images/apps/sonarr.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/nextjs/public/images/apps/the-tvdb.svg b/apps/nextjs/public/images/apps/the-tvdb.svg
new file mode 100644
index 000000000..b23711d36
--- /dev/null
+++ b/apps/nextjs/public/images/apps/the-tvdb.svg
@@ -0,0 +1,9 @@
+
+
\ No newline at end of file
diff --git a/apps/nextjs/public/images/apps/tmdb.png b/apps/nextjs/public/images/apps/tmdb.png
new file mode 100644
index 000000000..9f983b883
Binary files /dev/null and b/apps/nextjs/public/images/apps/tmdb.png differ
diff --git a/apps/nextjs/public/images/apps/truenas.svg b/apps/nextjs/public/images/apps/truenas.svg
new file mode 100644
index 000000000..c3d96ff70
--- /dev/null
+++ b/apps/nextjs/public/images/apps/truenas.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/nextjs/public/images/apps/unraid-alt.svg b/apps/nextjs/public/images/apps/unraid-alt.svg
new file mode 100644
index 000000000..7d695dadc
--- /dev/null
+++ b/apps/nextjs/public/images/apps/unraid-alt.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx b/apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx
index d0345ec72..555862a51 100644
--- a/apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx
+++ b/apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx
@@ -12,6 +12,8 @@ import { useScopedI18n } from "@homarr/translation/client";
import type { z } from "@homarr/validation";
import { validation } from "@homarr/validation";
+import { revalidatePathActionAsync } from "~/app/revalidatePathAction";
+
export const LoginForm = () => {
const t = useScopedI18n("user");
const router = useRouter();
@@ -32,7 +34,7 @@ export const LoginForm = () => {
redirect: false,
callbackUrl: "/",
})
- .then((response) => {
+ .then(async (response) => {
if (!response?.ok || response.error) {
throw response?.error;
}
@@ -41,6 +43,7 @@ export const LoginForm = () => {
title: t("action.login.notification.success.title"),
message: t("action.login.notification.success.message"),
});
+ await revalidatePathActionAsync("/");
router.push("/");
})
.catch((error: Error | string) => {
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_context.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_context.tsx
index 808759af1..346baff75 100644
--- a/apps/nextjs/src/app/[locale]/boards/(content)/_context.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/_context.tsx
@@ -49,7 +49,6 @@ export const BoardProvider = ({
useEffect(() => {
setReadySections((previous) => previous.filter((id) => data.sections.some((section) => section.id === id)));
- // eslint-disable-next-line react-hooks/exhaustive-deps
}, [data.sections.length, setReadySections]);
const markAsReady = useCallback((id: string) => {
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx
index bf68bb902..e3c87aa05 100644
--- a/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx
@@ -33,6 +33,7 @@ export const generateColors = (hex: string) => {
return rgbaColors.map((color) => {
return (
"#" +
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
color
.split("(")[1]!
.replaceAll(" ", "")
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access.tsx
deleted file mode 100644
index 5739e98b6..000000000
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Group, Stack, Tabs } from "@mantine/core";
-import { IconUser, IconUserDown, IconUsersGroup } from "@tabler/icons-react";
-
-import type { RouterOutputs } from "@homarr/api";
-import { clientApi } from "@homarr/api/client";
-import { useScopedI18n } from "@homarr/translation/client";
-import type { TablerIcon } from "@homarr/ui";
-import { CountBadge } from "@homarr/ui";
-
-import type { Board } from "../../_types";
-import { GroupsForm } from "./_access/group-access";
-import { InheritTable } from "./_access/inherit-access";
-import { UsersForm } from "./_access/user-access";
-
-interface Props {
- board: Board;
- initialPermissions: RouterOutputs["board"]["getBoardPermissions"];
-}
-
-export const AccessSettingsContent = ({ board, initialPermissions }: Props) => {
- const { data: permissions } = clientApi.board.getBoardPermissions.useQuery(
- {
- id: board.id,
- },
- {
- initialData: initialPermissions,
- refetchOnMount: false,
- refetchOnWindowFocus: false,
- refetchOnReconnect: false,
- },
- );
-
- const [counts, setCounts] = useState({
- user: initialPermissions.userPermissions.length + (board.creator ? 1 : 0),
- group: initialPermissions.groupPermissions.length,
- });
-
- return (
-
-
-
-
-
-
-
-
-
-
- setCounts(({ user, ...others }) => ({
- user: callback(user),
- ...others,
- }))
- }
- />
-
-
-
-
- setCounts(({ group, ...others }) => ({
- group: callback(group),
- ...others,
- }))
- }
- />
-
-
-
-
-
-
-
- );
-};
-
-interface TabItemProps {
- value: "user" | "group" | "inherited";
- count: number;
- icon: TablerIcon;
-}
-
-const TabItem = ({ value, icon: Icon, count }: TabItemProps) => {
- const t = useScopedI18n("board.setting.section.access.permission");
-
- return (
- }>
-
- {t(`tab.${value}`)}
-
-
-
- );
-};
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/form.ts b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/form.ts
deleted file mode 100644
index 08520b9d5..000000000
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/form.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { BoardPermission } from "@homarr/definitions";
-import { createFormContext } from "@homarr/form";
-
-export interface BoardAccessFormType {
- items: {
- itemId: string;
- permission: BoardPermission;
- }[];
-}
-
-export const [FormProvider, useFormContext, useForm] = createFormContext();
-
-export type OnCountChange = (callback: (prev: number) => number) => void;
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/inherit-access.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/inherit-access.tsx
deleted file mode 100644
index d887ee696..000000000
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/inherit-access.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Stack, Table, TableTbody, TableTh, TableThead, TableTr } from "@mantine/core";
-
-import type { RouterOutputs } from "@homarr/api";
-import { getPermissionsWithChildren } from "@homarr/definitions";
-import type { BoardPermission, GroupPermissionKey } from "@homarr/definitions";
-import { useScopedI18n } from "@homarr/translation/client";
-
-import { BoardAccessDisplayRow } from "./board-access-table-rows";
-import { GroupItemContent } from "./group-access";
-
-export interface InheritTableProps {
- initialPermissions: RouterOutputs["board"]["getBoardPermissions"];
-}
-
-const mapPermissions = {
- "board-full-access": "board-full",
- "board-modify-all": "board-change",
- "board-view-all": "board-view",
-} satisfies Partial>;
-
-export const InheritTable = ({ initialPermissions }: InheritTableProps) => {
- const tPermissions = useScopedI18n("board.setting.section.access.permission");
- return (
-
-
-
-
- {tPermissions("field.user.label")}
- {tPermissions("field.permission.label")}
-
-
-
- {initialPermissions.inherited.map(({ group, permission }) => {
- const boardPermission =
- permission in mapPermissions
- ? mapPermissions[permission as keyof typeof mapPermissions]
- : getPermissionsWithChildren([permission]).includes("board-full-access")
- ? "board-full"
- : null;
-
- if (!boardPermission) {
- return null;
- }
-
- return (
- }
- permission={boardPermission}
- />
- );
- })}
-
-
-
- );
-};
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/user-access.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/user-access.tsx
deleted file mode 100644
index 8ed7e98ee..000000000
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/user-access.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import { useCallback, useState } from "react";
-import Link from "next/link";
-import { Anchor, Box, Button, Group, Stack, Table, TableTbody, TableTh, TableThead, TableTr } from "@mantine/core";
-import { IconPlus } from "@tabler/icons-react";
-
-import type { RouterOutputs } from "@homarr/api";
-import { clientApi } from "@homarr/api/client";
-import { useModalAction } from "@homarr/modals";
-import { useI18n, useScopedI18n } from "@homarr/translation/client";
-import { UserAvatar } from "@homarr/ui";
-
-import type { Board } from "../../../_types";
-import { BoardAccessDisplayRow, BoardAccessSelectRow } from "./board-access-table-rows";
-import type { BoardAccessFormType, OnCountChange } from "./form";
-import { FormProvider, useForm } from "./form";
-import { UserSelectModal } from "./user-select-modal";
-
-export interface FormProps {
- board: Pick;
- initialPermissions: RouterOutputs["board"]["getBoardPermissions"];
- onCountChange: OnCountChange;
-}
-
-export const UsersForm = ({ board, initialPermissions, onCountChange }: FormProps) => {
- const { mutate, isPending } = clientApi.board.saveUserBoardPermissions.useMutation();
- const utils = clientApi.useUtils();
- const [users, setUsers] = useState>(
- new Map(initialPermissions.userPermissions.map(({ user }) => [user.id, user])),
- );
- const { openModal } = useModalAction(UserSelectModal);
- const t = useI18n();
- const tPermissions = useScopedI18n("board.setting.section.access.permission");
- const form = useForm({
- initialValues: {
- items: initialPermissions.userPermissions.map(({ user, permission }) => ({
- itemId: user.id,
- permission,
- })),
- },
- });
-
- const handleSubmit = useCallback(
- (values: BoardAccessFormType) => {
- mutate(
- {
- id: board.id,
- permissions: values.items,
- },
- {
- onSuccess: () => {
- void utils.board.getBoardPermissions.invalidate();
- },
- },
- );
- },
- [board.id, mutate, utils.board.getBoardPermissions],
- );
-
- const handleAddUser = useCallback(() => {
- const presentUserIds = form.values.items.map(({ itemId: id }) => id);
-
- openModal({
- presentUserIds: board.creatorId ? presentUserIds.concat(board.creatorId) : presentUserIds,
- onSelect: (user) => {
- setUsers((prev) => new Map(prev).set(user.id, user));
- form.setFieldValue("items", [
- {
- itemId: user.id,
- permission: "board-view",
- },
- ...form.values.items,
- ]);
- onCountChange((prev) => prev + 1);
- },
- });
- }, [form, openModal, board.creatorId, onCountChange]);
-
- return (
-
- );
-};
-
-const UserItemContent = ({ user }: { user: User }) => {
- return (
-
-
-
-
-
- {user.name}
-
-
- );
-};
-
-interface User {
- id: string;
- name: string | null;
- image: string | null;
-}
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_board-access.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_board-access.tsx
new file mode 100644
index 000000000..c5ea88cb2
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_board-access.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import { IconEye, IconPencil, IconSettings } from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { boardPermissions, boardPermissionsMap } from "@homarr/definitions";
+import { useI18n } from "@homarr/translation/client";
+
+import { AccessSettings } from "~/components/access/access-settings";
+import type { Board } from "../../_types";
+
+interface Props {
+ board: Board;
+ initialPermissions: RouterOutputs["board"]["getBoardPermissions"];
+}
+
+export const BoardAccessSettings = ({ board, initialPermissions }: Props) => {
+ const groupMutation = clientApi.board.saveGroupBoardPermissions.useMutation();
+ const userMutation = clientApi.board.saveUserBoardPermissions.useMutation();
+ const utils = clientApi.useUtils();
+ const t = useI18n();
+
+ const { data: permissions } = clientApi.board.getBoardPermissions.useQuery(
+ {
+ id: board.id,
+ },
+ {
+ initialData: initialPermissions,
+ refetchOnMount: false,
+ refetchOnWindowFocus: false,
+ refetchOnReconnect: false,
+ },
+ );
+
+ return (
+ utils.board.getBoardPermissions.invalidate(),
+ data: permissions,
+ }}
+ groupsMutation={{
+ mutate: groupMutation.mutate,
+ isPending: groupMutation.isPending,
+ }}
+ usersMutation={{
+ mutate: userMutation.mutate,
+ isPending: userMutation.isPending,
+ }}
+ translate={(key) => t(`board.setting.section.access.permission.item.${key}.label`)}
+ permission={{
+ items: boardPermissions,
+ default: "view",
+ fullAccessGroupPermission: "board-full-all",
+ groupPermissionMapping: boardPermissionsMap,
+ icons: {
+ modify: IconPencil,
+ view: IconEye,
+ full: IconSettings,
+ },
+ }}
+ />
+ );
+};
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx
index 1748ee36b..c110651d3 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx
@@ -20,8 +20,8 @@ import type { TablerIcon } from "@homarr/ui";
import { getBoardPermissionsAsync } from "~/components/board/permissions/server";
import { ActiveTabAccordion } from "../../../../../components/active-tab-accordion";
-import { AccessSettingsContent } from "./_access";
import { BackgroundSettingsContent } from "./_background";
+import { BoardAccessSettings } from "./_board-access";
import { ColorSettingsContent } from "./_colors";
import { CustomCssSettingsContent } from "./_customCss";
import { DangerZoneSettingsContent } from "./_danger";
@@ -44,8 +44,8 @@ const getBoardAndPermissionsAsync = async (params: Props["params"]) => {
const permissions = hasFullAccess
? await api.board.getBoardPermissions({ id: board.id })
: {
- userPermissions: [],
- groupPermissions: [],
+ users: [],
+ groups: [],
inherited: [],
};
@@ -89,7 +89,7 @@ export default async function BoardSettingsPage({ params, searchParams }: Props)
{hasFullAccess && (
<>
-
+
diff --git a/apps/nextjs/src/app/[locale]/compose.tsx b/apps/nextjs/src/app/[locale]/compose.tsx
index 6997ca986..e7899c938 100644
--- a/apps/nextjs/src/app/[locale]/compose.tsx
+++ b/apps/nextjs/src/app/[locale]/compose.tsx
@@ -6,7 +6,6 @@ export const composeWrappers = (
wrappers: React.FunctionComponent[],
): React.FunctionComponent => {
return wrappers.reverse().reduce((Acc, Current): React.FunctionComponent => {
- // eslint-disable-next-line react/display-name
return (props) => (
diff --git a/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.module.css b/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.module.css
index cfadc375d..ae85132dc 100644
--- a/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.module.css
+++ b/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.module.css
@@ -1,5 +1,4 @@
.bannerContainer {
- padding: 3rem;
border-radius: 8px;
overflow: hidden;
background: linear-gradient(
diff --git a/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.tsx b/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.tsx
index 35943bcf9..cb1a3094a 100644
--- a/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.tsx
@@ -38,17 +38,17 @@ export const HeroBanner = () => {
const gridSpan = 12 / countIconGroups;
return (
-
+
-
+ <Title fz={{ base: "h4", md: "h2" }} c="dimmed">
Welcome back to your
-
-
- Homarr Dashboard
+
+
+ Homarr Board
-
+
{Array(countIconGroups)
.fill(0)
diff --git a/apps/nextjs/src/app/[locale]/manage/about/page.tsx b/apps/nextjs/src/app/[locale]/manage/about/page.tsx
index a1dadf037..3724cb668 100644
--- a/apps/nextjs/src/app/[locale]/manage/about/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/about/page.tsx
@@ -21,11 +21,12 @@ import { setStaticParamsLocale } from "next-international/server";
import { getScopedI18n, getStaticParams } from "@homarr/translation/server";
+import { homarrLogoPath } from "~/components/layout/logo/homarr-logo";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
import { createMetaTitle } from "~/metadata";
import { getPackageAttributesAsync } from "~/versions/package-reader";
import contributorsData from "../../../../../../../static-data/contributors.json";
import translatorsData from "../../../../../../../static-data/translators.json";
-import logo from "../../../../../public/logo/logo.png";
import classes from "./about.module.css";
export async function generateMetadata() {
@@ -48,9 +49,10 @@ export default async function AboutPage({ params: { locale } }: PageProps) {
const attributes = await getPackageAttributesAsync();
return (
+
-
+
Homarr
diff --git a/apps/nextjs/src/app/[locale]/manage/apps/_app-delete-button.tsx b/apps/nextjs/src/app/[locale]/manage/apps/_app-delete-button.tsx
index 0f81cde48..dd20241d3 100644
--- a/apps/nextjs/src/app/[locale]/manage/apps/_app-delete-button.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/apps/_app-delete-button.tsx
@@ -49,7 +49,7 @@ export const AppDeleteButton = ({ app }: AppDeleteButtonProps) => {
}, [app, mutate, t, openConfirmModal]);
return (
- <ActionIcon loading={isPending} variant="subtle" color="red" onClick={onClick} aria-label="Delete app">
+ <ActionIcon loading={isPending} variant="subtle" color="red" onClick={onClick} aria-label={t("title")}>
<IconTrash color="red" size={16} stroke={1.5} />
</ActionIcon>
);
diff --git a/apps/nextjs/src/app/[locale]/manage/apps/_form.tsx b/apps/nextjs/src/app/[locale]/manage/apps/_form.tsx
index 2cb6b6a47..2cf9bf9b3 100644
--- a/apps/nextjs/src/app/[locale]/manage/apps/_form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/apps/_form.tsx
@@ -36,10 +36,10 @@ export const AppForm = (props: AppFormProps) => {
return (
<form onSubmit={form.onSubmit(handleSubmit)}>
<Stack>
- <TextInput {...form.getInputProps("name")} withAsterisk label="Name" />
+ <TextInput {...form.getInputProps("name")} withAsterisk label={t("app.field.name.label")} />
<IconPicker initialValue={initialValues?.iconUrl} {...form.getInputProps("iconUrl")} />
- <Textarea {...form.getInputProps("description")} label="Description" />
- <TextInput {...form.getInputProps("href")} label="URL" />
+ <Textarea {...form.getInputProps("description")} label={t("app.field.description.label")} />
+ <TextInput {...form.getInputProps("href")} label={t("app.field.url.label")} />
<Group justify="end">
<Button variant="default" component={Link} href="/manage/apps">
diff --git a/apps/nextjs/src/app/[locale]/manage/apps/edit/[id]/page.tsx b/apps/nextjs/src/app/[locale]/manage/apps/edit/[id]/page.tsx
index eddb8bb3b..9b3551e43 100644
--- a/apps/nextjs/src/app/[locale]/manage/apps/edit/[id]/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/apps/edit/[id]/page.tsx
@@ -3,6 +3,7 @@ import { Container, Stack, Title } from "@mantine/core";
import { api } from "@homarr/api/server";
import { getI18n } from "@homarr/translation/server";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
import { AppEditForm } from "./_app-edit-form";
interface AppEditPageProps {
@@ -14,11 +15,14 @@ export default async function AppEditPage({ params }: AppEditPageProps) {
const t = await getI18n();
return (
- <Container>
- <Stack>
- <Title>{t("app.page.edit.title")}
-
-
-
+ <>
+
+
+
+ {t("app.page.edit.title")}
+
+
+
+
);
}
diff --git a/apps/nextjs/src/app/[locale]/manage/apps/new/page.tsx b/apps/nextjs/src/app/[locale]/manage/apps/new/page.tsx
index 5087a5b66..9fe1a2de6 100644
--- a/apps/nextjs/src/app/[locale]/manage/apps/new/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/apps/new/page.tsx
@@ -1,14 +1,22 @@
import { Container, Stack, Title } from "@mantine/core";
+import { getI18n } from "@homarr/translation/server";
+
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
import { AppNewForm } from "./_app-new-form";
-export default function AppNewPage() {
+export default async function AppNewPage() {
+ const t = await getI18n();
+
return (
-
-
- New app
-
-
-
+ <>
+
+
+
+ {t("app.page.create.title")}
+
+
+
+
);
}
diff --git a/apps/nextjs/src/app/[locale]/manage/apps/page.tsx b/apps/nextjs/src/app/[locale]/manage/apps/page.tsx
index 6aab6ae37..2e6983b6e 100644
--- a/apps/nextjs/src/app/[locale]/manage/apps/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/apps/page.tsx
@@ -1,36 +1,29 @@
import Link from "next/link";
-import {
- ActionIcon,
- ActionIconGroup,
- Anchor,
- Avatar,
- Button,
- Card,
- Container,
- Group,
- Stack,
- Text,
- Title,
-} from "@mantine/core";
+import { ActionIcon, ActionIconGroup, Anchor, Avatar, Card, Group, Stack, Text, Title } from "@mantine/core";
import { IconApps, IconPencil } from "@tabler/icons-react";
import type { RouterOutputs } from "@homarr/api";
import { api } from "@homarr/api/server";
-import { getI18n } from "@homarr/translation/server";
+import { getI18n, getScopedI18n } from "@homarr/translation/server";
+import { ManageContainer } from "~/components/manage/manage-container";
+import { MobileAffixButton } from "~/components/manage/mobile-affix-button";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
import { AppDeleteButton } from "./_app-delete-button";
export default async function AppsPage() {
const apps = await api.app.all();
+ const t = await getScopedI18n("app");
return (
-
+
+
- Apps
-
+ {t("page.list.title")}
+
+ {t("page.create.title")}
+
{apps.length === 0 && }
{apps.length > 0 && (
@@ -41,7 +34,7 @@ export default async function AppsPage() {
)}
-
+
);
}
@@ -49,10 +42,12 @@ interface AppCardProps {
app: RouterOutputs["app"]["all"][number];
}
-const AppCard = ({ app }: AppCardProps) => {
+const AppCard = async ({ app }: AppCardProps) => {
+ const t = await getScopedI18n("app");
+
return (
-
+
{
}}
/>
- {app.name}
+
+ {app.name}
+
{app.description && (
-
+
{app.description}
)}
{app.href && (
-
+
{app.href}
)}
@@ -85,7 +82,7 @@ const AppCard = ({ app }: AppCardProps) => {
href={`/manage/apps/edit/${app.id}`}
variant="subtle"
color="gray"
- aria-label="Edit app"
+ aria-label={t("page.edit.title")}
>
diff --git a/apps/nextjs/src/app/[locale]/manage/boards/_components/create-board-button.tsx b/apps/nextjs/src/app/[locale]/manage/boards/_components/create-board-button.tsx
index 4bd24a346..1c59db412 100644
--- a/apps/nextjs/src/app/[locale]/manage/boards/_components/create-board-button.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/boards/_components/create-board-button.tsx
@@ -1,7 +1,6 @@
"use client";
import { useCallback } from "react";
-import { Button } from "@mantine/core";
import { IconCategoryPlus } from "@tabler/icons-react";
import { clientApi } from "@homarr/api/client";
@@ -10,6 +9,7 @@ import { useI18n } from "@homarr/translation/client";
import { revalidatePathActionAsync } from "~/app/revalidatePathAction";
import { AddBoardModal } from "~/components/manage/boards/add-board-modal";
+import { MobileAffixButton } from "~/components/manage/mobile-affix-button";
interface CreateBoardButtonProps {
boardNames: string[];
@@ -37,8 +37,8 @@ export const CreateBoardButton = ({ boardNames }: CreateBoardButtonProps) => {
}, [mutateAsync, boardNames, openModal]);
return (
- } onClick={onClick} loading={isPending}>
+ } onClick={onClick} loading={isPending}>
{t("management.page.board.action.new.label")}
-
+
);
};
diff --git a/apps/nextjs/src/app/[locale]/manage/boards/page.tsx b/apps/nextjs/src/app/[locale]/manage/boards/page.tsx
index 5dc4c79d7..506af6a99 100644
--- a/apps/nextjs/src/app/[locale]/manage/boards/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/boards/page.tsx
@@ -10,6 +10,7 @@ import {
Group,
Menu,
MenuTarget,
+ Stack,
Text,
Title,
Tooltip,
@@ -22,6 +23,8 @@ import { getScopedI18n } from "@homarr/translation/server";
import { UserAvatar } from "@homarr/ui";
import { getBoardPermissionsAsync } from "~/components/board/permissions/server";
+import { ManageContainer } from "~/components/manage/manage-container";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
import { BoardCardMenuDropdown } from "./_components/board-card-menu-dropdown";
import { CreateBoardButton } from "./_components/create-board-button";
@@ -31,20 +34,23 @@ export default async function ManageBoardsPage() {
const boards = await api.board.getAllBoards();
return (
- <>
-
- {t("title")}
- board.name)} />
-
+
+
+
+
+ {t("title")}
+ board.name)} />
+
-
- {boards.map((board) => (
-
-
-
- ))}
-
-
+
+ {boards.map((board) => (
+
+
+
+ ))}
+
+
+
);
}
@@ -83,7 +89,7 @@ const BoardCard = async ({ board }: BoardCardProps) => {
{board.creator && (
- {board.creator?.name}
+ {board.creator.name}
)}
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/_components/integration-access-settings.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/_components/integration-access-settings.tsx
new file mode 100644
index 000000000..c6df1abad
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/_components/integration-access-settings.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { IconPlayerPlay, IconSelector, IconSettings } from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { integrationPermissions, integrationPermissionsMap } from "@homarr/definitions";
+import { useI18n } from "@homarr/translation/client";
+
+import { AccessSettings } from "~/components/access/access-settings";
+
+interface Props {
+ integration: RouterOutputs["integration"]["byId"];
+ initialPermissions: RouterOutputs["integration"]["getIntegrationPermissions"];
+}
+
+export const IntegrationAccessSettings = ({ integration, initialPermissions }: Props) => {
+ const t = useI18n();
+ const utils = clientApi.useUtils();
+ const { data } = clientApi.integration.getIntegrationPermissions.useQuery(
+ {
+ id: integration.id,
+ },
+ {
+ refetchOnMount: false,
+ refetchOnWindowFocus: false,
+ refetchOnReconnect: false,
+ initialData: initialPermissions,
+ },
+ );
+ const usersMutation = clientApi.integration.saveUserIntegrationPermissions.useMutation();
+ const groupsMutation = clientApi.integration.saveGroupIntegrationPermissions.useMutation();
+
+ return (
+ t(`integration.permission.${key}`)}
+ query={{
+ data,
+ invalidate: () => utils.integration.getIntegrationPermissions.invalidate(),
+ }}
+ groupsMutation={groupsMutation}
+ usersMutation={usersMutation}
+ />
+ );
+};
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/_integration-secret-card.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-card.tsx
similarity index 97%
rename from apps/nextjs/src/app/[locale]/manage/integrations/_integration-secret-card.tsx
rename to apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-card.tsx
index b23fd148a..f90b1d40f 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/_integration-secret-card.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-card.tsx
@@ -12,7 +12,7 @@ import type { RouterOutputs } from "@homarr/api";
import { integrationSecretKindObject } from "@homarr/definitions";
import { useI18n } from "@homarr/translation/client";
-import { integrationSecretIcons } from "./_integration-secret-icons";
+import { integrationSecretIcons } from "./integration-secret-icons";
dayjs.extend(relativeTime);
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/_integration-secret-icons.ts b/apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-icons.ts
similarity index 100%
rename from apps/nextjs/src/app/[locale]/manage/integrations/_integration-secret-icons.ts
rename to apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-icons.ts
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/_integration-secret-inputs.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-inputs.tsx
similarity index 92%
rename from apps/nextjs/src/app/[locale]/manage/integrations/_integration-secret-inputs.tsx
rename to apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-inputs.tsx
index f73e8516b..45f5b3156 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/_integration-secret-inputs.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-inputs.tsx
@@ -7,7 +7,7 @@ import { integrationSecretKindObject } from "@homarr/definitions";
import type { IntegrationSecretKind } from "@homarr/definitions";
import { useI18n } from "@homarr/translation/client";
-import { integrationSecretIcons } from "./_integration-secret-icons";
+import { integrationSecretIcons } from "./integration-secret-icons";
interface IntegrationSecretInputProps {
withAsterisk?: boolean;
@@ -50,7 +50,7 @@ const PrivateSecretInput = ({ kind, ...props }: IntegrationSecretInputProps) =>
}
/>
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/_integration-buttons.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/_integration-buttons.tsx
index 2f31cb169..3640dc790 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/_integration-buttons.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/_integration-buttons.tsx
@@ -56,7 +56,7 @@ export const DeleteIntegrationActionButton = ({ count, integration }: DeleteInte
},
});
}}
- aria-label="Delete integration"
+ aria-label={t("title")}
>
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/_integration-test-connection.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/_integration-test-connection.tsx
deleted file mode 100644
index 2ae512edd..000000000
--- a/apps/nextjs/src/app/[locale]/manage/integrations/_integration-test-connection.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-"use client";
-
-import { useRef, useState } from "react";
-import { Alert, Anchor, Group, Loader } from "@mantine/core";
-import { IconCheck, IconInfoCircle, IconX } from "@tabler/icons-react";
-
-import type { RouterInputs } from "@homarr/api";
-import { clientApi } from "@homarr/api/client";
-import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
-import { useI18n, useScopedI18n } from "@homarr/translation/client";
-
-interface UseTestConnectionDirtyProps {
- defaultDirty: boolean;
- initialFormValue: {
- url: string;
- secrets: { kind: string; value: string | null }[];
- };
-}
-
-export const useTestConnectionDirty = ({ defaultDirty, initialFormValue }: UseTestConnectionDirtyProps) => {
- const [isDirty, setIsDirty] = useState(defaultDirty);
- const prevFormValueRef = useRef(initialFormValue);
-
- return {
- onValuesChange: (values: typeof initialFormValue) => {
- if (isDirty) return;
-
- // If relevant values changed, set dirty
- if (
- prevFormValueRef.current.url !== values.url ||
- !prevFormValueRef.current.secrets
- .map((secret) => secret.value)
- .every((secretValue, index) => values.secrets[index]?.value === secretValue)
- ) {
- setIsDirty(true);
- return;
- }
-
- // If relevant values changed back to last tested, set not dirty
- setIsDirty(false);
- },
- isDirty,
- removeDirty: () => {
- prevFormValueRef.current = initialFormValue;
- setIsDirty(false);
- },
- };
-};
-
-interface TestConnectionProps {
- isDirty: boolean;
- removeDirty: () => void;
- integration: RouterInputs["integration"]["testConnection"] & { name: string };
-}
-
-export const TestConnection = ({ integration, removeDirty, isDirty }: TestConnectionProps) => {
- const t = useScopedI18n("integration.testConnection");
- const { mutateAsync, ...mutation } = clientApi.integration.testConnection.useMutation();
-
- return (
-
- {
- await mutateAsync(integration, {
- onSuccess: () => {
- removeDirty();
- showSuccessNotification({
- title: t("notification.success.title"),
- message: t("notification.success.message"),
- });
- },
- onError: (error) => {
- if (error.data?.zodError?.fieldErrors.url) {
- showErrorNotification({
- title: t("notification.invalidUrl.title"),
- message: t("notification.invalidUrl.message"),
- });
- return;
- }
-
- if (error.message === "SECRETS_NOT_DEFINED") {
- showErrorNotification({
- title: t("notification.notAllSecretsProvided.title"),
- message: t("notification.notAllSecretsProvided.message"),
- });
- return;
- }
-
- showErrorNotification({
- title: t("notification.commonError.title"),
- message: t("notification.commonError.message"),
- });
- },
- });
- }}
- >
- {t("action")}
-
-
-
- );
-};
-
-interface TestConnectionIconProps {
- isDirty: boolean;
- isPending: boolean;
- isSuccess: boolean;
- isError: boolean;
- size: number;
-}
-
-const TestConnectionIcon = ({ isDirty, isPending, isSuccess, isError, size }: TestConnectionIconProps) => {
- if (isPending) return ;
- if (isDirty) return null;
- if (isSuccess) return ;
- if (isError) return ;
- return null;
-};
-
-export const TestConnectionNoticeAlert = () => {
- const t = useI18n();
- return (
- }>
- {t("integration.testConnection.alertNotice")}
-
- );
-};
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form.tsx
index e1521abd2..847479ea3 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form.tsx
@@ -8,6 +8,7 @@ import type { RouterOutputs } from "@homarr/api";
import { clientApi } from "@homarr/api/client";
import { getAllSecretKindOptions, getDefaultSecretKinds } from "@homarr/definitions";
import { useZodForm } from "@homarr/form";
+import { convertIntegrationTestConnectionError } from "@homarr/integrations/client";
import { useConfirmModal } from "@homarr/modals";
import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
import { useI18n } from "@homarr/translation/client";
@@ -15,9 +16,8 @@ import type { z } from "@homarr/validation";
import { validation } from "@homarr/validation";
import { revalidatePathActionAsync } from "~/app/revalidatePathAction";
-import { SecretCard } from "../../_integration-secret-card";
-import { IntegrationSecretInput } from "../../_integration-secret-inputs";
-import { TestConnection, TestConnectionNoticeAlert, useTestConnectionDirty } from "../../_integration-test-connection";
+import { SecretCard } from "../../_components/secrets/integration-secret-card";
+import { IntegrationSecretInput } from "../../_components/secrets/integration-secret-inputs";
interface EditIntegrationForm {
integration: RouterOutputs["integration"]["byId"];
@@ -30,30 +30,23 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
getAllSecretKindOptions(integration.kind).find((secretKinds) =>
integration.secrets.every((secret) => secretKinds.includes(secret.kind)),
) ?? getDefaultSecretKinds(integration.kind);
- const initialFormValues = {
- name: integration.name,
- url: integration.url,
- secrets: secretsKinds.map((kind) => ({
- kind,
- value: integration.secrets.find((secret) => secret.kind === kind)?.value ?? "",
- })),
- };
- const { isDirty, onValuesChange, removeDirty } = useTestConnectionDirty({
- defaultDirty: true,
- initialFormValue: initialFormValues,
- });
const router = useRouter();
const form = useZodForm(validation.integration.update.omit({ id: true }), {
- initialValues: initialFormValues,
- onValuesChange,
+ initialValues: {
+ name: integration.name,
+ url: integration.url,
+ secrets: secretsKinds.map((kind) => ({
+ kind,
+ value: integration.secrets.find((secret) => secret.kind === kind)?.value ?? "",
+ })),
+ },
});
const { mutateAsync, isPending } = clientApi.integration.update.useMutation();
const secretsMap = new Map(integration.secrets.map((secret) => [secret.kind, secret]));
const handleSubmitAsync = async (values: FormType) => {
- if (isDirty) return;
await mutateAsync(
{
id: integration.id,
@@ -71,7 +64,19 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
});
void revalidatePathActionAsync("/manage/integrations").then(() => router.push("/manage/integrations"));
},
- onError: () => {
+ onError: (error) => {
+ const testConnectionError = convertIntegrationTestConnectionError(error.data?.error);
+
+ if (testConnectionError) {
+ showErrorNotification({
+ title: t(`integration.testConnection.notification.${testConnectionError.key}.title`),
+ message: testConnectionError.message
+ ? testConnectionError.message
+ : t(`integration.testConnection.notification.${testConnectionError.key}.message`),
+ });
+ return;
+ }
+
showErrorNotification({
title: t("integration.page.edit.notification.error.title"),
message: t("integration.page.edit.notification.error.message"),
@@ -84,8 +89,6 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
return (
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/page.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/page.tsx
index bebf34626..a2b557522 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/page.tsx
@@ -1,9 +1,11 @@
-import { Container, Group, Stack, Title } from "@mantine/core";
+import { Container, Fieldset, Group, Stack, Title } from "@mantine/core";
import { api } from "@homarr/api/server";
import { getIntegrationName } from "@homarr/definitions";
-import { getScopedI18n } from "@homarr/translation/server";
+import { getI18n, getScopedI18n } from "@homarr/translation/server";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
+import { IntegrationAccessSettings } from "../../_components/integration-access-settings";
import { IntegrationAvatar } from "../../_integration-avatar";
import { EditIntegrationForm } from "./_integration-edit-form";
@@ -12,18 +14,28 @@ interface EditIntegrationPageProps {
}
export default async function EditIntegrationPage({ params }: EditIntegrationPageProps) {
- const t = await getScopedI18n("integration.page.edit");
+ const editT = await getScopedI18n("integration.page.edit");
+ const t = await getI18n();
const integration = await api.integration.byId({ id: params.id });
+ const integrationPermissions = await api.integration.getIntegrationPermissions({ id: integration.id });
return (
-
-
-
-
- {t("title", { name: getIntegrationName(integration.kind) })}
-
-
-
-
+ <>
+
+
+
+
+
+ {editT("title", { name: getIntegrationName(integration.kind) })}
+
+
+
+ {t("permission.title")}
+
+
+
+
);
}
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-dropdown.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-dropdown.tsx
index 8f03a39ff..b2700ff70 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-dropdown.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-dropdown.tsx
@@ -3,7 +3,7 @@
import type { ChangeEvent } from "react";
import React, { useMemo, useState } from "react";
import Link from "next/link";
-import { Group, Menu, ScrollArea, Stack, Text, TextInput } from "@mantine/core";
+import { Flex, Group, Menu, ScrollArea, Text, TextInput } from "@mantine/core";
import { IconSearch } from "@tabler/icons-react";
import { getIntegrationName, integrationKinds } from "@homarr/definitions";
@@ -25,7 +25,7 @@ export const IntegrationCreateDropdownContent = () => {
);
return (
-
+
}
placeholder={t("integration.page.list.search")}
@@ -47,6 +47,6 @@ export const IntegrationCreateDropdownContent = () => {
) : (
{t("common.noResults")}
)}
-
+
);
};
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-form.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-form.tsx
index 524b2efb9..d7ab653e1 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-form.tsx
@@ -10,13 +10,13 @@ import type { IntegrationKind, IntegrationSecretKind } from "@homarr/definitions
import { getAllSecretKindOptions } from "@homarr/definitions";
import type { UseFormReturnType } from "@homarr/form";
import { useZodForm } from "@homarr/form";
+import { convertIntegrationTestConnectionError } from "@homarr/integrations/client";
import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
import { useI18n, useScopedI18n } from "@homarr/translation/client";
import type { z } from "@homarr/validation";
import { validation } from "@homarr/validation";
-import { IntegrationSecretInput } from "../_integration-secret-inputs";
-import { TestConnection, TestConnectionNoticeAlert, useTestConnectionDirty } from "../_integration-test-connection";
+import { IntegrationSecretInput } from "../_components/secrets/integration-secret-inputs";
import { revalidatePathActionAsync } from "../../../../revalidatePathAction";
interface NewIntegrationFormProps {
@@ -28,27 +28,20 @@ interface NewIntegrationFormProps {
export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) => {
const t = useI18n();
const secretKinds = getAllSecretKindOptions(searchParams.kind);
- const initialFormValues = {
- name: searchParams.name ?? "",
- url: searchParams.url ?? "",
- secrets: secretKinds[0].map((kind) => ({
- kind,
- value: "",
- })),
- };
- const { isDirty, onValuesChange, removeDirty } = useTestConnectionDirty({
- defaultDirty: true,
- initialFormValue: initialFormValues,
- });
const router = useRouter();
const form = useZodForm(validation.integration.create.omit({ kind: true }), {
- initialValues: initialFormValues,
- onValuesChange,
+ initialValues: {
+ name: searchParams.name ?? "",
+ url: searchParams.url ?? "",
+ secrets: secretKinds[0].map((kind) => ({
+ kind,
+ value: "",
+ })),
+ },
});
const { mutateAsync, isPending } = clientApi.integration.create.useMutation();
const handleSubmitAsync = async (values: FormType) => {
- if (isDirty) return;
await mutateAsync(
{
kind: searchParams.kind,
@@ -62,7 +55,19 @@ export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) =>
});
void revalidatePathActionAsync("/manage/integrations").then(() => router.push("/manage/integrations"));
},
- onError: () => {
+ onError: (error) => {
+ const testConnectionError = convertIntegrationTestConnectionError(error.data?.error);
+
+ if (testConnectionError) {
+ showErrorNotification({
+ title: t(`integration.testConnection.notification.${testConnectionError.key}.title`),
+ message: testConnectionError.message
+ ? testConnectionError.message
+ : t(`integration.testConnection.notification.${testConnectionError.key}.message`),
+ });
+ return;
+ }
+
showErrorNotification({
title: t("integration.page.create.notification.error.title"),
message: t("integration.page.create.notification.error.message"),
@@ -75,8 +80,6 @@ export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) =>
return (
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/new/page.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/new/page.tsx
index 23eb474f5..7d4b436d2 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/new/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/new/page.tsx
@@ -7,6 +7,7 @@ import { getScopedI18n } from "@homarr/translation/server";
import type { validation } from "@homarr/validation";
import { z } from "@homarr/validation";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
import { IntegrationAvatar } from "../_integration-avatar";
import { NewIntegrationForm } from "./_integration-new-form";
@@ -17,24 +18,28 @@ interface NewIntegrationPageProps {
}
export default async function IntegrationsNewPage({ searchParams }: NewIntegrationPageProps) {
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const result = z.enum([integrationKinds[0]!, ...integrationKinds.slice(1)]).safeParse(searchParams.kind);
if (!result.success) {
notFound();
}
- const t = await getScopedI18n("integration.page.create");
+ const tCreate = await getScopedI18n("integration.page.create");
const currentKind = result.data;
return (
-
-
-
-
- {t("title", { name: getIntegrationName(currentKind) })}
-
-
-
-
+ <>
+
+
+
+
+
+ {tCreate("title", { name: getIntegrationName(currentKind) })}
+
+
+
+
+
);
}
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/page.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/page.tsx
index 07b4c894d..f3d1cc0af 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/page.tsx
@@ -1,3 +1,5 @@
+import { Fragment } from "react";
+import type { PropsWithChildren } from "react";
import Link from "next/link";
import {
AccordionControl,
@@ -5,9 +7,11 @@ import {
AccordionPanel,
ActionIcon,
ActionIconGroup,
+ Affix,
Anchor,
+ Box,
Button,
- Container,
+ Divider,
Group,
Menu,
MenuDropdown,
@@ -22,7 +26,7 @@ import {
Text,
Title,
} from "@mantine/core";
-import { IconChevronDown, IconPencil } from "@tabler/icons-react";
+import { IconChevronDown, IconChevronUp, IconPencil } from "@tabler/icons-react";
import type { RouterOutputs } from "@homarr/api";
import { api } from "@homarr/api/server";
@@ -32,6 +36,8 @@ import { getIntegrationName } from "@homarr/definitions";
import { getScopedI18n } from "@homarr/translation/server";
import { CountBadge } from "@homarr/ui";
+import { ManageContainer } from "~/components/manage/manage-container";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
import { ActiveTabAccordion } from "../../../../components/active-tab-accordion";
import { IntegrationAvatar } from "./_integration-avatar";
import { DeleteIntegrationActionButton } from "./_integration-buttons";
@@ -48,26 +54,48 @@ export default async function IntegrationsPage({ searchParams }: IntegrationsPag
const t = await getScopedI18n("integration");
return (
-
+
+
{t("page.list.title")}
-
+
+
+
+
+
+ }>{t("action.create")}
+
+
+
+
+
+
+
+
+ }>{t("action.create")}
+
+
+
-
+
);
}
+const IntegrationSelectMenu = ({ children }: PropsWithChildren) => {
+ return (
+
+ );
+};
+
interface IntegrationListProps {
integrations: RouterOutputs["integration"]["all"];
activeTab?: IntegrationKind;
@@ -82,6 +110,7 @@ const IntegrationList = async ({ integrations, activeTab }: IntegrationListProps
const grouppedIntegrations = integrations.reduce(
(acc, integration) => {
+ // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
if (!acc[integration.kind]) {
acc[integration.kind] = [];
}
@@ -104,7 +133,7 @@ const IntegrationList = async ({ integrations, activeTab }: IntegrationListProps
-
+
{t("field.name.label")}
@@ -129,7 +158,7 @@ const IntegrationList = async ({ integrations, activeTab }: IntegrationListProps
href={`/manage/integrations/edit/${integration.id}`}
variant="subtle"
color="gray"
- aria-label="Edit integration"
+ aria-label={t("page.edit.title", { name: getIntegrationName(integration.kind) })}
>
@@ -141,6 +170,34 @@ const IntegrationList = async ({ integrations, activeTab }: IntegrationListProps
))}
+
+
+ {integrations.map((integration, index) => (
+
+ {index !== 0 && }
+
+
+ {integration.name}
+
+
+
+
+
+
+
+
+ {integration.url}
+
+
+
+ ))}
+
))}
diff --git a/apps/nextjs/src/app/[locale]/manage/layout.tsx b/apps/nextjs/src/app/[locale]/manage/layout.tsx
index 63e964b29..bcb5990e0 100644
--- a/apps/nextjs/src/app/[locale]/manage/layout.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/layout.tsx
@@ -14,6 +14,7 @@ import {
IconMailForward,
IconPlug,
IconQuestionMark,
+ IconReport,
IconSettings,
IconTool,
IconUser,
@@ -86,6 +87,11 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
icon: IconLogs,
href: "/manage/tools/logs",
},
+ {
+ label: t("items.tools.items.tasks"),
+ icon: IconReport,
+ href: "/manage/tools/tasks",
+ },
],
},
{
diff --git a/apps/nextjs/src/app/[locale]/manage/page.tsx b/apps/nextjs/src/app/[locale]/manage/page.tsx
index 711a2e3a3..4ee83be77 100644
--- a/apps/nextjs/src/app/[locale]/manage/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/page.tsx
@@ -5,6 +5,7 @@ import { IconArrowRight } from "@tabler/icons-react";
import { api } from "@homarr/api/server";
import { getScopedI18n } from "@homarr/translation/server";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
import { createMetaTitle } from "~/metadata";
import { HeroBanner } from "./_components/hero-banner";
@@ -36,13 +37,13 @@ export default async function ManagementPage() {
},
{
count: statistics.countUsers,
- href: "/manage/boards",
+ href: "/manage/users",
subtitle: t("statisticLabel.authentication"),
title: t("statistic.createUser"),
},
{
count: statistics.countInvites,
- href: "/manage/boards",
+ href: "/manage/users/invites",
subtitle: t("statisticLabel.authentication"),
title: t("statistic.createInvite"),
},
@@ -67,13 +68,14 @@ export default async function ManagementPage() {
];
return (
<>
+
{links.map((link, index) => (
-
-
+
+
{link.count}
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/_components/analytics.settings.tsx b/apps/nextjs/src/app/[locale]/manage/settings/_components/analytics.settings.tsx
index 7ac93b917..fe10331c9 100644
--- a/apps/nextjs/src/app/[locale]/manage/settings/_components/analytics.settings.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/settings/_components/analytics.settings.tsx
@@ -109,7 +109,9 @@ const SwitchSetting = ({
{title}
- {text}
+
+ {text}
+
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/page.tsx b/apps/nextjs/src/app/[locale]/manage/settings/page.tsx
index bf5c92f34..c90261c37 100644
--- a/apps/nextjs/src/app/[locale]/manage/settings/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/settings/page.tsx
@@ -3,6 +3,7 @@ import { Stack, Title } from "@mantine/core";
import { api } from "@homarr/api/server";
import { getScopedI18n } from "@homarr/translation/server";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
import { AnalyticsSettings } from "./_components/analytics.settings";
export async function generateMetadata() {
@@ -18,9 +19,12 @@ export default async function SettingsPage() {
const serverSettings = await api.serverSettings.getAll();
const t = await getScopedI18n("management.page.settings");
return (
-
- {t("title")}
-
-
+ <>
+
+
+ {t("title")}
+
+
+
);
}
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/docker/docker-table.tsx b/apps/nextjs/src/app/[locale]/manage/tools/docker/docker-table.tsx
new file mode 100644
index 000000000..53643a93e
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/tools/docker/docker-table.tsx
@@ -0,0 +1,203 @@
+"use client";
+
+import type { MantineColor } from "@mantine/core";
+import { Avatar, Badge, Box, Button, Group, Text } from "@mantine/core";
+import { IconPlayerPlay, IconPlayerStop, IconRotateClockwise, IconTrash } from "@tabler/icons-react";
+import type { MRT_ColumnDef } from "mantine-react-table";
+import { MantineReactTable, useMantineReactTable } from "mantine-react-table";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { useTimeAgo } from "@homarr/common";
+import type { DockerContainerState } from "@homarr/definitions";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import type { TranslationFunction } from "@homarr/translation";
+import { useI18n, useScopedI18n } from "@homarr/translation/client";
+import type { TablerIcon } from "@homarr/ui";
+import { OverflowBadge } from "@homarr/ui";
+
+const createColumns = (
+ t: TranslationFunction,
+): MRT_ColumnDef[] => [
+ {
+ accessorKey: "name",
+ header: t("docker.field.name.label"),
+ Cell({ renderedCellValue, row }) {
+ return (
+
+
+ {row.original.name.at(0)?.toUpperCase()}
+
+ {renderedCellValue}
+
+ );
+ },
+ },
+ {
+ accessorKey: "state",
+ header: t("docker.field.state.label"),
+ size: 120,
+ Cell({ cell }) {
+ return ;
+ },
+ },
+ {
+ accessorKey: "image",
+ header: t("docker.field.containerImage.label"),
+ maxSize: 200,
+ Cell({ renderedCellValue }) {
+ return (
+
+ {renderedCellValue}
+
+ );
+ },
+ },
+ {
+ accessorKey: "ports",
+ header: t("docker.field.ports.label"),
+ Cell({ cell }) {
+ return (
+ port.PrivatePort.toString())} />
+ );
+ },
+ },
+];
+
+export function DockerTable(initialData: RouterOutputs["docker"]["getContainers"]) {
+ const t = useI18n();
+ const tDocker = useScopedI18n("docker");
+ const { data } = clientApi.docker.getContainers.useQuery(undefined, {
+ initialData,
+ refetchOnMount: false,
+ refetchOnWindowFocus: false,
+ refetchOnReconnect: false,
+ });
+ const relativeTime = useTimeAgo(data.timestamp);
+ const table = useMantineReactTable({
+ data: data.containers,
+ enableDensityToggle: false,
+ enableColumnActions: false,
+ enableColumnFilters: false,
+ enablePagination: false,
+ enableRowSelection: true,
+ positionToolbarAlertBanner: "top",
+ enableTableFooter: false,
+ enableBottomToolbar: false,
+ positionGlobalFilter: "right",
+ mantineSearchTextInputProps: {
+ placeholder: tDocker("table.search", { count: data.containers.length }),
+ style: { minWidth: 300 },
+ autoFocus: true,
+ },
+
+ initialState: { density: "xs", showGlobalFilter: true },
+ renderToolbarAlertBannerContent: ({ groupedAlert, table }) => {
+ return (
+
+ {groupedAlert}
+
+ {tDocker("table.selected", {
+ selectCount: table.getSelectedRowModel().rows.length,
+ totalCount: table.getRowCount(),
+ })}
+
+ row.original.id)} />
+
+ );
+ },
+
+ columns: createColumns(t),
+ });
+
+ return (
+ <>
+ {tDocker("table.updated", { when: relativeTime })}
+
+
+ );
+}
+
+interface ContainerActionBarProps {
+ selectedIds: string[];
+}
+
+const ContainerActionBar = ({ selectedIds }: ContainerActionBarProps) => {
+ return (
+
+
+
+
+
+
+ );
+};
+
+interface ContainerActionBarButtonProps {
+ icon: TablerIcon;
+ color: MantineColor;
+ action: "start" | "stop" | "restart" | "remove";
+ selectedIds: string[];
+}
+
+const ContainerActionBarButton = (props: ContainerActionBarButtonProps) => {
+ const t = useScopedI18n("docker.action");
+ const { mutateAsync, isPending } = clientApi.docker[`${props.action}All`].useMutation();
+ const utils = clientApi.useUtils();
+
+ const handleClickAsync = async () => {
+ await mutateAsync(
+ { ids: props.selectedIds },
+ {
+ async onSettled() {
+ await utils.docker.getContainers.invalidate();
+ },
+ onSuccess() {
+ showSuccessNotification({
+ title: t(`${props.action}.notification.success.title`),
+ message: t(`${props.action}.notification.success.message`),
+ });
+ },
+ onError() {
+ showErrorNotification({
+ title: t(`${props.action}.notification.error.title`),
+ message: t(`${props.action}.notification.error.message`),
+ });
+ },
+ },
+ );
+ };
+
+ return (
+ }
+ color={props.color}
+ onClick={handleClickAsync}
+ loading={isPending}
+ variant="light"
+ radius="md"
+ >
+ {t(`${props.action}.label`)}
+
+ );
+};
+
+const containerStates = {
+ created: "cyan",
+ running: "green",
+ paused: "yellow",
+ restarting: "orange",
+ exited: "red",
+ removing: "pink",
+ dead: "dark",
+} satisfies Record;
+
+const ContainerStateBadge = ({ state }: { state: DockerContainerState }) => {
+ const t = useScopedI18n("docker.field.state.option");
+
+ return (
+
+ {t(state)}
+
+ );
+};
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/docker/page.tsx b/apps/nextjs/src/app/[locale]/manage/tools/docker/page.tsx
new file mode 100644
index 000000000..c9054efe2
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/tools/docker/page.tsx
@@ -0,0 +1,22 @@
+import { Stack, Title } from "@mantine/core";
+
+import { api } from "@homarr/api/server";
+import { getScopedI18n } from "@homarr/translation/server";
+
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
+import { DockerTable } from "./docker-table";
+
+export default async function DockerPage() {
+ const { containers, timestamp } = await api.docker.getContainers();
+ const tDocker = await getScopedI18n("docker");
+
+ return (
+ <>
+
+
+ {tDocker("title")}
+
+
+
+ );
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/logs/page.tsx b/apps/nextjs/src/app/[locale]/manage/tools/logs/page.tsx
index 4b6373764..7822da49c 100644
--- a/apps/nextjs/src/app/[locale]/manage/tools/logs/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/tools/logs/page.tsx
@@ -6,6 +6,7 @@ import "@xterm/xterm/css/xterm.css";
import dynamic from "next/dynamic";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
import { fullHeightWithoutHeaderAndFooter } from "~/constants";
import { createMetaTitle } from "~/metadata";
@@ -23,8 +24,11 @@ const ClientSideTerminalComponent = dynamic(() => import("./terminal"), {
export default function LogsManagementPage() {
return (
-
-
-
+ <>
+
+
+
+
+
);
}
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/tasks/_components/jobs-list.tsx b/apps/nextjs/src/app/[locale]/manage/tools/tasks/_components/jobs-list.tsx
new file mode 100644
index 000000000..9ebbba9c1
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/tools/tasks/_components/jobs-list.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import React from "react";
+import { ActionIcon, Badge, Card, Group, Stack, Text } from "@mantine/core";
+import { useListState } from "@mantine/hooks";
+import { IconPlayerPlay } from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { useTimeAgo } from "@homarr/common";
+import type { TaskStatus } from "@homarr/cron-job-status";
+import type { TranslationKeys } from "@homarr/translation";
+import { useScopedI18n } from "@homarr/translation/client";
+
+interface JobsListProps {
+ initialJobs: RouterOutputs["cronJobs"]["getJobs"];
+}
+
+interface JobState {
+ job: JobsListProps["initialJobs"][number];
+ status: TaskStatus | null;
+}
+
+export const JobsList = ({ initialJobs }: JobsListProps) => {
+ const t = useScopedI18n("management.page.tool.tasks");
+ const [jobs, handlers] = useListState(
+ initialJobs.map((job) => ({
+ job,
+ status: null,
+ })),
+ );
+ clientApi.cronJobs.subscribeToStatusUpdates.useSubscription(undefined, {
+ onData: (data) => {
+ const jobByName = jobs.find((job) => job.job.name === data.name);
+ if (!jobByName) {
+ return;
+ }
+ handlers.applyWhere(
+ (job) => job.job.name === data.name,
+ (job) => ({ ...job, status: data }),
+ );
+ },
+ });
+ const { mutateAsync } = clientApi.cronJobs.triggerJob.useMutation();
+ const handleJobTrigger = React.useCallback(
+ async (job: JobState) => {
+ if (job.status?.status === "running") {
+ return;
+ }
+ await mutateAsync(job.job.name);
+ },
+ [mutateAsync],
+ );
+ return (
+
+ {jobs.map((job) => (
+
+
+
+
+ {t(`${job.job.name}.label` as TranslationKeys)}
+ {job.status?.status === "idle" && {t("status.idle")}}
+ {job.status?.status === "running" && {t("status.running")}}
+ {job.status?.lastExecutionStatus === "error" && {t("status.error")}}
+
+ {job.status && }
+
+
+ handleJobTrigger(job)}
+ disabled={job.status?.status === "running"}
+ variant={"default"}
+ size={"xl"}
+ radius={"xl"}
+ >
+
+
+
+
+ ))}
+
+ );
+};
+
+const TimeAgo = ({ timestamp }: { timestamp: string }) => {
+ const timeAgo = useTimeAgo(new Date(timestamp));
+
+ return (
+
+ {timeAgo}
+
+ );
+};
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/tasks/page.tsx b/apps/nextjs/src/app/[locale]/manage/tools/tasks/page.tsx
new file mode 100644
index 000000000..834935659
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/tools/tasks/page.tsx
@@ -0,0 +1,25 @@
+import { Box, Title } from "@mantine/core";
+
+import { api } from "@homarr/api/server";
+import { getScopedI18n } from "@homarr/translation/server";
+
+import { createMetaTitle } from "~/metadata";
+import { JobsList } from "./_components/jobs-list";
+
+export async function generateMetadata() {
+ const t = await getScopedI18n("management");
+
+ return {
+ title: createMetaTitle(t("metaTitle")),
+ };
+}
+
+export default async function TasksPage() {
+ const jobs = await api.cronJobs.getJobs();
+ return (
+
+ Tasks
+
+
+ );
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-avatar-form.tsx b/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-avatar-form.tsx
index 0e819d163..4ad991bd6 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-avatar-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-avatar-form.tsx
@@ -136,6 +136,6 @@ const fileToBase64Async = async (file: File): Promise =>
new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
- reader.onload = () => resolve(reader.result?.toString() || "");
+ reader.onload = () => resolve(reader.result?.toString() ?? "");
reader.onerror = reject;
});
diff --git a/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/page.tsx b/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/page.tsx
index 82d3a6f89..3dfcfca59 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/page.tsx
@@ -35,7 +35,7 @@ export async function generateMetadata({ params }: Props) {
const t = await getScopedI18n("management.page.user.edit");
return {
- title: createMetaTitle(t("metaTitle", { username: user?.name })),
+ title: createMetaTitle(t("metaTitle", { username: user.name })),
};
}
diff --git a/apps/nextjs/src/app/[locale]/manage/users/[userId]/layout.tsx b/apps/nextjs/src/app/[locale]/manage/users/[userId]/layout.tsx
index be6c0f71a..4821ac090 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/[userId]/layout.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/[userId]/layout.tsx
@@ -1,7 +1,6 @@
import type { PropsWithChildren } from "react";
-import Link from "next/link";
import { notFound } from "next/navigation";
-import { Button, Container, Grid, GridCol, Group, Stack, Text, Title } from "@mantine/core";
+import { Grid, GridCol, Group, Stack, Text, Title } from "@mantine/core";
import { IconSettings, IconShieldLock } from "@tabler/icons-react";
import { api } from "@homarr/api/server";
@@ -9,6 +8,8 @@ import { auth } from "@homarr/auth/next";
import { getI18n, getScopedI18n } from "@homarr/translation/server";
import { UserAvatar } from "@homarr/ui";
+import { ManageContainer } from "~/components/manage/manage-container";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
import { catchTrpcNotFound } from "~/errors/trpc-not-found";
import { NavigationLink } from "../groups/[id]/_navigation";
import { canAccessUserEditPage } from "./access";
@@ -28,22 +29,24 @@ export default async function Layout({ children, params }: PropsWithChildren
+
+
-
-
-
- {user.name}
- {t("user.name")}
-
-
- {session?.user.permissions.includes("admin") && (
-
- )}
+
+
+ {user.name}
+ {t("user.name")}
+
@@ -64,6 +67,6 @@ export default async function Layout({ children, params }: PropsWithChildren
{children}
-
+
);
}
diff --git a/apps/nextjs/src/app/[locale]/manage/users/_components/user-list.component.tsx b/apps/nextjs/src/app/[locale]/manage/users/_components/user-list.tsx
similarity index 87%
rename from apps/nextjs/src/app/[locale]/manage/users/_components/user-list.component.tsx
rename to apps/nextjs/src/app/[locale]/manage/users/_components/user-list.tsx
index 8759f5d8d..501476467 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/_components/user-list.component.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/_components/user-list.tsx
@@ -2,7 +2,7 @@
import { useMemo } from "react";
import Link from "next/link";
-import { Avatar, Button, Group, Text, ThemeIcon, Title } from "@mantine/core";
+import { Anchor, Button, Group, Text, ThemeIcon, Title } from "@mantine/core";
import { IconCheck } from "@tabler/icons-react";
import type { MRT_ColumnDef } from "mantine-react-table";
import { MantineReactTable, useMantineReactTable } from "mantine-react-table";
@@ -10,6 +10,7 @@ import { MantineReactTable, useMantineReactTable } from "mantine-react-table";
import type { RouterOutputs } from "@homarr/api";
import { clientApi } from "@homarr/api/client";
import { useI18n, useScopedI18n } from "@homarr/translation/client";
+import { UserAvatar } from "@homarr/ui";
interface UserListComponentProps {
initialUserList: RouterOutputs["user"]["getAll"];
@@ -29,12 +30,12 @@ export const UserListComponent = ({ initialUserList }: UserListComponentProps) =
header: t("user.field.username.label"),
grow: 100,
Cell: ({ renderedCellValue, row }) => (
-
-
-
+
+
+
{renderedCellValue}
-
-
+
+
),
},
{
diff --git a/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx b/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx
index eadf51ddd..bf5630f54 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx
@@ -1,17 +1,18 @@
"use client";
import { useCallback, useMemo, useState } from "react";
-import { Avatar, Card, PasswordInput, Stack, Stepper, Text, TextInput, Title } from "@mantine/core";
+import { Card, PasswordInput, Stack, Stepper, Text, TextInput, Title } from "@mantine/core";
import { IconUserCheck } from "@tabler/icons-react";
import { clientApi } from "@homarr/api/client";
import { useZodForm } from "@homarr/form";
import { showErrorNotification } from "@homarr/notifications";
import { useScopedI18n } from "@homarr/translation/client";
+import { UserAvatar } from "@homarr/ui";
import { validation, z } from "@homarr/validation";
import { createCustomErrorParams } from "@homarr/validation/form";
-import { StepperNavigationComponent } from "./stepper-navigation.component";
+import { StepperNavigationComponent } from "./stepper-navigation";
export const UserCreateStepperComponent = () => {
const t = useScopedI18n("management.page.user.create");
@@ -71,7 +72,8 @@ export const UserCreateStepperComponent = () => {
const allForms = useMemo(() => [generalForm, securityForm], [generalForm, securityForm]);
- const isCurrentFormValid = allForms[active] ? (allForms[active]!.isValid satisfies () => boolean) : () => true;
+ const activeForm = allForms[active];
+ const isCurrentFormValid = activeForm ? activeForm.isValid : () => true;
const canNavigateToNextStep = isCurrentFormValid();
const controlledGoToNextStep = useCallback(async () => {
@@ -149,7 +151,7 @@ export const UserCreateStepperComponent = () => {
- {generalForm.values.username}
+
{generalForm.values.username}
diff --git a/apps/nextjs/src/app/[locale]/manage/users/create/_components/stepper-navigation.component.tsx b/apps/nextjs/src/app/[locale]/manage/users/create/_components/stepper-navigation.tsx
similarity index 100%
rename from apps/nextjs/src/app/[locale]/manage/users/create/_components/stepper-navigation.component.tsx
rename to apps/nextjs/src/app/[locale]/manage/users/create/_components/stepper-navigation.tsx
diff --git a/apps/nextjs/src/app/[locale]/manage/users/create/page.tsx b/apps/nextjs/src/app/[locale]/manage/users/create/page.tsx
index b44c17b6c..730f3e426 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/create/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/create/page.tsx
@@ -1,5 +1,6 @@
import { getScopedI18n } from "@homarr/translation/server";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
import { createMetaTitle } from "~/metadata";
import { UserCreateStepperComponent } from "./_components/create-user-stepper";
@@ -12,5 +13,10 @@ export async function generateMetadata() {
}
export default function CreateUserPage() {
- return ;
+ return (
+ <>
+
+
+
+ );
}
diff --git a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_transfer-group-ownership.tsx b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_transfer-group-ownership.tsx
index a350b3236..28563fbc9 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_transfer-group-ownership.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_transfer-group-ownership.tsx
@@ -8,7 +8,7 @@ import { useConfirmModal, useModalAction } from "@homarr/modals";
import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
import { useI18n, useScopedI18n } from "@homarr/translation/client";
-import { UserSelectModal } from "~/app/[locale]/boards/[name]/settings/_access/user-select-modal";
+import { UserSelectModal } from "~/components/access/user-select-modal";
interface TransferGroupOwnershipProps {
group: {
diff --git a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/layout.tsx b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/layout.tsx
index e512c13b5..42d9acbc6 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/layout.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/layout.tsx
@@ -1,11 +1,12 @@
import type { PropsWithChildren } from "react";
import Link from "next/link";
-import { Button, Container, Grid, GridCol, Group, Stack, Text, Title } from "@mantine/core";
+import { Button, Grid, GridCol, Group, Stack, Text, Title } from "@mantine/core";
import { IconLock, IconSettings, IconUsersGroup } from "@tabler/icons-react";
import { api } from "@homarr/api/server";
import { getI18n, getScopedI18n } from "@homarr/translation/server";
+import { ManageContainer } from "~/components/manage/manage-container";
import { NavigationLink } from "./_navigation";
interface LayoutProps {
@@ -18,7 +19,7 @@ export default async function Layout({ children, params }: PropsWithChildren
+
@@ -54,6 +55,6 @@ export default async function Layout({ children, params }: PropsWithChildren
{children}
-
+
);
}
diff --git a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/_add-group-member.tsx b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/_add-group-member.tsx
index 2d7d2941d..adc364f99 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/_add-group-member.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/_add-group-member.tsx
@@ -1,14 +1,14 @@
"use client";
import { useCallback } from "react";
-import { Button } from "@mantine/core";
import { clientApi } from "@homarr/api/client";
import { useModalAction } from "@homarr/modals";
import { useScopedI18n } from "@homarr/translation/client";
-import { UserSelectModal } from "~/app/[locale]/boards/[name]/settings/_access/user-select-modal";
import { revalidatePathActionAsync } from "~/app/revalidatePathAction";
+import { UserSelectModal } from "~/components/access/user-select-modal";
+import { MobileAffixButton } from "~/components/manage/mobile-affix-button";
interface AddGroupMemberProps {
groupId: string;
@@ -40,8 +40,8 @@ export const AddGroupMember = ({ groupId, presentUserIds }: AddGroupMemberProps)
}, [openModal, presentUserIds, groupId, mutateAsync, tMembersAdd]);
return (
-
+
);
};
diff --git a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/page.tsx b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/page.tsx
index 7f694ba6b..e5f0fc604 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/page.tsx
@@ -24,7 +24,8 @@ export default async function GroupsDetailPage({ params, searchParams }: GroupsD
const group = await api.group.getById({ id: params.id });
const filteredMembers = searchParams.search
- ? group.members.filter((member) => member.name?.toLowerCase().includes(searchParams.search!.trim().toLowerCase()))
+ ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ group.members.filter((member) => member.name?.toLowerCase().includes(searchParams.search!.trim().toLowerCase()))
: group.members;
return (
diff --git a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/permissions/page.tsx b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/permissions/page.tsx
index 21f89c5e9..303d7b22d 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/permissions/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/permissions/page.tsx
@@ -101,7 +101,7 @@ interface PermissionRowProps {
const PermissionRow = ({ name, label, description }: PermissionRowProps) => {
return (
-
+
{label}
{description}
diff --git a/apps/nextjs/src/app/[locale]/manage/users/groups/_add-group.tsx b/apps/nextjs/src/app/[locale]/manage/users/groups/_add-group.tsx
index b28ddccd0..ed6e6dd3d 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/groups/_add-group.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/groups/_add-group.tsx
@@ -11,6 +11,7 @@ import { useI18n } from "@homarr/translation/client";
import { validation } from "@homarr/validation";
import { revalidatePathActionAsync } from "~/app/revalidatePathAction";
+import { MobileAffixButton } from "~/components/manage/mobile-affix-button";
export const AddGroup = () => {
const t = useI18n();
@@ -21,9 +22,9 @@ export const AddGroup = () => {
}, [openModal]);
return (
-
+
);
};
diff --git a/apps/nextjs/src/app/[locale]/manage/users/groups/page.tsx b/apps/nextjs/src/app/[locale]/manage/users/groups/page.tsx
index 410fe57ed..da8ce6967 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/groups/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/groups/page.tsx
@@ -1,17 +1,5 @@
import Link from "next/link";
-import {
- Anchor,
- Container,
- Group,
- Stack,
- Table,
- TableTbody,
- TableTd,
- TableTh,
- TableThead,
- TableTr,
- Title,
-} from "@mantine/core";
+import { Anchor, Group, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from "@mantine/core";
import type { RouterOutputs } from "@homarr/api";
import { api } from "@homarr/api/server";
@@ -19,6 +7,8 @@ import { getI18n } from "@homarr/translation/server";
import { SearchInput, TablePagination, UserAvatarGroup } from "@homarr/ui";
import { z } from "@homarr/validation";
+import { ManageContainer } from "~/components/manage/manage-container";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
import { AddGroup } from "./_add-group";
const searchParamsSchema = z.object({
@@ -41,7 +31,8 @@ export default async function GroupsListPage(props: GroupsListPageProps) {
const { items: groups, totalCount } = await api.group.getPaginated(searchParams);
return (
-
+
+
{t("group.title")}
@@ -72,7 +63,7 @@ export default async function GroupsListPage(props: GroupsListPageProps) {
-
+
);
}
diff --git a/apps/nextjs/src/app/[locale]/manage/users/invites/page.tsx b/apps/nextjs/src/app/[locale]/manage/users/invites/page.tsx
index 12daa10c4..1e7b8de1e 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/invites/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/invites/page.tsx
@@ -1,8 +1,14 @@
import { api } from "@homarr/api/server";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
import { InviteListComponent } from "./_components/invite-list";
export default async function InvitesOverviewPage() {
const initialInvites = await api.invite.getAll();
- return ;
+ return (
+ <>
+
+
+
+ );
}
diff --git a/apps/nextjs/src/app/[locale]/manage/users/page.tsx b/apps/nextjs/src/app/[locale]/manage/users/page.tsx
index 61a143f5a..af56c3266 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/page.tsx
@@ -1,8 +1,9 @@
import { api } from "@homarr/api/server";
import { getScopedI18n } from "@homarr/translation/server";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
import { createMetaTitle } from "~/metadata";
-import { UserListComponent } from "./_components/user-list.component";
+import { UserListComponent } from "./_components/user-list";
export async function generateMetadata() {
const t = await getScopedI18n("management.page.user.list");
@@ -14,5 +15,10 @@ export async function generateMetadata() {
export default async function UsersPage() {
const userList = await api.user.getAll();
- return ;
+ return (
+ <>
+
+
+
+ );
}
diff --git a/apps/nextjs/src/components/access/access-settings.tsx b/apps/nextjs/src/components/access/access-settings.tsx
new file mode 100644
index 000000000..c90b8a0d8
--- /dev/null
+++ b/apps/nextjs/src/components/access/access-settings.tsx
@@ -0,0 +1,189 @@
+import { useState } from "react";
+import { Group, Stack, Tabs } from "@mantine/core";
+import { IconUser, IconUserDown, IconUsersGroup } from "@tabler/icons-react";
+
+import type { GroupPermissionKey } from "@homarr/definitions";
+import { useScopedI18n } from "@homarr/translation/client";
+import type { TablerIcon } from "@homarr/ui";
+import { CountBadge } from "@homarr/ui";
+
+import { AccessProvider } from "./context";
+import type { AccessFormType } from "./form";
+import { GroupAccessForm } from "./group-access-form";
+import { InheritAccessTable } from "./inherit-access-table";
+import { UsersAccessForm } from "./user-access-form";
+
+interface GroupAccessPermission {
+ permission: TPermission;
+ group: {
+ id: string;
+ name: string;
+ };
+}
+
+interface UserAccessPermission {
+ permission: TPermission;
+ user: {
+ name: string | null;
+ image: string | null;
+ id: string;
+ };
+}
+
+interface SimpleMutation {
+ mutate: (
+ props: { entityId: string; permissions: { principalId: string; permission: TPermission }[] },
+ options: { onSuccess: () => void },
+ ) => void;
+ isPending: boolean;
+}
+
+export interface AccessQueryData {
+ inherited: GroupAccessPermission[];
+ groups: GroupAccessPermission[];
+ users: UserAccessPermission[];
+}
+
+interface Props {
+ permission: {
+ items: readonly TPermission[];
+ default: TPermission;
+ icons: Record;
+ groupPermissionMapping: Record;
+ fullAccessGroupPermission: GroupPermissionKey;
+ };
+
+ query: {
+ data: AccessQueryData;
+ invalidate: () => Promise;
+ };
+ groupsMutation: SimpleMutation;
+ usersMutation: SimpleMutation;
+ entity: {
+ id: string;
+ ownerId: string | null;
+ owner: {
+ id: string;
+ name: string | null;
+ image: string | null;
+ } | null;
+ };
+ translate: (key: TPermission) => string;
+}
+
+export const AccessSettings = ({
+ permission,
+ query,
+ groupsMutation,
+ usersMutation,
+ entity,
+ translate,
+}: Props) => {
+ const [counts, setCounts] = useState({
+ user: query.data.users.length + (entity.owner ? 1 : 0),
+ group: query.data.groups.length,
+ });
+
+ const handleGroupSubmit = (values: AccessFormType) => {
+ groupsMutation.mutate(
+ {
+ entityId: entity.id,
+ permissions: values.items,
+ },
+ {
+ onSuccess() {
+ void query.invalidate();
+ },
+ },
+ );
+ };
+
+ const handleUserSubmit = (values: AccessFormType) => {
+ usersMutation.mutate(
+ {
+ entityId: entity.id,
+ permissions: values.items,
+ },
+ {
+ onSuccess() {
+ void query.invalidate();
+ },
+ },
+ );
+ };
+
+ return (
+
+ defaultPermission={permission.default}
+ icons={permission.icons}
+ permissions={permission.items}
+ translate={translate}
+ >
+
+
+
+
+
+
+
+
+
+
+ entity={entity}
+ accessQueryData={query.data}
+ handleCountChange={(callback) =>
+ setCounts(({ user, ...others }) => ({
+ user: callback(user),
+ ...others,
+ }))
+ }
+ handleSubmit={handleUserSubmit}
+ isPending={usersMutation.isPending}
+ />
+
+
+
+
+ accessQueryData={query.data}
+ handleCountChange={(callback) =>
+ setCounts(({ group, ...others }) => ({
+ group: callback(group),
+ ...others,
+ }))
+ }
+ handleSubmit={handleGroupSubmit}
+ isPending={groupsMutation.isPending}
+ />
+
+
+
+
+ accessQueryData={query.data}
+ fullAccessGroupPermission={permission.fullAccessGroupPermission}
+ mapPermissions={permission.groupPermissionMapping}
+ />
+
+
+
+
+ );
+};
+
+interface TabItemProps {
+ value: "user" | "group" | "inherited";
+ count: number;
+ icon: TablerIcon;
+}
+
+const TabItem = ({ value, icon: Icon, count }: TabItemProps) => {
+ const t = useScopedI18n("permission");
+
+ return (
+ }>
+
+ {t(`tab.${value}`)}
+
+
+
+ );
+};
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/board-access-table-rows.tsx b/apps/nextjs/src/components/access/access-table-rows.tsx
similarity index 56%
rename from apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/board-access-table-rows.tsx
rename to apps/nextjs/src/components/access/access-table-rows.tsx
index 4a370051a..199e1343c 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/board-access-table-rows.tsx
+++ b/apps/nextjs/src/components/access/access-table-rows.tsx
@@ -1,43 +1,36 @@
-import { useCallback } from "react";
import type { ReactNode } from "react";
+import { useCallback } from "react";
import type { SelectProps } from "@mantine/core";
import { Button, Flex, Group, Select, TableTd, TableTr, Text } from "@mantine/core";
-import { IconCheck, IconEye, IconPencil, IconSettings } from "@tabler/icons-react";
+import { Icon123, IconCheck } from "@tabler/icons-react";
-import type { BoardPermission } from "@homarr/definitions";
-import { boardPermissions } from "@homarr/definitions";
-import { useI18n, useScopedI18n } from "@homarr/translation/client";
-import type { TablerIcon } from "@homarr/ui";
+import { useI18n } from "@homarr/translation/client";
-import type { OnCountChange } from "./form";
+import { useAccessContext } from "./context";
+import type { HandleCountChange } from "./form";
import { useFormContext } from "./form";
-const icons = {
- "board-change": IconPencil,
- "board-view": IconEye,
- "board-full": IconSettings,
-} satisfies Record;
-
-interface BoardAccessSelectRowProps {
+interface AccessSelectRowProps {
itemContent: ReactNode;
- permission: BoardPermission;
+ permission: string;
index: number;
- onCountChange: OnCountChange;
+ handleCountChange: HandleCountChange;
}
-export const BoardAccessSelectRow = ({ itemContent, permission, index, onCountChange }: BoardAccessSelectRowProps) => {
+export const AccessSelectRow = ({ itemContent, permission, index, handleCountChange }: AccessSelectRowProps) => {
const tRoot = useI18n();
- const tPermissions = useScopedI18n("board.setting.section.access.permission");
+ const { icons, getSelectData } = useAccessContext();
const form = useFormContext();
- const Icon = icons[permission];
const handleRemove = useCallback(() => {
form.setFieldValue(
"items",
form.values.items.filter((_, i) => i !== index),
);
- onCountChange((prev) => prev - 1);
- }, [form, index, onCountChange]);
+ handleCountChange((prev) => prev - 1);
+ }, [form, index, handleCountChange]);
+
+ const Icon = icons[permission] ?? Icon123;
return (
@@ -50,10 +43,7 @@ export const BoardAccessSelectRow = ({ itemContent, permission, index, onCountCh
leftSection={}
renderOption={RenderOption}
variant="unstyled"
- data={boardPermissions.map((permission) => ({
- value: permission,
- label: tPermissions(`item.${permission}.label`),
- }))}
+ data={getSelectData()}
{...form.getInputProps(`items.${index}.permission`)}
/>
@@ -66,14 +56,34 @@ export const BoardAccessSelectRow = ({ itemContent, permission, index, onCountCh
);
};
-interface BoardAccessDisplayRowProps {
+const iconProps = {
+ stroke: 1.5,
+ color: "currentColor",
+ opacity: 0.6,
+ size: "1rem",
+};
+
+const RenderOption: SelectProps["renderOption"] = ({ option, checked }) => {
+ const { icons } = useAccessContext();
+
+ const Icon = icons[option.value] ?? Icon123;
+ return (
+
+
+ {option.label}
+ {checked && }
+
+ );
+};
+
+interface AccessDisplayRowProps {
itemContent: ReactNode;
- permission: BoardPermission | "board-full";
+ permission: string;
}
-export const BoardAccessDisplayRow = ({ itemContent, permission }: BoardAccessDisplayRowProps) => {
- const tPermissions = useScopedI18n("board.setting.section.access.permission");
- const Icon = icons[permission];
+export const AccessDisplayRow = ({ itemContent, permission }: AccessDisplayRowProps) => {
+ const { icons, translate } = useAccessContext();
+ const Icon = icons[permission] ?? Icon123;
return (
@@ -83,27 +93,9 @@ export const BoardAccessDisplayRow = ({ itemContent, permission }: BoardAccessDi
- {tPermissions(`item.${permission}.label`)}
+ {translate(permission)}
);
};
-
-const iconProps = {
- stroke: 1.5,
- color: "currentColor",
- opacity: 0.6,
- size: "1rem",
-};
-
-const RenderOption: SelectProps["renderOption"] = ({ option, checked }) => {
- const Icon = icons[option.value as BoardPermission];
- return (
-
-
- {option.label}
- {checked && }
-
- );
-};
diff --git a/apps/nextjs/src/components/access/context.tsx b/apps/nextjs/src/components/access/context.tsx
new file mode 100644
index 000000000..259c59a42
--- /dev/null
+++ b/apps/nextjs/src/components/access/context.tsx
@@ -0,0 +1,53 @@
+import { createContext, useContext } from "react";
+import type { TablerIcon } from "@tabler/icons-react";
+
+const AccessContext = createContext<{
+ permissions: readonly string[];
+ icons: Record;
+ translate: (key: string) => string;
+ defaultPermission: string;
+} | null>(null);
+
+export const useAccessContext = () => {
+ const context = useContext(AccessContext);
+
+ if (!context) {
+ throw new Error("useAccessContext must be used within a AccessProvider");
+ }
+
+ return {
+ icons: context.icons as Record,
+ getSelectData: () =>
+ context.permissions.map((permission) => ({ value: permission, label: context.translate(permission) })),
+ permissions: context.permissions as readonly TPermission[],
+ translate: context.translate as (key: TPermission) => string,
+ defaultPermission: context.defaultPermission as TPermission,
+ };
+};
+
+export const AccessProvider = ({
+ defaultPermission,
+ permissions,
+ icons,
+ translate,
+ children,
+}: {
+ defaultPermission: TPermission;
+ permissions: readonly TPermission[];
+ icons: Record;
+ translate: (key: TPermission) => string;
+ children: React.ReactNode;
+}) => {
+ return (
+ string,
+ }}
+ >
+ {children}
+
+ );
+};
diff --git a/apps/nextjs/src/components/access/form.ts b/apps/nextjs/src/components/access/form.ts
new file mode 100644
index 000000000..39f5a3070
--- /dev/null
+++ b/apps/nextjs/src/components/access/form.ts
@@ -0,0 +1,12 @@
+import { createFormContext } from "@homarr/form";
+
+export interface AccessFormType {
+ items: {
+ principalId: string;
+ permission: TPermission;
+ }[];
+}
+
+export const [FormProvider, useFormContext, useForm] = createFormContext>();
+
+export type HandleCountChange = (callback: (prev: number) => number) => void;
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/group-access.tsx b/apps/nextjs/src/components/access/group-access-form.tsx
similarity index 51%
rename from apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/group-access.tsx
rename to apps/nextjs/src/components/access/group-access-form.tsx
index f465b6c08..4f62f6335 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/group-access.tsx
+++ b/apps/nextjs/src/components/access/group-access-form.tsx
@@ -1,73 +1,60 @@
-import { useCallback, useState } from "react";
+import { useState } from "react";
import Link from "next/link";
import { Anchor, Button, Group, Stack, Table, TableTbody, TableTh, TableThead, TableTr } from "@mantine/core";
import { IconPlus } from "@tabler/icons-react";
-import type { RouterOutputs } from "@homarr/api";
-import { clientApi } from "@homarr/api/client";
import { useModalAction } from "@homarr/modals";
import { useI18n, useScopedI18n } from "@homarr/translation/client";
-import { BoardAccessSelectRow } from "./board-access-table-rows";
-import type { BoardAccessFormType } from "./form";
+import type { AccessQueryData } from "./access-settings";
+import { AccessSelectRow } from "./access-table-rows";
+import { useAccessContext } from "./context";
+import type { AccessFormType } from "./form";
import { FormProvider, useForm } from "./form";
import { GroupSelectModal } from "./group-select-modal";
-import type { FormProps } from "./user-access";
+import type { FormProps } from "./user-access-form";
-export const GroupsForm = ({ board, initialPermissions, onCountChange }: FormProps) => {
- const { mutate, isPending } = clientApi.board.saveGroupBoardPermissions.useMutation();
- const utils = clientApi.useUtils();
- const [groups, setGroups] = useState>(
- new Map(initialPermissions.groupPermissions.map(({ group }) => [group.id, group])),
+export const GroupAccessForm = ({
+ accessQueryData,
+ handleCountChange,
+ handleSubmit,
+ isPending,
+}: Omit, "entity">) => {
+ const { defaultPermission } = useAccessContext();
+ const [groups, setGroups] = useState["groups"][number]["group"]>>(
+ new Map(accessQueryData.groups.map(({ group }) => [group.id, group])),
);
const { openModal } = useModalAction(GroupSelectModal);
const t = useI18n();
- const tPermissions = useScopedI18n("board.setting.section.access.permission");
+ const tPermissions = useScopedI18n("permission");
const form = useForm({
initialValues: {
- items: initialPermissions.groupPermissions.map(({ group, permission }) => ({
- itemId: group.id,
+ items: accessQueryData.groups.map(({ group, permission }) => ({
+ principalId: group.id,
permission,
})),
},
});
- const handleSubmit = useCallback(
- (values: BoardAccessFormType) => {
- mutate(
- {
- id: board.id,
- permissions: values.items,
- },
- {
- onSuccess: () => {
- void utils.board.getBoardPermissions.invalidate();
- },
- },
- );
- },
- [board.id, mutate, utils.board.getBoardPermissions],
- );
-
- const handleAddUser = useCallback(() => {
+ const handleAddUser = () => {
openModal({
- presentGroupIds: form.values.items.map(({ itemId: id }) => id),
+ presentGroupIds: form.values.items.map(({ principalId: id }) => id),
onSelect: (group) => {
setGroups((prev) => new Map(prev).set(group.id, group));
form.setFieldValue("items", [
{
- itemId: group.id,
- permission: "board-view",
+ principalId: group.id,
+ permission: defaultPermission,
},
...form.values.items,
]);
- onCountChange((prev) => prev + 1);
+ handleCountChange((prev) => prev + 1);
},
});
- }, [form, openModal, onCountChange]);
+ };
return (
-