Compare commits

...

19 Commits

Author SHA1 Message Date
Crowdin Bot 2811ad6553 New Crowdin translations by GitHub Action
Lint / Linting Checks (push) Has been cancelled
Tests / vitest (1) (push) Has been cancelled
Tests / vitest (2) (push) Has been cancelled
Tests / vitest (3) (push) Has been cancelled
Tests / vitest (4) (push) Has been cancelled
2026-08-27 01:56:09 +00:00
shamoon a17763ca9f Accessibility: improve sr labeling of search ui (#7052)
Docker CI / Docker Build & Push (push) Has been cancelled
Lint / Linting Checks (push) Has been cancelled
Tests / vitest (4) (push) Has been cancelled
Release Drafter / Update Release Draft (push) Has been cancelled
Release Drafter / Auto Label PR (push) Has been cancelled
Tests / vitest (1) (push) Has been cancelled
Tests / vitest (2) (push) Has been cancelled
Tests / vitest (3) (push) Has been cancelled
2026-08-23 21:49:31 -07:00
shamoon bd39fb48b9 Chore: narrow/specify some workflow permissions (#7051)
Docker CI / Docker Build & Push (push) Has been cancelled
Lint / Linting Checks (push) Has been cancelled
Tests / vitest (4) (push) Has been cancelled
Release Drafter / Update Release Draft (push) Has been cancelled
Release Drafter / Auto Label PR (push) Has been cancelled
Tests / vitest (1) (push) Has been cancelled
Tests / vitest (2) (push) Has been cancelled
Tests / vitest (3) (push) Has been cancelled
2026-08-23 16:51:28 -07:00
shamoon f2dc80e39e Tweak: move favicon population earlier (#7041)
Docker CI / Docker Build & Push (push) Has been cancelled
Lint / Linting Checks (push) Has been cancelled
Release Drafter / Update Release Draft (push) Has been cancelled
Release Drafter / Auto Label PR (push) Has been cancelled
Tests / vitest (1) (push) Has been cancelled
Tests / vitest (2) (push) Has been cancelled
Tests / vitest (3) (push) Has been cancelled
Tests / vitest (4) (push) Has been cancelled
2026-08-21 14:06:21 -07:00
shamoon 7d48b7ea78 Fix QL Copilot thing 2026-08-21 14:00:24 -07:00
shamoon 4c361422ca Chore: full react hooks eslint compliance (#7040) 2026-08-21 14:00:02 -07:00
shamoon 7c26cf6d97 Add 'minor' label to release drafter configuration
Docker CI / Docker Build & Push (push) Has been cancelled
Lint / Linting Checks (push) Has been cancelled
Release Drafter / Update Release Draft (push) Has been cancelled
Release Drafter / Auto Label PR (push) Has been cancelled
Tests / vitest (1) (push) Has been cancelled
Tests / vitest (2) (push) Has been cancelled
Tests / vitest (3) (push) Has been cancelled
Tests / vitest (4) (push) Has been cancelled
2026-08-21 12:15:44 -07:00
shamoon f0bd255adb Fix yaml parsing in 2.1.1 (#7037) 2026-08-21 09:48:25 -07:00
github-actions[bot] 728c6fbe18 New Crowdin translations by GitHub Action (#7027)
Co-authored-by: Crowdin Bot <support+bot@crowdin.com>
2026-08-21 15:46:27 +00:00
dependabot[bot] 6a96289717 Chore(deps-dev): Bump eslint-plugin-react-hooks from 5.2.0 to 7.1.1 (#7033)
Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>
Signed-off-by: dependabot[bot] <support@github.com>
2026-08-21 08:22:55 -07:00
shamoon fa47a2d86c Chore: again, improve k8s error logging 2026-08-21 08:11:48 -07:00
shamoon cc22d04429 Fixhancement: Handle k8s ipv6 node tls bug (#7035) 2026-08-21 07:21:38 -07:00
dependabot[bot] a414f376b9 Chore(deps): Bump js-yaml from 4.3.1 to 5.3.0 (#7032)
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>
2026-08-21 07:18:27 -07:00
dependabot[bot] bdd77342d8 Chore(deps-dev): Bump @testing-library/jest-dom from 7.0.0 to 7.0.1 in the testing-library group (#7029)
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2026-08-21 13:57:53 +00:00
dependabot[bot] 63d2172ef7 Chore(deps): Bump swr from 2.5.0 to 2.5.1 (#7031)
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2026-08-21 13:51:09 +00:00
dependabot[bot] 85e4e439bc Chore(deps): Bump @kubernetes/client-node from 1.4.0 to 2.0.0 (#7030)
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2026-08-21 06:44:33 -07:00
shamoon 36aa241689 Merge branch 'main' into dev 2026-08-21 06:37:32 -07:00
shamoon 0933ba015a Docs: clarify Claude use of mcp-remote 2026-08-21 06:34:09 -07:00
shamoon c57117daae Fix: move mcp method ordering 2026-08-21 06:29:55 -07:00
188 changed files with 2043 additions and 1300 deletions
+1
View File
@@ -10,6 +10,7 @@ version-resolver:
- 'breaking-change'
minor:
labels:
- 'minor'
- 'enhancement'
- 'feature'
patch:
+4
View File
@@ -10,6 +10,10 @@ on:
]
branches: [ dev ]
permissions:
contents: write
pull-requests: write
jobs:
synchronize-with-crowdin:
name: Crowdin Sync
+2 -1
View File
@@ -17,6 +17,8 @@ on:
env:
IMAGE_NAME: ${{ github.repository }}
permissions: {}
jobs:
@@ -27,7 +29,6 @@ jobs:
permissions:
contents: read
packages: write
id-token: write
steps:
- name: Checkout repository
+4 -2
View File
@@ -10,8 +10,6 @@ on:
permissions:
contents: read
pages: write
id-token: write
jobs:
@@ -33,6 +31,10 @@ jobs:
name: Build & Deploy Docs
if: github.repository == 'gethomepage/homepage' && github.event_name != 'pull_request' && github.ref == 'refs/heads/main'
runs-on: ubuntu-latest
permissions:
contents: read
pages: write
id-token: write
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
+5 -3
View File
@@ -6,15 +6,15 @@ on:
discussion:
types: [labeled]
permissions:
discussions: write
issues: write
permissions: {}
jobs:
close-needs-discussion:
name: Issues Need Discussion
if: github.event_name == 'issues' && github.event.label.name == 'needs-discussion'
runs-on: ubuntu-latest
permissions:
issues: write
steps:
- uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
with:
@@ -49,6 +49,8 @@ jobs:
name: Discussions Need Information
if: github.event_name == 'discussion' && github.event.label.name == 'needs-information'
runs-on: ubuntu-latest
permissions:
discussions: write
steps:
- uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
with:
+3
View File
@@ -6,6 +6,9 @@ on:
workflow_dispatch:
merge_group:
permissions:
contents: read
jobs:
lint:
name: Linting Checks
-1
View File
@@ -2,7 +2,6 @@ name: PR Quality
permissions:
contents: read
issues: read
pull-requests: write
on:
-1
View File
@@ -5,7 +5,6 @@ on:
types: [labeled]
permissions:
issues: write
pull-requests: write
jobs:
+14 -4
View File
@@ -5,10 +5,7 @@ on:
- cron: '0 3 * * *'
workflow_dispatch:
permissions:
issues: write
pull-requests: write
discussions: write
permissions: {}
concurrency:
group: lock
@@ -17,6 +14,9 @@ jobs:
stale:
name: 'Stale'
runs-on: ubuntu-latest
permissions:
issues: write
pull-requests: write
steps:
- uses: actions/stale@1e223db275d687790206a7acac4d1a11bd6fe629 # v10
with:
@@ -31,6 +31,10 @@ jobs:
lock-threads:
name: 'Lock Old Threads'
runs-on: ubuntu-latest
permissions:
discussions: write
issues: write
pull-requests: write
steps:
- uses: dessant/lock-threads@89ae32b08ed1a541efecbab17912962a5e38981c # v6.0.2
with:
@@ -56,6 +60,8 @@ jobs:
close-answered-discussions:
name: 'Close Answered Discussions'
runs-on: ubuntu-latest
permissions:
discussions: write
steps:
- uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
with:
@@ -112,6 +118,8 @@ jobs:
close-outdated-discussions:
name: 'Close Outdated Discussions'
runs-on: ubuntu-latest
permissions:
discussions: write
steps:
- uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
with:
@@ -203,6 +211,8 @@ jobs:
close-unsupported-feature-requests:
name: 'Close Unsupported Feature Requests'
runs-on: ubuntu-latest
permissions:
discussions: write
steps:
- uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
with:
+3
View File
@@ -5,6 +5,9 @@ on:
push:
workflow_dispatch:
permissions:
contents: read
jobs:
vitest:
runs-on: ubuntu-latest
+17
View File
@@ -49,6 +49,23 @@ environment:
HOMEPAGE_MCP_TOKEN: "generate-with-openssl-rand-base64-32"
```
## Connecting Claude Desktop
Claude Desktop can use [`mcp-remote`](https://www.npmjs.com/package/mcp-remote) to communicate with the homepage MCP endpoint in `claude_desktop_config.json`:
```json
{
"mcpServers": {
"homepage": {
"command": "npx",
"args": ["-y", "mcp-remote", "http://localhost:3000/api/mcp", "--header", "X-Homepage-MCP-Token: your-token"]
}
}
}
```
The **Add custom connector** option will not work: remote connectors authenticate with OAuth and cannot supply `HOMEPAGE_MCP_TOKEN`.
## Read-only by default
The MCP endpoint exposes tools for reading and validating supported Homepage config files. File writes are disabled unless you opt in with:
@@ -85,6 +85,7 @@ To ensure cohesiveness of various widgets, the following should be used as a gui
- Note that we reserve the right to decline widgets for projects that are very young (eg < ~1y) or those with a small reach (eg low GitHub stars). Again, this is in an effort to keep overall widget maintenance under control.
- Widgets should be only one row of blocks
- Widgets should be no more than 4 blocks wide and generally conform to the styling / design choices of other widgets
- Use `withWidgetFields(service, defaultFields)` from `utils/widget-fields` to apply default fields and cap configured fields without mutating the service. The helper limits widgets to 4 fields.
- Minimize the number of API calls
- Avoid the use of custom proxy unless absolutely necessary
- Widgets should be 'read-only', as in they should not make write changes using the relevant tool's API. Homepage widgets are designed to surface information, not to be a (usually worse) replacement for the tool itself.
+5 -5
View File
@@ -15,7 +15,7 @@
},
"dependencies": {
"@headlessui/react": "^2.2.10",
"@kubernetes/client-node": "^1.4.0",
"@kubernetes/client-node": "^2.0.0",
"classnames": "^2.5.1",
"compare-versions": "^6.1.1",
"dockerode": "^5.0.0",
@@ -23,7 +23,7 @@
"gamedig": "^5.3.3",
"i18next": "^26.3.6",
"ical.js": "^2.2.1",
"js-yaml": "^4.3.1",
"js-yaml": "^5.3.0",
"json-rpc-2.0": "^1.7.1",
"luxon": "^3.7.2",
"memory-cache": "^0.2.0",
@@ -39,7 +39,7 @@
"react-i18next": "^17.0.11",
"react-icons": "^5.6.0",
"recharts": "^3.1.2",
"swr": "^2.4.2",
"swr": "^2.5.1",
"systeminformation": "^5.33.1",
"tough-cookie": "^6.0.2",
"urbackup-server-api": "^0.92.2",
@@ -53,7 +53,7 @@
"@eslint/js": "^9.39.4",
"@tailwindcss/forms": "^0.5.11",
"@tailwindcss/postcss": "^4.3.3",
"@testing-library/jest-dom": "^7.0.0",
"@testing-library/jest-dom": "^7.0.1",
"@testing-library/react": "^16.3.0",
"@vitest/coverage-v8": "^4.1.10",
"eslint": "^9.25.1",
@@ -63,7 +63,7 @@
"eslint-plugin-jsx-a11y": "^6.10.2",
"eslint-plugin-prettier": "^5.5.6",
"eslint-plugin-react": "^7.37.4",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-hooks": "^7.1.1",
"jsdom": "^30.0.1",
"postcss": "^8.5.26",
"prettier": "^3.8.4",
+504 -294
View File
File diff suppressed because it is too large Load Diff
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4"/></svg>

After

Width:  |  Height:  |  Size: 96 B

+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Wag asseblief"
},
"search": {
"placeholder": "Soek…"
"placeholder": "Soek…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "SVE",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "الرجاء الإنتظار"
},
"search": {
"placeholder": "بحث …"
"placeholder": "بحث …",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "المعالج",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Моля изчакайте"
},
"search": {
"placeholder": "Търсене…"
"placeholder": "Търсене…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "Процесор",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Si us plau, espereu"
},
"search": {
"placeholder": "Cerca…"
"placeholder": "Cerca…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "CPU",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Počkejte prosím"
},
"search": {
"placeholder": "Hledat…"
"placeholder": "Hledat…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "Využití procesoru",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Vent venligst"
},
"search": {
"placeholder": "Søg…"
"placeholder": "Søg…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "CPU",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Bitte warten"
},
"search": {
"placeholder": "Suche…"
"placeholder": "Suche…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "CPU",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Παρακαλώ περιμένετε"
},
"search": {
"placeholder": "Αναζήτηση…"
"placeholder": "Αναζήτηση…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "Επεξεργαστής",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Please wait"
},
"search": {
"placeholder": "Search…"
"placeholder": "Search…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "CPU",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Bonvolu atendi"
},
"search": {
"placeholder": "Serĉi…"
"placeholder": "Serĉi…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "Ĉefprocesoro",
+4 -2
View File
@@ -39,7 +39,9 @@
"wait": "Espera, por favor"
},
"search": {
"placeholder": "Buscar…"
"placeholder": "Buscar…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "CPU",
@@ -472,7 +474,7 @@
"users": "Usuarios",
"loginsLast24H": "Inicios de sesión (24h)",
"failedLoginsLast24H": "Inicios de sesión fallidos (24h)",
"authorizationsLast24H": "Auths (24h)"
"authorizationsLast24H": "Autenticaciones (24 h)"
},
"proxmox": {
"mem": "MEM",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Itxaron mesedez"
},
"search": {
"placeholder": "Bilatu…"
"placeholder": "Bilatu…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "CPU",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Odota, ole hyvä"
},
"search": {
"placeholder": "Hae…"
"placeholder": "Hae…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "CPU",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Veuillez patienter"
},
"search": {
"placeholder": "Recherche…"
"placeholder": "Recherche…",
"provider": "Moteur de recherche : {{name}}",
"select_provider": "Sélectionnez un moteur de recherche"
},
"resources": {
"cpu": "CPU",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "המתן בבקשה"
},
"search": {
"placeholder": "חיפוש…"
"placeholder": "חיפוש…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "מעבד",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Please wait"
},
"search": {
"placeholder": "Search…"
"placeholder": "Search…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "CPU",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Pričekaj"
},
"search": {
"placeholder": "Traži …"
"placeholder": "Traži …",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "CPU",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Kérjük várjon"
},
"search": {
"placeholder": "Keresés…"
"placeholder": "Keresés…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "Processzor",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Harap tunggu"
},
"search": {
"placeholder": "Telusuri…"
"placeholder": "Telusuri…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "CPU",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Attendi per favore"
},
"search": {
"placeholder": "Cerca…"
"placeholder": "Cerca…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "CPU",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "お待ちください"
},
"search": {
"placeholder": "検索…"
"placeholder": "検索…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "CPU",
+4 -2
View File
@@ -39,7 +39,9 @@
"wait": "잠시만 기다리세요"
},
"search": {
"placeholder": "검색…"
"placeholder": "검색…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "CPU",
@@ -472,7 +474,7 @@
"users": "사용자",
"loginsLast24H": "로그인 (24시간)",
"failedLoginsLast24H": "실패한 로그인 (24시간)",
"authorizationsLast24H": "Auths (24h)"
"authorizationsLast24H": "인증(24시간)"
},
"proxmox": {
"mem": "메모리",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Lūdzu, uzgaidiet"
},
"search": {
"placeholder": "Meklēt…"
"placeholder": "Meklēt…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "CPU",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Sila tunggu"
},
"search": {
"placeholder": "Carian…"
"placeholder": "Carian…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "CPU",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Even geduld"
},
"search": {
"placeholder": "Zoeken…"
"placeholder": "Zoeken…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "CPU",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Vennligst vent"
},
"search": {
"placeholder": "Søk…"
"placeholder": "Søk…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "CPU",
+4 -2
View File
@@ -39,7 +39,9 @@
"wait": "Proszę czekać"
},
"search": {
"placeholder": "Szukaj…"
"placeholder": "Szukaj…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "Procesor",
@@ -472,7 +474,7 @@
"users": "Użytkownicy",
"loginsLast24H": "Logowania (24h)",
"failedLoginsLast24H": "Nieudane logowania (24h)",
"authorizationsLast24H": "Auths (24h)"
"authorizationsLast24H": "Uwierzytelnienia (24h)"
},
"proxmox": {
"mem": "RAM",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Por favor aguarde"
},
"search": {
"placeholder": "Pesquisar…"
"placeholder": "Pesquisar…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "CPU",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Por favor, aguarde"
},
"search": {
"placeholder": "Pesquisar…"
"placeholder": "Pesquisar…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "CPU",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Va rugăm așteptați"
},
"search": {
"placeholder": "Caută…"
"placeholder": "Caută…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "Procesor",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Пожалуйста, подождите"
},
"search": {
"placeholder": "Поиск…"
"placeholder": "Поиск…",
"provider": "Поисковая система: {{name}}",
"select_provider": "Выберите поисковую систему"
},
"resources": {
"cpu": "ЦП",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Počkajte prosím"
},
"search": {
"placeholder": "Hľadať…"
"placeholder": "Hľadať…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "CPU",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Prosimo počakajte"
},
"search": {
"placeholder": "Iskanje…"
"placeholder": "Iskanje…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "CPU",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Молим сачекајте"
},
"search": {
"placeholder": "Претражи…"
"placeholder": "Претражи…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "Процесор",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Vänligen vänta"
},
"search": {
"placeholder": "Sök…"
"placeholder": "Sök…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "CPU",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "దయచేసి వేచి ఉండండి"
},
"search": {
"placeholder": "వెతకండి…"
"placeholder": "వెతకండి…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "సీపియూ",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "โปรดรอ"
},
"search": {
"placeholder": "ค้นหา…"
"placeholder": "ค้นหา…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "ซีพียู",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Lütfen bekleyin"
},
"search": {
"placeholder": "Ara…"
"placeholder": "Ara…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "İşlemci",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Будь ласка, зачекайте"
},
"search": {
"placeholder": "Пошук…"
"placeholder": "Пошук…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "ЦП",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "Vui lòng chờ"
},
"search": {
"placeholder": "Tìm kiếm…"
"placeholder": "Tìm kiếm…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "CPU",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "請稍後"
},
"search": {
"placeholder": "搜索緊…"
"placeholder": "搜索緊…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "CPU",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "请稍候"
},
"search": {
"placeholder": "搜索…"
"placeholder": "搜索…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "CPU",
+3 -1
View File
@@ -39,7 +39,9 @@
"wait": "請稍候"
},
"search": {
"placeholder": "搜尋…"
"placeholder": "搜尋…",
"provider": "Search engine: {{name}}",
"select_provider": "Select search engine"
},
"resources": {
"cpu": "CPU",
+53 -5
View File
@@ -1,6 +1,6 @@
// @vitest-environment jsdom
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
import { beforeEach, describe, expect, it, vi } from "vitest";
import { ColorContext } from "utils/contexts/color";
@@ -25,6 +25,7 @@ const {
throwIn: null,
validateData: [],
hashData: null,
hashConfig: null,
mutateHash: vi.fn(),
servicesData: [],
bookmarksData: [],
@@ -59,9 +60,12 @@ const {
const serverSideTranslations = vi.fn(async (language) => ({ _translations: language }));
const logger = { error: vi.fn() };
const useSWR = vi.fn((key) => {
const useSWR = vi.fn((key, config) => {
if (key === "/api/validate") return { data: state.validateData };
if (key === "/api/hash") return { data: state.hashData, mutate: state.mutateHash };
if (key === "/api/hash") {
state.hashConfig = config;
return { data: state.hashData, mutate: state.mutateHash };
}
if (key === "/api/services") return { data: state.servicesData };
if (key === "/api/bookmarks") return { data: state.bookmarksData };
if (key === "/api/widgets") return { data: state.widgetsData };
@@ -172,6 +176,7 @@ describe("pages/index getStaticProps", () => {
state.throwIn = null;
state.validateData = [];
state.hashData = null;
state.hashConfig = null;
state.servicesData = [];
state.bookmarksData = [];
state.widgetsData = [];
@@ -351,6 +356,7 @@ describe("pages/index Index routing + SWR branches", () => {
}
await renderIndex({ initialSettings: { title: "Homepage", layout: {} }, settings: { layout: {} } });
act(() => state.hashConfig.onSuccess(state.hashData));
await waitFor(() => {
expect(fetchSpy).toHaveBeenCalledWith("/api/revalidate");
@@ -379,11 +385,24 @@ describe("pages/index Index routing + SWR branches", () => {
localStorage.removeItem("hash");
await renderIndex({ initialSettings: { title: "Homepage", layout: {} }, settings: { layout: {} } });
act(() => state.hashConfig.onSuccess(state.hashData));
await waitFor(() => {
expect(localStorage.getItem("hash")).toBe("first-hash");
});
});
it("ignores a hash response without a hash", async () => {
state.validateData = [];
localStorage.setItem("hash", "old-hash");
await renderIndex({ initialSettings: { title: "Homepage", layout: {} }, settings: { layout: {} } });
expect(() => act(() => state.hashConfig.onSuccess(null))).not.toThrow();
expect(() => act(() => state.hashConfig.onSuccess({}))).not.toThrow();
expect(localStorage.getItem("hash")).toBe("old-hash");
expect(document.querySelector(".animate-spin")).toBeFalsy();
});
});
describe("pages/index Home behavior", () => {
@@ -419,11 +438,27 @@ describe("pages/index Home behavior", () => {
fireEvent.keyDown(document.body, { key: "a" });
expect(screen.getByTestId("quicklaunch")).toHaveTextContent("open:3");
expect(state.quickLaunchProps.searchString).toBe("a");
fireEvent.keyDown(document.body, { key: "Escape" });
expect(screen.getByTestId("quicklaunch")).toHaveTextContent("closed:3");
});
it("opens search on space without seeding the query with whitespace", async () => {
await renderIndex({
initialSettings: { title: "Homepage", layout: {} },
settings: { title: "Homepage", layout: {}, language: "en" },
});
await waitFor(() => {
expect(state.quickLaunchProps).toBeTruthy();
});
fireEvent.keyDown(document.body, { key: " " });
expect(screen.getByTestId("quicklaunch")).toHaveTextContent("open:3");
expect(state.quickLaunchProps.searchString).toBe("");
});
it("renders services and bookmark groups when present", async () => {
await renderIndex({
initialSettings: { title: "Homepage", layout: {} },
@@ -489,7 +524,7 @@ describe("pages/index Home behavior", () => {
state.widgetsData = [];
const { setTheme, setColor, setSettings } = await renderIndex({
initialSettings: { title: "Homepage", layout: {} },
initialSettings: { title: "Homepage", layout: {}, favicon: "/x.ico" },
settings: {
title: "Homepage",
layout: {},
@@ -498,7 +533,6 @@ describe("pages/index Home behavior", () => {
color: "emerald",
disableIndexing: true,
base: "/base/",
favicon: "/x.ico",
},
theme: "dark",
color: "slate",
@@ -516,6 +550,20 @@ describe("pages/index Home behavior", () => {
expect(document.querySelector('link[rel="icon"]')?.getAttribute("href")).toBe("/x.ico");
});
// Safari reads the head without running JS, so the favicon has to be there before the
// settings context is populated, and mask-icon must not be
it("renders a custom favicon before the settings context is populated", async () => {
await renderIndex({
initialSettings: { title: "Homepage", layout: {}, favicon: "/x.ico" },
settings: {},
});
expect(document.querySelector('link[rel="icon"]')?.getAttribute("href")).toBe("/x.ico");
expect(document.querySelector('link[rel="apple-touch-icon"]')?.getAttribute("href")).toBe("/x.ico");
expect(document.querySelector('link[rel="mask-icon"]')).toBeNull();
expect(document.querySelector('link[rel="shortcut icon"]')).toBeNull();
});
it("marks information widgets as right-aligned for known widget types", async () => {
await renderIndex({
initialSettings: { title: "Homepage", layout: {} },
+129 -110
View File
@@ -15,6 +15,69 @@ const MOBILE_BUTTON_POSITIONS = {
"bottom-right": "bottom-4 right-4",
};
function parseUrl(searchString) {
if (!/.+[.:].+/.test(searchString)) return null; // basic test for probably a url
try {
return new URL(searchString.toLowerCase().startsWith("http") ? searchString : `https://${searchString}`);
} catch {
return null;
}
}
function getSearchResults({
hideVisitURL,
searchDescriptions,
searchProvider,
searchString,
searchSuggestions,
servicesAndBookmarks,
t,
url,
}) {
if (searchString.trim().length === 0) return [];
const results = servicesAndBookmarks.flatMap((result) => {
const nameMatch = result.name.toLowerCase().includes(searchString);
const descriptionMatch = searchDescriptions && result.description?.toLowerCase().includes(searchString);
if (!nameMatch && !descriptionMatch) return [];
return [{ ...result, ...(searchDescriptions && { priority: nameMatch ? 2 : +descriptionMatch }) }];
});
if (searchDescriptions) {
results.sort((a, b) => b.priority - a.priority);
}
if (searchProvider) {
results.push({
href: searchProvider.url + encodeURIComponent(searchString),
name: `${searchProvider.name ?? t("quicklaunch.custom")} ${t("quicklaunch.search")}`,
type: "search",
});
if (searchProvider.showSearchSuggestions && searchProvider.suggestionUrl && searchSuggestions[1]) {
results.push(
...searchSuggestions[1].map((suggestion) => ({
href: searchProvider.url + encodeURIComponent(suggestion),
name: suggestion,
type: "searchSuggestion",
})),
);
}
}
if (!hideVisitURL && url) {
results.unshift({
href: url.toString(),
name: `${t("quicklaunch.visit")} URL`,
type: "url",
});
}
return results;
}
export default function QuickLaunch({ servicesAndBookmarks, searchString, setSearchString, isOpen, setSearching }) {
const { t } = useTranslation();
@@ -23,9 +86,8 @@ export default function QuickLaunch({ servicesAndBookmarks, searchString, setSea
const searchField = useRef();
const [results, setResults] = useState([]);
const [currentItemIndex, setCurrentItemIndex] = useState(null);
const [url, setUrl] = useState(null);
const url = parseUrl(searchString);
const [searchSuggestions, setSearchSuggestions] = useState([]);
const { data: widgets } = useSWR("/api/widgets");
@@ -62,7 +124,7 @@ export default function QuickLaunch({ servicesAndBookmarks, searchString, setSea
: null;
function openCurrentItem(newWindow) {
const result = results[currentItemIndex];
const result = results[activeItemIndex];
window.open(
result.href,
newWindow ? "_blank" : (result.target ?? searchProvider?.target ?? settings.target ?? "_blank"),
@@ -81,17 +143,9 @@ export default function QuickLaunch({ servicesAndBookmarks, searchString, setSea
function handleSearchChange(event) {
const rawSearchString = event.target.value;
try {
if (!/.+[.:].+/g.test(rawSearchString)) throw new Error(); // basic test for probably a url
let urlString = rawSearchString;
if (urlString.toLowerCase().indexOf("http") !== 0) urlString = `https://${rawSearchString}`;
setUrl(new URL(urlString)); // basic validation
setSearchString(rawSearchString);
return;
} catch (e) {
setUrl(null);
}
setSearchString(rawSearchString.toLowerCase());
setCurrentItemIndex(null);
// urls keep their casing, everything else is lowercased for matching
setSearchString(parseUrl(rawSearchString) ? rawSearchString : rawSearchString.toLowerCase());
}
function handleSearchKeyDown(event) {
@@ -103,18 +157,19 @@ export default function QuickLaunch({ servicesAndBookmarks, searchString, setSea
} else if (event.key === "Enter" && results.length) {
closeAndReset();
openCurrentItem(event.metaKey);
} else if (event.key === "ArrowDown" && results[currentItemIndex + 1]) {
setCurrentItemIndex(currentItemIndex + 1);
} else if (event.key === "ArrowDown" && results[activeItemIndex + 1]) {
setCurrentItemIndex(activeItemIndex + 1);
event.preventDefault();
} else if (event.key === "ArrowUp" && currentItemIndex > 0) {
setCurrentItemIndex(currentItemIndex - 1);
} else if (event.key === "ArrowUp" && activeItemIndex > 0) {
setCurrentItemIndex(activeItemIndex - 1);
event.preventDefault();
} else if (
event.key === "ArrowRight" &&
results[currentItemIndex] &&
results[currentItemIndex].type === "searchSuggestion"
results[activeItemIndex] &&
results[activeItemIndex].type === "searchSuggestion"
) {
setSearchString(results[currentItemIndex].name);
setCurrentItemIndex(null);
setSearchString(results[activeItemIndex].name);
}
}
@@ -138,88 +193,51 @@ export default function QuickLaunch({ servicesAndBookmarks, searchString, setSea
}
useEffect(() => {
const abortController = new AbortController();
if (searchString.trim().length === 0) setResults([]);
else {
let newResults = servicesAndBookmarks.filter((r) => {
const nameMatch = r.name.toLowerCase().includes(searchString);
let descriptionMatch;
if (searchDescriptions) {
descriptionMatch = r.description?.toLowerCase().includes(searchString);
r.priority = nameMatch ? 2 * +nameMatch : +descriptionMatch;
}
return nameMatch || descriptionMatch;
});
if (searchDescriptions) {
newResults = newResults.sort((a, b) => b.priority - a.priority);
}
if (searchProvider) {
newResults.push({
href: searchProvider.url + encodeURIComponent(searchString),
name: `${searchProvider.name ?? t("quicklaunch.custom")} ${t("quicklaunch.search")}`,
type: "search",
});
if (searchProvider.showSearchSuggestions && searchProvider.suggestionUrl) {
if (searchString.trim() !== searchSuggestions[0]?.trim()) {
fetch(
`/api/search/searchSuggestion?query=${encodeURIComponent(searchString)}&providerName=${
searchProvider.name ?? "Custom"
}`,
{ signal: abortController.signal },
)
.then(async (searchSuggestionResult) => {
const newSearchSuggestions = await searchSuggestionResult.json();
if (newSearchSuggestions) {
if (newSearchSuggestions[1].length > 4) {
newSearchSuggestions[1] = newSearchSuggestions[1].splice(0, 4);
}
setSearchSuggestions(newSearchSuggestions);
}
})
.catch(() => {
// If there is an error, just ignore it. There just will be no search suggestions.
});
}
if (searchSuggestions[1]) {
newResults = newResults.concat(
searchSuggestions[1].map((suggestion) => ({
href: searchProvider.url + encodeURIComponent(suggestion),
name: suggestion,
type: "searchSuggestion",
})),
);
}
}
}
if (!hideVisitURL && url) {
newResults.unshift({
href: url.toString(),
name: `${t("quicklaunch.visit")} URL`,
type: "url",
});
}
setResults(newResults);
if (newResults.length) {
setCurrentItemIndex(0);
}
if (
searchString.trim().length === 0 ||
!searchProvider?.showSearchSuggestions ||
!searchProvider.suggestionUrl ||
searchString.trim() === searchSuggestions[0]?.trim()
) {
return undefined;
}
return () => {
abortController.abort();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [searchString, servicesAndBookmarks, searchDescriptions, hideVisitURL, searchSuggestions, searchProvider, url]);
const abortController = new AbortController();
fetch(
`/api/search/searchSuggestion?query=${encodeURIComponent(searchString)}&providerName=${
searchProvider.name ?? "Custom"
}`,
{ signal: abortController.signal },
)
.then(async (searchSuggestionResult) => {
const newSearchSuggestions = await searchSuggestionResult.json();
if (newSearchSuggestions) {
setCurrentItemIndex(null);
setSearchSuggestions([newSearchSuggestions[0], newSearchSuggestions[1].slice(0, 4)]);
}
})
.catch(() => {
// If there is an error, just ignore it. There just will be no search suggestions.
});
return () => abortController.abort();
}, [searchProvider, searchString, searchSuggestions]);
const results = getSearchResults({
hideVisitURL,
searchDescriptions,
searchProvider,
searchString,
searchSuggestions,
servicesAndBookmarks,
t,
url,
});
const activeItemIndex = currentItemIndex ?? (results.length ? 0 : null);
const [hidden, setHidden] = useState(true);
useEffect(() => {
function handleBackdropClick(event) {
if (event.target?.tagName === "DIV") closeAndReset();
@@ -228,14 +246,11 @@ export default function QuickLaunch({ servicesAndBookmarks, searchString, setSea
if (isOpen) {
searchField.current.focus();
document.body.addEventListener("click", handleBackdropClick);
setHidden(false);
} else {
document.body.removeEventListener("click", handleBackdropClick);
searchField.current.blur();
setTimeout(() => {
setHidden(true);
}, 300); // disable on close
}
return () => document.body.removeEventListener("click", handleBackdropClick);
}, [isOpen, closeAndReset]);
function highlightText(text) {
@@ -259,13 +274,17 @@ export default function QuickLaunch({ servicesAndBookmarks, searchString, setSea
<>
<div
className={classNames(
"relative z-40 ease-in-out duration-300 transition-opacity",
hidden && !isOpen && "hidden",
!hidden && isOpen && "opacity-100",
!isOpen && "opacity-0",
"relative z-40 ease-in-out",
isOpen ? "visible opacity-100" : "invisible opacity-0 pointer-events-none",
)}
style={{
transitionProperty: "opacity, visibility",
transitionDuration: "300ms, 0s",
transitionDelay: isOpen ? "0s, 0s" : "0s, 300ms",
}}
role="dialog"
aria-modal="true"
aria-hidden={!isOpen}
>
<div className="fixed inset-0 bg-gray-500 opacity-50" />
<div className="fixed inset-0 z-20 overflow-y-auto">
@@ -297,7 +316,7 @@ export default function QuickLaunch({ servicesAndBookmarks, searchString, setSea
onKeyDown={handleItemKeyDown}
className={classNames(
"flex flex-row w-full items-center justify-between rounded-md text-sm md:text-xl py-2 px-4 cursor-pointer text-theme-700 dark:text-theme-200",
i === currentItemIndex && "bg-theme-300/50 dark:bg-theme-700/50",
i === activeItemIndex && "bg-theme-300/50 dark:bg-theme-700/50",
)}
>
<div className="flex flex-row items-center mr-4 pointer-events-none">
+48 -7
View File
@@ -46,13 +46,25 @@ function Wrapper({ servicesAndBookmarks = [], initialOpen = true } = {}) {
const [isOpen, setSearching] = useState(initialOpen);
return (
<QuickLaunch
servicesAndBookmarks={servicesAndBookmarks}
searchString={searchString}
setSearchString={setSearchString}
isOpen={isOpen}
setSearching={setSearching}
/>
<>
<button
type="button"
data-testid="seed-key"
onClick={() => {
setSearchString((current) => `${current}g`);
setSearching(true);
}}
>
seed
</button>
<QuickLaunch
servicesAndBookmarks={servicesAndBookmarks}
searchString={searchString}
setSearchString={setSearchString}
isOpen={isOpen}
setSearching={setSearching}
/>
</>
);
}
@@ -151,6 +163,35 @@ describe("components/quicklaunch", () => {
openSpy.mockRestore();
});
it("does not carry a previous url result into a search seeded by a keypress", async () => {
renderWithProviders(<Wrapper />, {
settings: {
target: "_self",
quicklaunch: {
provider: "duckduckgo",
showSearchSuggestions: false,
},
},
});
const input = screen.getByPlaceholderText("Search");
await waitFor(() => expect(input).toHaveFocus());
fireEvent.change(input, { target: { value: "example.com" } });
expect(await screen.findByText("quicklaunch.visit URL")).toBeInTheDocument();
fireEvent.keyDown(input, { key: "Escape" });
await act(async () => {
await new Promise((r) => setTimeout(r, 350));
});
// reopen by "typing" a character, the way pages/index does
fireEvent.click(screen.getByTestId("seed-key"));
expect(input).toHaveValue("g");
expect(screen.queryByText("quicklaunch.visit URL")).not.toBeInTheDocument();
});
it("closes on Escape and clears the search string after the timeout", async () => {
renderWithProviders(<Wrapper />, {
settings: {
+6 -11
View File
@@ -1,9 +1,11 @@
import { useTranslation } from "next-i18next/pages";
import { useEffect, useState } from "react";
import { useMemo } from "react";
import Container from "../widget/container";
import Raw from "../widget/raw";
import useCurrentTime from "utils/hooks/use-current-time";
const textSizes = {
"4xl": "text-4xl",
"3xl": "text-3xl",
@@ -18,17 +20,10 @@ const textSizes = {
export default function DateTime({ options }) {
const { text_size: textSize, locale, format } = options;
const { i18n } = useTranslation();
const [date, setDate] = useState("");
const dateLocale = locale ?? i18n.language;
useEffect(() => {
const dateFormat = new Intl.DateTimeFormat(dateLocale, { ...format });
setDate(dateFormat.format(new Date()));
const interval = setInterval(() => {
setDate(dateFormat.format(new Date()));
}, 1000);
return () => clearInterval(interval);
}, [date, setDate, dateLocale, format]);
const currentTime = useCurrentTime(1000);
const dateFormatter = useMemo(() => new Intl.DateTimeFormat(dateLocale, { ...format }), [dateLocale, format]);
const date = currentTime === null ? "" : dateFormatter.format(new Date(currentTime));
return (
<Container options={options} additionalClassNames="information-widget-datetime">
+2 -2
View File
@@ -7,9 +7,9 @@ import Resource from "../widget/resource";
export default function Network({ options, refresh = 1500 }) {
const { t } = useTranslation();
if (options.network === true) options.network = "default";
const network = options.network === true ? "default" : options.network;
const { data, error } = useSWR(`/api/widgets/resources?type=network&interfaceName=${options.network}`, {
const { data, error } = useSWR(`/api/widgets/resources?type=network&interfaceName=${network}`, {
refreshInterval: refresh,
});
@@ -22,10 +22,12 @@ describe("components/widgets/resources/network", () => {
it("normalizes options.network=true to default interfaceName in the request", () => {
useSWR.mockReturnValue({ data: undefined, error: undefined });
const options = Object.freeze({ network: true });
render(<Network options={{ network: true }} />);
render(<Network options={options} />);
expect(useSWR).toHaveBeenCalledWith(expect.stringContaining("interfaceName=default"), expect.any(Object));
expect(options.network).toBe(true);
});
it("renders rates and usage percentage when data is present", () => {
+46 -47
View File
@@ -11,7 +11,7 @@ import {
} from "@headlessui/react";
import classNames from "classnames";
import { useTranslation } from "next-i18next/pages";
import { Fragment, useEffect, useMemo, useState } from "react";
import { Fragment, useEffect, useMemo, useState, useSyncExternalStore } from "react";
import { BiLogoBing } from "react-icons/bi";
import { FiSearch } from "react-icons/fi";
import { SiBaidu, SiBrave, SiDuckduckgo, SiGoogle } from "react-icons/si";
@@ -79,24 +79,32 @@ export function getStoredProvider() {
return null;
}
function subscribeToStoredProvider(onStoreChange) {
const handleStorage = (event) => {
if (event.key === localStorageKey) onStoreChange();
};
window.addEventListener("storage", handleStorage);
return () => window.removeEventListener("storage", handleStorage);
}
export default function Search({ options }) {
const { t } = useTranslation();
// options is a fresh object each render, so memo on provider itself
const availableProviderIds = useMemo(() => getAvailableProviderIds(options.provider) ?? [], [options.provider]);
const storedProvider = useSyncExternalStore(subscribeToStoredProvider, getStoredProvider, () => null);
const storedProviderId = Object.keys(searchProviders).find(
(providerId) => searchProviders[providerId] === storedProvider,
);
const initialProvider = availableProviderIds.includes(storedProviderId)
? storedProvider
: searchProviders[availableProviderIds[0] ?? "google"];
const [query, setQuery] = useState("");
const [selectedProvider, setSelectedProvider] = useState(searchProviders[availableProviderIds[0] ?? "google"]);
const [providerOverride, setProviderOverride] = useState(null);
const [searchSuggestions, setSearchSuggestions] = useState([]);
useEffect(() => {
const storedProvider = getStoredProvider();
let storedProviderKey = null;
storedProviderKey = Object.keys(searchProviders).find((pkey) => searchProviders[pkey] === storedProvider);
if (storedProvider && availableProviderIds.includes(storedProviderKey)) {
setSelectedProvider(storedProvider);
}
}, [availableProviderIds]);
const selectedProvider = providerOverride ?? initialProvider;
useEffect(() => {
const abortController = new AbortController();
@@ -130,8 +138,6 @@ export default function Search({ options }) {
};
}, [selectedProvider, options, query, searchSuggestions]);
let currentSuggestion;
function doSearch(value) {
const q = encodeURIComponent(value);
const { url } = selectedProvider;
@@ -142,13 +148,11 @@ export default function Search({ options }) {
}
setQuery("");
currentSuggestion = null;
}
const handleSearchKeyDown = (event) => {
const useSuggestion = searchSuggestions.length && currentSuggestion;
if (event.key === "Enter") {
doSearch(useSuggestion ? currentSuggestion : event.target.value);
if (event.key === "Enter" && !searchSuggestions[1]?.length) {
doSearch(event.target.value);
}
};
@@ -157,7 +161,7 @@ export default function Search({ options }) {
}
const onChangeProvider = (provider) => {
setSelectedProvider(provider);
setProviderOverride(provider);
localStorage.setItem(localStorageKey, provider.name);
};
@@ -166,7 +170,7 @@ export default function Search({ options }) {
<Raw>
<div className="flex-col relative h-8 my-4 min-w-fit z-20">
<div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-white" />
<Combobox value={query}>
<Combobox value={query} onChange={doSearch}>
<ComboboxInput
type="text"
className="
@@ -178,6 +182,7 @@ export default function Search({ options }) {
focus:border-theme-500 dark:focus:border-white/50
border border-theme-300 dark:border-theme-200/50"
placeholder={t("search.placeholder")}
aria-label={t("search.placeholder")}
onChange={(event) => {
setQuery(event.target.value);
}}
@@ -204,8 +209,8 @@ export default function Search({ options }) {
bg-theme-600/40 dark:bg-white/10
focus:ring-theme-500 dark:focus:ring-white/50"
>
<selectedProvider.icon className="text-white w-3 h-3" />
<span className="sr-only">{t("search.search")}</span>
<selectedProvider.icon className="text-white w-3 h-3" aria-hidden="true" />
<span className="sr-only">{t("search.provider", { name: selectedProvider.name })}</span>
</ListboxButton>
</div>
<Transition
@@ -218,6 +223,7 @@ export default function Search({ options }) {
leaveTo="transform opacity-0 scale-95"
>
<ListboxOptions
aria-label={t("search.select_provider")}
className="absolute right-0 z-10 mt-1 origin-top-right rounded-md
bg-theme-100 dark:bg-theme-600 shadow-lg
ring-1 ring-black ring-opacity-5 focus:outline-hidden"
@@ -234,7 +240,8 @@ export default function Search({ options }) {
active ? "bg-theme-600/10 dark:bg-white/10 dark:text-gray-900" : "dark:text-gray-100",
)}
>
<p.icon className="h-4 w-4 mx-4 my-2" />
<p.icon className="h-4 w-4 mx-4 my-2" aria-hidden="true" />
<span className="sr-only">{p.name}</span>
</li>
)}
</ListboxOption>
@@ -248,32 +255,24 @@ export default function Search({ options }) {
{searchSuggestions[1]?.length > 0 && (
<ComboboxOptions className="mt-1 rounded-md bg-theme-50 dark:bg-theme-800 border border-theme-300 dark:border-theme-200/30 cursor-pointer shadow-lg">
<div className="p-1 bg-white/50 dark:bg-white/10 text-theme-900/90 dark:text-white/90 text-xs">
<ComboboxOption key={query} value={query} />
<ComboboxOption key={query} value={query}>
<span className="sr-only">{query}</span>
</ComboboxOption>
{searchSuggestions[1].map((suggestion) => (
<ComboboxOption
key={suggestion}
value={suggestion}
onMouseDown={() => {
doSearch(suggestion);
}}
className="flex w-full"
>
{({ active }) => {
if (active) currentSuggestion = suggestion;
return (
<div
className={classNames(
"px-2 py-1 rounded-md w-full flex-nowrap",
active ? "bg-theme-300/20 dark:bg-white/10" : "",
)}
>
<span className="whitespace-pre">{suggestion.indexOf(query) === 0 ? query : ""}</span>
<span className="mr-4 whitespace-pre opacity-50">
{suggestion.indexOf(query) === 0 ? suggestion.substring(query.length) : suggestion}
</span>
</div>
);
}}
<ComboboxOption key={suggestion} value={suggestion} className="flex w-full">
{({ active }) => (
<div
className={classNames(
"px-2 py-1 rounded-md w-full flex-nowrap",
active ? "bg-theme-300/20 dark:bg-white/10" : "",
)}
>
<span className="whitespace-pre">{suggestion.indexOf(query) === 0 ? query : ""}</span>
<span className="mr-4 whitespace-pre opacity-50">
{suggestion.indexOf(query) === 0 ? suggestion.substring(query.length) : suggestion}
</span>
</div>
)}
</ComboboxOption>
))}
</div>
+37 -2
View File
@@ -9,6 +9,7 @@ import { renderWithProviders } from "test-utils/render-with-providers";
vi.mock("@headlessui/react", async () => {
const React = await import("react");
const { Fragment, createContext, useContext } = React;
const ComboboxContext = createContext(null);
const ListboxContext = createContext(null);
function passthrough({ as: As = "div", children, ...props }) {
@@ -18,9 +19,21 @@ vi.mock("@headlessui/react", async () => {
}
return {
Combobox: passthrough,
Combobox: ({ onChange, children }) => (
<ComboboxContext.Provider value={{ onChange }}>
<div>{children}</div>
</ComboboxContext.Provider>
),
ComboboxInput: (props) => <input {...props} />,
ComboboxOption: passthrough,
ComboboxOption: ({ as: As = "div", value, children, ...props }) => {
const ctx = useContext(ComboboxContext);
const content = typeof children === "function" ? children({ active: false }) : children;
return (
<As value={value} onMouseDown={() => ctx?.onChange?.(value)} {...props}>
{content}
</As>
);
},
ComboboxOptions: passthrough,
Listbox: ({ value, onChange, children, ...props }) => (
<ListboxContext.Provider value={{ value, onChange }}>
@@ -165,6 +178,28 @@ describe("components/widgets/search", () => {
openSpy.mockRestore();
});
it("gives every provider option an accessible name", () => {
renderWithProviders(
<Search options={{ provider: ["google", "duckduckgo", "brave"], showSearchSuggestions: false }} />,
{ settings: {} },
);
expect(screen.getAllByRole("option").map((option) => option.textContent)).toEqual([
"Google",
"DuckDuckGo",
"Brave",
]);
});
it("labels the search input and the provider button", () => {
renderWithProviders(<Search options={{ provider: ["google", "duckduckgo"], showSearchSuggestions: false }} />, {
settings: {},
});
expect(screen.getByRole("textbox")).toHaveAccessibleName("search.placeholder");
expect(screen.getByRole("button")).toHaveAccessibleName(/search\.provider/);
});
it("fetches search suggestions and triggers a search when a suggestion is selected", async () => {
const openSpy = vi.spyOn(window, "open").mockImplementation(() => null);
@@ -14,11 +14,11 @@ import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Widget({ options }) {
const { t } = useTranslation();
options.service_group = options.service_name = "unifi_console";
const { data: statsData, error: statsError } = useWidgetAPI(options, "stat/sites", { index: options.index });
const widgetOptions = { ...options, service_group: "unifi_console", service_name: "unifi_console" };
const { data: statsData, error: statsError } = useWidgetAPI(widgetOptions, "stat/sites", { index: options.index });
if (statsError) {
return <Error options={options} />;
return <Error options={widgetOptions} />;
}
const defaultSite = options.site
@@ -27,27 +27,27 @@ export default function Widget({ options }) {
if (!defaultSite) {
return (
<Container options={options} additionalClassNames="information-widget-unifi-console">
<Container options={widgetOptions} additionalClassNames="information-widget-unifi-console">
<PrimaryText>{t("unifi.wait")}</PrimaryText>
<WidgetIcon icon={SiUbiquiti} />
</Container>
);
}
const wan = defaultSite.health.find((h) => h.subsystem === "wan");
const lan = defaultSite.health.find((h) => h.subsystem === "lan");
const wlan = defaultSite.health.find((h) => h.subsystem === "wlan");
[wan, lan, wlan].forEach((s) => {
s.up = s.status === "ok";
s.show = s.status !== "unknown";
});
const getHealth = (subsystem) => {
const health = defaultSite.health.find((item) => item.subsystem === subsystem) ?? { status: "unknown" };
return { ...health, up: health.status === "ok", show: health.status !== "unknown" };
};
const wan = getHealth("wan");
const lan = getHealth("lan");
const wlan = getHealth("wlan");
const name = wan.gw_name ?? defaultSite.desc;
const uptime = wan["gw_system-stats"] ? wan["gw_system-stats"].uptime : null;
const dataEmpty = !(wan.show || lan.show || wlan.show || uptime);
return (
<Container options={options} additionalClassNames="information-widget-unifi-console">
<Container options={widgetOptions} additionalClassNames="information-widget-unifi-console">
<Raw>
<div className="flex-none flex flex-row items-center mr-3 py-1.5">
<div className="flex flex-col">
@@ -40,32 +40,41 @@ describe("components/widgets/unifi_console", () => {
it("renders a wait state when no site is available yet", () => {
useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
const options = Object.freeze({ index: 0 });
renderWithProviders(<UnifiConsole options={{ index: 0 }} />, { settings: { target: "_self" } });
renderWithProviders(<UnifiConsole options={options} />, { settings: { target: "_self" } });
expect(screen.getByText("unifi.wait")).toBeInTheDocument();
expect(useWidgetAPI).toHaveBeenCalledWith(
{ index: 0, service_group: "unifi_console", service_name: "unifi_console" },
"stat/sites",
{ index: 0 },
);
expect(options).toEqual({ index: 0 });
});
it("renders site name and uptime when data is available", () => {
const data = {
data: [
{
name: "default",
desc: "Home",
health: [
{
subsystem: "wan",
status: "ok",
gw_name: "Router",
"gw_system-stats": { uptime: 172800 },
},
{ subsystem: "lan", status: "unknown" },
{ subsystem: "wlan", status: "unknown" },
],
},
],
};
const originalData = structuredClone(data);
useWidgetAPI.mockReturnValue({
data: {
data: [
{
name: "default",
desc: "Home",
health: [
{
subsystem: "wan",
status: "ok",
gw_name: "Router",
"gw_system-stats": { uptime: 172800 },
},
{ subsystem: "lan", status: "unknown" },
{ subsystem: "wlan", status: "unknown" },
],
},
],
},
data,
error: undefined,
});
@@ -75,6 +84,7 @@ describe("components/widgets/unifi_console", () => {
// common.number is mocked to return the numeric value as a string.
expect(screen.getByText("2")).toBeInTheDocument();
expect(screen.getByText("unifi.days")).toBeInTheDocument();
expect(data).toEqual(originalData);
});
it("selects a site by description when options.site is set", () => {
+6 -5
View File
@@ -15,6 +15,12 @@ export default async function handler(req, res) {
return res.status(404).end("Not Found");
}
// Method check precedes auth so CORS preflights aren't answered with a 401.
if (req.method !== "POST") {
res.setHeader("Allow", "POST");
return res.status(405).end("Method Not Allowed");
}
const tokenError = mcpTokenConfigError();
if (tokenError) {
createLogger("mcp").error(tokenError);
@@ -25,11 +31,6 @@ export default async function handler(req, res) {
return res.status(401).json({ error: "Unauthorized" });
}
if (req.method !== "POST") {
res.setHeader("Allow", "POST");
return res.status(405).end("Method Not Allowed");
}
const response = handleMcpRequest(req.body);
if (!response) {
return res.status(202).end();
+34
View File
@@ -214,4 +214,38 @@ describe("pages/api/mcp", () => {
expect(res.status).toHaveBeenCalledWith(405);
expect(res.setHeader).toHaveBeenCalledWith("Allow", "POST");
});
it("answers unauthenticated CORS preflights with 405 rather than 401", async () => {
process.env.HOMEPAGE_MCP_ENABLED = "true";
process.env.HOMEPAGE_MCP_TOKEN = "mcp-tok-0123456789abcdefghijklmnopqrstuv";
const handler = await loadHandler();
const res = mockResponse();
// a preflight never carries the Authorization header the browser strips
await handler(
{
method: "OPTIONS",
headers: {
origin: "https://claude.ai",
"access-control-request-method": "POST",
"access-control-request-headers": "authorization,content-type",
},
},
res,
);
expect(res.status).toHaveBeenCalledWith(405);
expect(res.setHeader).toHaveBeenCalledWith("Allow", "POST");
expect(getServerSession).not.toHaveBeenCalled();
});
it("still returns 404 for non-POST requests while disabled", async () => {
delete process.env.HOMEPAGE_MCP_ENABLED;
const handler = await loadHandler();
const res = mockResponse();
await handler({ method: "OPTIONS", headers: {} }, res);
expect(res.status).toHaveBeenCalledWith(404);
});
});
+35 -28
View File
@@ -12,7 +12,7 @@ import dynamic from "next/dynamic";
import Head from "next/head";
import { useRouter } from "next/router";
import Script from "next/script";
import { useContext, useEffect, useMemo, useState } from "react";
import { useCallback, useContext, useEffect, useMemo, useState } from "react";
import { BiError } from "react-icons/bi";
import useSWR, { SWRConfig } from "swr";
import { ColorContext } from "utils/contexts/color";
@@ -102,7 +102,29 @@ function Index({ initialSettings, fallback }) {
const [stale, setStale] = useState(false);
const { data: errorsData } = useSWR("/api/validate");
const { error: validateError } = errorsData || {};
const { data: hashData, mutate: mutateHash } = useSWR("/api/hash");
const handleHashData = useCallback((hashData) => {
if (typeof window === "undefined" || !hashData?.hash) return;
const previousHash = localStorage.getItem("hash");
if (!previousHash) {
localStorage.setItem("hash", hashData.hash);
}
if (previousHash && previousHash !== hashData.hash) {
setStale(true);
localStorage.setItem("hash", hashData.hash);
fetch("/api/revalidate").then((res) => {
if (res.ok) {
window.location.reload();
}
});
}
}, []);
const { mutate: mutateHash } = useSWR("/api/hash", { onSuccess: handleHashData });
useEffect(() => {
if (windowFocused) {
@@ -110,29 +132,6 @@ function Index({ initialSettings, fallback }) {
}
}, [windowFocused, mutateHash]);
useEffect(() => {
if (hashData) {
if (typeof window !== "undefined") {
const previousHash = localStorage.getItem("hash");
if (!previousHash) {
localStorage.setItem("hash", hashData.hash);
}
if (previousHash && previousHash !== hashData.hash) {
setStale(true);
localStorage.setItem("hash", hashData.hash);
fetch("/api/revalidate").then((res) => {
if (res.ok) {
window.location.reload();
}
});
}
}
}
}, [hashData]);
if (validateError) {
return (
<div className="w-full h-screen container m-auto justify-center p-10 pointer-events-none">
@@ -264,6 +263,13 @@ function Home({ initialSettings }) {
e.key.match(/([à-ü]|[À-Ü]|!)/g) ||
(e.key === "v" && (e.ctrlKey || e.metaKey))
) {
if (e.key.length === 1 && !(e.key === "v" && (e.ctrlKey || e.metaKey))) {
e.preventDefault();
// whitespace opens the search but shouldn't be in it
if (e.key.trim()) {
setSearchString((currentSearchString) => currentSearchString + e.key);
}
}
setSearching(true);
} else if (e.key === "Escape") {
setSearchString("");
@@ -420,10 +426,11 @@ function Home({ initialSettings }) {
/>
{settings.disableIndexing && <meta name="robots" content="noindex, nofollow" />}
{settings.base && <base href={settings.base} />}
{settings.favicon ? (
{/* from props, not context so its set before running JS */}
{initialSettings.favicon ? (
<>
<link rel="icon" href={settings.favicon} />
<link rel="apple-touch-icon" sizes="180x180" href={settings.favicon} />
<link rel="icon" href={initialSettings.favicon} />
<link rel="apple-touch-icon" sizes="180x180" href={initialSettings.favicon} />
</>
) : (
<>
+2 -3
View File
@@ -1,8 +1,6 @@
import { promises as fs } from "fs";
import path from "path";
import yaml from "js-yaml";
import checkAndCopyConfig, { CONF_DIR, getSettings, substituteEnvironmentVars } from "utils/config/config";
import {
cleanServiceGroups,
@@ -12,6 +10,7 @@ import {
servicesFromKubernetes,
} from "utils/config/service-helpers";
import { cleanWidgetGroups, widgetsFromConfig } from "utils/config/widget-helpers";
import { loadYaml } from "utils/config/yaml";
/**
* Compares services by weight then by name.
@@ -30,7 +29,7 @@ export async function bookmarksResponse() {
const bookmarksYaml = path.join(CONF_DIR, "bookmarks.yaml");
const rawFileContents = await fs.readFile(bookmarksYaml, "utf8");
const fileContents = substituteEnvironmentVars(rawFileContents);
const bookmarks = yaml.load(fileContents);
const bookmarks = loadYaml(fileContents);
if (!bookmarks) return [];
+1 -4
View File
@@ -30,10 +30,7 @@ vi.mock("fs", () => ({
promises: fs,
}));
vi.mock("js-yaml", () => ({
default: yaml,
...yaml,
}));
vi.mock("utils/config/yaml", () => ({ loadYaml: yaml.load }));
vi.mock("utils/config/config", () => config);
vi.mock("utils/config/widget-helpers", () => widgetHelpers);
+1 -1
View File
@@ -13,7 +13,7 @@ const { fs, yaml } = vi.hoisted(() => ({
}));
vi.mock("fs", () => fs);
vi.mock("js-yaml", () => ({ default: yaml, ...yaml }));
vi.mock("utils/config/yaml", () => ({ loadYaml: yaml.load }));
describe("utils/config/config checkAndCopyConfig", () => {
const originalEnv = process.env;
+4 -3
View File
@@ -1,9 +1,10 @@
import { copyFileSync, existsSync, mkdirSync, readFileSync } from "fs";
import { join } from "path";
import yaml from "js-yaml";
import cache from "memory-cache";
import { loadYaml } from "utils/config/yaml";
const cacheKey = "homepageEnvironmentVariables";
const homepageVarPrefix = "HOMEPAGE_VAR_";
const homepageFilePrefix = "HOMEPAGE_FILE_";
@@ -42,7 +43,7 @@ export default function checkAndCopyConfig(config) {
}
try {
yaml.load(readFileSync(configYaml, "utf8"));
loadYaml(readFileSync(configYaml, "utf8"));
return true;
} catch (e) {
return { ...e, config };
@@ -85,7 +86,7 @@ export function getSettings() {
const settingsYaml = join(CONF_DIR, "settings.yaml");
const rawFileContents = readFileSync(settingsYaml, "utf8");
const fileContents = substituteEnvironmentVars(rawFileContents);
const initialSettings = yaml.load(fileContents) ?? {};
const initialSettings = loadYaml(fileContents) ?? {};
if (initialSettings.layout) {
// support yaml list but old spec was object so convert to that
+2 -3
View File
@@ -1,9 +1,8 @@
import { readFileSync } from "fs";
import path from "path";
import yaml from "js-yaml";
import checkAndCopyConfig, { CONF_DIR, substituteEnvironmentVars } from "utils/config/config";
import { loadYaml } from "utils/config/yaml";
export function getDefaultDockerArgs(platform = process.platform) {
if (platform !== "win32" && platform !== "darwin") {
@@ -19,7 +18,7 @@ export default function getDockerArguments(server) {
const configFile = path.join(CONF_DIR, "docker.yaml");
const rawConfigData = readFileSync(configFile, "utf8");
const configData = substituteEnvironmentVars(rawConfigData);
const servers = yaml.load(configData);
const servers = loadYaml(configData);
if (!server) {
return getDefaultDockerArgs();
+1 -4
View File
@@ -21,10 +21,7 @@ vi.mock("fs", () => ({
readFileSync: fs.readFileSync,
}));
vi.mock("js-yaml", () => ({
default: yaml,
...yaml,
}));
vi.mock("utils/config/yaml", () => ({ loadYaml: yaml.load }));
vi.mock("utils/config/config", () => ({
default: checkAndCopyConfig,
+7 -2
View File
@@ -1,17 +1,18 @@
import { readFileSync } from "fs";
import { isIPv6 } from "net";
import path from "path";
import { ApiextensionsV1Api, KubeConfig } from "@kubernetes/client-node";
import yaml from "js-yaml";
import checkAndCopyConfig, { CONF_DIR, substituteEnvironmentVars } from "utils/config/config";
import { loadYaml } from "utils/config/yaml";
export function getKubernetes() {
checkAndCopyConfig("kubernetes.yaml");
const configFile = path.join(CONF_DIR, "kubernetes.yaml");
const rawConfigData = readFileSync(configFile, "utf8");
const configData = substituteEnvironmentVars(rawConfigData);
return yaml.load(configData);
return loadYaml(configData);
}
export const getKubeConfig = () => {
@@ -21,6 +22,10 @@ export const getKubeConfig = () => {
switch (config?.mode) {
case "cluster":
kc.loadFromCluster();
// node < 26 can't match an IPv6 host against an IP SAN, so verify against the DNS SAN instead (nodejs/node#64032)
if (isIPv6(process.env.KUBERNETES_SERVICE_HOST ?? "")) {
kc.clusters = kc.clusters.map((cluster) => ({ ...cluster, tlsServerName: "kubernetes.default.svc" }));
}
break;
case "default":
kc.loadFromDefault();
+23 -4
View File
@@ -32,10 +32,7 @@ vi.mock("fs", () => ({
readFileSync: fs.readFileSync,
}));
vi.mock("js-yaml", () => ({
default: yaml,
...yaml,
}));
vi.mock("utils/config/yaml", () => ({ loadYaml: yaml.load }));
vi.mock("utils/config/config", () => ({
default: checkAndCopyConfig,
@@ -46,6 +43,7 @@ vi.mock("@kubernetes/client-node", () => ({
ApiextensionsV1Api: class ApiextensionsV1Api {},
KubeConfig: class KubeConfig {
loadFromCluster() {
this.clusters = [{ name: "inCluster", server: "https://host:443", skipTLSVerify: false }];
return kube.loadFromCluster();
}
loadFromDefault() {
@@ -88,6 +86,27 @@ describe("utils/config/kubernetes", () => {
expect(kc2).not.toBeNull();
});
it("getKubeConfig sets tlsServerName when the in-cluster host is IPv6", () => {
vi.stubEnv("KUBERNETES_SERVICE_HOST", "fd00:1018:2000::1");
yaml.load.mockReturnValueOnce({ mode: "cluster" });
expect(getKubeConfig().clusters[0]).toMatchObject({
name: "inCluster",
tlsServerName: "kubernetes.default.svc",
});
vi.unstubAllEnvs();
});
it("getKubeConfig leaves tlsServerName unset for non-IPv6 in-cluster hosts", () => {
vi.stubEnv("KUBERNETES_SERVICE_HOST", "10.43.0.1");
yaml.load.mockReturnValueOnce({ mode: "cluster" });
expect(getKubeConfig().clusters[0].tlsServerName).toBeUndefined();
vi.unstubAllEnvs();
});
it("checkCRD returns true when the CRD exists", async () => {
apiExt.readCustomResourceDefinitionStatus.mockResolvedValueOnce({ ok: true });
const logger = { error: vi.fn() };
+2 -3
View File
@@ -1,14 +1,13 @@
import { readFileSync } from "fs";
import path from "path";
import yaml from "js-yaml";
import checkAndCopyConfig, { CONF_DIR, substituteEnvironmentVars } from "utils/config/config";
import { loadYaml } from "utils/config/yaml";
export function getProxmoxConfig() {
checkAndCopyConfig("proxmox.yaml");
const configFile = path.join(CONF_DIR, "proxmox.yaml");
const rawConfigData = readFileSync(configFile, "utf8");
const configData = substituteEnvironmentVars(rawConfigData);
return yaml.load(configData);
return loadYaml(configData);
}
+1 -4
View File
@@ -18,10 +18,7 @@ vi.mock("fs", () => ({
readFileSync: fs.readFileSync,
}));
vi.mock("js-yaml", () => ({
default: yaml,
...yaml,
}));
vi.mock("utils/config/yaml", () => ({ loadYaml: yaml.load }));
vi.mock("utils/config/config", () => ({
default: checkAndCopyConfig,
+3 -3
View File
@@ -2,12 +2,12 @@ import { promises as fs } from "fs";
import path from "path";
import Docker from "dockerode";
import yaml from "js-yaml";
import checkAndCopyConfig, { CONF_DIR, getSettings, substituteEnvironmentVars } from "utils/config/config";
import getDockerArguments from "utils/config/docker";
import { getKubeConfig } from "utils/config/kubernetes";
import * as shvl from "utils/config/shvl";
import { loadYaml } from "utils/config/yaml";
import kubernetes from "utils/kubernetes/export";
import createLogger from "utils/logger";
import { parseVersionForUrl } from "utils/proxy/api-helpers";
@@ -56,7 +56,7 @@ export async function servicesFromConfig() {
const servicesYaml = path.join(CONF_DIR, "services.yaml");
const rawFileContents = await fs.readFile(servicesYaml, "utf8");
const fileContents = substituteEnvironmentVars(rawFileContents);
const services = yaml.load(fileContents);
const services = loadYaml(fileContents);
return parseServicesToGroups(services);
}
@@ -66,7 +66,7 @@ export async function servicesFromDocker() {
const dockerYaml = path.join(CONF_DIR, "docker.yaml");
const rawDockerFileContents = await fs.readFile(dockerYaml, "utf8");
const dockerFileContents = substituteEnvironmentVars(rawDockerFileContents);
const servers = yaml.load(dockerFileContents);
const servers = loadYaml(dockerFileContents);
if (!servers) {
return [];
+1 -4
View File
@@ -70,10 +70,7 @@ vi.mock("fs", () => ({
promises: fs,
}));
vi.mock("js-yaml", () => ({
default: yaml,
...yaml,
}));
vi.mock("utils/config/yaml", () => ({ loadYaml: yaml.load }));
vi.mock("utils/config/config", () => config);
vi.mock("dockerode", () => ({ default: Docker }));
+2 -3
View File
@@ -1,9 +1,8 @@
import { promises as fs } from "fs";
import path from "path";
import yaml from "js-yaml";
import checkAndCopyConfig, { CONF_DIR, substituteEnvironmentVars } from "utils/config/config";
import { loadYaml } from "utils/config/yaml";
export async function widgetsFromConfig() {
checkAndCopyConfig("widgets.yaml");
@@ -11,7 +10,7 @@ export async function widgetsFromConfig() {
const widgetsYaml = path.join(CONF_DIR, "widgets.yaml");
const rawFileContents = await fs.readFile(widgetsYaml, "utf8");
const fileContents = substituteEnvironmentVars(rawFileContents);
const widgets = yaml.load(fileContents);
const widgets = loadYaml(fileContents);
if (!widgets) return [];
+1 -4
View File
@@ -18,10 +18,7 @@ vi.mock("fs", () => ({
promises: fs,
}));
vi.mock("js-yaml", () => ({
default: yaml,
...yaml,
}));
vi.mock("utils/config/yaml", () => ({ loadYaml: yaml.load }));
vi.mock("utils/config/config", () => config);
+14
View File
@@ -0,0 +1,14 @@
import * as yaml from "js-yaml";
const EMPTY_DOCUMENT_ERROR = "expected a document, but the input is empty";
const DEFAULT_SCHEMA = yaml.CORE_SCHEMA.withTags(yaml.timestampTag, yaml.mergeTag, yaml.legacyMapTag);
export function loadYaml(input, options) {
try {
return yaml.load(input, { schema: DEFAULT_SCHEMA, ...options });
} catch (error) {
// js-yaml v4 returned undefined for empty and comment-only documents.
if (error?.reason === EMPTY_DOCUMENT_ERROR) return undefined;
throw error;
}
}
+41
View File
@@ -0,0 +1,41 @@
import { describe, expect, it } from "vitest";
import { loadYaml } from "./yaml";
describe("utils/config/yaml", () => {
it.each(["", " \n", "# comment only\n"])("loads an empty document from %j as undefined", (input) => {
expect(loadYaml(input)).toBeUndefined();
});
it("loads a populated document", () => {
expect(loadYaml("title: Homepage\n")).toEqual({ title: "Homepage" });
});
it("preserves v4 merge key behavior", () => {
expect(loadYaml("defaults: &defaults\n href: https://example.com\nservice:\n <<: *defaults\n")).toEqual({
defaults: { href: "https://example.com" },
service: { href: "https://example.com" },
});
});
it("preserves v4 timestamp behavior without enabling YAML 1.1 booleans", () => {
expect(loadYaml("date: 2026-08-21\nenabled: yes\n")).toEqual({
date: new Date("2026-08-21T00:00:00.000Z"),
enabled: "yes",
});
});
it("preserves v4 handling of non-string keys", () => {
// an unsubstituted {{HOMEPAGE_VAR_*}} parses as a flow mapping key
expect(loadYaml("- Plex:\n widget:\n key: {{HOMEPAGE_VAR_PLEX_KEY}}\n")).toEqual([
{ Plex: { widget: { key: { "[object Object]": null } } } },
]);
expect(loadYaml("- Backups:\n - 2024-01-01:\n href: http://x\n")).toEqual([
{ Backups: [{ [String(new Date("2024-01-01T00:00:00.000Z"))]: { href: "http://x" } }] },
]);
});
it("still rejects invalid YAML", () => {
expect(() => loadYaml("value: [\n")).toThrow();
});
});
-4
View File
@@ -30,10 +30,6 @@ export function ColorProvider({ initialTheme, children }) {
lastColor = rawColor;
};
useEffect(() => {
if (initialTheme !== undefined) setColor(initialTheme ?? getInitialColor());
}, [initialTheme]);
useEffect(() => {
rawSetColor(color);
}, [color]);
+1 -5
View File
@@ -1,14 +1,10 @@
import { createContext, useEffect, useMemo, useState } from "react";
import { createContext, useMemo, useState } from "react";
export const SettingsContext = createContext();
export function SettingsProvider({ initialSettings, children }) {
const [settings, setSettings] = useState(() => initialSettings ?? {});
useEffect(() => {
if (initialSettings !== undefined) setSettings(initialSettings ?? {});
}, [initialSettings]);
const value = useMemo(() => ({ settings, setSettings }), [settings]);
return <SettingsContext.Provider value={value}>{children}</SettingsContext.Provider>;
+1 -5
View File
@@ -1,14 +1,10 @@
import { createContext, useEffect, useMemo, useState } from "react";
import { createContext, useMemo, useState } from "react";
export const TabContext = createContext();
export function TabProvider({ initialTab, children }) {
const [activeTab, setActiveTab] = useState(() => initialTab ?? false);
useEffect(() => {
if (initialTab !== undefined) setActiveTab(initialTab ?? false);
}, [initialTab]);
const value = useMemo(() => ({ activeTab, setActiveTab }), [activeTab]);
return <TabContext.Provider value={value}>{children}</TabContext.Provider>;
-4
View File
@@ -31,10 +31,6 @@ export function ThemeProvider({ initialTheme, children }) {
localStorage.setItem("theme-mode", rawTheme);
};
useEffect(() => {
if (initialTheme !== undefined) setTheme(initialTheme ?? getInitialTheme());
}, [initialTheme]);
useEffect(() => {
rawSetTheme(theme);
}, [theme]);
+45
View File
@@ -0,0 +1,45 @@
import { useSyncExternalStore } from "react";
const MINUTE = 60_000;
const stores = new Map();
function getStore(refreshInterval) {
const existing = stores.get(refreshInterval);
if (existing) return existing;
const listeners = new Set();
let now = null; // null until mounted, so SSR and hydration render the same thing
let timer = null;
const store = {
getSnapshot: () => now,
subscribe: (onStoreChange) => {
listeners.add(onStoreChange);
if (!timer) {
now = Date.now();
timer = setInterval(() => {
now = Date.now();
listeners.forEach((listener) => listener());
}, refreshInterval);
}
return () => {
listeners.delete(onStoreChange);
if (!listeners.size) {
clearInterval(timer);
timer = null;
}
};
},
};
stores.set(refreshInterval, store);
return store;
}
// Returns null on the server and during hydration, then the current time.
export default function useCurrentTime(refreshInterval = MINUTE) {
const { subscribe, getSnapshot } = getStore(refreshInterval);
return useSyncExternalStore(subscribe, getSnapshot, () => null);
}
+32
View File
@@ -0,0 +1,32 @@
// @vitest-environment jsdom
import { act, render, screen } from "@testing-library/react";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import useCurrentTime from "./use-current-time";
function CurrentTime({ refreshInterval }) {
return <span>{useCurrentTime(refreshInterval)}</span>;
}
describe("utils/hooks/use-current-time", () => {
beforeEach(() => {
vi.useFakeTimers();
vi.setSystemTime(1_000);
});
afterEach(() => {
vi.useRealTimers();
});
it("updates at the requested interval", () => {
render(<CurrentTime refreshInterval={5_000} />);
expect(screen.getByText("1000")).toBeInTheDocument();
act(() => {
vi.advanceTimersByTime(5_000);
});
expect(screen.getByText("6000")).toBeInTheDocument();
});
});
+10 -19
View File
@@ -1,26 +1,17 @@
import { useEffect, useState } from "react";
import { useSyncExternalStore } from "react";
const hasFocus = () => typeof document !== "undefined" && document.hasFocus();
const useWindowFocus = () => {
const [focused, setFocused] = useState(hasFocus);
const subscribe = (onFocusChange) => {
window.addEventListener("focus", onFocusChange);
window.addEventListener("blur", onFocusChange);
useEffect(() => {
setFocused(hasFocus());
const onFocus = () => setFocused(true);
const onBlur = () => setFocused(false);
window.addEventListener("focus", onFocus);
window.addEventListener("blur", onBlur);
return () => {
window.removeEventListener("focus", onFocus);
window.removeEventListener("blur", onBlur);
};
}, []);
return focused;
return () => {
window.removeEventListener("focus", onFocusChange);
window.removeEventListener("blur", onFocusChange);
};
};
const useWindowFocus = () => useSyncExternalStore(subscribe, hasFocus, () => false);
export default useWindowFocus;
+3 -1
View File
@@ -12,15 +12,17 @@ function Fixture() {
describe("utils/hooks/window-focus", () => {
it("tracks focus/blur events", async () => {
vi.spyOn(document, "hasFocus").mockReturnValue(true);
const hasFocus = vi.spyOn(document, "hasFocus").mockReturnValue(true);
render(<Fixture />);
expect(screen.getByTestId("focused")).toHaveTextContent("true");
hasFocus.mockReturnValue(false);
window.dispatchEvent(new Event("blur"));
await waitFor(() => expect(screen.getByTestId("focused")).toHaveTextContent("false"));
hasFocus.mockReturnValue(true);
window.dispatchEvent(new Event("focus"));
await waitFor(() => expect(screen.getByTestId("focused")).toHaveTextContent("true"));
});
+6 -13
View File
@@ -18,23 +18,16 @@ function combineMessageAndSplat() {
}
function messageFormatter(logInfo) {
if (logInfo.label) {
if (logInfo.stack) {
return `[${logInfo.timestamp}] ${logInfo.level}: <${logInfo.label}> ${logInfo.stack}`;
}
return `[${logInfo.timestamp}] ${logInfo.level}: <${logInfo.label}> ${logInfo.message}`;
}
if (logInfo.stack) {
return `[${logInfo.timestamp}] ${logInfo.level}: ${logInfo.stack}`;
}
return `[${logInfo.timestamp}] ${logInfo.level}: ${logInfo.message}`;
const label = logInfo.label ? `<${logInfo.label}> ` : "";
// e.g. fetch errors say nothing useful without the cause
const cause = logInfo.cause ? `\ncaused by: ${logInfo.cause.stack ?? logInfo.cause}` : "";
return `[${logInfo.timestamp}] ${logInfo.level}: ${label}${logInfo.stack || logInfo.message}${cause}`;
}
function getConsoleLogger() {
return new winston.transports.Console({
format: winston.format.combine(
winston.format.errors({ stack: true }),
winston.format.errors({ stack: true, cause: true }),
combineMessageAndSplat(),
winston.format.timestamp(),
winston.format.colorize(),
@@ -51,7 +44,7 @@ function getFileLogger() {
return new winston.transports.File({
format: winston.format.combine(
winston.format.errors({ stack: true }),
winston.format.errors({ stack: true, cause: true }),
combineMessageAndSplat(),
winston.format.timestamp(),
winston.format.printf(messageFormatter),
+10
View File
@@ -170,6 +170,16 @@ describe("utils/logger", () => {
});
expect(plainMsg).toBe("[t] info: hello");
const causeMsg = formatter({
timestamp: "t",
level: "error",
label: "x",
stack: "STACK",
message: "fetch failed",
cause: { stack: "CAUSE STACK" },
});
expect(causeMsg).toBe("[t] error: <x> STACK\ncaused by: CAUSE STACK");
const out = splat.transform(
{
message: "Hello %s",
+4 -3
View File
@@ -2,9 +2,10 @@ import { existsSync, mkdirSync, readFileSync, writeFileSync } from "fs";
import { createHash, timingSafeEqual } from "node:crypto";
import { join } from "path";
import yaml from "js-yaml";
import * as yaml from "js-yaml";
import { CONF_DIR } from "utils/config/config";
import { loadYaml } from "utils/config/yaml";
const PROTOCOL_VERSION = "2025-11-25";
const SERVER_INFO = {
@@ -118,7 +119,7 @@ function readConfig(file) {
}
function parseYamlConfig(file) {
const parsed = yaml.load(readConfig(file) || "");
const parsed = loadYaml(readConfig(file) || "");
return parsed ?? [];
}
@@ -128,7 +129,7 @@ function validateYaml(file, content) {
}
try {
yaml.load(content || "");
loadYaml(content || "");
return { valid: true };
} catch (error) {
return {
+6 -6
View File
@@ -2,13 +2,13 @@ import useSWR from "swr";
import { formatProxyUrl } from "./api-helpers";
export default function useWidgetAPI(widget, ...options) {
const config = {};
if (options && options[1]?.refreshInterval) {
config.refreshInterval = options[1].refreshInterval;
export default function useWidgetAPI(widget, endpoint, queryParams, swrConfig = {}) {
const config = { ...swrConfig };
if (queryParams?.refreshInterval) {
config.refreshInterval = queryParams.refreshInterval;
}
let url = formatProxyUrl(widget, ...options);
if (options[0] === "") {
let url = formatProxyUrl(widget, endpoint, queryParams);
if (endpoint === "") {
url = null;
}
const { data, error, mutate } = useSWR(url, config);
+12
View File
@@ -28,6 +28,18 @@ describe("utils/proxy/use-widget-api", () => {
expect(result.mutate).toBe("m");
});
it("passes additional SWR configuration separately from the proxy query", () => {
useSWR.mockReturnValue({ data: undefined, error: undefined, mutate: vi.fn() });
const widget = { service_group: "g", service_name: "s", index: 0 };
const onSuccess = vi.fn();
useWidgetAPI(widget, "status", { refreshInterval: 123 }, { onSuccess });
const [url, config] = useSWR.mock.calls[0];
expect(url).not.toContain("onSuccess");
expect(config).toEqual({ refreshInterval: 123, onSuccess });
});
it("returns data.error as the top-level error", () => {
const dataError = { message: "nope" };
useSWR.mockReturnValue({ data: { error: dataError }, error: undefined, mutate: vi.fn() });

Some files were not shown because too many files have changed in this diff Show More