Compare commits

..
Author SHA1 Message Date
Thomas Camlong 7f7ee3263c fix(spotlight): show the app search group to app administrators
app.search accepts app-modify-all or board-modify-all, but the spotlight group was
only offered to board modifiers, so a user who administers apps could not search
them. The two conditions now match.
2026-08-19 09:44:50 +02:00
Thomas Camlong e49e53a32f fix(permissions): model app use as a capability, not a level below modify
Codex review: app-modify-all implies only app-create - app-use-all is implied by
app-full-all alone. Putting use beneath modify in the ordered ladder therefore
fabricated a grant: a legacy group holding just app-modify-all displayed as
Modify, and touching the row or applying a preset silently granted use of every
app.

Ladders may now only contain keys that genuinely imply each other. Everything
else is a capability with its own checkbox, so the app row is
No access | Modify | Full plus "Use all apps" and "Create apps". A test asserts
every ladder is a real chain, so this class of mismatch fails CI rather than
shipping.

Also documents in the API docs why app list endpoints can now return FORBIDDEN
and why integration lists may return fewer records, as AGENTS.md requires.
2026-08-19 09:42:04 +02:00
Thomas Camlong 25bd88f30a chore: stop committing PR description screenshots
The 14 PNGs under .screenshots/ existed only to render the pull request body and
would otherwise land in release/v2 permanently. Screenshots belong on the pull
request itself, where GitHub hosts them.
2026-08-18 16:24:14 +02:00
Thomas Camlong 7e93380140 refactor(permissions): move the management access rules into the shared definitions
home.getStats re-implemented the same rule the pages and navigation use, which is
exactly the drift that let a stat card link to a page that returned not-found.
getAppManagementAccess and getIntegrationManagementAccess now hold the rule, and
the nextjs helper is only a session/lookup adapter around them.
2026-08-18 15:47:26 +02:00
Thomas Camlong 78da525883 docs: describe the create capability and management section access rules
Documents that create is granted independently of the access level, which levels
already include it, and the single rule that decides whether /manage/apps and
/manage/integrations are reachable and what each shows.
2026-08-18 15:40:29 +02:00
Thomas Camlong 3bbe7f2a98 fix(permissions): correct row copy, column alignment and dirty state in the matrix
- a row with only the create capability described itself as "no access", contradicting
  the checkbox next to it; it now shows the create permission's description
- the level controls and create checkboxes now line up in columns across rows
- saving left the unsaved-changes bar on screen: setInitialValues only moves the values
  snapshot, resetDirty is what clears the dirty flags
- dropped the manual onValuesChange dirty bookkeeping, which compared against the
  permissions the page was loaded with rather than the last saved state
2026-08-18 15:40:28 +02:00
Thomas Camlong 6728d0a63d fix(permissions): keep create permissions grantable and stop silent escalation
The matrix could not represent board-create, app-create, integration-create,
search-engine-create or media-upload, and savePermissions force-bundled every
create key with its modify/full parent. Together that meant a group with
board-create was silently upgraded to board-full-all on the next save, and the
common "members may create their own boards" setup became unreachable.

- permissionMatrix models create/upload as an orthogonal capability next to the
  ordered access levels, so all 20 permission keys round-trip losslessly
- savePermissions stores exactly what was selected
- the matrix UI gets a per-category create checkbox, auto-checked and disabled
  when the chosen level already implies it
- a management section is reachable when the user can do at least one thing in
  it; nav, pages and stat cards now share one access helper
2026-08-18 15:40:28 +02:00
Thomas Camlong 8caf00da79 fix: use typed Map for create-permission parents
The 'in' operator guard did not narrow the GroupPermissionKey union for
indexing, failing the CI typecheck (TS7053). A typed Map with .get()
needs no narrowing and preserves the bundling behavior.
2026-08-18 11:05:12 +02:00
Thomas Camlong 930d9fc489 fix: address CodeRabbit review findings
- Apply app search permission filter after limit (access filtering before truncation)
- Allow board-modify-all users to search apps (spotlight regression)
- Skip integration permission queries for anonymous sessions
- Add deterministic sort tie-breakers (kind, name, id)
- Extract shared integration access relations helper
- Replace double type assertion with typed lookup in savePermissions
- Add regression tests: board-modify-all app search, integration-create
  bundling, global full-access branch, matrix round-trip expansion
2026-08-18 11:05:12 +02:00
Thomas Camlong 0839007431 docs(pr): add permission UI screenshots 2026-08-18 11:04:57 +02:00
Thomas Camlong 2cfa806176 feat: recalculate permission scope and add permission matrix UI
- Gate app list procedures (getPaginated/all/search) behind app-modify-all
- Filter integration list procedures by per-integration access
- Bundle create permissions with their modify/full parents on group save
- Align manage nav, home stat cards and page gates with the new scope
- Add permission matrix UI with presets and effective-permission preview
- Show scoped empty states and delegated-admin notices on the integrations page
2026-08-18 11:04:57 +02:00
46 changed files with 2044 additions and 1086 deletions

No files matched your search

+3
View File
@@ -92,3 +92,6 @@ homarr-backup*.zip
*.sqlite-wal
*.sqlite-shm
/scripts/benchmarks/
# PR description screenshots belong on the pull request, not in the repository
.screenshots/
@@ -58,12 +58,12 @@ A random secret can be generated by using the following command: `openssl rand -
## Docker
| Environment Variable | Description | Possible values | Default |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------- |
| `DOCKER_SOCKET_PATHS` | Comma-separated mounted Docker-compatible socket paths. Homarr discovers each path as a selectable Docker environment | For example `/var/run/docker.sock,/var/run/podman.sock` | - |
| `DOCKER_HOSTNAMES` | Comma-separated plaintext TCP hostnames. Pair each hostname with the port in the same position in `DOCKER_PORTS` | For example `localhost,docker.example.com` | - |
| `DOCKER_PORTS` | Comma-separated plaintext TCP ports paired with `DOCKER_HOSTNAMES` | For example `2375,2376` | - |
| `DOCKER_ENDPOINTS` | Optional advanced JSON configuration for custom names, TLS, or restricted capabilities. It takes precedence over the simple variables above. See the [Docker and Podman connection guide](/docs/integrations/docker) | A JSON array of endpoint descriptors | - |
| Environment Variable | Description | Possible values | Default |
| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------- |
| `DOCKER_ENDPOINTS` | JSON array of named, capability-scoped Docker or Podman endpoints. Supports socket, explicitly insecure TCP, and TLS transports. See the [Docker and Podman integration guide](/docs/integrations/docker) | A JSON array of endpoint descriptors | - |
| `DOCKER_HOSTNAMES` | Legacy comma-separated list of plaintext TCP hostnames. Ignored when `DOCKER_ENDPOINTS` is set | For example `localhost,docker.example.com` | - |
| `DOCKER_PORTS` | Legacy comma-separated list of plaintext TCP ports. Ignored when `DOCKER_ENDPOINTS` is set | For example `2375,2376` | - |
| `DOCKER_SOCKET_PATHS` | Legacy comma-separated list of mounted Docker-compatible socket paths. Ignored when `DOCKER_ENDPOINTS` is set | For example `/var/run/docker.sock,/var/run/podman.sock` | - |
## Database
+16 -31
View File
@@ -24,11 +24,12 @@ import { dockerContainersWidget } from "@site/docs/widgets/docker-containers";
]}
/>
## Connecting Docker to Homarr
## Enabling the Docker integration
Docker connections come directly from Homarr's environment variables. They are automatically available in the Docker management table and Docker widget; you do not create a Docker integration under **Management → Integrations**.
If Homarr runs directly on a host with Docker installed, it uses `/var/run/docker.sock` by default. When Homarr runs in a container, mount the [Docker socket](https://docs.docker.com/engine/security/protect-access/) into it so Homarr can interact with Docker.
This integration must first be enabled.
If you directly run on the host system and you have docker installed, it will be enabled by default.
Otherwise, you'll need to mount the [docker socket](https://docs.docker.com/engine/security/protect-access/) to the Homarr container,
so Homarr can interact with the Docker service.
In Docker Compose, you can simply add this line:
@@ -121,23 +122,7 @@ services:
DOCKER_SOCKET_PATHS: /var/run/docker.sock,/var/run/podman.sock
```
For remote socket proxies, list the hostnames and matching ports in the same order:
```yaml
environment:
DOCKER_HOSTNAMES: docker-proxy-home,docker-proxy-lab
DOCKER_PORTS: 2375,2375
```
Homarr automatically discovers each comma-separated entry as a separate Docker environment. All environments are selected by default; the Docker widget lets you select one or more without any additional setup.
:::warning[Plaintext TCP]
Plaintext Docker TCP can grant unauthenticated control of the Docker host. Prefer a local socket, a least-privilege socket proxy on a private Docker network, or TLS.
:::
### Advanced endpoint configuration
Most users should use the comma-separated variables above. Use `DOCKER_ENDPOINTS` only when you need custom names, TLS, or restricted capabilities. It is a JSON array where every endpoint declares its identity, transport, and capabilities:
For named endpoints, transport security, or least-privilege actions, prefer `DOCKER_ENDPOINTS`. It is a JSON array where every endpoint declares its identity, transport, and capabilities:
```yaml
services:
@@ -178,12 +163,16 @@ Supported transports are:
- `tls`: `host`, `port`, and an absolute `caPath`; add both `certPath` and `keyPath` for mutual TLS
- `tcp`: `host`, `port`, and the explicit acknowledgement `allowInsecure: true`
The structured configuration refuses TCP unless `allowInsecure` is explicitly set to `true`. When `DOCKER_ENDPOINTS` is set, it takes precedence over `DOCKER_SOCKET_PATHS`, `DOCKER_HOSTNAMES`, and `DOCKER_PORTS`.
:::warning[Plaintext TCP]
Plaintext Docker TCP can grant unauthenticated control of the Docker host. Prefer a local socket, a least-privilege socket proxy, or TLS. The structured configuration refuses TCP unless `allowInsecure` is explicitly set to `true`.
:::
When `DOCKER_ENDPOINTS` is set, it takes precedence over the legacy `DOCKER_SOCKET_PATHS`, `DOCKER_HOSTNAMES`, and `DOCKER_PORTS` variables.
### Managing your Docker containers within Homarr
Homarr allows you to interact with Docker containers running on your system.
The collapsed **Assisted Docker setup** helper optionally compares visible containers with your existing Homarr apps and integrations. Open it only when you want setup suggestions; it never blocks normal container management. Every service stays distinct by Docker endpoint and container ID, including multiple containers that use the same integration type.
The **Service setup** section compares the visible containers with your existing Homarr apps and integrations. It keeps every service distinct by Docker endpoint and container ID, including multiple containers that use the same integration type.
Homarr can show a service as:
@@ -192,15 +181,15 @@ Homarr can show a service as:
- **Already represented** or **Linked** when an app or integration already matches
- **Address changed** when a service appears to match an integration but its reachable address has changed
Set the usual server address once, then choose whether services normally use different ports, subdomains, or paths. Homarr uses that pattern to prefill every detected service. Each suggestion has one editable URL field with the generated and Docker-reported addresses available as autocomplete options, so you can select a suggestion or type any address directly.
Suggested addresses are ranked and explain where they came from. A published address or Docker endpoint host is normally usable from a browser; a container-name address is server-only and requires Homarr to share the container network. Wildcard addresses such as `0.0.0.0` are never offered as browser destinations. You can edit every suggestion before continuing.
:::info[Review before changing]
Service discovery is read-only. Homarr never creates or changes an app or integration automatically. **Set up integration** opens the standard prefilled integration form, while **Create app** opens the existing Docker app form, so you can review and confirm the final setup.
Service discovery is read-only. Homarr never creates or changes an app or integration automatically; use the action on an individual suggestion to review and confirm its setup.
:::
Suggestions appear as a compact task list. Expand an item only when you want to edit its URL or inspect relevant setup statuses. Use the filters to focus on services that need attention or those already represented in Homarr. Refresh runs discovery again. Dismissed suggestions are stored in the current browser using their endpoint-qualified service identity and can be restored from the same helper. If multiple existing items could match, Homarr marks the result as ambiguous and does not choose one automatically.
Use the inbox filters to focus on services that need attention or those already represented in Homarr. Refresh runs discovery again. Dismissed suggestions are stored in the current browser using their endpoint-qualified service identity and can be restored from the same panel. If multiple existing items could match, Homarr marks the result as ambiguous and does not choose one automatically.
Compact status icons summarize the setup information Homarr can act on. Unknown and non-applicable runtime layers are omitted to keep the helper focused; use the integration form's connection test or the relevant board action for live diagnostics.
The health badges are an evidence-based projection across Docker, integration configuration, app representation, and persisted widget links. Authentication, API request success, and widget query execution are labeled **Not observed** because Homarr does not currently retain trustworthy last-run results for these layers. Use the suggested integration test or board action to diagnose them live; **Not observed** is never presented as healthy.
If one Docker endpoint is unavailable, Homarr reports that endpoint while continuing to show services from healthy endpoints. An unavailable endpoint is not treated as an empty Docker installation.
@@ -227,10 +216,6 @@ This opens a dedicated page with an xterm.js terminal that streams the container
The Docker management table supports optional **CPU usage** and **Memory usage** columns.
These columns are hidden by default and can be toggled on from the table column visibility settings.
#### Choosing Docker environments in the widget
The Docker widget can show one or more configured Docker environments. Leave **Docker environments** empty to include every endpoint, which is also the default for existing widgets. Selecting one or more entries limits container and statistics requests to those endpoints.
#### Add apps from containers
Homarr also lets you add apps from containers. You can simply select all containers you want to add an app for and then click the `Add to Homarr` button.
+28 -4
View File
@@ -72,6 +72,34 @@ API key authentication enables programmatic access for:
- Custom dashboards and monitoring tools
- Container orchestration systems that need to sync app definitions
## Permissions
API keys act as the user that created them, so every request is subject to that user's group
permissions. A call that the user is not allowed to make returns `FORBIDDEN`, and list endpoints
return only the records the user may see rather than failing.
### App endpoints require app management access
`GET /api/apps`, `GET /api/apps/paginated` and `GET /api/apps/search` (tRPC `app.all`,
`app.getPaginated`, `app.search`) require the **modify all apps** permission. They previously
returned the full app catalogue — including internal URLs — to any authenticated user.
If a script that used to work now returns `FORBIDDEN`, grant **modify all apps** to a group the key
owner belongs to, or switch to `GET /api/apps/selectable`, which returns the reduced fields used by
board pickers.
### Integration endpoints are filtered per key
`integration.all`, `integration.allThatSupportSearch`, `integration.allOfGivenCategory` and
`integration.search` filter server side. Without a global integration permission, a key only
receives the integrations its owner has been granted access to, so responses may contain fewer
records than before rather than returning an error. `integration.search` applies its `limit` after
filtering, so a scoped key still receives a full page of results.
Each returned integration carries a `permissions` object — check `hasUseAccess` before reading data
and `hasInteractAccess` before performing actions; `false` means the key owner lacks that level for
that integration, not that the call failed.
## Board Automation
The OpenAPI and MCP APIs include board management endpoints for common automation workflows:
@@ -110,10 +138,6 @@ Pass those pairs unchanged to `docker.startAll`, `docker.stopAll`, `docker.resta
names use underscores, such as `docker_restartAll`. Endpoint qualification prevents identical container IDs on different
Docker or Podman endpoints from targeting the wrong service.
`docker.getContainers` also accepts an optional `endpointIds` array. Omit it or pass an empty array to query every configured
Docker environment, or pass one or more IDs returned by `docker.getEndpoints` to query only those Dockerode clients. The
Docker widget uses the same behavior for its environment selector.
## Partial integration failures
Multi-integration widget queries keep data from integrations that remain available. Calendar and media-server results include
+13 -2
View File
@@ -51,6 +51,17 @@ Note that the ping URL only accepts `http://` and `https://` URLs — custom URI
## List of apps
On the apps management page you find all apps that exist in your Homarr instance. Search by name or URL, open an app directly, or use its row actions to edit and delete it. A filtered search can be cleared without leaving the page.
On the apps management page you find all apps that exist in your Homarr instance. Search by name or URL, open an app
directly, or use its row actions to edit and delete it. A filtered search can be cleared without leaving the page.
Any signed-in user can view this list. Creating, editing, and deleting apps requires the corresponding app permission; board permissions are not required.
### Accessing the page
The `/manage/apps` page is reachable when you can manage all apps (`app-modify-all`) or create apps (`app-create`):
- **Manage all (`app-modify-all`)**: the full list of apps is shown and searchable, and each row can be edited.
- **Create only (`app-create`)**: the page shows an empty "create an app" state instead of the list, so the names and
URLs of existing apps are never disclosed. The create action is still available.
- **Neither**: the page is not reachable and returns a not-found page.
Creating an app requires `app-create`, editing requires `app-modify-all`, and deleting requires `app-full-all`;
board permissions are not required.
@@ -17,6 +17,24 @@ To create an integration, choose **New integration** and select the supported ap
The integrations management page uses a searchable list. Each row shows the integration type and URL, with the actions you have permission to use.
### Accessing the page
The `/manage/integrations` page is reachable when at least one of the following applies:
- you can manage all integrations (global `integration-full-all`),
- you can create integrations (`integration-create`), or
- you have been granted full access to at least one specific integration.
What the page shows depends on the case:
- **Manage all (`integration-full-all`)**: the full list of integrations is shown.
- **Create only (`integration-create`)**: the page shows an empty "create an integration" state instead of the list, with the create action still available.
- **Delegated (full access on one or more)**: only the integrations you have full access to are listed, above a note making clear that the view is scoped to what you can manage.
- **None**: the page is not reachable and returns a not-found page.
Where you have a mix of access, the list combines the integrations you can manage. Integration lists are filtered
server side, so a user never receives data about integrations they lack access to.
Next, you'll need to fill out the required fields to configure the integration:
![](./img/form-create-integration.png)
+70 -12
View File
@@ -163,19 +163,77 @@ Members can be removed from the group using the remove button at the end:
#### Permissions tab
In this tab, you manage what permissions the members of this group will have.
Currently, the following permissions are available:
Permissions are shown as a matrix with one row per category (boards, apps, integrations, and so on). Each row has a
segmented control that lets you pick a single **access level**, plus a checkbox for each **capability** the category
has.
- Boards
- **Create boards**: Allow members to create boards
- **View all boards**: Allow members to view all boards
- **Modify all boards**: Allow members to modify all boards (Does not include access control and danger zone)
- **Full board access**: Allow members to view, modify, and delete all boards (Including access control and danger zone)
- Integrations
- **Create integrations**: Allow members to create integrations
- **Use all integrations**: Allows members to add any integrations to their boards
- **Interact with any integration**: Allow members to interact with any integration
- **Full integration access**: Allow members to manage, use and interact with any integration
- **Administrator**: Members with this permission have full access to all features and settings
Levels in a category are cumulative: selecting a level grants that level and every level below it in the same
category. Choosing **No access** grants no access level for that category.
##### Capabilities are separate from the access level
A capability is something you can grant on its own, independently of how much of everyone else's data the members
can see. Creating is the usual example: you can let members create their own boards without letting them view or
modify anyone else's boards. Apps additionally have **use all apps**, which lets members put any app on a board
without being able to edit apps.
Some access levels already include a capability through permission inheritance (marked in the table below); the
checkbox is then ticked, disabled, and explains which level includes it.
##### Administration
Selecting the **Administrator** level grants full access to everything. While it is selected, every other category
is disabled and explains that administrators already have that access. Setting the administrator row back to
**No access** re-enables the other categories with the selections they had before.
##### Access levels
The access levels below are cumulative, in ascending order, with the category's capabilities listed separately:
| Category | Access levels (ascending) | Capabilities | Already included at |
| -------------- | ---------------------------------------------------------------------------------------- | ------------------------------- | ---------------------------------------------------- |
| Boards | view all boards → modify all boards → full board access | create boards | full board access |
| Apps | modify all apps → full app access | use all apps, create apps | create apps: modify all apps and full app access; use all apps: full app access |
| Integrations | use all integrations → interact with any integration → full integration access | create integrations | full integration access |
| Search engines | modify all search engines → full search engine access | create search engines | modify all search engines, full search engine access |
| Medias | view all medias → full media access | upload medias | full media access |
| Other | view logs | — | — |
| Administrator | administrator | — | — |
Apps are the one category where "use" is not a level. Being able to modify every app does **not** imply being able
to put any app on a board — only full app access grants both — so the two are kept independent rather than stacked,
and picking **Modify** never silently grants use of every app.
The levels grant the following:
- **Boards**: view all boards; modify all boards (not access control and danger zone); full board access (view, modify and delete every board, including access control and the danger zone).
- **Apps**: modify all apps; full app access (manage, use and delete any app).
- **Integrations**: use all integrations; interact with any integration; full integration access (manage, use and interact with any integration).
- **Search engines**: modify all search engines; full search engine access (manage and delete any search engine).
- **Medias**: view all medias; full media access (manage and delete any media).
- **Other**: view logs.
##### Presets
Above the rows you can apply a preset to fill in a common configuration in one click:
- **Viewer**: read-only - view all boards and medias, use any app on a board, and use existing integrations.
- **Editor**: day-to-day management - modify all boards and apps, create boards and integrations, interact with any integration, modify search engines, and upload medias, without deleting resources or managing access.
- **Admin**: grants the administrator permission (full access to everything).
When the current selection does not match any preset, a **Custom** badge is shown.
##### Also grants
Some levels include additional permissions automatically. When a level implies extra permissions (for example,
modifying all apps also allows creating apps), a dimmed **Also grants: …** hint is shown below the category row,
listing the implied permissions.
##### Effective permissions
Below the rows, the **Effective permissions** panel can be expanded to review everything members of this group will
be able to do - the full, de-duplicated set of permissions, including everything granted indirectly through the
levels - grouped by category, with a count for each.
Custom Widget authoring, import, migration, preview, secrets, Workshop access, and placement configuration are reserved
for administrators and are not separate assignable group permissions. Board modifiers can still move, resize, change
@@ -7,15 +7,20 @@ hide_title: true
import { WidgetHeader } from "@site/src/components/widgets/header";
import { AddingWidget } from "@site/src/components/widgets/adding";
import { WidgetConfig } from "@site/src/components/widgets/configuration";
import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
import { IconAd } from "@tabler/icons-react";
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import { dockerContainersWidget } from ".";
import { dockerIntegration } from "@site/docs/integrations/docker";
<WidgetHeader widget={dockerContainersWidget} categories={["Containers"]} />
This widget displays the resource usage of your Docker containers and allows you to manage them.
:::info
This widget reads the Docker environments configured through environment variables. You do not need to create a Docker integration under **Management → Integrations**. The widget can only be used with administrator privileges.
This widget can only be used with administrator privileges.
:::
### Screenshots
@@ -24,6 +29,16 @@ import dockerTable from "./img/table.png";
<img src={dockerTable} alt="docker-stats table docker-containers" width={128 * 3} height={128 * 2} />
### Supported Integrations
<WidgetIntegrations
items={[
{
integration: dockerIntegration,
},
]}
/>
### Interactions
Hover a column header to reveal its grab handle, then drag it to reorder the table or drag the header's edge to resize it. The layout is saved automatically for each widget instance and restored after a reload. These controls are disabled while the board is in edit mode.
@@ -8,12 +8,6 @@ export const dockerContainersWidget: WidgetDefinition = {
path: "../../widgets/docker-containers",
configuration: {
items: [
{
name: "Docker environments",
description: "Select one or more automatically discovered Docker environments, or leave empty to show all",
values: "Any Docker socket or host configured for Homarr",
defaultValue: "All Docker environments",
},
{
name: "Columns to show",
description: "Select which columns are visible in the table",
@@ -0,0 +1,35 @@
import type { Session } from "@homarr/auth";
import { api } from "@homarr/api/server";
import { getAppManagementAccess, getIntegrationManagementAccess } from "@homarr/definitions";
/**
* Session-aware wrappers around the shared management access rules in `@homarr/definitions`, so the
* navigation and the pages resolve access exactly the same way the API does.
*/
export const getAppsSectionAccess = (session: Session | null) =>
getAppManagementAccess(session?.user.permissions ?? []);
/**
* Pure variant for callers that already fetched the integrations the user can see, so the list is
* only queried once per request.
*/
export const getIntegrationsSectionAccess = (
session: Session | null,
visibleIntegrations: { permissions: { hasFullAccess: boolean } }[],
) =>
getIntegrationManagementAccess(
session?.user.permissions ?? [],
visibleIntegrations.some((integration) => integration.permissions.hasFullAccess),
);
export const getIntegrationsSectionAccessAsync = async (session: Session | null) => {
const permissions = session?.user.permissions ?? [];
// Only pay for the lookup when the answer is not already known from the global permissions.
const needsDelegatedLookup =
session !== null && !permissions.includes("integration-full-all") && !permissions.includes("integration-create");
return getIntegrationsSectionAccess(session, needsDelegatedLookup ? await api.integration.all() : []);
};
@@ -1,5 +1,5 @@
import { Fragment } from "react";
import { redirect } from "next/navigation";
import { notFound, redirect } from "next/navigation";
import { ActionIcon, ActionIconGroup, Anchor, Avatar, Text } from "@mantine/core";
import { IconBox, IconPencil } from "@tabler/icons-react";
import { z } from "zod/v4";
@@ -16,6 +16,7 @@ import { TourTarget } from "~/components/layout/header/tour-target";
import { ManageCollectionItem, ManageCollectionPage } from "~/components/manage/manage-collection";
import { MobileAffixButton } from "~/components/manage/mobile-affix-button";
import { NoResults } from "~/components/no-results";
import { getAppsSectionAccess } from "../_access";
import { AppDeleteButton } from "./_app-delete-button";
const searchParamsSchema = z.object({
@@ -41,16 +42,27 @@ interface AppsPageProps {
export default async function AppsPage(props: AppsPageProps) {
const session = await auth();
if (!session) redirect("/auth/login");
const { canManageAll, canCreate, canAccess } = getAppsSectionAccess(session);
if (!canAccess) notFound();
const canDelete = session.user.permissions.includes("app-full-all");
const searchParams = searchParamsSchema.parse(await props.searchParams);
const { items: apps, totalCount } = await api.app.getPaginated(searchParams);
// Without app-modify-all the user may add apps but not browse the ones they cannot manage,
// so the list stays empty instead of leaking every app name and URL.
const { items: apps, totalCount } = canManageAll
? await api.app.getPaginated(searchParams)
: { items: [], totalCount: 0 };
const t = await getScopedI18n("app");
const canCreate = session.user.permissions.includes("app-create");
const canModify = session.user.permissions.includes("app-modify-all");
const canDelete = session.user.permissions.includes("app-full-all");
const hasSearch = Boolean(searchParams.search?.trim());
const hasSearch = canManageAll && Boolean(searchParams.search?.trim());
const emptyState = hasSearch ? (
const emptyState = !canManageAll ? (
<NoResults
icon={IconBox}
title={t("page.list.noResults.createOnlyTitle")}
description={t("page.list.noResults.createOnlyDescription")}
action={{ label: t("page.list.noResults.action"), href: "/manage/apps/new" }}
/>
) : hasSearch ? (
<NoResults
icon={IconBox}
title={t("page.list.noResults.filteredTitle")}
@@ -82,12 +94,14 @@ export default async function AppsPage(props: AppsPageProps) {
) : undefined
}
toolbar={
<SearchInput
placeholder={`${t("search")}...`}
ariaLabel={t("search")}
defaultValue={searchParams.search}
flexExpand
/>
canManageAll ? (
<SearchInput
placeholder={`${t("search")}...`}
ariaLabel={t("search")}
defaultValue={searchParams.search}
flexExpand
/>
) : undefined
}
footer={
totalCount > searchParams.pageSize ? (
@@ -100,7 +114,6 @@ export default async function AppsPage(props: AppsPageProps) {
<AppItem
key={app.id}
app={app}
canModify={canModify}
canDelete={canDelete}
editLabel={t("page.list.action.edit", { name: app.name })}
/>
@@ -113,12 +126,11 @@ export default async function AppsPage(props: AppsPageProps) {
interface AppItemProps {
app: RouterOutputs["app"]["getPaginated"]["items"][number];
canModify: boolean;
canDelete: boolean;
editLabel: string;
}
const AppItem = ({ app, canModify, canDelete, editLabel }: AppItemProps) => {
const AppItem = ({ app, canDelete, editLabel }: AppItemProps) => {
const descriptionLines = app.description?.split("\n");
const safeHref = getSafeAppHref(app.href);
@@ -157,23 +169,19 @@ const AppItem = ({ app, canModify, canDelete, editLabel }: AppItemProps) => {
) : undefined
}
actions={
canModify || canDelete ? (
<ActionIconGroup>
{canModify && (
<ActionIcon
component={Link}
href={`/manage/apps/edit/${app.id}`}
variant="subtle"
color="gray"
size={44}
aria-label={editLabel}
>
<IconPencil size={18} stroke={1.5} />
</ActionIcon>
)}
{canDelete && <AppDeleteButton app={app} />}
</ActionIconGroup>
) : undefined
<ActionIconGroup>
<ActionIcon
component={Link}
href={`/manage/apps/edit/${app.id}`}
variant="subtle"
color="gray"
size={44}
aria-label={editLabel}
>
<IconPencil size={18} stroke={1.5} />
</ActionIcon>
{canDelete && <AppDeleteButton app={app} />}
</ActionIconGroup>
}
/>
);
@@ -1,5 +1,5 @@
import { redirect } from "next/navigation";
import { ActionIcon, ActionIconGroup, Anchor, Badge, Text } from "@mantine/core";
import { notFound, redirect } from "next/navigation";
import { ActionIcon, ActionIconGroup, Anchor, Badge, Stack, Text } from "@mantine/core";
import { IconPencil, IconPlugX } from "@tabler/icons-react";
import { z } from "zod/v4";
@@ -15,6 +15,7 @@ import { TourTarget } from "~/components/layout/header/tour-target";
import { ManageCollectionItem, ManageCollectionPage } from "~/components/manage/manage-collection";
import { MobileAffixButton } from "~/components/manage/mobile-affix-button";
import { NoResults } from "~/components/no-results";
import { getIntegrationsSectionAccess } from "../_access";
import { DeleteIntegrationActionButton } from "./_integration-buttons";
const searchParamsSchema = z.object({ search: z.string().optional() });
@@ -29,11 +30,22 @@ export default async function IntegrationsPage(props: IntegrationsPageProps) {
const searchParams = searchParamsSchema.parse(await props.searchParams);
const integrations = await api.integration.all();
const {
canManageAll: hasGlobalFullAccess,
canCreate,
canAccess,
} = getIntegrationsSectionAccess(session, integrations);
if (!canAccess) notFound();
const t = await getScopedI18n("integration");
const canCreate = session.user.permissions.includes("integration-create");
const hasGlobalFullAccess = session.user.permissions.includes("integration-full-all");
// Without integration-full-all only the integrations that were explicitly delegated to the user
// are manageable, so the list never shows an integration they cannot open.
const manageableIntegrations = integrations.filter(
(integration) => hasGlobalFullAccess || integration.permissions.hasFullAccess,
);
const query = searchParams.search?.trim().toLocaleLowerCase() ?? "";
const filteredIntegrations = integrations
const filteredIntegrations = manageableIntegrations
.filter((integration) => {
if (!query) return true;
return [integration.name, getIntegrationName(integration.kind), integration.url].some((value) =>
@@ -53,7 +65,14 @@ export default async function IntegrationsPage(props: IntegrationsPageProps) {
ariaLabel={t("page.list.ariaLabel")}
itemCount={filteredIntegrations.length}
emptyState={
hasSearch ? (
manageableIntegrations.length === 0 && !hasGlobalFullAccess ? (
<NoResults
icon={IconPlugX}
title={t("page.list.noResults.createOnlyTitle")}
description={t("page.list.noResults.createOnlyDescription")}
action={{ label: t("page.list.noResults.action"), href: "/manage/integrations/new" }}
/>
) : hasSearch ? (
<NoResults
icon={IconPlugX}
title={t("page.list.noResults.filteredTitle")}
@@ -93,24 +112,33 @@ export default async function IntegrationsPage(props: IntegrationsPageProps) {
floatingPrimaryAction={canCreate}
>
{filteredIntegrations.map((integration) => (
<IntegrationItem
key={integration.id}
integration={integration}
canManage={hasGlobalFullAccess || integration.permissions.hasFullAccess}
/>
<IntegrationItem key={integration.id} integration={integration} />
))}
</ManageCollectionPage>
);
return filteredIntegrations.length > 0 ? <TourTarget id="manage-integrations-list">{page}</TourTarget> : page;
const pageContent =
filteredIntegrations.length > 0 ? <TourTarget id="manage-integrations-list">{page}</TourTarget> : page;
if (hasGlobalFullAccess) {
return pageContent;
}
return (
<Stack gap="sm">
<Text size="sm" c="dimmed">
{t("page.list.scopedNote")}
</Text>
{pageContent}
</Stack>
);
}
interface IntegrationItemProps {
integration: RouterOutputs["integration"]["all"][number];
canManage: boolean;
}
const IntegrationItem = async ({ integration, canManage }: IntegrationItemProps) => {
const IntegrationItem = async ({ integration }: IntegrationItemProps) => {
const t = await getScopedI18n("integration");
const kindName = getIntegrationName(integration.kind);
const safeUrl = getSafeApplicationUrl(integration.url);
@@ -143,21 +171,19 @@ const IntegrationItem = async ({ integration, canManage }: IntegrationItemProps)
) : undefined
}
actions={
canManage ? (
<ActionIconGroup>
<ActionIcon
component={Link}
href={`/manage/integrations/edit/${integration.id}`}
variant="subtle"
color="gray"
size={44}
aria-label={t("page.list.action.edit", { name: integration.name })}
>
<IconPencil size={18} stroke={1.5} />
</ActionIcon>
<DeleteIntegrationActionButton integration={integration} />
</ActionIconGroup>
) : undefined
<ActionIconGroup>
<ActionIcon
component={Link}
href={`/manage/integrations/edit/${integration.id}`}
variant="subtle"
color="gray"
size={44}
aria-label={t("page.list.action.edit", { name: integration.name })}
>
<IconPencil size={18} stroke={1.5} />
</ActionIcon>
<DeleteIntegrationActionButton integration={integration} />
</ActionIconGroup>
}
/>
);
@@ -44,6 +44,7 @@ import { MainNavigation } from "~/components/layout/navigation";
import { ClientShell } from "~/components/layout/shell";
import { ManageTourGate } from "~/components/onboarding/manage-tour-gate";
import { env as nextEnv } from "~/env";
import { getAppsSectionAccess, getIntegrationsSectionAccessAsync } from "./_access";
const logger = createLogger({ module: "manageLayout" });
@@ -65,6 +66,8 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
sessionPromise,
shouldRunManageTourPromise,
]);
const appsAccess = getAppsSectionAccess(session);
const integrationsAccess = await getIntegrationsSectionAccessAsync(session);
const navigationLinks: NavigationLink[] = [
{
label: t("items.home"),
@@ -82,7 +85,7 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
icon: IconBox,
href: "/manage/apps",
label: t("items.apps"),
hidden: !session?.user.permissions.includes("app-create"),
hidden: !appsAccess.canAccess,
iconProps: {
strokeWidth: 2.5,
},
@@ -92,7 +95,7 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
icon: IconAffiliateFilled,
href: "/manage/integrations",
label: t("items.integrations"),
hidden: !session?.user.permissions.includes("integration-create"),
hidden: !integrationsAccess.canAccess,
"data-onboarding-tour-id": "manage-integrations",
},
{
@@ -1,6 +1,7 @@
import { Center, Stack, Text, Title } from "@mantine/core";
import { Anchor, Center, Stack, Text, Title } from "@mantine/core";
import { getScopedI18n } from "@homarr/translation/server";
import { Link } from "@homarr/ui";
export default async function NotFound() {
const t = await getScopedI18n("management.notFound");
@@ -9,6 +10,9 @@ export default async function NotFound() {
<Stack align="center">
<Title order={1}>{t("title")}</Title>
<Text>{t("text")}</Text>
<Anchor component={Link} href="/manage">
{t("backToHome")}
</Anchor>
</Stack>
</Center>
);
+7 -2
View File
@@ -29,7 +29,12 @@ export default async function ManagementPage() {
<Space h="md" />
<SimpleGrid cols={{ xs: 1, sm: 2, md: 3 }}>
{statistics.map((statistic) => (
<Card component={Link} href={statistic.path} key={statistic.path}>
<Card
component={Link}
href={statistic.path}
key={statistic.path}
aria-label={`${statistic.count} ${t(`statistic.${statistic.titleKey}`)}`}
>
<Group justify="space-between" wrap="nowrap">
<Group wrap="nowrap">
<Text size="xl" fw={700}>
@@ -42,7 +47,7 @@ export default async function ManagementPage() {
<Text fw={600}>{t(`statistic.${statistic.titleKey}`)}</Text>
</Stack>
</Group>
<IconArrowRight size={16} stroke={1.5} color="var(--mantine-color-dimmed)" />
<IconArrowRight size={16} stroke={1.5} color="var(--mantine-color-dimmed)" aria-hidden="true" />
</Group>
</Card>
))}
@@ -3,7 +3,7 @@ import { describe, expect, test } from "vitest";
import {
dismissDockerReconciliationCandidate,
filterDockerReconciliationInbox,
getTemplateUrl,
getValidDockerServiceUrl,
} from "./docker-reconciliation-inbox";
const candidates = [
@@ -37,44 +37,9 @@ describe("Docker reconciliation inbox", () => {
expect(dismissDockerReconciliationCandidate(dismissed, "home:new")).toBe(dismissed);
});
test("builds service URLs from the server origin and published ports", () => {
expect(
getTemplateUrl(
{
container: { name: "Custom service", ports: [{ PrivatePort: 3000, Type: "tcp" }] },
match: null,
},
"home.lan",
"hostPort",
),
).toBe("http://home.lan");
expect(
getTemplateUrl(
{
container: {
name: "Sonarr",
ports: [
{ PrivatePort: 3000, PublicPort: 3000, Type: "tcp" },
{ PrivatePort: 8989, PublicPort: 9999, Type: "tcp" },
],
},
match: { kind: "sonarr" },
},
"home.lan",
"hostPort",
),
).toBe("http://home.lan:9999");
expect(
getTemplateUrl(
{
container: { name: "Sonarr", ports: [{ PrivatePort: 8989, PublicPort: 9999, Type: "tcp" }] },
match: { kind: "sonarr" },
},
"",
"hostPort",
),
).toBe("");
test("accepts only HTTP service URLs", () => {
expect(getValidDockerServiceUrl("https://service.example.com")).toBe("https://service.example.com/");
expect(getValidDockerServiceUrl("ftp://service.example.com")).toBeNull();
expect(getValidDockerServiceUrl("service.example.com")).toBeNull();
});
});
@@ -1,6 +1,3 @@
import type { DockerServiceMatch, DockerServicePort, UrlTemplateMode } from "@homarr/definitions";
import { buildAppUrl, buildIntegrationUrl, getIntegrationDefaultPort } from "@homarr/definitions";
export type DockerReconciliationInboxFilter = "attention" | "represented" | "all";
interface DockerReconciliationInboxCandidate {
@@ -27,28 +24,11 @@ export const filterDockerReconciliationInbox = <Candidate extends DockerReconcil
export const dismissDockerReconciliationCandidate = (dismissedCandidateKeys: string[], candidateKey: string) =>
dismissedCandidateKeys.includes(candidateKey) ? dismissedCandidateKeys : [...dismissedCandidateKeys, candidateKey];
interface DockerTemplateCandidate {
container: {
name: string;
ports?: DockerServicePort[];
};
match: Pick<DockerServiceMatch, "kind"> | null;
}
export const getTemplateUrl = (candidate: DockerTemplateCandidate, serverOrigin: string, urlMode: UrlTemplateMode) => {
if (!serverOrigin.trim()) return "";
const tcpPorts = candidate.container.ports?.filter(({ Type }) => Type.toLowerCase() === "tcp") ?? [];
let publishedPort = tcpPorts.find(({ PublicPort }) => PublicPort)?.PublicPort;
if (candidate.match) {
const defaultPort = getIntegrationDefaultPort(candidate.match.kind);
const preferredPort = tcpPorts.find(
({ PrivatePort, PublicPort }) => PrivatePort === defaultPort && PublicPort !== undefined,
);
publishedPort = preferredPort?.PublicPort ?? publishedPort;
return buildIntegrationUrl(candidate.match.kind, serverOrigin, urlMode, publishedPort);
export const getValidDockerServiceUrl = (value: string) => {
try {
const url = new URL(value);
return url.protocol === "http:" || url.protocol === "https:" ? url.toString() : null;
} catch {
return null;
}
return buildAppUrl(candidate.container.name, serverOrigin, urlMode, publishedPort);
};
@@ -1,72 +1,46 @@
"use client";
import { useEffect, useId, useRef, useState } from "react";
import { useEffect, useState } from "react";
import {
Accordion,
ActionIcon,
Alert,
Autocomplete,
Avatar,
Badge,
Button,
Collapse,
Divider,
Card,
Group,
Paper,
SegmentedControl,
Select,
SimpleGrid,
Stack,
Text,
ThemeIcon,
Tooltip,
TextInput,
} from "@mantine/core";
import { useLocalStorage } from "@mantine/hooks";
import {
IconAlertTriangle,
IconApps,
IconCheck,
IconChevronDown,
IconEye,
IconEyeOff,
IconBrandDocker,
IconMinus,
IconPlugConnected,
IconRefresh,
IconSettings,
} from "@tabler/icons-react";
import { IconAlertTriangle, IconArrowRight, IconEyeOff, IconPlugConnected, IconRefresh } from "@tabler/icons-react";
import type { RouterOutputs } from "@homarr/api";
import { clientApi } from "@homarr/api/client";
import type { UrlTemplateMode } from "@homarr/definitions";
import { getIntegrationName } from "@homarr/definitions";
import { useModalAction } from "@homarr/modals";
import { AddDockerAppToHomarr } from "@homarr/modals-collection";
import { showErrorNotification } from "@homarr/notifications";
import { normalizeServiceUrl, ServiceUrlTemplate } from "@homarr/onboarding";
import { useI18n, useScopedI18n } from "@homarr/translation/client";
import { useScopedI18n } from "@homarr/translation/client";
import { Link } from "@homarr/ui";
import { IntegrationSelectModal } from "~/components/integration/integration-select-modal";
import type { DockerReconciliationInboxFilter } from "./docker-reconciliation-inbox";
import {
dismissDockerReconciliationCandidate,
filterDockerReconciliationInbox,
getTemplateUrl,
getValidDockerServiceUrl,
} from "./docker-reconciliation-inbox";
type ReconciliationCandidate = RouterOutputs["docker"]["reconcileServices"]["candidates"][number];
type ServiceHealth = RouterOutputs["docker"]["getServiceHealth"]["services"][number];
export const DockerReconciliation = ({ defaultServerOrigin }: { defaultServerOrigin: string }) => {
export const DockerReconciliation = () => {
const t = useScopedI18n("docker.reconciliation");
const tGlobal = useI18n();
const utils = clientApi.useUtils();
const panelId = useId();
const [isOpen, setIsOpen] = useLocalStorage({
key: "homarr-docker-reconciliation-open",
defaultValue: false,
});
const reconciliation = clientApi.docker.reconcileServices.useQuery();
const health = clientApi.docker.getServiceHealth.useQuery(undefined, { enabled: isOpen });
const health = clientApi.docker.getServiceHealth.useQuery();
const refreshInventory = clientApi.docker.refreshInventory.useMutation({
async onSuccess() {
await Promise.all([
@@ -87,14 +61,6 @@ export const DockerReconciliation = ({ defaultServerOrigin }: { defaultServerOri
key: "homarr-docker-reconciliation-dismissed",
defaultValue: [],
});
const [serverOrigin, setServerOrigin] = useLocalStorage({
key: "homarr-docker-service-origin",
defaultValue: defaultServerOrigin,
});
const [urlMode, setUrlMode] = useLocalStorage<UrlTemplateMode>({
key: "homarr-docker-service-url-mode",
defaultValue: "hostPort",
});
if (reconciliation.isError) {
return (
@@ -102,7 +68,7 @@ export const DockerReconciliation = ({ defaultServerOrigin }: { defaultServerOri
<Stack gap="sm">
<Text size="sm">{t("loadError.message")}</Text>
<Button variant="light" color="red" size="xs" w="fit-content" onClick={() => void reconciliation.refetch()}>
{tGlobal("common.action.tryAgain")}
{t("action.retry")}
</Button>
</Stack>
</Alert>
@@ -113,274 +79,231 @@ export const DockerReconciliation = ({ defaultServerOrigin }: { defaultServerOri
const unavailableEndpoints = reconciliation.data.endpoints.filter(({ status }) => status === "unavailable");
const candidates = filterDockerReconciliationInbox(reconciliation.data.candidates, filter, dismissedCandidateKeys);
const attentionCount = reconciliation.data.candidates.filter(
({ candidateKey, state }) =>
["newRecognized", "newApp", "moved"].includes(state) && !dismissedCandidateKeys.includes(candidateKey),
).length;
const attentionCount = health.data
? health.data.services.filter(
({ key, status }) =>
["newRecognized", "newApp", "moved"].includes(status) && !dismissedCandidateKeys.includes(key),
).length
: 0;
const isRefreshing = refreshInventory.isPending || reconciliation.isFetching || health.isFetching;
const toggleLabel = isOpen ? tGlobal("common.action.hide") : t("action.review");
return (
<Paper withBorder p="sm">
<Stack gap={isOpen ? "sm" : 0}>
<Card withBorder>
<Stack>
<Group justify="space-between" align="start">
<Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
<ThemeIcon variant="light" size="lg" radius="md">
<IconBrandDocker size={18} />
</ThemeIcon>
<div>
<Group gap="xs">
<Text fw={600}>{t("title")}</Text>
<Badge variant="light" color={attentionCount > 0 ? "blue" : "gray"} aria-live="polite">
{t("suggestions", { count: String(attentionCount) })}
</Badge>
</Group>
</div>
</Group>
<Button
variant="subtle"
size="compact-sm"
rightSection={
<IconChevronDown
size={15}
style={{ transform: isOpen ? "rotate(180deg)" : undefined, transition: "transform 150ms ease" }}
/>
}
aria-expanded={isOpen}
aria-controls={panelId}
onClick={() => setIsOpen((current) => !current)}
>
{toggleLabel}
</Button>
<div>
<Group gap="xs">
<IconPlugConnected size={20} />
<Text fw={600}>{t("title")}</Text>
</Group>
<Text c="dimmed" size="sm">
{t("description")}
</Text>
</div>
{health.data && <Badge variant="light">{t("attention", { count: String(attentionCount) })}</Badge>}
</Group>
<Collapse id={panelId} expanded={isOpen}>
<Divider mb="sm" />
<Stack gap="sm">
<ServiceUrlTemplate
serverOrigin={serverOrigin}
onServerOriginChange={setServerOrigin}
mode={urlMode}
onModeChange={setUrlMode}
/>
<Group justify="space-between">
<SegmentedControl
value={filter}
onChange={(value) => setFilter(value as DockerReconciliationInboxFilter)}
data={[
{ value: "attention", label: t("filter.attention") },
{ value: "represented", label: t("filter.represented") },
{ value: "all", label: t("filter.all") },
]}
/>
<Group gap="xs">
{dismissedCandidateKeys.length > 0 && (
<Button variant="subtle" size="xs" onClick={() => setDismissedCandidateKeys([])}>
{t("action.restoreDismissed", { count: String(dismissedCandidateKeys.length) })}
</Button>
)}
<Button
variant="light"
size="xs"
loading={isRefreshing}
leftSection={<IconRefresh size={14} />}
onClick={() => refreshInventory.mutate()}
>
{t("action.refresh")}
</Button>
</Group>
</Group>
<Group justify="space-between">
<SegmentedControl
size="xs"
value={filter}
onChange={(value) => setFilter(value as DockerReconciliationInboxFilter)}
data={[
{ value: "attention", label: t("filter.attention") },
{ value: "represented", label: t("filter.represented") },
{ value: "all", label: t("filter.all") },
]}
{unavailableEndpoints.length > 0 && (
<Alert color="yellow" icon={<IconAlertTriangle size={16} />}>
{t("endpointUnavailable", { names: unavailableEndpoints.map(({ name }) => name).join(", ") })}
</Alert>
)}
{candidates.length === 0 ? (
<Text c="dimmed" size="sm">
{reconciliation.data.candidates.length === 0 ? t("empty") : t("emptyFilter")}
</Text>
) : (
<SimpleGrid cols={{ base: 1, lg: 2 }}>
{candidates.map((candidate) => (
<DockerReconciliationCandidate
key={candidate.candidateKey}
candidate={candidate}
health={health.data?.services.find(({ key }) => key === candidate.candidateKey)}
onDismiss={() =>
setDismissedCandidateKeys((current) =>
dismissDockerReconciliationCandidate(current, candidate.candidateKey),
)
}
/>
<Group gap="xs">
{dismissedCandidateKeys.length > 0 && (
<Button variant="subtle" size="compact-xs" onClick={() => setDismissedCandidateKeys([])}>
{t("action.restoreDismissed", { count: String(dismissedCandidateKeys.length) })}
</Button>
)}
<Button
variant="light"
size="compact-xs"
loading={isRefreshing}
leftSection={<IconRefresh size={14} />}
onClick={() => refreshInventory.mutate()}
>
{tGlobal("docker.action.refresh.label")}
</Button>
</Group>
</Group>
{unavailableEndpoints.length > 0 && (
<Alert color="yellow" icon={<IconAlertTriangle size={16} />}>
{t("endpointUnavailable", { names: unavailableEndpoints.map(({ name }) => name).join(", ") })}
</Alert>
)}
{candidates.length === 0 ? (
<Text c="dimmed" size="sm">
{reconciliation.data.candidates.length === 0 ? t("empty") : t("emptyFilter")}
</Text>
) : (
<Accordion multiple variant="separated" radius="sm" chevron={null}>
{candidates.map((candidate) => (
<DockerReconciliationCandidate
key={candidate.candidateKey}
candidate={candidate}
health={health.data?.services.find(({ key }) => key === candidate.candidateKey)}
serverOrigin={serverOrigin}
urlMode={urlMode}
onDismiss={() =>
setDismissedCandidateKeys((current) =>
dismissDockerReconciliationCandidate(current, candidate.candidateKey),
)
}
/>
))}
</Accordion>
)}
</Stack>
</Collapse>
))}
</SimpleGrid>
)}
</Stack>
</Paper>
</Card>
);
};
const DockerReconciliationCandidate = ({
candidate,
health,
serverOrigin,
urlMode,
onDismiss,
}: {
candidate: ReconciliationCandidate;
health: ServiceHealth | undefined;
serverOrigin: string;
urlMode: UrlTemplateMode;
onDismiss: () => void;
}) => {
const t = useScopedI18n("docker.reconciliation");
const tGlobal = useI18n();
const { openModal: openAppModal } = useModalAction(AddDockerAppToHomarr);
const { openModal: openIntegrationModal } = useModalAction(IntegrationSelectModal);
const templateUrl = getTemplateUrl(candidate, serverOrigin, urlMode);
const urlSuggestions = Array.from(
new Set([templateUrl, ...candidate.urlCandidates.map(({ url }) => url)].filter((url) => url.length > 0)),
);
const initialUrl = urlSuggestions[0] ?? "";
const [url, setUrl] = useState(initialUrl);
const isUrlEdited = useRef(false);
const target = getCandidateTarget(candidate);
const { openModal } = useModalAction(AddDockerAppToHomarr);
const initialUrlCandidate =
candidate.urlCandidates.find(
({ url, scopes }) => url.length > 0 && (candidate.match ? true : scopes.includes("browser")),
) ?? candidate.urlCandidates.find(({ source }) => source === "manual");
const [selectedCandidateId, setSelectedCandidateId] = useState(initialUrlCandidate?.id ?? null);
const [url, setUrl] = useState(initialUrlCandidate?.url ?? "");
const selectedCandidate = candidate.urlCandidates.find(({ id }) => id === selectedCandidateId);
const validatedUrl = getValidDockerServiceUrl(url);
const isInvalidUrl = url.length > 0 && validatedUrl === null;
const target = getCandidateTarget(candidate, validatedUrl ?? "");
const actionNeedsUrl = target.kind === "createApp" || target.kind === "setupIntegration";
const visibleHealthLayers =
health?.layers.filter(({ status }) => status !== "notApplicable" && status !== "notObserved") ?? [];
const isActionDisabled = actionNeedsUrl && validatedUrl === null;
useEffect(() => {
if (isUrlEdited.current) return;
setUrl(initialUrl);
}, [initialUrl]);
setSelectedCandidateId(initialUrlCandidate?.id ?? null);
setUrl(initialUrlCandidate?.url ?? "");
}, [initialUrlCandidate?.id, initialUrlCandidate?.url]);
return (
<Accordion.Item value={candidate.candidateKey}>
<Group wrap="nowrap" gap={4} pr="sm">
<Accordion.Control
style={{ flex: 1 }}
icon={
<Avatar src={candidate.container.iconUrl} radius="sm" size="sm">
<Card withBorder padding="md">
<Stack gap="sm">
<Group justify="space-between" align="start" wrap="nowrap">
<Group wrap="nowrap">
<Avatar src={candidate.container.iconUrl} radius="sm">
{candidate.container.name.at(0)?.toUpperCase()}
</Avatar>
}
>
<div style={{ minWidth: 0 }}>
<Group gap="xs" wrap="nowrap">
<Text fw={600} size="sm" truncate>
<div>
<Text fw={600} lineClamp={1}>
{candidate.container.name}
</Text>
<Badge color={stateColor(candidate.state)} variant="light" size="xs">
{t(`state.${candidate.state}`)}
</Badge>
</Group>
<Text c="dimmed" size="xs">
{candidate.endpointName}
</Text>
</div>
</Group>
<Badge color={stateColor(candidate.state)} variant="light">
{t(`state.${candidate.state}`)}
</Badge>
</Group>
{candidate.match && (
<Group gap="xs">
<Badge variant="outline">{candidate.match.kind}</Badge>
<Text c="dimmed" size="xs">
{candidate.endpointName}
{t("match", { confidence: t(`confidence.${candidate.match.confidence}`) })}
</Text>
</Group>
)}
{candidate.representation.signals.ambiguous && (
<Alert color="yellow" icon={<IconAlertTriangle size={16} />}>
{t("ambiguous")}
</Alert>
)}
{health && (
<div>
<Text c="dimmed" size="xs" mb={4}>
{t("health.title")}
</Text>
<Group gap={4}>
{health.layers.map((layer) => (
<Badge key={layer.layer} color={healthStatusColor(layer.status)} variant="dot" size="sm">
{t(`health.layer.${layer.layer}`)}: {t(`health.status.${layer.status}`)}
</Badge>
))}
</Group>
</div>
</Accordion.Control>
<Group gap={4} wrap="nowrap">
{target.kind === "createApp" && (
)}
<Select
label={t("url.label")}
description={selectedCandidate ? t(`reason.${selectedCandidate.reason}`) : t("reason.manualHostRequired")}
value={selectedCandidateId}
data={candidate.urlCandidates.map((item) => ({
value: item.id,
label: item.url || t("url.manual"),
}))}
onChange={(value) => {
setSelectedCandidateId(value);
setUrl(candidate.urlCandidates.find(({ id }) => id === value)?.url ?? "");
}}
/>
<TextInput
label={t("url.inputLabel")}
aria-label={t("url.inputLabel")}
value={url}
placeholder="https://service.example.com"
error={isInvalidUrl ? t("url.invalid") : undefined}
onChange={(event) => setUrl(event.currentTarget.value)}
/>
<Group justify="space-between">
<Button variant="subtle" color="gray" leftSection={<IconEyeOff size={16} />} onClick={onDismiss}>
{t("action.dismiss")}
</Button>
{target.kind === "createApp" ? (
<Button
variant="light"
size="compact-xs"
leftSection={<IconApps size={14} />}
rightSection={<IconArrowRight size={16} />}
disabled={isActionDisabled}
onClick={() =>
openAppModal({
openModal({
selectedContainers: [candidate.container],
initialUrls: [(normalizeServiceUrl(url) ?? url) || null],
initialUrls: validatedUrl ? [validatedUrl] : undefined,
})
}
>
{tGlobal("integration.field.createApp.label")}
{t("action.createApp")}
</Button>
)}
{target.kind === "setupIntegration" && (
<Button
variant="light"
size="compact-xs"
leftSection={<IconPlugConnected size={14} />}
onClick={() =>
openIntegrationModal({
initialKind: target.integrationKind,
initialName: candidate.container.name,
initialUrl: normalizeServiceUrl(url) ?? url,
})
}
>
{t("action.setupIntegration")}
</Button>
)}
{(target.kind === "reviewIntegration" || target.kind === "viewRepresentation") && (
) : (
<Button
component={Link}
href={target.href}
variant="light"
size="compact-xs"
leftSection={target.kind === "reviewIntegration" ? <IconSettings size={14} /> : <IconEye size={14} />}
rightSection={<IconArrowRight size={16} />}
disabled={isActionDisabled}
onClick={(event) => {
if (isActionDisabled) event.preventDefault();
}}
>
{t(`action.${target.kind}`)}
</Button>
)}
<Tooltip label={t("action.dismiss")} events={{ hover: true, focus: true, touch: false }}>
<ActionIcon variant="subtle" color="gray" size="sm" aria-label={t("action.dismiss")} onClick={onDismiss}>
<IconEyeOff size={15} />
</ActionIcon>
</Tooltip>
</Group>
</Group>
<Accordion.Panel>
<Stack gap="sm">
{candidate.representation.signals.ambiguous && (
<Alert color="yellow" icon={<IconAlertTriangle size={16} />}>
{t("ambiguous")}
</Alert>
)}
{visibleHealthLayers.length > 0 && (
<SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="xs">
{visibleHealthLayers.map((layer) => (
<Group key={layer.layer} gap="xs" wrap="nowrap">
<HealthStatusIcon status={layer.status} />
<Text size="xs">
{t(`health.layer.${layer.layer}`)} ·{" "}
<Text component="span" c="dimmed" inherit>
{t(`health.status.${layer.status}`)}
</Text>
</Text>
</Group>
))}
</SimpleGrid>
)}
{actionNeedsUrl && (
<Autocomplete
label={tGlobal("integration.field.url.label")}
value={url}
data={urlSuggestions}
placeholder={t("url.manual")}
onChange={(value) => {
isUrlEdited.current = true;
setUrl(value);
}}
/>
)}
</Stack>
</Accordion.Panel>
</Accordion.Item>
</Stack>
</Card>
);
};
const getCandidateTarget = (candidate: ReconciliationCandidate) => {
const getCandidateTarget = (candidate: ReconciliationCandidate, url: string) => {
if (candidate.representation.signals.ambiguous) {
if (candidate.nextAction === "reviewIntegration" && candidate.match) {
const params = new URLSearchParams({ search: getIntegrationName(candidate.match.kind) });
@@ -389,7 +312,9 @@ const getCandidateTarget = (candidate: ReconciliationCandidate) => {
return { kind: "viewRepresentation" as const, href: "/manage/apps" };
}
if (candidate.state === "newRecognized" && candidate.match) {
return { kind: "setupIntegration" as const, integrationKind: candidate.match.kind };
const params = new URLSearchParams({ kind: candidate.match.kind, name: candidate.container.name });
if (url) params.set("url", url);
return { kind: "setupIntegration" as const, href: `/manage/integrations/new?${params.toString()}` };
}
if (candidate.state === "newApp") return { kind: "createApp" as const };
@@ -412,21 +337,8 @@ const stateColor = (state: ReconciliationCandidate["state"]) => {
return "blue";
};
const HealthStatusIcon = ({ status }: { status: ServiceHealth["layers"][number]["status"] }) => {
let color = "gray";
let icon = <IconMinus size={12} />;
if (["available", "configured", "linked"].includes(status)) {
color = "green";
icon = <IconCheck size={12} />;
} else if (["missing", "changed", "unused"].includes(status)) {
color = "yellow";
icon = <IconAlertTriangle size={12} />;
}
return (
<ThemeIcon color={color} variant="light" radius="xl" size="sm">
{icon}
</ThemeIcon>
);
const healthStatusColor = (status: ServiceHealth["layers"][number]["status"]) => {
if (["available", "configured", "linked"].includes(status)) return "green";
if (["missing", "changed", "unused"].includes(status)) return "yellow";
return "gray";
};
@@ -1,10 +1,8 @@
import { headers } from "next/headers";
import { notFound } from "next/navigation";
import { Stack, Title } from "@mantine/core";
import { api } from "@homarr/api/server";
import { auth } from "@homarr/auth/next";
import { extractBaseUrlFromHeaders } from "@homarr/common";
import { env } from "@homarr/docker/env";
import { getScopedI18n } from "@homarr/translation/server";
@@ -18,10 +16,7 @@ export default async function DockerPage() {
notFound();
}
const [{ containers, endpoints, timestamp }, requestHeaders] = await Promise.all([
api.docker.getContainers(),
headers(),
]);
const { containers, endpoints, timestamp } = await api.docker.getContainers();
const tDocker = await getScopedI18n("docker");
return (
@@ -29,7 +24,7 @@ export default async function DockerPage() {
<DynamicBreadcrumb />
<Stack>
<Title order={1}>{tDocker("title")}</Title>
<DockerReconciliation defaultServerOrigin={extractBaseUrlFromHeaders(requestHeaders)} />
<DockerReconciliation />
<DockerTable initialData={{ containers, endpoints, timestamp }} />
</Stack>
</>
@@ -1,17 +1,43 @@
"use client";
import type { PropsWithChildren } from "react";
import { useCallback } from "react";
import { Button, Card, Group, Switch, Text, Transition } from "@mantine/core";
import { useCallback, useId } from "react";
import {
Badge,
Box,
Button,
Card,
Checkbox,
Collapse,
Divider,
Group,
SegmentedControl,
Stack,
Text,
Tooltip,
Transition,
UnstyledButton,
} from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { IconShieldExclamation } from "@tabler/icons-react";
import { clientApi } from "@homarr/api/client";
import { objectEntries } from "@homarr/common";
import type { GroupPermissionKey } from "@homarr/definitions";
import { groupPermissionKeys } from "@homarr/definitions";
import { objectEntries, objectKeys } from "@homarr/common";
import type { GroupPermissionKey, PermissionMatrixCategory, PermissionMatrixState } from "@homarr/definitions";
import {
getPermissionsWithChildren,
groupPermissionKeys,
isCapabilityImpliedByLevel,
matrixStateToPermissions,
permissionMatrix,
permissionsToMatrixState,
} from "@homarr/definitions";
import { createFormContext } from "@homarr/form";
import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
import { useI18n, useScopedI18n } from "@homarr/translation/client";
export type PermissionLabels = Partial<Record<GroupPermissionKey, string>>;
const [FormProvider, useFormContext, useForm] = createFormContext<FormType>();
interface PermissionFormProps {
@@ -19,27 +45,17 @@ interface PermissionFormProps {
}
export const PermissionForm = ({ children, initialPermissions }: PropsWithChildren<PermissionFormProps>) => {
// Mantine compares each field against the values snapshot, so toggling a control back to its
// saved value clears the dirty state on its own - no manual bookkeeping needed here.
const form = useForm({
initialValues: groupPermissionKeys.reduce((acc, key) => {
acc[key] = initialPermissions.includes(key);
return acc;
}, {} as FormType),
onValuesChange(values) {
const currentKeys = objectEntries(values)
.filter(([_key, value]) => Boolean(value))
.map(([key]) => key);
if (
currentKeys.every((key) => initialPermissions.includes(key)) &&
initialPermissions.every((key) => currentKeys.includes(key))
) {
form.resetDirty(); // Reset dirty state if all keys are the same as initial
}
},
});
return (
<form>
<form onSubmit={(event) => event.preventDefault()}>
<FormProvider form={form}>{children}</FormProvider>
</form>
);
@@ -47,15 +63,329 @@ export const PermissionForm = ({ children, initialPermissions }: PropsWithChildr
type FormType = Record<GroupPermissionKey, boolean>;
export const PermissionSwitch = ({ name }: { name: GroupPermissionKey }) => {
const form = useFormContext();
type MatrixForm = ReturnType<typeof useFormContext>;
const props = form.getInputProps(name, {
withError: false,
type: "checkbox",
const emptyMatrixState = (): PermissionMatrixState =>
objectKeys(permissionMatrix).reduce((acc, category) => {
acc[category] = { level: 0, capabilities: [] };
return acc;
}, {} as PermissionMatrixState);
const matrixStateOf = (values: FormType) => permissionsToMatrixState(groupPermissionKeys.filter((key) => values[key]));
export const getMatrixLevel = (values: FormType, category: PermissionMatrixCategory): number =>
matrixStateOf(values)[category].level;
export const hasMatrixCapability = (
values: FormType,
category: PermissionMatrixCategory,
capability: GroupPermissionKey,
): boolean => matrixStateOf(values)[category].capabilities.includes(capability);
export const applyMatrixLevel = (form: MatrixForm, category: PermissionMatrixCategory, level: number) => {
const targetKeys = new Set(
matrixStateToPermissions({ ...emptyMatrixState(), [category]: { level, capabilities: [] } }),
);
permissionMatrix[category].levels.forEach((key) => {
form.setFieldValue(key, targetKeys.has(key));
});
// Capability keys are deliberately left untouched: a level that implies one already covers it,
// and an explicitly granted capability must survive lowering the level again.
};
return <Switch {...props} />;
export const applyMatrixCapability = (form: MatrixForm, capability: GroupPermissionKey, granted: boolean) => {
form.setFieldValue(capability, granted);
};
const presets = {
viewer: {
board: { level: 1, capabilities: [] },
app: { level: 0, capabilities: ["app-use-all"] },
integration: { level: 1, capabilities: [] },
media: { level: 1, capabilities: [] },
},
editor: {
board: { level: 2, capabilities: ["board-create"] },
app: { level: 1, capabilities: ["app-use-all"] },
integration: { level: 2, capabilities: ["integration-create"] },
"search-engine": { level: 1, capabilities: [] },
media: { level: 1, capabilities: ["media-upload"] },
},
admin: { admin: { level: 1, capabilities: [] } },
} satisfies Record<string, Partial<PermissionMatrixState>>;
export type PermissionPreset = keyof typeof presets;
const presetToFormState = (preset: PermissionPreset): FormType => {
const presetState: Partial<PermissionMatrixState> = presets[preset];
const state = objectKeys(permissionMatrix).reduce((acc, category) => {
acc[category] = presetState[category] ?? { level: 0, capabilities: [] };
return acc;
}, {} as PermissionMatrixState);
const enabledKeys = new Set(matrixStateToPermissions(state));
return groupPermissionKeys.reduce((acc, key) => {
acc[key] = enabledKeys.has(key);
return acc;
}, {} as FormType);
};
export const applyPreset = (form: MatrixForm, preset: PermissionPreset) => {
form.setValues(presetToFormState(preset));
};
export const getActivePreset = (values: FormType): PermissionPreset | null => {
return (
objectKeys(presets).find((preset) => {
const presetValues = presetToFormState(preset);
return groupPermissionKeys.every((key) => presetValues[key] === values[key]);
}) ?? null
);
};
/**
* Short, scannable label for a level. Categories with a single level use their permission label
* instead, so the control reads "No access | View logs" rather than "No access | Enabled".
*/
const levelLabelKey = (key: GroupPermissionKey) => {
if (key.endsWith("-view-all")) return "view" as const;
if (key.endsWith("-use-all")) return "use" as const;
if (key.endsWith("-interact-all")) return "interact" as const;
if (key.endsWith("-modify-all")) return "modify" as const;
if (key.endsWith("-full-all")) return "full" as const;
return null;
};
interface MatrixImpliedHintProps {
category: PermissionMatrixCategory;
permissionLabels: PermissionLabels;
}
export const MatrixImpliedHint = ({ category, permissionLabels }: MatrixImpliedHintProps) => {
const form = useFormContext();
const tPermissions = useScopedI18n("group.permission");
const level = getMatrixLevel(form.getValues(), category);
if (level === 0) {
return null;
}
const checkedKeys: GroupPermissionKey[] = permissionMatrix[category].levels.slice(0, level);
const implied = getPermissionsWithChildren(checkedKeys).filter((key) => !checkedKeys.includes(key));
if (implied.length === 0) {
return null;
}
const labels = implied.map((key) => permissionLabels[key] ?? key);
return (
<Text size="xs" c="dimmed">
{tPermissions("matrix.impliedHint", { permissions: labels.join(", ") })}
</Text>
);
};
interface MatrixRowProps {
category: PermissionMatrixCategory;
permissionLabels: PermissionLabels;
permissionDescriptions: PermissionLabels;
}
export const MatrixRow = ({ category, permissionLabels, permissionDescriptions }: MatrixRowProps) => {
const form = useFormContext();
const tPermissions = useScopedI18n("group.permission");
const values = form.getValues();
const level = getMatrixLevel(values, category);
const isDanger = category === "admin";
const disabledByAdmin = !isDanger && getMatrixLevel(values, "admin") > 0;
const { levels, capabilities } = permissionMatrix[category];
const hasSingleLevel = levels.length === 1;
const data = [
{ value: "0", label: tPermissions("matrix.none") },
...levels.map((key, index) => {
const shortKey = hasSingleLevel ? null : levelLabelKey(key);
return {
value: String(index + 1),
label: shortKey === null ? (permissionLabels[key] ?? key) : tPermissions(`matrix.level.${shortKey}`),
};
}),
];
const capabilityStates = capabilities.map((capability) => ({
capability,
checked: hasMatrixCapability(values, category, capability),
implied: isCapabilityImpliedByLevel(category, capability, level),
}));
const selectedKey = level === 0 ? undefined : levels[level - 1];
// With no access level but a capability granted, describing the row as "no access" would
// contradict the checkbox next to it, so the granted capability describes the row instead.
const describedKey = selectedKey ?? capabilityStates.find(({ checked }) => checked)?.capability;
const description =
describedKey === undefined ? tPermissions("matrix.noneDescription") : (permissionDescriptions[describedKey] ?? "");
return (
<Stack gap={6}>
<Group gap="sm" wrap="wrap" align="center" justify="space-between">
<Group gap={6} wrap="nowrap">
{isDanger && <IconShieldExclamation size={18} color="var(--mantine-color-red-8)" />}
<Text fw={500} c={isDanger ? "red.8" : undefined}>
{tPermissions(`${category}.title`)}
</Text>
</Group>
<Group gap="md" wrap="wrap" align="center">
<SegmentedControl
size="sm"
data={data}
value={String(level)}
disabled={disabledByAdmin}
aria-label={tPermissions(`${category}.title`)}
onChange={(value) => applyMatrixLevel(form, category, Number(value))}
/>
{/* Fixed-width column so every level control lines up, whatever capabilities a row has. */}
<Box w={{ base: "auto", sm: 230 }}>
<Stack gap={4}>
{capabilityStates.map(({ capability, checked, implied }) => (
<Tooltip
key={capability}
label={tPermissions("matrix.capabilityIncluded", { level: data[level]?.label ?? "" })}
disabled={!implied}
>
<Checkbox
size="sm"
label={permissionLabels[capability] ?? capability}
checked={checked}
disabled={disabledByAdmin || implied}
onChange={(event) => applyMatrixCapability(form, capability, event.currentTarget.checked)}
/>
</Tooltip>
))}
</Stack>
</Box>
</Group>
</Group>
<Text size="xs" c="dimmed">
{description}
</Text>
{disabledByAdmin && (
<Text size="xs" c="dimmed">
{tPermissions("matrix.grantedViaAdmin")}
</Text>
)}
<MatrixImpliedHint category={category} permissionLabels={permissionLabels} />
</Stack>
);
};
interface PermissionMatrixProps {
permissionLabels: PermissionLabels;
permissionDescriptions: PermissionLabels;
}
export const PermissionMatrix = ({ permissionLabels, permissionDescriptions }: PermissionMatrixProps) => (
<Card withBorder p="md">
<Stack gap="md">
{objectKeys(permissionMatrix).map((category, index) => (
<Stack key={category} gap="md">
{index > 0 && <Divider />}
<MatrixRow
category={category}
permissionLabels={permissionLabels}
permissionDescriptions={permissionDescriptions}
/>
</Stack>
))}
</Stack>
</Card>
);
export const PresetButtons = () => {
const form = useFormContext();
const tPermissions = useScopedI18n("group.permission");
const activePreset = getActivePreset(form.getValues());
return (
<Group gap="xs" wrap="wrap">
<Text size="sm" fw={500}>
{tPermissions("matrix.preset.label")}
</Text>
{(["viewer", "editor", "admin"] as const).map((preset) => (
<Tooltip key={preset} label={tPermissions(`matrix.preset.${preset}Description`)}>
<Button
size="xs"
variant={activePreset === preset ? "filled" : "default"}
onClick={() => applyPreset(form, preset)}
>
{tPermissions(`matrix.preset.${preset}`)}
</Button>
</Tooltip>
))}
{activePreset === null && <Badge variant="light">{tPermissions("matrix.preset.custom")}</Badge>}
</Group>
);
};
interface EffectivePermissionPreviewProps {
permissionLabels: PermissionLabels;
}
export const EffectivePermissionPreview = ({ permissionLabels }: EffectivePermissionPreviewProps) => {
const form = useFormContext();
const tPermissions = useScopedI18n("group.permission");
const [opened, { toggle }] = useDisclosure(false);
const panelId = useId();
const values = form.getValues();
const checkedKeys = groupPermissionKeys.filter((key) => values[key]);
const effective = getPermissionsWithChildren(checkedKeys);
const grouped = objectKeys(permissionMatrix)
.map((category) => ({
category,
keys: effective.filter((key) => key === category || key.startsWith(`${category}-`)),
}))
.filter(({ keys }) => keys.length > 0);
return (
<Card withBorder p="md">
<UnstyledButton onClick={toggle} w="100%" aria-expanded={opened} aria-controls={panelId}>
<Group justify="space-between" wrap="nowrap">
<Stack gap={0}>
<Text fw={500}>{tPermissions("matrix.effective.title")}</Text>
<Text size="xs" c="dimmed">
{tPermissions("matrix.effective.description")}
</Text>
</Stack>
<Badge variant="light">{effective.length}</Badge>
</Group>
</UnstyledButton>
<Collapse id={panelId} expanded={opened}>
<Stack gap="xs" mt="sm">
{grouped.length === 0 ? (
<Text size="sm" c="dimmed">
{tPermissions("matrix.effective.empty")}
</Text>
) : (
grouped.map(({ category, keys }) => (
<Group key={category} gap="xs" wrap="wrap" align="flex-start">
<Text size="sm" fw={500}>
{tPermissions(`${category}.title`)}
</Text>
<Badge size="sm" variant="light">
{keys.length}
</Badge>
<Text size="sm" c="dimmed">
{keys.map((key) => permissionLabels[key] ?? key).join(", ")}
</Text>
</Group>
))
)}
</Stack>
</Collapse>
</Card>
);
};
interface SaveAffixProps {
@@ -80,8 +410,10 @@ export const SaveAffix = ({ groupId }: SaveAffixProps) => {
},
{
onSuccess: () => {
// Set new initial values for discard and reset dirty state
// setInitialValues moves the snapshot so Discard returns here, but only resetDirty clears
// the dirty flags that keep the unsaved-changes bar on screen.
form.setInitialValues(values);
form.resetDirty(values);
showSuccessNotification({
title: tNotification("success.title"),
message: tNotification("success.message"),
@@ -1,6 +1,5 @@
import React from "react";
import { notFound } from "next/navigation";
import { Card, CardSection, Divider, Group, Stack, Text, Title } from "@mantine/core";
import { Stack, Title } from "@mantine/core";
import { api } from "@homarr/api/server";
import { auth } from "@homarr/auth/next";
@@ -9,7 +8,14 @@ import type { GroupPermissionKey } from "@homarr/definitions";
import { groupPermissions } from "@homarr/definitions";
import { getI18n, getScopedI18n } from "@homarr/translation/server";
import { PermissionForm, PermissionSwitch, SaveAffix } from "./_group-permission-form";
import type { PermissionLabels } from "./_group-permission-form";
import {
EffectivePermissionPreview,
PermissionForm,
PermissionMatrix,
PresetButtons,
SaveAffix,
} from "./_group-permission-form";
interface GroupPermissionsPageProps {
params: Promise<{
@@ -26,27 +32,21 @@ export default async function GroupPermissionsPage(props: GroupPermissionsPagePr
}
const group = await api.group.getById({ id: params.id });
const tPermissions = await getScopedI18n("group.permission");
const t = await getI18n();
const { permissionLabels, permissionDescriptions } = await buildPermissionTextsAsync();
return (
<Stack>
<Title>{t("management.page.group.setting.permissions.title")}</Title>
<PermissionForm initialPermissions={group.permissions}>
<Stack pos="relative">
{objectKeys(groupPermissions).map((group) => {
const isDanger = group === "admin";
<PresetButtons />
return (
<Stack key={group} gap="sm">
<Title order={2} c={isDanger ? "red.8" : undefined}>
{tPermissions(`${group}.title`)}
</Title>
<PermissionCard isDanger={isDanger} group={group} />
</Stack>
);
})}
<PermissionMatrix permissionLabels={permissionLabels} permissionDescriptions={permissionDescriptions} />
<EffectivePermissionPreview permissionLabels={permissionLabels} />
<SaveAffix groupId={group.id} />
</Stack>
@@ -55,66 +55,21 @@ export default async function GroupPermissionsPage(props: GroupPermissionsPagePr
);
}
interface PermissionCardProps {
group: keyof typeof groupPermissions;
isDanger: boolean;
}
const buildPermissionTextsAsync = async () => {
const permissionLabels: PermissionLabels = {};
const permissionDescriptions: PermissionLabels = {};
const PermissionCard = async ({ group, isDanger }: PermissionCardProps) => {
const t = await getScopedI18n(`group.permission.${group}.item`);
const item = groupPermissions[group];
const permissions = typeof item !== "boolean" ? item : ([group] as "admin"[]);
for (const category of objectKeys(groupPermissions)) {
const tItem = await getScopedI18n(`group.permission.${category}.item`);
const item = groupPermissions[category];
const suffixes = typeof item !== "boolean" ? item : (["admin"] as const);
return (
<Card
p="md"
style={{
borderColor: isDanger ? "var(--mantine-color-red-8)" : undefined,
}}
>
<Stack gap="sm">
{permissions.map((permission, index) => (
<React.Fragment key={permission}>
<PermissionRow
name={createGroupPermissionKey(group, permission)}
label={t(`${permission}.label`)}
description={t(`${permission}.description`)}
/>
{index < permissions.length - 1 && (
<CardSection>
<Divider />
</CardSection>
)}
</React.Fragment>
))}
</Stack>
</Card>
);
};
const createGroupPermissionKey = (group: keyof typeof groupPermissions, permission: string): GroupPermissionKey => {
if (typeof groupPermissions[group] === "boolean") {
return group as GroupPermissionKey;
suffixes.forEach((suffix) => {
const key = (typeof item !== "boolean" ? `${category}-${suffix}` : "admin") as GroupPermissionKey;
permissionLabels[key] = tItem(`${suffix}.label`);
permissionDescriptions[key] = tItem(`${suffix}.description`);
});
}
return `${group}-${permission}` as GroupPermissionKey;
};
interface PermissionRowProps {
name: GroupPermissionKey;
label: string;
description: string;
}
const PermissionRow = ({ name, label, description }: PermissionRowProps) => {
return (
<Group justify="space-between" align="center" wrap="nowrap">
<Stack gap={0}>
<Text fw={500}>{label}</Text>
<Text c="gray.5">{description}</Text>
</Stack>
<PermissionSwitch name={name} />
</Group>
);
return { permissionLabels, permissionDescriptions };
};
@@ -1,13 +1,12 @@
"use client";
import { useState } from "react";
import { Group, ScrollArea, Title, UnstyledButton } from "@mantine/core";
import { IconArrowLeft, IconX } from "@tabler/icons-react";
import { Group, ScrollArea, Title } from "@mantine/core";
import { IconArrowLeft } from "@tabler/icons-react";
import type { IntegrationKind } from "@homarr/definitions";
import { getIntegrationName } from "@homarr/definitions";
import { createModal, modalSizeSelect, useModalAction } from "@homarr/modals";
import { useI18n } from "@homarr/translation/client";
import { IntegrationAvatar } from "@homarr/ui";
import { NewIntegrationForm } from "~/app/[locale]/manage/integrations/new/_integration-new-form";
@@ -20,15 +19,11 @@ interface IntegrationSelectModalProps {
enableMockIntegration?: boolean;
allowedKinds?: readonly IntegrationKind[];
completionBoardId?: string;
initialKind?: IntegrationKind;
initialUrl?: string;
initialName?: string;
}
export const IntegrationSelectModal = createModal<IntegrationSelectModalProps>(({ actions, innerProps }) => {
const t = useI18n();
const [step, setStep] = useState<"select" | "form">(innerProps.initialKind ? "form" : "select");
const [selectedKind, setSelectedKind] = useState<IntegrationKind | null>(innerProps.initialKind ?? null);
const [step, setStep] = useState<"select" | "form">("select");
const [selectedKind, setSelectedKind] = useState<IntegrationKind | null>(null);
const { openModal: openCompletionModal } = useModalAction(IntegrationCompletionModal);
const handleSelect = (kind: IntegrationKind) => {
@@ -40,7 +35,6 @@ export const IntegrationSelectModal = createModal<IntegrationSelectModalProps>((
setStep("select");
setSelectedKind(null);
};
const handleFormBack = innerProps.initialKind ? actions.closeModal : handleBack;
const handleSuccess = (result?: CreatedIntegrationResult) => {
actions.closeModal();
@@ -52,29 +46,14 @@ export const IntegrationSelectModal = createModal<IntegrationSelectModalProps>((
};
if (step === "form" && selectedKind) {
let HeaderIcon = IconArrowLeft;
let headerLabel = t("common.action.previous");
if (innerProps.initialKind) {
HeaderIcon = IconX;
headerLabel = t("common.action.close");
}
return (
<ScrollArea.Autosize mah="80vh">
<UnstyledButton mb="md" onClick={handleFormBack} aria-label={headerLabel}>
<Group gap="xs">
<HeaderIcon size={18} />
<IntegrationAvatar kind={selectedKind} size="sm" />
<Title order={4}>{getIntegrationName(selectedKind)}</Title>
</Group>
</UnstyledButton>
<NewIntegrationForm
kind={selectedKind}
initialUrl={innerProps.initialUrl}
initialName={innerProps.initialName}
onSuccess={handleSuccess}
onCancel={handleFormBack}
/>
<Group gap="xs" mb="md" style={{ cursor: "pointer" }} onClick={handleBack}>
<IconArrowLeft size={18} />
<IntegrationAvatar kind={selectedKind} size="sm" />
<Title order={4}>{getIntegrationName(selectedKind)}</Title>
</Group>
<NewIntegrationForm kind={selectedKind} onSuccess={handleSuccess} onCancel={handleBack} />
</ScrollArea.Autosize>
);
}
+14 -2
View File
@@ -18,7 +18,8 @@ import { AppAccessControl } from "./app/app-access-control";
const defaultIcon = "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons@master/svg/homarr.svg";
export const appRouter = createTRPCRouter({
getPaginated: protectedProcedure
getPaginated: permissionRequiredProcedure
.requiresPermission("app-modify-all")
.meta({
openapi: {
method: "GET",
@@ -50,7 +51,8 @@ export const appRouter = createTRPCRouter({
totalCount,
};
}),
all: protectedProcedure
all: permissionRequiredProcedure
.requiresPermission("app-modify-all")
.input(z.void())
.output(z.array(selectAppSchema))
.meta({
@@ -88,6 +90,16 @@ export const appRouter = createTRPCRouter({
},
})
.query(({ ctx, input }) => {
if (
!ctx.session.user.permissions.includes("app-modify-all") &&
!ctx.session.user.permissions.includes("board-modify-all")
) {
throw new TRPCError({
code: "FORBIDDEN",
message: "Permission denied",
});
}
return ctx.db.query.apps.findMany({
where: like(apps.name, `%${input.query}%`),
orderBy: asc(apps.name),
@@ -23,11 +23,6 @@ const dockerContainerTargetSchema = z.object({
});
const dockerContainerTargetsSchema = z.array(dockerContainerTargetSchema).min(1).max(100);
const normalizeGetContainersInput = (input: { endpointIds?: string[] } | undefined) => {
if (!input?.endpointIds || input.endpointIds.length === 0) return {};
return input;
};
export const dockerRouter = createTRPCRouter({
reconcileServices: permissionRequiredProcedure
.requiresPermission("admin")
@@ -70,14 +65,12 @@ export const dockerRouter = createTRPCRouter({
.meta({
mcp: {
enabled: true,
description:
"List Docker containers with their state, image, CPU/memory usage, and ports. Optionally filter by endpoint IDs; omitted or empty means all endpoints.",
description: "List all Docker containers with their state, image, CPU/memory usage, and ports",
},
})
.concat(dockerMiddleware())
.input(z.object({ endpointIds: z.array(z.string().min(1)).max(100).optional() }).optional())
.query(async ({ input }) => {
const innerHandler = dockerContainersRequestHandler.handler(normalizeGetContainersInput(input));
.query(async () => {
const innerHandler = dockerContainersRequestHandler.handler({});
const result = await innerHandler.getDataAsync();
const { data, timestamp } = result;
+36 -9
View File
@@ -302,16 +302,43 @@ export const groupRouter = createTRPCRouter({
.mutation(async ({ input, ctx }) => {
await throwIfGroupNotFoundAsync(ctx.db, input.groupId);
await ctx.db.delete(groupPermissions).where(eq(groupPermissions.groupId, input.groupId));
// Stored exactly as selected - implied permissions are resolved at read time through
// getPermissionsWithChildren, so nothing is silently escalated here.
const permissions = [...new Set(input.permissions)];
if (input.permissions.length > 0) {
await ctx.db.insert(groupPermissions).values(
input.permissions.map((permission) => ({
groupId: input.groupId,
permission,
})),
);
}
await handleTransactionsAsync(ctx.db, {
async handleAsync(db, schema) {
await db.transaction(async (transaction) => {
await transaction.delete(schema.groupPermissions).where(eq(schema.groupPermissions.groupId, input.groupId));
if (permissions.length === 0) {
return;
}
await transaction.insert(schema.groupPermissions).values(
permissions.map((permission) => ({
groupId: input.groupId,
permission,
})),
);
});
},
handleSync(db) {
db.transaction((transaction) => {
transaction.delete(groupPermissions).where(eq(groupPermissions.groupId, input.groupId)).run();
if (permissions.length === 0) {
return;
}
transaction
.insert(groupPermissions)
.values(
permissions.map((permission) => ({
groupId: input.groupId,
permission,
})),
)
.run();
});
},
});
}),
transferOwnership: permissionRequiredProcedure
.requiresPermission("admin")
+46 -4
View File
@@ -1,4 +1,6 @@
import { isProviderEnabled } from "@homarr/auth/server";
import { constructIntegrationPermissions } from "@homarr/auth/shared";
import type { Database } from "@homarr/db";
import { db, eq, inArray, or } from "@homarr/db";
import {
apps,
@@ -6,16 +8,46 @@ import {
boardUserPermissions,
groupMembers,
groups,
integrationGroupPermissions,
integrationUserPermissions,
integrations,
invites,
medias,
searchEngines,
users,
} from "@homarr/db/schema";
import { getAppManagementAccess, getIntegrationManagementAccess } from "@homarr/definitions";
import type { TranslationObject } from "@homarr/translation";
import { createTRPCRouter, publicProcedure } from "../trpc";
const getFullAccessIntegrationIdsAsync = async (db: Database, userId: string) => {
const groupsOfCurrentUser = await db.query.groupMembers.findMany({
where: eq(groupMembers.userId, userId),
});
const accessibleIntegrations = await db.query.integrations.findMany({
columns: {
id: true,
},
with: {
userPermissions: {
where: eq(integrationUserPermissions.userId, userId),
},
groupPermissions: {
where: inArray(
integrationGroupPermissions.groupId,
groupsOfCurrentUser.map((group) => group.groupId),
),
},
},
});
return accessibleIntegrations
.filter((integration) => constructIntegrationPermissions(integration, null).hasFullAccess)
.map((integration) => integration.id);
};
interface HomeStatistic {
titleKey: keyof TranslationObject["management"]["page"]["home"]["statistic"];
subtitleKey: keyof TranslationObject["management"]["page"]["home"]["statisticLabel"];
@@ -92,20 +124,30 @@ export const homeRouter = createTRPCRouter({
});
}
if (ctx.session?.user.permissions.includes("integration-create")) {
// A card is only shown when the page behind it is reachable, and it counts only what the user is
// allowed to see. The rules come from @homarr/definitions so this cannot drift from the pages.
const permissions = ctx.session?.user.permissions ?? [];
const hasGlobalFullIntegrationAccess = permissions.includes("integration-full-all");
const fullAccessIntegrationIds =
hasGlobalFullIntegrationAccess || !ctx.session?.user
? []
: await getFullAccessIntegrationIdsAsync(ctx.db, ctx.session.user.id);
const integrationAccess = getIntegrationManagementAccess(permissions, fullAccessIntegrationIds.length > 0);
if (integrationAccess.canAccess) {
statistics.push({
titleKey: "integration",
subtitleKey: "resources",
count: await db.$count(integrations),
count: integrationAccess.canManageAll ? await db.$count(integrations) : fullAccessIntegrationIds.length,
path: "/manage/integrations",
});
}
if (ctx.session?.user.permissions.includes("app-create")) {
const appAccess = getAppManagementAccess(permissions);
if (appAccess.canAccess) {
statistics.push({
titleKey: "app",
subtitleKey: "resources",
count: await db.$count(apps),
count: appAccess.canManageAll ? await db.$count(apps) : 0,
path: "/manage/apps",
});
}
@@ -1,12 +1,13 @@
import { TRPCError } from "@trpc/server";
import { z } from "zod/v4";
import type { Session } from "@homarr/auth";
import { hasQueryAccessToIntegrationsAsync } from "@homarr/auth/server";
import { constructIntegrationPermissions } from "@homarr/auth/shared";
import { createId, objectEntries } from "@homarr/common";
import { decryptSecret, encryptSecret } from "@homarr/common/server";
import { createLogger } from "@homarr/core/infrastructure/logs";
import type { Database } from "@homarr/db";
import type { Database, SQL } from "@homarr/db";
import { and, asc, eq, handleTransactionsAsync, inArray, like, or } from "@homarr/db";
import {
apps,
@@ -17,7 +18,7 @@ import {
integrationSecrets,
integrationUserPermissions,
} from "@homarr/db/schema";
import type { IntegrationSecretKind } from "@homarr/definitions";
import type { GroupPermissionKey, IntegrationPermission, IntegrationSecretKind } from "@homarr/definitions";
import {
getIntegrationKindsByCategory,
getPermissionsWithParents,
@@ -71,80 +72,18 @@ export const integrationRouter = createTRPCRouter({
},
})
.query(async ({ ctx }) => {
const groupsOfCurrentUser = await ctx.db.query.groupMembers.findMany({
where: eq(groupMembers.userId, ctx.session.user.id),
});
const integrations = await ctx.db.query.integrations.findMany({
with: {
userPermissions: {
where: eq(integrationUserPermissions.userId, ctx.session.user.id),
},
groupPermissions: {
where: inArray(
integrationGroupPermissions.groupId,
groupsOfCurrentUser.map((group) => group.groupId),
),
},
},
});
return integrations
.map((integration) => {
const permissions = constructIntegrationPermissions(integration, ctx.session);
return {
id: integration.id,
name: integration.name,
kind: integration.kind,
url: integration.url,
permissions,
};
})
.toSorted(
(integrationA, integrationB) =>
integrationKinds.indexOf(integrationA.kind) - integrationKinds.indexOf(integrationB.kind),
);
return await getAccessibleIntegrationsAsync(ctx);
}),
allThatSupportSearch: protectedProcedure.query(async ({ ctx }) => {
const groupsOfCurrentUser = await ctx.db.query.groupMembers.findMany({
where: eq(groupMembers.userId, ctx.session.user.id),
});
const integrationsFromDb = await ctx.db.query.integrations.findMany({
with: {
userPermissions: {
where: eq(integrationUserPermissions.userId, ctx.session.user.id),
},
groupPermissions: {
where: inArray(
integrationGroupPermissions.groupId,
groupsOfCurrentUser.map((group) => group.groupId),
),
},
},
where: inArray(
return await getAccessibleIntegrationsAsync(
ctx,
inArray(
integrations.kind,
objectEntries(integrationDefs)
.filter(([_, integration]) => [...integration.category].includes("search"))
.map(([kind, _]) => kind),
),
});
return integrationsFromDb
.map((integration) => {
const permissions = constructIntegrationPermissions(integration, ctx.session);
return {
id: integration.id,
name: integration.name,
kind: integration.kind,
url: integration.url,
permissions,
};
})
.toSorted(
(integrationA, integrationB) =>
integrationKinds.indexOf(integrationA.kind) - integrationKinds.indexOf(integrationB.kind),
);
);
}),
allOfGivenCategory: protectedProcedure
.input(
@@ -153,42 +92,10 @@ export const integrationRouter = createTRPCRouter({
}),
)
.query(async ({ ctx, input }) => {
const groupsOfCurrentUser = await ctx.db.query.groupMembers.findMany({
where: eq(groupMembers.userId, ctx.session.user.id),
});
const intergrationKinds = getIntegrationKindsByCategory(input.category);
const integrationsFromDb = await ctx.db.query.integrations.findMany({
with: {
userPermissions: {
where: eq(integrationUserPermissions.userId, ctx.session.user.id),
},
groupPermissions: {
where: inArray(
integrationGroupPermissions.groupId,
groupsOfCurrentUser.map((group) => group.groupId),
),
},
},
where: inArray(integrations.kind, intergrationKinds),
});
return integrationsFromDb
.map((integration) => {
const permissions = constructIntegrationPermissions(integration, ctx.session);
return {
id: integration.id,
name: integration.name,
kind: integration.kind,
url: integration.url,
permissions,
};
})
.toSorted(
(integrationA, integrationB) =>
integrationKinds.indexOf(integrationA.kind) - integrationKinds.indexOf(integrationB.kind),
);
return await getAccessibleIntegrationsAsync(
ctx,
inArray(integrations.kind, getIntegrationKindsByCategory(input.category)),
);
}),
search: protectedProcedure
.meta({
@@ -205,11 +112,29 @@ export const integrationRouter = createTRPCRouter({
}),
)
.query(async ({ ctx, input }) => {
return await ctx.db.query.integrations.findMany({
const groupsOfCurrentUser = await ctx.db.query.groupMembers.findMany({
where: eq(groupMembers.userId, ctx.session.user.id),
});
const integrationsFromDb = await ctx.db.query.integrations.findMany({
where: like(integrations.name, `%${input.query}%`),
orderBy: asc(integrations.name),
limit: input.limit,
with: getIntegrationAccessRelationsAsync(
ctx.session.user.id,
groupsOfCurrentUser.map((group) => group.groupId),
),
});
return integrationsFromDb
.filter((integration) => hasIntegrationQueryAccess(ctx.session, integration))
.toSorted(
(integrationA, integrationB) =>
integrationA.name.localeCompare(integrationB.name) || integrationA.id.localeCompare(integrationB.id),
)
.slice(0, input.limit)
.map(
({ userPermissions: _userPermissions, groupPermissions: _groupPermissions, ...integration }) => integration,
);
}),
// This is used to get the integrations by their ids it's public because it's needed to get integrations data in the boards
byIds: publicProcedure.input(z.array(z.string())).query(async ({ ctx, input }) => {
@@ -774,6 +699,66 @@ export const integrationRouter = createTRPCRouter({
}),
});
const globalIntegrationPermissions = [
"integration-use-all",
"integration-interact-all",
"integration-full-all",
] satisfies GroupPermissionKey[];
const hasGlobalIntegrationAccess = (session: Session | null) =>
globalIntegrationPermissions.some((permission) => session?.user.permissions.includes(permission) ?? false);
const hasIntegrationQueryAccess = (
session: Session | null,
integration: {
userPermissions: { permission: IntegrationPermission }[];
groupPermissions: { permission: IntegrationPermission }[];
},
) => hasGlobalIntegrationAccess(session) || constructIntegrationPermissions(integration, session).hasUseAccess;
const getIntegrationAccessRelationsAsync = (userId: string, groupIds: string[]) => ({
userPermissions: {
where: eq(integrationUserPermissions.userId, userId),
},
groupPermissions: {
where: inArray(integrationGroupPermissions.groupId, groupIds),
},
});
const getAccessibleIntegrationsAsync = async (ctx: { db: Database; session: Session }, where?: SQL) => {
const groupsOfCurrentUser = await ctx.db.query.groupMembers.findMany({
where: eq(groupMembers.userId, ctx.session.user.id),
});
const integrationsFromDb = await ctx.db.query.integrations.findMany({
where,
with: getIntegrationAccessRelationsAsync(
ctx.session.user.id,
groupsOfCurrentUser.map((group) => group.groupId),
),
});
return integrationsFromDb
.filter((integration) => hasIntegrationQueryAccess(ctx.session, integration))
.map((integration) => {
const permissions = constructIntegrationPermissions(integration, ctx.session);
return {
id: integration.id,
name: integration.name,
kind: integration.kind,
url: integration.url,
permissions,
};
})
.toSorted(
(integrationA, integrationB) =>
integrationKinds.indexOf(integrationA.kind) - integrationKinds.indexOf(integrationB.kind) ||
integrationA.name.localeCompare(integrationB.name) ||
integrationA.id.localeCompare(integrationB.id),
);
};
interface IntegrationRouterContext {
db: Database;
session: Parameters<typeof hasQueryAccessToIntegrationsAsync>[2];
+54 -3
View File
@@ -33,7 +33,7 @@ describe("all should return all apps", () => {
const caller = appRouter.createCaller({
db,
deviceType: undefined,
session: createDefaultSession(),
session: createDefaultSession(["app-modify-all"]),
});
await db.insert(apps).values([
@@ -74,6 +74,20 @@ describe("all should return all apps", () => {
// Assert
await expect(actAsync()).rejects.toThrow("UNAUTHORIZED");
});
test("should throw FORBIDDEN without app-modify-all permission", async () => {
// Arrange
const caller = appRouter.createCaller({
db: createDb(),
deviceType: undefined,
session: createDefaultSession(),
});
// Act
const actAsync = async () => await caller.all();
// Assert
await expect(actAsync()).rejects.toThrow("Permission denied");
});
});
describe("getPaginated should return apps to authenticated users", () => {
@@ -87,12 +101,12 @@ describe("getPaginated should return apps to authenticated users", () => {
await expect(caller.getPaginated({ page: 1, pageSize: 10 })).rejects.toThrow("UNAUTHORIZED");
});
test("should return apps without board permissions", async () => {
test("should return apps with app-modify-all permission", async () => {
const db = createDb();
const caller = appRouter.createCaller({
db,
deviceType: undefined,
session: createDefaultSession(),
session: createDefaultSession(["app-modify-all"]),
});
await db.insert(apps).values({ id: "1", name: "Homarr", iconUrl: "https://homarr.dev/icon.svg" });
@@ -101,6 +115,43 @@ describe("getPaginated should return apps to authenticated users", () => {
items: [{ id: "1" }],
});
});
test("should throw FORBIDDEN without app-modify-all permission", async () => {
const caller = appRouter.createCaller({
db: createDb(),
deviceType: undefined,
session: createDefaultSession(),
});
await expect(caller.getPaginated({ page: 1, pageSize: 10 })).rejects.toThrow("Permission denied");
});
});
describe("search should require app-modify-all or board-modify-all permission", () => {
test("should throw FORBIDDEN without app-modify-all or board-modify-all permission", async () => {
const caller = appRouter.createCaller({
db: createDb(),
deviceType: undefined,
session: createDefaultSession(),
});
await expect(caller.search({ query: "Homarr" })).rejects.toThrow("Permission denied");
});
test("should return apps with board-modify-all permission", async () => {
const db = createDb();
const caller = appRouter.createCaller({
db,
deviceType: undefined,
session: createDefaultSession(["board-modify-all"]),
});
await db.insert(apps).values({ id: "1", name: "Homarr", iconUrl: "https://homarr.dev/icon.svg" });
const result = await caller.search({ query: "Homarr" });
expect(result).toHaveLength(1);
expect(result[0]!.id).toBe("1");
});
});
describe("byId should return an app by id", () => {
+159
View File
@@ -449,6 +449,165 @@ describe("savePermissions should save permissions for group", () => {
expect(permissions.map(({ permission }) => permission)).toEqual(["integration-use-all", "board-full-all"]);
});
test("with a standalone create permission it should not escalate to its parent permission", async () => {
// Arrange
const db = createDb();
const caller = groupRouter.createCaller({ db, deviceType: undefined, session: adminSession });
const groupId = createId();
await db.insert(groups).values({
id: groupId,
name: "Group",
position: 1,
});
// Act
await caller.savePermissions({
groupId,
permissions: ["board-create"],
});
// Assert
const permissions = await db.query.groupPermissions.findMany({
where: eq(groupPermissions.groupId, groupId),
});
expect(permissions.map(({ permission }) => permission)).toEqual(["board-create"]);
});
test.each([["app-create"], ["integration-create"], ["search-engine-create"], ["media-upload"]] as const)(
"with %s alone it should persist exactly that permission",
async (permission) => {
// Arrange
const db = createDb();
const caller = groupRouter.createCaller({ db, deviceType: undefined, session: adminSession });
const groupId = createId();
await db.insert(groups).values({
id: groupId,
name: "Group",
position: 1,
});
// Act
await caller.savePermissions({ groupId, permissions: [permission] });
// Assert
const permissions = await db.query.groupPermissions.findMany({
where: eq(groupPermissions.groupId, groupId),
});
expect(permissions.map(({ permission: key }) => key)).toEqual([permission]);
},
);
test("with a create permission and its parent it should persist exactly two rows", async () => {
// Arrange
const db = createDb();
const caller = groupRouter.createCaller({ db, deviceType: undefined, session: adminSession });
const groupId = createId();
await db.insert(groups).values({
id: groupId,
name: "Group",
position: 1,
});
// Act
await caller.savePermissions({
groupId,
permissions: ["app-create", "app-modify-all"],
});
// Assert
const permissions = await db.query.groupPermissions.findMany({
where: eq(groupPermissions.groupId, groupId),
});
expect(permissions.length).toBe(2);
expect(permissions.map(({ permission }) => permission).toSorted()).toEqual(["app-create", "app-modify-all"]);
});
test("with duplicate permissions it should persist each permission only once", async () => {
// Arrange
const db = createDb();
const caller = groupRouter.createCaller({ db, deviceType: undefined, session: adminSession });
const groupId = createId();
await db.insert(groups).values({
id: groupId,
name: "Group",
position: 1,
});
// Act
await caller.savePermissions({
groupId,
permissions: ["board-view-all", "board-view-all", "board-modify-all"],
});
// Assert
const permissions = await db.query.groupPermissions.findMany({
where: eq(groupPermissions.groupId, groupId),
});
expect(permissions.map(({ permission }) => permission).toSorted()).toEqual(["board-modify-all", "board-view-all"]);
});
test("saving the same permissions twice should be idempotent", async () => {
// Arrange
const db = createDb();
const caller = groupRouter.createCaller({ db, deviceType: undefined, session: adminSession });
const groupId = createId();
await db.insert(groups).values({
id: groupId,
name: "Group",
position: 1,
});
// Act
await caller.savePermissions({ groupId, permissions: ["board-create", "media-upload"] });
await caller.savePermissions({ groupId, permissions: ["board-create", "media-upload"] });
// Assert
const permissions = await db.query.groupPermissions.findMany({
where: eq(groupPermissions.groupId, groupId),
});
expect(permissions.map(({ permission }) => permission).toSorted()).toEqual(["board-create", "media-upload"]);
});
test("with an empty permission list it should clear all existing permissions", async () => {
// Arrange
const db = createDb();
const caller = groupRouter.createCaller({ db, deviceType: undefined, session: adminSession });
const groupId = createId();
await db.insert(groups).values({
id: groupId,
name: "Group",
position: 1,
});
await db.insert(groupPermissions).values([
{ groupId, permission: "admin" },
{ groupId, permission: "board-full-all" },
]);
// Act
await caller.savePermissions({
groupId,
permissions: [],
});
// Assert
const permissions = await db.query.groupPermissions.findMany({
where: eq(groupPermissions.groupId, groupId),
});
expect(permissions.length).toBe(0);
});
test("with non existing group it should throw not found error", async () => {
// Arrange
const db = createDb();
@@ -58,6 +58,171 @@ describe("all should return all integrations", () => {
expect(result[1]!.kind).toBe("homeAssistant");
expect(result.every(({ permissions }) => permissions.hasFullAccess && permissions.hasUseAccess)).toBe(true);
});
test("with integration full access and no per-integration rows should return all integrations with full access", async () => {
const db = createDb();
const caller = integrationRouter.createCaller({
db,
deviceType: undefined,
session: defaultSessionWithPermissions(["integration-full-all"]),
});
await db.insert(integrations).values([
{
id: "1",
name: "Home assistant",
kind: "homeAssistant",
url: "http://homeassist.local",
},
{
id: "2",
name: "Home plex server",
kind: "plex",
url: "http://plex.local",
},
]);
const result = await caller.all();
expect(result).toHaveLength(2);
for (const integration of result) {
expect(integration.permissions.hasFullAccess).toBe(true);
}
});
test("with integration use access should return all integrations", async () => {
const db = createDb();
const caller = integrationRouter.createCaller({
db,
deviceType: undefined,
session: defaultSessionWithPermissions(["integration-use-all"]),
});
await db.insert(integrations).values([
{
id: "1",
name: "Home assistant",
kind: "homeAssistant",
url: "http://homeassist.local",
},
{
id: "2",
name: "Home plex server",
kind: "plex",
url: "http://plex.local",
},
]);
const result = await caller.all();
expect(result.length).toBe(2);
});
test("without global integration access should only return integrations with use access", async () => {
const db = createDb();
const caller = integrationRouter.createCaller({
db,
deviceType: undefined,
session: defaultSessionWithPermissions(),
});
await db.insert(integrations).values([
{
id: "1",
name: "Home assistant",
kind: "homeAssistant",
url: "http://homeassist.local",
},
{
id: "2",
name: "Home plex server",
kind: "plex",
url: "http://plex.local",
},
]);
await db.insert(users).values({ id: defaultUserId });
await db.insert(integrationUserPermissions).values({
integrationId: "1",
userId: defaultUserId,
permission: "use",
});
const result = await caller.all();
expect(result).toHaveLength(1);
expect(result[0]!.id).toBe("1");
expect(result[0]!.permissions.hasUseAccess).toBe(true);
});
test("with a per-integration interact grant should return the integration with use access", async () => {
const db = createDb();
const caller = integrationRouter.createCaller({
db,
deviceType: undefined,
session: defaultSessionWithPermissions(),
});
await db.insert(integrations).values([
{
id: "1",
name: "Home assistant",
kind: "homeAssistant",
url: "http://homeassist.local",
},
{
id: "2",
name: "Home plex server",
kind: "plex",
url: "http://plex.local",
},
]);
await db.insert(users).values({ id: defaultUserId });
await db.insert(integrationUserPermissions).values({
integrationId: "1",
userId: defaultUserId,
permission: "interact",
});
const result = await caller.all();
expect(result).toHaveLength(1);
expect(result[0]!.id).toBe("1");
expect(result[0]!.permissions.hasUseAccess).toBe(true);
});
});
describe("search should return accessible integrations", () => {
test("without global integration access should only return integrations with use access as plain rows", async () => {
const db = createDb();
const caller = integrationRouter.createCaller({
db,
deviceType: undefined,
session: defaultSessionWithPermissions(),
});
await db.insert(integrations).values([
{
id: "1",
name: "Home assistant",
kind: "homeAssistant",
url: "http://homeassist.local",
},
{
id: "2",
name: "Home plex server",
kind: "plex",
url: "http://plex.local",
},
]);
await db.insert(users).values({ id: defaultUserId });
await db.insert(integrationUserPermissions).values({
integrationId: "1",
userId: defaultUserId,
permission: "use",
});
const result = await caller.search({ query: "Home" });
expect(result).toHaveLength(1);
expect(result[0]!.id).toBe("1");
expect(result[0]).not.toHaveProperty("userPermissions");
expect(result[0]).not.toHaveProperty("groupPermissions");
});
});
describe("mediaRequestSearchTargets should return accessible media search integrations", () => {
+136
View File
@@ -117,3 +117,139 @@ export const groupPermissionKeys = objectKeys(groupPermissions).reduce((acc, key
}
return acc;
}, [] as GroupPermissionKey[]);
/**
* Describes how each permission category is presented in the group permission matrix UI.
*
* `levels` is an ordered escalation of access: every level implies the one below it through
* {@link groupPermissionParents}, so picking level N grants everything up to N.
*
* `capabilities` are the keys that are NOT part of that ladder - "may add new resources", "may
* upload", "may put any app on a board". They can be granted on their own (e.g. "members may create
* their own boards but not see anyone else's") and some levels already imply them; use
* {@link isCapabilityImpliedByLevel} to detect that instead of hard-coding it.
*
* Only keys that genuinely imply each other may share a ladder. `app-modify-all` implies
* `app-create` but NOT `app-use-all` (only `app-full-all` does), so `app-use-all` is a capability -
* putting it in the ladder would make picking "Modify" silently grant use of every app.
*
* Together, `levels` and `capabilities` cover every key in {@link groupPermissionKeys}, so the
* matrix is a lossless representation of a group's permissions.
*/
export const permissionMatrix = {
board: { levels: ["board-view-all", "board-modify-all", "board-full-all"], capabilities: ["board-create"] },
app: { levels: ["app-modify-all", "app-full-all"], capabilities: ["app-use-all", "app-create"] },
integration: {
levels: ["integration-use-all", "integration-interact-all", "integration-full-all"],
capabilities: ["integration-create"],
},
"search-engine": {
levels: ["search-engine-modify-all", "search-engine-full-all"],
capabilities: ["search-engine-create"],
},
media: { levels: ["media-view-all", "media-full-all"], capabilities: ["media-upload"] },
other: { levels: ["other-view-logs"], capabilities: [] },
admin: { levels: ["admin"], capabilities: [] },
} as const satisfies Record<
string,
{ levels: readonly GroupPermissionKey[]; capabilities: readonly GroupPermissionKey[] }
>;
export type PermissionMatrixCategory = keyof typeof permissionMatrix;
export interface PermissionMatrixCategoryState {
/** 0 = no access, N = every key up to `permissionMatrix[category].levels[N - 1]` */
level: number;
/** The category's granted capability keys, including the ones the level already implies */
capabilities: readonly GroupPermissionKey[];
}
export type PermissionMatrixState = Record<PermissionMatrixCategory, PermissionMatrixCategoryState>;
/**
* Whether the given level already grants a capability through permission inheritance.
* For example board level 3 (`board-full-all`) implies `board-create`.
*/
export const isCapabilityImpliedByLevel = (
category: PermissionMatrixCategory,
capability: GroupPermissionKey,
level: number,
) => {
if (level <= 0) {
return false;
}
return getPermissionsWithChildren([...permissionMatrix[category].levels.slice(0, level)]).includes(capability);
};
export const permissionsToMatrixState = (permissions: GroupPermissionKey[]): PermissionMatrixState => {
const permissionSet = new Set(permissions);
return objectKeys(permissionMatrix).reduce((acc, category) => {
let level = 0;
permissionMatrix[category].levels.forEach((key, index) => {
if (permissionSet.has(key)) {
level = index + 1;
}
});
acc[category] = {
level,
capabilities: permissionMatrix[category].capabilities.filter(
(capability) => permissionSet.has(capability) || isCapabilityImpliedByLevel(category, capability, level),
),
};
return acc;
}, {} as PermissionMatrixState);
};
export const matrixStateToPermissions = (state: PermissionMatrixState): GroupPermissionKey[] => {
return objectKeys(permissionMatrix).reduce((acc, category) => {
const { level, capabilities } = state[category];
acc.push(...permissionMatrix[category].levels.slice(0, level));
// Skip capabilities the chosen level already implies, so the stored permissions stay minimal
// and a state -> permissions -> state round-trip is exact.
acc.push(...capabilities.filter((capability) => !isCapabilityImpliedByLevel(category, capability, level)));
return acc;
}, [] as GroupPermissionKey[]);
};
export interface ManagementSectionAccess {
/** May see and manage every resource of the section */
canManageAll: boolean;
/** May add new resources to the section */
canCreate: boolean;
/** May open the section at all */
canAccess: boolean;
}
/**
* A management section is reachable when the user can do at least one thing in it. Both rules live
* here so the navigation, the pages themselves and the management home statistics cannot drift
* apart - each of them consumes the same function.
*/
export const getAppManagementAccess = (permissions: readonly GroupPermissionKey[]): ManagementSectionAccess => {
const canManageAll = permissions.includes("app-modify-all");
const canCreate = permissions.includes("app-create");
return { canManageAll, canCreate, canAccess: canManageAll || canCreate };
};
/**
* `hasDelegatedFullAccess` is whether the user was granted full access to at least one specific
* integration; it has to be looked up per request, so the caller resolves it.
*/
export const getIntegrationManagementAccess = (
permissions: readonly GroupPermissionKey[],
hasDelegatedFullAccess: boolean,
): ManagementSectionAccess & { hasDelegatedFullAccess: boolean } => {
const canManageAll = permissions.includes("integration-full-all");
const canCreate = permissions.includes("integration-create");
return {
canManageAll,
canCreate,
hasDelegatedFullAccess,
canAccess: canManageAll || canCreate || hasDelegatedFullAccess,
};
};
@@ -1,7 +1,28 @@
import { describe, expect, test } from "vitest";
import type { GroupPermissionKey } from "../permissions";
import { getPermissionsWithChildren, getPermissionsWithParents } from "../permissions";
import type { GroupPermissionKey, PermissionMatrixState } from "../permissions";
import {
getAppManagementAccess,
getIntegrationManagementAccess,
getPermissionsWithChildren,
getPermissionsWithParents,
groupPermissionKeys,
isCapabilityImpliedByLevel,
matrixStateToPermissions,
permissionMatrix,
permissionsToMatrixState,
} from "../permissions";
const emptyState = (overrides: Partial<PermissionMatrixState> = {}): PermissionMatrixState => ({
board: { level: 0, capabilities: [] },
app: { level: 0, capabilities: [] },
integration: { level: 0, capabilities: [] },
"search-engine": { level: 0, capabilities: [] },
media: { level: 0, capabilities: [] },
other: { level: 0, capabilities: [] },
admin: { level: 0, capabilities: [] },
...overrides,
});
describe("getPermissionsWithParents should return the correct permissions", () => {
test.each([
@@ -45,3 +66,204 @@ describe("getPermissionsWithChildren should return the correct permissions", ()
expect(getPermissionsWithChildren(input)).toEqual(expect.arrayContaining(expectedOutput));
});
});
describe("the matrix must be able to represent every permission", () => {
test("every group permission key is covered by exactly one category", () => {
const covered = Object.values(permissionMatrix).flatMap(({ levels, capabilities }) => [...levels, ...capabilities]);
expect(covered.toSorted()).toEqual(groupPermissionKeys.toSorted());
});
test.each(groupPermissionKeys.map((key) => [key]))("expect %s to survive a round-trip on its own", (key) => {
expect(matrixStateToPermissions(permissionsToMatrixState([key]))).toContain(key);
});
test("every ladder is a real chain, so no level can fabricate a sibling permission", () => {
Object.values(permissionMatrix).forEach(({ levels }) => {
levels.forEach((key, index) => {
// Selecting a level must never grant more than that level's key already implies.
const implied = getPermissionsWithChildren([key]);
expect(levels.slice(0, index + 1).every((lower) => implied.includes(lower))).toBe(true);
});
});
});
});
describe("permissionsToMatrixState should resolve the highest present level per category", () => {
test("resolves the highest present level key", () => {
expect(permissionsToMatrixState(["board-view-all", "board-modify-all"]).board.level).toBe(2);
});
test("resolves the admin category", () => {
expect(permissionsToMatrixState(["admin"]).admin.level).toBe(1);
});
test("resolves an empty selection to all zero", () => {
const state = permissionsToMatrixState([]);
expect(Object.values(state).every(({ level, capabilities }) => level === 0 && capabilities.length === 0)).toBe(
true,
);
});
test("resolves a standalone create key without granting any level", () => {
expect(permissionsToMatrixState(["board-create"]).board).toEqual({ level: 0, capabilities: ["board-create"] });
});
test("marks a capability as granted when the level implies it", () => {
expect(permissionsToMatrixState(["board-full-all"]).board.capabilities).toEqual(["board-create"]);
expect(permissionsToMatrixState(["app-modify-all"]).app.capabilities).toEqual(["app-create"]);
expect(permissionsToMatrixState(["media-full-all"]).media.capabilities).toEqual(["media-upload"]);
});
test("does not mark a capability as granted for a level that does not imply it", () => {
expect(permissionsToMatrixState(["board-modify-all"]).board.capabilities).toEqual([]);
expect(permissionsToMatrixState(["integration-interact-all"]).integration.capabilities).toEqual([]);
});
test("app-use-all is a capability, not a level, because app-modify-all does not imply it", () => {
// Regression: modelling use as the level below modify made picking Modify silently grant the
// use of every app, which the permission graph does not do.
const state = permissionsToMatrixState(["app-modify-all"]);
expect(state.app).toEqual({ level: 1, capabilities: ["app-create"] });
expect(matrixStateToPermissions(state)).toEqual(["app-modify-all"]);
});
test("app-full-all implies both app capabilities", () => {
expect(permissionsToMatrixState(["app-full-all"]).app).toEqual({
level: 2,
capabilities: ["app-use-all", "app-create"],
});
});
});
describe("isCapabilityImpliedByLevel", () => {
test.each([
["board", "board-create", 0, false],
["board", "board-create", 1, false],
["board", "board-create", 2, false],
["board", "board-create", 3, true],
["app", "app-create", 1, true],
["app", "app-use-all", 1, false],
["app", "app-use-all", 2, true],
["integration", "integration-create", 2, false],
["integration", "integration-create", 3, true],
["search-engine", "search-engine-create", 1, true],
["media", "media-upload", 1, false],
["media", "media-upload", 2, true],
] satisfies [keyof typeof permissionMatrix, GroupPermissionKey, number, boolean][])(
"expect %s at level %i to imply %s: %s",
(category, capability, level, expected) => {
expect(isCapabilityImpliedByLevel(category, capability, level)).toBe(expected);
},
);
});
describe("matrixStateToPermissions should expand levels into permission keys", () => {
test("expands a level into the ordered level keys", () => {
expect(matrixStateToPermissions(emptyState({ board: { level: 2, capabilities: [] } }))).toEqual([
"board-view-all",
"board-modify-all",
]);
});
test("expands the admin category into the admin key", () => {
expect(matrixStateToPermissions(emptyState({ admin: { level: 1, capabilities: [] } }))).toEqual(["admin"]);
});
test("emits a standalone capability without any level", () => {
expect(matrixStateToPermissions(emptyState({ board: { level: 0, capabilities: ["board-create"] } }))).toEqual([
"board-create",
]);
});
test("emits media-upload as the capability of the media category", () => {
expect(matrixStateToPermissions(emptyState({ media: { level: 0, capabilities: ["media-upload"] } }))).toEqual([
"media-upload",
]);
});
test("emits app-use-all without granting any app level", () => {
expect(matrixStateToPermissions(emptyState({ app: { level: 0, capabilities: ["app-use-all"] } }))).toEqual([
"app-use-all",
]);
});
test("omits a capability that the chosen level already implies", () => {
expect(matrixStateToPermissions(emptyState({ board: { level: 3, capabilities: ["board-create"] } }))).toEqual([
"board-view-all",
"board-modify-all",
"board-full-all",
]);
});
});
describe("matrix helpers should round-trip stably", () => {
test.each([
[["board-view-all", "board-modify-all"]],
[["integration-use-all", "integration-interact-all", "integration-full-all"]],
[["admin"]],
[[]],
[["search-engine-modify-all", "search-engine-full-all", "media-view-all", "other-view-logs"]],
[["board-create"]],
[["media-upload"]],
[["board-create", "app-create", "integration-create", "search-engine-create", "media-upload"]],
[["board-create", "board-view-all"]],
[["app-modify-all"]],
[["app-use-all"]],
[["app-use-all", "app-modify-all"]],
] satisfies [GroupPermissionKey[]][])("expect %s to round-trip", (permissions) => {
const roundTripped = matrixStateToPermissions(permissionsToMatrixState(permissions));
expect(roundTripped).toEqual(expect.arrayContaining(permissions));
expect(roundTripped).toHaveLength(permissions.length);
});
test("expect a redundant capability key to be normalised away by the level that implies it", () => {
// app-modify-all already grants app-create, so the matrix stores the minimal set. The permission
// is not lost: getPermissionsWithChildren re-derives it whenever permissions are read.
const roundTripped = matrixStateToPermissions(permissionsToMatrixState(["app-create", "app-modify-all"]));
expect(roundTripped).toEqual(["app-modify-all"]);
expect(getPermissionsWithChildren(roundTripped)).toContain("app-create");
});
test("expect a single higher-level key to expand to its full set on round-trip", () => {
expect(matrixStateToPermissions(permissionsToMatrixState(["board-full-all"]))).toEqual([
"board-view-all",
"board-modify-all",
"board-full-all",
]);
});
});
describe("management section access", () => {
test.each([
[[], false, false],
[["app-create"], true, false],
[["app-modify-all"], true, true],
[["app-full-all", "app-modify-all"], true, true],
[["app-use-all"], false, false],
[["board-modify-all"], false, false],
] satisfies [GroupPermissionKey[], boolean, boolean][])(
"expect apps with %s to be reachable: %s, manage-all: %s",
(permissions, canAccess, canManageAll) => {
const access = getAppManagementAccess(permissions);
expect(access.canAccess).toBe(canAccess);
expect(access.canManageAll).toBe(canManageAll);
},
);
test.each([
[[], false, false, false],
[[], true, true, false],
[["integration-create"], false, true, false],
[["integration-full-all"], false, true, true],
[["integration-use-all"], false, false, false],
[["integration-interact-all"], false, false, false],
[["integration-interact-all"], true, true, false],
] satisfies [GroupPermissionKey[], boolean, boolean, boolean][])(
"expect integrations with %s and delegated access %s to be reachable: %s, manage-all: %s",
(permissions, hasDelegatedFullAccess, canAccess, canManageAll) => {
const access = getIntegrationManagementAccess(permissions, hasDelegatedFullAccess);
expect(access.canAccess).toBe(canAccess);
expect(access.canManageAll).toBe(canManageAll);
},
);
});
@@ -8,35 +8,35 @@ import { useZodForm } from "@homarr/form";
import { createModal } from "@homarr/modals";
import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
import { useI18n } from "@homarr/translation/client";
import { appHrefSchema } from "@homarr/validation/app";
interface AddDockerAppToHomarrProps {
selectedContainers: RouterOutputs["docker"]["getContainers"]["containers"];
initialUrls?: (string | null)[];
initialUrls?: string[];
}
const formSchema = z.object({
containerUrls: z.array(appHrefSchema),
});
export const AddDockerAppToHomarrModal = createModal<AddDockerAppToHomarrProps>(({ actions, innerProps }) => {
const t = useI18n();
const form = useZodForm(formSchema, {
initialValues: {
containerUrls: innerProps.selectedContainers.map((container, index) => {
const initialUrl = innerProps.initialUrls?.[index];
if (initialUrl !== undefined) return initialUrl;
const form = useZodForm(
z.object({
containerUrls: z.array(z.string().url().nullable()),
}),
{
initialValues: {
containerUrls: innerProps.selectedContainers.map((container, index) => {
const initialUrl = innerProps.initialUrls?.[index];
if (initialUrl) return initialUrl;
const candidates = buildDockerServiceUrlCandidates({
containerName: container.name,
endpointHost: container.host,
ports: container.ports,
}).filter(({ url }) => url.length > 0);
const candidates = buildDockerServiceUrlCandidates({
containerName: container.name,
endpointHost: container.host,
ports: container.ports,
}).filter(({ url }) => url.length > 0);
return candidates.find(({ scopes }) => scopes.includes("browser"))?.url ?? candidates[0]?.url ?? null;
}),
return candidates.find(({ scopes }) => scopes.includes("browser"))?.url ?? candidates[0]?.url ?? null;
}),
},
},
});
);
const { mutate, isPending } = clientApi.app.createMany.useMutation({
onSuccess() {
actions.closeModal();
@@ -52,13 +52,13 @@ export const AddDockerAppToHomarrModal = createModal<AddDockerAppToHomarrProps>(
});
},
});
const handleSubmit = ({ containerUrls }: z.infer<typeof formSchema>) => {
const handleSubmit = () => {
mutate(
innerProps.selectedContainers.map((container, index) => ({
name: container.name,
iconUrl: container.iconUrl,
description: null,
href: containerUrls[index] || null,
href: form.values.containerUrls[index] ?? null,
pingUrl: null,
})),
);
@@ -68,31 +68,28 @@ export const AddDockerAppToHomarrModal = createModal<AddDockerAppToHomarrProps>(
<LoadingOverlay visible={isPending} />
<Stack>
<List spacing={"xs"}>
{innerProps.selectedContainers.map((container, index) => {
const inputProps = form.getInputProps(`containerUrls.${index}`);
return (
<List.Item
styles={{ itemWrapper: { width: "100%" }, itemLabel: { flex: 1 } }}
icon={
<Avatar
variant="outline"
radius={container.iconUrl ? "sm" : "md"}
size={30}
styles={{ image: { objectFit: "contain" } }}
src={container.iconUrl}
>
{container.name.at(0)?.toUpperCase()}
</Avatar>
}
key={container.id}
>
<Group justify="space-between" wrap={"nowrap"}>
<Text lineClamp={1}>{container.name}</Text>
<TextInput {...inputProps} value={inputProps.value ?? ""} />
</Group>
</List.Item>
);
})}
{innerProps.selectedContainers.map((container, index) => (
<List.Item
styles={{ itemWrapper: { width: "100%" }, itemLabel: { flex: 1 } }}
icon={
<Avatar
variant="outline"
radius={container.iconUrl ? "sm" : "md"}
size={30}
styles={{ image: { objectFit: "contain" } }}
src={container.iconUrl}
>
{container.name.at(0)?.toUpperCase()}
</Avatar>
}
key={container.id}
>
<Group justify="space-between" wrap={"nowrap"}>
<Text lineClamp={1}>{container.name}</Text>
<TextInput {...form.getInputProps(`containerUrls.${index}`)} />
</Group>
</List.Item>
))}
</List>
<Group justify="end">
<Button onClick={actions.closeModal} variant="light" px={"xl"}>
-2
View File
@@ -1,5 +1,3 @@
export { OnboardingAuthShell } from "./onboarding-auth-shell";
export { OnboardingStudio } from "./onboarding-studio";
export { normalizeServiceUrl } from "./discovery-selection";
export { ServiceUrlTemplate } from "./service-url-template";
export type { OnboardingEnvironment, OnboardingStudioProps } from "./types";
@@ -358,7 +358,6 @@
display: flex;
width: max-content;
min-width: 100%;
margin: 0;
padding: 0.2rem;
border-radius: var(--mantine-radius-md);
background: var(--mantine-color-default);
@@ -1,106 +0,0 @@
"use client";
import type { ReactNode } from "react";
import { useRef, useState } from "react";
import { FloatingIndicator, Stack, TextInput, UnstyledButton } from "@mantine/core";
import type { UrlTemplateMode } from "@homarr/definitions";
import { useScopedI18n } from "@homarr/translation/client";
import { useOnboardingSounds } from "./use-onboarding-sounds";
import classes from "./onboarding-studio.module.css";
interface FloatingControlProps<T extends string> {
value: T;
onChange: (value: T) => void;
options: readonly { value: T; label: ReactNode }[];
ariaLabel: string;
}
export const OnboardingFloatingControl = <T extends string>({
value,
onChange,
options,
ariaLabel,
}: FloatingControlProps<T>) => {
const [rootRef, setRootRef] = useState<HTMLFieldSetElement | null>(null);
const controlRefs = useRef<Record<string, HTMLButtonElement | null>>({});
const sounds = useOnboardingSounds();
return (
<div className={classes.floatingControlScroller}>
<fieldset ref={setRootRef} className={classes.floatingControlRoot} aria-label={ariaLabel}>
<FloatingIndicator
target={controlRefs.current[value] ?? null}
parent={rootRef}
className={classes.floatingControlIndicator}
/>
{options.map((option) => {
const selected = value === option.value;
return (
<UnstyledButton
key={option.value}
ref={(node) => {
controlRefs.current[option.value] = node;
}}
type="button"
className={classes.floatingControl}
data-active={selected}
aria-pressed={selected}
onClick={() => {
sounds.click();
onChange(option.value);
}}
>
{option.label}
</UnstyledButton>
);
})}
</fieldset>
</div>
);
};
interface ServiceUrlTemplateProps {
serverOrigin: string;
onServerOriginChange: (value: string) => void;
mode: UrlTemplateMode;
onModeChange: (value: UrlTemplateMode) => void;
readOnly?: boolean;
required?: boolean;
}
export const ServiceUrlTemplate = ({
serverOrigin,
onServerOriginChange,
mode,
onModeChange,
readOnly,
required,
}: ServiceUrlTemplateProps) => {
const t = useScopedI18n("common.serviceUrlTemplate");
return (
<Stack gap="sm">
<TextInput
label={t("serverTitle")}
placeholder="home.lan · 192.168.1.10 · https://homarr.example.com"
value={serverOrigin}
onChange={(event) => onServerOriginChange(event.currentTarget.value)}
readOnly={readOnly}
required={required}
withAsterisk={required}
/>
<OnboardingFloatingControl
ariaLabel={t("urlModeLabel")}
value={mode}
onChange={onModeChange}
options={[
{ value: "hostPort", label: t("hostPort") },
{ value: "subdomain", label: t("subdomain") },
{ value: "path", label: t("path") },
]}
/>
</Stack>
);
};
+68 -6
View File
@@ -15,6 +15,7 @@ import {
ColorSwatch,
CopyButton,
Fieldset,
FloatingIndicator,
Group,
Paper,
PasswordInput,
@@ -98,7 +99,6 @@ import type { OnboardingStudioProps } from "./types";
import { getBoardValidationErrors } from "./board-validation";
import { OnboardingBackdrop } from "./onboarding-backdrop";
import { OnboardingWordmark } from "./onboarding-wordmark";
import { OnboardingFloatingControl, ServiceUrlTemplate } from "./service-url-template";
import { useOnboardingSounds } from "./use-onboarding-sounds";
import {
normalizeServiceUrl,
@@ -152,6 +152,57 @@ const initialSecondaryColor = "#fd7e14";
const emptyDiscoveredIntegrations: DockerDiscoveryData["integrations"] = [];
const emptyDiscoveredApps: DockerDiscoveryData["apps"] = [];
interface OnboardingFloatingControlProps<T extends string> {
value: T;
onChange: (value: T) => void;
options: readonly { value: T; label: ReactNode }[];
ariaLabel: string;
}
const OnboardingFloatingControl = <T extends string>({
value,
onChange,
options,
ariaLabel,
}: OnboardingFloatingControlProps<T>) => {
const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
const controlRefs = useRef<Record<string, HTMLButtonElement | null>>({});
const sounds = useOnboardingSounds();
return (
<div className={classes.floatingControlScroller}>
<div ref={setRootRef} className={classes.floatingControlRoot} role="group" aria-label={ariaLabel}>
<FloatingIndicator
target={controlRefs.current[value] ?? null}
parent={rootRef}
className={classes.floatingControlIndicator}
/>
{options.map((option) => {
const selected = value === option.value;
return (
<UnstyledButton
key={option.value}
ref={(node) => {
controlRefs.current[option.value] = node;
}}
type="button"
className={classes.floatingControl}
data-active={selected}
aria-pressed={selected}
onClick={() => {
sounds.click();
onChange(option.value);
}}
>
{option.label}
</UnstyledButton>
);
})}
</div>
</div>
);
};
export const SetupStudio = ({ environment, assistantConfiguration }: OnboardingStudioProps) => {
const t = useScopedI18n("init.studio");
const tCommon = useScopedI18n("common.action");
@@ -873,13 +924,24 @@ const Essentials = (props: StudioSectionProps) => {
<Alert variant="light" icon={<IconInfoCircle size={18} />} my="xs">
{t("serverOriginHelp")}
</Alert>
<ServiceUrlTemplate
serverOrigin={props.serverOrigin}
onServerOriginChange={props.setServerOrigin}
mode={props.urlMode}
onModeChange={props.setUrlMode}
<TextInput
label={t("serverTitle")}
placeholder="home.lan · 192.168.1.10 · https://homarr.example.com"
value={props.serverOrigin}
onChange={(event) => props.setServerOrigin(event.currentTarget.value)}
readOnly={!isHydrated}
required
withAsterisk
/>
<OnboardingFloatingControl
ariaLabel={t("urlModeLabel")}
value={props.urlMode}
onChange={props.setUrlMode}
options={[
{ value: "hostPort", label: t("hostPort") },
{ value: "subdomain", label: t("subdomain") },
{ value: "path", label: t("path") },
]}
/>
{props.serverOrigin ? (
<Code block>{buildIntegrationUrl("sonarr", props.serverOrigin, props.urlMode)}</Code>
+17 -32
View File
@@ -195,24 +195,9 @@ const mockContainers: {
},
];
const demoDockerEndpoint = {
id: "demo",
name: "Demo Docker",
status: "available",
kind: "docker",
transport: "socket",
capabilities: ["inventory"],
source: "default",
scope: "admin",
} satisfies DockerEndpointStatus;
export const dockerContainersRequestHandler = createWidgetRequestHandler({
async requestAsync({ endpointIds }: { endpointIds?: string[] }) {
async requestAsync() {
if (isDemoMode()) {
const includesDemoEndpoint =
endpointIds === undefined || endpointIds.length === 0 || endpointIds.includes("demo");
if (!includesDemoEndpoint) return { containers: [], endpoints: [] };
return {
containers: mockContainers.map((container) => ({
...container,
@@ -220,10 +205,21 @@ export const dockerContainersRequestHandler = createWidgetRequestHandler({
endpointName: "Demo Docker",
resourceId: `demo:${container.id}`,
})),
endpoints: [demoDockerEndpoint],
endpoints: [
{
id: "demo",
name: "Demo Docker",
status: "available",
kind: "docker",
transport: "socket",
capabilities: ["inventory"],
source: "default",
scope: "admin",
},
] satisfies DockerEndpointStatus[],
};
}
return await getContainersWithStatsAsync(dockerWidgetEndpointTimeoutMs, endpointIds);
return await getContainersWithStatsAsync();
},
});
@@ -308,8 +304,6 @@ export const streamContainerLogsAsync = async (
};
export const getDockerEndpointsAsync = (): DockerEndpointStatus[] => {
if (isDemoMode()) return [demoDockerEndpoint];
const dockerInstances = DockerSingleton.getInstances();
const initializationFailures = DockerSingleton.getInitializationFailures();
@@ -337,18 +331,9 @@ export const getDockerEndpointsAsync = (): DockerEndpointStatus[] => {
];
};
export async function getContainersWithStatsAsync(
timeoutMs = dockerWidgetEndpointTimeoutMs,
endpointIds: string[] = [],
) {
const selectedEndpointIds = new Set(endpointIds);
const includesAllEndpoints = selectedEndpointIds.size === 0;
const dockerInstances = DockerSingleton.getInstances().filter(
({ endpointId }) => includesAllEndpoints || selectedEndpointIds.has(endpointId),
);
const initializationFailures = DockerSingleton.getInitializationFailures().filter(
({ descriptor }) => includesAllEndpoints || selectedEndpointIds.has(descriptor.id),
);
export async function getContainersWithStatsAsync(timeoutMs = dockerWidgetEndpointTimeoutMs) {
const dockerInstances = DockerSingleton.getInstances();
const initializationFailures = DockerSingleton.getInitializationFailures();
const results = await Promise.allSettled(
dockerInstances.map(async ({ instance, host, endpointId, endpointName }) => {
const instanceContainers = await withDockerTimeoutAsync(
@@ -7,8 +7,6 @@ import { DockerSingleton } from "@homarr/docker";
import {
calculateCpuUsage,
calculateMemoryUsage,
dockerContainersRequestHandler,
getDockerEndpointsAsync,
getContainersWithStatsAsync,
hasDockerEndpointCapability,
} from "../docker";
@@ -129,31 +127,6 @@ describe("calculateMemoryUsage", () => {
});
describe("getContainersWithStatsAsync", () => {
test("queries only selected Docker endpoints and leaves an empty selection as all", async () => {
const firstListContainers = vi.fn(async () => []);
const secondListContainers = vi.fn(async () => []);
vi.spyOn(DockerSingleton, "getInstances").mockReturnValue([
createDockerInstance("first", firstListContainers),
createDockerInstance("second", secondListContainers),
] as never);
vi.spyOn(DockerSingleton, "getInitializationFailures").mockReturnValue([]);
try {
const selectedResult = await getContainersWithStatsAsync(50, ["second"]);
expect(firstListContainers).not.toHaveBeenCalled();
expect(secondListContainers).toHaveBeenCalledOnce();
expect(selectedResult.endpoints.map(({ id }) => id)).toEqual(["second"]);
await getContainersWithStatsAsync(50, []);
expect(firstListContainers).toHaveBeenCalledOnce();
expect(secondListContainers).toHaveBeenCalledTimes(2);
} finally {
vi.restoreAllMocks();
}
});
test("marks a timed-out endpoint unavailable without blocking healthy endpoints", async () => {
vi.useFakeTimers();
try {
@@ -238,26 +211,14 @@ describe("getContainersWithStatsAsync", () => {
});
});
test("demo mode advertises and filters the same inventory-only endpoint", async () => {
test("demo capabilities match the advertised inventory-only endpoint", () => {
const previousDemoMode = process.env.DEMO_MODE;
process.env.DEMO_MODE = "true";
try {
expect(getDockerEndpointsAsync()).toEqual([
expect.objectContaining({ id: "demo", name: "Demo Docker", capabilities: ["inventory"] }),
]);
const selected = await dockerContainersRequestHandler.handler({ endpointIds: ["demo"] }).getDataAsync();
expect(selected.data.endpoints).toEqual([expect.objectContaining({ id: "demo" })]);
expect(selected.data.containers.length).toBeGreaterThan(0);
const excluded = await dockerContainersRequestHandler.handler({ endpointIds: ["other"] }).getDataAsync();
expect(excluded.data).toEqual({ containers: [], endpoints: [] });
expect(hasDockerEndpointCapability("demo", "inventory")).toBe(true);
expect(hasDockerEndpointCapability("demo", "logs")).toBe(false);
expect(hasDockerEndpointCapability("other", "inventory")).toBe(false);
} finally {
dockerContainersRequestHandler.invalidateCache();
if (previousDemoMode === undefined) delete process.env.DEMO_MODE;
else process.env.DEMO_MODE = previousDemoMode;
}
@@ -17,10 +17,11 @@ export const appIntegrationBoardMode = {
return groups;
}
return groups.concat(
session.user.permissions.includes("board-modify-all")
? [appsSearchGroup, integrationsSearchGroup]
: [integrationsSearchGroup],
);
// Mirrors the gate on app.search: either permission may browse the app catalogue, so an app
// administrator without board access still gets the group instead of a FORBIDDEN response.
const canSearchApps =
session.user.permissions.includes("board-modify-all") || session.user.permissions.includes("app-modify-all");
return groups.concat(canSearchApps ? [appsSearchGroup, integrationsSearchGroup] : [integrationsSearchGroup]);
},
} satisfies SearchMode;
+65 -21
View File
@@ -66,10 +66,15 @@
"themeAuto": "System",
"themeLight": "Light",
"themeDark": "Dark",
"serverTitle": "Usual server address",
"serverOriginHelp": "Homarr uses this address to prefill detected service URLs. You can still edit every service individually.",
"serverDescription": "This is a shortcut, not a restriction. Every detected service remains editable.",
"serverOrigin": "Domain, IP, or reverse-proxy path",
"serverOriginDescription": "Examples: home.lan, 192.168.1.10, or https://home.example.com/services. Choose how each service is appended below.",
"urlModeLabel": "Service address pattern",
"hostPort": "Same host, different ports",
"subdomain": "One subdomain per service",
"path": "One path per service",
"analytics": "Share anonymous product analytics",
"analyticsDescription": "Helps Homarr improve feature reliability. No service credentials or dashboard content are sent."
},
@@ -648,6 +653,35 @@
"description": "Allow members to manage and delete any search engine"
}
}
},
"matrix": {
"none": "No access",
"impliedHint": "Also grants: {permissions}",
"grantedViaAdmin": "Administrators already have this. Set Admin to “No access” to configure it separately.",
"preset": {
"label": "Presets",
"viewer": "Viewer",
"viewerDescription": "Read-only: view boards and medias, use apps and integrations that already exist.",
"editor": "Editor",
"editorDescription": "Day-to-day management: create and edit boards, apps, integrations and search engines.",
"admin": "Admin",
"adminDescription": "Unrestricted access to every feature and setting, including user management.",
"custom": "Custom"
},
"effective": {
"title": "Effective permissions",
"description": "The full, de-duplicated set of actions members of this group can perform, including permissions granted indirectly.",
"empty": "No permissions selected"
},
"noneDescription": "Members get no access to this area.",
"level": {
"view": "View",
"use": "Use",
"interact": "Interact",
"modify": "Modify",
"full": "Full"
},
"capabilityIncluded": "Already included in “{level}”"
}
},
"memberNotice": {
@@ -774,7 +808,9 @@
"action": "Create your first app",
"filteredTitle": "No apps match your search",
"filteredDescription": "No apps match \"{search}\". Try another name or URL.",
"clearSearch": "Clear search"
"clearSearch": "Clear search",
"createOnlyTitle": "You can only add apps",
"createOnlyDescription": "Your permissions let you create apps but not browse existing ones. Ask an administrator for app management access to see the full list."
}
},
"create": {
@@ -1576,6 +1612,7 @@
"title": "Integrations",
"ariaLabel": "Configured integrations",
"search": "Search integrations",
"scopedNote": "Showing only the integrations you are allowed to manage.",
"action": {
"edit": "Edit {name}",
"delete": "Delete {name}"
@@ -1586,7 +1623,9 @@
"action": "Create your first integration",
"filteredTitle": "No integrations match your search",
"filteredDescription": "No integrations match \"{search}\". Try another name, type, or URL.",
"clearSearch": "Clear search"
"clearSearch": "Clear search",
"createOnlyTitle": "You can only add integrations",
"createOnlyDescription": "Your permissions let you create integrations but not manage existing ones. Ask an administrator for access to the ones you need."
}
},
"create": {
@@ -2132,13 +2171,6 @@
"undo": "Undo"
},
"here": "here",
"serviceUrlTemplate": {
"serverTitle": "Usual server address",
"urlModeLabel": "Service address pattern",
"hostPort": "Same host, different ports",
"subdomain": "One subdomain per service",
"path": "One path per service"
},
"iconPicker": {
"label": "Icon URL",
"description": "Search the library, paste an image URL, or upload a file.",
@@ -3739,11 +3771,6 @@
"name": "Docker stats",
"description": "Stats of your containers (This widget can only be added with administrator privileges)",
"option": {
"endpointIds": {
"label": "Docker environments",
"description": "Leave empty to show containers from every Docker environment",
"placeholder": "All Docker environments"
},
"columns": {
"label": "Columns to show"
},
@@ -5692,7 +5719,6 @@
},
"dynamicSelect": {
"noResults": "No results found",
"loading": "Loading...",
"loadError": "Failed to load options"
},
"assistant": {
@@ -6142,7 +6168,8 @@
},
"notFound": {
"title": "Not Found",
"text": "Could not find requested resource"
"text": "Could not find requested resource",
"backToHome": "Back to management home"
},
"error": {
"title": "This page couldn't load",
@@ -7080,18 +7107,23 @@
"docker": {
"title": "Containers",
"reconciliation": {
"title": "Assisted Docker setup",
"suggestions": "{count, plural, =0 {No suggestions} one {# suggestion} other {# suggestions}}",
"title": "Service setup",
"description": "Docker services are compared with your apps and integrations. Review every suggestion before Homarr changes anything.",
"attention": "{count} need attention",
"endpointUnavailable": "Some services could not be checked because these endpoints are unavailable: {names}",
"empty": "No visible Docker services were found.",
"emptyFilter": "No services match this view.",
"ambiguous": "More than one existing item could match this service. Homarr will not choose one automatically.",
"match": "{confidence} confidence match",
"filter": {
"attention": "Needs attention",
"represented": "Already set up",
"all": "All"
},
"confidence": {
"high": "High",
"medium": "Medium"
},
"state": {
"newRecognized": "Ready to connect",
"newApp": "New service",
@@ -7100,9 +7132,19 @@
"moved": "Address changed"
},
"url": {
"manual": "Enter an address manually"
"label": "Service address",
"inputLabel": "Service URL",
"manual": "Enter an address manually",
"invalid": "Enter a valid HTTP or HTTPS URL"
},
"reason": {
"publishedAddress": "Published address reported by Docker",
"dockerEndpointHost": "Docker endpoint host combined with the published port",
"sharedContainerNetwork": "Server-only address for services sharing the container network",
"manualHostRequired": "Enter the address that your browser or Homarr server can reach"
},
"health": {
"title": "Observed service layers",
"layer": {
"docker": "Docker",
"integrationConfiguration": "Integration",
@@ -7124,15 +7166,17 @@
}
},
"action": {
"review": "Review",
"refresh": "Refresh",
"retry": "Try again",
"dismiss": "Dismiss",
"restoreDismissed": "Restore dismissed ({count})",
"setupIntegration": "Set up integration",
"createApp": "Create app",
"reviewIntegration": "Review integration",
"viewRepresentation": "View setup"
},
"loadError": {
"title": "Docker setup assistant could not be loaded",
"title": "Service setup could not be loaded",
"message": "Docker service information is unavailable. Try again without leaving this page."
},
"refreshError": {
-2
View File
@@ -4,7 +4,6 @@ import { WidgetAppInput } from "./widget-app-input";
import { WidgetCustomWidgetSelectInput } from "./widget-custom-widget-select-input";
import { WidgetCustomWidgetConfigurationInput } from "./widget-custom-widget-configuration-input";
import { WidgetDynamicSelectInput } from "./widget-dynamic-select-input";
import { WidgetDynamicMultiSelectInput } from "./widget-dynamic-multiselect-input";
import { WidgetLocationInput } from "./widget-location-input";
import { WidgetMultiTextInput } from "./widget-multi-text-input";
import { WidgetMultiReleasesRepositoriesInput } from "./widget-multiReleasesRepositories-input";
@@ -37,7 +36,6 @@ const mapping = {
sortableItemList: WidgetSortedItemListInput,
multiReleasesRepositories: WidgetMultiReleasesRepositoriesInput,
dynamicSelect: WidgetDynamicSelectInput,
dynamicMultiSelect: WidgetDynamicMultiSelectInput,
umamiEventName: WidgetUmamiEventInput,
umamiEventNames: WidgetUmamiEventNamesInput,
umamiWebsite: WidgetUmamiWebsiteInput,
@@ -1,45 +0,0 @@
"use client";
import { Loader, MultiSelect } from "@mantine/core";
import { useScopedI18n } from "@homarr/translation/client";
import type { CommonWidgetInputProps } from "./common";
import { useWidgetInputTranslation } from "./common";
import { useFormContext } from "./form";
export const WidgetDynamicMultiSelectInput = ({
property,
kind,
options,
}: CommonWidgetInputProps<"dynamicMultiSelect">) => {
const t = useScopedI18n("widget.dynamicSelect");
const tInput = useWidgetInputTranslation(kind, property);
const form = useFormContext();
const inputProps = form.getInputProps(`options.${property}`);
const selectedValues = (inputProps.value as string[] | undefined) ?? [];
const { data: selectData, isPending, isError } = options.useOptions();
const data = [
...selectData,
...selectedValues
.filter((selectedValue) => !selectData.some((option) => option.value === selectedValue))
.map((selectedValue) => ({ value: selectedValue, label: selectedValue })),
];
return (
<MultiSelect
{...inputProps}
label={tInput("label")}
description={options.withDescription ? tInput("description") : undefined}
placeholder={isPending ? t("loading") : tInput("placeholder")}
leftSection={isPending ? <Loader size="xs" /> : undefined}
searchable
clearable
maxValues={options.maxValues}
nothingFoundMessage={t("noResults")}
data={data}
disabled={isError}
error={isError ? t("loadError") : inputProps.error}
/>
);
};
+1 -6
View File
@@ -74,11 +74,6 @@ const createContainerLogsPath = (container: Pick<DockerContainer, "endpointId" |
const getContainerTarget = ({ endpointId, id }: DockerContainer) => ({ endpointId, id });
const getContainersQueryInput = (endpointIds: string[]) => {
if (endpointIds.length === 0) return undefined;
return { endpointIds };
};
const ContainerStateBadge = ({ state }: { state: ContainerState }) => {
const t = useScopedI18n("docker.field.state.option");
@@ -253,7 +248,7 @@ export default function DockerWidget({
const isAdvanced = displayMode === "advanced";
const utils = clientApi.useUtils();
const containersQuery = clientApi.docker.getContainers.useQuery(getContainersQueryInput(options.endpointIds));
const containersQuery = clientApi.docker.getContainers.useQuery();
const data = getUsableWidgetQueryData(containersQuery);
const { isFetching } = containersQuery;
const refreshInventory = clientApi.docker.refreshInventory.useMutation({
-14
View File
@@ -1,7 +1,6 @@
import { IconBrandDocker, IconServerOff } from "@tabler/icons-react";
import type { RouterOutputs } from "@homarr/api";
import { clientApi } from "@homarr/api/client";
import { createWidgetDefinition } from "../definition";
import { optionsBuilder } from "../options";
@@ -31,19 +30,6 @@ export const { definition, componentLoader } = createWidgetDefinition("dockerCon
createOptions() {
return optionsBuilder.from(
(factory) => ({
endpointIds: factory.dynamicMultiSelect({
defaultValue: [],
maxValues: 100,
withDescription: true,
useOptions: () => {
const { data = [], isPending, isError } = clientApi.docker.getEndpoints.useQuery();
return {
data: data.map((endpoint) => ({ value: endpoint.id, label: endpoint.name })),
isPending,
isError,
};
},
}),
columns: factory.multiSelect({
defaultValue: [...allColumnsList],
options: allColumnsList.map((value) => ({
-16
View File
@@ -69,15 +69,6 @@ interface DynamicSelectInput extends CommonInput<DynamicSelectOption | null> {
};
}
interface DynamicMultiSelectInput extends CommonInput<string[]> {
maxValues?: number;
useOptions: () => {
data: DynamicSelectOption[];
isPending: boolean;
isError: boolean;
};
}
interface IntegrationSelectInput extends CommonInput<string> {
clearable?: boolean;
searchable?: boolean;
@@ -150,13 +141,6 @@ const optionsFactory = {
useOptions: input.useOptions,
withDescription: input.withDescription ?? false,
}),
dynamicMultiSelect: (input: DynamicMultiSelectInput) => ({
type: "dynamicMultiSelect" as const,
defaultValue: input.defaultValue ?? [],
maxValues: input.maxValues,
useOptions: input.useOptions,
withDescription: input.withDescription ?? false,
}),
select: <const TOptions extends SelectOption[]>(input: SelectInput<TOptions>) => ({
type: "select" as const,
defaultValue: (input.defaultValue ?? input.options[0]) as inferSelectOptionValue<TOptions[number]>,