jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: add integration access settings (#725)

Browse Source 
* feat: add integration access settings

* fix: typecheck and test issues

* fix: test timeout

* chore: address pull request feedback

* chore: add throw if action forbidden for integration permissions

* fix: unable to create new migrations because of duplicate prevId in sqlite snapshots

* chore: add sqlite migration for integration permissions

* test: add unit tests for integration access

* test: add permission checks to integration router tests

* test: add unit test for integration permissions

* chore: add mysql migration

* fix: format issues
This commit is contained in:
Meier Lukas
2024-07-08 00:00:37 +02:00
committed by GitHub
parent be711149f7
commit 408cdeb5c3
50 changed files with 4392 additions and 615 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
apps/nextjs/src/app/[locale]/boards/[name]/settings/_access.tsx
View File

@@ -1,101 +0,0 @@
"use client";
import { useState } from "react";
import { Group, Stack, Tabs } from "@mantine/core";
import { IconUser, IconUserDown, IconUsersGroup } from "@tabler/icons-react";
import type { RouterOutputs } from "@homarr/api";
import { clientApi } from "@homarr/api/client";
import { useScopedI18n } from "@homarr/translation/client";
import type { TablerIcon } from "@homarr/ui";
import { CountBadge } from "@homarr/ui";
import type { Board } from "../../_types";
import { GroupsForm } from "./_access/group-access";
import { InheritTable } from "./_access/inherit-access";
import { UsersForm } from "./_access/user-access";
interface Props {
board: Board;
initialPermissions: RouterOutputs["board"]["getBoardPermissions"];
}
export const AccessSettingsContent = ({ board, initialPermissions }: Props) => {
const { data: permissions } = clientApi.board.getBoardPermissions.useQuery(
{
id: board.id,
},
{
initialData: initialPermissions,
refetchOnMount: false,
refetchOnWindowFocus: false,
refetchOnReconnect: false,
},
);
const [counts, setCounts] = useState({
user: initialPermissions.userPermissions.length + (board.creator ? 1 : 0),
group: initialPermissions.groupPermissions.length,
});
return (
<Stack>
<Tabs color="red" defaultValue="user">
<Tabs.List grow>
<TabItem value="user" count={counts.user} icon={IconUser} />
<TabItem value="group" count={counts.group} icon={IconUsersGroup} />
<TabItem value="inherited" count={initialPermissions.inherited.length} icon={IconUserDown} />
</Tabs.List>
<Tabs.Panel value="user">
<UsersForm
board={board}
initialPermissions={permissions}
onCountChange={(callback) =>
setCounts(({ user, ...others }) => ({
user: callback(user),
...others,
}))
}
/>
</Tabs.Panel>
<Tabs.Panel value="group">
<GroupsForm
board={board}
initialPermissions={permissions}
onCountChange={(callback) =>
setCounts(({ group, ...others }) => ({
group: callback(group),
...others,
}))
}
/>
</Tabs.Panel>
<Tabs.Panel value="inherited">
<InheritTable initialPermissions={permissions} />
</Tabs.Panel>
</Tabs>
</Stack>
);
};
interface TabItemProps {
value: "user" | "group" | "inherited";
count: number;
icon: TablerIcon;
}
const TabItem = ({ value, icon: Icon, count }: TabItemProps) => {
const t = useScopedI18n("board.setting.section.access.permission");
return (
<Tabs.Tab value={value} leftSection={<Icon stroke={1.5} size={16} />}>
<Group gap="sm">
{t(`tab.${value}`)}
<CountBadge count={count} />
</Group>
</Tabs.Tab>
);
};

13
apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/form.ts
View File

@@ -1,13 +0,0 @@
import type { BoardPermission } from "@homarr/definitions";
import { createFormContext } from "@homarr/form";
export interface BoardAccessFormType {
items: {
itemId: string;
permission: BoardPermission;
}[];
}
export const [FormProvider, useFormContext, useForm] = createFormContext<BoardAccessFormType>();
export type OnCountChange = (callback: (prev: number) => number) => void;

57
apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/inherit-access.tsx
View File

@@ -1,57 +0,0 @@
import { Stack, Table, TableTbody, TableTh, TableThead, TableTr } from "@mantine/core";
import type { RouterOutputs } from "@homarr/api";
import { getPermissionsWithChildren } from "@homarr/definitions";
import type { BoardPermission, GroupPermissionKey } from "@homarr/definitions";
import { useScopedI18n } from "@homarr/translation/client";
import { BoardAccessDisplayRow } from "./board-access-table-rows";
import { GroupItemContent } from "./group-access";
export interface InheritTableProps {
initialPermissions: RouterOutputs["board"]["getBoardPermissions"];
}
const mapPermissions = {
"board-full-access": "board-full",
"board-modify-all": "board-change",
"board-view-all": "board-view",
} satisfies Partial<Record<GroupPermissionKey, BoardPermission | "board-full">>;
export const InheritTable = ({ initialPermissions }: InheritTableProps) => {
const tPermissions = useScopedI18n("board.setting.section.access.permission");
return (
<Stack pt="sm">
<Table>
<TableThead>
<TableTr>
<TableTh>{tPermissions("field.user.label")}</TableTh>
<TableTh>{tPermissions("field.permission.label")}</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{initialPermissions.inherited.map(({ group, permission }) => {
const boardPermission =
permission in mapPermissions
? mapPermissions[permission as keyof typeof mapPermissions]
: getPermissionsWithChildren([permission]).includes("board-full-access")
? "board-full"
: null;
if (!boardPermission) {
return null;
}
return (
<BoardAccessDisplayRow
key={group.id}
itemContent={<GroupItemContent group={group} />}
permission={boardPermission}
/>
);
})}
</TableTbody>
</Table>
</Stack>
);
};

137
apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/user-access.tsx
View File

@@ -1,137 +0,0 @@
import { useCallback, useState } from "react";
import Link from "next/link";
import { Anchor, Box, Button, Group, Stack, Table, TableTbody, TableTh, TableThead, TableTr } from "@mantine/core";
import { IconPlus } from "@tabler/icons-react";
import type { RouterOutputs } from "@homarr/api";
import { clientApi } from "@homarr/api/client";
import { useModalAction } from "@homarr/modals";
import { useI18n, useScopedI18n } from "@homarr/translation/client";
import { UserAvatar } from "@homarr/ui";
import type { Board } from "../../../_types";
import { BoardAccessDisplayRow, BoardAccessSelectRow } from "./board-access-table-rows";
import type { BoardAccessFormType, OnCountChange } from "./form";
import { FormProvider, useForm } from "./form";
import { UserSelectModal } from "./user-select-modal";
export interface FormProps {
board: Pick<Board, "id" | "creatorId" | "creator">;
initialPermissions: RouterOutputs["board"]["getBoardPermissions"];
onCountChange: OnCountChange;
}
export const UsersForm = ({ board, initialPermissions, onCountChange }: FormProps) => {
const { mutate, isPending } = clientApi.board.saveUserBoardPermissions.useMutation();
const utils = clientApi.useUtils();
const [users, setUsers] = useState<Map<string, User>>(
new Map(initialPermissions.userPermissions.map(({ user }) => [user.id, user])),
);
const { openModal } = useModalAction(UserSelectModal);
const t = useI18n();
const tPermissions = useScopedI18n("board.setting.section.access.permission");
const form = useForm({
initialValues: {
items: initialPermissions.userPermissions.map(({ user, permission }) => ({
itemId: user.id,
permission,
})),
},
});
const handleSubmit = useCallback(
(values: BoardAccessFormType) => {
mutate(
{
id: board.id,
permissions: values.items,
},
{
onSuccess: () => {
void utils.board.getBoardPermissions.invalidate();
},
},
);
},
[board.id, mutate, utils.board.getBoardPermissions],
);
const handleAddUser = useCallback(() => {
const presentUserIds = form.values.items.map(({ itemId: id }) => id);
openModal({
presentUserIds: board.creatorId ? presentUserIds.concat(board.creatorId) : presentUserIds,
onSelect: (user) => {
setUsers((prev) => new Map(prev).set(user.id, user));
form.setFieldValue("items", [
{
itemId: user.id,
permission: "board-view",
},
...form.values.items,
]);
onCountChange((prev) => prev + 1);
},
});
}, [form, openModal, board.creatorId, onCountChange]);
return (
<form onSubmit={form.onSubmit(handleSubmit)}>
<FormProvider form={form}>
<Stack pt="sm">
<Table>
<TableThead>
<TableTr>
<TableTh>{tPermissions("field.user.label")}</TableTh>
<TableTh>{tPermissions("field.permission.label")}</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{board.creator && (
<BoardAccessDisplayRow itemContent={<UserItemContent user={board.creator} />} permission="board-full" />
)}
{form.values.items.map((row, index) => (
<BoardAccessSelectRow
key={row.itemId}
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
itemContent={<UserItemContent user={users.get(row.itemId)!} />}
permission={row.permission}
index={index}
onCountChange={onCountChange}
/>
))}
</TableTbody>
</Table>
<Group justify="space-between">
<Button rightSection={<IconPlus size="1rem" />} variant="light" onClick={handleAddUser}>
{t("common.action.add")}
</Button>
<Button type="submit" loading={isPending} color="teal">
{t("common.action.saveChanges")}
</Button>
</Group>
</Stack>
</FormProvider>
</form>
);
};
const UserItemContent = ({ user }: { user: User }) => {
return (
<Group wrap="nowrap">
<Box visibleFrom="xs">
<UserAvatar user={user} size="sm" />
</Box>
<Anchor component={Link} href={`/manage/users/${user.id}`} size="sm" style={{ whiteSpace: "nowrap" }}>
{user.name}
</Anchor>
</Group>
);
};
interface User {
id: string;
name: string | null;
image: string | null;
}

69
apps/nextjs/src/app/[locale]/boards/[name]/settings/_board-access.tsx Normal file
View File

@@ -0,0 +1,69 @@
"use client";
import { IconEye, IconPencil, IconSettings } from "@tabler/icons-react";
import type { RouterOutputs } from "@homarr/api";
import { clientApi } from "@homarr/api/client";
import { boardPermissions, boardPermissionsMap } from "@homarr/definitions";
import { useI18n } from "@homarr/translation/client";
import { AccessSettings } from "~/components/access/access-settings";
import type { Board } from "../../_types";
interface Props {
board: Board;
initialPermissions: RouterOutputs["board"]["getBoardPermissions"];
}
export const BoardAccessSettings = ({ board, initialPermissions }: Props) => {
const groupMutation = clientApi.board.saveGroupBoardPermissions.useMutation();
const userMutation = clientApi.board.saveUserBoardPermissions.useMutation();
const utils = clientApi.useUtils();
const t = useI18n();
const { data: permissions } = clientApi.board.getBoardPermissions.useQuery(
{
id: board.id,
},
{
initialData: initialPermissions,
refetchOnMount: false,
refetchOnWindowFocus: false,
refetchOnReconnect: false,
},
);
return (
<AccessSettings
entity={{
id: board.id,
ownerId: board.creatorId,
owner: board.creator,
}}
query={{
invalidate: () => utils.board.getBoardPermissions.invalidate(),
data: permissions,
}}
groupsMutation={{
mutate: groupMutation.mutate,
isPending: groupMutation.isPending,
}}
usersMutation={{
mutate: userMutation.mutate,
isPending: userMutation.isPending,
}}
translate={(key) => t(`board.setting.section.access.permission.item.${key}.label`)}
permission={{
items: boardPermissions,
default: "view",
fullAccessGroupPermission: "board-full-all",
groupPermissionMapping: boardPermissionsMap,
icons: {
modify: IconPencil,
view: IconEye,
full: IconSettings,
},
}}
/>
);
};

8
apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx
View File

@@ -20,8 +20,8 @@ import type { TablerIcon } from "@homarr/ui";
import { getBoardPermissionsAsync } from "~/components/board/permissions/server";
import { ActiveTabAccordion } from "../../../../../components/active-tab-accordion";
import { AccessSettingsContent } from "./_access";
import { BackgroundSettingsContent } from "./_background";
import { BoardAccessSettings } from "./_board-access";
import { ColorSettingsContent } from "./_colors";
import { CustomCssSettingsContent } from "./_customCss";
import { DangerZoneSettingsContent } from "./_danger";
@@ -44,8 +44,8 @@ const getBoardAndPermissionsAsync = async (params: Props["params"]) => {
const permissions = hasFullAccess
? await api.board.getBoardPermissions({ id: board.id })
: {
userPermissions: [],
groupPermissions: [],
users: [],
groups: [],
inherited: [],
};
@@ -89,7 +89,7 @@ export default async function BoardSettingsPage({ params, searchParams }: Props)
{hasFullAccess && (
<>
<AccordionItemFor value="access" icon={IconUser}>
<AccessSettingsContent board={board} initialPermissions={permissions} />
<BoardAccessSettings board={board} initialPermissions={permissions} />
</AccordionItemFor>
<AccordionItemFor value="dangerZone" icon={IconAlertTriangle} danger noPadding>
<DangerZoneSettingsContent />

61
apps/nextjs/src/app/[locale]/manage/integrations/_components/integration-access-settings.tsx Normal file
View File

@@ -0,0 +1,61 @@
"use client";
import { IconPlayerPlay, IconSelector, IconSettings } from "@tabler/icons-react";
import type { RouterOutputs } from "@homarr/api";
import { clientApi } from "@homarr/api/client";
import { integrationPermissions, integrationPermissionsMap } from "@homarr/definitions";
import { useI18n } from "@homarr/translation/client";
import { AccessSettings } from "~/components/access/access-settings";
interface Props {
integration: RouterOutputs["integration"]["byId"];
initialPermissions: RouterOutputs["integration"]["getIntegrationPermissions"];
}
export const IntegrationAccessSettings = ({ integration, initialPermissions }: Props) => {
const t = useI18n();
const utils = clientApi.useUtils();
const { data } = clientApi.integration.getIntegrationPermissions.useQuery(
{
id: integration.id,
},
{
refetchOnMount: false,
refetchOnWindowFocus: false,
refetchOnReconnect: false,
initialData: initialPermissions,
},
);
const usersMutation = clientApi.integration.saveUserIntegrationPermissions.useMutation();
const groupsMutation = clientApi.integration.saveGroupIntegrationPermissions.useMutation();
return (
<AccessSettings
entity={{
id: integration.id,
ownerId: null,
owner: null,
}}
permission={{
items: integrationPermissions,
default: "use",
fullAccessGroupPermission: "integration-full-all",
icons: {
use: IconSelector,
interact: IconPlayerPlay,
full: IconSettings,
},
groupPermissionMapping: integrationPermissionsMap,
}}
translate={(key) => t(`integration.permission.${key}`)}
query={{
data,
invalidate: () => utils.integration.getIntegrationPermissions.invalidate(),
}}
groupsMutation={groupsMutation}
usersMutation={usersMutation}
/>
);
};

16
apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/page.tsx
View File

@@ -1,10 +1,11 @@
import { Container, Group, Stack, Title } from "@mantine/core";
import { Container, Fieldset, Group, Stack, Title } from "@mantine/core";
import { api } from "@homarr/api/server";
import { getIntegrationName } from "@homarr/definitions";
import { getScopedI18n } from "@homarr/translation/server";
import { getI18n, getScopedI18n } from "@homarr/translation/server";
import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
import { IntegrationAccessSettings } from "../../_components/integration-access-settings";
import { IntegrationAvatar } from "../../_integration-avatar";
import { EditIntegrationForm } from "./_integration-edit-form";
@@ -13,8 +14,10 @@ interface EditIntegrationPageProps {
}
export default async function EditIntegrationPage({ params }: EditIntegrationPageProps) {
const t = await getScopedI18n("integration.page.edit");
const editT = await getScopedI18n("integration.page.edit");
const t = await getI18n();
const integration = await api.integration.byId({ id: params.id });
const integrationPermissions = await api.integration.getIntegrationPermissions({ id: integration.id });
return (
<>
@@ -23,9 +26,14 @@ export default async function EditIntegrationPage({ params }: EditIntegrationPag
<Stack>
<Group align="center">
<IntegrationAvatar kind={integration.kind} size="md" />
<Title>{t("title", { name: getIntegrationName(integration.kind) })}</Title>
<Title>{editT("title", { name: getIntegrationName(integration.kind) })}</Title>
</Group>
<EditIntegrationForm integration={integration} />
<Title order={2}>{t("permission.title")}</Title>
<Fieldset>
<IntegrationAccessSettings integration={integration} initialPermissions={integrationPermissions} />
</Fieldset>
</Stack>
</Container>
</>

4
apps/nextjs/src/app/[locale]/manage/integrations/new/page.tsx
View File

@@ -24,7 +24,7 @@ export default async function IntegrationsNewPage({ searchParams }: NewIntegrati
notFound();
}
const t = await getScopedI18n("integration.page.create");
const tCreate = await getScopedI18n("integration.page.create");
const currentKind = result.data;
@@ -35,7 +35,7 @@ export default async function IntegrationsNewPage({ searchParams }: NewIntegrati
<Stack>
<Group align="center">
<IntegrationAvatar kind={currentKind} size="md" />
<Title>{t("title", { name: getIntegrationName(currentKind) })}</Title>
<Title>{tCreate("title", { name: getIntegrationName(currentKind) })}</Title>
</Group>
<NewIntegrationForm searchParams={searchParams} />
</Stack>

2
apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_transfer-group-ownership.tsx
View File

@@ -8,7 +8,7 @@ import { useConfirmModal, useModalAction } from "@homarr/modals";
import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
import { useI18n, useScopedI18n } from "@homarr/translation/client";
import { UserSelectModal } from "~/app/[locale]/boards/[name]/settings/_access/user-select-modal";
import { UserSelectModal } from "~/components/access/user-select-modal";
interface TransferGroupOwnershipProps {
group: {

2
apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/_add-group-member.tsx
View File

@@ -6,8 +6,8 @@ import { clientApi } from "@homarr/api/client";
import { useModalAction } from "@homarr/modals";
import { useScopedI18n } from "@homarr/translation/client";
import { UserSelectModal } from "~/app/[locale]/boards/[name]/settings/_access/user-select-modal";
import { revalidatePathActionAsync } from "~/app/revalidatePathAction";
import { UserSelectModal } from "~/components/access/user-select-modal";
import { MobileAffixButton } from "~/components/manage/mobile-affix-button";
interface AddGroupMemberProps {

189
apps/nextjs/src/components/access/access-settings.tsx Normal file
View File

@@ -0,0 +1,189 @@
import { useState } from "react";
import { Group, Stack, Tabs } from "@mantine/core";
import { IconUser, IconUserDown, IconUsersGroup } from "@tabler/icons-react";
import type { GroupPermissionKey } from "@homarr/definitions";
import { useScopedI18n } from "@homarr/translation/client";
import type { TablerIcon } from "@homarr/ui";
import { CountBadge } from "@homarr/ui";
import { AccessProvider } from "./context";
import type { AccessFormType } from "./form";
import { GroupAccessForm } from "./group-access-form";
import { InheritAccessTable } from "./inherit-access-table";
import { UsersAccessForm } from "./user-access-form";
interface GroupAccessPermission<TPermission extends string> {
permission: TPermission;
group: {
id: string;
name: string;
};
}
interface UserAccessPermission<TPermission extends string> {
permission: TPermission;
user: {
name: string | null;
image: string | null;
id: string;
};
}
interface SimpleMutation<TPermission extends string> {
mutate: (
props: { entityId: string; permissions: { principalId: string; permission: TPermission }[] },
options: { onSuccess: () => void },
) => void;
isPending: boolean;
}
export interface AccessQueryData<TPermission extends string> {
inherited: GroupAccessPermission<GroupPermissionKey>[];
groups: GroupAccessPermission<TPermission>[];
users: UserAccessPermission<TPermission>[];
}
interface Props<TPermission extends string> {
permission: {
items: readonly TPermission[];
default: TPermission;
icons: Record<TPermission, TablerIcon>;
groupPermissionMapping: Record<TPermission, GroupPermissionKey>;
fullAccessGroupPermission: GroupPermissionKey;
};
query: {
data: AccessQueryData<TPermission>;
invalidate: () => Promise<void>;
};
groupsMutation: SimpleMutation<TPermission>;
usersMutation: SimpleMutation<TPermission>;
entity: {
id: string;
ownerId: string | null;
owner: {
id: string;
name: string | null;
image: string | null;
} | null;
};
translate: (key: TPermission) => string;
}
export const AccessSettings = <TPermission extends string>({
permission,
query,
groupsMutation,
usersMutation,
entity,
translate,
}: Props<TPermission>) => {
const [counts, setCounts] = useState({
user: query.data.users.length + (entity.owner ? 1 : 0),
group: query.data.groups.length,
});
const handleGroupSubmit = (values: AccessFormType<TPermission>) => {
groupsMutation.mutate(
{
entityId: entity.id,
permissions: values.items,
},
{
onSuccess() {
void query.invalidate();
},
},
);
};
const handleUserSubmit = (values: AccessFormType<TPermission>) => {
usersMutation.mutate(
{
entityId: entity.id,
permissions: values.items,
},
{
onSuccess() {
void query.invalidate();
},
},
);
};
return (
<AccessProvider<TPermission>
defaultPermission={permission.default}
icons={permission.icons}
permissions={permission.items}
translate={translate}
>
<Stack>
<Tabs color="red" defaultValue="user">
<Tabs.List grow>
<TabItem value="user" count={counts.user} icon={IconUser} />
<TabItem value="group" count={counts.group} icon={IconUsersGroup} />
<TabItem value="inherited" count={query.data.inherited.length} icon={IconUserDown} />
</Tabs.List>
<Tabs.Panel value="user">
<UsersAccessForm<TPermission>
entity={entity}
accessQueryData={query.data}
handleCountChange={(callback) =>
setCounts(({ user, ...others }) => ({
user: callback(user),
...others,
}))
}
handleSubmit={handleUserSubmit}
isPending={usersMutation.isPending}
/>
</Tabs.Panel>
<Tabs.Panel value="group">
<GroupAccessForm<TPermission>
accessQueryData={query.data}
handleCountChange={(callback) =>
setCounts(({ group, ...others }) => ({
group: callback(group),
...others,
}))
}
handleSubmit={handleGroupSubmit}
isPending={groupsMutation.isPending}
/>
</Tabs.Panel>
<Tabs.Panel value="inherited">
<InheritAccessTable<TPermission>
accessQueryData={query.data}
fullAccessGroupPermission={permission.fullAccessGroupPermission}
mapPermissions={permission.groupPermissionMapping}
/>
</Tabs.Panel>
</Tabs>
</Stack>
</AccessProvider>
);
};
interface TabItemProps {
value: "user" | "group" | "inherited";
count: number;
icon: TablerIcon;
}
const TabItem = ({ value, icon: Icon, count }: TabItemProps) => {
const t = useScopedI18n("permission");
return (
<Tabs.Tab value={value} leftSection={<Icon stroke={1.5} size={16} />}>
<Group gap="sm">
{t(`tab.${value}`)}
<CountBadge count={count} />
</Group>
</Tabs.Tab>
);
};

92
apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/board-access-table-rows.tsx → apps/nextjs/src/components/access/access-table-rows.tsx
View File

@@ -1,43 +1,36 @@
import { useCallback } from "react";
import type { ReactNode } from "react";
import { useCallback } from "react";
import type { SelectProps } from "@mantine/core";
import { Button, Flex, Group, Select, TableTd, TableTr, Text } from "@mantine/core";
import { IconCheck, IconEye, IconPencil, IconSettings } from "@tabler/icons-react";
import { Icon123, IconCheck } from "@tabler/icons-react";
import type { BoardPermission } from "@homarr/definitions";
import { boardPermissions } from "@homarr/definitions";
import { useI18n, useScopedI18n } from "@homarr/translation/client";
import type { TablerIcon } from "@homarr/ui";
import { useI18n } from "@homarr/translation/client";
import type { OnCountChange } from "./form";
import { useAccessContext } from "./context";
import type { HandleCountChange } from "./form";
import { useFormContext } from "./form";
const icons = {
"board-change": IconPencil,
"board-view": IconEye,
"board-full": IconSettings,
} satisfies Record<BoardPermission | "board-full", TablerIcon>;
interface BoardAccessSelectRowProps {
interface AccessSelectRowProps {
itemContent: ReactNode;
permission: BoardPermission;
permission: string;
index: number;
onCountChange: OnCountChange;
handleCountChange: HandleCountChange;
}
export const BoardAccessSelectRow = ({ itemContent, permission, index, onCountChange }: BoardAccessSelectRowProps) => {
export const AccessSelectRow = ({ itemContent, permission, index, handleCountChange }: AccessSelectRowProps) => {
const tRoot = useI18n();
const tPermissions = useScopedI18n("board.setting.section.access.permission");
const { icons, getSelectData } = useAccessContext();
const form = useFormContext();
const Icon = icons[permission];
const handleRemove = useCallback(() => {
form.setFieldValue(
"items",
form.values.items.filter((_, i) => i !== index),
);
onCountChange((prev) => prev - 1);
}, [form, index, onCountChange]);
handleCountChange((prev) => prev - 1);
}, [form, index, handleCountChange]);
const Icon = icons[permission] ?? Icon123;
return (
<TableTr>
@@ -50,10 +43,7 @@ export const BoardAccessSelectRow = ({ itemContent, permission, index, onCountCh
leftSection={<Icon size="1rem" />}
renderOption={RenderOption}
variant="unstyled"
data={boardPermissions.map((permission) => ({
value: permission,
label: tPermissions(`item.${permission}.label`),
}))}
data={getSelectData()}
{...form.getInputProps(`items.${index}.permission`)}
/>
@@ -66,30 +56,6 @@ export const BoardAccessSelectRow = ({ itemContent, permission, index, onCountCh
);
};
interface BoardAccessDisplayRowProps {
itemContent: ReactNode;
permission: BoardPermission | "board-full";
}
export const BoardAccessDisplayRow = ({ itemContent, permission }: BoardAccessDisplayRowProps) => {
const tPermissions = useScopedI18n("board.setting.section.access.permission");
const Icon = icons[permission];
return (
<TableTr>
<TableTd w={{ sm: 128, lg: 256 }}>{itemContent}</TableTd>
<TableTd>
<Group gap={0}>
<Flex w={34} h={34} align="center" justify="center">
<Icon size="1rem" color="var(--input-section-color, var(--mantine-color-dimmed))" />
</Flex>
<Text size="sm">{tPermissions(`item.${permission}.label`)}</Text>
</Group>
</TableTd>
</TableTr>
);
};
const iconProps = {
stroke: 1.5,
color: "currentColor",
@@ -98,7 +64,9 @@ const iconProps = {
};
const RenderOption: SelectProps["renderOption"] = ({ option, checked }) => {
const Icon = icons[option.value as BoardPermission];
const { icons } = useAccessContext();
const Icon = icons[option.value] ?? Icon123;
return (
<Group flex="1" gap="xs" wrap="nowrap">
<Icon {...iconProps} />
@@ -107,3 +75,27 @@ const RenderOption: SelectProps["renderOption"] = ({ option, checked }) => {
</Group>
);
};
interface AccessDisplayRowProps {
itemContent: ReactNode;
permission: string;
}
export const AccessDisplayRow = ({ itemContent, permission }: AccessDisplayRowProps) => {
const { icons, translate } = useAccessContext();
const Icon = icons[permission] ?? Icon123;
return (
<TableTr>
<TableTd w={{ sm: 128, lg: 256 }}>{itemContent}</TableTd>
<TableTd>
<Group gap={0}>
<Flex w={34} h={34} align="center" justify="center">
<Icon size="1rem" color="var(--input-section-color, var(--mantine-color-dimmed))" />
</Flex>
<Text size="sm">{translate(permission)}</Text>
</Group>
</TableTd>
</TableTr>
);
};

53
apps/nextjs/src/components/access/context.tsx Normal file
View File

@@ -0,0 +1,53 @@
import { createContext, useContext } from "react";
import type { TablerIcon } from "@tabler/icons-react";
const AccessContext = createContext<{
permissions: readonly string[];
icons: Record<string, TablerIcon>;
translate: (key: string) => string;
defaultPermission: string;
} | null>(null);
export const useAccessContext = <TPermission extends string>() => {
const context = useContext(AccessContext);
if (!context) {
throw new Error("useAccessContext must be used within a AccessProvider");
}
return {
icons: context.icons as Record<TPermission, TablerIcon>,
getSelectData: () =>
context.permissions.map((permission) => ({ value: permission, label: context.translate(permission) })),
permissions: context.permissions as readonly TPermission[],
translate: context.translate as (key: TPermission) => string,
defaultPermission: context.defaultPermission as TPermission,
};
};
export const AccessProvider = <TPermission extends string>({
defaultPermission,
permissions,
icons,
translate,
children,
}: {
defaultPermission: TPermission;
permissions: readonly TPermission[];
icons: Record<TPermission, TablerIcon>;
translate: (key: TPermission) => string;
children: React.ReactNode;
}) => {
return (
<AccessContext.Provider
value={{
defaultPermission,
permissions,
icons,
translate: translate as (key: string) => string,
}}
>
{children}
</AccessContext.Provider>
);
};

12
apps/nextjs/src/components/access/form.ts Normal file
View File

@@ -0,0 +1,12 @@
import { createFormContext } from "@homarr/form";
export interface AccessFormType<TPermission extends string> {
items: {
principalId: string;
permission: TPermission;
}[];
}
export const [FormProvider, useFormContext, useForm] = createFormContext<AccessFormType<string>>();
export type HandleCountChange = (callback: (prev: number) => number) => void;

77
apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/group-access.tsx → apps/nextjs/src/components/access/group-access-form.tsx
View File

@@ -1,73 +1,60 @@
import { useCallback, useState } from "react";
import { useState } from "react";
import Link from "next/link";
import { Anchor, Button, Group, Stack, Table, TableTbody, TableTh, TableThead, TableTr } from "@mantine/core";
import { IconPlus } from "@tabler/icons-react";
import type { RouterOutputs } from "@homarr/api";
import { clientApi } from "@homarr/api/client";
import { useModalAction } from "@homarr/modals";
import { useI18n, useScopedI18n } from "@homarr/translation/client";
import { BoardAccessSelectRow } from "./board-access-table-rows";
import type { BoardAccessFormType } from "./form";
import type { AccessQueryData } from "./access-settings";
import { AccessSelectRow } from "./access-table-rows";
import { useAccessContext } from "./context";
import type { AccessFormType } from "./form";
import { FormProvider, useForm } from "./form";
import { GroupSelectModal } from "./group-select-modal";
import type { FormProps } from "./user-access";
import type { FormProps } from "./user-access-form";
export const GroupsForm = ({ board, initialPermissions, onCountChange }: FormProps) => {
const { mutate, isPending } = clientApi.board.saveGroupBoardPermissions.useMutation();
const utils = clientApi.useUtils();
const [groups, setGroups] = useState<Map<string, Group>>(
new Map(initialPermissions.groupPermissions.map(({ group }) => [group.id, group])),
export const GroupAccessForm = <TPermission extends string>({
accessQueryData,
handleCountChange,
handleSubmit,
isPending,
}: Omit<FormProps<TPermission>, "entity">) => {
const { defaultPermission } = useAccessContext();
const [groups, setGroups] = useState<Map<string, AccessQueryData<string>["groups"][number]["group"]>>(
new Map(accessQueryData.groups.map(({ group }) => [group.id, group])),
);
const { openModal } = useModalAction(GroupSelectModal);
const t = useI18n();
const tPermissions = useScopedI18n("board.setting.section.access.permission");
const tPermissions = useScopedI18n("permission");
const form = useForm({
initialValues: {
items: initialPermissions.groupPermissions.map(({ group, permission }) => ({
itemId: group.id,
items: accessQueryData.groups.map(({ group, permission }) => ({
principalId: group.id,
permission,
})),
},
});
const handleSubmit = useCallback(
(values: BoardAccessFormType) => {
mutate(
{
id: board.id,
permissions: values.items,
},
{
onSuccess: () => {
void utils.board.getBoardPermissions.invalidate();
},
},
);
},
[board.id, mutate, utils.board.getBoardPermissions],
);
const handleAddUser = useCallback(() => {
const handleAddUser = () => {
openModal({
presentGroupIds: form.values.items.map(({ itemId: id }) => id),
presentGroupIds: form.values.items.map(({ principalId: id }) => id),
onSelect: (group) => {
setGroups((prev) => new Map(prev).set(group.id, group));
form.setFieldValue("items", [
{
itemId: group.id,
permission: "board-view",
principalId: group.id,
permission: defaultPermission,
},
...form.values.items,
]);
onCountChange((prev) => prev + 1);
handleCountChange((prev) => prev + 1);
},
});
}, [form, openModal, onCountChange]);
};
return (
<form onSubmit={form.onSubmit(handleSubmit)}>
<form onSubmit={form.onSubmit((values) => handleSubmit(values as AccessFormType<TPermission>))}>
<FormProvider form={form}>
<Stack pt="sm">
<Table>
@@ -79,13 +66,13 @@ export const GroupsForm = ({ board, initialPermissions, onCountChange }: FormPro
</TableThead>
<TableTbody>
{form.values.items.map((row, index) => (
<BoardAccessSelectRow
key={row.itemId}
<AccessSelectRow
key={row.principalId}
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
itemContent={<GroupItemContent group={groups.get(row.itemId)!} />}
itemContent={<GroupItemContent group={groups.get(row.principalId)!} />}
permission={row.permission}
index={index}
onCountChange={onCountChange}
handleCountChange={handleCountChange}
/>
))}
</TableTbody>
@@ -96,7 +83,7 @@ export const GroupsForm = ({ board, initialPermissions, onCountChange }: FormPro
{t("common.action.add")}
</Button>
<Button type="submit" loading={isPending} color="teal">
{t("common.action.saveChanges")}
{t("permission.action.saveGroup")}
</Button>
</Group>
</Stack>
@@ -105,12 +92,10 @@ export const GroupsForm = ({ board, initialPermissions, onCountChange }: FormPro
);
};
export const GroupItemContent = ({ group }: { group: Group }) => {
export const GroupItemContent = ({ group }: { group: AccessQueryData<string>["groups"][number]["group"] }) => {
return (
<Anchor component={Link} href={`/manage/users/groups/${group.id}`} size="sm" style={{ whiteSpace: "nowrap" }}>
{group.name}
</Anchor>
);
};
type Group = RouterOutputs["board"]["getBoardPermissions"]["groupPermissions"][0]["group"];

2
apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/group-select-modal.tsx → apps/nextjs/src/components/access/group-select-modal.tsx
View File

@@ -63,5 +63,5 @@ export const GroupSelectModal = createModal<InnerProps>(({ actions, innerProps }
</form>
);
}).withOptions({
defaultTitle: (t) => t("board.setting.section.access.permission.groupSelect.title"),
defaultTitle: (t) => t("permission.groupSelect.title"),
});

57
apps/nextjs/src/components/access/inherit-access-table.tsx Normal file
View File

@@ -0,0 +1,57 @@
import { Stack, Table, TableTbody, TableTh, TableThead, TableTr } from "@mantine/core";
import type { GroupPermissionKey } from "@homarr/definitions";
import { getPermissionsWithChildren } from "@homarr/definitions";
import { useScopedI18n } from "@homarr/translation/client";
import type { AccessQueryData } from "./access-settings";
import { AccessDisplayRow } from "./access-table-rows";
import { GroupItemContent } from "./group-access-form";
export interface InheritTableProps<TPermission extends string> {
accessQueryData: AccessQueryData<TPermission>;
mapPermissions: Partial<Record<GroupPermissionKey, TPermission>>;
fullAccessGroupPermission: GroupPermissionKey;
}
export const InheritAccessTable = <TPermission extends string>({
accessQueryData,
mapPermissions,
fullAccessGroupPermission,
}: InheritTableProps<TPermission>) => {
const tPermissions = useScopedI18n("permission");
return (
<Stack pt="sm">
<Table>
<TableThead>
<TableTr>
<TableTh>{tPermissions("field.user.label")}</TableTh>
<TableTh>{tPermissions("field.permission.label")}</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{accessQueryData.inherited.map(({ group, permission }) => {
const entityPermission =
permission in mapPermissions
? mapPermissions[permission]
: getPermissionsWithChildren([permission]).includes(fullAccessGroupPermission)
? "full"
: null;
if (!entityPermission) {
return null;
}
return (
<AccessDisplayRow
key={group.id}
itemContent={<GroupItemContent group={group} />}
permission={entityPermission}
/>
);
})}
</TableTbody>
</Table>
</Stack>
);
};

136
apps/nextjs/src/components/access/user-access-form.tsx Normal file
View File

@@ -0,0 +1,136 @@
import { useState } from "react";
import Link from "next/link";
import { Anchor, Box, Button, Group, Stack, Table, TableTbody, TableTh, TableThead, TableTr } from "@mantine/core";
import { IconPlus } from "@tabler/icons-react";
import { useModalAction } from "@homarr/modals";
import { useI18n, useScopedI18n } from "@homarr/translation/client";
import { UserAvatar } from "@homarr/ui";
import type { AccessQueryData } from "./access-settings";
import { AccessDisplayRow, AccessSelectRow } from "./access-table-rows";
import { useAccessContext } from "./context";
import type { AccessFormType, HandleCountChange } from "./form";
import { FormProvider, useForm } from "./form";
import { UserSelectModal } from "./user-select-modal";
export interface FormProps<TPermission extends string> {
entity: {
id: string;
ownerId: string | null;
owner: {
id: string;
name: string | null;
image: string | null;
} | null;
};
accessQueryData: AccessQueryData<TPermission>;
handleCountChange: HandleCountChange;
handleSubmit: (values: AccessFormType<TPermission>) => void;
isPending: boolean;
}
export const UsersAccessForm = <TPermission extends string>({
entity,
accessQueryData,
handleCountChange,
handleSubmit,
isPending,
}: FormProps<TPermission>) => {
const { defaultPermission } = useAccessContext();
const [users, setUsers] = useState<Map<string, UserItemContentProps["user"]>>(
new Map(accessQueryData.users.map(({ user }) => [user.id, user])),
);
const { openModal } = useModalAction(UserSelectModal);
const t = useI18n();
const tPermissions = useScopedI18n("permission");
const form = useForm({
initialValues: {
items: accessQueryData.users.map(({ user, permission }) => ({
principalId: user.id,
permission,
})),
},
});
const handleAddUser = () => {
const presentUserIds = form.values.items.map(({ principalId: id }) => id);
openModal({
presentUserIds: entity.ownerId ? presentUserIds.concat(entity.ownerId) : presentUserIds,
onSelect: (user) => {
setUsers((prev) => new Map(prev).set(user.id, user));
form.setFieldValue("items", [
{
principalId: user.id,
permission: defaultPermission,
},
...form.values.items,
]);
handleCountChange((prev) => prev + 1);
},
});
};
return (
<form onSubmit={form.onSubmit((values) => handleSubmit(values as AccessFormType<TPermission>))}>
<FormProvider form={form}>
<Stack pt="sm">
<Table>
<TableThead>
<TableTr>
<TableTh>{tPermissions("field.user.label")}</TableTh>
<TableTh>{tPermissions("field.permission.label")}</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{entity.owner && (
<AccessDisplayRow itemContent={<UserItemContent user={entity.owner} />} permission="full" />
)}
{form.values.items.map((row, index) => (
<AccessSelectRow
key={row.principalId}
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
itemContent={<UserItemContent user={users.get(row.principalId)!} />}
permission={row.permission}
index={index}
handleCountChange={handleCountChange}
/>
))}
</TableTbody>
</Table>
<Group justify="space-between">
<Button rightSection={<IconPlus size="1rem" />} variant="light" onClick={handleAddUser}>
{t("common.action.add")}
</Button>
<Button type="submit" loading={isPending} color="teal">
{t("permission.action.saveUser")}
</Button>
</Group>
</Stack>
</FormProvider>
</form>
);
};
interface UserItemContentProps {
user: {
id: string;
name: string | null;
image: string | null;
};
}
const UserItemContent = ({ user }: UserItemContentProps) => {
return (
<Group wrap="nowrap">
<Box visibleFrom="xs">
<UserAvatar user={user} size="sm" />
</Box>
<Anchor component={Link} href={`/manage/users/${user.id}`} size="sm" style={{ whiteSpace: "nowrap" }}>
{user.name}
</Anchor>
</Group>
);
};

2
apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/user-select-modal.tsx → apps/nextjs/src/components/access/user-select-modal.tsx
View File

@@ -72,7 +72,7 @@ export const UserSelectModal = createModal<InnerProps>(({ actions, innerProps })
</form>
);
}).withOptions({
defaultTitle: (t) => t("board.setting.section.access.permission.userSelect.title"),
defaultTitle: (t) => t("permission.userSelect.title"),
});
const iconProps = {