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

chore: update prettier configuration for print width (#519)

Browse Source 
* feat: update prettier configuration for print width

* chore: apply code formatting to entire repository

* fix: remove build files

* fix: format issue

---------

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>
This commit is contained in:
Thomas Camlong
2024-05-19 22:38:39 +02:00
committed by GitHub
parent 919161798e
commit f1b1ec59ec
234 changed files with 2444 additions and 5375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
apps/nextjs/src/app/[locale]/manage/_components/hero-banner.tsx
View File

@@ -48,13 +48,7 @@ export const HeroBanner = () => {
<Title>Homarr Dashboard</Title>
</Group>
</Stack>
<Box
className={classes.scrollContainer}
w={"30%"}
top={0}
right={0}
pos="absolute"
>
<Box className={classes.scrollContainer} w={"30%"} top={0} right={0} pos="absolute">
<Grid>
{Array(countIconGroups)
.fill(0)
@@ -67,24 +61,12 @@ export const HeroBanner = () => {
}}
>
{arrayInChunks[columnIndex]?.map((icon, index) => (
<Image
key={`grid-column-${columnIndex}-scroll-1-${index}`}
src={icon}
radius="md"
w={50}
h={50}
/>
<Image key={`grid-column-${columnIndex}-scroll-1-${index}`} src={icon} radius="md" w={50} h={50} />
))}
{/* This is used for making the animation seem seamless */}
{arrayInChunks[columnIndex]?.map((icon, index) => (
<Image
key={`grid-column-${columnIndex}-scroll-2-${index}`}
src={icon}
radius="md"
w={50}
h={50}
/>
<Image key={`grid-column-${columnIndex}-scroll-2-${index}`} src={icon} radius="md" w={50} h={50} />
))}
</Stack>
</GridCol>

5
apps/nextjs/src/app/[locale]/manage/about/about.module.css
View File

@@ -1,6 +1,3 @@
.contributorCard {
background-color: light-dark(
var(--mantine-color-gray-1),
var(--mantine-color-dark-5)
);
background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
}

18
apps/nextjs/src/app/[locale]/manage/about/page.tsx
View File

@@ -55,9 +55,7 @@ export default async function AboutPage({ params: { locale } }: PageProps) {
<Title order={1} tt="uppercase">
Homarr
</Title>
<Title order={2}>
{t("version", { version: attributes.version })}
</Title>
<Title order={2}>{t("version", { version: attributes.version })}</Title>
</Stack>
</Group>
</Center>
@@ -150,20 +148,10 @@ interface GenericContributorLinkCardProps {
image: string;
}
const GenericContributorLinkCard = ({
name,
image,
link,
}: GenericContributorLinkCardProps) => {
const GenericContributorLinkCard = ({ name, image, link }: GenericContributorLinkCardProps) => {
return (
<AspectRatio ratio={1}>
<Card
className={classes.contributorCard}
component="a"
href={link}
target="_blank"
w={100}
>
<Card className={classes.contributorCard} component="a" href={link} target="_blank" w={100}>
<Stack align="center">
<Avatar src={image} alt={name} size={40} display="block" />
<Text lineClamp={1} size="sm">

13
apps/nextjs/src/app/[locale]/manage/apps/_app-delete-button.tsx
View File

@@ -7,10 +7,7 @@ import { IconTrash } from "@tabler/icons-react";
import type { RouterOutputs } from "@homarr/api";
import { clientApi } from "@homarr/api/client";
import { useConfirmModal } from "@homarr/modals";
import {
showErrorNotification,
showSuccessNotification,
} from "@homarr/notifications";
import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
import { useScopedI18n } from "@homarr/translation/client";
import { revalidatePathActionAsync } from "../../../revalidatePathAction";
@@ -52,13 +49,7 @@ export const AppDeleteButton = ({ app }: AppDeleteButtonProps) => {
}, [app, mutate, t, openConfirmModal]);
return (
<ActionIcon
loading={isPending}
variant="subtle"
color="red"
onClick={onClick}
aria-label="Delete app"
>
<ActionIcon loading={isPending} variant="subtle" color="red" onClick={onClick} aria-label="Delete app">
<IconTrash color="red" size={16} stroke={1.5} />
</ActionIcon>
);

8
apps/nextjs/src/app/[locale]/manage/apps/_form.tsx
View File

@@ -21,8 +21,7 @@ interface AppFormProps {
}
export const AppForm = (props: AppFormProps) => {
const { submitButtonTranslation, handleSubmit, initialValues, isPending } =
props;
const { submitButtonTranslation, handleSubmit, initialValues, isPending } = props;
const t = useI18n();
const form = useZodForm(validation.app.manage, {
@@ -38,10 +37,7 @@ export const AppForm = (props: AppFormProps) => {
<form onSubmit={form.onSubmit(handleSubmit)}>
<Stack>
<TextInput {...form.getInputProps("name")} withAsterisk label="Name" />
<IconPicker
initialValue={initialValues?.iconUrl}
{...form.getInputProps("iconUrl")}
/>
<IconPicker initialValue={initialValues?.iconUrl} {...form.getInputProps("iconUrl")} />
<Textarea {...form.getInputProps("description")} label="Description" />
<TextInput {...form.getInputProps("href")} label="URL" />

10
apps/nextjs/src/app/[locale]/manage/apps/edit/[id]/_app-edit-form.tsx
View File

@@ -5,10 +5,7 @@ import { useRouter } from "next/navigation";
import type { RouterOutputs } from "@homarr/api";
import { clientApi } from "@homarr/api/client";
import {
showErrorNotification,
showSuccessNotification,
} from "@homarr/notifications";
import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
import type { TranslationFunction } from "@homarr/translation";
import { useScopedI18n } from "@homarr/translation/client";
import type { validation, z } from "@homarr/validation";
@@ -52,10 +49,7 @@ export const AppEditForm = ({ app }: AppEditFormProps) => {
[mutate, app.id],
);
const submitButtonTranslation = useCallback(
(t: TranslationFunction) => t("common.action.save"),
[],
);
const submitButtonTranslation = useCallback((t: TranslationFunction) => t("common.action.save"), []);
return (
<AppForm

16
apps/nextjs/src/app/[locale]/manage/apps/new/_app-new-form.tsx
View File

@@ -4,10 +4,7 @@ import { useCallback } from "react";
import { useRouter } from "next/navigation";
import { clientApi } from "@homarr/api/client";
import {
showErrorNotification,
showSuccessNotification,
} from "@homarr/notifications";
import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
import type { TranslationFunction } from "@homarr/translation";
import { useScopedI18n } from "@homarr/translation/client";
import type { validation, z } from "@homarr/validation";
@@ -44,16 +41,9 @@ export const AppNewForm = () => {
[mutate],
);
const submitButtonTranslation = useCallback(
(t: TranslationFunction) => t("common.action.create"),
[],
);
const submitButtonTranslation = useCallback((t: TranslationFunction) => t("common.action.create"), []);
return (
<AppForm
submitButtonTranslation={submitButtonTranslation}
handleSubmit={handleSubmit}
isPending={isPending}
/>
<AppForm submitButtonTranslation={submitButtonTranslation} handleSubmit={handleSubmit} isPending={isPending} />
);
};

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

@@ -107,9 +107,7 @@ const AppNoResults = async () => {
<Text fw={500} size="lg">
{t("app.page.list.noResults.title")}
</Text>
<Anchor href="/manage/apps/new">
{t("app.page.list.noResults.description")}
</Anchor>
<Anchor href="/manage/apps/new">{t("app.page.list.noResults.description")}</Anchor>
</Stack>
</Card>
);

16
apps/nextjs/src/app/[locale]/manage/boards/_components/board-card-menu-dropdown.tsx
View File

@@ -21,18 +21,11 @@ const iconProps = {
interface BoardCardMenuDropdownProps {
board: Pick<
RouterOutputs["board"]["getAllBoards"][number],
| "id"
| "name"
| "creator"
| "userPermissions"
| "groupPermissions"
| "isPublic"
"id" | "name" | "creator" | "userPermissions" | "groupPermissions" | "isPublic"
>;
}
export const BoardCardMenuDropdown = ({
board,
}: BoardCardMenuDropdownProps) => {
export const BoardCardMenuDropdown = ({ board }: BoardCardMenuDropdownProps) => {
const t = useScopedI18n("management.page.board.action");
const tCommon = useScopedI18n("common");
@@ -73,10 +66,7 @@ export const BoardCardMenuDropdown = ({
return (
<Menu.Dropdown>
<Menu.Item
onClick={handleSetHomeBoard}
leftSection={<IconHome {...iconProps} />}
>
<Menu.Item onClick={handleSetHomeBoard} leftSection={<IconHome {...iconProps} />}>
{t("setHomeBoard.label")}
</Menu.Item>
{hasChangeAccess && (

6
apps/nextjs/src/app/[locale]/manage/boards/_components/create-board-button.tsx
View File

@@ -37,11 +37,7 @@ export const CreateBoardButton = ({ boardNames }: CreateBoardButtonProps) => {
}, [mutateAsync, boardNames, openModal]);
return (
<Button
leftSection={<IconCategoryPlus size="1rem" />}
onClick={onClick}
loading={isPending}
>
<Button leftSection={<IconCategoryPlus size="1rem" />} onClick={onClick} loading={isPending}>
{t("management.page.board.action.new.label")}
</Button>
);

24
apps/nextjs/src/app/[locale]/manage/boards/page.tsx
View File

@@ -14,12 +14,7 @@ import {
Title,
Tooltip,
} from "@mantine/core";
import {
IconDotsVertical,
IconHomeFilled,
IconLock,
IconWorld,
} from "@tabler/icons-react";
import { IconDotsVertical, IconHomeFilled, IconLock, IconWorld } from "@tabler/icons-react";
import type { RouterOutputs } from "@homarr/api";
import { api } from "@homarr/api/server";
@@ -59,8 +54,7 @@ interface BoardCardProps {
const BoardCard = async ({ board }: BoardCardProps) => {
const t = await getScopedI18n("management.page.board");
const { hasChangeAccess: isMenuVisible } =
await getBoardPermissionsAsync(board);
const { hasChangeAccess: isMenuVisible } = await getBoardPermissionsAsync(board);
const visibility = board.isPublic ? "public" : "private";
const VisibilityIcon = board.isPublic ? IconWorld : IconLock;
@@ -80,12 +74,7 @@ const BoardCard = async ({ board }: BoardCardProps) => {
<Group>
{board.isHome && (
<Tooltip label={t("action.setHomeBoard.badge.tooltip")}>
<Badge
tt="none"
color="yellow"
variant="light"
leftSection={<IconHomeFilled size=".7rem" />}
>
<Badge tt="none" color="yellow" variant="light" leftSection={<IconHomeFilled size=".7rem" />}>
{t("action.setHomeBoard.badge.label")}
</Badge>
</Tooltip>
@@ -103,12 +92,7 @@ const BoardCard = async ({ board }: BoardCardProps) => {
<CardSection p="sm">
<Group wrap="nowrap">
<Button
component={Link}
href={`/boards/${board.name}`}
variant="default"
fullWidth
>
<Button component={Link} href={`/boards/${board.name}`} variant="default" fullWidth>
{t("action.open.label")}
</Button>
{isMenuVisible && (

10
apps/nextjs/src/app/[locale]/manage/integrations/_integration-buttons.tsx
View File

@@ -6,10 +6,7 @@ import { IconTrash } from "@tabler/icons-react";
import { clientApi } from "@homarr/api/client";
import { useConfirmModal } from "@homarr/modals";
import {
showErrorNotification,
showSuccessNotification,
} from "@homarr/notifications";
import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
import { useScopedI18n } from "@homarr/translation/client";
import { revalidatePathActionAsync } from "../../../revalidatePathAction";
@@ -19,10 +16,7 @@ interface DeleteIntegrationActionButtonProps {
integration: { id: string; name: string };
}
export const DeleteIntegrationActionButton = ({
count,
integration,
}: DeleteIntegrationActionButtonProps) => {
export const DeleteIntegrationActionButton = ({ count, integration }: DeleteIntegrationActionButtonProps) => {
const t = useScopedI18n("integration.page.delete");
const router = useRouter();
const { openConfirmModal } = useConfirmModal();

25
apps/nextjs/src/app/[locale]/manage/integrations/_integration-secret-card.tsx
View File

@@ -2,17 +2,7 @@
import { useState } from "react";
import { useParams } from "next/navigation";
import {
ActionIcon,
Avatar,
Button,
Card,
Collapse,
Group,
Kbd,
Stack,
Text,
} from "@mantine/core";
import { ActionIcon, Avatar, Button, Card, Collapse, Group, Kbd, Stack, Text } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { IconEye, IconEyeOff } from "@tabler/icons-react";
import dayjs from "dayjs";
@@ -36,8 +26,7 @@ export const SecretCard = ({ secret, children, onCancel }: SecretCardProps) => {
const params = useParams<{ locale: string }>();
const t = useI18n();
const { isPublic } = integrationSecretKindObject[secret.kind];
const [publicSecretDisplayOpened, { toggle: togglePublicSecretDisplay }] =
useDisclosure(false);
const [publicSecretDisplayOpened, { toggle: togglePublicSecretDisplay }] = useDisclosure(false);
const [editMode, setEditMode] = useState(false);
const DisplayIcon = publicSecretDisplayOpened ? IconEye : IconEyeOff;
const KindIcon = integrationSecretIcons[secret.kind];
@@ -50,9 +39,7 @@ export const SecretCard = ({ secret, children, onCancel }: SecretCardProps) => {
<Avatar>
<KindIcon size={16} />
</Avatar>
<Text fw={500}>
{t(`integration.secrets.kind.${secret.kind}.label`)}
</Text>
<Text fw={500}>{t(`integration.secrets.kind.${secret.kind}.label`)}</Text>
{publicSecretDisplayOpened ? <Kbd>{secret.value}</Kbd> : null}
</Group>
<Group>
@@ -62,11 +49,7 @@ export const SecretCard = ({ secret, children, onCancel }: SecretCardProps) => {
})}
</Text>
{isPublic ? (
<ActionIcon
color="gray"
variant="subtle"
onClick={togglePublicSecretDisplay}
>
<ActionIcon color="gray" variant="subtle" onClick={togglePublicSecretDisplay}>
<DisplayIcon size={16} stroke={1.5} />
</ActionIcon>
) : null}

5
apps/nextjs/src/app/[locale]/manage/integrations/_integration-secret-inputs.tsx
View File

@@ -42,10 +42,7 @@ const PublicSecretInput = ({ kind, ...props }: IntegrationSecretInputProps) => {
);
};
const PrivateSecretInput = ({
kind,
...props
}: IntegrationSecretInputProps) => {
const PrivateSecretInput = ({ kind, ...props }: IntegrationSecretInputProps) => {
const t = useI18n();
const Icon = integrationSecretIcons[kind];

39
apps/nextjs/src/app/[locale]/manage/integrations/_integration-test-connection.tsx
View File

@@ -6,10 +6,7 @@ import { IconCheck, IconInfoCircle, IconX } from "@tabler/icons-react";
import type { RouterInputs } from "@homarr/api";
import { clientApi } from "@homarr/api/client";
import {
showErrorNotification,
showSuccessNotification,
} from "@homarr/notifications";
import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
import { useI18n, useScopedI18n } from "@homarr/translation/client";
interface UseTestConnectionDirtyProps {
@@ -20,10 +17,7 @@ interface UseTestConnectionDirtyProps {
};
}
export const useTestConnectionDirty = ({
defaultDirty,
initialFormValue,
}: UseTestConnectionDirtyProps) => {
export const useTestConnectionDirty = ({ defaultDirty, initialFormValue }: UseTestConnectionDirtyProps) => {
const [isDirty, setIsDirty] = useState(defaultDirty);
const prevFormValueRef = useRef(initialFormValue);
@@ -36,10 +30,7 @@ export const useTestConnectionDirty = ({
prevFormValueRef.current.url !== values.url ||
!prevFormValueRef.current.secrets
.map((secret) => secret.value)
.every(
(secretValue, index) =>
values.secrets[index]?.value === secretValue,
)
.every((secretValue, index) => values.secrets[index]?.value === secretValue)
) {
setIsDirty(true);
return;
@@ -62,14 +53,9 @@ interface TestConnectionProps {
integration: RouterInputs["integration"]["testConnection"] & { name: string };
}
export const TestConnection = ({
integration,
removeDirty,
isDirty,
}: TestConnectionProps) => {
export const TestConnection = ({ integration, removeDirty, isDirty }: TestConnectionProps) => {
const t = useScopedI18n("integration.testConnection");
const { mutateAsync, ...mutation } =
clientApi.integration.testConnection.useMutation();
const { mutateAsync, ...mutation } = clientApi.integration.testConnection.useMutation();
return (
<Group>
@@ -125,13 +111,7 @@ interface TestConnectionIconProps {
size: number;
}
const TestConnectionIcon = ({
isDirty,
isPending,
isSuccess,
isError,
size,
}: TestConnectionIconProps) => {
const TestConnectionIcon = ({ isDirty, isPending, isSuccess, isError, size }: TestConnectionIconProps) => {
if (isPending) return <Loader color="blue" size={size} />;
if (isDirty) return null;
if (isSuccess) return <IconCheck size={size} stroke={1.5} color="green" />;
@@ -142,12 +122,7 @@ const TestConnectionIcon = ({
export const TestConnectionNoticeAlert = () => {
const t = useI18n();
return (
<Alert
variant="light"
color="yellow"
title="Test Connection"
icon={<IconInfoCircle />}
>
<Alert variant="light" color="yellow" title="Test Connection" icon={<IconInfoCircle />}>
{t("integration.testConnection.alertNotice")}
</Alert>
);

55
apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form.tsx
View File

@@ -6,16 +6,10 @@ import { Button, Fieldset, Group, Stack, TextInput } from "@mantine/core";
import type { RouterOutputs } from "@homarr/api";
import { clientApi } from "@homarr/api/client";
import {
getAllSecretKindOptions,
getDefaultSecretKinds,
} from "@homarr/definitions";
import { getAllSecretKindOptions, getDefaultSecretKinds } from "@homarr/definitions";
import { useZodForm } from "@homarr/form";
import { useConfirmModal } from "@homarr/modals";
import {
showErrorNotification,
showSuccessNotification,
} from "@homarr/notifications";
import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
import { useI18n } from "@homarr/translation/client";
import type { z } from "@homarr/validation";
import { validation } from "@homarr/validation";
@@ -23,11 +17,7 @@ import { validation } from "@homarr/validation";
import { revalidatePathActionAsync } from "~/app/revalidatePathAction";
import { SecretCard } from "../../_integration-secret-card";
import { IntegrationSecretInput } from "../../_integration-secret-inputs";
import {
TestConnection,
TestConnectionNoticeAlert,
useTestConnectionDirty,
} from "../../_integration-test-connection";
import { TestConnection, TestConnectionNoticeAlert, useTestConnectionDirty } from "../../_integration-test-connection";
interface EditIntegrationForm {
integration: RouterOutputs["integration"]["byId"];
@@ -45,8 +35,7 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
url: integration.url,
secrets: secretsKinds.map((kind) => ({
kind,
value:
integration.secrets.find((secret) => secret.kind === kind)?.value ?? "",
value: integration.secrets.find((secret) => secret.kind === kind)?.value ?? "",
})),
};
const { isDirty, onValuesChange, removeDirty } = useTestConnectionDirty({
@@ -61,9 +50,7 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
});
const { mutateAsync, isPending } = clientApi.integration.update.useMutation();
const secretsMap = new Map(
integration.secrets.map((secret) => [secret.kind, secret]),
);
const secretsMap = new Map(integration.secrets.map((secret) => [secret.kind, secret]));
const handleSubmitAsync = async (values: FormType) => {
if (isDirty) return;
@@ -82,9 +69,7 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
title: t("integration.page.edit.notification.success.title"),
message: t("integration.page.edit.notification.success.message"),
});
void revalidatePathActionAsync("/manage/integrations").then(() =>
router.push("/manage/integrations"),
);
void revalidatePathActionAsync("/manage/integrations").then(() => router.push("/manage/integrations"));
},
onError: () => {
showErrorNotification({
@@ -101,17 +86,9 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
<Stack>
<TestConnectionNoticeAlert />
<TextInput
withAsterisk
label={t("integration.field.name.label")}
{...form.getInputProps("name")}
/>
<TextInput withAsterisk label={t("integration.field.name.label")} {...form.getInputProps("name")} />
<TextInput
withAsterisk
label={t("integration.field.url.label")}
{...form.getInputProps("url")}
/>
<TextInput withAsterisk label={t("integration.field.url.label")} {...form.getInputProps("url")} />
<Fieldset legend={t("integration.secrets.title")}>
<Stack gap="sm">
@@ -122,10 +99,7 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
onCancel={() =>
new Promise((res) => {
// When nothing changed, just close the secret card
if (
(form.values.secrets[index]?.value ?? "") ===
(secretsMap.get(kind)?.value ?? "")
) {
if ((form.values.secrets[index]?.value ?? "") === (secretsMap.get(kind)?.value ?? "")) {
return res(true);
}
openConfirmModal({
@@ -133,10 +107,7 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
children: t("integration.secrets.reset.message"),
onCancel: () => res(false),
onConfirm: () => {
form.setFieldValue(
`secrets.${index}.value`,
secretsMap.get(kind)!.value ?? "",
);
form.setFieldValue(`secrets.${index}.value`, secretsMap.get(kind)!.value ?? "");
res(true);
},
});
@@ -165,11 +136,7 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
}}
/>
<Group>
<Button
variant="default"
component={Link}
href="/manage/integrations"
>
<Button variant="default" component={Link} href="/manage/integrations">
{t("common.action.backToOverview")}
</Button>
<Button type="submit" loading={isPending} disabled={isDirty}>

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

@@ -11,9 +11,7 @@ interface EditIntegrationPageProps {
params: { id: string };
}
export default async function EditIntegrationPage({
params,
}: EditIntegrationPageProps) {
export default async function EditIntegrationPage({ params }: EditIntegrationPageProps) {
const t = await getScopedI18n("integration.page.edit");
const integration = await api.integration.byId({ id: params.id });
@@ -22,9 +20,7 @@ export default async function EditIntegrationPage({
<Stack>
<Group align="center">
<IntegrationAvatar kind={integration.kind} size="md" />
<Title>
{t("title", { name: getIntegrationName(integration.kind) })}
</Title>
<Title>{t("title", { name: getIntegrationName(integration.kind) })}</Title>
</Group>
<EditIntegrationForm integration={integration} />
</Stack>

10
apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-dropdown.tsx
View File

@@ -16,9 +16,7 @@ export const IntegrationCreateDropdownContent = () => {
const [search, setSearch] = useState("");
const filteredKinds = useMemo(() => {
return integrationKinds.filter((kind) =>
kind.includes(search.toLowerCase()),
);
return integrationKinds.filter((kind) => kind.includes(search.toLowerCase()));
}, [search]);
const handleSearch = React.useCallback(
@@ -38,11 +36,7 @@ export const IntegrationCreateDropdownContent = () => {
{filteredKinds.length > 0 ? (
<ScrollArea.Autosize mah={384}>
{filteredKinds.map((kind) => (
<Menu.Item
component={Link}
href={`/manage/integrations/new?kind=${kind}`}
key={kind}
>
<Menu.Item component={Link} href={`/manage/integrations/new?kind=${kind}`} key={kind}>
<Group>
<IntegrationAvatar kind={kind} size="sm" />
<Text size="sm">{getIntegrationName(kind)}</Text>

71
apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-form.tsx
View File

@@ -3,37 +3,20 @@
import { useCallback } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import {
Button,
Fieldset,
Group,
SegmentedControl,
Stack,
TextInput,
} from "@mantine/core";
import { Button, Fieldset, Group, SegmentedControl, Stack, TextInput } from "@mantine/core";
import { clientApi } from "@homarr/api/client";
import type {
IntegrationKind,
IntegrationSecretKind,
} from "@homarr/definitions";
import type { IntegrationKind, IntegrationSecretKind } from "@homarr/definitions";
import { getAllSecretKindOptions } from "@homarr/definitions";
import type { UseFormReturnType } from "@homarr/form";
import { useZodForm } from "@homarr/form";
import {
showErrorNotification,
showSuccessNotification,
} from "@homarr/notifications";
import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
import { useI18n, useScopedI18n } from "@homarr/translation/client";
import type { z } from "@homarr/validation";
import { validation } from "@homarr/validation";
import { IntegrationSecretInput } from "../_integration-secret-inputs";
import {
TestConnection,
TestConnectionNoticeAlert,
useTestConnectionDirty,
} from "../_integration-test-connection";
import { TestConnection, TestConnectionNoticeAlert, useTestConnectionDirty } from "../_integration-test-connection";
import { revalidatePathActionAsync } from "../../../../revalidatePathAction";
interface NewIntegrationFormProps {
@@ -42,9 +25,7 @@ interface NewIntegrationFormProps {
};
}
export const NewIntegrationForm = ({
searchParams,
}: NewIntegrationFormProps) => {
export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) => {
const t = useI18n();
const secretKinds = getAllSecretKindOptions(searchParams.kind);
const initialFormValues = {
@@ -79,9 +60,7 @@ export const NewIntegrationForm = ({
title: t("integration.page.create.notification.success.title"),
message: t("integration.page.create.notification.success.message"),
});
void revalidatePathActionAsync("/manage/integrations").then(() =>
router.push("/manage/integrations"),
);
void revalidatePathActionAsync("/manage/integrations").then(() => router.push("/manage/integrations"));
},
onError: () => {
showErrorNotification({
@@ -98,26 +77,13 @@ export const NewIntegrationForm = ({
<Stack>
<TestConnectionNoticeAlert />
<TextInput
withAsterisk
label={t("integration.field.name.label")}
{...form.getInputProps("name")}
/>
<TextInput withAsterisk label={t("integration.field.name.label")} {...form.getInputProps("name")} />
<TextInput
withAsterisk
label={t("integration.field.url.label")}
{...form.getInputProps("url")}
/>
<TextInput withAsterisk label={t("integration.field.url.label")} {...form.getInputProps("url")} />
<Fieldset legend={t("integration.secrets.title")}>
<Stack gap="sm">
{secretKinds.length > 1 && (
<SecretKindsSegmentedControl
secretKinds={secretKinds}
form={form}
/>
)}
{secretKinds.length > 1 && <SecretKindsSegmentedControl secretKinds={secretKinds} form={form} />}
{form.values.secrets.map(({ kind }, index) => (
<IntegrationSecretInput
withAsterisk
@@ -141,11 +107,7 @@ export const NewIntegrationForm = ({
/>
<Group>
<Button
variant="default"
component={Link}
href="/manage/integrations"
>
<Button variant="default" component={Link} href="/manage/integrations">
{t("common.action.backToOverview")}
</Button>
<Button type="submit" loading={isPending} disabled={isDirty}>
@@ -163,10 +125,7 @@ interface SecretKindsSegmentedControlProps {
form: UseFormReturnType<FormType, (values: FormType) => FormType>;
}
const SecretKindsSegmentedControl = ({
secretKinds,
form,
}: SecretKindsSegmentedControlProps) => {
const SecretKindsSegmentedControl = ({ secretKinds, form }: SecretKindsSegmentedControlProps) => {
const t = useScopedI18n("integration.secrets");
const secretKindGroups = secretKinds.map((kinds) => ({
@@ -186,13 +145,7 @@ const SecretKindsSegmentedControl = ({
[form],
);
return (
<SegmentedControl
fullWidth
data={secretKindGroups}
onChange={onChange}
></SegmentedControl>
);
return <SegmentedControl fullWidth data={secretKindGroups} onChange={onChange}></SegmentedControl>;
};
type FormType = Omit<z.infer<typeof validation.integration.create>, "kind">;

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

@@ -16,12 +16,8 @@ interface NewIntegrationPageProps {
};
}
export default async function IntegrationsNewPage({
searchParams,
}: NewIntegrationPageProps) {
const result = z
.enum([integrationKinds[0]!, ...integrationKinds.slice(1)])
.safeParse(searchParams.kind);
export default async function IntegrationsNewPage({ searchParams }: NewIntegrationPageProps) {
const result = z.enum([integrationKinds[0]!, ...integrationKinds.slice(1)]).safeParse(searchParams.kind);
if (!result.success) {
notFound();
}

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

@@ -43,9 +43,7 @@ interface IntegrationsPageProps {
};
}
export default async function IntegrationsPage({
searchParams,
}: IntegrationsPageProps) {
export default async function IntegrationsPage({ searchParams }: IntegrationsPageProps) {
const integrations = await api.integration.all();
const t = await getScopedI18n("integration");
@@ -54,18 +52,9 @@ export default async function IntegrationsPage({
<Stack>
<Group justify="space-between" align="center">
<Title>{t("page.list.title")}</Title>
<Menu
width={256}
trapFocus
position="bottom-start"
withinPortal
shadow="md"
keepMounted={false}
>
<Menu width={256} trapFocus position="bottom-start" withinPortal shadow="md" keepMounted={false}>
<MenuTarget>
<Button rightSection={<IconChevronDown size={16} stroke={1.5} />}>
{t("action.create")}
</Button>
<Button rightSection={<IconChevronDown size={16} stroke={1.5} />}>{t("action.create")}</Button>
</MenuTarget>
<MenuDropdown>
<IntegrationCreateDropdownContent />
@@ -73,10 +62,7 @@ export default async function IntegrationsPage({
</Menu>
</Group>
<IntegrationList
integrations={integrations}
activeTab={searchParams.tab}
/>
<IntegrationList integrations={integrations} activeTab={searchParams.tab} />
</Stack>
</Container>
);
@@ -87,10 +73,7 @@ interface IntegrationListProps {
activeTab?: IntegrationKind;
}
const IntegrationList = async ({
integrations,
activeTab,
}: IntegrationListProps) => {
const IntegrationList = async ({ integrations, activeTab }: IntegrationListProps) => {
const t = await getScopedI18n("integration");
if (integrations.length === 0) {
@@ -134,12 +117,7 @@ const IntegrationList = async ({
<TableTr key={integration.id}>
<TableTd>{integration.name}</TableTd>
<TableTd>
<Anchor
href={integration.url}
target="_blank"
rel="noreferrer"
size="sm"
>
<Anchor href={integration.url} target="_blank" rel="noreferrer" size="sm">
{integration.url}
</Anchor>
</TableTd>
@@ -155,10 +133,7 @@ const IntegrationList = async ({
>
<IconPencil size={16} stroke={1.5} />
</ActionIcon>
<DeleteIntegrationActionButton
integration={integration}
count={integrations.length}
/>
<DeleteIntegrationActionButton integration={integration} count={integrations.length} />
</ActionIconGroup>
</Group>
</TableTd>

7
apps/nextjs/src/app/[locale]/manage/page.tsx
View File

@@ -71,12 +71,7 @@ export default async function ManagementPage() {
<Space h="md" />
<SimpleGrid cols={{ xs: 1, sm: 2, md: 3 }}>
{links.map((link, index) => (
<Card
component={Link}
href={link.href}
key={`link-${index}`}
withBorder
>
<Card component={Link} href={link.href} key={`link-${index}`} withBorder>
<Group justify="space-between">
<Group>
<Text size="2.4rem" fw="bolder">

47
apps/nextjs/src/app/[locale]/manage/settings/_components/analytics.settings.tsx
View File

@@ -3,16 +3,7 @@
import type { ReactNode } from "react";
import React from "react";
import type { MantineSpacing } from "@mantine/core";
import {
Card,
Group,
LoadingOverlay,
Stack,
Switch,
Text,
Title,
UnstyledButton,
} from "@mantine/core";
import { Card, Group, LoadingOverlay, Stack, Switch, Text, Title, UnstyledButton } from "@mantine/core";
import { clientApi } from "@homarr/api/client";
import type { UseFormReturnType } from "@homarr/form";
@@ -37,9 +28,7 @@ export const AnalyticsSettings = ({ initialData }: AnalyticsSettingsProps) => {
if (
!updatedValues.enableGeneral &&
(updatedValues.enableWidgetData ||
updatedValues.enableIntegrationData ||
updatedValues.enableUserData)
(updatedValues.enableWidgetData || updatedValues.enableIntegrationData || updatedValues.enableUserData)
) {
updatedValues.enableIntegrationData = false;
updatedValues.enableUserData = false;
@@ -53,30 +42,20 @@ export const AnalyticsSettings = ({ initialData }: AnalyticsSettingsProps) => {
},
});
const { mutateAsync, isPending } =
clientApi.serverSettings.saveSettings.useMutation({
onSettled: async () => {
await revalidatePathActionAsync("/manage/settings");
},
});
const { mutateAsync, isPending } = clientApi.serverSettings.saveSettings.useMutation({
onSettled: async () => {
await revalidatePathActionAsync("/manage/settings");
},
});
return (
<>
<Title order={2}>{t("title")}</Title>
<Card pos="relative" withBorder>
<LoadingOverlay
visible={isPending}
zIndex={1000}
overlayProps={{ radius: "sm", blur: 2 }}
/>
<LoadingOverlay visible={isPending} zIndex={1000} overlayProps={{ radius: "sm", blur: 2 }} />
<Stack>
<SwitchSetting
form={form}
formKey="enableGeneral"
title={t("general.title")}
text={t("general.text")}
/>
<SwitchSetting form={form} formKey="enableGeneral" title={t("general.title")} text={t("general.text")} />
<SwitchSetting
form={form}
formKey="enableIntegrationData"
@@ -122,13 +101,7 @@ const SwitchSetting = ({
}, [form, formKey]);
return (
<UnstyledButton onClick={handleClick}>
<Group
ms={ms}
justify="space-between"
gap="lg"
align="center"
wrap="nowrap"
>
<Group ms={ms} justify="space-between" gap="lg" align="center" wrap="nowrap">
<Stack gap={0}>
<Text fw="bold">{title}</Text>
<Text c="gray.5">{text}</Text>

7
apps/nextjs/src/app/[locale]/manage/tools/logs/page.tsx
View File

@@ -23,12 +23,7 @@ const ClientSideTerminalComponent = dynamic(() => import("./terminal"), {
export default function LogsManagementPage() {
return (
<Box
style={{ borderRadius: 6 }}
h={fullHeightWithoutHeaderAndFooter}
p="md"
bg="black"
>
<Box style={{ borderRadius: 6 }} h={fullHeightWithoutHeaderAndFooter} p="md" bg="black">
<ClientSideTerminalComponent />
</Box>
);

13
apps/nextjs/src/app/[locale]/manage/tools/logs/terminal.tsx
View File

@@ -16,9 +16,7 @@ export default function TerminalComponent() {
const terminalRef = useRef<Terminal>();
clientApi.log.subscribe.useSubscription(undefined, {
onData(data) {
terminalRef.current?.writeln(
`${data.timestamp} ${data.level} ${data.message}`,
);
terminalRef.current?.writeln(`${data.timestamp} ${data.level} ${data.message}`);
terminalRef.current?.refresh(0, terminalRef.current.rows - 1);
},
onError(err) {
@@ -55,12 +53,5 @@ export default function TerminalComponent() {
canvasAddon.dispose();
};
}, []);
return (
<Box
ref={ref}
id="terminal"
className={classes.outerTerminal}
h="100%"
></Box>
);
return <Box ref={ref} id="terminal" className={classes.outerTerminal} h="100%"></Box>;
}

5
apps/nextjs/src/app/[locale]/manage/users/[userId]/access.ts
View File

@@ -1,9 +1,6 @@
import type { Session } from "@homarr/auth";
export const canAccessUserEditPage = (
session: Session | null,
userId: string,
) => {
export const canAccessUserEditPage = (session: Session | null, userId: string) => {
if (!session) {
return false;
}

13
apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_delete-user-button.tsx
View File

@@ -18,14 +18,11 @@ interface DeleteUserButtonProps {
export const DeleteUserButton = ({ user }: DeleteUserButtonProps) => {
const t = useI18n();
const router = useRouter();
const { mutateAsync: mutateUserDeletionAsync } =
clientApi.user.delete.useMutation({
async onSuccess() {
await revalidatePathActionAsync("/manage/users").then(() =>
router.push("/manage/users"),
);
},
});
const { mutateAsync: mutateUserDeletionAsync } = clientApi.user.delete.useMutation({
async onSuccess() {
await revalidatePathActionAsync("/manage/users").then(() => router.push("/manage/users"));
},
});
const { openConfirmModal } = useConfirmModal();
const handleDelete = useCallback(

49
apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-avatar-form.tsx
View File

@@ -8,10 +8,7 @@ import { IconPencil, IconPhotoEdit, IconPhotoX } from "@tabler/icons-react";
import type { RouterOutputs } from "@homarr/api";
import { clientApi } from "@homarr/api/client";
import { useConfirmModal } from "@homarr/modals";
import {
showErrorNotification,
showSuccessNotification,
} from "@homarr/notifications";
import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
import { useI18n, useScopedI18n } from "@homarr/translation/client";
import { UserAvatar } from "@homarr/ui";
@@ -46,25 +43,18 @@ export const UserProfileAvatarForm = ({ user }: UserProfileAvatarForm) => {
// Revalidate all as the avatar is used in multiple places
await revalidatePathActionAsync("/");
showSuccessNotification({
message: tManageAvatar(
"changeImage.notification.success.message",
),
message: tManageAvatar("changeImage.notification.success.message"),
});
},
onError(error) {
if (error.shape?.data.code === "BAD_REQUEST") {
showErrorNotification({
title: tManageAvatar("changeImage.notification.toLarge.title"),
message: tManageAvatar(
"changeImage.notification.toLarge.message",
{ size: "256KB" },
),
message: tManageAvatar("changeImage.notification.toLarge.message", { size: "256KB" }),
});
} else {
showErrorNotification({
message: tManageAvatar(
"changeImage.notification.error.message",
),
message: tManageAvatar("changeImage.notification.error.message"),
});
}
},
@@ -89,16 +79,12 @@ export const UserProfileAvatarForm = ({ user }: UserProfileAvatarForm) => {
// Revalidate all as the avatar is used in multiple places
await revalidatePathActionAsync("/");
showSuccessNotification({
message: tManageAvatar(
"removeImage.notification.success.message",
),
message: tManageAvatar("removeImage.notification.success.message"),
});
},
onError() {
showErrorNotification({
message: tManageAvatar(
"removeImage.notification.error.message",
),
message: tManageAvatar("removeImage.notification.error.message"),
});
},
},
@@ -109,13 +95,7 @@ export const UserProfileAvatarForm = ({ user }: UserProfileAvatarForm) => {
return (
<Box pos="relative">
<Menu
opened={opened}
keepMounted
onChange={toggle}
position="bottom-start"
withArrow
>
<Menu opened={opened} keepMounted onChange={toggle} position="bottom-start" withArrow>
<Menu.Target>
<UnstyledButton onClick={toggle}>
<UserAvatar user={user} size={200} />
@@ -134,24 +114,15 @@ export const UserProfileAvatarForm = ({ user }: UserProfileAvatarForm) => {
</UnstyledButton>
</Menu.Target>
<Menu.Dropdown>
<FileButton
onChange={handleAvatarChange}
accept="image/png,image/jpeg,image/webp,image/gif"
>
<FileButton onChange={handleAvatarChange} accept="image/png,image/jpeg,image/webp,image/gif">
{(props) => (
<Menu.Item
{...props}
leftSection={<IconPhotoEdit size={16} stroke={1.5} />}
>
<Menu.Item {...props} leftSection={<IconPhotoEdit size={16} stroke={1.5} />}>
{tManageAvatar("changeImage.label")}
</Menu.Item>
)}
</FileButton>
{user.image && (
<Menu.Item
onClick={handleRemoveAvatar}
leftSection={<IconPhotoX size={16} stroke={1.5} />}
>
<Menu.Item onClick={handleRemoveAvatar} leftSection={<IconPhotoX size={16} stroke={1.5} />}>
{tManageAvatar("removeImage.label")}
</Menu.Item>
)}

16
apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-form.tsx
View File

@@ -6,10 +6,7 @@ import { Button, Group, Stack, TextInput } from "@mantine/core";
import type { RouterInputs, RouterOutputs } from "@homarr/api";
import { clientApi } from "@homarr/api/client";
import { useZodForm } from "@homarr/form";
import {
showErrorNotification,
showSuccessNotification,
} from "@homarr/notifications";
import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
import { useI18n } from "@homarr/translation/client";
import { validation } from "@homarr/validation";
@@ -58,15 +55,8 @@ export const UserProfileForm = ({ user }: UserProfileFormProps) => {
return (
<form onSubmit={form.onSubmit(handleSubmit)}>
<Stack>
<TextInput
label={t("user.field.username.label")}
withAsterisk
{...form.getInputProps("name")}
/>
<TextInput
label={t("user.field.email.label")}
{...form.getInputProps("email")}
/>
<TextInput label={t("user.field.username.label")} withAsterisk {...form.getInputProps("name")} />
<TextInput label={t("user.field.email.label")} {...form.getInputProps("email")} />
<Group justify="end">
<Button type="submit" color="teal" loading={isPending}>

5
apps/nextjs/src/app/[locale]/manage/users/[userId]/general/page.tsx
View File

@@ -5,10 +5,7 @@ import { api } from "@homarr/api/server";
import { auth } from "@homarr/auth/next";
import { getI18n, getScopedI18n } from "@homarr/translation/server";
import {
DangerZoneItem,
DangerZoneRoot,
} from "~/components/manage/danger-zone";
import { DangerZoneItem, DangerZoneRoot } from "~/components/manage/danger-zone";
import { catchTrpcNotFound } from "~/errors/trpc-not-found";
import { createMetaTitle } from "~/metadata";
import { canAccessUserEditPage } from "../access";

27
apps/nextjs/src/app/[locale]/manage/users/[userId]/layout.tsx
View File

@@ -1,16 +1,7 @@
import type { PropsWithChildren } from "react";
import Link from "next/link";
import { notFound } from "next/navigation";
import {
Button,
Container,
Grid,
GridCol,
Group,
Stack,
Text,
Title,
} from "@mantine/core";
import { Button, Container, Grid, GridCol, Group, Stack, Text, Title } from "@mantine/core";
import { IconSettings, IconShieldLock } from "@tabler/icons-react";
import { api } from "@homarr/api/server";
@@ -26,16 +17,11 @@ interface LayoutProps {
params: { userId: string };
}
export default async function Layout({
children,
params,
}: PropsWithChildren<LayoutProps>) {
export default async function Layout({ children, params }: PropsWithChildren<LayoutProps>) {
const session = await auth();
const t = await getI18n();
const tUser = await getScopedI18n("management.page.user");
const user = await api.user
.getById({ userId: params.userId })
.catch(catchTrpcNotFound);
const user = await api.user.getById({ userId: params.userId }).catch(catchTrpcNotFound);
if (!canAccessUserEditPage(session, user.id)) {
notFound();
@@ -54,12 +40,7 @@ export default async function Layout({
</Stack>
</Group>
{session?.user.permissions.includes("admin") && (
<Button
component={Link}
href="/manage/users"
color="gray"
variant="light"
>
<Button component={Link} href="/manage/users" color="gray" variant="light">
{tUser("back")}
</Button>
)}

11
apps/nextjs/src/app/[locale]/manage/users/[userId]/security/_components/_change-password-form.tsx
View File

@@ -6,10 +6,7 @@ import type { RouterInputs, RouterOutputs } from "@homarr/api";
import { clientApi } from "@homarr/api/client";
import { useSession } from "@homarr/auth/client";
import { useZodForm } from "@homarr/form";
import {
showErrorNotification,
showSuccessNotification,
} from "@homarr/notifications";
import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
import { useI18n } from "@homarr/translation/client";
import { validation } from "@homarr/validation";
@@ -74,11 +71,7 @@ export const ChangePasswordForm = ({ user }: ChangePasswordFormProps) => {
/>
)}
<PasswordInput
withAsterisk
label={t("user.field.password.label")}
{...form.getInputProps("password")}
/>
<PasswordInput withAsterisk label={t("user.field.password.label")} {...form.getInputProps("password")} />
<PasswordInput
withAsterisk

4
apps/nextjs/src/app/[locale]/manage/users/[userId]/security/page.tsx
View File

@@ -17,9 +17,7 @@ interface Props {
export default async function UserSecurityPage({ params }: Props) {
const session = await auth();
const tSecurity = await getScopedI18n(
"management.page.user.setting.security",
);
const tSecurity = await getScopedI18n("management.page.user.setting.security");
const user = await api.user
.getById({
userId: params.userId,

8
apps/nextjs/src/app/[locale]/manage/users/_components/user-list.component.tsx
View File

@@ -15,18 +15,14 @@ interface UserListComponentProps {
initialUserList: RouterOutputs["user"]["getAll"];
}
export const UserListComponent = ({
initialUserList,
}: UserListComponentProps) => {
export const UserListComponent = ({ initialUserList }: UserListComponentProps) => {
const tUserList = useScopedI18n("management.page.user.list");
const t = useI18n();
const { data, isLoading } = clientApi.user.getAll.useQuery(undefined, {
initialData: initialUserList,
});
const columns = useMemo<
MRT_ColumnDef<RouterOutputs["user"]["getAll"][number]>[]
>(
const columns = useMemo<MRT_ColumnDef<RouterOutputs["user"]["getAll"][number]>[]>(
() => [
{
accessorKey: "name",

53
apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx
View File

@@ -1,16 +1,7 @@
"use client";
import { useCallback, useMemo, useState } from "react";
import {
Avatar,
Card,
PasswordInput,
Stack,
Stepper,
Text,
TextInput,
Title,
} from "@mantine/core";
import { Avatar, Card, PasswordInput, Stack, Stepper, Text, TextInput, Title } from "@mantine/core";
import { IconUserCheck } from "@tabler/icons-react";
import { clientApi } from "@homarr/api/client";
@@ -28,14 +19,10 @@ export const UserCreateStepperComponent = () => {
const stepperMax = 4;
const [active, setActive] = useState(0);
const nextStep = useCallback(
() =>
setActive((current) => (current < stepperMax ? current + 1 : current)),
[setActive],
);
const prevStep = useCallback(
() => setActive((current) => (current > 0 ? current - 1 : current)),
() => setActive((current) => (current < stepperMax ? current + 1 : current)),
[setActive],
);
const prevStep = useCallback(() => setActive((current) => (current > 0 ? current - 1 : current)), [setActive]);
const hasNext = active < stepperMax;
const hasPrevious = active > 0;
@@ -72,14 +59,9 @@ export const UserCreateStepperComponent = () => {
},
);
const allForms = useMemo(
() => [generalForm, securityForm],
[generalForm, securityForm],
);
const allForms = useMemo(() => [generalForm, securityForm], [generalForm, securityForm]);
const isCurrentFormValid = allForms[active]
? (allForms[active]!.isValid satisfies () => boolean)
: () => true;
const isCurrentFormValid = allForms[active] ? (allForms[active]!.isValid satisfies () => boolean) : () => true;
const canNavigateToNextStep = isCurrentFormValid();
const controlledGoToNextStep = useCallback(async () => {
@@ -104,12 +86,7 @@ export const UserCreateStepperComponent = () => {
return (
<>
<Title mb="md">{t("title")}</Title>
<Stepper
active={active}
onStepClick={setActive}
allowNextStepsSelect={false}
mb="md"
>
<Stepper active={active} onStepClick={setActive} allowNextStepsSelect={false} mb="md">
<Stepper.Step
label={t("step.personalInformation.label")}
allowStepSelect={false}
@@ -126,20 +103,12 @@ export const UserCreateStepperComponent = () => {
{...generalForm.getInputProps("username")}
/>
<TextInput
label={tUserField("email.label")}
variant="filled"
{...generalForm.getInputProps("email")}
/>
<TextInput label={tUserField("email.label")} variant="filled" {...generalForm.getInputProps("email")} />
</Stack>
</Card>
</form>
</Stepper.Step>
<Stepper.Step
label={t("step.security.label")}
allowStepSelect={false}
allowStepClick={false}
>
<Stepper.Step label={t("step.security.label")} allowStepSelect={false} allowStepClick={false}>
<form>
<Card p="xl">
<Stack gap="md">
@@ -167,11 +136,7 @@ export const UserCreateStepperComponent = () => {
>
3
</Stepper.Step>
<Stepper.Step
label={t("step.review.label")}
allowStepSelect={false}
allowStepClick={false}
>
<Stepper.Step label={t("step.review.label")} allowStepSelect={false} allowStepClick={false}>
<Card p="xl">
<Stack maw={300} align="center" mx="auto">
<Avatar size="xl">{generalForm.values.username}</Avatar>

19
apps/nextjs/src/app/[locale]/manage/users/create/_components/stepper-navigation.component.tsx
View File

@@ -1,11 +1,6 @@
import Link from "next/link";
import { Button, Card, Group } from "@mantine/core";
import {
IconArrowBackUp,
IconArrowLeft,
IconArrowRight,
IconRotate,
} from "@tabler/icons-react";
import { IconArrowBackUp, IconArrowLeft, IconArrowRight, IconRotate } from "@tabler/icons-react";
import { useI18n } from "@homarr/translation/client";
@@ -51,18 +46,10 @@ export const StepperNavigationComponent = ({
</Group>
) : (
<Group justify="end" wrap="nowrap">
<Button
variant="light"
leftSection={<IconRotate size="1rem" />}
onClick={reset}
>
<Button variant="light" leftSection={<IconRotate size="1rem" />} onClick={reset}>
{t("management.page.user.create.action.createAnother")}
</Button>
<Button
leftSection={<IconArrowBackUp size="1rem" />}
component={Link}
href="/manage/users"
>
<Button leftSection={<IconArrowBackUp size="1rem" />} component={Link} href="/manage/users">
{t("management.page.user.create.action.back")}
</Button>
</Group>

15
apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_delete-group.tsx
View File

@@ -6,10 +6,7 @@ import { Button } from "@mantine/core";
import { clientApi } from "@homarr/api/client";
import { useConfirmModal } from "@homarr/modals";
import {
showErrorNotification,
showSuccessNotification,
} from "@homarr/notifications";
import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
import { useI18n, useScopedI18n } from "@homarr/translation/client";
import { revalidatePathActionAsync } from "~/app/revalidatePathAction";
@@ -63,15 +60,7 @@ export const DeleteGroup = ({ group }: DeleteGroupProps) => {
);
},
});
}, [
tDelete,
tRoot,
openConfirmModal,
group.id,
group.name,
mutateAsync,
router,
]);
}, [tDelete, tRoot, openConfirmModal, group.id, group.name, mutateAsync, router]);
return (
<Button variant="subtle" color="red" onClick={handleDeletion}>

10
apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_navigation.tsx
View File

@@ -14,13 +14,5 @@ interface NavigationLinkProps {
export const NavigationLink = ({ href, icon, label }: NavigationLinkProps) => {
const pathName = usePathname();
return (
<NavLink
component={Link}
href={href}
active={pathName === href}
label={label}
leftSection={icon}
/>
);
return <NavLink component={Link} href={href} active={pathName === href} label={label} leftSection={icon} />;
};

10
apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_rename-group-form.tsx
View File

@@ -5,10 +5,7 @@ import { Button, Group, Stack, TextInput } from "@mantine/core";
import { clientApi } from "@homarr/api/client";
import { useZodForm } from "@homarr/form";
import {
showErrorNotification,
showSuccessNotification,
} from "@homarr/notifications";
import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
import { useI18n } from "@homarr/translation/client";
import { validation } from "@homarr/validation";
@@ -64,10 +61,7 @@ export const RenameGroupForm = ({ group }: RenameGroupFormProps) => {
return (
<form onSubmit={form.onSubmit(handleSubmit)}>
<Stack>
<TextInput
label={t("group.field.name")}
{...form.getInputProps("name")}
/>
<TextInput label={t("group.field.name")} {...form.getInputProps("name")} />
<Group justify="end">
<Button type="submit" color="teal" loading={isPending}>

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

@@ -5,10 +5,7 @@ import { Button } from "@mantine/core";
import { clientApi } from "@homarr/api/client";
import { useConfirmModal, useModalAction } from "@homarr/modals";
import {
showErrorNotification,
showSuccessNotification,
} from "@homarr/notifications";
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";
@@ -21,9 +18,7 @@ interface TransferGroupOwnershipProps {
};
}
export const TransferGroupOwnership = ({
group,
}: TransferGroupOwnershipProps) => {
export const TransferGroupOwnership = ({ group }: TransferGroupOwnershipProps) => {
const tTransfer = useScopedI18n("group.action.transfer");
const tRoot = useI18n();
const [innerOwnerId, setInnerOwnerId] = useState(group.ownerId);
@@ -77,16 +72,7 @@ export const TransferGroupOwnership = ({
title: tTransfer("label"),
},
);
}, [
group.id,
group.name,
innerOwnerId,
mutateAsync,
openConfirmModal,
openModal,
tRoot,
tTransfer,
]);
}, [group.id, group.name, innerOwnerId, mutateAsync, openConfirmModal, openModal, tRoot, tTransfer]);
return (
<Button variant="subtle" color="red" onClick={handleTransfer}>

23
apps/nextjs/src/app/[locale]/manage/users/groups/[id]/layout.tsx
View File

@@ -1,15 +1,6 @@
import type { PropsWithChildren } from "react";
import Link from "next/link";
import {
Button,
Container,
Grid,
GridCol,
Group,
Stack,
Text,
Title,
} from "@mantine/core";
import { Button, Container, Grid, GridCol, Group, Stack, Text, Title } from "@mantine/core";
import { IconLock, IconSettings, IconUsersGroup } from "@tabler/icons-react";
import { api } from "@homarr/api/server";
@@ -21,10 +12,7 @@ interface LayoutProps {
params: { id: string };
}
export default async function Layout({
children,
params,
}: PropsWithChildren<LayoutProps>) {
export default async function Layout({ children, params }: PropsWithChildren<LayoutProps>) {
const t = await getI18n();
const tGroup = await getScopedI18n("management.page.group");
const group = await api.group.getById({ id: params.id });
@@ -38,12 +26,7 @@ export default async function Layout({
<Title order={3}>{group.name}</Title>
<Text c="gray.5">{t("group.name")}</Text>
</Stack>
<Button
component={Link}
href="/manage/users/groups"
color="gray"
variant="light"
>
<Button component={Link} href="/manage/users/groups" color="gray" variant="light">
{tGroup("back")}
</Button>
</Group>

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

@@ -15,10 +15,7 @@ interface AddGroupMemberProps {
presentUserIds: string[];
}
export const AddGroupMember = ({
groupId,
presentUserIds,
}: AddGroupMemberProps) => {
export const AddGroupMember = ({ groupId, presentUserIds }: AddGroupMemberProps) => {
const tMembersAdd = useScopedI18n("group.action.addMember");
const { mutateAsync } = clientApi.group.addMember.useMutation();
const { openModal } = useModalAction(UserSelectModal);
@@ -32,9 +29,7 @@ export const AddGroupMember = ({
userId: id,
groupId,
});
await revalidatePathActionAsync(
`/manage/users/groups/${groupId}}/members`,
);
await revalidatePathActionAsync(`/manage/users/groups/${groupId}}/members`);
},
presentUserIds,
},

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

@@ -14,10 +14,7 @@ interface RemoveGroupMemberProps {
user: { id: string; name: string | null };
}
export const RemoveGroupMember = ({
groupId,
user,
}: RemoveGroupMemberProps) => {
export const RemoveGroupMember = ({ groupId, user }: RemoveGroupMemberProps) => {
const t = useI18n();
const tRemoveMember = useScopedI18n("group.action.removeMember");
const { mutateAsync } = clientApi.group.removeMember.useMutation();
@@ -35,27 +32,13 @@ export const RemoveGroupMember = ({
groupId,
userId: user.id,
});
await revalidatePathActionAsync(
`/manage/users/groups/${groupId}/members`,
);
await revalidatePathActionAsync(`/manage/users/groups/${groupId}/members`);
},
});
}, [
openConfirmModal,
mutateAsync,
groupId,
user.id,
user.name,
tRemoveMember,
]);
}, [openConfirmModal, mutateAsync, groupId, user.id, user.name, tRemoveMember]);
return (
<Button
variant="subtle"
color="red.9"
size="compact-sm"
onClick={handleRemove}
>
<Button variant="subtle" color="red.9" size="compact-sm" onClick={handleRemove}>
{t("common.action.remove")}
</Button>
);

29
apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/page.tsx
View File

@@ -1,16 +1,5 @@
import Link from "next/link";
import {
Anchor,
Center,
Group,
Stack,
Table,
TableTbody,
TableTd,
TableTr,
Text,
Title,
} from "@mantine/core";
import { Anchor, Center, Group, Stack, Table, TableTbody, TableTd, TableTr, Text, Title } from "@mantine/core";
import type { RouterOutputs } from "@homarr/api";
import { api } from "@homarr/api/server";
@@ -29,20 +18,13 @@ interface GroupsDetailPageProps {
};
}
export default async function GroupsDetailPage({
params,
searchParams,
}: GroupsDetailPageProps) {
export default async function GroupsDetailPage({ params, searchParams }: GroupsDetailPageProps) {
const t = await getI18n();
const tMembers = await getScopedI18n("management.page.group.setting.members");
const group = await api.group.getById({ id: params.id });
const filteredMembers = searchParams.search
? group.members.filter((member) =>
member.name
?.toLowerCase()
.includes(searchParams.search!.trim().toLowerCase()),
)
? group.members.filter((member) => member.name?.toLowerCase().includes(searchParams.search!.trim().toLowerCase()))
: group.members;
return (
@@ -56,10 +38,7 @@ export default async function GroupsDetailPage({
})}
defaultValue={searchParams.search}
/>
<AddGroupMember
groupId={group.id}
presentUserIds={group.members.map((member) => member.id)}
/>
<AddGroupMember groupId={group.id} presentUserIds={group.members.map((member) => member.id)} />
</Group>
{filteredMembers.length === 0 && (
<Center py="sm">

9
apps/nextjs/src/app/[locale]/manage/users/groups/[id]/page.tsx
View File

@@ -3,10 +3,7 @@ import { Stack, Title } from "@mantine/core";
import { api } from "@homarr/api/server";
import { getScopedI18n } from "@homarr/translation/server";
import {
DangerZoneItem,
DangerZoneRoot,
} from "~/components/manage/danger-zone";
import { DangerZoneItem, DangerZoneRoot } from "~/components/manage/danger-zone";
import { DeleteGroup } from "./_delete-group";
import { RenameGroupForm } from "./_rename-group-form";
import { TransferGroupOwnership } from "./_transfer-group-ownership";
@@ -17,9 +14,7 @@ interface GroupsDetailPageProps {
};
}
export default async function GroupsDetailPage({
params,
}: GroupsDetailPageProps) {
export default async function GroupsDetailPage({ params }: GroupsDetailPageProps) {
const group = await api.group.getById({ id: params.id });
const tGeneral = await getScopedI18n("management.page.group.setting.general");
const tGroupAction = await getScopedI18n("group.action");

14
apps/nextjs/src/app/[locale]/manage/users/groups/[id]/permissions/_group-permission-form.tsx
View File

@@ -9,10 +9,7 @@ import { objectEntries } from "@homarr/common";
import type { GroupPermissionKey } from "@homarr/definitions";
import { groupPermissionKeys } from "@homarr/definitions";
import { createFormContext } from "@homarr/form";
import {
showErrorNotification,
showSuccessNotification,
} from "@homarr/notifications";
import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
import { useI18n, useScopedI18n } from "@homarr/translation/client";
const [FormProvider, useFormContext, useForm] = createFormContext<FormType>();
@@ -21,10 +18,7 @@ interface PermissionFormProps {
initialPermissions: GroupPermissionKey[];
}
export const PermissionForm = ({
children,
initialPermissions,
}: PropsWithChildren<PermissionFormProps>) => {
export const PermissionForm = ({ children, initialPermissions }: PropsWithChildren<PermissionFormProps>) => {
const form = useForm({
initialValues: groupPermissionKeys.reduce((acc, key) => {
acc[key] = initialPermissions.includes(key);
@@ -73,9 +67,7 @@ interface SaveAffixProps {
export const SaveAffix = ({ groupId }: SaveAffixProps) => {
const t = useI18n();
const tForm = useScopedI18n("management.page.group.setting.permissions.form");
const tNotification = useScopedI18n(
"group.action.changePermissions.notification",
);
const tNotification = useScopedI18n("group.action.changePermissions.notification");
const form = useFormContext();
const { mutate, isPending } = clientApi.group.savePermissions.useMutation();

25
apps/nextjs/src/app/[locale]/manage/users/groups/[id]/permissions/page.tsx
View File

@@ -1,13 +1,5 @@
import React from "react";
import {
Card,
CardSection,
Divider,
Group,
Stack,
Text,
Title,
} from "@mantine/core";
import { Card, CardSection, Divider, Group, Stack, Text, Title } from "@mantine/core";
import { api } from "@homarr/api/server";
import { objectKeys } from "@homarr/common";
@@ -15,11 +7,7 @@ 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 { PermissionForm, PermissionSwitch, SaveAffix } from "./_group-permission-form";
interface GroupPermissionsPageProps {
params: {
@@ -27,9 +15,7 @@ interface GroupPermissionsPageProps {
};
}
export default async function GroupPermissionsPage({
params,
}: GroupPermissionsPageProps) {
export default async function GroupPermissionsPage({ params }: GroupPermissionsPageProps) {
const group = await api.group.getById({ id: params.id });
const tPermissions = await getScopedI18n("group.permission");
const t = await getI18n();
@@ -99,10 +85,7 @@ const PermissionCard = async ({ group, isDanger }: PermissionCardProps) => {
);
};
const createGroupPermissionKey = (
group: keyof typeof groupPermissions,
permission: string,
): GroupPermissionKey => {
const createGroupPermissionKey = (group: keyof typeof groupPermissions, permission: string): GroupPermissionKey => {
if (typeof groupPermissions[group] === "boolean") {
return group as GroupPermissionKey;
}

11
apps/nextjs/src/app/[locale]/manage/users/groups/_add-group.tsx
View File

@@ -6,10 +6,7 @@ import { Button, Group, Stack, TextInput } from "@mantine/core";
import { clientApi } from "@homarr/api/client";
import { useZodForm } from "@homarr/form";
import { createModal, useModalAction } from "@homarr/modals";
import {
showErrorNotification,
showSuccessNotification,
} from "@homarr/notifications";
import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
import { useI18n } from "@homarr/translation/client";
import { validation } from "@homarr/validation";
@@ -61,11 +58,7 @@ const AddGroupModal = createModal<void>(({ actions }) => {
})}
>
<Stack>
<TextInput
label={t("group.field.name")}
data-autofocus
{...form.getInputProps("name")}
/>
<TextInput label={t("group.field.name")} data-autofocus {...form.getInputProps("name")} />
<Group justify="right">
<Button onClick={actions.closeModal} variant="subtle" color="gray">
{t("common.action.cancel")}

19
apps/nextjs/src/app/[locale]/manage/users/groups/page.tsx
View File

@@ -27,25 +27,18 @@ const searchParamsSchema = z.object({
page: z.string().regex(/\d+/).transform(Number).catch(1),
});
type SearchParamsSchemaInputFromSchema<
TSchema extends Record<string, unknown>,
> = Partial<{
[K in keyof TSchema]: Exclude<TSchema[K], undefined> extends unknown[]
? string[]
: string;
type SearchParamsSchemaInputFromSchema<TSchema extends Record<string, unknown>> = Partial<{
[K in keyof TSchema]: Exclude<TSchema[K], undefined> extends unknown[] ? string[] : string;
}>;
interface GroupsListPageProps {
searchParams: SearchParamsSchemaInputFromSchema<
z.infer<typeof searchParamsSchema>
>;
searchParams: SearchParamsSchemaInputFromSchema<z.infer<typeof searchParamsSchema>>;
}
export default async function GroupsListPage(props: GroupsListPageProps) {
const t = await getI18n();
const searchParams = searchParamsSchema.parse(props.searchParams);
const { items: groups, totalCount } =
await api.group.getPaginated(searchParams);
const { items: groups, totalCount } = await api.group.getPaginated(searchParams);
return (
<Container size="xl">
@@ -76,9 +69,7 @@ export default async function GroupsListPage(props: GroupsListPageProps) {
</Table>
<Group justify="end">
<TablePagination
total={Math.ceil(totalCount / searchParams.pageSize)}
/>
<TablePagination total={Math.ceil(totalCount / searchParams.pageSize)} />
</Group>
</Stack>
</Container>

12
apps/nextjs/src/app/[locale]/manage/users/invites/_components/invite-copy-modal.tsx
View File

@@ -6,9 +6,7 @@ import type { RouterOutputs } from "@homarr/api";
import { createModal } from "@homarr/modals";
import { useScopedI18n } from "@homarr/translation/client";
export const InviteCopyModal = createModal<
RouterOutputs["invite"]["createInvite"]
>(({ actions, innerProps }) => {
export const InviteCopyModal = createModal<RouterOutputs["invite"]["createInvite"]>(({ actions, innerProps }) => {
const t = useScopedI18n("management.page.user.invite");
const inviteUrl = useInviteUrl(innerProps);
@@ -50,13 +48,9 @@ export const InviteCopyModal = createModal<
},
});
const createPath = ({ id, token }: RouterOutputs["invite"]["createInvite"]) =>
`/auth/invite/${id}?token=${token}`;
const createPath = ({ id, token }: RouterOutputs["invite"]["createInvite"]) => `/auth/invite/${id}?token=${token}`;
const useInviteUrl = ({
id,
token,
}: RouterOutputs["invite"]["createInvite"]) => {
const useInviteUrl = ({ id, token }: RouterOutputs["invite"]["createInvite"]) => {
const pathname = usePathname();
return window.location.href.replace(pathname, createPath({ id, token }));

21
apps/nextjs/src/app/[locale]/manage/users/invites/_components/invite-list.tsx
View File

@@ -21,9 +21,7 @@ interface InviteListComponentProps {
initialInvites: RouterOutputs["invite"]["getAll"];
}
export const InviteListComponent = ({
initialInvites,
}: InviteListComponentProps) => {
export const InviteListComponent = ({ initialInvites }: InviteListComponentProps) => {
const t = useScopedI18n("management.page.user.invite");
const { data, isLoading } = clientApi.invite.getAll.useQuery(undefined, {
initialData: initialInvites,
@@ -32,9 +30,7 @@ export const InviteListComponent = ({
refetchOnReconnect: false,
});
const columns = useMemo<
MRT_ColumnDef<RouterOutputs["invite"]["getAll"][number]>[]
>(
const columns = useMemo<MRT_ColumnDef<RouterOutputs["invite"]["getAll"][number]>[]>(
() => [
{
accessorKey: "id",
@@ -100,11 +96,7 @@ const RenderTopToolbarCustomActions = () => {
);
};
const RenderRowActions = ({
row,
}: {
row: MRT_Row<RouterOutputs["invite"]["getAll"][number]>;
}) => {
const RenderRowActions = ({ row }: { row: MRT_Row<RouterOutputs["invite"]["getAll"][number]> }) => {
const t = useScopedI18n("management.page.user.invite");
const { mutate, isPending } = clientApi.invite.deleteInvite.useMutation();
const utils = clientApi.useUtils();
@@ -121,12 +113,7 @@ const RenderRowActions = ({
}, [openConfirmModal, row.original.id, mutate, utils, t]);
return (
<ActionIcon
variant="subtle"
color="red"
onClick={handleDelete}
loading={isPending}
>
<ActionIcon variant="subtle" color="red" onClick={handleDelete} loading={isPending}>
<IconTrash color="red" size={20} stroke={1.5} />
</ActionIcon>
);